Add Advertisement banner to your blog with css style

You can add more advertisement to your blog by used this Widget . To add a wonderful form of ads with css

Follow this to apply the lesson step by step

Add Breadcrumb Navigation For Blogger

In this tutorial you can know how to Add Breadcrumb Navigation For Blogger .This Widgets help your visitors to learn its location in your blog ,

The links are a trail from the page you are currently on back to the home page.So for example on a blog you will have the home page link, a link to a label used for the post then the post title.This will be displayed like this
Home > Label > Post TitleThis is a very popular type of navigation on all sorts of sites and in this post i will show you how to add it to blogger.

New Stylish Facebook Like Box For Blogger

Facebook Page Is Also Good Way To Promote Blog And Increase Readers. This Facebook Box Will Help Your Visitor To Become Regular Reader Just By Clicking Like Button. Most Of Readers Like To Fetch Updates From Facebook Page

Many blog add simple Facebook like box but with the help of this you can make your blog something different and get more Facebook followers.

Button Or Show-Hide Effect in Blogger

This code will add a button, clicking it will expand the content, showing the hidden part. See it in action, click the button now,

very simple show/hide effect code for you to copy and use. This effect is also known as a spoiler or a peek-a-boo. It uses a small inline Javascript. You can use this code anywhere, be it in the sidebar or in your blog post, as long as you can add the spoiler code to it.

How to add audio clip in blog very easy

If you would like to share visitor you to listen to your favorite music. Also must be Widgets her superb form .Here are these Widgets added easy and wonderful shape

How To ?
Demo for this Widgets

• Get the URL of your music or Upload your music into web space and Get the URL.
• Now Copy down the code and replace the red highlighted text with your music URL.

<object type="application/x-shockwave-flash" data="https://bloggertofree.googlecode.com/svn/trunk/dewplayer-multi.swf" width="240" height="20" id="dewplayer" name="dewplayer"> <param name="wmode" value="transparent" /><param name="movie" value="https://bloggertofree.googlecode.com/svn/trunk/dewplayer-multi.swf" /> <param name="flashvars" value="mp3=https://bloggertofree.googlecode.com/svn/trunk/Muslim.mp3" /> </object>

 Replace URL of music "https://bloggertofree.googlecode.com/svn/trunk/Muslim.mp3" to URL of your music .  
Note : Must be the audio file format  (.Mp3)
You can now add the music in the tool or in page or within an posts .. done!

Add Random Posts with Thumbnails for blogger

this widget might help you.The Random Posts Widget will show random posts you have added to your blog. this widget is that it is loading pretty fast and shows thumbnails of your posts too, along with the comments link.

Random Posts widget is an awesome widget for your Blogger Blog.Most important feature of this widget is it lets your Blog visitors to surf more blog posts in your blog.Surely it increases your Blog's internal links that lets your blog higher traffic.

Table Of New Content or Sitemap Generator For Blogger

Table of contents widget. This widget automatically generates a sitemap of your blog. With such sitemap, it is easier for your visitors to look at complete structure of your blog. This widget displays your blog posts according to their categories and "New!!" text is shown for the latest posts.


This map is very important because it works as a guide for visitors.

Add stats and Counter comments and post To your blog

Blog statistics Widget for blogger which show’s total posts and total comments are made in your blog.The blog statistics widget displays the total number of posts and the total number of comments as text in your sidebar

This widget works based on JavaScript. You must enable JavaScript for Working of This widget

Animated social networking for blogger and blogs

Bloggers today depend largely on networks like Facebook, Google plus and twitter to drive traffic to their blogs. These tools are good only if they can attract a visitor to bookmark and share your content. From your website quality content till your blog design, every single bit counts in turning a visitor into a follower.

To help you with your dream of increasing fans and readers we bring you "Touch Me". Its named such due to its appealing look that forces a visitor to roll hover the cursor over the icons and hit follow!

How to add a widget inside a scroll box blogger

It is not necessarily a good thing to have a homepage that scrolls for miles. Not only can this slow down loading time, it can make you blog look unprofessional as well. Fortunately,

there is an easy solution to this problem: adding a scroll effect to the sidebar widgets/gadgets. This allows the widget/gadgets to scroll instead of your whole page.

Add Floating Sharing Buttons To Blogger

Add Floating LikeUs Sharing Buttons To Blogger Blog. Using This Sharing Buttons Your Reader Will Not Disturb While Reading Your Articles.

Sharing Buttons Will Show User's Mouse Cursor Over Like Us. Follow These Steps To Add These Buttons To Your Blog.

Create A Three Column Footer In Blogger

This Footer widget contains three columns where each column can accommodate as many widgets as you can add!
In order to add such a widget to the bottom section of your blogs and also customize the look and feel of it then lets start learning today’s tutorial.

New Random Posts Widget For Blogger

Random Posts widget is an awesome widget for your Blogger Blog.Most important feature of this widget is it lets your Blog visitors to surf more blog posts in your blog.Surely it increases your Blog's internal links that lets your blog higher traffic.

Although "Related Posts Widget" and "Popular Posts Widget" are important for all types of blogs, but in blogs where almost all the posts are similar (like blogs with articles on recipes, money-making, computer tricks or automobiles etc.), visitors usually do not mind reading some quite-unrelated posts too. So along with Related Posts widget, a "Random Posts widget" on your blog will help you to increase the number of page impressions.

Style label,Tags in Blogger Using CSS

wonderful Style Tags is a Widget which shows your labels of your blog in Bricks Style.

 This tutorial will show you How To Add Brick/box Style label/Tags Cloud in Blogger Using CSS

Add Popular Post Slideshow Gallery In Blogger

You might have seen so many sliders or crousels that works on the recent posts or you have to add images in it manually. In this tutorial i will give you the slider/image gallery that works on the popular posts.

 This widget shows your 10 popular posts images in form of slider.

How To Install

1. Next, click on the 'template' tab
2. Backup your Template before making any changes to your blog
3. Now Expand Widget Templates
4.  click on the "Edit HTML".
5. Now find this code

 </head>

<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/AVvXsEigE6chBEZPc6cS_ntM-DSP6RSGxIXYC6RrFWzGb1t3z5XyXhvoRUsIlX7gugVq5Cn0QUScGmfYjIrxI1fnQQhe9rtKYMq1dutZhQR6EbfxGVo_NoYkOHGUbuoJNizTTtGN-kNkjIbBr4k/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/AVvXsEhGmVVdtbmoQp7iVCSRa76fOwMQtOmRVr-iFpzlmlhh-rcUGFjygWlXWblc1zpNP6PEOjNnVkObE6Y2B0w2mbSemnunRbg2bL1WWe-biIfpWwYW-iMzyoKOk0elHkBiZSt0X9WfPy5-KAY/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxZUqXg4_w4psmz20g7mnasLW8J9e8qZe-Qy_-iN6FNHvgOLTL42jwEsTkaFZkek2A-qXDTpQ-dwDPqSiYVcpPHG1PnhRhiLSRxHokr_sFNB8U4WQ0UrmbHz-WUbGlVFq99fQ5uWtWbNw/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script> 

Now Find the code shown below using [ctrl+F]

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

• Now Paste the Code Shown Below just below/after 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 == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <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/AVvXsEgt4s-i2gWfjl6lZSM54tT3Q1E81cUeOzYXMS_w8fjE72v8ApNnAsvCXQcWbZ92xhyphenhyphenF2khIy2_3ZK-wtuEulzGm17Ynpji6Q_NIho80bZ0lgun5OuwMOKtJJv4OhqX31mvtU38nnASTrjw/s1600/defaultimage.jpg'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

• Now save your template

Enjoy

Add Colored Popular Post Widget In blogger

You will see how to add the Multi-Colored Popular Posts widget in the Blogger. Remember to follow the procedure step by step carefully so that you will not face any problem and backup Your template before proceeding.

How to add multicoloured popular post widget to your blog

New Stylish email subscription box blogger

This tutorial, will show you how to add A Stylish Email Subscription Box in blogger wordpress and websites.it help user to stay connected with blog

This widget contains links of RSS and an attractive subscription form that will increase the number of your Email subscribers.

Add Floating Back To Top Image In Blogge

If you have some longs posts, or comment a lot on your blog ,
So to add a short-cut for them, would be a good idea in this case. For this you can easily add a "Go to Top" arrow button

When you add the scroll to top widget you will get a button on the right corner and when a user clicks on it he can get back to the top of the blog.

Best related posts widget for blogger

Related Posts Widget for Blogger,add Widget wonderful for displaying links to related posts beneath each of your blog posts.

To implement the related posts widget you will have to follow 2 simple replacement steps.

New And Easy Numbered Page Navigation for Blogger

Page Navigation for Blogger,add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor. Now here is a completely new script and work for numbered page navigation for Blogger.This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting(1, 2, 3, 4 ….) like those of a book.











Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Template> Edit Html
2. Don't click the checkbox which says “Expand Widget Templates” Find this
3. Find this

]]></b:skin>

 and replace it with

/*------- pages-numbers-www.bloggertofree.blogspot.com/-----------*/
.showpageArea{font-family:verdana,arial,helvetica; color:#000; font-size:18px; margin:10px}
.showpageArea a{color:#000; padding-top:40px; text-shadow:0 1px 2px #fff; font-weight:400}
.showpageNum a{padding:0px 8px 0px; margin:1px 4px; text-decoration:none; border:2px solid #0090D5; -webkit-border-radius:3px}
.showpageNum a:hover{background-color:#000; color:#fff; padding:0px 8px 0px; border:1px solid #6F6F6F}
.showpageOf{margin:0 8px 0 0}
.showpagePoint{color:#fff; text-shadow:0 1px 2px #333; padding:0px 8px 0px; margin:2px; font-weight:400; -webkit-border-radius:3px; border:1px solid #2A2A2A; background-color:#ff0000; text-decoration:none}
/*------- pages-numbers -----------*/

Step 2 : Aplly Javascript
Find This :

</body>

Replace with :

 <script style='text/javascript'>
var pageCount=3;
var displayPageNum=5;
var upPageWord=&quot;<img onmouseout='this.style.opacity=0.80;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ue4ENsFqPvQgr1cGqOflHQWolvmKslGNucqBaUIZ11GsRh0Jke6BQ6j_4N9uZrhrdLLmqpHgOSOU2vN_mHMSQAxdxjex4L7Ozxa9BTn3redHNjSGR-4G4M-k8Xuk8Ae9XImRlLGEYmE/s1600/leftarrow.png' style='opacity:0.80;filter:alpha(opacity=80)'/>&quot;;
var downPageWord=&quot;<img onmouseout='this.style.opacity=0.80;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQcvfv3YCcDHfgybStuoTCpgUaY_rKhaC3L6husTpXMjOe7jxFJiXufYe9MGOXuPxojFmqY1vMx2A_Coac1q6IIy-OOwWO93M3Jz5js4JL1JPTK8n7mM9f2HXAgk55Wk6Vx39L_4ZRuiY/s1600/rightarrow.png' style='opacity:0.80;filter:alpha(opacity=80)'/>&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_url=location.href;function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script></body>

Change based on your blog setting :
var postperpage=5;
var numshowpage=3;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

I hope to gain your admiration , develop by me