Blog Tricks Center: Blogging Latest Tips

iTemplate Blogger Template Download

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; font-size: 22.3999996185303px; line-height: 31.3599987030029px;">
<span style="font-family: Arial, Helvetica, sans-serif;">iTemplate is a new blogger template designed by ThatsBlogging .iTemplate theme comes with many bombastic features which really makes it an incredible theme.This theme has fully <a href="http://thatsblogging.blogspot.com/2014/05/igrid-responsive-blogger-template.html" style="color: #1c4866; text-decoration: none;" target="_blank">responsive design</a> and an incredible outlook which fits on high end mobile screen, To test this template responsive design just resize your browser.<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXy7I_oLMn8e6jcxZPgUx04DdNCMFO-NkEWl3KIDNsyO-lvkXyckppbgLqpbphOiW6RzE-Q_IUVsSdP7prexAup0JFZFp2TiOAGj-NinIx0NwPQAwDFlUUaLXSTYszxYE8yg_cPFe_GrU/s1600/outlook.PNG" imageanchor="1" style="color: #1c4866; margin-left: 1em; margin-right: 1em; text-align: center; text-decoration: none;"><img border="0" height="353" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXy7I_oLMn8e6jcxZPgUx04DdNCMFO-NkEWl3KIDNsyO-lvkXyckppbgLqpbphOiW6RzE-Q_IUVsSdP7prexAup0JFZFp2TiOAGj-NinIx0NwPQAwDFlUUaLXSTYszxYE8yg_cPFe_GrU/s1600/outlook.PNG" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: none; box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; position: relative;" width="640" /></a></span></div>
<div class="separator" style="background-color: white; clear: both; font-size: 22.3999996185303px; line-height: 31.3599987030029px; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><a class="awesome" href="http://itemplatedemo.blogspot.com/" rel="nofollow" style="-webkit-transition: background-position 1s ease 0s; background-clip: border-box; background-color: #48b5f2; background-position: 0% 100%, 100% 0%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(132, 172, 195) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: #1950ab; cursor: pointer; display: inline-block; font-size: 25px; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s ease 0s; vertical-align: baseline; white-space: nowrap; width: 200px;" target="_blank">DEMO</a><span style="color: #333333; font-size: 14px; line-height: 18.1875px;">  </span><a class="awesome" href="https://www.dropbox.com/s/dynwlnj9r1ugscv/itemplate%28uploadthis%29.xml" rel="nofollow" style="-webkit-transition: background-position 1s ease 0s; background-clip: border-box; background-color: #63c7fe; background-position: 0% 0%, 100% 100%, 0px 0px, 0px 0px; background-repeat: no-repeat; border-radius: 8px; border: 1px solid rgb(132, 172, 195) !important; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: #111111; cursor: pointer; display: inline-block; font-size: 25px; padding: 10px 20px; position: relative; text-decoration: none; text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0px; transition: background-position 1s ease 0s; vertical-align: baseline; white-space: nowrap; width: 200px;" target="_blank">DOWNLOAD</a></span></div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="7224714538" style="display: inline-block; height: 280px; width: 336px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<br />
<h3 style="-webkit-box-shadow: rgb(170, 170, 170) 1px 1px 2px; background: rgba(28, 124, 148, 0.792157); border-radius: 0px 0px 6px 6px; box-shadow: rgb(170, 170, 170) 1px 1px 2px; clear: both; color: white; font-size: 28px; line-height: 1; margin: 6px 3px; padding: 4px 10px; position: relative; text-shadow: rgb(170, 170, 170) 1px 1px 1px; text-transform: capitalize; width: 584.25px;">
<span style="color: cyan; font-family: Arial, Helvetica, sans-serif;">ITemplate Info</span></h3>
<div class="separator" style="background-color: white; clear: both; font-size: 22.3999996185303px; line-height: 31.3599987030029px;">
</div>
<ul style="background-color: white; font-size: 22.3999996185303px; line-height: 31.3599987030029px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif;">Template Name : iTemplate </span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif;">Template Price: 0 $</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif;">Release Date : 07/09/14</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif;">License : Free </span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif;">URL : ThatsBlogging.Blogspot.com</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif;">Designer : Iftikhar uddin</span></li>
</ul>
<h3 style="-webkit-box-shadow: rgb(170, 170, 170) 1px 1px 2px; background: rgba(28, 124, 148, 0.792157); border-radius: 0px 0px 6px 6px; box-shadow: rgb(170, 170, 170) 1px 1px 2px; color: white; font-size: 28px; line-height: 1; margin: 6px 3px; padding: 4px 10px; position: relative; text-shadow: rgb(170, 170, 170) 1px 1px 1px; text-transform: capitalize; width: 584.25px;">
<span style="font-family: Arial, Helvetica, sans-serif;">Features Of ITemplate Blogger Template</span></h3>
<div style="background-color: white; font-size: 22.3999996185303px; line-height: 31.3599987030029px;">
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="6839278135" style="display: inline-block; height: 90px; width: 728px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRm49XelHR-irhXfl2BR08bPuF7NZG8PU61mRuMfTL0W-gUlgmtbg57TouKEdhMOI0qngDlGR1j2ZpqM2bDmVPvl0jo1ULslyU0tFAxMu1IawIGxPjtlbkWrqnspf1U6Sg429VS_u6DW8/s1600/outlook.PNG" imageanchor="1" style="color: #1c4866; margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="353" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRm49XelHR-irhXfl2BR08bPuF7NZG8PU61mRuMfTL0W-gUlgmtbg57TouKEdhMOI0qngDlGR1j2ZpqM2bDmVPvl0jo1ULslyU0tFAxMu1IawIGxPjtlbkWrqnspf1U6Sg429VS_u6DW8/s1600/outlook.PNG" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: none; box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; position: relative;" width="640" /></span></a></div>
<div style="text-align: center;">
<br />
<br />
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: left;"><span style="font-size: medium;"><b>Incredible Outlook</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: left;"><span style="font-size: medium;"><b>Grid Style</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: left;"><span style="font-size: medium;"><b>Pagination Ready</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: left;"><span style="font-size: medium;"><b>Fantastic Footer</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: left;"><span style="font-size: medium;"><b>Cool Navigation Menu</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: left;"><span style="font-size: medium;"><b>Latest Coding</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: left;"><span style="font-size: medium;"><b>Beautiful Subheading style</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: left;"><span style="font-size: medium;"><b>Popular Post Widget</b></span></li>
</ul>
</div>
</div>
<h3 style="-webkit-box-shadow: rgb(170, 170, 170) 1px 1px 2px; background: rgba(28, 124, 148, 0.792157); border-radius: 0px 0px 6px 6px; box-shadow: rgb(170, 170, 170) 1px 1px 2px; color: white; font-size: 28px; line-height: 1; margin: 6px 3px; padding: 4px 10px; position: relative; text-shadow: rgb(170, 170, 170) 1px 1px 1px; text-transform: capitalize; width: 584.25px;">
<span style="color: lime; font-family: Arial, Helvetica, sans-serif; font-size: medium;">Configuration</span></h3>
<div style="background-color: white; font-size: 22.3999996185303px; line-height: 31.3599987030029px;">
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif;">For adding Facebook Like Box , just go to layout >> Click On edit Love us widget , Copy the below script >> Change ThatsBlogging and write your own fb page username and paste it over there that's it.</span></li>
</ul>
</div>
<blockquote class="tr_bq" style="background-color: #f9eff4; border-color: rgb(194, 56, 121); border-style: dashed; font-size: 22.3999996185303px; line-height: 31.3599987030029px; padding: 20px;">
<span style="font-family: Arial, Helvetica, sans-serif;"><iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/<b><span style="color: red;">Thatsblogging</span></b>&amp;width=300&amp;height=248&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;" style="border:none; overflow:hidden; width:300px; height:248px;" ></iframe></span></blockquote>
<div class="separator" style="background-color: white; clear: both; font-size: 22.3999996185303px; line-height: 31.3599987030029px; text-align: center;">
</div>
<ul style="background-color: white; font-size: 22.3999996185303px; line-height: 31.3599987030029px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">For Beautiful look change the number of posts per page to 6 as shown below</span></li>
</ul>
<div class="separator" style="background-color: white; clear: both; font-size: 22.3999996185303px; line-height: 31.3599987030029px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGiOc7uiL35cHX9XFdX22eV5YJ0pcW-QF_LXJtzvLU1oDU2PM-fvOF0uuZplTKLfZQua46z8r6iGRH4JFH60lPm-ekKfDhDtBCXKRDVO781zi5KRrIOUQ86iFve_s3G8ddu9ZtIQCaCWQ/s1600/CnoFi.PNG" imageanchor="1" style="color: #1c4866; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGiOc7uiL35cHX9XFdX22eV5YJ0pcW-QF_LXJtzvLU1oDU2PM-fvOF0uuZplTKLfZQua46z8r6iGRH4JFH60lPm-ekKfDhDtBCXKRDVO781zi5KRrIOUQ86iFve_s3G8ddu9ZtIQCaCWQ/s1600/CnoFi.PNG" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: none; box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; position: relative;" /></a></div>
<div style="background-color: white; font-size: 22.3999996185303px; line-height: 31.3599987030029px;">
<br /></div>
<ul style="background-color: white; font-size: 22.3999996185303px; line-height: 31.3599987030029px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif;">For Changing Logo Go To Blogger Dashbaord >> Click On Template >> Edit Template >> Search for tinypic as shown below and replace the image link with your desired logo link.</span><span style="font-family: Arial, Helvetica, sans-serif; text-align: center;"> </span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXmVb2XfFb12k35xWni9YLPZti8HW-eiKTR71MTaV938-Qei6wb6IoK4uO-Eg1k_7Lx32FHujkL-qfi2xHp972dCkDjuM-rg7Z01ZXptoPsnq0TVYDiiyq-pvgf7ffgWAqrQLOvsNq7ew/s1600/logoConf.PNG" imageanchor="1" style="color: #1c4866; font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em; text-align: center; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXmVb2XfFb12k35xWni9YLPZti8HW-eiKTR71MTaV938-Qei6wb6IoK4uO-Eg1k_7Lx32FHujkL-qfi2xHp972dCkDjuM-rg7Z01ZXptoPsnq0TVYDiiyq-pvgf7ffgWAqrQLOvsNq7ew/s1600/logoConf.PNG" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: none; box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; position: relative;" /></a></li>
</ul>
<div style="background-color: white; font-size: 22.3999996185303px; line-height: 31.3599987030029px;">
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif;">For Changing Links in the Top menu search for Home or Templates in the template html code , then change the links to your blog links.</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif;">For Changing Order Now Button Link Go to Template HTML again and Search for ordernow , there change the services link to your desired link.</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif;">If you want any other thing to change , just drop comments below i will help you!</span></li>
</ul>
</div>
</div>

iTemplate is a new blogger template designed by ThatsBlogging .iTemplate theme comes with many bombastic features which really makes it an...

Show Random Headlines Inside Sticky Floating Bar

06:18 Dinesh Soni 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="background-color: white; text-align: center;" trbidi="on">
<span style="color: #555555; font-family: helvetica, arial; font-size: x-large;"><span style="line-height: 22.3999996185303px;"><b><i>Show Random Headlines Inside Sticky Floating Bar</i></b></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrKMYEK3zpdyvJmccyQdmDybfz44J9WdUKYxhcsCDL6d7JtplZe4TRzwL8ofFdfHKsnL40APlPQPtu_o09xwMR0e0rcwxsefWXxKPFZZTX9G7wAQdyID3WjrIo7fWHAxrDGYfET24bbTRe/s1600/image%5B22%5D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrKMYEK3zpdyvJmccyQdmDybfz44J9WdUKYxhcsCDL6d7JtplZe4TRzwL8ofFdfHKsnL40APlPQPtu_o09xwMR0e0rcwxsefWXxKPFZZTX9G7wAQdyID3WjrIo7fWHAxrDGYfET24bbTRe/s1600/image%5B22%5D.png" width="400" /></a></div>
<div dir="ltr" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px; text-align: center;" trbidi="on">
<b><br /></b></div>
<div align="justify" dir="ltr" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px; text-align: justify;" trbidi="on">
<b>Ever wondered to create a Sticky Floating Bar to show Random headlines on your blog?</b>We recently developed a small plugin in wordpress which we have implemented on our third blog hosted on wordpress and also on BlogSpot blogs of our existing clients. We introduced several versions of sticky bars for blogger blogs in 2012 but this one adds an extra functionality. It will show a random post on each page refresh! It uses Feedburner JavaScript snippet to fetch recent headlines from your Feeds and then displays a title randomly when user refreshes the webpage or navigates between pages. Also contains a toggle button to show and hide the headlines. You can customize it easily and change its location to top of page or at footer. Works best with fluid and <span style="color: #289728;">responsive designs</span>. The analytics for our newly launched blog has shown an amazing 30% increase in Pageviews just after we installed this plugin. I have developed both static and dynamic versions of it for both Blogger and Wordpress Genesis Framework.</div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; height: 10px; line-height: 22.3999996185303px;">
</div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="7224714538" style="display: inline-block; height: 280px; width: 336px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<br />
<div align="justify" dir="ltr" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px; text-align: justify;" trbidi="on">
Today's tutorial will guide you in installing this amazing plugin on your blogger blogs to multiply every unique visit. Lets get to work then!</div>
<div align="justify" dir="ltr" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px; text-align: justify;" trbidi="on">
</div>
<div align="left" dir="ltr" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px; text-align: center;" trbidi="on">
<span id="send" style="background: rgb(111, 159, 241); border-radius: 4px; border: 1px solid rgb(121, 167, 241); box-shadow: rgb(204, 204, 204) 5px 5px 5px; color: white; cursor: pointer; padding: 6px 10px !important; width: 80px;"><span style="text-shadow: rgb(51, 51, 51) 1px 1px 2px;"><a href="http://facebook-comments-box.blogspot.com/2013/07/sticky-floating-bar-for-blogger.html">DEMO</a></span></span></div>
<h3 dir="ltr" style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: helvetica, arial; font-size: 19.6000003814697px; line-height: 22.3999996185303px; margin-bottom: 10px; padding: 3px;" trbidi="on">
Activate Recent Headlines on Feedburner?</h3>
<div dir="ltr" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;" trbidi="on">
<b><span style="background-color: yellow;">Note:</span></b> For Dynamic version only. If you wish to add a static/manual version of this plugin then skip this step.<br />
For the dynamic version of this plugin you will need to have Feeds stored at feedburner. </div>
<div dir="ltr" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;" trbidi="on">
<ol>
<li>Go To Feedburner > Publicize > <b>BuzzBoost</b></li>
<li>Uncheck all the boxes. Keep number of items <b>15 </b>or you can choose<b> All</b> to select all posts have your published so far. Make links open in same window.</li>
<li>Click <b>Save </b>to activate the List of your recent posts.</li>
</ol>
</div>
<br style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;" />
<img alt="buzzboost settings" border="0" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuH0UEBiz_z4pco8w8WSVxCn7KuWcMoCwqnUstV1TyLbfoGrrSSqiJquIa8ipDYpNRCZkJfOJ15rIi623cZNwhf38A4ETebbGxT3wG7oMVGhusgrvV_FFiw2TpAc5B8LZinLWv_C5MVfQ/?imgmax=800" style="-webkit-transition: all 0.7s ease; background-color: white; background-image: none; border-width: 0px; color: #555555; display: block; float: none; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px; margin: 0px auto; padding: 0px 0px 3px; transition: all 0.7s ease;" title="buzzboost settings" width="287" /><br />
<span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">   4. Feedburner will give you a </span><span style="color: #0084ce; font-family: helvetica, arial;"><span style="background-color: white; font-size: 14px; line-height: 22.3999996185303px;">JavaScript code</span></span><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;"> that you will need to copy. Only copy the code starting with <script> and ending with </script> as shown below: </span><br />
<img alt="feedburner javascript snippet" border="0" height="95" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1CM1qRujzzLv8OoatqZ9Cf-noheCs6whxcWbE5Bv26AKS1cqxuBmPmWDsZR6lNOMV7vrD1l73oMPWvQxSbo1P2gdMzi9Gx1vebdcKWHt2KTIoXSxGcLho_sAkULjbSUfsVJAYJfnBgms/?imgmax=800" style="-webkit-transition: all 0.7s ease; background-color: white; background-image: none; border-width: 0px; color: #555555; display: block; float: none; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px; margin: 0px auto; padding: 0px 0px 3px; transition: all 0.7s ease;" title="javascript snippet" width="473" /><br />
<span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">  Save this code inside a notepad because we will need to use it later in this tutorial. </span><br />
<h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: helvetica, arial; font-size: 19.6000003814697px; line-height: 22.3999996185303px; margin-bottom: 10px; padding: 3px;">
Show Random Headlines in blogger  - Dynamic</h3>
<div align="justify" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">
We managed to write a script with the help of <span style="color: #289728;">CSSGlobe</span> script which helps you to display content randomly and rotate content using Javasctipt and CSS. We modified it to generate a dynamic list instead of manual list through Feedbuner BuzzBoost Headlines. I guess instead of adding a manual list a random dynamically generated list would be much more useful. :)</div>
<span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">You can add the sticky bar at your blog footer and also at the top of your blog. I will guide you with both the settings. Follow these simple tips: </span><br />
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="5535054533" style="display: inline-block; height: 250px; width: 970px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<br />
<ol style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">
<li>Go to Blogger > Template</li>
<li>Backup your template</li>
<li>Click Edit HTML</li>
<li>Search for </head> and just <b>above it</b> paste this:</li>
</ol>
<blockquote style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYF-anZ0ocki-5I96A1rQcac6XyAefrwPHuUoMnG4IY7nICKdKkw-o_q2VBnYu8PRsGtFoaklmTzWhL75-zkiV7uvQvdS5rjVgARmOuOaasRHQhG0gRyZ1VbCrwVfoAbXs0lO_Stlgs3HB/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #555555; font-family: helvetica, arial; font-size: 15.3999996185303px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; position: relative; word-wrap: break-word;">
<script type='text/javascript'><br />
//<![CDATA[<br />
this.randomizer = function(){<br />
    var length = $(".feedburnerFeedBlock li").length; // this is where we put the id of the list<br />
    var ran = Math.floor(Math.random()*length) + 1;<br />
    $(".feedburnerFeedBlock li:nth-child(" + ran + ")").show();<br />
};<br />
$(document).ready(function(){<br />
    randomizer();<br />
});<br />
<br />
$(document).ready(function() {<br />
$('#toggleButton').click(function() {<br />
if ($('#MBT-Sticky-container').is(':visible')) {<br />
$(this).val('▼');<br />
} else {<br />
$(this).val('▲');<br />
}<br />
$('#MBT-Sticky-container').slideToggle();<br />
});<br />
});<br />
//]]><br />
</script></blockquote>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">
5.  <span style="background-color: yellow;">Optional:</span> Skip this step if you have Jquery source link already added inside your template.<br />
Next search for <head> and just <b>below it</b> paste the following JQuery library code. </div>
<blockquote style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYF-anZ0ocki-5I96A1rQcac6XyAefrwPHuUoMnG4IY7nICKdKkw-o_q2VBnYu8PRsGtFoaklmTzWhL75-zkiV7uvQvdS5rjVgARmOuOaasRHQhG0gRyZ1VbCrwVfoAbXs0lO_Stlgs3HB/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #555555; font-family: helvetica, arial; font-size: 15.3999996185303px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; position: relative; word-wrap: break-word;">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=1.7.2' type='text/javascript'/></blockquote>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">
  </div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">
6. Search for <b></b:skin>.</b>  Click the black arrow to expand the code.<b></b><br />
<img alt="compressed blogger stylesheet" border="0" height="57" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS3LLGtJMWIZAC0E95-XQO25vth5OFIX5LW4CqhZay8jjVgbz6jFjgs4DbF8pvs0GautAmIbIAUkPCi_9zdKYr3lk72QYYl04681CuzWuoS87hgVlohfA4K9bDrzIWyxn1WgBqq_KYzwg/?imgmax=800" style="-webkit-transition: all 0.7s ease; padding: 3px; transition: all 0.7s ease;" title="compressed blogger stylesheet" width="283" /><br />
   7.  Paste the following <span style="color: #0084ce;">CSS Styles</span> just above <b>]]></b:skin></b></div>
<blockquote style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYF-anZ0ocki-5I96A1rQcac6XyAefrwPHuUoMnG4IY7nICKdKkw-o_q2VBnYu8PRsGtFoaklmTzWhL75-zkiV7uvQvdS5rjVgARmOuOaasRHQhG0gRyZ1VbCrwVfoAbXs0lO_Stlgs3HB/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #555555; font-family: helvetica, arial; font-size: 15.3999996185303px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; position: relative; word-wrap: break-word;">
/*--------Floating Sticky bar by www.MyBloggerTricks.com --------------*/<br />
#creditfooter{display:none;}<br />
#MBT-Sticky-container {<br />
   height: 55px;<br />
background: #000;<br />
border-top: 5px dashed <b><span style="color: #f79646;">#FC8D59</span></b>;<br />
border-bottom: 2px solid <b>#FFFFFF</b>;<br />
position: fixed;<br />
width: 100%;<br />
z-index: 99999;<br />
box-shadow: 1px 2px 9px #666;<br />
<b><span style="background-color: #f79646;">top:0px;</span> </b>}<br />
.feedburnerFeedBlock ul, .feedburnerFeedBlock ul li{<br />
    margin:0;<br />
    padding:0;<br />
    list-style:none;<br />
    }<br />
<br />
    .feedburnerFeedBlock ul li a { color:#fff!important; text-decoration:none;}<br />
        .feedburnerFeedBlock ul li a:hover {text-decoration:underline;}<br />
.feedburnerFeedBlock ul{<br />
    line-height:120%;<br />
<br />
    }<br />
.feedburnerFeedBlock ul li{<br />
    padding:20px; text-align:center; font-family:georgia; font-size:17px; font-weight:bold;<br />
<br />
    display:none; /* hide the items at first only to display one with javascript */<br />
    }<br />
#toggleButton {<br />
position: fixed;<br />
<b><span style="background-color: yellow;">top: 19px;</span></b><br />
right: 10px;<br />
z-index: 999999999999;<br />
border-radius: 100px;<br />
padding: 5px 6px;<br />
font-size: 10px;<br />
border-width: 3px;<br />
border: 3px solid <span style="color: #f79646;"><b>#FC8D59</b></span>;<br />
background: #000;<br />
color: #FFF;<br />
cursor: pointer;<br />
}<br />
.sticky-gap {<br />
<b>height: 80px; </b>clear:both;<br />
}</blockquote>
<br style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;" />
<b style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;"><u>Customization:</u></b><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;"> </span><br />
<b style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">[a]</b><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;"> Change Colors </span><br />
<ul style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px; list-style: none;">
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBKJPN5fgAiIcUGVzRBc0UwiR7Orx6mfOCPvIr9fyuWh9eMBHtyMmikMZg7PQVj46-iKZcpuht5ljfK31Noe6EbSPSN-e4SgcngKyQ1QbbmrnJ3-nBLPkj75GmTsItnIOV02ymvLEZ5c/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">To edit the border colors of the toggle button and container edit: <span style="color: #f79646;"><b>#FC8D59</b></span></li>
</ul>
<b style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">[b]</b><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;"> Change Location/Position </span><br />
<span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">By Default the sticky bar displays at the top of webpage but if you wish to show rotating random headlines at your website footer then make these changes: </span><br />
<ul style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px; list-style: none;">
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBKJPN5fgAiIcUGVzRBc0UwiR7Orx6mfOCPvIr9fyuWh9eMBHtyMmikMZg7PQVj46-iKZcpuht5ljfK31Noe6EbSPSN-e4SgcngKyQ1QbbmrnJ3-nBLPkj75GmTsItnIOV02ymvLEZ5c/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace <b><span style="background-color: #f79646;">top:0px;</span></b> with <b><span style="background-color: #f79646;">bottom</span><span style="background-color: #f79646;">:0px;</span></b></li>
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBKJPN5fgAiIcUGVzRBc0UwiR7Orx6mfOCPvIr9fyuWh9eMBHtyMmikMZg7PQVj46-iKZcpuht5ljfK31Noe6EbSPSN-e4SgcngKyQ1QbbmrnJ3-nBLPkj75GmTsItnIOV02ymvLEZ5c/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace <b><span style="background-color: yellow;">top:19px;</span></b> with <b><span style="background-color: yellow;">bottom:</span><span style="background-color: yellow;">19px;</span></b></li>
</ul>
<b style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">[c]</b><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;"> To increase or decrease the vertical gap between your content and the sticky bar edit </span><b style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">height: 80px;</b><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;"> </span><br />
<b style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;"></b><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;"></span><br style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;" />
<span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">8. Now finally search for the body tag which is </span><b style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;"><body></b><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;"> </span><br />
<span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">Note: If you are using Official Blogger Templates then search for this tag instead: </span><br />
<blockquote style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYF-anZ0ocki-5I96A1rQcac6XyAefrwPHuUoMnG4IY7nICKdKkw-o_q2VBnYu8PRsGtFoaklmTzWhL75-zkiV7uvQvdS5rjVgARmOuOaasRHQhG0gRyZ1VbCrwVfoAbXs0lO_Stlgs3HB/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #555555; font-family: helvetica, arial; font-size: 15.3999996185303px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; position: relative; word-wrap: break-word;">
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'></blockquote>
<br style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;" />
<span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">After you have found the proper body tag simply paste the following code below it: </span><br />
<br />
<blockquote style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYF-anZ0ocki-5I96A1rQcac6XyAefrwPHuUoMnG4IY7nICKdKkw-o_q2VBnYu8PRsGtFoaklmTzWhL75-zkiV7uvQvdS5rjVgARmOuOaasRHQhG0gRyZ1VbCrwVfoAbXs0lO_Stlgs3HB/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #555555; font-family: helvetica, arial; font-size: 15.3999996185303px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; position: relative; word-wrap: break-word;">
<input id='toggleButton' type='button' value='▲'/><br />
<div id='MBT-Sticky-container'><br />
<b><script src='http://feeds.feedburner.com/TntByStc?format=sigpro' type='text/javascript'></script></b><br />
    </div><div class="sticky-gap"></div></blockquote>
<br style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;" />
<span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">Replace the above bolded JavaScript code with the BuzzBoost code you copied in </span><span style="color: #289728; font-family: helvetica, arial;"><span style="background-color: white; font-size: 14px; line-height: 22.3999996185303px;">this step</span></span><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">. </span><br />
<span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">  9.  Save your template and you are all done! </span><br />
<span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">Visit your blog to see an attractive attention grabber working just perfectly! :) </span><br />
<h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: helvetica, arial; font-size: 19.6000003814697px; line-height: 22.3999996185303px; margin-bottom: 10px; padding: 3px;">
Show Random Headlines in Blogger - Manual</h3>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">
If you wish to display a selected list set of links then you can surely create your own list by making these simple changes.</div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">
<br />
<b><u>1. Change the CSS Code:</u></b><br />
Inside the CSS code shared above in <span style="color: #289728;">step#7</span>  replace all .<b>feedburnerFeedBlock ul</b>   with<span style="color: #c0504d;"><b>.feedburnerFeedBlock1</b></span></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">
<br />
<b><u>2. Change the HTML code</u></b><br />
Instead of using the HTML code shared in step#8 kindly use the following one:</div>
<blockquote style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYF-anZ0ocki-5I96A1rQcac6XyAefrwPHuUoMnG4IY7nICKdKkw-o_q2VBnYu8PRsGtFoaklmTzWhL75-zkiV7uvQvdS5rjVgARmOuOaasRHQhG0gRyZ1VbCrwVfoAbXs0lO_Stlgs3HB/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #555555; font-family: helvetica, arial; font-size: 15.3999996185303px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; position: relative; word-wrap: break-word;">
<input id='toggleButton' type='button' value='▲'/><br />
<div id='MBT-Sticky-container'><br />
<ul class='feedburnerFeedBlock1'><br />
  <li><a href='ADD URL HERE'>ADD TEXT 1 HERE</a></li><br />
<li><a href='ADD URL HERE'>ADD TEXT 2 HERE</a></li><br />
<li><a href='ADD URL HERE'>ADD TEXT 3 HERE</a></li><br />
<li><a href='ADD URL HERE'>ADD TEXT 4 HERE</a></li><br />
<br />
  </ul><br />
    </div><div class="sticky-gap"></div></blockquote>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">
The above code will help you create 4 headlines. You can edit the text and URL address for each link. To create a new headline simply keep on adding the following line:</div>
<blockquote style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYF-anZ0ocki-5I96A1rQcac6XyAefrwPHuUoMnG4IY7nICKdKkw-o_q2VBnYu8PRsGtFoaklmTzWhL75-zkiV7uvQvdS5rjVgARmOuOaasRHQhG0gRyZ1VbCrwVfoAbXs0lO_Stlgs3HB/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #555555; font-family: helvetica, arial; font-size: 15.3999996185303px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; position: relative; word-wrap: break-word;">
<li><a href='ADD URL HERE'>ADD TEXT  HERE</a></li></blockquote>
<span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">That's it! </span></div>

Blogger Tips and Tricks Blogger Tricks Blogging Latest Tips Cool Blog Tricks Earn money online Floating Bar Headlines how to become a blogger how to blog SEO widget Tricks Show Random Headlines Inside Sticky Floating Bar

Show Random Headlines Inside Sticky Floating Bar Ever wondered to create a Sticky Floating Bar to show Random headlines on your blog...