Add Multi Color Social Followers Widget on Blog

This widget is very beautiful look your blog. It will give a unique rainbow effect to your social followers widget. You can easily add this widget on your blog. You can also customize this widget background color, text color and change widget size. So you interested this widget please try to follow the bellow tutorial and leave a comment.

Add Multi Color Social Followers Widget on Blog

Add Multi Color Social Bookmarking Widget:

  • Login to your Blogger Dashboard 
  • Click right side bar on selected blog's
  • Select "Layout" on drop down menu
Add Social Media Icons Blogger Widget

Step 1- Add Social Media Icons Blogger Widget:

A. Click on "Add Gadget" in your template sidebar
B. Choose  "HTML/JavaScript" Gadget

Add Social Followers Gadget in Blogger


Multi Colored Social Follow Buttons CSS Code

Multi Colored Social Follow Buttons CSS Code:

<style type='text/css'>
.wg-roseicwidget {  width: 300px;  margin: -10px;  text-decoration: none; }
.wg-roseicwidget ul {  margin: 0;  padding: 0;  text-decoration: none;}
.wg-roseicwidget ul li {  list-style:none;   padding: 0; text-transform: none; text-decoration: none;}
.wg-roseicwidget ul li a {   color: #fff;   display:block;  text-decoration: none;}
.wg-roseicwidget ul li a:hover {  color: #c9c9c9;  background-color: #333;  text-decoration: none; }
.wg-roseicwidget ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.wg-roseicwidget ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
</style>
<div class="wg-roseicwidget">
<ul>
<li><a class="facebook" href="https://www.facebook.com/help2blogging">Join Us on Facebook</a></li>
<li><a class="rss" href="http://feeds.feedburner.com/help2blogging">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/help2blogging">Follow me on Twitter</a></li>
<li><a class="google" href=" https://plus.google.com/+Help2bloggingBlogspot">Join me on Google+</a></li>
<li><a class="linkedin" href=" http://www.linkedin.com/help2blogging">Connect With Us on LinkedIn</a></li>
</ul>
</div>
Multi Color Social Bookmarking Widget: Demo


Note: 
   1. Replace help2blogging to your Facebook page name, Feedburnre ID, Twitter page name and Linkedin ID 
   2. Replace +Help2bloggingBlogspot to your Google+ page name.

That's all.
--------------------------------------------------------------

If you have any question and suggestions related blogger
Please don't hesitates just sent email or leave comment
Thanks to follow this tutorial
Best regards
help2blogging team

Add Multi Color Social Followers Widget on Blog- Help2blogging logoAdd Social Followers Gadget in Blogger- Help2blogging smile logo

How to Add Blog Archive Widget on Blogger

Hey guys now I will try to discuss about how to add blog archive on your blog sidebar. When you publish any post on your site automatically all post title show on archive widget with serial maintained day by day. You can easily get any post in this widget.

How to Add Blog Archive Widget on Blogger

Customized Archive Gadget In Blogger:


  • Firstly Login to your Blogger Dashboard
  • Select your blog and click on right side bar
  • Select "Layout" on drop down menu
Customized Archive Gadget In Blogger

Add Blog Archives Widget in Blogger:

A. Click on "Add a Gadget" in your template sidebar
B. Select "Blog Archive" on pop-up page

----------------------------------------

If you have any question and suggestions related blogger
Please don't hesitates just sent email or leave comment
Thanks to follow this tutorial
Best regards
help2blogging team

Add Archive widget blogspot blog- Help2blogging logoCreate an Archive in Blogger- Help2blogging smile logo

Creating a Popup Window/Page on Blogger Avoiding Popup Blocked

Click on link to open your any page as the time you will show popup window on your blog. If you want to make money with this popup page you should adjust any client product link for advertised. Many popup pages have block when visitors open popup window. But today I teach you how to make any popup page on your blog without blocked.

Creating a Popup Window/Page on Blogger Avoiding Popup Blocked

Create Popup Windows for Blogger:

Step 1: Create jQuery Popup Windows For Blogger:

  • Select "Layout" on drop down menu
Create Popup Windows for Blogger
A. Click on "Add Gadget" in your template sidebar
B. Choose  "HTML/JavaScript" Gadget
Create jQuery Popup Windows For Blogger

Step 2: Add Popup Window Using Jquery:

  A. Write widget name in "Title" box
  B. Past the bellow script in "Content" box then save

Add Popup Window Using Jquery

Avoid Popup Blocker JavaScript Code:

<script type="text/javascript">
var win = window.open('http://help2blogging.blogspot.com', "popup", 'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=650, height=650, left = 300, top = 50');
if (!win){
//    alert("failed for most browsers");
    document.body.onclick = function () {
         window.open('http://help2blogging.blogspot.com', 'poppage', 'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=650, height=650, left = 300, top = 50');
    };
}else {
    var thisdoc = document;
    //Is it Chrome?
    if(/chrome/.test(navigator.userAgent.toLowerCase())){
        setTimeout(function() {
            if ((win.innerHeight > 0) == false){
//                alert("failed for chrome");
                  thisdoc.body.onclick = function () {
                      window.open('http://help2blogging.blogspot.com', 'poppage', 'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=650, height=650, left = 300, top = 50');
                  };
             }
        }, 100);
    }else{
       win.onload = function() {
            if ((win.innerHeight > 0) == false){
//                alert("failed for others");
                  thisdoc.body.onclick = function () {
                     window.open('http://help2blogging.blogspot.com', 'poppage', 'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=650, height=650, left = 300, top = 50');
                  };
            }
       };
    }
}

</script>

Note: Replace http://help2blogging.blogspot.com to your custom popup URL or client URL.

  • That's all.
------------------------------------------------------

If you have any question and suggestions related blogger
Please don't hesitates just sent email or leave comment
Thanks to follow this tutorial
Best regards
help2blogging team

Avoid Popup Blocker JavaScript Code- Help2blogging logoCreating a popup window in html -Help2blogging smile logo

How to Create html/ CSS Text Column on Blog Page or Post

   Hey guys, now I discuss with you how to make any text column in your blog. You can easily to use this code on your blogger page or post. But this script not only for blogger user you can attach in any web site. Just you copy the bellow code then go to locate your blogs page or post and past inside the HTML mode. Then you should select Compose mode and write your text in column.

How To Make Text Border in HTML Code:

  • Firstly Login to your Blogger Dashboard
  • Select your blog and click on right side bar
  • Select "Posts" on drop down menu
How To Make Text Border in HTML Code:

Add Border in Blogger Post:

  A. Now go to "HTML" mode in post
    B. Copy the bellow any one style code and past here

Add Border in Blogger Post

Style 1- Text Frames and Borders to Blogger:

Text Frames and Borders to Blogger
<style type="text/css">
div.sundaboy1{border-style:solid;
border-bottom-width:15px;
border-color:#C6FF00;}
</style>
<div class="sundaboy1">Type your text</div>
Note: Replace C6FF00 to border color as you like

Style 2- Create Outline Text in HTML:

Create Outline Text in HTML
<style type="text/css">
div.sundaboy2{
border-style:solid;
border-width:5px;
border-color:#FF00C6;}
</style>
<div class="sundaboy2">Type your text</div>
Note: Replace FF00C6 to border color as you like

Style 3- Create HTML Borders Around Text Boxes:

Create HTML Borders Around Text Boxes
<style type="text/css">
div.double {border-style:double;}
</style>
<div class="double">Type your text</div>

Style 4- CSS Borders Around Text Boxes:

CSS Borders Around Text Boxes
<style type="text/css">
div.sundaboy3{
border-style:solid;
border-width: thick ;}
</style>
<div class="sundaboy3">Type your text</div>

Style 5- Put a Border Around Text in HTML:

Put a Border Around Text in HTML
<style type="text/css">
div.dotted {border-style:dotted;}
</style>
<div class="dotted">Type your text</div>

Create CSS Textbox Border:

 C. Now select "Compose" mode
 D. Replace “Type your text” with your any text
 E. At last complete type content you should Publish your post

Create CSS Textbox Border

  • That’s all.
---------------------------------------------------


If you have any question and suggestions related blogger
Please don't hesitates just sent email or leave comment
Thanks to follow this tutorial
Best regards
help2blogging team

Display a box around text in HTML- Help2blogging logoHTML/ CSS Box Model- Help2blogging smile logo

How To Add 3 Column 2 Style Footer on Blogger Template


You have a stylish blogger blog but there is no any footer widget column. Now you get this problem solution in this tutorial. Now I will post how to add three column footer widgets on your blog. This way to you shows two style footer columns. In this footer widget contains three columns on blogger blog. In this footer widget section you can add whatever you want. So friends follow the bellow tutorials and make you footer widget.

You may show other tutorial four column footer widgets.

Add Footer Column Widget into Blogger blog:



  • Select your blog and click on right side bar 
  • Select "Template" on drop down menu

  • Add Footer Column Widget into Blogger blog

    Now create a backup of your blogger template because if you have any wrong this template after edited, you can restore this. So click on Backup /Restore and download Full Template.
    • Click on "Edit HTML" button
    Three Column Footer Two Style Widget in Blogger

    Step 1- Add Three Column footer CSS Code in Blogger:

    • Click anywhere inside the code area and press the CTRL + F keys on your keyboard to open the Blogger' search box. 
        A. Write Search box then hit enter your keyboard and find this tag
    ]]></b:skin>
        B. Past the bellow code before this tag
    Add Three Column footer CSS Code in Blogger

    CSS Code for Extra Columns Footer in your Blogger Layout:

    /* -----   help2blogging three column footer widget With two style---- */
    # h2b {
           margin:auto;
           padding: 0px 0px 10px 0px;
           width: 100%;
           background:#333434;
    #h2b-wrapper {
           margin:auto;
           padding: 20px 0px 20px 0px;
           width: 960px;
    }
    # h2bbar-wrapper {
         border:1px solid #DEDEDE;
           background:#fff;
           float: left;
           margin: 0px 5px auto;
           padding-bottom: 20px;
           width: 32%;
           text-align: justify;
           font-size:100%;
           line-height: 1.6em;
           word-wrap: break-word; 
           overflow: hidden;
    }
           . h2bbar {margin: 0; padding: 0;}
           . h2bbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
    . h2bbar h2 {
          margin: 0px 0px 10px 0px;
           padding: 3px 0px 3px 0px;
           text-align: left;
           color:# 007F74;
            text-transform:uppercase;
          font: bold 14px Arial, Tahoma, Verdana;
           border-bottom:3px solid #0084ce;
    }
    . h2bbar ul {
          margin: 0px 0px 0px 0px;
          padding: 0px 0px 0px 0px;
          list-style-type: none;
    }
    . h2bbar li {
          margin: 0px 0px 2px 0px;
          padding: 0px 0px 1px 0px;
          border-bottom: 1px dotted #ccc;

    }

    Extra Columns Footer in your Blogger Layout Note: 
         1- Change background:#333434; to customize backside the footer background
         2- Change width: 960px; customize your width of the widget
         3- Change border:1px solid #DEDEDE; customize your widget outside background color
         4- Change background:#fff; customize your widget background color

    Step 2- Add Three Column Footer HTML Code in Blogger:

     A. Now search again </body> tag inside the code area
      B. Past the bellow code before this tag

    <div id='h2b'>
    <div id='h2b-wrapper'>
    <div id='h2bbar-wrapper'>
    <b:section class='h2bbar' id='h2bbar1' preferred='yes'>
    </b:section>
    </div>
    <div id='h2bbar-wrapper'>
    <b:section class='h2bbar' id='h2bbar2' preferred='yes'>
    </b:section>
    </div>
    <div id='h2bbar-wrapper'>
    <b:section class='h2bbar' id='h2bbar3' preferred='yes'>
    </b:section>
    </div>
    <div style='clear: both;'/>
    </div> </div>
    Add Three Column Footer HTML Code in Blogger

    • But you can need this column before footer-wrapper please find
    <div id='footer-wrapper'>

     <div id='footer'>
    or
    <div class='credit'>

    <div class='credit-wrapper'>
    • And past above code before this tag
    Add three columns to your footer section
     C. Now click on Save template button.
    • That's all.

    Second Style Adding 3 Column Footer Widget in Blogger:


    • Here I share other one style.
    • You can add this code just only replace Step 1 after of course add Step 2 code then enjoy

    /* -----   help2blogging three column footer widget ----- */
    #h2b {
           margin:auto;
           padding: 0px 0px 10px 0px;
           width: 100%;
           background:#333434; }
    #h2b-wrapper {
           margin:auto;
           padding: 20px 0px 20px 0px;
           width: 960px;
    }
    #h2bbar-wrapper {
         border:1px solid #A1FF28;
           background:#007F74;        float: left;
           margin: 0px 5px auto;
           padding-bottom: 20px;        width: 32%;        text-align: justify;
           font-size:100%;
           line-height: 1.6em;
           word-wrap: break-word;
           overflow: hidden;
    }
           .h2bbar {margin: 0; padding: 0;}
           .h2bbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
    .h2bbar h2 {
          margin: 0px 0px 10px 0px;
           padding: 3px 0px 3px 0px;
           text-align: left;
           color:#FFFFFF;         text-transform:uppercase;
          font: bold 14px Arial, Tahoma, Verdana;        border-bottom:3px solid #FFFFFF; }
    .h2bbar ul {
          margin: 0px 0px 0px 0px;
          padding: 0px 0px 0px 0px;
          list-style-type: none;
    }
    .h2bbar li {
          margin: 0px 0px 2px 0px;
          padding: 0px 0px 1px 0px;
          border-bottom: 1px dotted #ccc;

    }

    Adding 3 Column Footer in Blogger

    -------------------------------------

    If you have any question and suggestions related blogger
    Please don't hesitates just sent email or leave comment
    Thanks to follow this tutorial
    Best regards
    help2blogging team
    Three Column Widget footer in Blogger- help2blogging logoAdd 3 Column Footer in your BlogSpot- Help2blogging smile logo