A2z blogger tips: Blogger Widgets

How to add CSS hover effect to images in blogger

<blockquote class="tr_bq">
<div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;">
</div>
</blockquote>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyPjsSdUUluCGkS_94n3FdpWL5dJ190DZiskQu5MNp2sefBk3fllNnZK_HSF7-JfLVcfV6hos-_NcuiRMZNOmipgz6KaH7xw8hIDN6KqRGYp4XfHWnZL133urt09WUoLVCBnUn8K4kLWDo/s1600/How-to-add-CSS-hover-effect-to-images-in-blogger..png" /> <span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">Images bring life to content but do they really attract your visitors? Adding a nice CSS hover effect to your images could bring engagement benefits to your blog. Recently one of our users asked us that how to add CSS hover effect to images in blogger? There are many CSS hover effect available that could be applied with ease to your blogger site. Today, in this article we will show you how to add CSS hover effect to images in blogger.</span><br />
<a href="https://www.blogger.com/null" name="more" style="background-color: white; color: #2f6986; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; list-style: none; margin: 0px; outline: none; padding: 0px;"></a><br style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<h4 style="background-color: white; color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
What is mouse hover?</h4>
<span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">A mouse hover, also known as just hover that triggers an even whenever a mouse is placed over a certain area such as hyperlink on a webpage. This action is also called an action of moving the computer mouse over a specific item that cause a change in effect on hover. Usually, it functions with the help of CSS and JavaScript.</span><br />
<br style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<h4 style="background-color: white; color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
How to Add CSS Hover Effects to Images in Blogger?</h4>
<span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">In this post, we will be adding multiple CSS effects to images in blogger so we have listed all the hover effects below that are used and recommend by most of the web designers:</span><br />
<br style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">The very first thing you need to do is to go to Blogger >> Template >> Edit HTML and search for the skin tag. After finding the skin tag, just above it paste the following piece of code. Remember: Paste any one effect from the following codes listed below).</span><br />
<br style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<b style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">Effect #1: Bump Up:</b><br />
<span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">This effect is super easy to implement and doesn't even causes any kind of slowness to your blog. This works best when you have a serise of images in horizontal item. It moves the image a little bit towards upward direction when mouse is placed on it.</span><br />
<div>
<span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><br /></span></div>
<div>
<blockquote class="tr_bq">
<span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">.post-body img {</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    border: 5px solid #ccc;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    float: left;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    margin: 15px;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    -webkit-transition: margin 0.5s ease-out;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    -moz-transition: margin 0.5s ease-out;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    -o-transition: margin 0.5s ease-out;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">}</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">.post-body img:hover {</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    margin-top: 2px;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">}</span></blockquote>
<br />
<b style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">Effect#2: Grayscale Effect:</b><br />
<span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">This effects turns your all images to grayscale and whenever a mouse is placed over a image it can be seen in its orginal color. In other words it converts your images to black and white but on hover shows them in their orginal color.</span><br />
<br />
<blockquote class="tr_bq">
<span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">.post-body img {</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;"> /* Firefox 3.5+ */</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    filter: gray;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;"> /* IE6-9 */</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    -webkit-filter: grayscale(100%);</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;"> /* Chrome 19+ & Safari 6+ */;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">}</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">.post-body img:hover {</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    filter: none;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    -webkit-filter: grayscale(0%);</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">}</span></blockquote>
<br />
<span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">We hope this tutorial may have helped you in adding some cool hover effects to your images in blogger. However, if you have any other useful hover effects for images then do share with us in the comments below. </span><br />
<br />
<br /></div>

Blogger Blogger Widgets How to add CSS hover effect to images in blogger

Images bring life to content but do they really attract your visitors? Adding a nice CSS hover effect to your images could bring engagement benefits to your blog. Recently one of our users asked us that how to add CSS hover effect to images in blog…

Replace Newer,Older Posts Links With Buttons In Blogger

08:33 Unknown 1

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-gC5-X4eEH0rFUunYvFhU4mEzn_5rZmdHIU0VHTGXlsyvuU-I8z8aYnZx7Nkolng0N_G0XlVrugUz_wQzixKLSk3E1mZBl1DwS6Au7i0RN0KynouhItWEP6JvsIGKVM8ywNHFO4Gst6p/s1600/Replace-Older-Newer-Posts-With-Buttons.png" imageanchor="1" style="clear: right; color: #2aa4cf; float: right; margin-bottom: 1em; margin-left: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-gC5-X4eEH0rFUunYvFhU4mEzn_5rZmdHIU0VHTGXlsyvuU-I8z8aYnZx7Nkolng0N_G0XlVrugUz_wQzixKLSk3E1mZBl1DwS6Au7i0RN0KynouhItWEP6JvsIGKVM8ywNHFO4Gst6p/s1600/Replace-Older-Newer-Posts-With-Buttons.png" style="border: 1px solid rgb(238, 238, 238); padding: 0px;" /></a></div>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;">You may know that default blogger templates are  not much stylish and attractive.In fact,these templates are not made for professional bloggers.You will never get in built professional design and professional features in any default blogger templates.You need to give some part of your time to customize blogger templates design.Today we are also going to share a article about template customization which will helps you in giving professional design to you blogger template.May be you notice that there is Newer Posts,Older Posts and Home link at the bottom of your blogger template.These links are not attractive and fancy.Than why not change these links into stylish fancy buttons to make your blog more attractive.So,today you will know how to change these links to stylish button or images.</span><br />
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<h2 style="background-color: white; color: #222222; font-family: oswald; font-size: 25px !important; font-weight: 400 !important; line-height: 40px !important; margin-bottom: 16px; margin-top: 10px; padding-top: 70px;">
How Change Newer,Older Posts And Home Link With Buttons : </h2>
<ul style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px; list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">First Go to blogger.com>>Dashboard>>Template>>Edit HTML</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_JYJUJeTARVC-1LBKbucYzUbkFpe4D-_S-Onw1DpMP-gjADDKJiEB3-Ul8HCev0LVp2HqdOtH6DzzLC2Tmii6K9uZrcJvEItVtiBjc6aD6OqY7nt9qwMBkVrV1aoCFfMgaYsTi88eX0U/s1600/a2ZBT.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="219" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_JYJUJeTARVC-1LBKbucYzUbkFpe4D-_S-Onw1DpMP-gjADDKJiEB3-Ul8HCev0LVp2HqdOtH6DzzLC2Tmii6K9uZrcJvEItVtiBjc6aD6OqY7nt9qwMBkVrV1aoCFfMgaYsTi88eX0U/s1600/a2ZBT.png" width="640" /></a></div>
<div>
<span style="color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif;"><span style="font-size: 14px; line-height: 19.600000381469727px;"><br /></span></span></div>
<div>
<div style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;">
<div>
<h4 class="separator" style="clear: both; font-size: 18px; line-height: 1; margin-bottom: 16px; margin-top: 10px;">
To Replace  Home Link With Button : </h4>
<ul style="list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Search below code in your blog template using Ctrl+F.</li>
</ul>
</div>
<blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-style: italic; margin: 20px; padding: 20px;">
<span class="fullpost"><data:homemsg></data:homemsg></span></blockquote>
<ul style="list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace it with below code : </li>
</ul>
<blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-style: italic; margin: 20px; padding: 20px;">
  <span class="fullpost"><img color:="" red="" src="<b><span style=" />Home_Button_Image_Url</span></blockquote>
</div>
</div>
</div>
"/>Don't forget to to replace <b><span style="color: red;">Home_Button_Image_Url</span></b> with your home image link.If you want to use our blog like home button then Replace <b><span style="color: red;">Home_Button_Image_Url</span></b> with below image code.<br /><blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-style: italic; margin: 20px; padding: 20px;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivYoeoo9k4RTs_lUy6LVRpAtBpYB4AtROA1drOd9igkH5rnN-H33zJG_n9VvKa5KZvwkTZXahWFn2B-8aXN6Cr8An2fvdryzCeU9cTJC9Wchqi5QV0Z56KHDcskx1a8pRKZr9UcvnUJ1LU/s1600/home.png</blockquote>
<h4 style="font-size: 18px; line-height: 1; margin-bottom: 16px; margin-top: 10px;">
To Replace Older Posts Link With Button : </h4>
<ul style="list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Again Search  below code in your blog template.</li>
</ul>
<blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; font-style: italic; line-height: 24px; margin: 20px; padding: 20px;">
  <span class="fullpost"><data:olderpagetitle></data:olderpagetitle></span></blockquote>
<ul style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px; list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace it with below code :</li>
</ul>
<blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; font-style: italic; line-height: 24px; margin: 20px; padding: 20px;">
<span id="7514346671110994184">     <img color:="" red="" src="<span style=" /><b>Next_Button_Image_Url</b></span>"/> </blockquote>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;">To use next button like our blog replace </span><span style="background-color: white; color: red; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><b>Next_Button_Image_Url </b></span><span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;">with below image url or you can use your own image url.</span><br style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;" /><br style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;" /><div style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;">
<blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-style: italic; margin: 20px; padding: 20px;">
<div class="separator" style="clear: both;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYN0vbkwk7q4u_nTq7cRxHJha1TqY6aDL2KhQdHUY5ut7AG2Qxy2iIqXLUBupJ-_QpIY3gV4f61nYCUnx0VowOCJck5AqPbFzrBRS20tM4C9ENTkDHYXyWLcC133Q6fkYyu7HohgJT_MXU/s1600/blue_right_arrow.png</div>
</blockquote>
<h4 style="font-size: 18px; line-height: 1; margin-bottom: 16px; margin-top: 10px;">
To Replace Newer Posts Link With Button : </h4>
<ul style="list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Then search below code in your template.</li>
</ul>
<blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-style: italic; margin: 20px; padding: 20px;">
<span class="fullpost"><data:newerpagetitle></data:newerpagetitle></span></blockquote>
<ul style="list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace it with below code.</li>
</ul>
<blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-style: italic; margin: 20px; padding: 20px;">
  <span id="7514346671110994184"><img color:="" red="" src="<span style=" /><b>Previous_Button_Image_Url</b></span>"/></blockquote>
</div>
To use our blog like previous button replace <span style="color: red;"><b>Previous_Button_Image_Url </b></span>with below image url or use your own image.<br /><br />Now finally click on save template button and view your blog.You have successfully replaced old Newer,Older posts and Home link with Stylish button.If you are facing any problem than ask us below in comments we will surely give you solutions of that problem.And also don't forget to share your thoughts and feedbacks with us in comments.<br /><span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>
<span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>

Blogger Blogger Widgets widget Replace Newer,Older Posts Links With Buttons In Blogger

You may know that default blogger templates are not much stylish and attractive.In fact,these templates are not made for professional bloggers.You will never get in built professional design and professional features in any default blogger template…

How to Add a Reddit Button in Blogger Posts

01:32 Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">
<h4 style="color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYK0mFJNs9nGeYmYUri_VsFI3luArL7XviBzJnybG2maRKqoVBqVCS-y_SuWxsKs2vqdbYy30B4opoIc93Qj70qMWct7UBcuWkktLnIK4CzoCb9UWtDAq1P1Dx2G36mzDw5-YUSKcF8vTf/s1600/How-to-Add-a-Reddit-Button-in-Blogger-Posts.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYK0mFJNs9nGeYmYUri_VsFI3luArL7XviBzJnybG2maRKqoVBqVCS-y_SuWxsKs2vqdbYy30B4opoIc93Qj70qMWct7UBcuWkktLnIK4CzoCb9UWtDAq1P1Dx2G36mzDw5-YUSKcF8vTf/s1600/How-to-Add-a-Reddit-Button-in-Blogger-Posts.png" /></a></h4>
<h4 style="color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
<span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><br /></span></h4>
<h4 style="color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
<span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><br /></span></h4>
<h4 style="color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
<span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><br /></span></h4>
<h4 style="color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
<span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><br /></span></h4>
<h4 style="color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
<span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><br /></span></h4>
<h4 style="color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
<span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><br /></span></h4>
<h4 style="color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
<span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><br /></span></h4>
<h4 style="color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
<span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">While the rest of the other social networking corporations is heading towards a disaster, there is still one company that is achieving the hypes is Reddit. In the past, we have already shown you </span>how to add FaceBook, Twitter and Google+ buttons<span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">. Recently, one of our users asked us that How to add a Reddit button in blogger to gain all potential traffic from it. Your users can upvote your posts to give you a high position on Reddit page, which could help you in getting some targeted </span>traffic especially from the USA<span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">. In this article, we will show you how to add a Reddit button in blogger posts.</span><br style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" /><a href="https://www.blogger.com/null" name="more" style="color: #2f6986; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; list-style: none; margin: 0px; outline: none; padding: 0px;"></a><br style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" /><span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">The very first thing you need to do is to login into your blogger account. Now go to Template >> Edit HTML >> and search for the </span><b style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><i><data:post .body=""></data:post></i></b><span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"> tag and just above it paste the following piece of coding. (Quick tip: Click anywhere in the Blogger Template Editor, and Press CTRL+F to enable quick search). If you want to place the button below your posts, then paste the following code just below <data:post .body=""> tag</data:post></span></h4>
<h4 style="color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
<b style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">Vertical Button:</b></h4>
<h4 style="font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">
<span style="color: blue;"><span style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;"><script src="http://www.reddit.com/static/button/button3.js" type="text/javascript"></script></span><span style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">.</span></span></h4>
<div>
<b style="color: #464646;">Vertical Button (Style 2)</b></div>
<div>
<b style="color: #464646;"><br /></b></div>
<div>
<span style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px;"><span style="color: blue;"><script src="http://www.reddit.com/static/button/button2.js" type="text/javascript"></script></span></span></div>
<div>
<span style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px;"><span style="color: blue;"><br /></span></span></div>
<div>
<b style="color: #464646;">Horizontal Button:</b></div>
<div>
<b style="color: #464646;"><br /></b></div>
<div>
<span style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px;"><span style="color: blue;"><script src="http://www.reddit.com/static/button/button1.js" type="text/javascript"></script></span></span></div>
<div>
<span style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px;"><span style="color: blue;"><br /></span></span></div>
<div>
<b style="color: #464646;">Congratulations:</b><span style="color: #464646;"> Once everything is done, save the template by clicking “</span><b style="color: #464646;"><i>Save Template</i></b><span style="color: #464646;">” button. Now go and check your site to see everything is working just fine. If you have followed the steps correctly, you will see the Reddit button working just fine.</span><br style="color: #464646;" /><br style="color: #464646;" /><span style="color: #464646;">That's all folks, we are quite sure this tutorial has helped you in learning how to add a Reddit up-votes button in Blogger posts. You may not find this button on a lot of sites, but if you have a wallpaper or pictorial base site then, this small button could help you to rock your targeted traffic as well as earning. Are you using Reddit button in your site? If yes share, your experience with us.</span></div>
</div>
</div>

Blogger Widgets widget How to Add a Reddit Button in Blogger Posts

While the rest of the other social networking corporations is heading towards a disaster, there is still one company that is achieving the hypes is Reddit. In the past, we have already shown you how to add FaceBook, Twitter and Google+ buttons. Rece…

How to Add Two Columns Footer Widget To Blogger ?

09:58 Unknown 1

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilF_nEkvOYaryXeB5yFYJcImLjFYnq3Pba6gO0objFSnmCu3xvcjjV3Q6npoTK5GjBAqEPHXvKrbs5L7WeqMQfjBTvWV7MU3tXdVDDIMjlKg0XRgwWDLCDyrJdEhqGv50femVGEVVyFLY/s1600/adding-two-column-footer-widget-to-blogger.png" imageanchor="1" style="clear: left; color: #0084ce; float: left; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 1em 1em 0px; padding: 3px 7px; text-decoration: none;"><img alt="How to Add Two Columns Footer Widget To Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilF_nEkvOYaryXeB5yFYJcImLjFYnq3Pba6gO0objFSnmCu3xvcjjV3Q6npoTK5GjBAqEPHXvKrbs5L7WeqMQfjBTvWV7MU3tXdVDDIMjlKg0XRgwWDLCDyrJdEhqGv50femVGEVVyFLY/s1600/adding-two-column-footer-widget-to-blogger.png" style="border-width: 0px; padding: 10px;" title="How to Add Two Columns Footer Widget To Blogger" /></a></div>
<div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;">
Are you using default blogger template or custom template, Sometime you must be worried about the <b>blogger footer widget</b>. As usual we see that most of bloggers show only three columns widget below footer area of the blog. Most of tech blogs showing two columns widget and other multiple. What to do if we want to<b>show only two column widget inside blogger</b>. Google official says that blogger is the only platform which allow users to customize every single part of its layout interface. So it concluded that we could easily customized, added and remove widget inside blogger template without any hassle. Yesterday one of our users have requested how to add two column widget in blogger blog. So in today article you will guide you, <b>how to add two columns footer widget in blogspot</b> template to make the footer designing stylishly.<br />
<a href="http://www.blogger.com/blogger.g?blogID=2886618182934830747" name="more" style="color: #0084ce;"></a></div>
<h3 style="background-color: white; border-bottom-color: rgb(40, 109, 164); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(40, 109, 164); border-top-style: dotted; border-top-width: 1px; color: #2e6886; font-family: 'Carrois Gothic SC', sans-serif; font-size: 16px; line-height: 25.200000762939453px; margin: 45px 0px 10px; padding: 3px 7px;">
Why To Add Two Column Widget in Blogger</h3>
<div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;">
Adding two column to footer in your blogger blog will bring awesomeness, It will accommodate further gadgets in the blog without creating an extra div section. Each column accommodated many gadget as you wish to add in to footer. So it is a good practice to add the widget without customizing the template, You will have just to <b>add html/Javascript gadget </b>and past your desire widget coding. </div>
<ul style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; list-style: none; padding-left: 20px; text-align: justify;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeFNjY-dxAjRFe3E3i1-tg8F0nIPRcZasPu2HI6-NJawCiyXA-1aapoEzAeBg-HufsuB4HXdCjM6IM6SNFkXqkjICOvAI7t9VjBRbGXk9d4f4h4PolZnze5crecFdvy0iTgT-0MkSOOg/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><b>Related</b>:  <a href="http://www.a2zbloggertips.blogspot.com.es/2013/12/small-seo-tools-review-ultimate-seo.html" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Small SEO Tools Review - Ultimate SEO Checker Tools for Your Blog</a></li>
</ul>
<div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;">
By default this widget will show two columns in your blog footer. So make sure your gadget will show parallel in the footer section with left and right hand style. So you can add as many widget as you want to add but all of them will be shown in two columns. If you want to show<b>multiple columns </b>just read the below tutorial.</div>
<ul style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; list-style: none; padding-left: 20px;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeFNjY-dxAjRFe3E3i1-tg8F0nIPRcZasPu2HI6-NJawCiyXA-1aapoEzAeBg-HufsuB4HXdCjM6IM6SNFkXqkjICOvAI7t9VjBRbGXk9d4f4h4PolZnze5crecFdvy0iTgT-0MkSOOg/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><b>You might Like:</b>  <a href="http://www.a2zbloggertips.blogspot.com.es/2013/12/releasing-a2z-blogger-tips-v2.html" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Releasing A2z Blogger Tips V2 Responsive Template !</a></li>
</ul>
<h3 style="background-color: white; border-bottom-color: rgb(40, 109, 164); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(40, 109, 164); border-top-style: dotted; border-top-width: 1px; color: #2e6886; font-family: 'Carrois Gothic SC', sans-serif; font-size: 16px; line-height: 25.200000762939453px; margin: 45px 0px 10px; padding: 3px 7px;">
How does It look Likes in Blogger</h3>
<div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;">
It is a good practice to take look into the gadget demo before applying to your blogger blog. You must have to look how the widget will show on the blogger layout interface and where it will be visible to show in the blog. To see the demo look into the below screenshot. Minded this is only the layout interface screenshot, the widget will look different on your blogger home page. </div>
<br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZVUwNvoZR67wTBzCDowZNhh2wI37F8bHIWvjxpgx0V_EGQ8aECfB5hBjeg2CRL5EHwTq9H37ddstsEwQK7QVyKd4Bj9euWbvtL0wnOgWQCVDqCVwXWwA_RuqAdUFPKgXfojL9o2NgVLo/s1600/adding-two-column-footer-widget-in-blogger.png" imageanchor="1" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="How to Add Two Columns Footer Widget To Blogger" border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZVUwNvoZR67wTBzCDowZNhh2wI37F8bHIWvjxpgx0V_EGQ8aECfB5hBjeg2CRL5EHwTq9H37ddstsEwQK7QVyKd4Bj9euWbvtL0wnOgWQCVDqCVwXWwA_RuqAdUFPKgXfojL9o2NgVLo/s400/adding-two-column-footer-widget-in-blogger.png" style="border-width: 0px; padding: 10px;" title="How to Add Two Columns Footer Widget To Blogger" width="400" /></a></div>
<br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;">
To view this widget on your blogger homepage it will display as same we have mentioned in the below screenshot. It does not mean that, you are not be able to customize this widget, If you want to customized, we can easily increase the layout or maximize the height that solely depends on your blog homepage width and main layout. So to give the illustrative view it would somewhere look like the below demo.</div>
<br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivsVcTMG07Pikh4Yo6quphxV409yWUj1MwRrkRU_-jIJFTdW3IKJLeQeLjRRt2BWsZz6CI_Vrri_IzlSloQ5DplBo07f8afKS0pDpzr_mS6lCGFfLrjC8vDW1x6kY8Q2HHn-QvsYGBzaI/s1600/two-columns-blogger-footer-widget.jpg" imageanchor="1" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="How to Add Two Columns Footer Widget To Blogger" border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivsVcTMG07Pikh4Yo6quphxV409yWUj1MwRrkRU_-jIJFTdW3IKJLeQeLjRRt2BWsZz6CI_Vrri_IzlSloQ5DplBo07f8afKS0pDpzr_mS6lCGFfLrjC8vDW1x6kY8Q2HHn-QvsYGBzaI/s320/two-columns-blogger-footer-widget.jpg" style="border-width: 0px; padding: 10px;" title="How to Add Two Columns Footer Widget To Blogger" width="320" /></a></div>
<br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<h3 style="background-color: white; border-bottom-color: rgb(40, 109, 164); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(40, 109, 164); border-top-style: dotted; border-top-width: 1px; color: #2e6886; font-family: 'Carrois Gothic SC', sans-serif; font-size: 16px; line-height: 25.200000762939453px; margin: 45px 0px 10px; padding: 3px 7px;">
Learn How to Add Customize Two Column Footer To Blogger</h3>
<span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">Do not worry this is not so difficult process, even for beginner blogspot user to add this customize footer widget. You will have to follow some of the below given tips to add this customize footer in your blog. Follow the below step by step guide correctly and do the action.</span><br />
<br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<span style="background-color: yellow; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><b>Step:1</b></span><br />
<br />
<ul style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; list-style: none; padding-left: 20px;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeFNjY-dxAjRFe3E3i1-tg8F0nIPRcZasPu2HI6-NJawCiyXA-1aapoEzAeBg-HufsuB4HXdCjM6IM6SNFkXqkjICOvAI7t9VjBRbGXk9d4f4h4PolZnze5crecFdvy0iTgT-0MkSOOg/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Go to <b>blogger Dashboard</b>:</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeFNjY-dxAjRFe3E3i1-tg8F0nIPRcZasPu2HI6-NJawCiyXA-1aapoEzAeBg-HufsuB4HXdCjM6IM6SNFkXqkjICOvAI7t9VjBRbGXk9d4f4h4PolZnze5crecFdvy0iTgT-0MkSOOg/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Go to<b> template >> Editor html mode</b>:</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeFNjY-dxAjRFe3E3i1-tg8F0nIPRcZasPu2HI6-NJawCiyXA-1aapoEzAeBg-HufsuB4HXdCjM6IM6SNFkXqkjICOvAI7t9VjBRbGXk9d4f4h4PolZnze5crecFdvy0iTgT-0MkSOOg/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Now Search For >> <span class="fullpost" style="display: inline;"><b>]]></b></span></li>
</ul>
<br />
<br />
<br />
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeFNjY-dxAjRFe3E3i1-tg8F0nIPRcZasPu2HI6-NJawCiyXA-1aapoEzAeBg-HufsuB4HXdCjM6IM6SNFkXqkjICOvAI7t9VjBRbGXk9d4f4h4PolZnze5crecFdvy0iTgT-0MkSOOg/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span class="fullpost" style="display: inline;"><span class="fullpost" style="display: inline;">Now past the below given Css code above <b>]]></b></span></span></li>
<br />
<div>
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">* -----  PBT  LOWER SECTION   ----- */ </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">#lower { </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       margin:auto; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       padding: 0px 0px 10px 0px; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       width: 100%; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">     </span><b style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">  background:#333434; </b><span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">}  </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">#lower-wrapper { </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       margin:auto; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       padding: 20px 0px 20px 0px; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">   </span><span style="color: #0080ff; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"><b>    <span style="color: red;">width: 960px;</span></b></span><span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">} </span><br />
<span style="font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">#lowerbar-wrapper </span><span style="font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">{ </span><br />
<span style="font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">     border:1px solid #DEDEDE; </span><br />
<span style="font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       </span><span style="font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"><b><span style="color: #0080ff;">background:#fff;</span> </b>       float: left; </span><br />
<span style="font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       margin: 0px 85px auto; </span><br />
<span style="font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       padding-bottom: 20px; </span><span style="color: #0080ff; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       </span><b style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"><span style="color: #0080ff;">width: 32%;</span><span style="color: black;"> </span>       text-align: justify; </b><br />
<b style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       font-size:100%; </b><br />
<b style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       line-height: 1.6em; </b><br />
<b style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       word-wrap: break-word;  </b><br />
<b style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       overflow: hidden; </b><br />
<b style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">} </b><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       .lowerbar {margin: 0; padding: 0;} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} </span><br />
<span style="font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">.lowerbar h2 {</span><span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">      margin: 0px 0px 10px 0px; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       padding: 3px 0px 3px 0px; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       text-align: left; </span><br />
<span style="color: green; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       </span><b style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"><span style="color: green;">color:#0084ce;</span> </b><span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">        text-transform:uppercase; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">      </span><b style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"><span style="color: green;">font: bold 14px Arial, Tahoma, Verdana; </span></b><span style="color: green; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">       </span><span style="color: green; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"><b>border-bottom:3px solid #0084ce; </b></span><span style="font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">}</span><span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">.lowerbar ul { </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">      margin: 0px 0px 0px 0px; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">      padding: 0px 0px 0px 0px; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">      list-style-type: none; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">} </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">.lowerbar li { </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">      margin: 0px 0px 2px 0px; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">      padding: 0px 0px 1px 0px; </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">    </span><b style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">  <span style="color: blue;">border-bottom: 1px dotted #ccc;</span></b><span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"> </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">}</span></div>
<div>
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"><br /></span></div>
<div>
<span style="background-color: yellow; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><b> Part: 2 </b></span><br />
<br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">  Now find </span><b style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"></b></div>
<span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"> it mostly appeared in the last of blogger template and past the below given cod above the </span><b style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"></b><span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"> tag.</span><br />
<div>
<span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><br /></span></div>
<div>
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"></span><br />
<div id="lower">
</div>
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">
</span>
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">    </span><br />
<div id="lower-wrapper">
</div>
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">
</span>
<br />
<br style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;" />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">    </span><br />
<div id="lowerbar-wrapper">
</div>
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">
</span>
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">    <b:section class="lowerbar" id="</span><b style="color: rgb(51, 51, 51); font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">lowerbar1</b><span style="color: rgb(51, 51, 51); font-family: lora; font-size: 13px; line-height: 16.380001068115234px; background-color: rgb(242, 241, 241);">" preferred="yes"></b:section></span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">    </span></div>
<br style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;" />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">    </span><br />
<br style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;" />
<br style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;" />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">    </span><br />
<div id="lowerbar-wrapper">
</div>
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">
</span>
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">    <b:section class="lowerbar" id="</span><b style="color: rgb(51, 51, 51); font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">lowerbar2</b><span style="color: rgb(51, 51, 51); font-family: lora; font-size: 13px; line-height: 16.380001068115234px; background-color: rgb(242, 241, 241);">" preferred="yes"></b:section></span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">    </span><br />
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">    </span><br />
<br style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;" />
<br style="color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;" />
<span style="color: #6aa84f; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"><br />    </span><br />
<div style="clear: both;">
</div>
<span style="color: #6aa84f; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">
</span>
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;">    </span> <br />
<div>
<span style="background-color: #f2f1f1; color: #333333; font-family: lora; font-size: 13px; line-height: 16.380001068115234px;"><br /></span></div>
<div>
<span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">Finally Save your Template and you have done almost:</span><br />
<br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<h3 style="background-color: white; border-bottom-color: rgb(40, 109, 164); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(40, 109, 164); border-top-style: dotted; border-top-width: 1px; color: #2e6886; font-family: 'Carrois Gothic SC', sans-serif; font-size: 16px; line-height: 25.200000762939453px; margin: 45px 0px 10px; padding: 3px 7px;">
Possible Customization</h3>
<span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">By any chance if the widget does not show in the exact position, then you could easily follow the below tips to make it design perfect for your blog.</span><br />
<br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">Read these instruction in our earlier post >></span><a href="http://www.probloggertricks.com/2013/06/three-column-footer-widget.html" style="background-color: white; color: #0084ce; font-family: lora; font-size: 14px; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank"><b>Make These Customization</b></a><br />
<br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" />
<h4 style="background-color: white; border-bottom-color: rgb(0, 0, 0); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: dotted; border-top-width: 1px; font-family: 'Carrois Gothic SC', sans-serif; font-size: 14px; line-height: 25.200000762939453px; margin: 15px 0px 5px; padding: 3px 7px;">
Need Help in Customization</h4>
<div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;">
We hope you would this splendid tutorial to add two columns footer widget in blogger blog. We have been prepared this tutorial with great effort, hope you will get good result without any bugs or error. If anyone found problem during implementation then kindly post you query in the comment section. thanks and happy blogging.</div>
</div>
<style>
#ads_ppc {text-align: left; width:280px; height:300px; padding:5px; margin:0px;border:1px solid #1a4d86}
</style>

<br />
<div id="ads_ppc">
<a href="http://www.a2zbloggertips.blogspot.com.es/2013/12/releasing-a2z-blogger-tips-v2.html" style="color: blue; font-size: 12px; padding: 15; text-decoration: underline;" target="_blank" title="YourTitle"><strong>Download Best Blogger Templates</strong></a><br />
<span style="font: 11px verdana;">Download High Quality Blogger Templates With Greatful Design</span><br />
<a href="http://www.blogger.com/" style="color: #b0130d; font-size: 9px;" target="_blank" title="Link Title">www.blogger.com</a><br />
<br />
<a href="http://a2zbloggertips.blogspot.com.es/search/label/Blogging%20Tips" style="color: blue; font-size: 12px; padding: 15; text-decoration: underline;" target="_blank" title="YourTitle"><strong>1000 Blogger Tips And Widgets </strong></a><br />
<span style="font: 11px verdana;">1000 Blogger Tips</span><br />
<a href="http://www.rockingtemplates.com/" style="color: #b0130d; font-size: 9px;" target="_blank" title="Link Title"></a><br />
<br />
<a href="http://a2zbloggertips.blogspot.com.es/search/label/Make%20Money" style="color: blue; font-size: 12px; padding: 15; text-decoration: underline;" target="_blank" title="YourTitle"><strong>Make Money Online From Blogger</strong></a><br />
<span style="font: 11px verdana;">Make Money Online</span><br />
<a href="http://www.rockingtemplates.com/" style="color: #b0130d; font-size: 9px;" target="_blank" title="Link Title"></a><br />
<br />
<a href="http://www.allbloggertricks.com/" style="color: #b0130d; float: right; font-size: 12px; padding: 15; text-decoration: none;" target="_blank" title="Creators Link"><small>Ads by Google </small></a></div>
</div>

Blogger Widgets Blogging Tips How to Add Two Columns Footer Widget To Blogger ?

Are you using default blogger template or custom template, Sometime you must be worried about the blogger footer widget. As usual we see that most of bloggers show only three columns widget below footer area of the blog. Most of tech blogs showing t…

How To Add Skype Contact Widget In Blogger

11:31 Unknown 0

Blogger Widgets widget How To Add Skype Contact Widget In Blogger

All the internet savvy know that Skype is one of the fastest and quick conversion tool ever on the internet. More than ninety five percent people use Skype to communicate with the clients, friends, Relatives and also uses for business purposes. In m…

How to Add Professional Notification Bar in Blogger Blog ?

11:30 Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnosw-63KDnbeEro05Euvl6KmEdCK0NFZCn-Sc_2Vq8LNleBBNYipJCh1m_AgXd0wrKvlS5aGNjxSYsrkV_6F9y59CgoStQPYsrwXSr2mN_Alkm7BVnI92vwqUvcMNroMF_CHOL-NevIQ/s1600/blogger-notification-bar.png" imageanchor="1" style="clear: left; color: #0084ce; float: left; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14px; margin: 15px 1em 1em 0px; padding: 3px 7px; text-decoration: none;"><img alt="Professional Notification Bar for Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnosw-63KDnbeEro05Euvl6KmEdCK0NFZCn-Sc_2Vq8LNleBBNYipJCh1m_AgXd0wrKvlS5aGNjxSYsrkV_6F9y59CgoStQPYsrwXSr2mN_Alkm7BVnI92vwqUvcMNroMF_CHOL-NevIQ/s1600/blogger-notification-bar.png" style="border-width: 0px; padding: 10px;" title="Professional Notification Bar for Blogger"></a></div>
<div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;">
Today we are releasing a new fancy style black notification bar for your blogger blog. This notification bar will show your desire post which you want to show up at the top of the blog. However most of bloggers display the hot deals or popular post with the help of this blogger notification. The most big advantage of having notification message at the top of the blog will exist remain even if we grab the mouse down or scrolling up and down. This top righted bar will interact with every page or post. So if you have not yet added a notification bar into blogger then we would recommended to add this simple black color notification bar in your blogger blog. Most of the time i have seen bundles of comments posted by newbies in blogging forum, how could we add a notification message alert bar in blogspot blog. So in today article we will show you, How to add a professional like notification bar in blogger blog. ?<br>
</div></div></div>

Blogger Widgets widget How to Add Professional Notification Bar in Blogger Blog ?

Today we are releasing a new fancy style black notification bar for your blogger blog. This notification bar will show your desire post which you want to show up at the top of the blog. However most of bloggers display the hot deals or popular post …