Pro Helpers Blog

Via Facebook like button to your blog fans can easily with your Facebook page to your blog. As we know that social sharing is the most important for all bloggers increase traffic to your blog. Here I give a tutorial image without coding and it is totally the official. Let see how to add the blogger.

How To Add Official Facebook Like Button ?

Go to Facebook.com
Go to your page.
Click on edit page (See the image below)

3.Click on resources.

4.Click on Social Plugin.

5.Click on Like Button.

6.Put your Facebook Page URL Correctly.

7.Copy the Code properly....

8.Now go to your blog & Click on Design.

9.Clock on Add Gadget.

10. Now select HTML/Javascript.

11.Now paste the code.

You Done It ! Check out your blog.

If you likes my post then share it :)

How to Add Facebook Like Button to Blogger

Posted by Unknown No comments

How To Add Official Facebook Like Button ?

Go to Facebook.com
Go to your page.
Click on edit page (See the image below)

3.Click on resources.

4.Click on Social Plugin.

5.Click on Like Button.

6.Put your Facebook Page URL Correctly.

7.Copy the Code properly....

8.Now go to your blog & Click on Design.

9.Clock on Add Gadget.

10. Now select HTML/Javascript.

11.Now paste the code.

You Done It ! Check out your blog.

If you likes my post then share it :)

0 comments:

I Have Shared two jQuery Menus on ProBlogger so Far First one was Smooth jQuery Drop Down Menu Version 1 and Second one was Version 2. This time I Am Sharing an amazing CSS3 & jQuery Lavalamp menu and as mentioned in title it works with CSS3 And jQuery. You can use this menu in 6 colors by just Changing a word in the HTML Code.This Menu is designed by and i have bloggerized it to works perfectly with any blogger.

How To Add This Menu To Blogger

For Easy Understanding I am Dividing the toturial in three parts They are s below .

* Adding Scripts .

* Adding Styles .

* Adding The Menu .

1. Adding Scripts .

* Go To Blogger Dashboard . Template .

* Click On Edit HTML .

* Hit Proceed .

* Find Below Code In Your Template

</head>

Add Below Code just above it. If You Have Already Added a jQuery Library Your Blog Then Delete the Highlighted Code .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" typ

e="text/javascript"></script>

2 Adding Styles .

Now Find Below Code .

]]></b:skin>

Add Below CSS Code Immediately Before it .

/*LAVALAMP MENU BY http://www.helperblogger.com/ START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;
 
}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;
 
}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;
 
}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;
 
}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
 
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
 
}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*LAVALAMP MENU BY http://www.helperblogger.com/ END*/

. Now Save Your Template .

3. Adding The Menu .

Now Come To Page Layout .

* Now Come To Page Layout .

* Click Add a Gadget Below Header .

* Choose HTML/JavaScript .

* Copy And Past Below Code And Save It .

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Back to Article</a></li>
  <li><<a href="#">How it Works?</a></li>
 </ul>
 <div class="floatr"></div>
</div>

Replace # With The Links

Replace Home,about,Blog. etc with link text which you want to appear on the Menu .

If You Want To Change Bckground color of the menu then replace <div class="lavalamp dark"> with one of the code below .

<div class="lavalamp dark"?

Finally Save Your Widget And Your Done .

I Have Tried my Best To Keep this tutorial as easy as possible, if still you are getting any single problam then feel free Share it bellow via comments .

Fancy CSS3 & Jquery Lavalamp Menu For Blogger

Posted by Unknown No comments

How To Add This Menu To Blogger

For Easy Understanding I am Dividing the toturial in three parts They are s below .

* Adding Scripts .

* Adding Styles .

* Adding The Menu .

1. Adding Scripts .

* Go To Blogger Dashboard . Template .

* Click On Edit HTML .

* Hit Proceed .

* Find Below Code In Your Template

</head>

Add Below Code just above it. If You Have Already Added a jQuery Library Your Blog Then Delete the Highlighted Code .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" typ

e="text/javascript"></script>

2 Adding Styles .

Now Find Below Code .

]]></b:skin>

Add Below CSS Code Immediately Before it .

/*LAVALAMP MENU BY http://www.helperblogger.com/ START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;
 
}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;
 
}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;
 
}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;
 
}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
 
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
 
}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*LAVALAMP MENU BY http://www.helperblogger.com/ END*/

. Now Save Your Template .

3. Adding The Menu .

Now Come To Page Layout .

* Now Come To Page Layout .

* Click Add a Gadget Below Header .

* Choose HTML/JavaScript .

* Copy And Past Below Code And Save It .

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Back to Article</a></li>
  <li><<a href="#">How it Works?</a></li>
 </ul>
 <div class="floatr"></div>
</div>

Replace # With The Links

Replace Home,about,Blog. etc with link text which you want to appear on the Menu .

If You Want To Change Bckground color of the menu then replace <div class="lavalamp dark"> with one of the code below .

<div class="lavalamp dark"?

Finally Save Your Widget And Your Done .

I Have Tried my Best To Keep this tutorial as easy as possible, if still you are getting any single problam then feel free Share it bellow via comments .

0 comments:

Now Here is a wonDerfull Hack For displaying relate Posts Beneth each of your Blog Post, along with thumbnails. The Related article are Chosen from other posts in That same Categories/Lable/tag. With This Hack Many Of Your Readers Will Remain on your Site for Longer Periods of time When Thay See Related Posts Of Interest .

Steps Adding The Related Posts Widget To Blogger Blog.

Step 1. Go To Blogger Dashboard >> Template >> Edit HTML .

Step 2 . Check The " Expand Widgets Template " Box .

Step 3 . Search CTRL + F - For This Piece Of Code .

</head>

Steps 4 . Copy And Paste The Below Code Just Before/above </head> .

 <!--Related Posts with thumbnails Scripts and Styles Start-->

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

<style type='text/css'>

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}



#related-posts h2{

font-size: 18px;

letter-spacing: 2px;

font-weight: bold;

text-transform: none;

color: #5D5D5D;

font-family: Arial Narrow;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

border-right: 1px dotted #DDDDDD;

color:#5D5D5D;

}

#related-posts a:hover{

color:black;

background-color:#EDEDEF;

}

</style>

<script type='text/javascript'>

var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP3YljKflWgmjIFm6u0QmD9uuPIIT35MTMLhoBiebv6VY_pjtIDFr6njqVmTCF-SO1GGFSlSNnxhFqzahsgzXzZVJmpxGITHqjjSg8niENYmYcxnl8P95jJpq2r1NQJa6-CENiemg51Wnc/s1600/no_image.jpg&quot;;

var maxresults=5;

var splittercolor=&quot;#DDDDDD&quot;;

var relatedpoststitle=&quot;Related Posts&quot;;

</script>

<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Note !! To Change The Default Picturw, Replace The URL in Blue With Your Own .

For Displaying More Than 5 Posts, Replace 5 Value From :var maxresult=5;"

Remove the Code in Violet if You Want The Related Posts to Be Displayed in Home Page To .

Step 5 . Now Find The Following Code : .

Step 6 . And Just Above it, Copy And Paste The Below Code .

 <!-- Related Posts with Thumbnails Code Start-->

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

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + 
data:label.name + 
&quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</div><div style='clear:both'/>

<!-- remove --></b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a href='http://helplogger.blogspot.com'><img alt='Blogger 
Tricks' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiW0YrLq8B2qhXcI5SsF15aNTYse5Zxwd9-cW_Lfqj21-tUaIRnDsMr6WzqGJxo-PC6zwgyCqZjNtu75GIIPvrLcoJNCH1LecCYjWzxVVd3RVK2mRk_QtFKwsU5uWPJ6iwAp1wFHwrb1aI/s1600/best+blogger+tips.png'/></a>

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

<!-- Related Posts with Thumbnails Code End-->

Note !! Change the 6 Value From max-result=6 With The Number of posts You Want to be displayed .

If You Want The Related Posts To be Displayed On Homepage Too , remove The Code in Violet .

Step 7 . Save The Template .

How To Add Related Posts Widget To Blogger With Thumbnails

Posted by Unknown No comments

Steps Adding The Related Posts Widget To Blogger Blog.

Step 1. Go To Blogger Dashboard >> Template >> Edit HTML .

Step 2 . Check The " Expand Widgets Template " Box .

Step 3 . Search CTRL + F - For This Piece Of Code .

</head>

Steps 4 . Copy And Paste The Below Code Just Before/above </head> .

 <!--Related Posts with thumbnails Scripts and Styles Start-->

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

<style type='text/css'>

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}



#related-posts h2{

font-size: 18px;

letter-spacing: 2px;

font-weight: bold;

text-transform: none;

color: #5D5D5D;

font-family: Arial Narrow;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

border-right: 1px dotted #DDDDDD;

color:#5D5D5D;

}

#related-posts a:hover{

color:black;

background-color:#EDEDEF;

}

</style>

<script type='text/javascript'>

var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP3YljKflWgmjIFm6u0QmD9uuPIIT35MTMLhoBiebv6VY_pjtIDFr6njqVmTCF-SO1GGFSlSNnxhFqzahsgzXzZVJmpxGITHqjjSg8niENYmYcxnl8P95jJpq2r1NQJa6-CENiemg51Wnc/s1600/no_image.jpg&quot;;

var maxresults=5;

var splittercolor=&quot;#DDDDDD&quot;;

var relatedpoststitle=&quot;Related Posts&quot;;

</script>

<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Note !! To Change The Default Picturw, Replace The URL in Blue With Your Own .

For Displaying More Than 5 Posts, Replace 5 Value From :var maxresult=5;"

Remove the Code in Violet if You Want The Related Posts to Be Displayed in Home Page To .

Step 5 . Now Find The Following Code : .

Step 6 . And Just Above it, Copy And Paste The Below Code .

 <!-- Related Posts with Thumbnails Code Start-->

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

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + 
data:label.name + 
&quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</div><div style='clear:both'/>

<!-- remove --></b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a href='http://helplogger.blogspot.com'><img alt='Blogger 
Tricks' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiW0YrLq8B2qhXcI5SsF15aNTYse5Zxwd9-cW_Lfqj21-tUaIRnDsMr6WzqGJxo-PC6zwgyCqZjNtu75GIIPvrLcoJNCH1LecCYjWzxVVd3RVK2mRk_QtFKwsU5uWPJ6iwAp1wFHwrb1aI/s1600/best+blogger+tips.png'/></a>

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

<!-- Related Posts with Thumbnails Code End-->

Note !! Change the 6 Value From max-result=6 With The Number of posts You Want to be displayed .

If You Want The Related Posts To be Displayed On Homepage Too , remove The Code in Violet .

Step 7 . Save The Template .

Pro Helpers Blog

What's New Here?

How to Add Facebook Like Button to Blogger

0 comments:

Fancy CSS3 & Jquery Lavalamp Menu For Blogger

0 comments:

How To Add Related Posts Widget To Blogger With Thumbnails

0 comments:

Popular Posts

Blog Archives

Cetagory

Tags

Trafic Counter