NAIROTECH

Showing posts with label Widgets. Show all posts

How to center any Blogger widget in Blogger

I am glad to bring you this topic today because i recently encountered a challenge based on how to center a widget in my New Entertainment BLOG .
After several trials with no good result, i got exhausted & confused on what step to take. Infact, because of several failed trials i had no choice but to delete the blog severally(3 times) and later succeeded in creating a better Blog. So, are you now convinced that i went through a lot to get this achieved? Ok, let's get down to real business now.

Center any Blogger widget

How To Align Your Blogger widget/gadget to the center:

The codes below can be used to align your custom or third party widgets to the center via Blogger Dashboard > Layout > Add Gadget > HTML/Java Scripts

Option one

<div align="center">Your Widget Code</div>

Option two

<center>Your Widget Code</center>

Option three

<p align="center">Your Widget Code</p>

Simply replace the text in blue with your widget code.

Add the CSS rule to all widgets

The CSS rule below will center all widgets on your blog. Go to your Blogger dashboard > Template Customise > Advanced > Add CSS and apply to blog.

.widget {text-align: center;}

The CSS rule below will center any one of your widgets. Replace the text in blue with the widget ID. Go to your Blogger dashboard > Template Customise > Advanced > Add CSS and apply to blog.

#Your-widget-ID {text-align: center;}

Friend have fun with Tutorial and don't forget to drop your comments and tell us what you think about this trick. Bye for now!

How To Add Like, Dislike and Share Button To Blogger

Unknown Blogger Tips, Widgets No comments

I am glad to bring to you a very wonderful and spicy widget which is called the "Rating widget'' Using "Thumbs Up/Thumbs Down" or "Like/Dislike" button on your blog will generate different reactions from people and it will also give you an idea of what your readers love to read on your blog and what they detest.
In this tutorial, we will be sharing how to add Like, Dislike and Share button to your blogger/blogspot blog. And the brain behind this hack is Tien Nguyen.

How To Add Like/Dislike Button To Blogger

If you don't have jQuery installed in your template before, then go to Template > Edit HTML > Use ctrl F to find <head> and paste the following code below it.

Now find <data:post.body/> and paste the following code below/after it.

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

 <div id='bi-tip-rating-2546'/>

 </b:if>

Search for </body> and insert the following code before/above it.

<!-- Like Or Dislike Button For Blogger By www.Nairotech.com Start -->

<style type="text/css">

#bi-tip-rating-2546 {

 margin: 0.5em 0;

 font-size: 12px!important;

}

#bi-tip-rating-2546 * {

 line-height: 1.3em!important;

}

#bi-tip-rating-2546 .button {

 float: left;

 width: 95px;

 overflow: hidden;

 border: 1px solid #C6C6C6;

 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);

 background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);

 background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);

 background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);

 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));

 background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);

 background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);

 -moz-border-radius: 2px;

 -webkit-border-radius: 2px;

 border-radius: 2px;

 margin: 0 0.5em 0 0;

 padding: 2px 0;

 filter: alpha(opacity=60);

 opacity: 0.6;

}

#bi-tip-rating-2546 .button:hover {

 filter: alpha(opacity=100);

 opacity: 1;

}

#bi-tip-rating-2546 .button iframe {

 height: 20px;

 margin: 1px 0 0 0;

 position: relative;

 z-index: 9999;

}

#bi-tip-rating-2546 .like.button iframe {

 margin-left: -104px;

}

#bi-tip-rating-2546 .dislike.button iframe {

 margin-left: -92px;

}

#bi-tip-rating-2546 .button div.icon {

 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkotK9Ryw-MvWFLPvETe1PCMMWTwX_TCq8hyqErhmqvJYdeRX0F074yHJLNgco91pBYyXesxgYQXg5il4ca_33UkGa_Lu9RM6m7Dv4QQLqoR6HywLK0EDKGPdiBaqQ4I3O6AHAv3JiyVE/s1600/ui-icons.png);

 background-repeat: no-repeat;

 height: 20px;

 width: 20px;

 position: absolute;

 z-index: 1;

}

#bi-tip-rating-2546 .like.button div.icon {

 background-position: -252px -26px;

}

#bi-tip-rating-2546 .dislike.button div.icon {

 background-position: -320px -138px;

}

#bi-tip-rating-2546 .like.button {

 width: 85px;

}

#bi-tip-rating-2546 .share.button {

 width: 50px;

 text-align: center;

 padding: 8px;

 color: black;

 font-weight: bold;

 font-size: 12px;

 line-height: 12px!important;

}

#bi-tip-rating-2546 .button div.label {

 position: absolute;

 margin: 4px 0 0 22px;

 color: black;

 font-size: 12px;

 z-index:1;

}

#bi-tip-rating-2546 .button:active {

 border-color: #C6C6C6;

 background-color: #E9E9E9;

 background-image: none;

 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);

 -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);

 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);

 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);

}

#bi-tip-rating-2546 .share-box {

 margin: 0.5em 0;

 display: none;

}

#bi-tip-rating-2546 input.share-url {

 display:block;

 -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);

 -ms-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);

 -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);

 box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);

 -webkit-border-radius: 2px;

 -moz-border-radius: 2px;

 border-radius: 2px;

 border: 1px solid #ccc;

 padding: 5px;

 width: 50%;

}

#bi-tip-rating-2546 input.share-url:hover {

 -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.15);

 -ms-box-shadow: inset 0px 1px 2px rgba(0,0,0,.15);

 -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .15);

 box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .15);

}

#bi-tip-rating-2546 .bi-share-button:hover {

 filter: alpha(opacity=90);

 opacity: 0.9;

}

#bi-tip-rating-2546 .bi-share-button {

 display: block;

 float: left;

 width: 32px;

 height: 32px;

 margin: 1% 3% 0 0;

 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdu7d6JzIhIBRDU297wYIGUKEAOuT-Xduik_Je6GYMmZowWM_APFYVPdUbtZtBMo6mpdyqR4x_uxQiI9Yy-Gl-LOY252I-A0HdqD8p5DYQYi9VU07RatI0TKY6FKDY74xuZCZ3V_igqt0/s1600/social-icons.png);

 background-repeat: no-repeat;

}

#bi-tip-rating-2546 .bi-share-facebook {background-position: 0 -652px;}

#bi-tip-rating-2546 .bi-share-twitter {background-position: 0 -1104px;}

#bi-tip-rating-2546 .bi-share-gplus {background-position: 0 -488px;}

#bi-tip-rating-2546 .bi-share-tumblr {background-position: 0 -380px;}

#bi-tip-rating-2546 .bi-share-pinterest {background-position: 0 0;}

#bi-tip-rating-2546 .bi-share-blogger {background-position: 0 -688px;}

#bi-tip-rating-2546 a.copyright-button:hover {

 text-decoration: underline;

}

#bi-tip-rating-2546 a.copyright-button {

 display: block;

 float: left;

 width: 1em;

 height: 1em;

 background: red;

 color: white;

 text-align: center;

 color: white;

 padding: 0.2em;

 font-size: 10px;

 font-weight: bold;

 margin: 3% 0 0 0;

}

</style>

<script type='text/javascript'>

//<![CDATA[

/* ############################################

Like / Dislike rating system plugin for Blogger by www.nairotech.com

############################################### */

//bi-tip-2546-easy-guide-02

var default_share_description = 'Love it';//default share description when your site has no one

var default_share_title = 'This is it';//default title share when your site has no one

var text_likes = 'Likes';//text use in "like" button

var text_dislikes = 'Dislikes';//text use in dislike button

var _0xaeb7=["\x32\x20\x6A\x3D\x5A\x2E\x31\x30\x2E\x65\x3B\x79\x3D\x6A\x2E\x31\x64\x28\x27\x23\x27\x29\x3B\x6B\x28\x79\x21\x3D\x2D\x31\x29\x7B\x6A\x3D\x6A\x2E\x31\x63\x28\x30\x2C\x79\x29\x7D\x79\x3D\x6A\x2E\x31\x64\x28\x27\x3F\x27\x29\x3B\x6B\x28\x79\x21\x3D\x2D\x31\x29\x7B\x6A\x3D\x6A\x2E\x31\x63\x28\x30\x2C\x79\x29\x7D\x32\x20\x54\x3D\x27\x27\x3B\x56\x28\x69\x3D\x30\x3B\x69\x3C\x32\x39\x3B\x69\x2B\x2B\x29\x7B\x54\x2B\x3D\x27\x25\x31\x4E\x25\x31\x4F\x27\x7D\x42\x20\x4B\x28\x31\x65\x29\x7B\x36\x3D\x27\x3C\x31\x6D\x20\x31\x50\x3D\x22\x30\x22\x20\x31\x51\x3D\x22\x31\x4D\x22\x20\x31\x4C\x3D\x22\x31\x48\x22\x20\x4E\x3D\x22\x71\x3A\x2F\x2F\x48\x2E\x45\x2E\x6C\x2F\x31\x69\x2D\x31\x49\x2D\x31\x4A\x2E\x67\x3F\x31\x4B\x3D\x25\x31\x52\x27\x2B\x54\x2B\x27\x25\x31\x53\x26\x31\x5A\x3D\x25\x32\x30\x23\x27\x2B\x6A\x2B\x31\x65\x2B\x27\x22\x3E\x3C\x5C\x2F\x31\x6D\x3E\x27\x3B\x32\x31\x20\x36\x7D\x32\x20\x31\x67\x3D\x27\x23\x38\x2D\x4C\x2D\x49\x2D\x4F\x27\x3B\x32\x20\x64\x3D\x24\x28\x27\x64\x27\x29\x2E\x44\x28\x29\x3B\x6B\x28\x28\x64\x3D\x3D\x27\x27\x29\x7C\x7C\x7A\x28\x64\x29\x3D\x3D\x27\x41\x27\x29\x7B\x64\x3D\x24\x28\x27\x32\x33\x27\x29\x2E\x44\x28\x29\x7D\x6B\x28\x28\x64\x3D\x3D\x27\x27\x29\x7C\x7C\x7A\x28\x64\x29\x3D\x3D\x27\x41\x27\x29\x7B\x64\x3D\x31\x59\x7D\x32\x20\x66\x3D\x24\x28\x27\x31\x73\x5B\x31\x72\x3D\x22\x66\x22\x5D\x27\x29\x2E\x43\x28\x27\x31\x6E\x27\x29\x3B\x6B\x28\x66\x3D\x3D\x27\x27\x7C\x7C\x7A\x28\x66\x29\x3D\x3D\x27\x41\x27\x29\x7B\x66\x3D\x24\x28\x27\x31\x73\x5B\x31\x72\x3D\x22\x31\x58\x22\x5D\x27\x29\x2E\x43\x28\x27\x31\x6E\x27\x29\x7D\x6B\x28\x66\x3D\x3D\x27\x27\x7C\x7C\x7A\x28\x66\x29\x3D\x3D\x27\x41\x27\x29\x7B\x66\x3D\x31\x54\x7D\x32\x20\x6D\x3D\x27\x27\x3B\x32\x20\x53\x3D\x30\x3B\x32\x20\x51\x3D\x30\x3B\x24\x28\x27\x31\x55\x27\x29\x2E\x31\x47\x28\x42\x28\x29\x7B\x77\x3D\x24\x28\x78\x29\x2E\x31\x71\x28\x29\x3B\x68\x3D\x24\x28\x78\x29\x2E\x31\x70\x28\x29\x3B\x6B\x28\x6D\x3D\x3D\x27\x27\x29\x7B\x6D\x3D\x3D\x24\x28\x78\x29\x2E\x43\x28\x27\x4E\x27\x29\x7D\x6B\x28\x77\x3E\x3D\x53\x26\x26\x68\x3E\x3D\x51\x29\x7B\x53\x3D\x77\x3B\x51\x3D\x68\x3B\x6D\x3D\x3D\x24\x28\x78\x29\x2E\x43\x28\x27\x4E\x27\x29\x7D\x7D\x29\x3B\x6B\x28\x6D\x3D\x3D\x27\x27\x7C\x7C\x7A\x28\x6D\x29\x3D\x3D\x27\x41\x27\x29\x7B\x6D\x3D\x27\x71\x3A\x2F\x2F\x27\x2B\x5A\x2E\x31\x30\x2E\x31\x57\x2B\x27\x2F\x32\x34\x2E\x31\x7A\x27\x7D\x32\x20\x6F\x3D\x47\x28\x6A\x29\x3B\x32\x20\x73\x3D\x47\x28\x64\x29\x3B\x32\x20\x31\x78\x3D\x47\x28\x66\x29\x3B\x32\x20\x50\x3D\x47\x28\x6D\x29\x3B\x32\x20\x59\x3D\x27\x71\x3A\x2F\x2F\x48\x2E\x58\x2E\x6C\x2F\x31\x74\x2F\x31\x74\x2E\x31\x41\x3F\x75\x3D\x27\x2B\x6F\x3B\x32\x20\x31\x32\x3D\x27\x31\x62\x3A\x2F\x2F\x57\x2E\x6C\x2F\x31\x79\x2F\x31\x42\x3F\x46\x3D\x27\x2B\x6F\x2B\x27\x26\x44\x3D\x27\x2B\x73\x3B\x32\x20\x31\x33\x3D\x27\x31\x62\x3A\x2F\x2F\x31\x43\x2E\x31\x45\x2E\x6C\x2F\x75\x2F\x30\x2F\x34\x3F\x46\x3D\x27\x2B\x6F\x3B\x32\x20\x31\x36\x3D\x27\x71\x3A\x2F\x2F\x48\x2E\x31\x37\x2E\x6C\x2F\x34\x3F\x76\x3D\x33\x26\x74\x3D\x27\x2B\x73\x2B\x27\x26\x75\x3D\x27\x2B\x6F\x3B\x32\x20\x31\x34\x3D\x27\x71\x3A\x2F\x2F\x31\x35\x2E\x6C\x2F\x31\x44\x2F\x31\x46\x2F\x31\x56\x2F\x3F\x46\x3D\x27\x2B\x6F\x2B\x27\x26\x64\x3D\x27\x2B\x73\x2B\x27\x26\x66\x3D\x27\x2B\x31\x78\x2B\x27\x26\x32\x65\x3D\x27\x2B\x50\x3B\x32\x20\x31\x38\x3D\x27\x71\x3A\x2F\x2F\x48\x2E\x45\x2E\x6C\x2F\x31\x69\x2D\x78\x2E\x67\x3F\x6E\x3D\x27\x2B\x73\x2B\x27\x26\x62\x3D\x25\x32\x45\x2B\x65\x25\x32\x46\x25\x32\x32\x27\x2B\x6F\x2B\x27\x25\x32\x32\x2B\x25\x31\x75\x27\x2B\x73\x2B\x27\x25\x32\x47\x25\x32\x44\x25\x31\x75\x26\x32\x43\x3D\x27\x2B\x50\x3B\x32\x20\x36\x3D\x27\x27\x3B\x36\x2B\x3D\x27\x3C\x35\x20\x37\x3D\x22\x52\x20\x63\x22\x3E\x3C\x35\x20\x37\x3D\x22\x31\x31\x22\x3E\x3C\x2F\x35\x3E\x3C\x35\x20\x37\x3D\x22\x31\x76\x22\x3E\x27\x2B\x32\x7A\x2B\x27\x3C\x2F\x35\x3E\x27\x2B\x4B\x28\x27\x32\x41\x27\x29\x2B\x27\x3C\x2F\x35\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x35\x20\x37\x3D\x22\x55\x20\x63\x22\x3E\x3C\x35\x20\x37\x3D\x22\x31\x31\x22\x3E\x3C\x2F\x35\x3E\x3C\x35\x20\x37\x3D\x22\x31\x76\x22\x3E\x27\x2B\x32\x49\x2B\x27\x3C\x2F\x35\x3E\x27\x2B\x4B\x28\x27\x32\x42\x27\x29\x2B\x27\x3C\x2F\x35\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x37\x3D\x22\x34\x20\x63\x22\x20\x65\x3D\x22\x23\x32\x48\x22\x3E\x32\x35\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x35\x20\x4A\x3D\x22\x31\x68\x3A\x31\x6A\x3B\x4D\x3A\x31\x6B\x3B\x22\x3E\x3C\x2F\x35\x3E\x3C\x35\x20\x37\x3D\x22\x34\x2D\x31\x61\x22\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x32\x4D\x20\x37\x3D\x22\x34\x2D\x46\x22\x20\x32\x4F\x3D\x22\x27\x2B\x6A\x2B\x27\x22\x2F\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x58\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x59\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x57\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x32\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x32\x50\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x33\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x31\x37\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x36\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x31\x35\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x34\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x45\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x38\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x32\x4E\x2D\x63\x22\x20\x65\x3D\x22\x71\x3A\x2F\x2F\x32\x4A\x2E\x6C\x2F\x32\x4B\x2F\x52\x2D\x32\x4C\x2D\x55\x2D\x49\x2D\x32\x78\x2D\x56\x2D\x45\x22\x20\x4A\x3D\x22\x32\x66\x3A\x20\x32\x79\x21\x39\x3B\x4D\x3A\x20\x32\x67\x21\x39\x3B\x31\x71\x3A\x20\x31\x6F\x21\x39\x3B\x31\x70\x3A\x20\x31\x6F\x21\x39\x3B\x32\x68\x3A\x20\x32\x69\x21\x39\x3B\x31\x77\x3A\x20\x31\x39\x21\x39\x3B\x44\x2D\x32\x64\x3A\x20\x32\x63\x21\x39\x3B\x31\x77\x3A\x20\x31\x39\x21\x39\x3B\x32\x37\x3A\x20\x30\x2E\x32\x36\x21\x39\x3B\x31\x6C\x2D\x32\x38\x3A\x20\x32\x61\x21\x39\x3B\x31\x6C\x2D\x32\x62\x3A\x20\x32\x6A\x21\x39\x3B\x32\x6B\x3A\x20\x33\x25\x20\x30\x20\x30\x20\x30\x3B\x32\x74\x3A\x20\x32\x73\x28\x31\x66\x3D\x32\x75\x29\x21\x39\x3B\x31\x66\x3A\x20\x31\x21\x39\x3B\x32\x76\x3A\x32\x77\x21\x39\x3B\x32\x72\x3A\x32\x71\x21\x39\x22\x20\x64\x3D\x22\x32\x6D\x20\x32\x6C\x20\x52\x20\x78\x3F\x22\x3E\x3F\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x35\x20\x4A\x3D\x22\x31\x68\x3A\x31\x6A\x3B\x4D\x3A\x31\x6B\x3B\x22\x3E\x3C\x2F\x35\x3E\x3C\x2F\x35\x3E\x27\x3B\x24\x28\x31\x67\x29\x2E\x36\x28\x36\x29\x3B\x24\x28\x27\x23\x38\x2D\x4C\x2D\x49\x2D\x4F\x20\x2E\x34\x2E\x63\x27\x29\x2E\x32\x6E\x28\x42\x28\x29\x7B\x24\x28\x27\x23\x38\x2D\x4C\x2D\x49\x2D\x4F\x20\x2E\x34\x2D\x31\x61\x27\x29\x2E\x32\x6F\x28\x27\x32\x70\x27\x2C\x42\x28\x29\x7B\x7D\x29\x7D\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x76\x61\x72\x7C\x7C\x73\x68\x61\x72\x65\x7C\x64\x69\x76\x7C\x68\x74\x6D\x6C\x7C\x63\x6C\x61\x73\x73\x7C\x62\x69\x7C\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x7C\x7C\x7C\x62\x75\x74\x74\x6F\x6E\x7C\x74\x69\x74\x6C\x65\x7C\x68\x72\x65\x66\x7C\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x7C\x7C\x7C\x7C\x6E\x61\x6B\x65\x5F\x75\x72\x6C\x7C\x69\x66\x7C\x63\x6F\x6D\x7C\x6D\x65\x64\x69\x61\x5F\x75\x72\x6C\x7C\x7C\x65\x6E\x63\x6F\x64\x65\x5F\x75\x72\x6C\x7C\x74\x61\x72\x67\x65\x74\x7C\x68\x74\x74\x70\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x65\x6E\x63\x6F\x64\x65\x5F\x74\x69\x74\x6C\x65\x7C\x7C\x7C\x7C\x7C\x74\x68\x69\x73\x7C\x69\x6E\x64\x65\x78\x7C\x74\x79\x70\x65\x6F\x66\x7C\x75\x6E\x64\x65\x66\x69\x6E\x65\x64\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x61\x74\x74\x72\x7C\x74\x65\x78\x74\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x75\x72\x6C\x7C\x65\x6E\x63\x6F\x64\x65\x55\x52\x49\x43\x6F\x6D\x70\x6F\x6E\x65\x6E\x74\x7C\x77\x77\x77\x7C\x72\x61\x74\x69\x6E\x67\x7C\x73\x74\x79\x6C\x65\x7C\x72\x61\x74\x65\x5F\x69\x74\x65\x6D\x5F\x68\x74\x6D\x6C\x7C\x74\x69\x70\x7C\x66\x6C\x6F\x61\x74\x7C\x73\x72\x63\x7C\x32\x35\x34\x36\x7C\x65\x6E\x63\x6F\x64\x65\x5F\x6D\x65\x64\x69\x61\x5F\x75\x72\x6C\x7C\x63\x68\x7C\x6C\x69\x6B\x65\x7C\x63\x77\x7C\x6C\x61\x62\x65\x6C\x5F\x73\x70\x61\x63\x65\x7C\x64\x69\x73\x6C\x69\x6B\x65\x7C\x66\x6F\x72\x7C\x74\x77\x69\x74\x74\x65\x72\x7C\x66\x61\x63\x65\x62\x6F\x6F\x6B\x7C\x73\x6C\x5F\x66\x61\x63\x65\x62\x6F\x6F\x6B\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x7C\x69\x63\x6F\x6E\x7C\x73\x6C\x5F\x74\x77\x69\x74\x74\x65\x72\x7C\x73\x6C\x5F\x67\x70\x6C\x75\x73\x7C\x73\x6C\x5F\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x7C\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x7C\x73\x6C\x5F\x74\x75\x6D\x62\x6C\x72\x7C\x74\x75\x6D\x62\x6C\x72\x7C\x73\x6C\x5F\x62\x6C\x6F\x67\x67\x65\x72\x7C\x77\x68\x69\x74\x65\x7C\x62\x6F\x78\x7C\x68\x74\x74\x70\x73\x7C\x73\x75\x62\x73\x74\x72\x69\x6E\x67\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x6D\x65\x74\x68\x6F\x64\x7C\x6F\x70\x61\x63\x69\x74\x79\x7C\x68\x6F\x6C\x64\x65\x72\x7C\x63\x6C\x65\x61\x72\x7C\x62\x6C\x6F\x67\x7C\x62\x6F\x74\x68\x7C\x6E\x6F\x6E\x65\x7C\x66\x6F\x6E\x74\x7C\x69\x66\x72\x61\x6D\x65\x7C\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x31\x65\x6D\x7C\x68\x65\x69\x67\x68\x74\x7C\x77\x69\x64\x74\x68\x7C\x6E\x61\x6D\x65\x7C\x6D\x65\x74\x61\x7C\x73\x68\x61\x72\x65\x72\x7C\x33\x45\x7C\x6C\x61\x62\x65\x6C\x7C\x63\x6F\x6C\x6F\x72\x7C\x65\x6E\x63\x6F\x64\x65\x5F\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x7C\x69\x6E\x74\x65\x6E\x74\x7C\x69\x63\x6F\x7C\x70\x68\x70\x7C\x74\x77\x65\x65\x74\x7C\x70\x6C\x75\x73\x7C\x70\x69\x6E\x7C\x67\x6F\x6F\x67\x6C\x65\x7C\x63\x72\x65\x61\x74\x65\x7C\x65\x61\x63\x68\x7C\x6E\x6F\x7C\x70\x6F\x73\x74\x7C\x72\x65\x61\x63\x74\x69\x6F\x6E\x73\x7C\x6F\x70\x74\x69\x6F\x6E\x73\x7C\x73\x63\x72\x6F\x6C\x6C\x69\x6E\x67\x7C\x74\x72\x75\x65\x7C\x32\x36\x6E\x62\x73\x70\x7C\x33\x42\x7C\x66\x72\x61\x6D\x65\x62\x6F\x72\x64\x65\x72\x7C\x61\x6C\x6C\x6F\x77\x74\x72\x61\x6E\x73\x70\x61\x72\x65\x6E\x63\x79\x7C\x35\x42\x61\x7C\x35\x44\x7C\x64\x65\x66\x61\x75\x6C\x74\x5F\x73\x68\x61\x72\x65\x5F\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x7C\x69\x6D\x67\x7C\x62\x6F\x6F\x6B\x6D\x61\x72\x6B\x6C\x65\x74\x7C\x68\x6F\x73\x74\x6E\x61\x6D\x65\x7C\x44\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x7C\x64\x65\x66\x61\x75\x6C\x74\x5F\x73\x68\x61\x72\x65\x5F\x74\x69\x74\x6C\x65\x7C\x74\x65\x78\x74\x43\x6F\x6C\x6F\x72\x7C\x32\x33\x30\x30\x30\x30\x30\x30\x7C\x72\x65\x74\x75\x72\x6E\x7C\x7C\x68\x31\x7C\x66\x61\x76\x69\x63\x6F\x6E\x7C\x53\x68\x61\x72\x65\x7C\x32\x65\x6D\x7C\x70\x61\x64\x64\x69\x6E\x67\x7C\x73\x69\x7A\x65\x7C\x7C\x31\x30\x70\x78\x7C\x77\x65\x69\x67\x68\x74\x7C\x63\x65\x6E\x74\x65\x72\x7C\x61\x6C\x69\x67\x6E\x7C\x6D\x65\x64\x69\x61\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x6C\x65\x66\x74\x7C\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x7C\x72\x65\x64\x7C\x62\x6F\x6C\x64\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x6F\x6E\x65\x7C\x57\x61\x6E\x74\x7C\x63\x6C\x69\x63\x6B\x7C\x74\x6F\x67\x67\x6C\x65\x7C\x66\x61\x73\x74\x7C\x73\x74\x61\x74\x69\x63\x7C\x70\x6F\x73\x69\x74\x69\x6F\x6E\x7C\x61\x6C\x70\x68\x61\x7C\x66\x69\x6C\x74\x65\x72\x7C\x31\x30\x30\x7C\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x7C\x76\x69\x73\x69\x62\x6C\x65\x7C\x73\x79\x73\x74\x65\x6D\x7C\x62\x6C\x6F\x63\x6B\x7C\x74\x65\x78\x74\x5F\x6C\x69\x6B\x65\x73\x7C\x30\x32\x30\x31\x7C\x30\x32\x30\x32\x7C\x65\x75\x72\x6C\x7C\x32\x46\x61\x7C\x33\x43\x61\x7C\x33\x44\x7C\x33\x43\x7C\x73\x68\x61\x72\x65\x74\x68\x69\x73\x7C\x74\x65\x78\x74\x5F\x64\x69\x73\x6C\x69\x6B\x65\x73\x7C\x62\x6C\x6F\x67\x67\x65\x72\x69\x74\x65\x6D\x73\x7C\x74\x69\x70\x73\x7C\x61\x6E\x64\x7C\x69\x6E\x70\x75\x74\x7C\x63\x6F\x70\x79\x72\x69\x67\x68\x74\x7C\x76\x61\x6C\x75\x65\x7C\x67\x70\x6C\x75\x73","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x9c61x1,_0x9c61x2,_0x9c61x3,_0x9c61x4,_0x9c61x5,_0x9c61x6){_0x9c61x5=function (_0x9c61x3){return (_0x9c61x3<_0x9c61x2?_0xaeb7[4]:_0x9c61x5(parseInt(_0x9c61x3/_0x9c61x2)))+((_0x9c61x3=_0x9c61x3%_0x9c61x2)>35?String[_0xaeb7[5]](_0x9c61x3+29):_0x9c61x3.toString(36));} ;if(!_0xaeb7[4][_0xaeb7[6]](/^/,String)){while(_0x9c61x3--){_0x9c61x6[_0x9c61x5(_0x9c61x3)]=_0x9c61x4[_0x9c61x3]||_0x9c61x5(_0x9c61x3);} ;_0x9c61x4=[function (_0x9c61x5){return _0x9c61x6[_0x9c61x5];} ];_0x9c61x5=function (){return _0xaeb7[7];} ;_0x9c61x3=1;} ;while(_0x9c61x3--){if(_0x9c61x4[_0x9c61x3]){_0x9c61x1=_0x9c61x1[_0xaeb7[6]]( new RegExp(_0xaeb7[8]+_0x9c61x5(_0x9c61x3)+_0xaeb7[8],_0xaeb7[9]),_0x9c61x4[_0x9c61x3]);} ;} ;return _0x9c61x1;} (_0xaeb7[0],62,176,_0xaeb7[3][_0xaeb7[2]](_0xaeb7[1]),0,{}));

//]]>

</script>

<!-- Like Or Dislike Button For Blogger By www.Nairotech.com End -->

Save your template and you are done!
Hope you love this blogger ThumbsUp, ThumbsDown and share buttons? Feel free to share it to all your networks using the share buttons below.

Add a customised email box below every posts

Unknown Blogger Tips, Widgets 2 comments

Adding an email subscription box is very important for every blog or site, without an email subscription box or link the site or blog is useless, if i may use the word; useless, adding it on your website will double your blog visits. If you truly want get more blog reader, i'll advise and suggest you get an email subscription widget on your blog because gets the attention of the reader,most especially when carefully placed and styled properly below your every blog post, it gets there attention more.

How can i add this to my Blog ?

One.) Quickly login to your blogger dashboard, Locate ''TEMPLATE''

TWO.) USE "Ctrl+F" to search for ]]></b:skin> .

Just before ]]></b:skin> , you can paste the codes below

#nrt-box{background: -webkit-gradient(linear, left top, left bottom, from(#00aeef), to(#00aeef));;border:1px
solid #00aeef;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #00aeef)}
#nrt-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#nrt-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#nrt-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #ff00ff, #ec008c) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#nrt-box .submit:hover{background: -moz-linear-gradient(center top , #9e005d, #9e005d) repeat scroll 0 0 transparent}
#nrt-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}

4. USE "Ctrl+F" to locate <data:post.body/> . Just after it, you can paste the below code:

<b:if cond='data:blog.pageType == "item"'>
<div id='nrt-box'><h1>Subscribe To Get FREE Tutorials</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=nairotech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='nairotech'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>

Now, you can Replace nairotech with yours.

SCREENSHOT OF THE SUBSCRIPTION BOX

If you liked this Tutorial on how to add a stylish email subscriotion box below post, then don't forget to comment and use the share buttons, you may as well like us on Facebook and Follow us On TWITTER

How To Add Social Media Icons to Blogger Header

Unknown Blogger Tips, Widgets No comments

I came up with this tutorial to help nairotech readers add various stylish social icons above their blogger headers just like ours, pictured below. This stylish widget will enable you add social media icons to your blog's header, icons like: Google+, Facebook. Twitter, Pinterest Icons to further beautiful the outlook of your blog and also help you gain more social media subscribers to your blog. Why i find this widget interesting is because it rotates immediately a mouse is been hovered on it. Guys, you need to check it out yourself enough of the long talking.

SEE THE SCREENSHOT:

Adding Social Media Icons to Blogger Header

Step One. Goto your Blogger dashboard, Select Template & just click on the Edit HTML button:

N/B: Backup Your Template

Step Two: Using CTRL + F, find ]]></b:skin> tag (screenshot two) & add the below code just above ]]></b:skin> tag:

/* Social icons for Blogger
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Screenshot Two:

Step Three: Now, search for the below line.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 4. And add this code just above it:

<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfUsMvEy-BToLuJSBTc0EPWJ4Qd7sTJz8qmgNEZeFI-SCohl3ZZqE_XV_SvGBvqwiuMb_M_46tRTFTpno1DpZdLsyHwEbxfJKYFuU22ICZOvpUwyXd6pJtu8dlauIv_1QocEzBZP01w7Q/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbAJX2xNM01M5TTKWPDQl2QXZ1tD72cKF45IXYS7R_3M43iD23xRaXvsk0812w_nXfGGOnn0pWJosRdrA4iDrLY49RxZ6Jk2LqWdrQ5MIq70_lOb6bPFOUCjdnma564NOY6884UtCi78/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX3ar-o2waBT2iuUgn9mAQOasVNK163q2XbXgz0ViFnuhxWdwbfD6BrTrBpTmZZdmYGfuAKYQ8_4foxFmBi2L7c0qmME7TnQJFddgaRmfiCdu-KpGS3fGX__HFhjUu2iZEvCcCEqccQqs/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://yourblogname.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOOSyVPbJ2Znnu4238bEEDWrL5k-j-W1JYDU1bdeoCcEFW0PPJyWTnpqom1H25h2BIqYYZAc80gu4svTCCnul6punDFtwN1GajyDL9Pj4B6HdV7UZk1up8BM-yS1cgi8F9RjvZOrjUnFI/s1600/RSS.png'/></a></li>

</ul></div>

Customization

- Change the red color with your usernames and id: the first is your Facebook username, the 2nd your Twitter, the 3rd you should change the XXXXX by your Google+ profile ID & while the fourth is the name of your blog.

- To change the icons, just replace the urls in blue with the ones of your images.
- You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want:

Step 5. You can now Save your Template to apply changes watch your blog shine bright.

NOTE: This stylish effect will not function on Older browsers because is done with CSS3

I have done my part by taking out time to post this lovely tutorial, so is now your turn to ask questions, make contributions and share this update to your friends using the below share icons. I'm so eager to hear from you and i promise to reply just immediately you contribute or drop your comment.

How To Add 3D Rotating Menu In Blogger | Nairotech

Unknown Blogger Tips, Widgets No comments

Today, we gon be dishing out a very lovely tutorial on Navigation (Horizontal) menu. After lots of discoveries we packaged this to suit every blogger template which doesn't need a Javascript or Javascript to function. It only needs Html and Css. You might also want to check our previous post on How To Edit Your Blog Easily With The New Blogger Template Editor

Steps To Add The Widget To Blogger

Head to your Blogger dashboard
Template >> Click Edit HTML
Then find ]]></b:skin> & paste the below code justbefore ]]></b:skin>

        /* 3d Flipping Menu By Nairotech.com */
        .block-menu {
            display: block;
            background: #000;
        }

        .block-menu li {
            display: inline-block;
        }

        .block-menu li a {
            color: #fff;
            display: block;
            text-decoration: none;
            font-family: 'Passion One',Arial,sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-transform: uppercase;
            overflow: visible;
            line-height: 20px;
            font-size: 24px;
            padding: 15px 10px;
        }

        /* animation domination */
        .three-d {
            -webkit-perspective: 200px;
            -moz-perspective: 200px;
            perspective: 200px;
            -webkit-transition: all .07s linear;
            -moz-transition: all .07s linear;
            transition: all .07s linear;
            position: relative;
        }

            .three-d:not(.active):hover {
                cursor: pointer;
            }

            .three-d:not(.active):hover .three-d-box,
            .three-d:not(.active):focus .three-d-box {
                -moz-transform: translateZ(-25px) rotateX(90deg);
                -webkit-transform: translateZ(-25px) rotateX(90deg);
                -o-transform: translateZ(-25px) rotateX(90deg);
                transform: translateZ(-25px) rotateX(90deg);
            }

        .three-d-box {
            -webkit-transition: all .5s ease-out;
            -moz-transition: all .5s ease-out;
            -ms-transition: all .5s ease-out;
            -o-transition: all .5s ease-out;
            transition: all .5s ease-out;
            -webkit-transform: translatez(-25px);
            -moz-transform: translatez(-25px);
            -o-transform: translatez(-25px);
            transform: translatez(-25px);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        .front {
            -webkit-transform: rotatex(0deg) translatez(25px);
            -moz-transform: rotatex(0deg) translatez(25px);
            -o-transform: rotatex(0deg) translatez(25px);
            transform: rotatex(0deg) translatez(25px);
        }

        .back {
            -webkit-transform: rotatex(-90deg) translatez(25px);
            -moz-transform: rotatex(-90deg) translatez(25px);
            -o-transform: rotatex(-90deg) translatez(25px);
            transform: rotatex(-90deg) translatez(25px);
            color: #FFE7C4;
        }

        .front, .back {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: black;
            padding: 15px 10px;
            color: white;
            pointer-events: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

Save Template

NOW,

Head straight to Layout in your Blogger Dashboard >> Select a Gadget (Blog header section)
Then Select JavaScript/HTML & paste the below code.

<ul class="block-menu">
<li><a href="#" class="three-d">
Home
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
<li><a href="#" class="three-d">
About<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
</a></li>
<li><a href="#" class="three-d">
Services
<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
</a></li>
<li><a href="#" class="three-d">
Blog
<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
</a></li>
<li><a href="#" class="three-d">
Create this
<span class="three-d-box"><span class="front">Create this</span><span class="back">Create this</span></span>
</a></li>
</ul>

Change the highlighted section above
Save.

Like our Facebook Fanpage Here: http://www.facebook.com/nairotech

How to center any Blogger widget in Blogger

How To Align Your Blogger widget/gadget to the center:

Add the CSS rule to all widgets

How To Add Like, Dislike and Share Button To Blogger

Add a customised email box below every posts

How can i add this to my Blog ?

How To Add Social Media Icons to Blogger Header

Adding Social Media Icons to Blogger Header

How To Add 3D Rotating Menu In Blogger | Nairotech

Popular Posts Today!

Categories

About Me

Recent Comments

My Friends Blog

Popular Series