Best Urdu Training

How To Add Infinite Scrolling Effect In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPp5YtHcN5-2AO0TGAyRXPsEd-leDgnHphyphenhyphenxVBD2d_S-nLQ7IXt2OokQ8ILYjbjaKkD199wNAmLhKsM6CjbWcOuEKDVB8JdQ5jQld4jV8tJlHiOFcyv2MF3VvjgECJDaxLjx-L4fWgj5S/s1600/Infinite+Scrolling+Effect.jpg" /></div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 14px; line-height: 24px;">
<h3 style="font-size: 20px; line-height: 25px; margin-bottom: 10px; margin-top: 10px;">
How To Implement?</h3>
</div>
<div style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 14px; line-height: 24px;">
Installing this plugin in your blog is really left hand work. It is already built so you don't need to develop the code. So just follow the below given tips to get it in your blog.</div>
<div style="background-color: white;">
<ol style="color: #555555; font-family: 'open sans'; font-size: 14px; line-height: 24px; margin: auto; padding-left: 40px;">
<li style="line-height: 25px; padding-top: 10px;">Go To Blogger >> Template >> Backup Your Template</li>
<li style="line-height: 25px; padding-top: 10px;">Click Edit HTML >> Find For </head></li>
<li style="line-height: 25px; padding-top: 10px;">Paste The Following Code Above </head></li>
</ol>
 </div>
<div>
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == "index"'> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/> <script src='https://bloggeryard.googlecode.com/svn/trunk/Infinite%20Scroll%20Plugin.js' type='text/javascript'/> <script type='text/javascript'> jQuery.ias({     container : '.blog-posts',     item: '.post-outer',     pagination: '#blog-pager',     next: '#blog-pager-older-link a',     loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKfvT2B-CpRaB_ex1fwkm7oI6vwTrGuLiLWErGmALbzbmlQKHvBiJ7kOIbpNYu3ZLQRlUJsN43W-qAuIrQgWgSAz0GYLmpuVQ4Xtx4U1Jua78ntxCf9lo8Q4nl77vS0bBBB6ziSFTUXSUq/s1600/loading.gif' });   </script> </b:if></blockquote>
</div>
 
<div style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 14px; line-height: 24px;">
<ol style="margin: auto; padding-left: 40px;">
<li style="line-height: 25px; padding-top: 10px;">Replace The Highlighted Link With Any Loading Image. Copy The Loading GIF Image URL From The Following.</li>
<li style="line-height: 25px; padding-top: 10px;">Hit "Save Template!".</li>
</ol>
<h3 style="font-size: 20px; line-height: 25px; margin-bottom: 10px; margin-top: 10px;">
AJAX Loader GIF Images</h3>
</div>
<div style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 14px; line-height: 24px;">
Below I've listed some loading images. Just copy their URL and replace it with the yellow highlighted code.</div>
<h4 style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 18px; line-height: 25px; margin-bottom: 10px; margin-top: 10px;">
Round Loader </h4>
<div>
 </div>
<div>
 </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN0d56rLDGDSBTsQx7h7gPh62gBypPUt26NiLxdxRh0yCNU1kuub6K4vhU7kIqwdf8-ddPi9ZSvCMHne21GAIBV1fEwqZLSNuqJswAB_yiXiMrZT71KU0cHKX0xTGKF-UFXAXpNpGsm1P1/s1600/Round+Loader.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN0d56rLDGDSBTsQx7h7gPh62gBypPUt26NiLxdxRh0yCNU1kuub6K4vhU7kIqwdf8-ddPi9ZSvCMHne21GAIBV1fEwqZLSNuqJswAB_yiXiMrZT71KU0cHKX0xTGKF-UFXAXpNpGsm1P1/s1600/Round+Loader.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN0d56rLDGDSBTsQx7h7gPh62gBypPUt26NiLxdxRh0yCNU1kuub6K4vhU7kIqwdf8-ddPi9ZSvCMHne21GAIBV1fEwqZLSNuqJswAB_yiXiMrZT71KU0cHKX0xTGKF-UFXAXpNpGsm1P1/s1600/Round+Loader.gif</blockquote>
 
 
<h4 style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 18px; line-height: 25px; margin-bottom: 10px; margin-top: 10px;">
Rounding Arrows</h4>
<div>
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizB5mDUGa_kgTa2pKXsuh8lOH8DhwVCscgJXv-yh6nKc977qleNSlsodBRwV_4nIufErfcDhkbVS6Iy4N5aOAtPu78Gzlb9JEMtmoXSHeM_f-ZXe8d66-P4p5o3uX5EBGcIvyFNArJgFPK/s1600/arrow+loader.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizB5mDUGa_kgTa2pKXsuh8lOH8DhwVCscgJXv-yh6nKc977qleNSlsodBRwV_4nIufErfcDhkbVS6Iy4N5aOAtPu78Gzlb9JEMtmoXSHeM_f-ZXe8d66-P4p5o3uX5EBGcIvyFNArJgFPK/s1600/arrow+loader.gif" /></a></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizB5mDUGa_kgTa2pKXsuh8lOH8DhwVCscgJXv-yh6nKc977qleNSlsodBRwV_4nIufErfcDhkbVS6Iy4N5aOAtPu78Gzlb9JEMtmoXSHeM_f-ZXe8d66-P4p5o3uX5EBGcIvyFNArJgFPK/s1600/arrow+loader.gif</blockquote>
 
 
<h4 style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 18px; line-height: 25px; margin-bottom: 10px; margin-top: 10px;">
 Silver Arrows Circle</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrgnRVwDPy08k_SEYCDTxUKrhOPit9hZQm0xRlTOKEDUbdU_ywL5A_VdaTkJQxDRQw453XLPw18HbAM8pCyebG8sycwzGIj0YwGcNASxhEu4NcFU64caEEkObcbxr4lfk_TiF3QhjvB3wp/s1600/silver+arrows+circle.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrgnRVwDPy08k_SEYCDTxUKrhOPit9hZQm0xRlTOKEDUbdU_ywL5A_VdaTkJQxDRQw453XLPw18HbAM8pCyebG8sycwzGIj0YwGcNASxhEu4NcFU64caEEkObcbxr4lfk_TiF3QhjvB3wp/s1600/silver+arrows+circle.gif" /></a></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrgnRVwDPy08k_SEYCDTxUKrhOPit9hZQm0xRlTOKEDUbdU_ywL5A_VdaTkJQxDRQw453XLPw18HbAM8pCyebG8sycwzGIj0YwGcNASxhEu4NcFU64caEEkObcbxr4lfk_TiF3QhjvB3wp/s1600/silver+arrows+circle.gif</blockquote>
 
 
<h4 style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 18px; line-height: 25px; margin-bottom: 10px; margin-top: 10px;">
Cool Blue Rouding Arrow</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic69U7NE1QjklppriwFva1cKsFFnV0yA8iXv2VG0xPGluqol-DFf6tgAUm_1em816NNeaETx40Zh9YGGpHns_qcGF0vzgfm-CRSDylHC-KsfpaaJob6dopGJrAeikNaQ9IO1jcsC5Tc6nB/s1600/blue.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic69U7NE1QjklppriwFva1cKsFFnV0yA8iXv2VG0xPGluqol-DFf6tgAUm_1em816NNeaETx40Zh9YGGpHns_qcGF0vzgfm-CRSDylHC-KsfpaaJob6dopGJrAeikNaQ9IO1jcsC5Tc6nB/s1600/blue.gif" /></a></div>
<blockquote class="tr_bq">
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic69U7NE1QjklppriwFva1cKsFFnV0yA8iXv2VG0xPGluqol-DFf6tgAUm_1em816NNeaETx40Zh9YGGpHns_qcGF0vzgfm-CRSDylHC-KsfpaaJob6dopGJrAeikNaQ9IO1jcsC5Tc6nB/s1600/blue.gif</blockquote>
 
<h4 style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 18px; line-height: 25px; margin-bottom: 10px; margin-top: 10px;">
Red Loader</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsU_IjeQUAMa153NHt0IAKps2IraftvRlDuUTkgIVN6fgn62yAy6nuLwF-MDq0eikL4T98zqHVJHcmbakF1GGKO3RgtRNH2syyJ5yAwc8qU-Jgnfa0AMvpYUUDbN7slMcpKXhgX1oCKGgz/s1600/red+loader.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsU_IjeQUAMa153NHt0IAKps2IraftvRlDuUTkgIVN6fgn62yAy6nuLwF-MDq0eikL4T98zqHVJHcmbakF1GGKO3RgtRNH2syyJ5yAwc8qU-Jgnfa0AMvpYUUDbN7slMcpKXhgX1oCKGgz/s1600/red+loader.gif" /></a></div>
<blockquote class="tr_bq">
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsU_IjeQUAMa153NHt0IAKps2IraftvRlDuUTkgIVN6fgn62yAy6nuLwF-MDq0eikL4T98zqHVJHcmbakF1GGKO3RgtRNH2syyJ5yAwc8qU-Jgnfa0AMvpYUUDbN7slMcpKXhgX1oCKGgz/s1600/red+loader.gif</blockquote>
<h4 style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 18px; line-height: 25px; margin-bottom: 10px; margin-top: 10px;">
Border Loader</h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHVM6HE4UjYUVv2kvEdOWO68pwjF86QB40Blp5CeRWq8NH4O2uWY2uQfpROLL_KKVazpo7VyWQTo1Eov_GOpDT1itArHs5hcfPqVl8oVgkIxLWtCuVvespzsbJac8-um0m8HtTGMNlnQdz/s1600/border+loader.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHVM6HE4UjYUVv2kvEdOWO68pwjF86QB40Blp5CeRWq8NH4O2uWY2uQfpROLL_KKVazpo7VyWQTo1Eov_GOpDT1itArHs5hcfPqVl8oVgkIxLWtCuVvespzsbJac8-um0m8HtTGMNlnQdz/s1600/border+loader.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<blockquote class="tr_bq">
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHVM6HE4UjYUVv2kvEdOWO68pwjF86QB40Blp5CeRWq8NH4O2uWY2uQfpROLL_KKVazpo7VyWQTo1Eov_GOpDT1itArHs5hcfPqVl8oVgkIxLWtCuVvespzsbJac8-um0m8HtTGMNlnQdz/s1600/border+loader.gif</blockquote>
 
<div class="separator" style="clear: both; text-align: center;">
</div>
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<h3 style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 20px; line-height: 25px; margin-bottom: 10px; margin-top: 10px;">
Final Words</h3>
<div style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 14px; line-height: 24px;">
So friends this was the infinite scrolling effect which I've shared today. I hope you've liked it and also the loading images. If you're facing problem in implementing this in your blog then feel free to ask in the comments area. Stay in touch with us for more impressive content and please subscribe us to receive email updates. Take a lot of care of you and your family. Happy Blogging!</div>
</div>
<div style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 14px; line-height: 24px;">
 </div>
<div style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 14px; line-height: 24px;">
 </div>
</div>

How To Add Infinite Scrolling Effect In Blogger

How To Implement? Installing this plugin in your blog is really left hand work. It is already built so you don't need to develop the code. So just follow the below given tips to get it in your blog. …

23 Mar 2014

Add Css/Jquery fixed horizontal menu to blogger blog

<div dir="ltr" style="text-align: left;" trbidi="on">
This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque again. Inside of the navigation there are some links, a search input and a top and bottom button that allows the user to navigate to the top or bottom of the page. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDE78bc-MuGSS4szH4QGRYLqqXYC8nAacg-_47KmOcDo5G9MpNnfpedLYehHFhHOPWzkVvFmYNrQHrujPQNIJ1bp8bfgyMNGiBFWPmQiAoUB12EzZrrLSp-_eB9CHt-usdGgevndxEdIfg/s1600/fixed+fade+out+menu+for+blogger.png" width="640" /></div>
 
Let's start adding it... 1. Go To Blogger - Template - Edit HTML 
 
 
 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxM6p4r24oeyaFqvobg3v1E3bRTVq6AsUKxxsrUMuj868PQwVrk96ptSajnWu0hoitJKZXD3lJKuFUHFJTqv9v52ePEnYpLorEgdkyS6Uo3Hlti0O8-G_ZgHF_74uR87AW62EKlkm-Nmsg/s1600/blogger-template-edit-html.png" width="400" /></div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
 ....and select the "expand widget templated" box:</div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMn46VnDbIcyBqYGygdy1Gl0g99JK1RnrpXi6ddcbwG6tb99n-c8uQ15NzuPCujIuaARQV3w0DXJAiWefcLqJBgVoRxLwDK5U1AoKGOty6alO4u3W7H6PJfqOaIfZLK38FHaBOVdSIcAq5/s1600/blogger-expand-widget-templates.png" width="400" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
2. Search (using CTRL + F) for this piece of code:</div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
 </head> </blockquote>
 
3. Just above/before the </head> tag, add this code: 
<blockquote class="tr_bq">
  <link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/><script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script> <script type="text/javascript">            $(function() {                $(window).scroll(function(){                    var scrollTop = $(window).scrollTop();                    if(scrollTop != 0)                        $('#nav').stop().animate({'opacity':'0.2'},400);                    else                            $('#nav').stop().animate({'opacity':'1'},400);                });                                $('#nav').hover(                    function (e) {                        var scrollTop = $(window).scrollTop();                        if(scrollTop != 0){                            $('#nav').stop().animate({'opacity':'1'},400);                        }                    },                    function (e) {                        var scrollTop = $(window).scrollTop();                        if(scrollTop != 0){                            $('#nav').stop().animate({'opacity':'0.2'},400);                        }                    }                );            });        </script></blockquote>
<div class="separator" style="clear: both; text-align: left;">
4) Now search for this tag:</div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<blockquote class="tr_bq">
 <body>  </blockquote>
 
If you can't find it, search for this one: 
<blockquote class="tr_bq">
 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> </blockquote>
 
5) Just below/after this code, copy and paste the following code: 
<blockquote class="tr_bq">
 <div id="nav"><ul><li><a class="top" href="#top"></a></li><li><a class="bottom" href="#bottom"></a></li><li><a href='URL address'>Link 1</a></li><li><a href='URL address'>Link 2</a></li><li><a href='URL address'>Link 3</a></li><li><a href='URL address'>Link 4</a></li><li><a href='URL address'>Link 5</a></li><li><a href='URL address'>Link 6</a></li><li class="search"><form method="get" action="/search"><input name="q" type="text" placeholder="Search..."/><input type="submit" value="" class="searchbutton"/>  </form></li></ul></div> <div id="top"></div><div class="desc"></div><div id="bottom"></div><div class="scroll"></div> </blockquote>
 
Note: Replace URL address with the URL of your pages and Link 1, 2, 3, 4, 5, 6 with the name of the link that will appear in the menu. 6) Now click on the Save Template button and you're done ;)  
 
 </div>

Add Css/Jquery fixed horizontal menu to blogger blog

This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque…

22 Mar 2014

Add Keyboard Keys Effect To Your Text in Blogger with CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
For many of us the design and the template are the most important, making our readers be more interested and coming back to our blog. There's an HTML element meant for marking up keyboard keys named <kbd>which can be styled with CSS, so why not use it to make those elements look the keyboard keys? Thus, in this tutorial, I am going to show you how to create a keyboard keys effect with CSS. It doesn't require images so your blog will load faster. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh83Cg8pE1VNekcGN1In4YaxrtUFOhAifCYHW9TjlUWJWQcPpCGSIHW4Hnnml1u-SiYQFAvJL-v1MGjf4x8zhcmeWUoTXsgdIzRusKrhhLnqkbFgJkF518x5CYdl0NcUWoRywpOc_H_NEQf/s1600/keyboard-keys-css-style-for-blogger.png" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<h2 style="border: none; color: #555555; font-family: 'Istok Web', sans-serif; font-size: large; list-style: none; margin: 0px; outline: none; padding: 0px 0px 10px;">
How to Add Keyboard Keys to Blogger</h2>
<div class="separator" style="clear: both;">
 Step 1. From <a href="http://www.blogger.com/" rel="nofollow" style="border: none; color: #0088b2; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Blogger Dashboard</a>, select your blog and go to Template > Edit HTML</div>
<div class="separator" style="clear: both;">
 </div>
 
 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxM6p4r24oeyaFqvobg3v1E3bRTVq6AsUKxxsrUMuj868PQwVrk96ptSajnWu0hoitJKZXD3lJKuFUHFJTqv9v52ePEnYpLorEgdkyS6Uo3Hlti0O8-G_ZgHF_74uR87AW62EKlkm-Nmsg/s1600/blogger-template-edit-html.png" width="400" /></div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
 
Step 2. Click anywhere inside the code area, press the Ctrl + F keys and search for this piece of code: 
<blockquote class="tr_bq">
 ]]></b:skin></blockquote>
 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5EYY-EALfOeyKxn0S7KO_VyZcT9ncm5tWX4XqHMbHszPhfpnhxCsmSNw-dnGSsZHny4ixIuUY-Tnr32Lxxs9_B6T0x6IOAsBSJWnPC7Bk3zMp-IbAckGf7oMaDpMWnuUbf7WSNUm-bp4g/s1600/blogger-b-skin-template-edit-html.png" width="640" /></div>
<blockquote class="tr_bq" style="clear: both;">
 
kbd{ 
border:1px solid gray; 
font-size:1.2em; 
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444; 
-webkit-border-radius:3px; 
-moz-border-radius:3px; 
border-radius:3px; 
margin:2px 3px; 
padding:1px 5px; 
}</blockquote>
 
<div id="adsmiddle14363580928127567563" style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
Step 4. To save the changes, press the Save change button. Finally, we need to add the html <kbd> tags to the text on which we want to apply the keyboard keys style.</div>
<div style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; margin: 10px auto;">
</div>
<div id="adsmiddle24363580928127567563" style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
From your blogger's dashboard, go to create a New Post, write the text on which you want to apply the style and go to the HTML tab. Before and after the text, add the following HTML tags:</div>
 
<blockquote class="tr_bq">
 <kbd>Ctrl</kbd> + <kbd>F</kbd></blockquote>
 
 
<div style="text-align: center;">
Screenshot</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMsUP6IKTyLKLOm28oi6kxmSwKMZ4cT6t3myytrsSsjtMPfAUlWkqszyAoYQBr7B19I8ons_DvEtfwnu3m55V_9JBSLsbDw3LM19-fyU6wLyqcXVvYAddKj0zm_z4WUvWqig-qR7tkbtv/s1600/text-with-keyboard-key-effect.png" width="320" /></div>
</div>
</div>

Add Keyboard Keys Effect To Your Text in Blogger with CSS

For many of us the design and the template are the most important, making our readers be more interested and coming back to our blog. There's an HTML element meant for marking up keyboard keys named …

22 Mar 2014

Add a Popular Posts Gallery just above your Blogger posts

<div dir="ltr" style="text-align: left;" trbidi="on">
The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It's a very effective method to increase the web site usability and engage the user. This widget shows the most popular 10 posts on your blog just above your Blogger posts. You can see the Demo on my blog. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3J1uEnrxEqr9Oh_SOrY3HLBQV4xpu5FFFiyJu3DcXKmG9pi4SeTByFy6N4-iTRfCGZTjR3zyp8kZiecY7Ax35NYU6TJoG2EOm0CJ7bAgyq1Me9rczy961eM2WJMkoCdSU9s4huaTJGyp7/s1600/popular+posts+blogger+blogspot+widget+with+jQuery+effect.png" width="640" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
Let's start adding it Before adding it you should know that this widget is not fully compatible with all templates, so please make a backup before making any changes to your blogger template. Now, follow these steps: 1. Go to Dashboard - Template - Edit HTML - click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box</div>
<ul style="border: none; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;"></ul>
<div class="separator" style="clear: both;">
2. Type or paste this piece of code inside the opened search box:</div>
<blockquote class="tr_bq">
 ]]></b:skin></blockquote>
Note: you might need to click on the arrow next to it and after try to find ]]></b:skin> again.3. Just above/before it, add the following code:  
<blockquote class="tr_bq">
 #gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaU2p_ib4e1AkJ3VaR3oP8JuuVXYebIG4ZBb64pyi1nO-4D8gRnIIXHw94rbuzbDsUeeJrESCsnYKcjSAEkicdgrlATt7Yobppqai_tNurKk0rUaDJXufmYCbulyRV7aGq4yarcIeOpV-D/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}</blockquote>
 
Note: you can adjust the size of gallery, changing the values in red (590 and 126). 
 
4. Now search for the following piece of code: 
<blockquote class="tr_bq">
</head> </blockquote>
 
5. Just above/before it, add this code: 
<blockquote class="tr_bq">
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[stepcarousel.setup({galleryid: "gallery",beltclass: "belt",panelclass: "panel",autostep: {enable:true, moveby:1, pause:6000},panelbehavior: {speed:500, wraparound:true, persist:true},defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj25S80aKQQ3ij2fkzY-XWRjcniCkbawAnQkP3-dXMwmuSnfL6iJmoIpBhrCH2aI1SHrw8qntLnKQH7POOxfPlgA3qPf83K0RVZ_M0dYxyztH_iWqSONPy6qaVPCcmMBL1b0tLx0VAahHb9/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhankRdMTmXqvRO2kbMOcr6fNunVkOX9mib_CRBBaNyA5rqnuGIFvcIef1-dZkqXiB1ykyrDHZOXC2gadfqet6Ns6bFrya9nLnoxwnCXLVUxQg-WL9nKnvAPZ6GzkHCsk7ywrTBzwrYVqbd/s1600/next.png", 2, 36]},contenttype: ["external"]})//]]></script> </blockquote>
 
Next thing to do is to place the widget just above the blogger posts. 
 
6. Search for this code: 
 
<blockquote class="tr_bq">
 <b:section class='main' id='main' showaddelement='yes'> </blockquote>
 
...or if you can'find it, search for this one: 
<blockquote class="tr_bq">
 <b:section class='main' id='main' showaddelement='no'></blockquote>
 
7. Just below it, add the following code: 
<blockquote class="tr_bq">
 <b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'><b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'><div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>  <div id='gallery'>   <ul class='belt'>    <b:loop values='data:posts' var='post'>     <li class='panel'>      <b:if cond='data:showThumbnails == &quot;false&quot;'>       <b:if cond='data:showSnippets == &quot;false&quot;'>        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>       <b:else/>        <div class='item-title'>         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>        </div>        <div class='item-snippet'>         <data:post.snippet/>        </div>       </b:if>      <b:else/>       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>        <b:if cond='data:post.thumbnail'>         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>        <b:else/>         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVIKaz4_TaDWHALYxWw3eEs_rCdA37RlwJe8dElR2vUquLBp8yOYmOzd_GlihRGYQK0JO5zhECxweDXm743yPdMlLez05p3wuhoSyPWng3E_Sf_MMICskWPmv3-34TnqqcPDQs7Z38wVRk/s1600/no-image.PNG'/>        </b:if>       </a>      </b:if>     </li>    </b:loop>   </ul>  </div></div></b:if> </b:includable></b:widget> </blockquote>
 
Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also. 
 
8. Preview and if everything is ok, Save the Template. 
 
 </div>

Add a Popular Posts Gallery just above your Blogger posts

The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It's a very effective method to increase the web site usabili…

22 Mar 2014

How to add go to top and go to bottom buttons Using jQuery in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="tr_bq">
The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog.</div>
 
Demo 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx1y0_W2z83yiwmyPjT5S0bESXWs6xGmgH3nAr4dcCO8OzAZutm0zNenLQZmH5iz60bNM-AbjhmLhdiSvJjpL39UVkQfjk0Q5WxE38dYL5apSklrjhszsE5XruSoXJARj2d6_DMa7itcjO/s1600/Capture.PNG" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
How to put Go Up and Go Down buttons using the jQuery slide effect</div>
 
Step 1. Go to Template, click on the Edit HTML button 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQ-ObF0lH-QjjCxdvw33i8fleKhbxbGxKPup14HCFfhE7VnjA43wavF48sZFHswE8nj2mjnMEBeG3FmGKjrJQBvrLcFpbakl8dhSNarmjYpXLxpzVgWPBPJOqqvfrsVek04dfERqGO6MJ/s1600/blogger-template-edit-html.png" width="400" /></div>
 
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box 
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #333333; font-family: 'Istok Web', sans-serif; text-align: center;">
</div>
 
Step 3. Copy and paste the following piece of code inside the search box in order to find it: 
<blockquote class="tr_bq">
 ]]></b:skin></blockquote>
 
Step 4. Just above ]]></b:skin> paste this one: 
<blockquote class="tr_bq">
 /* Up and Down Buttons with jQuery 
----------------------------------------------- */ 
.button_up{ 
padding:7px; /* Distance between the border and the icon */ 
background-color:white; 
border:1px solid #CCC; /* Border Color */ 
position:fixed; 
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWVXSY419_SF1xfmYjd4yH9J7h6-MMj0oPhyQlU_5YqK-vR639NK0VxiIn-FamfI72uwlQgSoZ-eG-v9nXsXaJZfUMNB1pHslmeQK_JDA5S3QWslgplAgJyt2cc7rKF593QLDYeGRQ98/s16/arrow_up.png) no-repeat top left; 
background-position:50% 50%; 
width:20px; /* Button's width */ 
height:20px; /* Button's height */ 
bottom:280px; /* Distance from the bottom */ 
right:5px; /* Change right to left if you want the buttons on the left */ 
white-space:nowrap; 
cursor: pointer; 
border-radius: 3px 3px 3px 3px; 
opacity:0.7; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); 
} 
.button_down{ 
padding:7px; /* Distance between the border and the icon */ 
background-color:white; 
border:1px solid #CCC; /* Border Color */ 
position:fixed; 
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikW9ImrIMVw7lHNMyxsUlM6mgvrdn9t38TG8xe1mtQqCVzlmvTzoM7uj-74S-JmtazM1ozHVWsRKWXr8YadUYSbNj5rkO40n7oEdnk2aVF6eL0leOcEjWpkWJvbHkXsh_gtIkcW2Oo2Ek/s16/arrow_down.png) no-repeat top left; 
background-position:50% 50%; 
width:20px; /* Button's width */ 
height:20px; /* Button's height */ 
bottom:242px; /* Distance from the bottom */ 
right:5px; /* Change right to left if you want the buttons on the left */ 
white-space:nowrap; 
cursor: pointer; 
border-radius: 3px 3px 3px 3px; 
opacity:0.7; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); 
} </blockquote>
 
Note:  - in green are some annotations that explains what styles you can modify on their left side. 
           - You can change the arrows by changing the URLs in blue. 
           - To change the buttons background color of buttons, change the white text with your color  
 
Step 5. Now search (CTRL + F) for the following tag: 
<blockquote class="tr_bq">
 </body> </blockquote>
 
Step 6. And just above it, paste the code below: 
 
 
<blockquote>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
<div class='button_up' id='button_up' style='display:none;'/><div class='button_down' id='button_down' style='display:none;'/> 
<script>//<![CDATA[(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})(); 
$(function() {var $elem = $('body');$('#button_up').fadeIn('slow');$('#button_down').fadeIn('slow'); $(window).bind('scrollstart', function(){$('#button_up,#button_down').stop().animate({'opacity':'0.2'});});$(window).bind('scrollstop', function(){$('#button_up,#button_down').stop().animate({'opacity':'1'});});$('#button_down').click(function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);} );$('#button_up').click(function (e) {$('html, body').animate({scrollTop: '0px'}, 800);} );});//]]></script></blockquote>
 
Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one. 
 
Step 7. Finally, Save your changes by clicking on the Save template button. Enjoy! 
 
 
 </div>

How to add go to top and go to bottom buttons Using jQuery in Blogger

The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page are many articles or when an article has too many comments. These buttons h…

22 Mar 2014

Making a gadget visible only to the blog administrator

<div dir="ltr" style="text-align: left;" trbidi="on">
And the post title says it all. There are gadgets that sometimes we want to be visible only to us and not to our blog readers, perhaps a Survey already ended that we want to keep, a counter, or any gadget that while we customize, we don't want anyone else to see until the final result is ready. 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkBsVLug_J4OBxDxh0cSnt7TGHt_6Lx8hrVX7S4ddxcYN9Dwev-BJPvx27Pps0hEDtIbEqQWIv5n5k9FWGjbN7I9e7mrPudPxPyzCvjxYNV-slQq4dXvh5tDIZ9SnMEwprrF8mke9JXoku/s1600/blogger_widgets_visible_only_to_admin.jpg" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
The procedure is simple, we just have to add two lines to our gadget that we want to hide.</div>
 
First thing to do is to go to Template > Edit HTML and then search for the gadget's code we want to hide. It will be easier using the CTRL + F keys and locating the name of the gadget/widget. 
 
For example, in a HTML/Javascript gadget, we will see a code like this: 
<div class="separator" style="clear: both; text-align: left;">
 </div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
 <b:widget id='HTML1' locked='false' title='' type='HTML'><b:includable id='main'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;"><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div> 
<b:include name='quickedit'/><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;"></b:includable></b:widget></blockquote>
<div id="adsmiddle19061515422989240128" style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
All you have to do is add the parts in red and ready. If you close the session go to your blog you'll not be able to view the gadget that you have hidden, but as soon as you sign in you will see that it is visible to you.</div>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; margin: 10px auto;">
</div>
<div id="adsmiddle29061515422989240128" style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
Not all gadgets have the same structure like in my example, but it will be easier to guide you, just place the first code in red just after <b:includable id='main'> 
 
And the second red code just before </b:includable> 
Note: to look inside the widget's code, click on the sideways arrow next to the widget's id. 
 
And with that the gadget will be hidden for readers except you. 
 
 </div>
</div>

Making a gadget visible only to the blog administrator

And the post title says it all. There are gadgets that sometimes we want to be visible only to us and not to our blog readers, perhaps a Survey already ended that we want to keep, a counter, or any g…

22 Mar 2014

Orbit - jQuery Image Slider Plugin For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="tr_bq">
Today I'm sharing with you another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. This slider called Orbit is a lightweight jQuery plugin for displaying multiple images in a limited space using navigation arrows (previous-next buttons). On the upper left of the Orbit slideshow, we have some bullet icons indicating the current image that we are viewing and on the upper right side is the pause option and a timer letting the user know when the next image will be displayed.</div>
 
The HTML markup is pretty clean, just an element that wraps multiple images where the captions are generated from the title tags of these images. 
 
 
 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="384" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqilIquUrNsTINLSX9uQQphSzmfBSJM5pFhe7RoMbHnRLDXxC1l3X9ZpWwhk0k1rimQHRAm_iXUkguN8X0VP-_WWXRPSsm5icbw-CF9QSMBynEtFgT9OZvGAnYdxuDbfCUiqTrW3hBHVzk/s1600/Untitled.png" width="640" /></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<h3 style="background-color: #f9f9f9; border: none; color: #555555; font-family: 'Istok Web', sans-serif; font-size: large; list-style: none; margin: 0px; outline: none; padding: 0px 0px 10px;">
How to add the Orbit Image Slider to Blogger</h3>
<div class="separator" style="clear: both;">
Step 1. From your Blogger Dashboard, go to Template > Edit HTML > click anywhere and press the CTRL + F keys to open the blogger search box. Paste or type the </head> tag inside the search box and hit Enter to find it.</div>
 
Step 2. Just above the </head> tag, add the following scripts: 
<div class="separator" style="clear: both;">
 </div>
<blockquote style="clear: both;">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>  <script type='text/javascript'>$(window).load(function() {$(&#39;#featured&#39;).orbit({advanceSpeed: 5000,&#39;bullets&#39;: true,&#39;timer&#39; : true,&#39;animation&#39; : &#39;horizontal-slide&#39;});});</script> <script type='text/javascript'>//<![CDATA[/** jQuery Orbit Plugin 1.1* www.ZURB.com/playground* Copyright 2010, ZURB* Free to use under the MIT license.* http://www.opensource.org/licenses/mit-license.php*/ (function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"></div>');var j=e("div.timer"),p;if(j.length!=0){var C=a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav">RightLeft</div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);//]]></script></blockquote>
<div class="separator" style="clear: both;">
</div>
 
 
Note: You can change the transitions speed between each image by modifying the 5000 value from the line in blue - a higher number will make the pictures stay longer between each transition. 
 
Important! If you have already a version of jQuery in your template, remove the line in red, otherwise the slideshow might not work. 
 
Step 3. Now it is time to add the CSS... find this tag: 
 
 
<blockquote class="tr_bq">
 <span style="background-color: yellow; border: none; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;"> ]]></b:skin></blockquote>
 
Step 4. Just above ]]></b:skin> add this code: 
 
<blockquote>
 #featured {height: 1px; width: 1px; overflow: hidden;} 
div.orbit { 
width: 1px; 
height: 1px; 
position: relative; 
overflow: hidden; 
} 
div.orbit img { 
position: absolute; 
top: 0; 
left: 0; 
} 
div.orbit a img {border: none;} 
div.timer { 
width: 40px; 
height: 40px; 
overflow: hidden; 
position: absolute; 
top: 10px; 
right:10px; 
opacity: .6; 
cursor: pointer; 
z-index: 1001; 
} 
span.rotator { 
display: block; 
width: 40px; 
height: 40px; 
position: absolute; 
top: 0; 
left: -20px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8QK2auf3n3dmlvl0LT5oXY1hgokkbRYI0BKaf25Z-eG3k40tpO3dv7axCmmDjFKxPgj2WlLxCLZvMc0V3Aha8-9Kpy0MxJxCWx-utsDBmLE8LEcurQ_coBlRdFK50-v0X2cOfLQxZu5Fp/s1600/timer-icon.png); 
background-repeat: no-repeat; 
z-index: 3; 
} 
span.mask { 
display: block; 
width: 20px; 
height: 40px; 
position: absolute; 
top: 0; 
right: 0; 
z-index: 2; 
overflow: hidden; 
} 
span.rotator.move {left: 0;} 
span.mask.move { 
width: 40px; 
left: 0; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9zkd0tUCIPOUZQ_xTL8ai8vxV6JOo2y4BQrOsyNFRozDONBf_2IBDO6F4G5qIV1LIbCfUcxX8ysFWhSUNa81lzsvD793Ahrfe3avlOIDt0Z2mmCWRiLpcRcAy7UNcMWJG6qjW6aEH6pu/s1600/timer-right.png); 
background-repeat: repeat; 
background-position: 0px 0px; 
} 
span.pause { 
display: block; 
width: 40px; 
height: 40px; 
position: absolute; 
top: 0; 
left: 0px; 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGMnvC3mKzCp_kJl4CpLR1bimhDomh8annUasF3_0fbRlpPoD4Kck28G5jsNx8pgO72IUrYseNxSnTzqUNG-u6L6lyiUiK38W30ZXY5cnTPxA1KSAEO1T-v8sh6DlTpTeXaEXtpRpthKAy/s1600/pause-icon.png); 
background-repeat: no-repeat; 
z-index: 4; 
opacity: 0; 
} 
div.timer:hover span.pause, 
span.pause.active, 
div.timer:hover span.pause.active { opacity: 1; } 
div.caption { 
background: #000; 
background: rgba(0,0,0,.6); 
width: 100%; 
z-index: 1000; 
position: absolute; 
bottom:-100px; 
color: #fff; 
padding: 8px 0; 
text-align: center; 
} 
div.caption span { 
padding: 0 10px; 
font-size: 14px; 
text-shadow: 0px 1px 0px rgba(0,0,0,.8); 
margin: 0; 
} 
.orbit-caption { display: none; } 
div.orbit:hover div.slider-nav { display: block; } 
div.slider-nav { display: none; } 
div.slider-nav span { 
width: 33px; 
height: 33px; 
text-indent: -9999px; 
position: absolute; 
z-index: 1000; 
top: 43%; 
cursor: pointer; 
} 
div.slider-nav span.right { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajln0ZAc4Ani1FEIteEqZ-Q73IAAyEQlvsVdkLvo_jHJSQ8Av2aF1G3nlS-dHlDvPpYIQDMrAKt0eSxFbpWQOli4N4aW0HshTgDaaNMJGbUBxIySfkkpkYqfJeB8W-s0t4DjEL8gPGFnH/s1600/arrow-right.png); 
right: 10px; 
} 
div.slider-nav span.left { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiumkkVQfRpx1fcqSVf3xhDPhTYdFW4XHdpkTgJw4DH7zeQQO35bGCLT8-pp1SqFsANbiHEWrP6u4ORACGsJ3TojtcQjjPJJX9hejdJCw_hYpy_slqB5mCxTL2FGV_MGz5Vg3Yf-kx8Kb2H/s1600/arrow-left.png); 
left: 10px; 
} 
.orbit-bullets { 
position: absolute; 
z-index: 1000; 
list-style: none; 
top: 10px; 
left: 7px; 
margin: 0; 
padding: 0; 
} 
.orbit-bullets li { 
float: left; 
margin-left: 5px; 
cursor: pointer; 
color: #999; 
text-indent: -9999px; 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmkrzr5s92ObiOFrZk8wF4d8mJIel0t8X9La3tWkEdDR0IEWl_e1LCaOhkmobUo4rfXda5ktq26EG7pGVmfR4aj2in2sRNsK3pTpeZej64v11Dd7WxKBdTMIdtS1sydx9RB_DeQ-R9-t_4/s1600/bullets.png); 
background-repeat: no-repeat; 
background-position: 0 0; 
width: 7px; 
height: 7px; 
overflow: hidden; 
} 
.orbit-bullets li.active { color: #222; background-position: -7px 0; } </blockquote>
 
<div id="adsmiddle15508894100442077280" style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
Step 5. Click on the Save template button to save the changes. 
 
Finally, we will use the code that displays the images. We have the option to add the slider either inside one of our posts/pages, or display it as a gadget on the blog sidebar or below the header.</div>
<div style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px; margin: 10px auto;">
</div>
If you choose to add it inside one of your posts, switch to the HTML tab and paste the code below inside HTML box of your post. If you want to add it in the blog sidebar/below the header, go to Layout, click on theAdd a gadget link > choose HTML/JavaScript from the pop-up window and paste the code inside the empty box: 
 
<blockquote>
 <div id='featured'> 
<a href='<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Link URL'><img rel='<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo1' src="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">image URL" style='height: 348px; width: 590px;'/></a><span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo1'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. 
<a href="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Link URL"><img rel='<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo2' src="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">image URL" style='height: 348px; width: 590px;'/></a><span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo2'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">This is an example of description with links: <a href='<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Description Link URL' style='color: #09A7EA;'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Helplogger</a> 
<a href="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Link URL"><img rel='<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo3' src="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">image URL" style='height: 348px; width: 590px;'/></a><span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo3' style='text-align:center;'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. 
<a href='<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Link URL'><img rel='<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo4' src="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">image URL" style='height: 348px; width: 590px;'/></a><span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo4'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">This is an example of description with links: <a href='<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Description Link URL' style='color: #09A7EA;'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Helplogger</a> 
</div> </blockquote>
 
This code contains the images, links and descriptions for each image. In blue are the URLs of the links and images that you need to replace with your own. Inside the HTML code of each image, you have the size of each picture which can be changed by modifying the width (590) and height (348) values. To add the description for your pictures, replace the text in red.  
 
To add more pictures, add this HTML before the </div> tag: 
<blockquote class="tr_bq">
 
 <a href='<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Link URL'><img rel='<span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo5' src="<span style="border: none; color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">image URL" style='height: 348px; width: 590px;'/></a><span style="border: none; color: #38761d; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">photo5'><span style="border: none; color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; list-style: none; margin: 0px; outline: none; padding: 0px;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. </blockquote>
 
Notice that each image and description has an identifier (id) - this identifier should be unique. For instance, in the description text of the first image, we have the id="photo1" and within the image code is the rel attribute with the name of the id, that is rel="photo1". 
 
 </div>

Orbit - jQuery Image Slider Plugin For Blogger

Today I'm sharing with you another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. This slider called Orbit is a lightweight jQuery plugin for displa…

22 Mar 2014