0 Facebook Auto Slide out Dark Widget For Bloggers Blog

Facebook auto slide out widget is a new concept that is very effective to get more fans for your blog. This widget is very attractive with dark color with auto slide out and in effects. So it's just not like a Facebook popup widget it will appear in bottom of your blogger templates when a visitors will scroll to bottom then it will appear. Again when a visitor scroll to top  then it will disappear. I have also added a close button if visitors wish to close it during their visit. I believe it will help you to increase your Facebook fan rapidly. So before proceed to the tutorial you can see the Demo from below but you have to scroll down to the demo page to see the DEMO.

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Widget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget.

<script src="http://bloggerspicebd.googlecode.com/files/bloggerspice.fb.popup.slide.js" type="text/javascript"><a href="http://www.bloggerspice.com" title="Blogger Spice">Blogger Spice</a></script><div id="bloggerspiceslidebox" style="position: fixed; width: 300px; overflow: hidden; bottom: 5px; left: 5px; background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb9Zv3RlPrLTHEfcHM54WKfr5im10G6KUEFV4dnK_leCS6Z_E4oZEG0n2HFQhjWbM3YsN8X33yDaGgWw6V3oKmQ1hvmcQLQHNxAc8stKUPZjaUHaw4kHlkFBGokFQNfcaGJw1TCEiyoywi/s320/BS+pattern.png);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border: 1px solid #222; display: block;"><div style="width: 300px; padding: 2px; margin: 0pt auto; overflow: hidden;"><div style="color: orange; font-family: &quot;Trebuchet MS&quot;,sans-serif; text-align: left;"></div><div style=" float:left;margin-right:10px;" > <a href="http://www.bloggerspice.com" target='_blank'><img width='19' alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwl8Z0txKu3lS6TaBnOjjcDmbjPXS4cjFAzL1oY9BA7aFP-4rj3AlJt_O9LW1c9IVG0k9l9Ddg9s6-D7OlSZddwyrbQeqm7U89TZU87Y35bF22kR9GWPiGDevA6UOWjyIMYuWmLn3VNZpU/s1600/Link+BS.png'/></a></div><b><span style="font-size: 12px; color:#666; padding: 0pt 2px;">Please Join Us And Be A Part</span></b><a id="bloggerspicecloseslidebox" style="float: right; color: #000; padding: 0pt 2px; border: 0px solid #000; text-decoration: none; font-size: 11px; font-family: Agency FB,Geneva,sans-serif;" href="#"><img width='20' alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYf7naqc3J98EefoDBR7UDU9YuKitx3iYfoxBpPoYAci8WFno8lgDuqZPkkzdsBvnsAB8qewiG3QGotdo4ZVmtC2y0gb7jLLzmaWqoVH6ElQ84PnGb_C4dfoeyNF7mGca5fSBkN3iMRkbQ/s1600/FB-Close+BS.png'/></a><iframe allowtransparency='false' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/BloggerSpice&amp;width=294&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=%23000000&amp;stream=false&amp;header=false&amp;height=255' style='background:trasparent;border:1px solid #222; overflow:hidden; width:294px; height:255px;'/></iframe></div></div>

Customization

• Change Please Join Us And Be A Part with your Own Words
• Replace https://www.facebook.com/BloggerSpice with your Facebook Fan page link

0 Scrolling Facebook Popup Like Box Widget for Blogger

We have already got many Facebook Popup widget which just popup every time when we visit pages. And some widgets designed to one time popup style thus a visitors don't feel annoy. Generally we use this widget to get more Facebook likes. So I just designed this Facebook Popup like box with scrolling effect, that means when you add this widget then it will appear with popup style and it will scroll top to bottom when you just move your mouse from top to bottom. And also included a closing option if visitor wish to close it instantly. So this is really bit unique concept and simply nice. In addition you can change the widget color according to your desire. Hope this widget you would like and help to increase more Facebook Fan.

     Live  Demo

               

CSS Part of Scrolling Facebook Popup Like Box Widget

Step 1 Click on  Now click on -> Template -> Edit HTML-> Unfold code  ►

Step 2 Now Find this code </body> by pressing Ctrl + F

Step 3 Copy the code from below and Paste it  Before/above </body>

<style type='text/css'>

#bloggerspiceFBpop {

position:fixed !important;

position:absolute;

top:-1000px;

left:50%;

margin:0px 0px 0px -182px;

width:300px;

height:auto;

padding:16px;

background:#FEFEFE;font:normal Dosis, Georgia, Serif;

color:#111;

border:2px solid #333;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

#bloggerspiceFBpop a.bsclose {

position:absolute;

top:-10px;

right:-10px;

background:#fff;

font:bold 16px Arial, Sans-Serif;

text-decoration:none;

line-height:22px;

width:22px;

text-align:center;

color:#000000;

border:2px solid #333;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:22px;

-moz-border-radius:22px;

border-radius:25px;

cursor:pointer;

}

/* Widget by www.bloggerspice.com */

</style>

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

<script type='text/javascript'>

$(window).bind(&quot;load&quot;, function() {

// Animate Top

$(&#39;#bloggerspiceFBpop&#39;).animate({top:&quot;50px&quot;}, 1000);

// Widget by www.bloggerspice.com

$(&#39;a.bsclose&#39;).click(function() {

$(this).parent().fadeOut();

return false;

});

});

</script>

HTML Part of Scrolling Facebook Popup Like Box Widget

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

<div id='bloggerspiceFBpop'>
<!-- Widget by www.bloggerspice.com Start -->
<center><b><a class="BloggerSpice">Don't Forget To Join With Our Community</a></b></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FBloggerSpice&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe></center>
<!-- Widget by www.bloggerspice.com End -->
<a class='bsclose' href='#'>&times;</a>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href=" http://www.bloggerspice.com/2013/05/scrolling-facebook-popup-like-box.html">Blogger Spice</a></center>
</div>

Customization

• Change FEFEFE to get different color in widget. You can get the color code from Here. 
• Change BloggerSpice this with your facebook id 

If you need any further help then just leave a comment below. 

0 CSS Read More Button with Animated Bubble effects For Blogger Templates.

We have seen CSS bubble "Live Demo" Button for blogger templates. But CSS bubble "Read More" button is  unique. So I am going to share with you a trick that how to add CSS bubble "Read More" button in your blogger templates. You can see the Demo in my templates. So let's proceed to the tutorial.

Remember Back Up your templates first

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  ►

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Paste the below code Before/above ]]></b:skin> and Save the templates.

/*---CSS bubble "Read More" by www.bloggerspice.com ---*/

.readmore { float:right; display:block; height: 16px;line-height: 16px;background:#fc7e1a;text-transform:uppercase;font-size:12px;padding:0 3px}

a.readmore {color:#fff}

.jump-link { font-weight:bold; border-radius:0px; padding:0 15px; float:right; background:#C0C0C0; height:20px; line-height:20px }

.jump-link{ font:15px Calibri, Arial, sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; background-position:bottom left; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4_E619snUFvUlQuSpQkV5p5CrvDY4u6kzMXJKT3KV31tpY86gH-Eyi8TZGfIJL5oJzIZ2xx8cA0_lh9evPTHWDyeLtQcPAdV0WLDHMDoFlDA8djUrj1TWcfkJQQufvekx0lkbqExCpT-/s144/button_bg.png'); background-position:bottom left, top right, 0 0, 0 0; background-clip:border-box; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s; -moz-transition:background-position 1s; transition:background-position 1s; height:100; width:100px; font-size:20px; }

.jump-link:hover{ background-position:top left; background-position:top left, bottom right, 0 0, 0 0; }

.jump-link:active{ bottom:-1px; } /* The three buttons sizes */

.jump-link.medium { font-size:18px;}

.jump-link.small { font-size:13px;} /* BlueButton */

.jump-link{ color:#0f4b6d !important; border:1px solid #84acc3 !important; background-color: #48b5f2; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4_E619snUFvUlQuSpQkV5p5CrvDY4u6kzMXJKT3KV31tpY86gH-Eyi8TZGfIJL5oJzIZ2xx8cA0_lh9evPTHWDyeLtQcPAdV0WLDHMDoFlDA8djUrj1TWcfkJQQufvekx0lkbqExCpT-/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4_E619snUFvUlQuSpQkV5p5CrvDY4u6kzMXJKT3KV31tpY86gH-Eyi8TZGfIJL5oJzIZ2xx8cA0_lh9evPTHWDyeLtQcPAdV0WLDHMDoFlDA8djUrj1TWcfkJQQufvekx0lkbqExCpT-/s144/button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(#4fbbf7, #3faeeb); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4_E619snUFvUlQuSpQkV5p5CrvDY4u6kzMXJKT3KV31tpY86gH-Eyi8TZGfIJL5oJzIZ2xx8cA0_lh9evPTHWDyeLtQcPAdV0WLDHMDoFlDA8djUrj1TWcfkJQQufvekx0lkbqExCpT-/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4_E619snUFvUlQuSpQkV5p5CrvDY4u6kzMXJKT3KV31tpY86gH-Eyi8TZGfIJL5oJzIZ2xx8cA0_lh9evPTHWDyeLtQcPAdV0WLDHMDoFlDA8djUrj1TWcfkJQQufvekx0lkbqExCpT-/s144/button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); } .jump-link:hover{ background-color:#63c7fe; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4_E619snUFvUlQuSpQkV5p5CrvDY4u6kzMXJKT3KV31tpY86gH-Eyi8TZGfIJL5oJzIZ2xx8cA0_lh9evPTHWDyeLtQcPAdV0WLDHMDoFlDA8djUrj1TWcfkJQQufvekx0lkbqExCpT-/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4_E619snUFvUlQuSpQkV5p5CrvDY4u6kzMXJKT3KV31tpY86gH-Eyi8TZGfIJL5oJzIZ2xx8cA0_lh9evPTHWDyeLtQcPAdV0WLDHMDoFlDA8djUrj1TWcfkJQQufvekx0lkbqExCpT-/s144/button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4_E619snUFvUlQuSpQkV5p5CrvDY4u6kzMXJKT3KV31tpY86gH-Eyi8TZGfIJL5oJzIZ2xx8cA0_lh9evPTHWDyeLtQcPAdV0WLDHMDoFlDA8djUrj1TWcfkJQQufvekx0lkbqExCpT-/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4_E619snUFvUlQuSpQkV5p5CrvDY4u6kzMXJKT3KV31tpY86gH-Eyi8TZGfIJL5oJzIZ2xx8cA0_lh9evPTHWDyeLtQcPAdV0WLDHMDoFlDA8djUrj1TWcfkJQQufvekx0lkbqExCpT-/s144/button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); }

Step 6 Now again find the below code

    <b:if cond='data:post.hasJumpLink'>

      <div class='jump-link'>

        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> 

      </div>

    </b:if>

Step 7 Now replace the above code with below code and Save the templates.

<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read more</a><b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read more</a>

</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div dir='ltr' style='text-align: left;' trbidi='on'>

</div>

</b:if>

 If you face any problem just leave a comment below. 

0 Display Smiley Emotions Above Blogger Comment Box

This time I want to share ways of displaying smiley emoticons on blogger comments. You will find lots of tutorials blog which discusses how to add yahoo smiley emoticons on blogger comments using the concept of jQuery but may still rare. These are facilities that can automatically transform emoticons symbols :),: D,: P, into a predetermined image. Hopefully this trick help you to tailor your Blog commenting system.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the below code and Paste it Before/above ]]></b:skin> and Save the templates.

/*Widget By www.bloggerspice.com*/
.BSemoWrap {
  background-color:#fff;
  width: Auto;
  border:2px solid#000000;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}
img.emo, input.BSemoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}
input.BSemoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;

}

Step 5 Now again Find </head> by pressing Ctrl + F

Step 6 Copy the below code and Paste it Before/above </head> and Save the templates.

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

<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.BSemoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "To insert emoticon you must added at least one space before the code.";
//]]>
</script>
<script src=' http://bloggerspicebd.googlecode.com/files/BSEmoticons.www.bloggerspice.com.js' type='text/javascript'/>

Customization:

• If you found this code http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js  then paste the code  only this line <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

0 Add Zooming Effect and Drop shadows on Images with CSS3

I am going to share a simple but very useful trick for BloggerSpice readers. Just a simple trick to create or add zooming effect and drop shadows on images with CSS . You can apply this trick on a specific Image that will make your blog more attractive.  If you are interested in adding this effect on your blog or your post, it is very easy, just follow these steps:

Live Demo

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates.

/* Zooming Effects by www.bloggerspice.com*/
.BS-Zoom img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.BS-Zoom img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

How to Use?

Well now we will learn how to make this work. When you will go for add this effect just  add the following piece of code.

<div class="BS-Zoom">
<img src="Image URL Here" />
</div>

• Change Image URL Here this line with your image URL.  

0 CSS Ad Banners with Hover effects

CSS Ad Banners with Hover effects

      CSS ad banner is great way to attract your advertiser.If makes an appeal to advertiser for making offering your ad place. On the other hand a visitor can easily understand which places are vacant in your blog for placing ads. We will create some ads banners for blog site. The dimensions of CSS ad banners areas follows:

• 125px X 125px

• 250px X 250px

• 480px X 60px

• 728px X 90px

This ad banners are made with complete CSS code with Hover effects that looks elegant when it is hovered with mouse.

CSS Code For Ad Banners

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing  Ctrl + F

Step 4 Paste any code from below Before/above ]]></b:skin>

img{max-width:100%;height:auto}
#footer-wrapper{overflow:hidden;padding:0 5px}
.footnya{width:33%;display:inline-block;float:left}
.tab-widget-menu ul,.tab-widget-menu li{padding:0;margin:0;list-style:none}
#mobinavul{display:none}
::selection{background:#0F83A0;color:#fff;text-shadow:none}
::-moz-selection{background:#0F83A0;color:#fff;text-shadow:none}
.post-body blockquote{margin:15px;padding-left:10px;border-left:2px solid #0F83A0;font-style:italic;color:#0F83A0}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.blogger{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.spice{border:1px solid #60ADE9;background:#C2E0F1}
.spice:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.blogger{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.spice{border:1px solid #60ADE9;background:#C2E0F1}
.spice:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.blogger{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.spice{border:1px solid #60ADE9;background:#C2E0F1}
.spice:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.blogger{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.spice{border:1px solid #60ADE9;background:#C2E0F1}
.spice:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.blogger{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.spice{border:1px solid #60ADE9;background:#C2E0F1}
.spice:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.blogger{cursor:pointer}

.blogger{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.spice{border:1px solid #60ADE9;background:#C2E0F1}
.spice:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.blogger{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.spice{border:1px solid #60ADE9;background:#C2E0F1}
.spice:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.blogger{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.spice{border:1px solid #60ADE9;background:#C2E0F1}
.spice:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.blogger{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.spice{border:1px solid #60ADE9;background:#C2E0F1}
.spice:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.blogger{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.spice{border:1px solid #60ADE9;background:#C2E0F1}
.spice:hover{background:#ABE1FF}

HTML Code For Ad Banners 

Step 1 Go to your Layout tab.

Step 2 Click on "Add a Widget" then select "HTML/JavaScript" Widget.

Step 3 Now Copy any code from below and paste it in "HTML/JavaScript" Widget.

125px X 125px Adbanner Code

<ul class="bsad">
<li><div class="blogger ads125 spice">Advertise Here</div></li>
<li><div class="blogger ads125 spice">Advertise Here</div></li>
<li><div class="blogger ads125 spice">Advertise Here</div></li>
<li><div class="blogger ads125 spice">Advertise Here</div></li>
</ul>
</div>
</div>

250px X 250px Adbanner Code

<div class="bloggerspice" style="width:260px;height:200px;text-align:center;line-height:200px;margin:0 auto;">Advertise Here</div>

480px X 60px Adbanner Code

<div class="bloggerspice" style="width:468px;height:60px;line-height:60px;text-align:center;font-size:12px;">Advertise Here</div>

                 

728px X 90px Adbanner Code

<div class="bloggerspice" style="width:728px;height:90px;text-align:center;line-height:90px;margin:0 auto;">Advertise Here</div>

Step 5  Now Save the Widget. 

0 Add Animated Blockquote in your blog V2

Blockquote is essential to highlight your code block. Every blogger who wants to share widget code they use blockquote. Earlier I have shared with you an animated blockquote with glow effect which is currently using in my template, as continuous improvement of blogquote I have designed another simple animated blockquote which will easily grab your visitors attention. This is also eye-catching with hover effect. When you mouse over on them the quote icon will slide at the middle your code block as well as it will change the color. This is really amazing and hopefully I would be able to bring more style for you in future. So please follow the below steps to add blockquote on your blog easily. You can see the Demo from below.




Readmore: Add Glow effects on blockquote for Highlighting Code Block

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  ►

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the code from below and Paste it  Before/above ]]></b:skin>
  

/*****************************************
Blockquote by www.bloggerspice.com
******************************************/
.post blockquote {border:5px
solid #007FFF;font-size:120%;line-height:100%;overflow:auto;padding:10px;font-family:courier;color:#000;width:360px;position:relative;margin:0
auto 20px auto;padding:12px
80px 15px;text-align:left;border-radius:5px;box-shadow:0 0 5px 2px rgba(0,0,0,.35);cursor:default;background:#9FCFFF;border:1px
solid #6F91B2;background:#9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT8Qzc0BDiuOuT4_SG63_AIWsB5Nr7-JM6OKaRSXmhd_dOtCnHZPGjQ1u-Q9FZfrlMWFxZsz770mvwJoDgkl1zh5Om8ij88ZvDVTJyFdjUwHTHzTzVorObSVU6ZGHQY7pPNk1Z2rsjHF5F/s320/BS+blockquote.png) no-repeat 5% 9%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post blockquote:hover {
border:5px
solid #0066B3;border-radius:15px;
background:#0186ba;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post blockquote p {
margin: 0.75em 0;
}

How To Use

     For applying this Trick just select the code that you want to highlight and Click on 

If you face any problem please feel free to ask a question. Happy Blogging!!!!