Pro Helpers Blog

Facebook Fan page are a greate way to promote your blog or website and facebook like box is widely used sicial plugin from facebook developers. This facebook like box will help your visitors to become regular just by clicking like button. So that this box will increase number of your facebook fans. To get this widget follow procedure.

* Simple Facebook Like Box

Let Me Explain How To Add Simple Facebook Like Box

1. Login To Blogger Account.

2. Click Layout > Add A Gadget.

3. Select HTML/ Javascript > Past The Following Code In Content Box

Raplace My Facebook Page Url With Your Page Url Change Width And Height According To Your Template.

4. Now Save And Your Done

How To Add Facebook Like Box For Blogger

Posted by Unknown No comments

* Simple Facebook Like Box

Let Me Explain How To Add Simple Facebook Like Box

1. Login To Blogger Account.

2. Click Layout > Add A Gadget.

3. Select HTML/ Javascript > Past The Following Code In Content Box

Raplace My Facebook Page Url With Your Page Url Change Width And Height According To Your Template.

4. Now Save And Your Done

0 comments:

Popular Post widget in blogger is the best widget which helps to represent the whole blog in better way to the visitors. It Shows the Most Popular Post of a blog to the readers so that they can also read them. This amazing gadget in blogger sidebar helps to highlight the trending post in front of readers. Except these benefits there is also a limitation of this widget posts gadget is not so attractive and attention grabbing becouse of its designing and dull looks. But don't wory we can override its stylesheet and change its colours and front according to our need so that it matches best with our blog template

Add Popular Posts Widget To Blogger Blog

* Go To Blogger > Layout.

* Click On Add a Gadget link And Choose HTML/JavaScript From The Gadget List

* Now Add This Code

realcombiz

* Just Change This Red Line Your Own Blog Link Add

* Save The Widget .

* Now Visit Your Blog and check this fancy popular post plugin in your blog sidebar

* All Done

How To Add Circle Stylish Popular Post Widget

Posted by Unknown No comments

realcombiz

* Just Change This Red Line Your Own Blog Link Add

* Save The Widget .

* Now Visit Your Blog and check this fancy popular post plugin in your blog sidebar

* All Done

0 comments:

Frinds Now i share a new beatifull popular post widget for your blogger. its very special and attrective Some time people watched a content more than other in our blog Thats our popular post blogger find that page from count of page preview You cas also add that widget from add gadget option in layout . But it is not a stylish widget, we can modify it now. If you want to add to your blogger. Follow this post

* Now Go To Blogger Dashboard

* Go To Layout Option

* Click On Add Gadget

* Add Popular Post Gadget From Given list

* Select "Display up to 9 Post" and uncheck image thumbnail and snippet.

* Now Save The Widget

* Then Go To Template Option

* Click On Edit Html

*Find ( CTRL + F ) ]]></b:skin> tag.

* Copy and past below CSS Code above ]]></b:skin> tag

PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Save on Your Template Click On Preview

How to add Colored Stylish Popular Post Widget For Blogger

Posted by Unknown No comments

* Now Go To Blogger Dashboard

* Go To Layout Option

* Click On Add Gadget

* Add Popular Post Gadget From Given list

* Select "Display up to 9 Post" and uncheck image thumbnail and snippet.

* Now Save The Widget

* Then Go To Template Option

* Click On Edit Html

*Find ( CTRL + F ) ]]></b:skin> tag.

* Copy and past below CSS Code above ]]></b:skin> tag

Save on Your Template Click On Preview

0 comments:

The Attribution gadget is the gadget in the footer that says " Powered By Blogger " If you have tried to remove this then you may noticed this gadget is locked into you blog . To unlock it. Follows the next Step :

Step 1. Log in to your Dashboard, Go to Template > Edit Html.

Step 2. Check the "Expand Widget Templates" box

Step 3. Search ( CTRL +F ) for this code :

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

Step 4. Replace true With false

Step 5. Click on the Save Templates Button

Now attribution gadget is unlocked and it can be removed just go to :

* Layout and click on the edit link from attribution gadget :

* Click on the Remove Button - as you can see in the Screenshot Below :

That Was All !!

How To Remove Blogger Attribution Gadget

Posted by Unknown 2 comments

Step 1. Log in to your Dashboard, Go to Template > Edit Html.

Step 2. Check the "Expand Widget Templates" box

* Click on the Remove Button - as you can see in the Screenshot Below :

That Was All !!

2 comments:

This Widget released by Sharethis team was made as a valentine gift from them The heart bookmarking gadget has a cool slide out effect that makes the heart icin split each time you mouse hover it displaying several bookmarking buttons like Facebook Twitter, Pinterest, Linkdin, Stumble Upon Email and many more bookmarking choice. This gadget comes with a fixed position and stays in the corner of the page, so it will grab readers attension and make them share your post easily.

I'm Sure You Wil Love It After Seeing Demo Of This Widget.

View Demo

Adding The Open Heart Bookmarking Gadget To Blogger.

Step 1. Go to Your Blogger Dashboard select Template and click the Edit Html Button.

.....Select the "Expand Widget Templates" Box it is recommended to make a backup first

Step 2. Find The Following Tag (Ctrl + F):

</head>

Step 3. Past above/before the </head> tag the following code :

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

realcombiz

Step 4: Now Find ( CTRL + F ) this tag :

</body>

Step 5. Past above/before </body> tag... the following code :

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://www.helplogger.blogspot.com/">Blogger Gadgets</a>

realcombiz

How To Move The Position Of The Gadget.

To Move the position of this widget from the button right corner of your blog to any location you want change the percentage of the red code from Step 5

Step 6. Now Preview and Save Template.

Done !!!

How To Add Slide Open Heart Bookmarking Gadget For Blogger

Posted by Unknown No comments

View Demo

Adding The Open Heart Bookmarking Gadget To Blogger.

Step 1. Go to Your Blogger Dashboard select Template and click the Edit Html Button.

.....Select the "Expand Widget Templates" Box it is recommended to make a backup first

Step 2. Find The Following Tag (Ctrl + F):

</head>

Step 3. Past above/before the </head> tag the following code :

realcombiz

Step 4: Now Find ( CTRL + F ) this tag :

</body>

Step 5. Past above/before </body> tag... the following code :

realcombiz

0 comments:

Today Im Sharing beutifull CSS3 labels style for blogger. This label hack can be easily applied to your labels by just adding some CSS code in to your Blog. This labels and Created by Stylifyyourblog and i have reshared them on helper Blogger, Now lets see how to apply this labels hack.

How To Apply This Label Hack ?

* Important - Before applying this labels hack set your labels style to Cloud.

* You can also apply this hack by using Below one Click installer .

* Apply this hack manually by adding below CSS Code Just Above/Before ]]></b:skin> tag in your template,

.label-size {

    float: left;

    margin: 0 0 7px 20px;

    position: relative;

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 0.75em;

    font-weight: bold;

    text-decoration: none;

    color: #996633;

    text-shadow: 0px 1px 0px rgba(255,255,255,.4);

    padding: 0.417em 0.417em 0.417em 0.917em;

    border-top: 1px solid #d99d38;

    border-right: 1px solid #d99d38;

    border-bottom: 1px solid #d99d38;

    -webkit-border-radius: 0 0.25em 0.25em 0;

    -moz-border-radius: 0 0.25em 0.25em 0;

    border-radius: 0 0.25em 0.25em 0;

    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

    -webkit-box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    -moz-box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    z-index: 1;

}

.label-size:before {

    content: '';

    width: 1.30em;

    height: 1.39em;

    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');

    position: absolute;

    left: -0.69em;

    top: .2em;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    border-left: 1px solid #d99d38;

    border-bottom: 1px solid #d99d38;

    -webkit-border-radius: 0 0 0 0.25em;

    -moz-border-radius: 0 0 0 0.25em;

    border-radius: 0 0 0 0.25em;

    z-index: 1;

}

.label-size:after {

    content: '';

    width: 0.5em;

    height: 0.5em;

    background: #fff;

    -webkit-border-radius: 4.167em;

    -moz-border-radius: 4.167em;

    border-radius: 4.167em;

    border: 1px solid #d99d38;

    -webkit-box-shadow: 0 1px 0 #faeaba;

    -moz-box-shadow: 0 1px 0 #faeaba;

    box-shadow: 0 1px 0 #faeaba;

    position: absolute;

    top: 0.667em;

    left: -0.083em;

    z-index: 9999;

}

#Label1 {

    height: 210px;

}

.label-size:hover {

    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

    border-color: #e1b160;

}

.label-size:hover:before {

    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

realcombiz

Finally Save your template and your Done .

If Your Getting Any problam then feel free to ask it to me :D

How To Customize Blogger Labels With CSS3

Posted by Unknown No comments

realcombiz

Finally Save your template and your Done .

If Your Getting Any problam then feel free to ask it to me :D

Pro Helpers Blog

What's New Here?

How To Add Facebook Like Box For Blogger

0 comments:

How To Add Circle Stylish Popular Post Widget

0 comments:

How to add Colored Stylish Popular Post Widget For Blogger

0 comments:

How To Remove Blogger Attribution Gadget

2 comments:

How To Add Slide Open Heart Bookmarking Gadget For Blogger

0 comments:

How To Customize Blogger Labels With CSS3

0 comments:

Popular Posts

Blog Archives

Cetagory

Tags

Trafic Counter