Blog Tricks Center: Blogger Tricks

Divide/Break Blogger post into differernt Pages

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
Divide/Break Blogger post into differernt Pages</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHI_OnxR2FdW2DDprKADvyU6Ac5hO8J2t0u7GlO0jU37gqOrFsRIp7k6MPR2LgJEsDzs3LjOhENTkDub_Iq6Fwns7KMCpfToe92JP3Zy-uoXqFD7xeWcR7v4nzjkwl8CrBZgz_T-V85pVN/s1600/Split+up+blogger+pages.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHI_OnxR2FdW2DDprKADvyU6Ac5hO8J2t0u7GlO0jU37gqOrFsRIp7k6MPR2LgJEsDzs3LjOhENTkDub_Iq6Fwns7KMCpfToe92JP3Zy-uoXqFD7xeWcR7v4nzjkwl8CrBZgz_T-V85pVN/s400/Split+up+blogger+pages.png" width="400" /></a></div>
<div style="text-align: center;">
To create engagement and to divide the posts in section this method can be very useful. Also if you have a very long post you may use this method so the long post will now be splited into many shorts pages.</div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<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>
You can see the live demo of how it works by clicking the below button 
 
<a class="download" href="http://inception-rockingtemplates.blogspot.in/2013/05/example-post-of-rt.html" style="-webkit-transition: all 0.4s ease 0s; background: none 0px 0px repeat scroll rgb(52, 152, 220); border-radius: 2px; color: #222222; float: left; font-family: 'Open Sans'; height: 24px; margin: 0px 10px 20px 0px; padding: 10px; text-align: center; text-decoration: none; transition: all 0.4s ease 0s; width: 570.578125px;" target="_blank">Live Demo</a> Once you have seen the demo to split up your post what you need to do is just follow the below steps. 
 
Add the code in Post Editor 
 
Firstly open the post editor and switch to HTML tab. By default the Compose tab is selected. After opening it paste the below code 
<style> 
.post-pagination { 
    margin: 20px auto; 
    text-align: center; 
    width: 100%; 
} 
.button_1, .button_2, .button_3 { 
    border: 2px solid #f4655f; 
    font-weight: 900; 
    padding: 6px 36px; 
    color:#f4655f; 
    transition:ease 0.69s !important; 
} 
.button_1:hover, .button_2:hover, .button_3:hover { 
    background: none repeat scroll 0 0 #f4655f; 
    color: #fff; 
    text-decoration: none; 
} 
</style> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
jQuery('.button_1').click(function(){ 
jQuery('.content_1').fadeIn('slow'); 
  jQuery('.content_2').fadeOut('fast'); 
jQuery('.content_3').fadeOut('fast'); 
jQuery(this).css('background','#F4655F'); 
jQuery(this).css('color','#fff'); 
jQuery('.button_2').css('background','#fff'); 
jQuery('.button_2').css('color','#F4655F'); 
jQuery('.button_3').css('background','#fff'); 
jQuery('.button_3').css('color','#F4655F'); 
return false; 
}); 
jQuery('.button_2').click(function(){ 
jQuery('.content_1').fadeOut('fast'); 
  jQuery('.content_2').fadeIn('slow'); 
jQuery('.content_3').fadeOut('fast'); 
jQuery(this).css('background','#F4655F'); 
jQuery(this).css('color','#fff'); 
jQuery('.button_1').css('background','#fff'); 
jQuery('.button_1').css('color','#F4655F'); 
jQuery('.button_3').css('background','#fff'); 
jQuery('.button_3').css('color','#F4655F'); 
return false; 
}); 
jQuery('.button_3').click(function(){ 
jQuery('.content_1').fadeOut('fast'); 
  jQuery('.content_2').fadeOut('fast'); 
jQuery('.content_3').fadeIn('slow'); 
jQuery(this).css('background','#F4655F'); 
jQuery(this).css('color','#fff'); 
jQuery('.button_1').css('background','#fff'); 
jQuery('.button_1').css('color','#F4655F'); 
jQuery('.button_2').css('background','#fff'); 
jQuery('.button_2').css('color','#F4655F'); 
return false; 
}); 
}); 
</script> 
<div class="content_1"> 
Add content here 
</div> 
<div class="content_2" style="display: none;"> 
Add content here 
</div> 
<div class="content_3" style="display: none;"> 
Add content here 
</div> 
 
<div class="post-pagination"> 
<a class="button_1" href="#">1</a> 
<a class="button_2" href="#">2</a> 
<a class="button_3" href="#">3</a> 
 
</div> 
 
Now replace Add content here with the text you want in the respective pages and publish the post. 
 
Important Points to Note before you move on 
 
There are some points you need to note as they are very crucial for this particular splitting. 
 
 
<ul style="text-align: left;">
<li> Make sure you have the jquery plugin in your blog, if not then add the below code just below the code <head> in your template.</li>
</ul>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<ul style="text-align: left;">
<li> It is preferred that you first draft the post and at the last point add this code and make respective changes as due to changing of tabs from Compose to HTML and vice versa the code may automatically get changed.</li>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<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>
</ul>
<ul style="text-align: left;">
<li>You may have got the idea of the code pattern and I guess one can add more pages if they want (here the tut is given only for 3 pages) in case you have any problem drop a comment below and I will try to help you as soon as possible.</li>
</ul>
 
 
 
Thats it, you are done now. Now you and your visitors can see long posts divided just as you would see in WP posts.</div>

Divide/Break Blogger post into differernt Pages To create engagement and to divide the posts in section this method can be very useful...

Great Tips For Boosting Up Your Blog

20:50 Dinesh Soni 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title" style="font-family: Arial, sans-serif; font-stretch: normal; line-height: 1.2em; margin: 0px 0px 7px; padding: 3px 0px;">
Great Tips For Boosting Up Your Blog</h2>
<div class="post-body entry-content" style="font-family: verdana; line-height: 1.6em; margin: 0px 0px 0.75em;">
 
<div class="separator" style="background-color: white; clear: both; color: #333333; line-height: 20.7999992370605px; text-align: center;">
<img alt="blog subscribers" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm7dmGQAm8YcUNJ-qxLX_8y8hIC5Sv1kJltkVk9P0zacCblF7mavJ1KRPn6Cx0lwsvCuDr3X7SDKHV6VtJ_03g3wS8SPfRi_Yj1J0onBFubQ7OP5gwPvaWTZMZKyHvbJwCOSb970mheLE/s400/boosting+up+subscriber+base.png" style="padding: 10px;" title="Boosting Blog Subscriber base" width="400" /></div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<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>
Many beginners tend to underestimate the importance of building a strong subscriber base for their blogs. A successful blog isn’t just well written and well-presented content, its maintaining a dedicated and passionate subscriber base who would read your content and spread it across their own networks. Engaged readers provide long term and reliable traffic to your blog.  
 
<center style="background-color: white; color: #333333; line-height: 20.7999992370605px;">
</center>
While there is no denying that building a loyal subscriber base can be a tricky and long process, it can be done with dedication and hard work by the bloggers. So those who do work on it need to do it right to make sure their time is well utilized. Today we take a look at 5 Tips to boost up your blog's subscriber base. 
<h4 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; line-height: 20.7999992370605px; padding: 3px;">
1. Give your readers a reason to subscribe</h4>
<div class="separator" style="background-color: white; clear: both; color: #333333; line-height: 20.7999992370605px; text-align: center;">
<img alt="subscribe incentive" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZlfdaATsUnOW1xBZGHbJdC5iU2Cr4cSRvUK2Cr-aWYjOIUhvBHxHzzT6GmFaS9UxqXTKqF7hffbgoSc5Nr7U_E8MA2kfkQTBPxpbjvwpFfeA1hwWg-f_yMND-lCSxQlvDa2lqyHpmbZI/s320/reason.jpg" style="padding: 10px;" title="Offering an Incentive" /></div>
If someone visits your blog and sees a “Subscribe” button there, he/she should know exactly what they will get from subscribing to your blog. For example, if your blog is about Internet Marketing, you should have a text that says “covers all inbound marketing, SEO marketing and email marketing”. Giving your readers an incentive to subscribe is a plus that will push them to subscribe to your site. Everybody likes free stuff, so will your readers. Offer them an exclusive ebook or something relevant on a certain topic that was not covered in your posts in return for subscribing to the blog. 
 
 
<h4 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; line-height: 20.7999992370605px; padding: 3px;">
2. Simpler is better</h4>
<div class="separator" style="background-color: white; clear: both; color: #333333; line-height: 20.7999992370605px; text-align: center;">
<img alt="simple website design" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj24FArQuFspqUfaM67_i7rXBOJdWcUfs9sECI9kqCFwy6mCqlstVaWlB0z5N-Csf9HOJABWollgnFP4l_6gs55964-TIUjEaXg_FKiDBk1oKemMMm9T6UbJFjYV-tg7fQ3nm7O4KiF6YM/s320/simple.jpg" style="padding: 10px;" title="Simpler is better" /></div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<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>

It’s a basic rule of web design that your website should lead the user to the desired action in less than three clicks. In this case, the subscription process can be made as simple as one-click. Soon enough you’ll figure out that there are many people out there who are unfamiliar with the concept of RSS Feeds. Try explaining to them how it works and how wonderful it is. Then, of course, there are readers who simply don’t prefer RSS. In that case provide them with an alternative, most commonly, an email subscription to your blog. 
<h4 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; line-height: 20.7999992370605px; padding: 3px;">
3. Produce Quality Content</h4>
While it may be obvious, but no matter how great your marketing and subscription strategies for your blogs are, your readers will never return to you if they are not satisfied with the content. Try to find peak traffic times for your blog and post on those times to touch the as many readers as possible. If posting on those times is a problem for you, schedule your posts to be published, schedule your posts to be published on the specified timings. Write frequently and write well. That is the key concept. 
<h4 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; line-height: 20.7999992370605px; padding: 3px;">
4. Leverage Social Proof</h4>
<div class="separator" style="background-color: white; clear: both; color: #333333; line-height: 20.7999992370605px; text-align: center;">
<img alt="leverage social proof" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdwpJWOLVAtTL3SwJGCZuUeDl96L_Z4A3jkngC8o2Nu2jedfdDnpP64d83oJ0qkU5KUpsWB0CzmhJQoFrSaIe8ek5CutolU_FlqR8QW7dawJfj-NnbsLasTDOm1Jcwz8MP7J2nythG8c/s400/levershit.png" style="padding: 10px;" title="Leverage social proof" width="285" /></div>
People tend to follow the masses, its human nature. That remains true in case of blogging. You can make use of this to make people subscribe to your blog. While this scheme may not work particularly well for a newer blog, it can work handsomely for a blog with a decent number of subscribers. Display the number of subscribers your blog has next to the subscribe button. Not only does this boost their confident in your blog, but also pushes them to subscribe to a blog that is followed and trusted by many. 
 
<h4 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; line-height: 20.7999992370605px; padding: 3px;">
5. Use All Available Resources</h4>
<div class="separator" style="background-color: white; clear: both; color: #333333; line-height: 20.7999992370605px; text-align: center;">
<img alt="social media" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0SwnSOCqujN0eIRprekbuW5rilcDN6VGcI6UlyNLCcLzVHMQ6XUh8a7kWSEqLRAKw8hSDC40JMgBebab3ZQ8HA6jpZHfptNyAitK-2G8zJuOQfQdKm8Bl1IO32FBYTagYGXqb4E_0Woo/s320/boosting+up+subscriber+base.png" style="padding: 10px;" title="Use all available resources" /></div>
Use your existing blogs, website, social media profiles to convince audience to subscribe to the blog. If you already have a subscriber base elsewhere, you can easily convince them to subscribe to the blog since they already enjoy your content. They might even recommend your RSS feed to others. Add social media sharing buttons to the blog posts. If your readers enjoyed a post, they can share it with their Facebook/Twitter/LinkedIn networks and eventually some of them will end up subscribing to your blog. Let the readers do some work too. 
 
Although there is a lot more you can do to help your blog gain more subscribers, these tips pretty much form the gist of them. So what have you done to increase the subscriber base of your blog? Let us know in the comment section below!</div>
<div>
 </div>
</div>

Blogger Tricks Boost Blog Traffic Getting More Views on blog Grow Your Blog traffic Improve Your SEO Increase Traffic to Your Site Tips to Boost Traffic to Your Blog Great Tips For Boosting Up Your Blog

Great Tips For Boosting Up Your Blog Many beginners tend to underestimate the importance of building a strong subscriber base for...

AdSense Ads Not Showing On my Website (blog) - Problem Solved

22:13 Dinesh Soni 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
AdSense Ads Not Showing On my Website (blog) - Problem Solved</div>
<div style="text-align: left;">
AdSense Ads Not Showing On HomePage: It happens when you are new to Blogging and  AdSense world.The Problem is your AdSense ads will not be displayed on the home page of your blog or website.Actually it's not a big problem but you have to set your blog preferences.And that's all the secret behind fixing this Problem.</div><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
 style="display:inline-block;width:728px;height:90px"
 data-ad-client="ca-pub-8616135883183169"
 data-ad-slot="6839278135"></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/AVvXsEjQg1lFfiZpcTeRn1XqiEvTzYJ-lfKT3CEW6b1pBoe6weyLfwpuJEN_9i_JzAPiIh1DwUV0ejMFsdrvQZObr_YOtiT3ACtIEy6GmDWg7ykncCJgu0hDThSrcOfYE6Bjk386JBi6_g3-0vXv/s1600/ad.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQg1lFfiZpcTeRn1XqiEvTzYJ-lfKT3CEW6b1pBoe6weyLfwpuJEN_9i_JzAPiIh1DwUV0ejMFsdrvQZObr_YOtiT3ACtIEy6GmDWg7ykncCJgu0hDThSrcOfYE6Bjk386JBi6_g3-0vXv/s1600/ad.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both;">
How To Fix This Problem</div>
<div class="separator" style="clear: both;">
</div>
<ul style="text-align: left;">
<li>Go To Blogger Dashboard </li>
<li>Click On Settings</li>
<li>Click On Preferences</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo8JurNOTLXDex1_hs-cZjao2FnsOfGySlbXS2Q11n4OtGEwzF8DiXkFpSWGuL56kTfEILuC7e6k3J0dlx04853eLJv_0uKydwtwPEtmL6mjXc9C760uAZuQpoh9twAelUa8GxReD2CibA/s1600/CliCK.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo8JurNOTLXDex1_hs-cZjao2FnsOfGySlbXS2Q11n4OtGEwzF8DiXkFpSWGuL56kTfEILuC7e6k3J0dlx04853eLJv_0uKydwtwPEtmL6mjXc9C760uAZuQpoh9twAelUa8GxReD2CibA/s1600/CliCK.PNG" width="400" /></a></div><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
 style="display:inline-block;width:336px;height:280px"
 data-ad-client="ca-pub-8616135883183169"
 data-ad-slot="7224714538"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div>
 </div>
 
 
<ul style="text-align: left;">
<li> Now Just Scroll Down little below</li>
<li>You will see the below area called Meta Tags as shown</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3HW9608GOlzwywvtTi90PC4OM4yaIYvwTLwnIgu7f0b8EB4HVnCJs1c38juhbtgDD2-7JOruFMB_VK7nO7bk-ZzP36Mhp1Csoe6FSo0gRh3Ax9rqTiyi36yBwzPSX7_hwquG9fmVhuPis/s1600/YeS.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3HW9608GOlzwywvtTi90PC4OM4yaIYvwTLwnIgu7f0b8EB4HVnCJs1c38juhbtgDD2-7JOruFMB_VK7nO7bk-ZzP36Mhp1Csoe6FSo0gRh3Ax9rqTiyi36yBwzPSX7_hwquG9fmVhuPis/s1600/YeS.PNG" width="640" /></a></div>
 
<div>
<ul style="text-align: left;">
<li>Now Enable Search Description (click on yes) and give a little description about your blog.</li>
<li><div style="display: inline !important;">
That's it</div>
</li>
</ul>
</div>
<div>
<div>
So What's Up : You may have search alot about this problem ,every one is explaining it in it's own way but the solution is here.Stay Blessed , Happy Blogging!</div>
</div>
</div>

Ads Not Showing Adsense Ads not appearing on my Website Adsense ads not showing Adsense Ads Not Showing in Blogger Blogger Tricks Can't see my AdSense FIXED! Adsense Ads not Showing AdSense Ads Not Showing On my Website (blog) - Problem Solved

AdSense Ads Not Showing On my Website (blog) - Problem Solved AdSense Ads Not Showing On HomePage: It happens when you are new to Bloggi...

Blogger Secrets - Create Sitemap For Blogger

06:56 Dinesh Soni 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
Blogger Secrets - Create Sitemap For Blogger</div>
<div style="text-align: center;">
 </div>
Sitemap is a list of pages Of a Blog or Website which enables the Search Engine Crawlers to crawl the blog/website pages.Actually there are two types of Sitemap. 
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<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>

XML Sitemap 
HTML Sitemap 
 
 
XML Sitemap is actually a structured format which a user can't see i.e it may be in the coding of Template or hidden. But the bonus point of this Sitemap is they tell the search Engines for crawling the web pages while on the other side HTML Site-Map are specially designed for the users to enable them to find content on your Blog/website,this visitors and Search Engine Bots find the pages of such Site-mapped blog. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgafJYuiiS6WKdA84Q2Cypb4hsrESdOVyBjAK8UKoSX4sdal6pGMiEWbcT8r83yB8OuFlqZhr7a1RGvv_CAiASotY0p7lTd4lqT1j-RU4jeEeUSIjS6hnM-yHVKpEEghP9CnpSIJdq3XSVu/s1600/sitemap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgafJYuiiS6WKdA84Q2Cypb4hsrESdOVyBjAK8UKoSX4sdal6pGMiEWbcT8r83yB8OuFlqZhr7a1RGvv_CAiASotY0p7lTd4lqT1j-RU4jeEeUSIjS6hnM-yHVKpEEghP9CnpSIJdq3XSVu/s1600/sitemap.png" width="640" /></a></div>
How To Create Sitemap For Blogger 
 
<ul style="text-align: left;">
<li>All you have to do is making a new page in your Blog</li>
<li>After Creating a Page Click On The Pages</li>
<li>And Then Click On The Page you have Created</li>
<li>Now There will be two Option at the left-most side i.e Compose/HTML</li>
<li>Simply Click On HTML</li>
<li>Now Copy the Below Script and paste it there</li>
</ul>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<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>
<div dir="ltr" style="text-align: left;" trbidi="on"></div>
<div>
 
<div style="font-family: Verdana, sans-serif;">
<script src="http://yourjavascript.com/18113981113/bukarahasiablog-toc.js"></script><script src="http://blogtrickscenter.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

<div style="font-family: Verdana, sans-serif;">
</div></div>
<div style="font-family: Verdana, sans-serif;">
 </div>
<div>
<div>
Change "http://blogtrickscenter.blogspot.com" with your Blog Name!</div>
<div>
Now Save The Pages Section</div>
<div>
And That's it.</div>
<div>
So What's Up:- Adding Sitemap to Blog which certainly enable the Search Engine Crawlers to crawl  your Blog Contents as a result you may get high rank and traffic,Share your beautiful ideas with us,Stay Blessed,Happy Bloggging!</div>
<div>
Easy Way To Create Sitemap For Blogger</div>
</div>
</div>
</div>

Blogger Tricks Generate Blogger Sitemap How to create sitemap for Blogger blog How To Submit Blogger Sitemap improve crawling rate Sitemap Generator Blogger Secrets - Create Sitemap For Blogger

Blogger Secrets - Create Sitemap For Blogger Sitemap is a list of pages Of a Blog or Website which enables the Search Engine Crawlers t...

Add Cool Drop Down Menu in Blogger Widget Collection

06:29 Dinesh Soni 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
Add Cool Drop Down Menu in Blogger Widget Collection</div>
<div style="text-align: left;">
Drop Down Navigation Menu For Blogger : You may have seen many drop-down menus but today "ThatsBlogging" will present you an incredible Drop Down menu , which is really a magnificent drop down menu.Actually it is developed by the combination of CSS with HTML . Beautiful Colors combinations are used which makes it more significant drop down menu.Actually , drop down menu makes your blog navigative and easy to expand.This drop down menu is very stylish which means your Blog Beauty will increase by adding this menu.Moreover this menu will not slow your blog loading speed. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq3s5eY_uSH7mIHES6dPIF8KkSRYLN5utIFfJcDcPvq-CIQyiJDBQaC30CAfdV_rEtMNaFx6SWcMmBTl5cCDII41ZZT9RPoxUzi6id8qs9vT1wSc__9OUHRoMjtJ70DKNah5VDDquL5Tpc/s1600/drop-down-thatsblogging-menu.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq3s5eY_uSH7mIHES6dPIF8KkSRYLN5utIFfJcDcPvq-CIQyiJDBQaC30CAfdV_rEtMNaFx6SWcMmBTl5cCDII41ZZT9RPoxUzi6id8qs9vT1wSc__9OUHRoMjtJ70DKNah5VDDquL5Tpc/s1600/drop-down-thatsblogging-menu.PNG" width="640" /></a></div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="9792744538" style="display: inline-block; height: 90px; width: 120px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
How To Add Cool Drop Down Menu In Blogger 
 
<ul style="text-align: left;">
<li>Go To Blogger Dashboard</li>
<li>Click On Template</li>
<li>Edit HTML</li>
<li>Search For </header></li>
<li>Copy the Below Script and Add it below the Closing Header tag ( </header>)</li>
</ul>
 
 
<div id='menubor'></div><center><ul id='menu'> 
<li><a class='hmlink' href='#'>Home</a></li> 
<li><a class='winlink' href='#'>Blogger Templates</a></li> 
<li><a class='maclink' href='#'>Blogger Widgets</a></li> 
<li><a class='andlink' href='#'>How To Tuts</a></li> 
<li><a class='gamlink' href='#'>Privacy Policy</a></li> 
<li><a class='seclink' href='#'>Guest Post</a></li> 
<li><a class='linlink' href='#'>About</a></li> 
</ul></center> 
<style> 
#menu li {                
 display: inline;                
 list-style: none;                
 padding: 0;            
 }                    
 
 #menu li a {                                  
 padding: 15px 20px 15px 20px;                
 text-decoration: none;                
  color:white; 
  font-family: 'Noto Serif', serif; 
-moz-box-shadow: inset 0 0 13px -2px #000; 
-webkit-box-shadow: inset 0 0 13px -2px #000; 
box-shadow: inset 0 0 13px -2px #000; 
  font-size:18px; 
  -webkit-border-bottom-right-radius: 10px; 
-webkit-border-bottom-left-radius: 10px; 
-moz-border-radius-bottomright: 10px; 
-moz-border-radius-bottomleft: 10px; 
border-bottom-right-radius: 10px; 
border-bottom-left-radius: 10px; 
  transition: padding-bottom .666s; 
-webkit-transition: padding-bottom .666s; 
-moz-transition: padding-bottom .666s; 
-o-transition: padding-bottom .666s; 
-ms-transition: padding-bottom .666s; 
   
   
} 
 #menu li a:hover {                                  
 
  padding-bottom:20px; 
} 
.hmlink{ 
  background:#24459A; 
} 
.winlink{ 
  background-color: rgba(9,173,217,1); 
} 
.maclink{ 
  background-color: rgba(108,109,112,1); 
} 
  .weblink{ 
    background:#EEEE00; 
    color:black; 
  } 
.andlink{ 
  background-color: rgba(149,191,43,1); 
} 
.gamlink{ 
  background-color: rgba(212,2,43,1); 
} 
.seclink{ 
  background-color: rgba(0,158,62,1); 
} 
.linlink{ 
  background-color: rgb(123, 82, 138); 
} 
#menubor{ 
  border-top:1px solid black; 
  margin-bottom:-1px; 
} 
  .header-outer{ 
    padding-bottom:20px; 
  } 
</style> 
 
Changes 
 
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<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>

<ul style="text-align: left;">
<li>For Changing the Links Replace # with your Own Links and the Anchor text with your desired text</li>
<li>That's it , Save Your template and have fun !</li>
<li>If you are interested in adding extra <li> options for that add  <li><a class='desiredword' href='#'>text</a></li> between <ul> and </ul> tags.</li>
<li>After implementing the above step ,  you have to define the class in CSS for that define the class between the style container and hit save.</li>
<li>If you have any Question ask it freely !! Stay Blessed , Happy Blogging !</li>
</ul>
 
</div>

Add Dropdown Menus to Blogger Blogger Drop Down Menu tips Blogger Tricks Blogger Widgets Create a Drop Down Menu In Blogger How to add Menu Bars to Blogger Add Cool Drop Down Menu in Blogger Widget Collection

Add Cool Drop Down Menu in Blogger Widget Collection Drop Down Navigation Menu For Blogger : You may have seen many drop-down menus but ...

Multi colored random posts Widget for Blogger

05:12 Dinesh Soni 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
Multi colored random posts Widget for Blogger </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik-1AEsocz0kE6rvmk6SLPyoBIHo92kXVoX4UCDtOKnxYB2duwZnpl6paR-aYd0Y_kncoIIDhw81k_xjRDAh3IVEap_5LRvYib5KjXarIf0vq6K87SaI8JkFEwC9Nf8FtZ1AYWIegfTGTz/s1600/1G0vbXl.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik-1AEsocz0kE6rvmk6SLPyoBIHo92kXVoX4UCDtOKnxYB2duwZnpl6paR-aYd0Y_kncoIIDhw81k_xjRDAh3IVEap_5LRvYib5KjXarIf0vq6K87SaI8JkFEwC9Nf8FtZ1AYWIegfTGTz/s1600/1G0vbXl.gif" width="351" /></a></div>
<div style="text-align: center;">
 </div>
Random Posts widget is an awesome widget for your Blogger Blog.We posted about How to add random posts widget, Most important feature of this widget is it lets your Blog visitors to surf more blog posts in your blog.Its let your users to spend more time in your Blog. Surely it increases your Blog's internal links that lets your blog higher traffic.This is the modified version of the Random posts widget we posted earlier, one of our visitor "Yogesh Gamer" asked me to make this widget like Multi colored Popular posts Widget. So after that I just tried and it got success. Please do check this widget and comment your suggestions... 
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-format="auto" data-ad-slot="6504860932" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<div style="text-align: center;">
Features of This Widget</div>
<div style="text-align: center;">
 Flat UI colors used (it will attract users attention)</div>
<div style="text-align: center;">
Automatic Post Numbering</div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
Sign In to Blogger Dashboard</div>
<div style="text-align: center;">
Go to Layout</div>
<div style="text-align: center;">
Click on Add Gadget and look for HTML/Javascript and select it</div>
<div style="text-align: center;">
Copy the below code inside it and click save</div>
<div style="text-align: center;">
 </div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<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>
<style type="text/css"> 
.noop-random-posts ul li { 
    list-style-image:none; 
}.noop-random-posts ul { 
list-style-type: none; 
margin: 0; 
padding: 5px 0; 
} 
.noop-random-posts ul li { 
border: 0 none; 
margin: 5px 0; 
padding: 10px; 
position: relative; 
} 
.noop-random-posts ul li:first-child { 
background: none repeat scroll 0 0 #FF4C54; 
width: 97%; 
} 
.noop-random-posts ul li:first-child:after { 
content: "1"; 
} 
.noop-random-posts ul li:first-child + li { 
background: none repeat scroll 0 0 #FF764C; 
width: 87%; 
} 
.noop-random-posts ul li:first-child + li:after { 
content: "2"; 
} 
.noop-random-posts ul li:first-child + li + li { 
background: none repeat scroll 0 0 #FFDE4C; 
width: 84%; 
} 
.noop-random-posts ul li:first-child + li + li:after { 
content: "3"; 
} 
.noop-random-posts ul li:first-child + li + li + li { 
background: none repeat scroll 0 0 #C7F25F; 
width: 81%; 
} 
.noop-random-posts ul li:first-child + li + li + li:after { 
content: "4"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li { 
background: none repeat scroll 0 0 #33C9F7; 
width: 78%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li:after { 
content: "5"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li { 
background: none repeat scroll 0 0 #7EE3C7; 
width: 75%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li:after { 
content: "6"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li { 
background: none repeat scroll 0 0 #F6993D; 
width: 72%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after { 
content: "7"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li { 
background: none repeat scroll 0 0 #F59095; 
width: 69%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after { 
content: "8"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li { 
background: none repeat scroll 0 0 #C7F25F; 
width: 66%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after { 
content: "9"; 
} 
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after { 
background: none repeat scroll 0 0 #353535; 
border-radius: 50% 50% 50% 50%; 
color: #FFFFFF; 
font-size: 25px; 
height: 30px; 
position: absolute; 
right: -17px; 
text-align: center; 
top: 1px; 
width: 30px; 
} 
.noop-random-posts ul li a { 
color: #444444; 
font-size: 13px; 
text-decoration: none; 
} 
</style> 
<div class="noop-random-posts"><script type="text/javascript"> 
    var randarray = new Array();var l=0;var flag; 
    var numofpost=5;function nooprandomposts(json){ 
    var total = parseInt(json.feed.openSearch$totalResults.$t,10); 
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} 
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); 
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; 
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; 
    document.write(item);}} 
    }document.write('</ul>');} 
    </script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a> 
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div></div>

Blogger Design Blogger Security Blogger Special Tricks Blogger Tips Blogger Tricks Blogger Widgets Blogging Basic Tips blogging tricks CSS3 Increase traffic Style your Blog Template Tricks Multi colored random posts Widget for Blogger

Multi colored random posts Widget for Blogger Random Posts widget is an awesome widget for your Blogger Blog.We posted about How to ...

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">
Show Random Headlines Inside Sticky Floating Bar</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">
 </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">
Ever wondered to create a Sticky Floating Bar to show Random headlines on your blog?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 responsive designs. 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>

 
<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>

<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;"><a href="http://facebook-comments-box.blogspot.com/2013/07/sticky-floating-bar-for-blogger.html">DEMO</a></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">
Note: For Dynamic version only. If you wish to add a static/manual version of this plugin then skip this step. 
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 > BuzzBoost</li>
<li>Uncheck all the boxes. Keep number of items 15 or you can choose All to select all posts have your published so far. Make links open in same window.</li>
<li>Click Save to activate the List of your recent posts.</li>
</ol>
</div>
 
<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" /> 
   4. Feedburner will give you a JavaScript code that you will need to copy. Only copy the code starting with <script> and ending with </script> as shown below:  
<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" /> 
  Save this code inside a notepad because we will need to use it later in this tutorial.  
<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 CSSGlobe 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>
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:  
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<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>

<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 above it 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'> 
//<![CDATA[ 
this.randomizer = function(){ 
    var length = $(".feedburnerFeedBlock li").length; // this is where we put the id of the list 
    var ran = Math.floor(Math.random()*length) + 1; 
    $(".feedburnerFeedBlock li:nth-child(" + ran + ")").show(); 
}; 
$(document).ready(function(){ 
    randomizer(); 
}); 
 
$(document).ready(function() { 
$('#toggleButton').click(function() { 
if ($('#MBT-Sticky-container').is(':visible')) { 
$(this).val('▼'); 
} else { 
$(this).val('▲'); 
} 
$('#MBT-Sticky-container').slideToggle(); 
}); 
}); 
//]]> 
</script></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;">
5.  Optional: Skip this step if you have Jquery source link already added inside your template. 
Next search for <head> and just below it 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:skin>.  Click the black arrow to expand the code. 
<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" /> 
   7.  Paste the following CSS Styles just above ]]></b:skin></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 --------------*/ 
#creditfooter{display:none;} 
#MBT-Sticky-container { 
   height: 55px; 
background: #000; 
border-top: 5px dashed #FC8D59; 
border-bottom: 2px solid #FFFFFF; 
position: fixed; 
width: 100%; 
z-index: 99999; 
box-shadow: 1px 2px 9px #666; 
top:0px; } 
.feedburnerFeedBlock ul, .feedburnerFeedBlock ul li{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    } 
 
    .feedburnerFeedBlock ul li a { color:#fff!important; text-decoration:none;} 
        .feedburnerFeedBlock ul li a:hover {text-decoration:underline;} 
.feedburnerFeedBlock ul{ 
    line-height:120%; 
 
    } 
.feedburnerFeedBlock ul li{ 
    padding:20px; text-align:center; font-family:georgia; font-size:17px; font-weight:bold; 
 
    display:none; /* hide the items at first only to display one with javascript */ 
    } 
#toggleButton { 
position: fixed; 
top: 19px; 
right: 10px; 
z-index: 999999999999; 
border-radius: 100px; 
padding: 5px 6px; 
font-size: 10px; 
border-width: 3px; 
border: 3px solid #FC8D59; 
background: #000; 
color: #FFF; 
cursor: pointer; 
} 
.sticky-gap { 
height: 80px; clear:both; 
}</blockquote>
 
Customization:  
[a] Change Colors  
<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: #FC8D59</li>
</ul>
[b] Change Location/Position  
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:  
<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 top:0px; with bottom:0px;</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 top:19px; with bottom:19px;</li>
</ul>
[c] To increase or decrease the vertical gap between your content and the sticky bar edit height: 80px;  
 
8. Now finally search for the body tag which is <body>  
Note: If you are using Official Blogger Templates then search for this tag instead:  
<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>
 
After you have found the proper body tag simply paste the following code below it:  
 
<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='▲'/> 
<div id='MBT-Sticky-container'> 
<script src='http://feeds.feedburner.com/TntByStc?format=sigpro' type='text/javascript'></script> 
    </div><div class="sticky-gap"></div></blockquote>
 
Replace the above bolded JavaScript code with the BuzzBoost code you copied in this step.  
  9.  Save your template and you are all done!  
Visit your blog to see an attractive attention grabber working just perfectly! :)  
<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;">
 
1. Change the CSS Code: 
Inside the CSS code shared above in step#7  replace all .feedburnerFeedBlock ul   with.feedburnerFeedBlock1</div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px;">
 
2. Change the HTML code 
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='▲'/> 
<div id='MBT-Sticky-container'> 
<ul class='feedburnerFeedBlock1'> 
  <li><a href='ADD URL HERE'>ADD TEXT 1 HERE</a></li> 
<li><a href='ADD URL HERE'>ADD TEXT 2 HERE</a></li> 
<li><a href='ADD URL HERE'>ADD TEXT 3 HERE</a></li> 
<li><a href='ADD URL HERE'>ADD TEXT 4 HERE</a></li> 
 
  </ul> 
    </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;">
 </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>
That's it! </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...