Top 3 Numbered Page Navigation Widget

As yesterday you saw a numbered page navigation widget which is very handsomely create and also looks likes a pro widget so similarly  today we have Top 5 Professional numbered page widget for blogger and these all widgets are highly professional and they will give you a very smart look and feel to your blog.

For add one of the given Numbered Widget, first you have to follow previous post Numbered Page Navigation Widget

Read Also- More Numbered Page Navigation Widget

1. Colorful Blogger Numbered Page Navigation Widget Generator 

2. Add a Numbered Page Navigation Widget

3. Top 3 Numbered Page Navigation Widget

Add Numbered Page Navigation Widget

•  Follow previous post Numbered Page Navigation Widget

Style 1 :   Lighting Widget

• Paste below code before ]]></b:skin>

.pagenavi span, .pagenavi a {
    display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}
.pagenavi span:hover,.pagenavi a:hover {
    background: #fefefe;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
    background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}
.pagenavi a.current {
    border: none;
    background: #616161;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
    color: #f0f0f0;
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

Style 2 :   Dark Widget

• Paste below code before ]]></b:skin>

.pagenavi span, .pagenavi a {
    display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #32373b;
    background: #3e4347;
    box-shadow: inset 0px 1px 1px rgba(255,255,255, .1), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #feffff;
    text-shadow: 0px 1px 0px rgba(0,0,0, .5);
}
.pagenavi span:hover,.pagenavi a:hover {
    background: #3d4f5d;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
    background: -moz-linear-gradient(0% 0% 270deg,#547085, #3d4f5d);
}
.pagenavi a.current {
    border: none;
    background: #616161;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
    color: #f0f0f0;
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

Style 3 :   Aqua Silver Widget

• Paste below code before ]]></b:skin>

.pagenavi {
    width:300px;
    margin: 50px auto;
}
.pagenavi span, .pagenavi a {
    background: #f7f7f7;
    background: -webkit-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
    background: -moz-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
    background: -o-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
    background: -ms-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
    background: linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
    padding: 5px 10px;
    text-decoration: none;
    color: #7e7e7e;
    border: 1px solid #c6c6c6;
    -webkit-box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
    box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
    font-weight: bold;
    border-radius:3px;
}
.pagenavi span:hover,.pagenavi a:hover, .pagenavi a.current {
    background: #9ad6fb;
    background: -webkit-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
    background: -moz-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
    background: -o-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
    background: -ms-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
    background: linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
    border: 1px solid #72ade4;
    color: #4879a6;
    -webkit-box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
    -moz-box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
    box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
    -webkit-transition: all 0.25s ease 0s;
    -moz-transition: all 0.25s ease 0s;
    -o-transition: all 0.25s ease 0s;
    transition: all 0.25s ease 0s;
}
.pagenavi { border:none; }

• After adding the CSS part, follow above link's post. and then 
• Save your template.

If Any Problem Comes, Ask in Comments

Read More

Add a Numbered Page Navigation Widget

Numbered Page Navigation Widget is very unique style for blogger be'coz it gives a a very different look and feel to blogger and it also reduce the coding of Home, Newer, Older buttons and we can jump to any page directly from the home page and also come previous from any page. Most important thing is that we can easily customize and designed this widget according to our needs.

  

Read Also- More Numbered Page Navigation Widget

1. Colorful Blogger Numbered Page Navigation Widget Generator 

2. Add a Numbered Page Navigation Widget

3. Top 3 Numbered Page Navigation Widget

Add Page Navigation Widget in Blogger

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and search the code shown below.

]]></b:skin>

• Paste below code just before it.

.pagenavi{
clear:both;margin:10px auto;text-align:center
}
.pagenavi span,.pagenavi a{
padding:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
background:#FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.pagenavi a:hover,.pagenavi .current{
background:#ff8400;color:#fff;text-decoration:none
}
.pagenavi .pages,.pagenavi .current{
font-weight:bold
}
.pagenavi .pages{border:none}

• Now find below code

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

• If above code doesn't found then search for below code

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

• Now paste below code after above codes.

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="https://dl.dropbox.com/u/63968842/navigation%20numbered%20widget%28www.widgetgenerators.blogspot.com%29.js"></script>
<div class="clear" />
</div>
</b:includable>

• Now again find below code

<b:include name='nextprev'/>

• Now replace it with below codes.

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if> 

• Now Finally Save Your Template and you are done

Benefit

      You can easily jump to any page from home page. 

If Any Problem Comes, Ask in Comments

Read More

Add a Orange Live Demo Button like Making Different

Making Different is very good and creative blog as we all know and the author and owner of that blog also is very creative and great blogger, and i think he love orange color :) be'coz he used orange colored theme in his blog but as he add a Live Demo button in this blog that is very good and my one of the reader ask for that. so today i'm presenting that Blogger Hack. Hope you will all like it.

Add Orange Live Demo Button

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and search the code shown below.

]]></b:skin>

• Paste below code before ]]></b:skin>

.wg-demobt a {margin-top:0px;margin-right: 10px;-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;/*-www.widgetgenerators.blogspot.com-*/background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9780e), color-stop(1, #f9ead4) );background:-moz-linear-gradient( center top, #f9780e 5%, #f9ead4 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9780e', endColorstr='#f9ead4');/*-www.widgetgenerators.blogspot.com-*/background-color:#f9780e;-moz-border-radius:6px;
-webkit-border-radius:6px;border-radius:6px;border:1px solid #f9780e;display:inline-block;color:#000000;font-family:arial;font-size:15px;font-weight:bold;padding:6px 24px;text-decoration:none;text-shadow:1px 1px 0px #ffffff;}.wg-demobt a:hover{background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9ead4), color-stop(1, #f9780e) );background:-moz-linear-gradient( center top, #f9ead4 5%, #f9780e 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9ead4', endColorstr='#f9780e');background-color:#f9ead4;}.wg-demobt a:active {position:relative;top:1px;}

• Save your template.

How to add it in post....?

• Go to posting area > HTML
• Now paste code in it.

<div class="wg-demobt">
<a href="#">Live Demo</a>
</div>

Make Changes....!

• Replace # with your link.
• You can replace Live Demo with your own text. (Optional)

If Any Problem Comes, Ask in Comments

Read More

Add a Expand-Collapse Sidebar Widget

Expand Collapse System is very awesome be'coz it give a very Professional feel to blog and as MBT first launched their expand collapse widget in the comment bar, so many blog owners use that system in their blog but as using the jQuery and other languages so that doesn't work work in many blogs but this widget will work in all kind of blog be'coz this you have to add this widget  in the HTML/JavaScript Widget so you don't need to make changes in your template editor. This Widget is simply a made by the CSS for designing and using the JavaScript and some other elements to perform this particular task in this widget.

This idea came in my mind by watching the comment box of blogger which perform same task. 

Add Expand-Collapse Widget

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

 <style>
#sidebar ul {margin-top: -5px;}
#sidebar ul.children {margin: 6px 0 -6px 0;}
#sidebar ul li {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjdeiU6SWJosG7QzVtCbyoRr3zLbzkv7DHstsc4RJsu-QTZGEfvxVRgz-ZrV2Bv38av0E8xJIOhBbeUwFkKfOLJvaMgtV_iJNB5NmhLk8JJmdI24F-H-ZFWS6Hd2Qlp0T6NWtWpgmq60/s1600/ORANGE.GIF") no-repeat scroll 0 5px #FFFFFF;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;}
#sidebar a, #sidebar a:visited {color: #575251;}
#sidebar a:hover {color: #cf4125;text-decoration:bold;}
h2.post-title {margin-bottom: 15px;line-height: 32px;font-size: 28px;font-weight: bold;color: #000000; font-family: Arial; padding-left: 5px;
}
}
</style>

<style>
.post {
    clear: none;
    display: inline;
    float: left;
    height: 550px;
    margin: 0 5px 5px 0;
    overflow: hidden;
    padding: 8px;
    width: 338px;
 border: 1px solid #DCE5EE;
  }
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://bloggerblogwidgets.googlecode.com/files/w2b-bloggerpagenavi.js' type='text/javascript'></script>

<div id='sidebar-wrapper'>
<div class='sidebar section' id='sidebar'>
<div class='widget-content'>
<div class="msg_list">
<p class="msg_head">Widget 1</p>
<div class="msg_body">
<ul>


<li>
<a href="#">Widget 1.1</a>
</li>


<li>
<a href="#">Widget 1.2</a>
</li>

  </ul>

 
  </div>

<p class="msg_head">Widget 2</p>
<div class="msg_body">
 <ul>

 <li>
<a href="#">Widget 2.1</a>
   </li>


 <li>
<a href="#">Widget 2.2</a>
   </li>




</ul>
</div>


 
<p class="msg_head">Widget 3</p>
<div class="msg_body">
 <ul> <li>
<a href="#">Widget 3.1</a>
   </li>
  
   <li>
<a href="#">Widget 3.2</a>
   </li>
   
  
  
   </ul>
 
</div>
  
<p class="msg_head">Widget 4</p>
<div class="msg_body">
 
  <ul>

 
   
  

   <li>
<a href="#">Widget 4.1</a>
    </li>
 
 

 
   <li>
<a href="#">Widget 4.2</a>
    </li>

 
   </ul>
</div>

<p class="msg_head">Widget 5</p>
<div class="msg_body">

<ul>


<li>
<a href="#">Widget 5.1

</a></li>


</ul></div>

<p class="msg_head">Widget 6</p>
<div class="msg_body">
<ul>

<li>
<a href="#">Widget 6.1</a>
</li>




<li>
<a href="#">Widget 6.2</a>
</li>

</ul>

</div>


<p class="msg_head">Widget 7</p>
<div class="msg_body">
<ul>

<li>
<a href="#">Widget 7.1 </a>
</li>
<ul>

</ul></ul></div>


<p class="msg_head">Widget 8</p>
<div class="msg_body">
<ul>

<li>
<a href="#">Widget 8.1</a>
</li>


<ul>

</ul></ul></div>
<style>
p{
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 320px;
display: block;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#C3A17E;
margin:1px;
color:#FFFFFF;
font-family: Sans-serif,Arial,Helvetica;
font-size: 12px;
font-weight: bold;
}
.msg_body {
padding: 15px 10px 15px;
background-color:#F4F4F8;
}
</style>


<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script></div>
</div></div></div>

• Save Your Widget.

Note:Don't Try to Change any Other Code. All Codes are highly Sensitive

Make Changes....!

• Replace Red colored area with widget heading (as you can see in gif image)
• Replace Orange colored area and made their links
• Replace Blue colored area with links

If Any Problem Comes, Ask in Comments

Read More

Automatic Read More Hack in Blogger With Thumbnail

When we start our blog and post 2-3 posts and when we see our blog in home page then by default blogger shows the full posts in the home page by we all want to know show that blogger should show half content in the home page and rest is show in the whole post. So, it’s better to give a summary of your posts on your blog’s homepage and then add a ‘read more’ link below that post summary. In this Blogger Tutorial i have a script that automatically converts your posts into read more summary in your blog homepage.

Demo of Read More hack

Installation of Read More Hack

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and search the code shown below.

</head>

• Paste below code before </head>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var s=a.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}a=s.join("")}b=(b<a.length-1)?b:a.length-2;while(a.charAt(b-1)!=' '&&a.indexOf(' ',b)!=-1)b++;a=a.substring(0,b-1);return a+'...'}function createSummaryAndThumb(a){var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+'<div>'+removeHtmlTag(b.innerHTML,e)+'</div>';b.innerHTML=f}
//]]>
</script>
<script type='text/javascript'>
summary_noimg = 550;
summary_img = 450;
img_thumb_height = 150;
img_thumb_width = 200;
</script>

• Now find below code

<data:post.body/>

• Replace it with  below code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:6px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more</a></span>
</b:if>
</b:if>

• Now Save your template.

 Make Changes....! (Optional)

summary_ noimg= 550; >> Length of the summary if the post does not have a thumbnail.
summary_img = 450; >> Length of the summery if the post have a thumbnail
null_thumb_height = 150; >> Height in pixels of the thumbnail.
null_thumb_width = 200; >> Width in pixels of the thumbnail.

If Any Problem Comes, Ask in Comments

Read More

Add Yahoo Music Player in Blog

Music is very basic thing in today's time because everyone can easily embed the music player in their websites but now you can easily embed a music player and movie player in your blog.

Yahoo! Music Player Pic Demo

Yahoo! Movie Player Pic Demo

Get Player

Yahoo! Music Player

• Add trailers, clips and videos related to movies mentioned on your pages and play them directly on your blog/site.
• Plays mp3, YouTube, and a variety of other video and audio formats like .wap .amv .mp3 etc
• Turns any page into a playlist which is created by you.
• Easy to add to your site or blog with one line of code.
• Give the Live Demo on you own page of real HQ Music.
• Too easy to embed and easy to use.
• Totally FREE! FREE! FREE! FREE! FREE! FREE! FREE! FREE! 

Read More

Add a Roseic Sticky Bar in Blogger (Same Like as Hello Bar)

As we all know that Hello bar is a professional sticky bar which we always use to show that notifications and other important updates to the visitors but when we want to add hello bar in blogger or in website then we have to register first, then we have to follow some steps which is not simple for newbie. When I made a hello bar, I faced many problems to install it, but in this sticky bar you just have to copy and paste the codes. I give it a new name Roseic Sticky Bar

Live Demo

Features

• 99.99% Same as Premium HelloBar.
• Easy to Install.
• Close and Hide Function is also available.
• Drive More Attention To Your Most Important Text/Link With This Roseic Sticky Bar.
• Only CSS, Not A Single JQuery-JavaScript-Image.
• It will float all over the blog/site page/post.
• It's 100% Free.
• Not a single image even arrows are CSS designed.
• Quick, Quick, Quick to Load.
• You can add any type of Date Like Text, Social Button Scripts, Links To Increase Clicks.

Add a Roseic Sticky Bar in Blogger

• Login to Blogger > Dashboard
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

<style>
/*---Codes by www.widgetgenerators.blogspot.com---*/
#wg-rosebar {
width:100%;
height:100px;
position:fixed;
top:0;
left:0;
}

#wg-rosebarbtm {
border-bottom:3px solid #000;
background-color:#F60;
overflow:none;
width:100%;
height:30px;
position:fixed;
top:0;
left:0;
}

#wg-rosebarbtmdata {
color:#fff;
padding:5px;
}

#wg-rosebarbtmhide {
position:absolute;
top:4px;
right:12px;
width:20px;
height:20px;
cursor:pointer;
}

#wg-rosebarbtmshow {
position:absolute;
top:0;
right:5px;
width:30px;
height:25px;
cursor:pointer;
background-color:#F60;
padding-top:5px;
border-bottom:3px solid #000;
border-left:3px solid #000;
border-right:3px solid #000;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}

.wg-rosebarbtmdownarrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #CC5200;
}

.wg-rosebarbtmblock {
width:8px;
height:10px;
background-color:#CC5200;
}

.wg-rosebarbtmuparrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #CC5200;
}
</style>
<div id="wg-rosebar" >
<center id="wg-rosebarbtmshow" onmouseup="document.getElementById('wg-rosebarbtm').style.display='block'"><div class="wg-rosebarbtmblock"></div><div class="wg-rosebarbtmdownarrow"></div></center>
<div id="wg-rosebarbtm" >
<center id="wg-rosebarbtmhide" onmouseup="document.getElementById('wg-rosebarbtm').style.display='none'"><div class="wg-rosebarbtmuparrow"></div><div class="wg-rosebarbtmblock"></div></center>
<center id="wg-rosebarbtmdata"><a href="http://www.widgetgenerators.blogspot.com">Widget Generators</a><b>Write Your Text Here</b></center>
</div>
</div>

• Save Your Widget and You are done.

 Make Changes....!

• Replace Write Your Text Here from your text.

• If you want to add link in it then follow below steps.

• You can add links by copy below code.

<a href="http://www.widgetgenerators.blogspot.com">Widget Generators</a>

• Replace Red color area with link.
• Replace Green color area with link text.

© CopyRight:

The "HelloBar" is he CopyRight of www.hellobar.com And "Roseic Sticky Bar" is the DMCA CopyRight Of www.widgetgenerators.blogspot.com. We did not have and relationship with them and They also has Nothing With Us.

If Any Problem Comes, Ask in Comments

Read More

How to Make Fit Images According to Blog

When we start to post any thing in our blog with images then we have to keep a one thing in mind that will our image completely fit according to our blog ? and when images doesn't fit according to out blog then use start to do change size of your image like small, medium, large, x-large etc. After adding this codes you don't need to adjust your image width just install the codes and see magic.

Make Image Compatible with your blog

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and search the code shown below. 

]]></b:skin>

• Paste below code just above it.

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

• Now Save Your Template and You are done.

Credit- Paul Santosh

If Any Problem Comes, Ask in Comments

Read More

Add Scrolling Adsense Feature When Scroll Down at Page

As last we said about some Adsense Placing Space like RIGHT, LEFT, CENTER in the blogger but this tutorial is very different be'coz you can make scroll your ads when you scroll down the page and it will show at the bottom of the page. This widget is made by using the JavaScript codes and some little CSS codes which will give a certain good look to your adsense and feel it like a pro. but as we feel that codes are highly sensitive so you can only customize the CSS part and Scrolling effect but from myside I made smoothing scrolling as much as I can. Rest is depend on you.

Live Demo

Read Also- Adsense Unit Placing Pack

1. Social Bookmarking Buttons Beside Adsense Ad

2. Add Adsense ADS BELOW POST TITLE in LEFT RIGHT CENTER SIDE

3. Add Adsense in the Middle of the Post

4. Add Scrolling Adsense Feature When Scroll Down at Page

Add Scrolling Ad Units

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it. 

<div id='BeH-Fixed'>
Place Your Adsense Codes Here
    </div>


<script>
window.onload = function() {

  function getScrollTop() {
    if (typeof window.pageYOffset !== 'undefined' ) {
      // Most browsers
      return window.pageYOffset;
    }

    var d = document.documentElement;
    if (d.clientHeight) {
      // IE in standards mode
      return d.scrollTop;
    }

    // IE in quirks mode
    return document.body.scrollTop;
  }

  window.onscroll = function() {
    var box = document.getElementById('BeH-Fixed'),
        scroll = getScrollTop();

    if (scroll <= 2509) {
      box.style.top = "2510px";
    }
    else {
      box.style.top = (scroll + 1) + "px";
    }
  };

}
 </script>
<style>
#BeH-Fixed {

  position: absolute;
  z-index:9999;
}
</style>

• Save Your Widget and You are done.

Make Changes....!

• Replace Place Your Adsense Codes Here it with your Adsense OR Chitika Codes.

If Any Problem Comes, Ask in Comments

Read More

Show HTML and Other Codes With Code Language Name

Show HTML and Other Codes in blogger, Now this is new and updated widget with tutorials of blogger where you can show your codes in blogger with coding language name like jQuery, HTML, CSS, JavaScript etc, this tutorial is very simple and very highly customize with CSS Codes. It's a very Pro widget be'coz it include the orange bar where you can mention the code name with your site name. This widget is highly customize with many kinds of sensitive codes and made by the CSS only no javascript  is used in it, so you can easily install it and it works very awesome.

Live Demo

Installation of Widget

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and search the code shown below.

]]></b:skin>

• Paste  below before ]]></b:skin> 

 

/*------Codes By www.widgetgenerators.blogspot.com------*/
pre{
position:relative;
background:#333;
color:white;
font-family:Monaco, Courier, MonoSpace;line-height:1.8;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;font-size:12px;padding:10px;margin:0 0 25px 0;overflow:auto}pre code{padding:0;color:white;background:#333;white-space:pre
}
pre[rel]{padding-top:40px}pre[rel]:after{content:attr(rel);position:absolute;top:0;background:#F3A01E;padding:4px;left:0;right:0;font-size:36px;line-height:0;color:white;font:bold 20px "myriad-pro-1",Verdana;
/*------Codes By www.widgetgenerators.blogspot.com------*/ 

• Now Save Your Template.

How to Add it in post?

• After adding the CSS part 
• Go to Posting > Edit HTML
• Paste below code where you want to show the HTML CSS and others codes.

<pre class="lang-js" rel="HTML Codes By www.widgetgenerators.blogspot.com"><code><p>Write Your Codes Here
</code></pre>

Make Changes....!

• Replace it HTML Codes By www.widgetgenerators.blogspot.com with coding language and with your site URL.
• Replace Write Your Codes Here it with your codes.
   

If Any Problem Comes, Ask in Comments

Read More

Add Pro Social Sharing Buttons in the Comment Form

Social Sharing Button is very popular in websites and blogger world, every one is making their own site and blog with sharing button and when we use it in our blog, we want to add these buttons to every post OR everywhere we want but here you will get how to add social sharing buttons on comment box in blogger.

 

Live Demo

Add Social Sharing Buttons in Comment Box

• Login to Blogger > Dashboard
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and Search the code shown below.

</head>

• Paste below code just above </head>
• Now find below code

<h4 id='comment-post-message'><data:postCommentMsg/>

•  Paste below code after above codes.

<br/>
<span class='st_plusone_hcount' displayText='Google +1'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_sharethis_hcount' displayText='ShareThis'></span>

• Save Your Template.

If Any Problem Comes, Ask in Comments

Read More

How to Post Images in Comment Box

As we last we give you that how to post youtube videos in the blogger comment box and similarly today you will get to know that HOW TO POST IMAGES IN BLOGGER COMMENT BOX and also with full access on comment box means you can post any kind of html tag like bold, underline and everything which you want to post, Now you get full access on blogger comment box, post anything which you want like a html page.

Read Also- How to Post Youtube Videos in Blogger Comments Box

Live Demo

Installation Part

• Login to Blogger > Dashboard
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and Search the code shown below.

</body>

• Paste below  code just before </body>

<script src='http://hosting.gmodules.com/ig/gadgets/file/105066904960012479556/nccode.js' type='text/javascript'/>

• Save Your Template.

How to Post Images and Other HTML Stuff in Comment Box

• You can't enter the html codes directly in the comment box be'coz it will not recognize it. So you you have to convert it in the CB Codes Converter , CB means Comment Box Code Converter.

Click Here to Get Converter

• Write Your HTML Codes in it and Click Convert Button.
• Copy that Converted code and Paste in the Blogger Comment box.

Some Examples that How to Post HTML Codes

• If you want to post a Image in  the comment box.
• Write a simple html code for Image posting like below

<img src="http://i28.tinypic.com/63yhk9.jpg">

• Now Convert this code in CB Code Generator and it will look like this.

&#12296;img src="http://i28.tinypic.com/63yhk9.jpg"&#12297;

• Now you are done, try this tutorial and have fun with blogger comment box hack.

If Any Problem Comes, Ask in Comments

Read More

Add Adsense in the Middle of the Post

Yesterday we give you a tutorial that how to add adsense codes in the left side, right side, or in center of the post which could increase your adsense CTR and but as from the many times some websites OR some blogs put their adsense in the middle of the posts, that is also increase the CTR of your adsense earning.

Read Also-   Adsense Unit Placing Pack

1. Social Bookmarking Buttons Beside Adsense Ad

2. Add Adsense ADS BELOW POST TITLE in LEFT RIGHT CENTER SIDE

3. Add Adsense in the Middle of the Post

4. Add Scrolling Adsense Feature When Scroll Down at Page

Add Adsense in the Middle of the Post

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and search the code shown below.

<data:post.body/> 

You will find two times <data:post.body/> code and You have to Replace it With the Second One

• Now replace that code with below code.

<div expr:id='&quot;aim1&quot; + data:post.id'/>
<div style='clear:both; margin:10px 0'>

Your Adsense Code Here

</div>
<div expr:id='&quot;aim2&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;aim1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;aim2<data:post.id/>&quot;);var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf(&quot;&quot;);if(r&gt;0){obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1)}
</script>

You Have to first Convert the Adsense Code into the Compartible Form

Convert Your Adsense Code

• Now just replace Your Adsense Code Here with your Own Asense Codes.
• Now Save Your template.

If Any Problem Comes, Ask in Comments

Add Adsense ADS BELOW POST TITLE in LEFT RIGHT CENTER SIDE

Placing the Google Adsense is very important for better CTR and it's very helpful to increase the rate of earning when you put your ads in the right places the then you have more change to earn more money from Google Adsense Program and not only from the Google Adsense but also from the alternatives of Adsense program.

They also give the same result like Google Adsense Program.

Read Also- Adsense Unit Placing Pack

1. Social Bookmarking Buttons Beside Adsense Ad

2. Add Adsense ADS BELOW POST TITLE in LEFT RIGHT CENTER SIDE

3. Add Adsense in the Middle of the Post

4. Add Scrolling Adsense Feature When Scroll Down at Page

Put Adsense Below Post Tile

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and search the code shown below.

<data:post.body/>

• Now Paste the Code Shown Below just above/before it

Show Adsense in Left Side

If you want to show your Google Adsense ad below post tile in blogger in the left side then copy the code shown below

<div style="float: left; margin: 10px 10px 10px 0;">
YOUR ADSENSE CODE HERE
</div>

Show Adsense in Right Side

If you want to show your Google Adsense ad below post tile in blogger in the right side then copy the code shown below

<div style="float: right; margin: 10px 0px 10px 10px;">
YOUR ADSENSE CODE HERE
</div>

Show Adsense in Center

If you want to show your Google Adsense ad below post tile in blogger in the center then copy the below code

<div style="text-align: center; margin: 10px 0 10px 0;">
YOUR ADSENSE CODE HERE
</div>

You Have to first Convert the Adsense Code into the Compartible Form

Convert Your Adsense Code

Make Changes....!

• Replace YOUR ADSENSE CODE HERE with your converted code.

If Any Problem Comes, Ask in Comments