Add twitter Follow and Facebook like Button Below every blog Post in Blogger/BlogSpot

My today"s tutorial is simple, clear and professional all the same.How to Add twitter Follow and Facebook like Button Below every blog Post in Blogger/BlogSpot.

How to Install This Plugins in your Blogger/BlogSpot Blog?

The steps are made really simple. Follow these,

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now Expand Widget Templates
• Find the code shown below using [ctrl+F]

<data:post.body/>

Alternative way

<div class='post-footer-line post-footer-line-1'>

• Now Paste the Code shown below just before/above it

<div style="margin:5px 0px 10px 0px; padding:10px; width:590px;float:none; ">
<div style="float:left; width:272px; border-right:1px solid #ddd;">
<iframe allowtransparency="true" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FNoblenaijablog&amp;width=292&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false&amp;height=62" style="border:none; overflow:hidden; width:292px; height:62px;" frameborder="0" scrolling="no"></iframe>
</div>
<div style="margin:15px 15px 0px 0px; padding:0px; float:right; width:260px;">
<iframe title="Twitter Follow Button" style="width: 266px; height: 32px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=Noblenaijablog&amp;show_count=true&amp;show_screen_name=true&amp;size=l" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div> </div>

• Save the widget and you are done!

Replace Noblenaijablog with your Facebook username and Noblenaijablog with your twitter username
Finally save your template and Visit your blogs to see it working just perfectly.

If you have any problem installing this, let me know using the comment box below

Continue reading →

New Numbering/numbered page navigation widget for blogger

Apart from using related post widget. it is also advisable using Number page navigation which i will teaching on my tutorial today.This page navigation is liked my many bloggers but also other way around because of the SEO tips. You can also click here to learn more about how to start affiliate marketing in Nigeria

How to add this page navigation widget to your blogger blog?

Adding the CSS Cods:

• Go to Blogger Dashboard >> Template >> Edit HTML.
• Find ]]></b:skin> tag in your blogger template HTML editor
• And then copy the below code and paste before the ]]></b:skin>

.showpagePoint {
    text-decoration: none;
    background: linear-gradient(to bottom, rgb(242, 242, 242) 0%, rgb(229, 229, 229) 100%) repeat scroll 0% 0% transparent;
    color: rgb(41, 41, 41);
    border: 1px solid rgb(227, 227, 227);
    display: inline-block;
    margin-right: 3px;
    padding: 7px 10px;
    font-weight: bold;
}
.showpageOf {
    color: rgb(255, 255, 255);
    font-weight: bold;
    background: none repeat scroll 0% 0% rgb(224, 102, 102);
    padding: 8px;
    margin: 8px;
}
.showpageNum a:hover  {
color: white;
}
.showpageNum a:link {
    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(242, 242, 242) 100%) repeat scroll 0% 0% transparent;
    color: rgb(51, 51, 51);
    margin-right: 3px;
    display: inline-block;
    padding: 7px 10px;
    border: 1px solid rgb(227, 227, 227);
}
.showpageNum a:hover {
    text-decoration: none;
    background: linear-gradient(to bottom, rgb(242, 242, 242) 0%, rgb(229, 229, 229) 100%) repeat scroll 0% 0% transparent;
    color: rgb(41, 41, 41);
    border: 1px solid rgb(227, 227, 227);
    display: inline-block;
    margin-right: 3px;
    padding: 7px 10px;
}

• Now save your template. 

Adding the JavaScript Codes:

This is the second and last step. Now you wont to add JavaScript codes in your template.

• Again Go to Blogger Dashboard >> Template >> Edit HTML.
• Now find </body> tag in your blogger template HTML editor
• and then Add below code just above </body> tag

    <script type='text/javascript'>
      var postperpage=5;
      var numshowpage=5;
      var upPageWord =&#39;&lt;&lt;&#39;;
      var downPageWord =&#39;&gt;&gt;&#39;;
      var urlactivepage=location.href;
      var home_page=&quot;/&quot;;
    </script>
<script type='text/javascript'>//<![CDATA[
  eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1y\'>1z "+f+\' 1A \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1B"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ... \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1C">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\'...\'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}6 E=y.1D("E");6 18=y.1E("1F-1G");1h(6 p=0;p<E.P;p++){E[p].1j=5}4(E&&E.P>0){5=\'\'}4(18){18.1j=5}}C 1a(Q){6 R=Q.R;6 1k=K(R.1H$1I.$t,10);1g(1k)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1l("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=1J}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1l(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1m(\'1n\')[0];6 z=y.1o(\'m\');z.1p=\'1q/1r\';z.1s("T",B+"U/V/W?1t-1u="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1v(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1m(\'1n\')[0];6 z=y.1o(\'m\');z.1p=\'1q/1r\';z.1s("T",B+"U/V/W/-/"+n+"?1t-1u="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1v(z)}C 1b(Q){1c=Q.R.1K[0];6 1w=1c.1x.$t.F(0,19)+1c.1x.$t.F(1L,1M);6 1d=1N(1w);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}1O.9=1e}',62,113,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|getElementsByName|getElementById|blog|pager|openSearch|totalResults|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))
//]]></script>

• Finally Save your template and you’re done! :)

 

 If you have any problem installing this widget, then let me know using the comment box below

Continue reading →

Jquery And CSS Vertical Dropdown Menu For Blogger

Today i will be sharing you cute Jquery and CSS Vertical Dropdown Menu for blogger, without wasting much time..let us start the tutorial..his menu is very easy to use for your BlogSpot blog. I make this post with two simple steps for adding this menu to your blogger blog. First one is adding Jquery plugin inside your blogger templates <head></head> section and other one is adding  main codes of menu to your blog sidebar section by using a html JavaScript widget.

Note: This tutorial is 100% working, so you have no option to do this at a very first time and start seeing awesome CSS drop down on your blog.

Step 1: Adding jquery plugin to your blogger blog template.

These are the simple steps to add Jquery plugim to your blogger blog, incase you have done this process before, no need of doing it again

• Go to your blogger blog dashboard>> template Tab>> Edit Html
• Search for <head> tag inside blogger html editor
• And then Add below line of code Before </head> tag  

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Step 2:  Adding Dropdown Menu Widget on your blogger blog.

• Go to Blogger Dashboard >> Locate your Blog >> Layout
• Select an HTML/JavaScript Widget.
• Copy bellows code and Paste inside the widget.

<style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 300px;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 3px;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#cssmenu > ul > li {
  margin: 0 0 2px 0;
}
#cssmenu > ul > li:last-child {
  margin: 0;
}
#cssmenu > ul > li > a {
  font-size: 15px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  background: #565656;
  background: -moz-linear-gradient(#565656 0%, #323232 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
  background: -webkit-linear-gradient(#565656 0%, #323232 100%);
  background: linear-gradient(#565656 0%, #323232 100%);
  border: 1px solid #000;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#cssmenu > ul > li > a > span {
  display: block;
  border: 1px solid #666666;
  padding: 6px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-weight: bold;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  background: #97be10;
  background: -moz-linear-gradient(#97be10 0%, #79980d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97be10), color-stop(100%, #79980d));
  background: -webkit-linear-gradient(#97be10 0%, #79980d 100%);
  background: linear-gradient(#97be10 0%, #79980d 100%);
  color: #fff;
  text-shadow: 0 1px 1px #000;
  border: 1px solid #79980d;
}
#cssmenu > ul > li.active > a span {
  border: 1px solid #97be10;
}
#cssmenu > ul > li.has-sub > a span {
  background: url(https://lh5.googleusercontent.com/-21rx6aIUzic/UqSoMviGxWI/AAAAAAAACPw/_Qq7GteXckM/h120/icon_plus.png) 98% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
  background: url(https://lh6.googleusercontent.com/-1qb7a6ft13M/UqSoMYncT1I/AAAAAAAACPs/ZFr7yxcDvv4/h120/icon_minus.png
) 98% center no-repeat;
}
/* Sub menu */
#cssmenu ul ul {
  padding: 5px 12px;
  display: none;
}
#cssmenu ul ul li {
  padding: 3px 0;
}
#cssmenu ul ul a {
  display: block;
  color: #595959;
  font-size: 13px;
  font-weight: bold;
}
#cssmenu ul ul a:hover {
  color: #79980d;
}
</style>
<div id='cssmenu'>
<ul>
   <li><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;">&nbsp;</div>
<script type='text/javascript'>//<![CDATA[
$( document ).ready(function() {
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active');   
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;   
  }       
});
});
//]]></script>

Save the gadget and you are done! 

Customizations:

• Replace all the blue highlighted  #  tag with you site links.
• Replace all the teal highlighted text with your menus text that you wont to show.
• If you need to change the plus icon of the menu then replace green highlighted link with your new icon link.
• and if you need to change the minus icon of the menu then replace red highlighted link with your new icon link.
• if you need to increase of decrees the menu width then replace the purple colored css code (width: 300px;).

If you have any query/ problem doing this, let me know using the comment box below

 

Continue reading →

Top 3 Blog Directories to Submit your Blog in 2014

In my recent search, i found out the top best 3 directories to submit your blog in 2014.This post is strictly for better engagement with other bloggers.We all need traffic to our site in one way or the other, despite using the social buttons on our blog, submitting your site to directories can also make a great improvement.

Why the need of Directories
For you to be able to get the important of submitting your blog to these directories, i listed the top best reasons below;

1. By joining bloggers networking sites, you will be able to find other people blogging on same niche.
2. Your blog will be listed in their blog directory.
3. You will also get new ideas and trends in blogging.
4. To get more exposure to your blog and building strong readership.
5. To drive quality traffic to your blog.
6. You will get backlinks from high PR sites.
7. Latest articles from your blog will be automatically fetched through RSS feeds. This will increase exposure to new articles you publish.

Here come the top 3 directories to submit your blog;

There are hundreds of blogging network websites that are online. You can join as many sites as you like but here I came up with the top 3 blog submission directories in 2014. All these blog networks have good reputation online and serving bloggers since many years. You can find blogs on any topic you like just by browsing their directories.

1.Bloggers

The 1st popular blogging network is none other than bloggers. It is gaining much popularity among bloggers and most active blog directory these days. You can claim ownership of your blog at bloggers just by following simple steps.
Try to get more followers and connect with other famous bloggers through this network. Add a bloggers badge to your blog as a widget which will help your readers to find your blog on bloggers.

2.Technorati

Technorati is the most famous blog directory containing millions of blogs. It was established in 2002 and now their Page Rank is 8. After adding your blog to their directory they will verify it. You will also get dofollow backlinks to your blog. Technorati helps me to get a lot of targeted traffic to my blogs.
Click here to join Technorati now.

Technorati Blog Directory

3.Networked Blogs

Networked blogs is a PR 7 blog directory where you can find many quality blogs on different niches. It can be used to publish your posts directly to social networks like Facebook and Twitter. You can use Facebook to register blog at networked blogs. You will be required to place a small widget for verification of authorship of your blog. After claiming authorship, your blog will be listed in their directory. You will get a dedicated page for your blog containing a list of latest posts you publish at your blog.

Continue reading →