Best Urdu Training

BestUrduTraining.Blogspot.com Looking For Writers, Write For Us,

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVSeK4fZoAKRD1kHcsWquJd3s1VM2U3HBTjmT8OwOF9z9EyWItMtMDNOibAkCHt2CUKAwbHA3vy4InOrOyTizXYpBu19UXWSgJsyPRyQNvXJtpqQZSGRkwGXaps3lVlU0f5VjrQEBaO_sz/s1600/Write-For-Us.jpg" width="400" /></div>
<br />
<br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<span style="font-size: large;"><br /></span></div>
<div>
<div>
<span style="font-size: large;">Hi All,</span></div>
<div>
<span style="font-size: large;">Here at BestUrduTraining.Blogspot.com We are always looking for experienced writers who can write good original quality posts and fresh tutorial ideas or news all time.</span></div>
<div>
<span style="font-size: large;">And due to the great improvements that happens here, we announcing that we now accept guest posts and regular authors submissions.</span></div>
</div>
<div>
<span style="font-size: large;"><b>If you are interested please <span style="color: #6fa8dc;"><a href="http://besturdutraining.blogspot.com/p/write-for-us.html">read more on this page.</a></span></b></span><br />
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b><br /></b></span></div>
</div>

BestUrduTraining.Blogspot.com Looking For Writers, Write For Us,

Hi All, Here at BestUrduTraining.Blogspot.com We are always looking for experienced writers ...

Facebook Slide Out Share Button for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCZH_WIg884DHFIX278NML9pooxoAfE1dDxzxPtkcP-UetQD2iuwqk3d1QBwi4L8O8tebPcPzWnBq2xZE6sQP0YMxkr_v1jpFEldCFXxvOjHwsPBbhMeSWUUl52WR2WzkaP0FH7G6nek8/s1600/SlideOut+Facebook.png" width="400" /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="font-size: x-large;">This widget has many features such as -</span><br />
<br />
<ul style="text-align: left;">
<li><span style="font-size: large;">Lightweight Size</span></li>
<li><span style="font-size: large;">Compact Design</span></li>
<li><span style="font-size: large;">Supports all Major Browsers</span></li>
<li><span style="font-size: large;">Attractive and Elegant</span></li>
<li><span style="font-size: large;">Made with CSS3 and beautiful transitions.</span></li>
<li><span style="font-size: large;">Shown only on Post pages</span></li>
</ul>
<br />
<span style="font-size: large;">The live demo of this widget can be seen by On My this site.</span><br />
<span style="font-size: large;"><br />
</span> <span style="font-size: large;"><b>Method 1 : Adding Manually</b></span><br />
<b>Many people would like to add and customize the code on their own. If so, you can copy the below code and paste it in the HTML/JavaScript widget.</b></div>
<b></b><br />
<span style="color: #3d85c6; font-size: x-large;">One Unlock for Download This File</span><br />
<br />
<br />
<br />
<article id="default-usage"><br />
<br />
<div class="to-lock" style="display: none;">
<br />
<br />
<br />
<br />
<div style="text-align: center;">
<a class="button big blue" href="http://adf.ly/iImcL">Download Code</a></div>
<div style="text-align: center;">
<br />
<br /></div>
</div>
</article><br />
<br />
<div id="dhiunlocker">
</div>
<script src="https://googledrive.com/host/0BzveqKwnIGy8VFg3NTNnNEpSZDg" type="text/javascript"></script><br />
<br />
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
 
text: {
header: "Share it To Unlock This Content",
message: "Yes, this is Social Locker. Just try it, click on one of buttons."
},
 
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
 
// twitter options
twitter: {
url: "http://besturdutraining.blogspot.com/2014/04/facebook-slide-out-share-button-for.html",
text: "Facebook Slide Out Share Button for Blogger"
},
 
// facebook options
facebook: {
url: "http://besturdutraining.blogspot.com/2014/04/facebook-slide-out-share-button-for.html",
appId: "561288347311326"
},
 
google: {
url: "http://besturdutraining.blogspot.com/2014/04/facebook-slide-out-share-button-for.html"
}
});
});;;;
</script><br /></div>
<br />
<b><span style="font-size: large;">After adding, save the widget and template.</span></b><br />
<b><span style="font-size: large;"><br />
</span></b> <span style="font-size: large;">You are done now. Now you and your visitors can see this awesome Facebook Share button on your blogger blog. </span><br />
<b></b></div>

Facebook Slide Out Share Button for Blogger

This widget has many features such as - Lightweight Size Compact Design Supports all Major Browsers Attractive an...

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;">
<br /></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>
<span style="color: #555555; font-family: open sans;"><span style="font-size: 14px; line-height: 25px;"><br /></span></span></div>
<div>
<span style="color: #555555; font-family: open sans;"><span style="font-size: 14px; line-height: 25px;"><blockquote class="tr_bq">
<span style="background-color: white;"><b:if cond='data:blog.pageType == "index"'></span><br /><span style="background-color: white;"><script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/></span><br /><span style="background-color: white;"><script src='https://bloggeryard.googlecode.com/svn/trunk/Infinite%20Scroll%20Plugin.js' type='text/javascript'/></span><br /><span style="background-color: white;"><script type='text/javascript'></span><br /><span style="background-color: white;">jQuery.ias({</span><br /><span style="background-color: white;">    container : '.blog-posts',</span><br /><span style="background-color: white;">    item: '.post-outer',</span><br /><span style="background-color: white;">    pagination: '#blog-pager',</span><br /><span style="background-color: white;">    next: '#blog-pager-older-link a',</span><br /><span style="background-color: white;">    loader: '</span><span style="background-color: yellow;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKfvT2B-CpRaB_ex1fwkm7oI6vwTrGuLiLWErGmALbzbmlQKHvBiJ7kOIbpNYu3ZLQRlUJsN43W-qAuIrQgWgSAz0GYLmpuVQ4Xtx4U1Jua78ntxCf9lo8Q4nl77vS0bBBB6ziSFTUXSUq/s1600/loading.gif</span><span style="background-color: white;">'</span><br /><span style="background-color: white;">});</span><br /><span style="background-color: white;">  </script></span><br /><span style="background-color: white;"></b:if></span></blockquote>
</span></span></div>
<br />
<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 "<b>Save Template!</b>".</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>
<br /></div>
<div>
<br /></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;">
<br /></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>
<br />
<br />
<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>
<br /></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>
<br />
<br />
<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>
<br />
<br />
<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>
<br />
<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>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<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. <b>Happy Blogging!</b></div>
</div>
<div style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 14px; line-height: 24px;">
<b><br /></b></div>
<div style="background-color: white; color: #555555; font-family: 'open sans'; font-size: 14px; line-height: 24px;">
<b><br /></b></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 devel...

Add Css/Jquery fixed horizontal menu to blogger blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white;"><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">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.</span><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">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.</span></span><br />
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></span>
<br />
<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>
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></span>
<span style="background-color: white;"><span style="border: none; color: #333333; font-family: 'Istok Web', sans-serif; font-size: medium; list-style: none; margin: 0px; outline: none; padding: 0px;"><b>Let's start adding <span style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">it<span style="border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">...</span></span></b></span><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">1. Go To </span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Blogger </b><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">- </span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Template</b><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> - </span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Edit HTML</b></span><br />
<b style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></b>
<b style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;"><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" /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> ....and select the "expand widget templated" box:</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;"><img border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMn46VnDbIcyBqYGygdy1Gl0g99JK1RnrpXi6ddcbwG6tb99n-c8uQ15NzuPCujIuaARQV3w0DXJAiWefcLqJBgVoRxLwDK5U1AoKGOty6alO4u3W7H6PJfqOaIfZLK38FHaBOVdSIcAq5/s1600/blogger-expand-widget-templates.png" width="400" /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">2. Search (using CTRL + F) for this piece of code:</span></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<span style="background-color: white; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> </head> </span></blockquote>
<span style="background-color: white;"><br /></span>
<span style="background-color: white;"><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">3. Just above/before the </span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"></head></b><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> tag, add this code:</span></span><br />
<blockquote class="tr_bq">
<span style="background-color: white;"> <span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> </span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> <script type="text/javascript"></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">            $(function() {</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                $(window).scroll(function(){</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                    var scrollTop = $(window).scrollTop();</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                    if(scrollTop != 0)</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                        $('#nav').stop().animate({'opacity':'0.2'},400);</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                    else    </span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                        $('#nav').stop().animate({'opacity':'1'},400);</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                });</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                </span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                $('#nav').hover(</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                    function (e) {</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                        var scrollTop = $(window).scrollTop();</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                        if(scrollTop != 0){</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                            $('#nav').stop().animate({'opacity':'1'},400);</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                        }</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                    },</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                    function (e) {</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                        var scrollTop = $(window).scrollTop();</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                        if(scrollTop != 0){</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                            $('#nav').stop().animate({'opacity':'0.2'},400);</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                        }</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                    }</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">                );</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">            });</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">        </script></span></span></blockquote>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white;"><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">4) Now search for this tag</span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">:</b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<b style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></b></div>
<blockquote class="tr_bq">
<span style="background-color: white;"><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> <body></span><b style="color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> </b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> </span></span></blockquote>
<span style="background-color: white;"><br /></span>
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">If you can't find it, search for this one:</span><br />
<blockquote class="tr_bq">
<span style="background-color: white;"><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> </span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></span> </span></blockquote>
<span style="background-color: white;"><br /></span>
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">5) Just below/after this code, copy and paste the following code:</span><br />
<blockquote class="tr_bq">
<span style="background-color: white;"><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> <div id="nav"></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><ul></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><li><a class="top" href="#top"><span></span></a></li></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><li><a class="bottom" href="#bottom"><span></span></a></li></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><li><a href=</span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'<span style="border: none; color: #0b5394; list-style: none; margin: 0px; outline: none; padding: 0px;">URL address</span></b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'><span></span><b style="color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">Link 1</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></span></a></li></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><li><a href='</span><b style="color: #0b5394; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">URL address</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'><span></span><b style="color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">Link 2</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></span></a></li></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><li><a href='</span><b style="color: #0b5394; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">URL address</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'><span></span><b style="color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">Link 3</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></span></a></li></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><li><a href='</span><b style="color: #0b5394; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">URL address</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'><span></span><b style="color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">Link 4</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></span></a></li></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><li><a href='</span><b style="color: #0b5394; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">URL address</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'><span></span><b style="color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">Link 5</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></span></a></li></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><li><a href=</span><b style="color: #0b5394; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'URL address</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">'><span></span><b style="color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">Link 6</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></span></a></li></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><li class="search"></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><form method="get" action="/search"></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><input name="q" type="text" placeholder="Search..."/><input type="submit" value="" class="searchbutton"/></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">  </form></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></li></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></ul></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></div> </span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><div id="top"></div></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><div class="desc"></div></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><div id="bottom"></div></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><div class="scroll"></div></span> </span></blockquote>
<span style="background-color: white;"><br /></span>
<span style="background-color: white;"><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Note: </b><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Replace </span><b style="color: #0b5394; font-family: 'Istok Web', sans-serif; font-size: 14px;">URL address </b><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">with the URL of your pages and </span><b style="color: #cc0000; font-family: 'Istok Web', sans-serif; font-size: 14px;">Link 1, 2, 3, 4, 5, 6</b><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> with the name of the link that will appear in the menu. </span></span><span style="background-color: white;"><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">6) Now click on the </span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Save Template</b><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> button and you're done ;)</span> </span><br />
<span style="background-color: white;"><br /></span>
<span style="background-color: white;"><br /></span></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 transp...

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">
<span style="background-color: white;"><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">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 </span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><kbd></b><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">which can be styled with CSS, so why not use it to make those elements look the keyboard keys?</span><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Thus, in this tutorial, I am going to show you </span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">how to create a keyboard keys effect with CSS</b><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">. It doesn't require images so your blog will load faster.</span></span><br />
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh83Cg8pE1VNekcGN1In4YaxrtUFOhAifCYHW9TjlUWJWQcPpCGSIHW4Hnnml1u-SiYQFAvJL-v1MGjf4x8zhcmeWUoTXsgdIzRusKrhhLnqkbFgJkF518x5CYdl0NcUWoRywpOc_H_NEQf/s1600/keyboard-keys-css-style-for-blogger.png" /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;"><br /></span></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;">
<span style="background-color: white;">How to Add Keyboard Keys to Blogger</span></h2>
<div class="separator" style="clear: both;">
<span style="background-color: white;"><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><span style="border: none; color: #3d85c6; list-style: none; margin: 0px; outline: none; padding: 0px;">Step 1</span></b><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">. From </span><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><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">, select your blog and go to </span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Template</b><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"> > </span><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Edit HTML</b></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: white;"><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></b></span></div>
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></span>
<br />
<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;">
<br /></div>
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><br /></span>
<span style="background-color: white;"><span style="border: none; color: #3d85c6; font-family: 'Istok Web', sans-serif; font-size: 14px; list-style: none; margin: 0px; outline: none; padding: 0px;"><b>Step 2</b></span><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">. Click anywhere inside the code area, press the Ctrl + F keys and search for this piece of code:</span></span><br />
<blockquote class="tr_bq">
<span style="background-color: white; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> ]]></b:skin></span></blockquote>
<br />
<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;">
<br />
kbd{<br />
border:1px solid gray;<br />
font-size:1.2em;<br />
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;<br />
-webkit-border-radius:3px;<br />
-moz-border-radius:3px;<br />
border-radius:3px;<br />
margin:2px 3px;<br />
padding:1px 5px;<br />
}</blockquote>
<br />
<div id="adsmiddle14363580928127567563" style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">
<span style="background-color: white;"><b><span style="border: none; color: #3d85c6; list-style: none; margin: 0px; outline: none; padding: 0px;">Step 4</span></b>. To save the changes, press the Save change button.<br /><br />Finally, we need to add the html <b><span style="border: none; color: #cc0000; list-style: none; margin: 0px; outline: none; padding: 0px;"><kbd></span></b> tags to the text on which we want to apply the keyboard keys style.</span></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;">
<span style="background-color: white;">From your blogger's dashboard, go to create a <b>New Post</b>, 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:</span></div>
<br />
<blockquote class="tr_bq">
<span style="background-color: #f9f9f9; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> </span><span style="background-color: white;"><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><span style="border: none; color: #cc0000; list-style: none; margin: 0px; outline: none; padding: 0px;"><kbd></span></b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">Ctrl</span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><span style="border: none; color: #cc0000; list-style: none; margin: 0px; outline: none; padding: 0px;"></kbd></span></b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> + </span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><span style="border: none; color: #cc0000; list-style: none; margin: 0px; outline: none; padding: 0px;"><kbd></span></b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">F</span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><span style="border: none; color: #cc0000; list-style: none; margin: 0px; outline: none; padding: 0px;"></kbd></span></b></span></blockquote>
<br />
<br />
<div style="text-align: center;">
<span style="background-color: #f9f9f9; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Screenshot</span></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. Ther...

Add a Popular Posts Gallery just above your Blogger posts

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif;">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.</span><br />
<span style="background-color: white;"><span style="color: #333333; font-family: 'Istok Web', sans-serif;"><br /></span>
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;"><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" /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white;"><b style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;"><span style="border: none; font-size: medium; list-style: none; margin: 0px; outline: none; padding: 0px;">Let's start adding it</span></b><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">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:</span><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">1. </span><span style="border: none; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; line-height: 1.5em; list-style: none; margin: 0px; outline: none; padding: 0px;">Go to Dashboard - Template - Edit HTML - click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box</span></span></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;">
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">2. Type or paste this piece of code inside the opened search box:</span></div>
<blockquote class="tr_bq">
<span style="background-color: white; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> ]]></b:skin></span></blockquote>
<span style="background-color: white;"><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Note: you might need to click on the arrow next to it and after try to find ]]></b:skin> again.</span><span style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">3. Just above/before it, add the following code:</span> </span><br />
<blockquote class="tr_bq">
<span style="background-color: white;"><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> #gallery{position:relative;margin:0 35px 20px;width:</span><b style="color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">590</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">px;height:</span><b style="color: #cc0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">126</b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">px;background:#ffffff}</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#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}</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}</span></span></blockquote>
<span style="background-color: white;"><br /></span>
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Note: you can adjust the size of gallery, changing the values in red (590 and 126).</span><br />
<span style="background-color: white;"><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /></span>
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">4. Now search for the following piece of code:</span><br />
<blockquote class="tr_bq">
<span style="background-color: white;"><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></head></span> </span></blockquote>
<span style="background-color: white;"><br /></span>
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">5. Just above/before it, add this code:</span><br />
<blockquote class="tr_bq">
<span style="background-color: white;"><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><script type='text/javascript'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">//<![CDATA[</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">stepcarousel.setup({</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">galleryid: "gallery",</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">beltclass: "belt",</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">panelclass: "panel",</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">autostep: {enable:true, moveby:1, pause:6000},</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">panelbehavior: {speed:500, wraparound:true, persist:true},</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">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]},</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">contenttype: ["external"]</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">})</span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">//]]></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></script></span> </span></blockquote>
<span style="background-color: white;"><br /></span>
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Next thing to do is to place the widget just above the blogger posts.</span><br />
<span style="background-color: white;"><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /></span>
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">6. Search for this code:</span><br />
<span style="background-color: white;"><br /></span>
<blockquote class="tr_bq">
<span style="background-color: white;"><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> </span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><b:section class='main' id='main' showaddelement='yes'></span> </span></blockquote>
<span style="background-color: white;"><br /></span>
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">...or if you can'find it, search for this one:</span><br />
<blockquote class="tr_bq">
<span style="background-color: white; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> <b:section class='main' id='main' showaddelement='no'></span></blockquote>
<span style="background-color: white;"><br /></span>
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">7. Just below it, add the following code:</span><br />
<blockquote class="tr_bq">
<span style="background-color: white;"><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> <b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><b:includable id='main'></span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><span style="border: none; color: blue; list-style: none; margin: 0px; outline: none; padding: 0px;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span></b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">  <div id='gallery'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">   <ul class='belt'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">    <b:loop values='data:posts' var='post'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">     <li class='panel'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">      <b:if cond='data:showThumbnails == &quot;false&quot;'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">       <b:if cond='data:showSnippets == &quot;false&quot;'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">       <b:else/></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">        <div class='item-title'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">        </div></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">        <div class='item-snippet'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">         <data:post.snippet/></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">        </div></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">       </b:if></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">      <b:else/></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">        <b:if cond='data:post.thumbnail'></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">        <b:else/></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVIKaz4_TaDWHALYxWw3eEs_rCdA37RlwJe8dElR2vUquLBp8yOYmOzd_GlihRGYQK0JO5zhECxweDXm743yPdMlLez05p3wuhoSyPWng3E_Sf_MMICskWPmv3-34TnqqcPDQs7Z38wVRk/s1600/no-image.PNG'/></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">        </b:if></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">       </a></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">      </b:if></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">     </li></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">    </b:loop></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">   </ul></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;">  </div></div></span><b style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"><span style="border: none; color: blue; list-style: none; margin: 0px; outline: none; padding: 0px;"></b:if></span></b><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"> </b:includable></span><span style="color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px;"></b:widget></span> </span></blockquote>
<span style="background-color: white;"><br /></span>
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also.</span><br />
<span style="background-color: white;"><br style="color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;" /></span>
<span style="background-color: white; color: #333333; font-family: 'Istok Web', sans-serif; font-size: 14px;">8. Preview and if everything is ok, Save the Template.</span><br />
<span style="background-color: white;"><br /></span>
<br /></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. I...