How to Add Flash Animated Rotating Label Cloud widget for Blogger

Do you like the rotating label (categories) in the left sidebar of my blog? In this post I will tell you how to add animated label cloud to your blogger/blogspot blog. It is fully built in flash. By default in blogger all the labels are displayed downwards one by one will consume a lot of space. But while using this type of flash animated rotating label cloud will give you a lot of free space. This widget is fully customizable. We can adjust speed, color, font size. Results showed that animated labels cloud get more clicks. Don't worry about seo, it is fully search engine friendly. 

Ok Let's starts.. here are the steps to add flash animated cloud labels widget in to your blogger/blogspot blog:-

1. Login to your Blogger account.
2. Goto Design>Layout.
3. Click on 'Add a widget'.
   
4. Form the window appears select 'HTML/Java Script'.
   
5. Paste this code inside.

<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.atihackingtricks.blogspot.com/">ModifyMyPc</a></p></div>

<script type="text/javascript">

/*<![CDATA[*/

var w2bFlashLabelSettings = {

blogurl : "http://modifymypc.blogspot.com",

color : "000000",

hoverColor : "333333",

backgroundColor: "FFFFFF",

size : 12,

speed : 100,

width : 250,

height : 300,

transparency : true

};

/*]]>*/

</script>

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_new_flash_label_cloud.js"></script>

6. Change the blogurl “http://www.atihackingtricks.blogspot.com” to your blog address.

Tip: You can also adjust colour, size, speed ,width, height as your wish.

7. Click Save.

Now open your blog and see the awesome rotating labels

Continue Reading

How to add Fully Automated Recent Posts Sidebar widget for Blogger

I already posted a lots of blogger widgets , but today i m going to post something more interesting about blogger widgets , personally i like this widget too much. You have seen lots of blog that have Recent posts widgets on their which shows latest or new post of blog. We normally use for sidebar adding widgets like Labels , Popular Posts etc. But this widget is totally different from others widgets.
The widget which i m going to share called Automated Recent Posts Sidebar. As name shows that recent posts will slide each other. This widget have many features like images thumbnails with post title , date and author name. This widget is totally different and automated you have to add just your blog URL in it and this widget will keep updating the posts of your blog. This widget give more attraction to your blog and will catch the visitors easily.
If you want add "Automated Recent Posts Sidebar for Blogger" in your blog follow the steps.

• Goto to blogger.
• Click on layout then click on ADD A GADGET.
• Choose HTML/JavaScript and paste the below code inside it.

<style scoped="" type="text/css">
ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}
ul.abt-sidebar-slider{width:100%;height:500px}
ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}
ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider  .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg19uQ0mi59MfgipXE7SWPmAgor_y2jd50gJcDMggrfJpWBvJXne5dOegNKkEsEbC3KHP3pUr6uUVel1d2XlieFRiyx4bz38QK66JVr-SikTmJlXJUacQeQLy4iVBu0vatBjplLsO4NGRo/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}
ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}
ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.atihackingtricks.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script><div style="text-align: center;">
<a href="http://atihackingtricks.blogspot.in/2013/07/how-to-add-fully-automated-recent-posts.html" target="_blank"><b>+&nbsp;Get this Widget</b></a></div>

• Just  replace http://www.atihackingtricks.blogspot.com with your blog URL.
• Replace true with false if don't want to starts the sliders automatically.
• Click on save button.

Once you done it visit to your blog and see the cool sidebar of your blog :)

Continue Reading

How to Add Twitter Tweet Button Just Below Of Every Blogger Post

Twitter is one of the largest network in the world. If you have a number of traffic on your blog and enough number of followers on your twitter account then must share your blog post with twitter follower to traffic. Today in this article i m going to share that how to add Tweets button below post title in blog. So here we have three types of Twitter tweets buttons. Your will add these buttons with every post title of your blog to get more traffic. "Click on Live Demo" to see Twitter tweets buttons.

• Login to your blogger account.
• Goto Template click on Edit HTML.
• Search <data:post.body/> by pressing Ctrl+F in template.
• Paste the below codes just above <data:post.body/>

1. For Vertical Count

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='vertical' data-related='' data-via='haiderakhunzada' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</b:if>

2. For Horizontal Count

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='haiderakhunzada' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</b:if>

3. For Without Count

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='none' data-related='' data-via='haiderakhunzada' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</b:if>

Continue Reading