Mr Blogger Tricks

How to add Facebook Like box in Blogger

2015-10-02T04:27:00.002-07:00

A Facebook Fan Box or Like Box or Page Plugin is a great plugin that allows blog visitors to get updated with their Facebook accounts, without leaving your blog. Once subscribing (by pressing the like button), visitors will receive your most recent blog updates on their Facebook page. Facebook has updated their page plugin from Like box to Page Plugin.

Create a Facebook Page Plugin.

1. Find out you Facebook Fan Page URL by visiting you Facebook Fan Page and copy the url from the address bar.

2. Then Visit https://developers.facebook.com/docs/plugins/page-plugin

3. Paste your Facebook Fan Page URL in the url field.

4. Once you have satisfied with a look. Click "Get Code".

5. Now you will see this window popup.

Adding Facebook Page Plugin to Blogger

6. Login to you Blogger Account.

7. Go to Blogger Dashboard > Template > Edit HTML

8. Now find <body> and Paste that code which the popup gave you. Image Below

9. Now Click Save Template.

10. After that Go to Layout > Add Widget. (where you want to add Facebook Page Plugin)

11. Now Select HTML/Javascript.

12. Now Copy the second code.

13. Then Paste it into HTML/Javascript Widget.

14. Hit Save.

15. You're done.

We hope this tutorial will help you in adding facebook page plugin to your blog. If you have still getting any problem while adding facebook page plugin you can share your problem in comments we will back to your comment as soon as possible.

Was it helpful? If it was then praise our work by sharing this article with your other friends on Facebook, Twitter, Google+ and RSS.

How To Add Next & Previous Numbered Pagination in Blogger

2015-09-29T06:01:00.002-07:00

Blogger platform provides its users with a traditional set of blog elements. like Older / Newer or Previous / Next navigation to browse through the index. You have seen modern, stylish, cool numbered paged navigation on several blogs on the web, mostly on WordPress blog sites.

We have the steps into two.
1. Installing Script
2. Styling

Installing Next & Previous Pagination Script

1. Go to Blogger Dashboard > Template > Edit HTML

2. Now find </body> tag and Paste the below code above it.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var postperpage=5;
    var numshowpage=2;
    var upPageWord ='« Previous Page';
    var downPageWord ='Next Page »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
<script type='text/javascript'>
  /*<![CDATA[*/
    var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
  /*]]>*/
</script>
</b:if>
</b:if>

3. Click Save Template.
4. Now you're done.

Styling Next & Previous Pagination

1. Go to Blogger Dashboard > Template > Edit HTML

2. Now search for </b:skin> tag and Paste the below code above it.

Style 1

#blog-pager {overflow: visible}
.showpageOf {display:none}
span.showpagePoint {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .6em .8em;
    margin: 0 .2em;
    border: 1px solid #e6e6e6;
    border-radius: 0.25em;
    background-color: #64a281;
    border-color: #64a281;
    color: #ffffff;
    pointer-events: none;
}
span.showpageNum, span.showpage {
    margin: 0 .2em;
}
.showpageNum a, .showpage a {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .6em .8em;
    border: 1px solid #e6e6e6;
    border-radius: 0.25em;
    color: #2E4057;
    text-decoration: none;
}

Style 2

#blog-pager {overflow: visible}
.showpageOf {display:none}
span.showpagePoint {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .6em .8em;
    margin: 0 .2em;
    border: 1px solid #e6e6e6;
    border-radius: 0.25em;
    background-color: #7064A2;
    border-color: #7064A2;
    color: #ffffff;
    pointer-events: none;
}
span.showpageNum, span.showpage {
    margin: 0 .2em;
}
.showpageNum a, .showpage a {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .6em .8em;
    border: 1px solid #e6e6e6;
    border-radius: 0.25em;
    color: #2E4057;
    text-decoration: none;
}

Style 3

#blog-pager {overflow: visible}
.showpageOf {display:none}
span.showpagePoint {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .6em .8em;
    margin: 0 .2em;
    border: 1px solid #e6e6e6;
    border-radius: 0.25em;
    background-color: #A26464;
    border-color: #A26464;
    color: #ffffff;
    pointer-events: none;
}
span.showpageNum, span.showpage {
    margin: 0 .2em;
}
.showpageNum a, .showpage a {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .6em .8em;
    border: 1px solid #e6e6e6;
    border-radius: 0.25em;
    color: #2E4057;
    text-decoration: none;
}

3. Click Save Template.

Custom Search Gadget for Blogger

2015-09-26T00:46:00.000-07:00

In this post, we learn how to add customized CSS3 search box to blogger. With a custom search box in your blog, your readers can easily search for and find anything on your blog. For blogs that have hundreds of posts, it might be very difficult for readers to find a particular post without the search box, even if they go through the archive. Also, the analytics from searches performed on your blog lets you know what your readers really want. This help your readers find what they need on your blog quickly by adding one of the following styles below for the customized search box gadget for blogger.

How to add Custom Search Gadget to Blogger

From your Blogger Dashboard
Go to Layout
Now Add a Gadget and select HTML/Javascript.
Copy any of the codes below code you like and paste it into the text field.

<style>
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivKSRDNpKcSdHrBpwsBFq7UuDwXenIob8Kt-z5aYcWN0KGAxKcInDwI8T5V4tVD7JyUS0ysBty7oFbg87zJV2R56EoNeFlD7gxJe4FJuSOuQOOqukN7W7snuvXtzHmnmta8YO-FzzG7_cV/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYfyW4xEdqtx-SL0tWYczxLsJ7D2kLYLG2eKAYh7piwQK2DuC2W9X_EJRM9V7TikPTtPzTtr8D5O79tFcu_GAwfIS3JRsmpkkQI2x7seNVaH0pgPTeoJuXo3qS1lrEwsBv6SCE71RdwgSa/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>

<form action="/search" autocomplete="off" id="searchbox" method="get">
<input name="q" placeholder="Enter keywords here..." size="15" type="text" />
<input id="button-submit" type="submit" value=" " />
</form>

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtUwZcshg25i2mk6B-a28RIevZjF5QWEF78gLel77K0SCPm2FQ1NP-Rp6u54ivXiiCTq-47fwtUMZIcUX_LRqduH2qx50Xq2qp0dTzA4B3vyK8R8tN8WFulN2vElYR3dooIxid3f0rMVC/s1600/searchbar.png) no-repeat;
    width: 208px;
    height: 29px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0px 0px 20px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNkJU_qaAqhuTfWXkCcpGPUGsGy9NILtulRBVnBtzaVh1c-BBTdjQQ-xEzTQwQkKWhRjyHwJhwwH_I4iRKNw0KJEsoYleZjNV-hVQZTJ-kGxfLajcAjuP4nGOrC_vc2wgQ9Tiok1xBhcSB/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvIcX4nVUPeuz5XuxBuP7GbtnSq2tyOY4Dwgdl59_Eg6T9DJ4rzgnFf6AzJsV_7lDh9boBVrgAtMWbHKY6GRgSC0wZvx9ZeYcNflT5qE3Chldla7JO2Lpt_Fga5GLc6eFbp9Ow4FUVVCSR/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvIcX4nVUPeuz5XuxBuP7GbtnSq2tyOY4Dwgdl59_Eg6T9DJ4rzgnFf6AzJsV_7lDh9boBVrgAtMWbHKY6GRgSC0wZvx9ZeYcNflT5qE3Chldla7JO2Lpt_Fga5GLc6eFbp9Ow4FUVVCSR/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form action="/search" autocomplete="off" id="searchbox" method="get">
<input name="q" placeholder="search..." size="15" type="text" />
    <input id="button-submit" type="submit" value="" />
</form>

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-upw4EZhNhmA2ZV3HK2oSs2RiSyQE7Lk1ThrPY-JfjxWQq3U0rsPL3tePqPMKZ85lVlXP8bW_d0GOevTmvZ_eOerezWkpZWSM9Wlf54NkVtKSitktJWkbSFsc7Q4fXWb5AsA6ww_zEAxL/s1600/search-box.png) no-repeat;
    height: 27px;
    width: 202px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    margin: 0px 0px 0px 12px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 77%;
    color: #828282;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7xnftzHxKlvl_5pgmZYP5d7QBJNskxQNVgMxoBdi0xIJnN4LhvSmY5HGfuaVM7qQ7LptgtoO6w7mssn1B4GUr-1Bbv2udHzTJUVsr-zcyKw6HGt5P6uepb0ip6x2mbZjNMR3mA8BKWfvX/s1600/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjviXqiJew6hdPhj-dx475sSnv4Eedesk0gInedCR4-tJO-RtfMpoqyO3DMod8-58gOek6pNhMmYGDgnxYIi62qlt3iR_jCvVhE0nO_KgVF31uTX-V_fkeDL_Zk4TfSVD_WYZ1IrAOV-San/s1600/search-button-hover.png) no-repeat;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form action="/search" autocomplete="off" id="searchbox" method="get">
<input name="q" placeholder="search..." size="15" type="text" />
<input id="button-submit" type="submit" value="" />
</form>

 <style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbeUxBoJziC5LEwQWGZ8ZVyFYTwajGeL_nEK7K17Cs0_SNNMr0JPESaRR9UDi9wTiFWJtZHFTBbuRAKzo4gsSZ04160nh4bIFgL2XrWEpihF1Iwvd_dM3Y52fBZBV_joiRyZDj-rPecAS_/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkMNK6RWSac-A7hv4nbRQhKD0S5JTobaBzMyf_jf_gNbwzOiXC8A8wS0Dw_-1-AE_iLjCm1Qa2dvG53VxHLf1y7UaF4dieh3nUaHhK1FrG57qwCMPBl6Es1hjNMZmE_7msy3ec-YH_Qpl_/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamTxYzlsU6bzI79CIVUNNHaTaXG5TsFjqtaL4m5GnznaWo-tcuwTbh2ccy_we8A4WvpnHETHdPxcGRr0fnEdlSatQUWzbecDi-YRTS07lYTfJSDTpW7yHfkGx62KVgKEf2f2AhsHlXvo9/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamTxYzlsU6bzI79CIVUNNHaTaXG5TsFjqtaL4m5GnznaWo-tcuwTbh2ccy_we8A4WvpnHETHdPxcGRr0fnEdlSatQUWzbecDi-YRTS07lYTfJSDTpW7yHfkGx62KVgKEf2f2AhsHlXvo9/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form action="/search" autocomplete="off" id="searchbox" method="get">
<input class="textarea" name="q" placeholder="Search here..." size="15" type="text" />
    <input id="button-submit" type="submit" value="" />
</form>

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwRXB8PuMM5c65y3BroxOXteD8ogJxZXI6p39F-0B8LWv23RbYeXRkne2PNa3OK8okjg5EDKq1WE7Ooz3NL5yHnyGi5_GUu6O1Zfr_5J4mZ-A0cDI0MlBAMBHoArc5SNgkYdz87y6MIJNe/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNyJanM0jQApisZNvXLrq7rhEapoLmHeJtqd8h0As3aEdghfT_J2JM9EoGrPSGFM381gxD7pQZfTG9B0tfQZSfJc1__kwfo39xbSYCE7IGGN828ZdRR8ovm6V8tkxB9rcj-e523uHJvOJ5/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPTYRF2ODYSHIxviQ-IW_VypzB2wU7dL-gUk8TekdMnVB87ox5J-KYnSmn5q1mbpIgYmTupfOMIVpzsztJy4OlScJN2oNF6Jna0A6KfOnXmFzvXC5seuf6EymQeeyx-bmviyTIBnaKt9Mr/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Add Google +1 Button to Blogger

2015-09-22T03:10:00.000-07:00

If you are blogger. Have you choose a Blogger Platform? If yes, you don't need to search for adding Google +1 button to your blog. You can add plus one button by going to Layout > Add a Gadget > +1 Button inside your Blogger dashboard. You may also add +1 button to each post inside your Blogger by going to Layout > Blog Posts > Edit > Show share buttons > Save. You may also add Official Google+ badge to Blogger with your 'Add Gadget' option. If you have a code snippet for a thing, you can add it to your Blogger source code to display the thing anywhere on your blog. So we will use Google+ button snippet to display it anywhere on our blog.

Adding a Google +1 Button to Your Blogger in Each Post.

1. Go to Blogger Dashboard > Select a Blog > Template > Edit HTML. Now Find </head> and paste the following code above it.

<script src="https://apis.google.com/js/platform.js" async defer></script>

2. Choose any one of the following code. You may see the example below.

Code	Result
<div class="g-plusone"></div>
<div class="g-plusone" data-size="small"></div>
<div class="g-plusone" data-size="medium"></div>
<div class="g-plusone" data-size="tall"></div>

3. Once you have chosen your code. Go to Blogger Dashboard > Select a Blog > Template > Edit HTML. Now Find <data:post.body/>. Skip the First, because it is for mobile. Once you find the <data:post.body/> second time. Paste the code above it.
4. Thats it. You are done.

We hope this tutorial will help you in adding google +1 button to your blogger post. If you have still getting any problem while adding google +1 button you can share your problem in comments we will back to your comment as soon as possible.

Was it helpful? If it was then praise our work by sharing this article with your other friends on Facebook, Twitter, Google+ and RSS.

How to create a Facebook App ID

2015-09-20T12:25:00.002-07:00

In this tutorial we will teach you that how to create and find Facebook App ID. The Facebook application ID will be unique for each Website or Blog. In this post, we will also connect our Facebook fan page, and the blog with a unique Facebook application ID. Lets start creating Facebook App ID. Follow the steps to create facebook id.

How to Create Facebook App ID

1. Visit Facebook Developer: https://developers.facebook.com and sign in with your Facebook Account.

2. Click My App > Add a New App

3. Choose a Platform. I select Advanced Setup

4. Enter Name, Namespace(Optional) and Choose a Catergory.

Now your App is Created but it is not live.

5. Now Click on Setting tab and fill your information.

6. Then Click Status & Review tab which is just below the Setting tab. And Push No to Yes

7. Then come back to your Dashboard. And you will see your App ID and App Secret.

8. You are done.

We hope this tutorial will help you in creating Facebook App ID. If you have still getting any problem while creating facebook App Id you can share your problem in comments we will back to your comment as soon as possible.

Was it helpful? If it was then praise our work by sharing this article with your other friends on Facebook, Twitter, Google+ and RSS.

How to Divide/Break Blogger Post

2015-09-20T06:40:00.003-07:00

You may probably have seen in many wordpress sites that they divide a long post into different pages. While seeing your large post and slowly loading, there is a possibility to lose your visitors. So today we will learn how to divide/break blogger post.

Live Demo

Installing Divide/Break Script to your Blogger

1. Login to your Blogger Account.

2. Choose a Blog and Open it.

3. Now Click Template > Edit HTML. Which is on the Left Sidebar

4. Search <body>. Now Copy the following code and paste it below to <body> tag.

<style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.post-pagination .button_1, .post-pagination .button_2, .post-pagination .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 5px 10px;
    color:#f4655f;
}
.post-pagination  .button_1:hover, .post-pagination .button_2:hover, .post-pagination .button_3:hover {
    background: #f4655f;
    color: #fff;
    text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>

How to Divide/Break Post into Blogger

1. Go to Posts > Edit or New Post

2. Click on the Edit HTML tab.

3. Paste the following below code.

<div class="content_1">
Add content here
</div>

<div class="content_2" style="display: none;">
Add content here
</div>

<div class="content_3" style="display: none;">
Add content here
</div>

<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

4. Now replace Add a content here with your text and images.

5. You are done.

Note

Make sure you have the jquery plugin in your blog, if not then add the below code just below the code <head> in your template

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Simple Mag Blogger Template

2015-09-19T16:01:00.001-07:00

Live Demo

Simple Mag - Blogger Template is a template that can be used for magazine purpose. It is basically designed for Blogger Purposes.
Simple Mag - Blogger Template is a fast loading, two columns, three columns, customs menus, seo optimized, and much more...

Features

Clean and Simple Design.
SEO Optimized.
Fast Loading Template.
Three Columns.
Two Columns.
Date Timer.
Powerful Admin Panel
Easy Menu Setup.

Download

We serve resources to subscribers only. If you are a current subscriber then kindly post your Email ID in the Comments Box, else if you are new a MBT reader then kindly submit your Email ID below to receive all such useful resources for free,

After submitting your Email ID, kindly check your inbox and activate the feeds, then submit the same Email ID in the comments box below to receive the download copy instantly.

How to Upload Blogger Template

Go to Blogger Dashboard > Locate your Blog if you have more then one blog.
Click on More Options Drop Down and choose Template
Click on the Backup/Restore button on Top Right Corner
Click on Download Full Template button to backup your Old template for safety
Click the Browse button and locate Simple Mag - blogger template.
Click on the Upload Button. And you are Done!

Customization

Go to Blogger Dashboard.
Go to Template > Edit HTML Button.

Term and Conditions

You can Use this Template for Personal and Commercial Use.
You must keep the Footer links Intact. (Please Respect our hard work)
you can Re-Distribute but you must give us the credits and you must keep the footer links with out editing!
If you like the Template then Please Feel free to Share it!

How to Upload or Install Blogger Template

2015-09-19T14:49:00.001-07:00

Blogger is a most famous CMS platform powered by Google among bloggers. It is a free for all publishers. You don't need to spend money on purchasing web hosting for this platform. All you need is to sign up to blogger.com. Blogger's blog hosting platform allows you to access open-source blogs, import blog templates or simply use a standard template. Unlike many free blog services, Blogger lets you change the HTML code in your templates to customize your blog. Additionally, since Blogger is so preferred, countless free open-source templates are available from other sites, so your template choices are endless.

How to Upload or Install Blogger Template

First of All Download new Blogger Template to your Computer. Make sure it is in .xml format. If the file is in .zip or .rar format then make sure you Extract that file. Because Blogger only support .xml file. Follow the steps below to upload your first blogger template.

1. Login to your Blogger Account.

2. Choose your Blog and Open it.

3. Now Click Template which is on the left sidebar.

4. Then Click Backup / Restore Button which is on the top left corner.

5. Then a new "Backup / Restore" window will appear. Click on Choose File Button.

6. Browse your .xml template file and click open.

7. Now finally Click Upload.

You are done.

We hope this tutorial will help you in uploading Blogger templates. If you have still getting any problem in uploading Blogger templates you can share your problem in comments we will back to your comment as soon as possible.

Was it helpful? If it was then praise our work by sharing this article with your other friends on Facebook, Twitter, Google+ and RSS.

How to make a Sticky Post in Blogger

2015-09-18T16:23:00.000-07:00

Blogger is going marvelous, Have you want any post to stick it on top of the Homepage? It could be anything a giveaway, list of discount coupons freebies and etc. Today in this article, you will learn how you can stick your post on homepage in Blogger.

So, What we will do? We will do is to make the post future date method. Follow the following steps to Stick your post on homepage.

1. Sign in to your Blogger Account and select a blog.
2. Now, Write any post and publish it which you want to stick on home page.

3. After that. Edit your published post.

4. Click on Publish On from the right sidebar. And then select enter your date and time for your post.

5. Done.

Consclusion

So, this was the way to stick a post on homepage of your blogger blog. We are sure it would have been helpful for many of our users. If you have any questions to ask related to this article then lend your queries in the comment box.

Was it helpful? If it was then praise our work by sharing this article with your other friends on Facebook, Twitter, Google+ and RSS.

Top 5 Social Sharing Services for Bloggers

2015-09-18T00:23:00.000-07:00

This is our first post and we share the list of top Social Sharing Buttons. Best way to get traffic on your website is social media and this is done through social sharing buttons on your site. The problem, is that many social sharing options exist, their features vary. Some offer fewer sharing options, some only work on WordPress, and some require more technical expertise to install and configure.

Here is a list of top social sharing services that We recommend.

1. Addthis

AddThis is a free way to boost traffic back to your site by making it easier for visitors to share your content. Addthis work on most any sites, not only wordpress. Button can be place in several areas where the admin wants. It is offering over 350 social services.

2. Sharethis

The ShareThis button is an all-in-one widget that lets people share any content on the Web with friends via e-mail, AIM, or text message. It is not limited to any site. Any site can embed their share buttons.

ShareThis also comes with a Shortener URL Shar.es. It also include the capability for both static and floating share widgets, either vertical or horizontal.

3. Shareaholic

Shareaholic is also the alternative of Addthis and Sharethis. It is also the one of the popular service. Shareaholic serves over 300, 000 websites. It is available for among all websites, this also has a wordpress plugin.

Shareaholic offers three different button styles: Classic, Sexy, and Sassy. The latter two are designed specifically with mobile devices in mind and, to add an element of interactivity, the “Sexy” version buttons animate when a reader mouses over them.

4. SumoMe

SumoMe provides free tools you need to grow your WordPress site and other sites. This will make your site easy for your readers to share your articles and optimize with analytics. SumoMe provides many places to add your share buttons.

It also offers other tools which blogger needs, Like, List Builder, Sharing, Heat Map, Smart Bar and many others resource that you need and other blogger are using.

5. Sharexy

Sharexy gives users the capability to customize the placement either at the top or bottom of the post, as well. Users can choose from over 20 social networks to share with, and sharing via email is also included.
Like the other, Sharexy can be used on any type of site. A WordPress plugin is also available. It offers both static and floating sharing widgets.

Conclusion

So, this is the top social sharing platform which we recommended. Most of the blogger don't know the importance of social sharing. Do not ignore social sharing. It is one more way to increase site traffic, reach, and exposure within social networks.

If you are thinking that some other top social sharing platforms which are not mention, so you can mention them in comment

Feedburner Recent Posts Widget For Blogger

2015-09-17T16:01:00.000-07:00

You mostly have seen recent post widget in most of the bloggers. This widgets are the way of increasing traffic on your website or blog. This widget make look your blog more professional.

So today we will show you how you can add recent post widget in your blogger. Another advantage is this take little time to load then other conventional recent posts widgets. If you use Feedburner recent post widget then, 50% of the load time will be shared by FeedBurner.

Feed Burner Recent Post Widget

As you know feed burner is one of the popular service that provide rss feed of blogs. Once you have added your blog it provides many widgets like: headlines, subscription forms you can see on our sidebar. Today we discuss about Recent Post Widget of Feed Burner that how you can add it to your blog. Here it is what the Recent Post widget look like.

These are steps you should follow,

1. Sign in to your Feed Burner Account.

2. Now Click on Publicize Tab as shown below.

3. Then Click on Buzzboost button which is on the left side of the page.

4. Now on that page, you can see number of checkboxes, you can check on number of boxes which you wanted to show on your widget. After that click on Activate Button

5. Now copy the code they provided as shown below.

6. Now login to your blogger account and go to Layout.

7. Click Add a Gadget and choose HTML/Javascript.

8. Now Paste that code which we copy above.

9. Then, You have done.

Subscribe to us via RSS

If you get any problem to get this widget onto your blog. You can comment us below.