Get 100% Free Tools: August 2013

Saturday, 31 August 2013

Free Add Facebook Recent Activity Feed Plugin To Blogger/Blogspot

Facebook Activity Feed Plugin ~ Screenshot

This plugin displays posts and also recommends new stories which are liked by your visitor�s friends. Thus it builds social engagement and attracts readers to dig into your website more to find out what their friends liked. If you are using Facebook recommendations bar in your sites then you will be pleased to know that this plugin also displays recommendations along with recent likes based on social activity made on your pages. Indeed a must to-add-widget from us to all of you who have not yet utilized this widget!

Lets add it to your blogger blogs in just few simple steps.

How to Install This Widget to Blogger?

Step 1:
Ignore this step If you have a Facebook comments plugin or Recommendations bar installed on your blog.

Go To Blogger > Template
Backup your template
click Edit HTML
Search for the following tag inside your template:

<body>

Just below this body tag paste the following JavaScript SDK code:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Save your template.

Step 2:
Make these changes in Generator below:

Replace http://www.makingdifferent.com with your website URL. For BlogSpot blogs it should have the following structure: http://your-blog-domain.blogspot.com
I have set width to 300 pixels (300)and height to 450 pixels (450). Adjust them according to your blog layouts only if alignment changes are required. Increase height if you want to display more stories inside the plugin.
In order to hide the blue border across the plugin, I have set the border to white. If your sidebar has a different colored background then adjust the background color by editing: #ffffff
Friends likes appear above and recommended posts appear below that as bolded titles. If in case you don�t want the plugin to display recommended stories then you can turn off recommendations by replacing Yes with No

Click on Generate button
And finally click on Add to Blogger button to add this widget to your blog

Facebook Activity Feed Plugin Generator by Latest Blogger Tools Template

Facebook Recent Activity Feed Plugin Generator by Latest Blogger Tools Template

Settings

Free Stylish Numbered Page Navigation Bar For Blogger/Blogspot

In this tutorial I�m gonna show you, How to add a perfect Numbered Page Navigation In Blogger. This is the numbered page navigation I�m using in this blog(check the homepage). This is very simple to add, The JavaScript code used in this numbered page navigation is by Abu Farhan and the CSS code is by me.

The CSS

Add the below CSS code just above </b:skin>

#blog-pager{height: 28px;
padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {
text-decoration:underline;
font-size: 16px;
text-align: center;
}
.showpageNum a {
background-color:#f8f8f8;
display:inline-block;
color:#676767;
font-size:11px;
text-decoration:none;
font-weight:bold;
margin:0 0 0 4px;
padding:7px 12px;
text-transform:uppercase
}
.showpageNum a:hover {
color:#fff;
background-color:#444
}
.showpagePoint {
font-size:16px;text-decoration:none;
background: #FF4903;
margin:0 5px;padding:5px;color:#ffffff;
}
.showpageOf {
margin:7px 30px 0 0;padding:0;background-color:transparent
}
.showpage a {
background-color:#f8f8f8;
display:inline-block;
color:#676767;
font-size:11px;
text-decoration:none;
font-weight:bold;
margin:0 0 0 4px;
padding:7px 12px;
text-transform:uppercase
}
.showpage a:hover {
color:#fff;
background-color:#444
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
}

The JavaScript

Search for this line:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

After the above line paste the below code

<script style='text/javascript'> var postperpage=10; var numshowpage=6; var upPageWord="Prev"; var downPageWord="Next"; var home_page="/"; var urlactivepage=location.href; </script> <script src='http://makingdifferent.github.com/blogger-widgets/MD-Designs-Page-Navigation.js' style='text/javascript'/>

Change based on your blog setting :

var pageCount=10;

In this code Number 10 control the number for posts per page, you can 
change it to choose how many posts per page you want to display.

Note : This Number value should be the same With in your blogger account settings
The settings can be found by going to Dashboard >> Setting >> Posts And Comments >> Show at most >> 10 posts

var displayPageNum=6;

Number 6 here control the number of pages that will be shown in the navigation bar.

var upPageWord ='Prev';
var downPageWord ='Next';

if you want to change the language or just change it to any thing, please change Prev for example to Older

Save Template !

I hope it can work and make your blog easy to navigate

Saturday, 3 August 2013

Add Floating Social Share Buttons With Funny Emoticon For Blogger/Blog

There is a great impact of social networks in our life. So I am giving the code of this widget so that you all bloggers can add this widget to your blog. This widget contains Facebook, Twitter and Google+ sharer buttons with counters that will make your blog more social and also added funny emoticons hover effect you can see in the above animated gif as a demo.

This widget contains counters of important social networking sites that has the potential to bring you traffic by circulating your content to a wider audience.

How to add this widget to blogger?

Go to Blogger�>Layout�>Add a gadget
Choose HTML/Javascript from the list
Copy the code below and paste it inside the content box.

<style>#MDfloatshare{background:#f5f5f5;float:left;padding: 4px; position: fixed; top: 240px; z-index: 1; width:64px;} #MDfloatemo{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT-k4dNZ0QypCPkeLWqaglkl7EQoAPLpWIumQFRYmODTt-FUrdliSFPSlfZGlYqedakZf5F6eFPEJF-DDmPUeNVQl7sVrWsHkbw6AxjTQKqVeYSSTv0iqjyc-XDNJ8ua2KOLzYnmluAwz-/s1600/%5Bwww.makingdifferent.com%5Demo.png);background-position:67px 0;float: left; margin: 0 0 0 -100px; padding: 4px;height:65px;position: fixed; top: 160px; z-index: 1; width:60px;} #MDfloatemo:hover{background-position:2px 0;} </style> <div id="MDfloatemo"><div id="MDfloatshare"> <div style="margin:0 0 5px 2px;"> <a href="https://twitter.com/share" data-count="vertical">Tweet</a> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div> <div style="margin:0 5px 5px;"> <script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script> <g:plusone size="tall"></g:plusone></div> <div style="margin:0 8px 5px;"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like send="false" layout="box_count" width="55" show_faces="false" font=""> </fb:like> </div><div style="margin:0 2px 5px;"><div data-action="share" data-annotation="vertical-bubble" data-height="60"> </div></div></div></div>

Now Save the gadget.

That�s it.

Friday, 2 August 2013

Free jQuery Popular Posts Slideshow Widget For Blogger/Blog

Popular posts widget is a best widget to show off your blog�s popular posts of week,month or all time as you choose. You might have seen so many sliders or carousels that works on the recent posts or you have to add images in it manually. In this tutorial i will share with you the slider/image gallery that works on the popular posts. This widget shows your 10 popular posts images in the slider. To apply this trick you just have to add little snippets of CSS and jQuery code and you are done. Let�s watch yourself in image below.

How to install this widget to blogger?

as usual go to blogger�>Template�>Edit HTML
Tick on Expand widget templates check box.
Search for </head> in your blogs HTML
Copy and paste below code just above it.

<style type="text/css"> #gallery{position:relative;margin:0 35px 20px;width:500px;height:126px;background:#ffffff} #gallery .belt{position:absolute;top:0;left:0;list-style-type:none} #gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH8p0FVgD8oLz98cyPdxCNI8Jkggq8kEPX79BiWdL04MFl10DVCAwm_WEHFT0IiKs1mWRdnlsZp5ERomb6kqx4AAzPNacPSLXqTBLBbqKZqlAttAqf1y0fJBzCHpYCCYiksZ-dFqIwSX8/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden} #gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px} #gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5} </style> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script src='https://sites.google.com/site/gehadhussien/popular-posts.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ stepcarousel.setup({ galleryid: "gallery", beltclass: "belt", panelclass: "panel", autostep: {enable:true, moveby:1, pause:3000}, panelbehavior: {speed:500, wraparound:true, persist:true}, defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAl0HZ9eiFWSAH4WPEenugAdufkgTKzn3GqBOPPCh_WJyepj4lWkh-3qa1FaA6cNHN4d3GiSdBlV2SFfAIJN8G-t03Dpcovq_d6h-EI1hdAEPv6TLa1NFkRsdD7Yl4_JrlISUtD-PllRI/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBCaTxusE2xTIGMtfvVLvLz3JERKPvbPI-I3Z2Zw1W_z0dHLyvON3b4hidn2OirwCWNhMs-rnxSHQWK9PlCilbiq4jZu4ul8fvAwCpXSniKsIMSMp4EPmCYG5xGmGHTqOlDHYAzWixLn4/s1600/next.png", 2, 36]}, contenttype: ["external"] }) //]]> </script>

Note:- Javascript file and images are not hosted by me so please download and upload it in your server or download and take it safe in your pc as a backup.

Next search for code below,

<b:section class='main' id='main' showaddelement='no'>

Copy and paste below code just after/below it.

<b:widget id='PopularPosts7' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'> <div id='gallery'> <ul class='belt'> <b:loop values='data:posts' var='post'> <li class='panel'> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> <b:else/> <div class='item-title'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> </div> <div class='item-snippet'> <data:post.snippet/> </div> </b:if> <b:else/> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'> <b:if cond='data:post.thumbnail'> <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/> <b:else/> <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQLcsmxCWqD-VifFgie9_jWbc6PosK50Eg7huzkrXbYHiCf0tiN8mZeRijWPMaETYJQQmxtNViRt_YxQP3TGBAStp9fQp3iGro72uy1C5boF49yHtqx1tYwEly3xvycZtPtTQgtDFyg8A/s1600/defaultimage.jpg'/> </b:if> </a> </b:if> </li> </b:loop> </ul> </div></div></b:if> </b:includable> </b:widget>

if your blog have already jquery plugin then remove above red colored line and click on preview button, Once you are satisfied with how your widget looks and behaves in the preview window you just need to save your template. and you have done !

If you have any queries or questions then feel free to post them below.I hope you will like this little Customization also while sharing this Article with your readers don�t forgot to attach a link to this article.

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

Once you activate any widget, in your blog, it will be displayed in all the pages by default, including your homepage.But what if you want a certain widget to appear only on a certain page or pages, can it be done? Yes You can do this easily using conditional tags.

first go to Blogger�s Dashboard > Design > Page Elements tab and add a �HTML/JavaScript� gadget.

I prefer it because it will be easy for everyone to understand. Give it a unique title so that it does not match with any of the titles of other widgets added.

Go to Dashboard > Design > Edit HTML.
Check the Expand Widget Templates check box on top right of the HTML window.
Find your widget in the HTML by using Ctrl+F and entering the widget Id in the search box.
Let�s say I have given the title for my widget as �Recent Comments�. After searching you will find the below snippets:

<b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

It�s the widget/gadget that you have added from Page Elements tab. All is left is to add conditional tags just below and above to hide the widget form specific pages or posts in Blogger. Let us see some examples:

To show the widget only in HomePage

<b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

To Show Blogger Widget in Post Pages only

<b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

To show the widget in any particular page

<b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == "URL of the page"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

To hide a widget only in a particular page

<b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url != "URL of the page"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

To show widgets only in Archive Pages

<b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "archive"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

To show widgets only in Static Pages

<b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "static_page"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

To hide widgets in Static Pages

<b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType != "static_page"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

 The code will check whether the condition is true or false:

If the result is true, it executes (and display) the widget�s content.
If the result is false, it skips the content and hide the widget.

Click Save Template button and view your blog.
That�s all

Free Flash Twitter Follow Me Buttons to Blogger Blogs

Twitter is a social networking sites popular in the world of bloggers to promote their blogs. So here I am very cool Twitter Blogger widget, now it shows me how to add flash buttons to your twitter blogs and websites. These are the widgets based on Flash animations and have some nice effects.These buttons can help Twitter Flash Spice up your blogs, Webssites and can help you gain more followers on Twitter. These are designed and developed by twitterflash.net. I�m taking all the 15 types of one-click install to your blog.

How to Add Flash Twitter Button to Blogger?

Choose Any Flash Follow Me Button As You Want
Replace nitinmaheta With Your Twitter User Name
Customize Width And Height as You Need
Click on �Generate� Button and Finally Click on �Add to Blogger� Button to add this widget to your blog.

Flash Twitter Follow me Latest Blogger Tools Template

Select a Type of Widget

Settings

Twitter User Name	:
Width	: Px
Height	: Px

Free Animated Flash Clock Widget To Your Blogger/Blog

Two most common widgets bloggers and webmasters put on their websites/blogs are a Clock and a Calendar.A clock gives a beautiful look to a website. A clock is a must for a personal blog. so i have created a generator for this widget because you can easy to add this widget to your blog.

How To Add Aniamted Flash Clock Widget To Blogger?

Choose a type of clock below
Provide Require widget title
Fill Height and Width of the Widget
Click on �Genetate� button
Finally click on �Add to Blogger� to add it to your blog.

Animated Flash Clock Widget Generator

Animated Flash Clock Widget Generator by Latest Blogger Tools Template

Settings

Widget title	:
Width	: Px
Height	: Px

Free online jQuery Popup Generator For Blogger/Blog

Free popup generator supports all browsers: Internet Explorer, Firefox, Netscape, Mozilla, Google Chrome, Safari, Opera,This generator does NOT place any HIDDEN links like many other generators do. Hidden links WILL cause your site to be penalized by search engines or completely withdrawn from search result pages for a long period of time,use the interface to customize your popup. Then click the �Preview� button to test your popup in a new window,once you are satisfied with how your popup looks and behaves in the test window you just need to copy and paste the popup code in HTML/Javascript gadget in your blogs element section. It is as simple as that!, As always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore thisIf not add the below snippet code before </head> tag]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

jQuery Popup Generator by Latest Blogger Tools Template

Settings

Popup Title:
Title Background Color:	#
Title Font Color:	#
Title Font Size:	pt
Enter Popup Content in this box (Use HTML Content):	<TABLE width='300px' height='200px' border='0' cellspacing='0' cellpadding='5' style='color: #5070E0; font-family: Verdana, sans-serif; font-size: 8pt; text-align: center'><TR><TD style='color: #FF0000; font-size: 7pt; text-align: left'><B>The All Letest Software Antivirus Movie Games Full Version Free Download <A href='http://fahimfaruk.blogspot.com/'>Click Here !</A></B>. <TR> <TD> Awesome 20+ Social Sharing Widgets For Blogger</B> <B style='color: #FF0000'>by Latest Blogger Tools Template</B> Please Check- <A href='http://latestbloggertools.blogspot.com/search/label/Blogger%20Widgets' title='Awesome 20+ Social Sharing Widgets For Blogger by Latest Blogger Tools Template'> Click me! </A><TR> <TD> <a href="http://www.makingdifferent.com" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPVPiQ4Cb34a6POTp0eN0_eFomcbPWaIdLdMAez0EbkYYYCkmwjAx5a7v98PONHZqu8kS3Sz0Jp6vlBsySLamrFp12e3jlp3nLtvx2K6GYoFTQpwt8T5_lXQYy5JWNYhu-FycVt7SjvNs/s1600/NewPicture009.bmp" alt="Making Different - Tips Tricks And Tutorials" style="border:0"> </a></TABLE>
Border Color:	#
Content Background Color:	#
Auto Close after:	Second*

Thursday, 1 August 2013

Free 4 in 1 Social Sharing Slide Out Widget For Bloggger

In this tutorial i have created a 4 in 1 Social Sharing Slide Widget for blogger which include facebook like box , twitter status, google + and subscription form When some one put the mouse over it , it pop up with a cute sliding effect , the Jquery effect

How To Install This Widget To Blogger?

Step :- 1

ignore This Step If you have already Ajax 1.4.2 jQuery plugin in your template

Go to Blogger>>Design>>Edit HTML
CTRL + F To Find </head>
Copy n Paste Below Code Just Above </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Step : -2

Fill the Required Data Below Generator
Click On �Generate� Button
Click On �Preview� button, if you want to show you customized settings..
Finally Click On �Add To Blogger� Button

4 in 1 Social Sharing Slide Pop out Widget V1 Generator by Latest Blogger Tools Template

Settings

Get 100% Free Tools

Saturday, 31 August 2013

Free Add Facebook Recent Activity Feed Plugin To Blogger/Blogspot

Facebook Recent Activity Feed Plugin Generator by Latest Blogger Tools Template

Free Stylish Numbered Page Navigation Bar For Blogger/Blogspot

Saturday, 3 August 2013

Add Floating Social Share Buttons With Funny Emoticon For Blogger/Blog

Friday, 2 August 2013

Free jQuery Popular Posts Slideshow Widget For Blogger/Blog

`<b:section class='main' id='main' showaddelement='no'>`

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

Free Flash Twitter Follow Me Buttons to Blogger Blogs

Flash Twitter Follow me Latest Blogger Tools Template

Free Animated Flash Clock Widget To Your Blogger/Blog

Animated Flash Clock Widget Generator by Latest Blogger Tools Template

Free online jQuery Popup Generator For Blogger/Blog

`<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>`

jQuery Popup Generator by Latest Blogger Tools Template

Thursday, 1 August 2013

Free 4 in 1 Social Sharing Slide Out Widget For Bloggger

`<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>`

4 in 1 Social Sharing Slide Pop out Widget V1 Generator by Latest Blogger Tools Template

Blog URL:
Background Color	#
Border Color	#
Width	px
Height	px
Show Header?
Show Recommendationse?

Facebook Page URL:
Twitter Username:
Feedburner ID: