Add Top 4 Stylish Recent Comment Widgets with Hover Effect

Recent Comment Widget is very nice plugin of blogger and it's shows the activeness of blog and also activeness of visitors and commonly this widget shows the regularizes and activeness of blogger visitors. This widget is purely made by JavaScript and CSS and this is very easy to install and easy to use and you don't need to enter your blog link and also no need to install ay codes manually. You have to just select your fav style and simply click on Add to Blogger Button and your Widget will add automatically.

Add Top 4 Stylish Recent Comment Widgets

• Login to Blogger 
• Choose your style
• Now Click on Add to Blogger Button
• Your Widget will Add Automatically

Style 1:

Eclipse Rounded Corner Mouse Hover Style with Red Color

Style 2:

Just Click Round Style with Pink Color

Style 3:

Mouse Hover Rectangular Shadow Effect

Style 4:

Simple and Decent Hover Effect with Blue Border

If Any Problem Comes, Ask in Comments

Add a 3D Professional Numbered Page Navigation Widget

Numbered Page Navigation Widget is slowly slowly entering in the blogger world even it automatically entered in the blogging world and their respond also a very awesome thing be'coz this widget gives a professional look to every blog and that seems looks like a professional blog, and when widget is made in the HD form and 3D form it's look and feel always looks like awesome. This widget is simply made by CSS no javascript and no other jQuery or something in it. So, it will work very smooth and cool.

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 

4. Add a 3D Professional Numbered Page Navigation Widget

Add Numbered Page Navigation Widget

•  Follow previous post Numbered Page Navigation Widget
• Paste below code before ]]></b:skin>

.pagenavi{ position: relative; display: block; width: 400px; height: 40px; overflow: visible; margin: 50px auto; border: 10px solid rgba(255,255,255,0.5); /*border-radius*/ -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; /*box-shadow*/ -webkit-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff; -moz-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff; box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff; } .pagenavi span,.pagenavi a{ font: bold 20px/30px Tahoma, Arial; cursor: pointer; text-decoration: none; color: #464646; display: block; float: left; margin-left: 2px; /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0; padding: 2px 10px; min-width: 10px; text-align: center; position: relative; text-shadow: #fff 0 1px 0; background: #cdcdcd; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.8)), to(rgba(200,200,200,0.9))); /*linear-gradient*/ background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.8)),to(rgba(200,200,200,0.9))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); background: linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); } .pagenavi a:after { content: ''; position: absolute; bottom: -3px; height: 100%; display: block; width: 100%; left: 0; /*box-shadow*/ -webkit-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0; box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0; } .pagenavi a:first-child::after { /*border-radius*/ -webkit-border-radius: 500px 0 0 500px; -moz-border-radius: 500px 0 0 500px; border-radius: 500px 0 0 500px; } .pagenavi a:last-child::after { /*border-radius*/ -webkit-border-radius: 0 50px 50px 0; -moz-border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0; } .pagenavi a.current:after { height: 1px; bottom: -1px; } .pagenavi a:before { content: ''; position: absolute; top: 1px; height: 100%; /*box-shadow*/ -webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0; box-shadow: rgba(0,0,0,0.4) 0 3px 0; width: 1px; display: block; background: rgba(0,0,0,0.4); right: -1px; } .pagenavi a:last-child::before { display: none !important } .pagenavi a:first-child { /*border-radius*/ -webkit-border-radius: 50px 0 0 50px; -moz-border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px; font-family: 'WebSymbolsRegular'; } .pagenavi a:last-child { /*border-radius*/ -webkit-border-radius: 0 50px 50px 0; -moz-border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0; font-family: 'WebSymbolsRegular'; } .pagenavi a:hover { /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0; } .pagenavi a:active { /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0; top: 1px; text-shadow: #fff 0 0 15px; } .pagenavi a:active:after { bottom: -2px } .pagenavi a:active:before { /*box-shadow*/ -webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0; box-shadow: rgba(0,0,0,0.4) 0 3px 0; top: 0px; } .pagenavi a.current { /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0; top: 2px; text-shadow: #fff 0 0 15px; } .pagenavi a.current:before { /*box-shadow*/ -webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0; box-shadow: rgba(0,0,0,0.4) 0 3px 0; top: -1px; } .pagenavi a.current:active:after { bottom: -1px }

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

If Any Problem Comes, Ask in Comments

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

4. Add a 3D Professional 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

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

4. Add a 3D Professional 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

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

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/AVvXsEg-Kdl8yVGFyQrVe8tTDmZEZsgdzqioA9TQUlg-PEZrTI9TdIOnDpM3E2XBo6uOsqngCaHL4yKkZzpdyqqmQi953-tomQqiuX80H4IoCL8Un3RwXdP47VFtn7JlfdOBAvNHQbsFt37BEdE/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

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

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! 

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

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

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

Disclaimer:- This Widget Could be against Adsense Policy. So, Add it on your own risk

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