How To Remove The Powered By Blogger Attribution From Your Blog

The Footer Design series will cover all the latest and old redesigns that can be done on the blogger Footer of any blogger blog.

This post contains the first tutorials which shows you how to simply remove the Powered By Blogger attribution at the end of your blog (you'd have to scroll down to see it.)

The Attribution gadget is the gadget in the footer that contains the "Powered by Blogger" icon below every blogger blog - and of course, this tutorial will be centered on how we can remove it.

 On a normal ground, it’s impossible to remove the Attribution gadget that shows the “Powered by Blogger” because it’s locked into your blog’s template.

To remove it, you'd have to unlock it first before you may be able to remove it.

To remove it, you’d have to unlock it first before you may be able to remove it.

Follow this simple tutorial below on how to easily remove the Attribution widget/Powered by Blogger from a blogger blog.

Firstly, login to your Dashboard; click on Template, then on Edit HTML

Secondly, click on the "Format Template" button (it’s has the same function just like the former “Expand widget box”)

Thirdly, click on the text area (shown above as the 1st stepto take above) and search for this code snippet below using CTRL F: 

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

 (Tip: press down CTRL and F at once on your keyboard to make the search box appear. Do this after clicking on the text area)

If you didn't see the code above in your blogger template, then search for Attribution1

I found my own code when I searched for Attribution1 only. The image below is showing me exactly where my own Attribution1is located. I marked it with an “X” as you can clearly see below (that’s exactly how your own would look like). 

Fourthly- Once you have found the code, proceed to replace or change the 'true' in  locked:‘true’ with false. This will be the new code after replacing the ‘true’ with ‘false’ -

From . . . 

  

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

To. . .

  

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

After doing that, you may now click on Save.

Basically, what we have just done is to free the widget from being locked; having done that, we can easily remove it from our blogger template widget.

Note: If the locked function in your attribution is like this as default -  

  

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

Just replace the red ‘false’ with ‘true’ and click on Save. After saving, search for the Attribution1again and change the ‘true’ back to ‘false’, then click onSave, it will surely work.

The Attribution gadget is now unlocked and can be easily removed at once.

To do that, head straight to Layout, scroll down, locate and Edit the Attribution Gadget.

Now, as you can see, there is a new button titled “Remove” (see picture below). Click on it to remove the Powered by Blogger attribution gadget. 

And that it!

Don't forget to subscribe t my tutorial and seo tips using the red gadget subscribe at the beginning of this blog.

In case you have any problem removing the attribution gadget carrying Powered by Blogger, please don't hesitate to tell me in the comment section below.

Thanks for reading, don't forget to share!

Read More

How to add border around posts in blogger

Adding borders around individual posts in your blog makes your blog look well arranged. It also makes your posts look better. Post borders can be easily added by editing blogger template. For adding post borders to your blog read our complete guide exclusively nairotech.com.. We just made the whole process easier and simpler

Nairotech.com

Method:

1.Go to blogger dashboard.
2.Select template. Please, do Backup your template

3.Click edit HTML and click proceed.
4.Search for the following code.

.post {
margin: 0 0 45px 0;
}

5.Now replace the above code with following one.

.post {
margin:0 0 45px 0;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border: 1px solid #e9e9e9;
}

6.Save the template and you are done.

MUST READ:  How To Add Yahoo Smileys To Blogger Threaded Comments

Note:

The line  border: 1px solid #e9e9e9 ;  specifies border color and its width.You can modify it according to your own choice.

Read More

How To Add Yahoo Smileys To Blogger Threaded Comments

Getting and posting a good blog post can be quite difficult but every determined Blogger will always succeed in concurring these two obstacles but, what lies now is getting people to comment on your post, oh yea that's where the real koko lies.  Most readers actually don't like commenting on blogs, especially if they found your blog so boring, but this hack aims to increase your chances of getting more comments on your blog, as readers will love to see the functionality of the smileys by commenting your blog which will definitely brings you more exposure.

This works with blogger threaded comment and on all blogger template. Now follow the simple steps below.

How To Add Yahoo Smileys To Blogger:

Go to your blogger dashboard
Click on Template > Edit HTML > Proceed (Mark/Tick Expand Widget Template)
Use crtl F to find ]]></b:skin> and paste the following code above it.

img.nairotech {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

Search for </body> and paste the following code above </body>

<script src='http://rbcode.googlecode.com/files/yahoosmileys.js' type='text/javascript'/>

Now search for this line <div class='post-footer-line post-footer-line-3'> 

Find the next </b:includable> and paste the following code above </b:includable>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='nairotech' id='ysmile' style='
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);border-radius: 3px;width:100%; padding:10px; height:65px;'>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
</div><a href="http://nairotech.com"></a></b:if>

SAVE YOUR TEMPLATE.

Read More

What is blogger and how you can create a blogger blog?

According to the Computer Desktop Encyclopedia, Blogger is:
"A Web site launched in 1999 from Pyra Labs, San Francisco, CA (www.blogger.com) that provides the tools for creating blogs (Weblogs). After users select a pre-designed template or create one with their look and feel, every posting entered on Blogger is published to the Blogger page on their Web site automatically. In early 2003, Blogger was acquired by Google. "


So, in simple terms, Blogger is a free site where you can make blogs (a kind of sites) where you can write about everything you want - from personal life to discussing about your political views, or relating your experience in a topic of interest.

How to create a blogger blog?

Go to Blogger.com homepage and click on the "Get Started" button

Enter your Gmail acount details (your gmail address and pasword) and then press "Sign in"

Enter the name you want to appear on your blog - check the "Agree to Terms and Conditions"

Click on the "New Blog" button

Enter your blog title and the address of your new blog, choose a template (Simple Template is more easily to customize, so i recommend you to choose this one) then click on "Create Blog!"

Your Blog has been created, you can start blogging.

Read Also:
             How To Edit Your Blog Easily With The New Blogger Template Editor
          How to Backup/Restore Template in the new blogger interface | NairotechBlog 

Read More

How To Add 3D Rotating Menu In Blogger | Nairotech

 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

Read More

How To Edit Your Blog Easily With The New Blogger Template Editor

The  Latest Blogger  Editor [Template] now have some changes that's quite easier  to use than it used to be.

The images below clearly shows  the template coding from the  numbered & colorful decorated lines displaying different coded snippets. The CSS, JavaScript, HTML -  b:if, include, and various displays.

From now onwards, editting your template will be stressfree and easier to locate anything easily this    applies to CSS too, that appears in  differentiating rules & selectors.

One useful help with this new and advanced template are number which displays just in front of every of template code,  we'll be able to easily locate & change mistakes of different types.

How To Use The New Blogger Template HTML Editor

If you are about to search or locate  a tag just in your HTML Editor, just  click inside your Editor & tap the search key on your PC and then enter what you'll like to locate anything in your Template Editor.

Now,  just tap the enter on your PC & it should take you directly to the tag you requested.

Maybe, you may like to be redirected to the point of tag that is for a  widget,  you can just click  "JUMP TO WIDGET" bar of your template  editor and select the html's tag using the list & you will be redirected to that section of code.

You can see from below how the CSS is shown in a folded format

Just Another lovely function is the ability to "Preview Template" without leaving the template page & we can go back with ease to modify our template to our taste.
Lastly, Format template can help re-order the code.



With this little Tip, we can now easy use the Newly Advanced Blogger Template with ease and no qualms at all. You can also check out; How to apply Google+ commenting system to Our Blog.

Enjoy!

Read More

How To Apply Google Plus Commenting System On Your Blog

Google+ just introduced a new commenting system which Google has introduced that integrates Google+ comments with Blogs. The new system of commenting is an added advantage to the default Blogger system of commenting, & it aids threaded comments too. It's appearance is better. Some of my friends requested via Mail that i post something on this system of commenting. I am putting up this compiled short post tutorial on how to easily install and use this new advanced commenting system.



                                  Moving to Google Plus comments:

To implement Google Plus comments for your Blog, first you have to connect your account to your Google+ account. Just follow these steps.

Login into your Blogger dashboard, and choose your blog you want to connect

Click on the Google+ button from the left sidebar of your Blog

Then, Click on the Get Started button on the top-left side to connect your blog account. This will not appear if your account is already merged.

Follow the simple instructions to connect your blog.

Once you are connected, you will get an option to Use Google+ comments on your blog.

Ticking this will enable the new Google Plus commenting system.

This will automatically change your Google Plus comments on for default templates.

But note it will likely not work for custom blogger templates. So, you will have to change your template code and change some lines as directed in the section below.

                   How To Display Google comments on Custom Blogger Templates

You can Revert to default option>>

Custom templates have configured customed widgets that usually override the default settings. And that is why this commenting system might not easily work with custom templates.

To achieve this, you can revert your Blog Widget to defaults in your template HTML editor via the following steps.

From inside your blog's dashboard, click on Template from the left sidebar.

Click on Edit HTML on your Blog

Then, Click on the Revert Widget templates to defaults button

It will reset other widgets to default as well.

Hope It Helps!

Read More

How to Backup/Restore Template in the new blogger interface | NairotechBlog

I made several mistakes as a Newbie when i started blogging, one of them is not always backing my  Template before editting.. It really cost me a lot in the sense that i kept creating countless blogs which i later abandoned. These Trait is pretty common with the Newbies On Blogger.
 So, I'm glad to share this crucial topic on Nairotech ...  Blogger recently Upgraded to New Blogger Interface. Backup/Restore Of Template is very important for Old/New Bloggers.

I'll show how to achieve this with this easy steps...                      

Step To Backup Template In New Blogger Upgraded Interface:

   Step 1: Visit Your Blogger Account.  Choose Template as seen below..

  Click the Button Backup/Restore [Left Top] .

After You've Clicked Backup/Restore Button, A Box Will Appear As Shown Below..

Now, Click on Download Full Template to download Template.  You can now Save It.
You Can Click on  Browse to Restore the downloaded Template.
Alas! You Are Done...
Hope This Helps ? Please, don't forget to share this info to your Pals.. Enjoy!  

Read More

How To Add Page Peel Effect To Blogger | NairoTechBlog

Page Peel Effect is a nice blogger widget used by professional Bloggers. The  Page Peel Widget is used to Display Ads, Page Peel has a tendency of catching the attention of Blog visitors on your blog and they will be made to click on your ad & your earnings may increase. Also, this widget can be used to boost your Blog/Web Subscribers. So, Let's Get To The Real Deal For The Day....

                   STEP BY STEP GUIDE:

Step 1; Add jQuery plugin  [ if your blog have a jquery plugin, please ignore this step]
Copy and Paste  the following code below  <head>

<scriptsrc='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Step 2 ; Go to Design->Edit HTML
Copy and paste the below  Above </head>

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: absolute;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVrXMNhd95oHfv5SChtMTabaSkyqLzLi_OvWlNAzG2IlWf9YfVF-c8TkOy5bavpGwj0Fe0gRew_t1Mg55owiI8Pnp9qNZhfGVRH6eOct6WXz_cR3FMwYRPF_w3wS_oUOijSKOcmKTvh-A/s1600/rss+nairotech.blogspot.com+blog+page+peel.png) no-repeat right top #fff;
}
</style><a href='http://nairotech.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqi8P1XNfTcWqIpGgracQdDYnloWE7wJjhJV4nlYhVj-Rsi2PqvyqAp_8QU1LwPQGdHbdNipQ_kzgH3mgQHclDZ5zKE_-LRjSGOM4hhlFrJlcYRCBI6Si_bma5stib6Vt0_W1TJ7aRq9w/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .back-img&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.back-img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

Step 3:  Copy the below code below <body>   

<div id='pageflip'>
<a href=' http://feeds.feedburner.com/Nairaharotech'><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqfiM5clcoKqqdiFDzsCe8WDQimeAxA1iQOm9spPxqiHvhQauLQoYhkb9KtAEgMiy__NA10RCH251jhRoT3i4r-buDJD01kEd2Dmesb_vhHIaG2hRLl3lSfz1TmNqrQSbhUKqYTeB6XvGm/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>

Replace the RED highlighted text with site image url or leave it as default
Replace the BLUE highlighted text with your feed URL Or Your Ad

Then, Save the Template.
Done!

Comment and Share If you have any queries.......

Read More

How To Place Rainbow Colors On Post Title LInk

Today, i'll show you how to Make your blog to look more catchy & colourful by changing the color of the Links when Mouse hovers on it.

   To Achieve this, just follow the few steps below;

• Sign In to you Blogger Account.
• Go to "Design"> Edit HTML
• Mark "Expand Widget Template"
• Tap  Click ctrl F
• Find <head> then type the code below immediately after <head>

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

Now, Save Your Template.....

Hope This Helps!

Read More

How To Add Recent Posts Widget With Thumbnails On Blogger

Recent posts widget is quite a lovely widget that can be used to beautify & add spice to your Blogger & Wordpress Site, these widget stands out from other Recent post widget because  it shows the date in which the post was published, no. of comments and read more link.
Let get to the real deal for Today......

Steps To Install Recent Post Widget On Your Blog

• Navigate your blogger dashboard
• Click on Layout > Add a Gadget > HTML/JavaScript
• Copy and paste the following code in the content box.

< style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://www.webaholic.co.in/other/recent-posts-widget-with-images.js'></script>
<script style='text/javascript'>
var numposts = 6;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 98;</script>
<scriptsrc='http://www.YOUR-BLOGGER-URL.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

You can alter the number of post to be displayed, by simply find var numposts = 6 and replace 6 with your desired number.

Change YOUR-BLOGGER-URL to your blog url

Now, Click on the Save button.

You Are Done!
Please, Share this with  friends and use our subscription links below.
Hope This Helps, Pals?

Read More

How To Merge Facebook Like Box And Subscription Box Below Blog Post

Having applied Facebook comment box and subscription box on Nairotech, but Facebook like box and subscription widget seems to be quite unique & stands out due to the combination of both Facebook Like Box & Rss Subscription Box which appears at the end of every post. Helps increase the number of Facebook likes and subscribers due to the special layout.

Add Facebook Like Box & Subscription Box

Go to your blogger dashboard
Click on Template > Edit HTML > Proceed (Mark Expand Widget Template)
Use ctrl F to find ]]></b:skin>  & paste the following code above ]]></b:skin>

#nt-likebox{
margin:10px 10px 0 0;
overflow:hidden;
text-align:center;
float:right;
max-width:250px;
min-width:250px;
min-height:250px
}
#nt-likebox h2{
font-size:25px;
font-style:italic;font-variant:small-caps
}
#nt-likebox h6{
font-size:1.1em;
font-family:"Myriad Pro",Helvetica Neue,Helvetica,Arial,sans-serif
}
#nt-likebox div.row{
text-align:center;
margin-bottom:10px
}
#nt-likebox img{
display:inline-block;
border:none !important;
}
#nt-likebox .email{
clear:none
}
#ntfblikebox{
margin:10px 10px 0 0;
text-align:left;
float:left;
overflow:hidden
}
.emailbutton{
background:#f7f8f9;
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;
-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888 !important;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
font-weight:bold;
text-decoration:none !important
}
.emailbutton:hover{
background:#f1f1f1;
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );text-decoration:none !important
}
.email{
clear:none
}
.email{
clear:both;
width:100%;
margin:10px 0
}
.emailform{
position:relative;
width:250px;
background:#fff;
margin:0 auto;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;border:1px solid #ddd
}
.emailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;
border:none;
background:none;
font-family:georgia;
font-style:italic;
font-size:14px;
color:#666
}
.emailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:-1px;
bottom:-1px;
display:block;
line-height:16px
}
.emailbutton{
padding:8px !important
}
.emailinput{
padding-right:70px !important;
width:170px !important
}
.emailform, .emailinput {
width: 245px !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
height:auto;
}

Now, search for <div class='post-footer-line post-footer-line-1'> and paste the following code
above/before it.

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='rbfblikebox'> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnairotech&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23e1e1e1&amp;stream=false&amp;header=false&amp;' style='border:none; overflow:hidden; width:250; height:250px;'/> </div> <div id='rb-likebox'> <h2>Do you Like this Article?</h2> <div class='row'> <div class='fb-like' data-href='https://www.facebook.com/nairotech' data-send='true' data-show-faces='false' data-width='450'/> </div> <div class='row'> <a href='http://feeds.feedburner.com/nairaharotech target='_blank' title='Suscribe to RSS feed'> <img alt='rss' class='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ5JZX5q-21O2tY2Nfmqrsw-BnzXLUBfHXgsXBEyHxZim57t6v3lNBeXoNAb4xyIJNboTTRPgOorKJB5QX7kK1FbVrpKrPYXWKyebJ8gz2jCT4yplRhy06kSUiO5vU-Jq1B8cLAy0BKCwt/s1600/rbrss.png'/></a> <a href='http://twitter.com/nairotechblog' target='_blank' title='Follow us on Twitter'> <img alt='twitter' class='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_BrZ_Jpzy1C0wKS3KbSJcR8P4CLqhQFnyrhKJcb6VVIlXR97c6ZlSuhYu0o_2WMma6mZP3U9ZVQbRxeYp5e7rBf7tQyKTwAi1lv1fq0-aK4MVQ-39Ame_eQrDK3mrii9nUHQijJiinHWJ/s1600/rbtwitter.png'/></a> <a href='http://www.facebook.com/nairotech' target='_blank' title='Become  A Fan on Facebook'> <img alt='facebook' class='middle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9OUjVs_300Jggj4PqvrOd4fEbXPIiMFK620JO-pLUemGSyxfKQ7TVfTU6sYXnXrtQLrzVWPepn3GswTjjw9_Yqg_C9qrwLCMJdsjx6Kew40q4bMi7K-R3lrDl-4Yw9reJ1kqxEyfenk71/s1600/rbfacebook.png'/></a> </div> <div class='row'> <h6>Get Subscribed To Free Email Updates!!</h6> </div> <div class='row'> <div class='email'> <form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Nairaharotech&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='Nairaharotech'/> <input name='loc' type='hidden' value='en_US'/> <input class='emailinput' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/> <input class='emailbutton' title='' type='submit' value='SignUp'/> </form> </div> </div> <div class='row'> <small>*Your email is safe with us!</small> </div> </div> </b:if>
 Change Nairotech with your facebook name

Change  Nairaharotech with your with your feedburner Id .

Change  Nairotechblog with your twitter username.

Now, Save your template and you are done.

Any contribution is welcome, and feel free to share this useful post using the share buttons.

Read More

How To Divide Blogger Header Into Two Sections

Many bloggers utilize the top position of their blogs mostly for the header element. That's because header is the first part that search engine will reach to your blog at the first time. But, in some cases, i always see blogs that split headers in two columns and deploy some advertisement banners in that area. Well, it's fine if you want to split header and inundate that area with anything, but you must be very careful in adding lots of elements or widgets on the header position, because it might burden Googlebot when crawling your blog.

Okay then, in this post, i would like to discuss about how to split header in 2 parts or 2 columns.

In order to begin this article, i want to tell you first that i'm currently using Minima as a testing template in this split header tutorial. So i strongly suggest you to pick Minima or Rounders as a basic template for testing if this split header tutorial might work for you or not. Okay, without further long introduction, here you go, Enjoy!

1. Login to your blogger account.
Now go to Blogger.com and start typing your username along with the password to log in to your Blogger account.

2. Go to Layout/Design.
In the Dashboard page, Go to Design/Layout on your blog. After pressing the Design/Layout button, you will be brought to the new page where in the top navigation, there are 3 main sub-tabs below the Design/Layout tab. Now click at the sub-tab called Page Element (which is already in the default position of Design/Layout tab, so actually, you don't need to do anything).


3. Check the header element of your current blog.
Now in the Page Element, you are given a full authority on customizing your blog layout. As you can see in the picture below, the header element is indicated on the top position of blog layout. Below the navigation bar (Page element, Edit HTML, Template Designer) and over the post element/article element (See the picture below).

4. Go to Edit HTML
Still in the Layout/Design tab, Now start editing your current blog template by pressing the sub-tab "Edit HTML" to go to the Edit HTML page

5. Find the CSS styling to split header in 2 parts
After landing to the Edit HTML page, by pressing Ctrl + F on your keyboard, you can now start finding the code that defines the header element of your blog. Now press Ctrl + F to enter the find mode (As you can see in the bottom position of your browser, when clicking Ctrl +F, you will be given a Search navigation bar):

/* Header
---------------------------------------------- */
#header-wrapper {
  width:760px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

6. Replace that code
Anyway, before doing any kind of customization, i strongly suggest you to save your current template just in case if later, you did something wrong with the template. Now click at the link Download Full Template.

Now block the whole CSS styling above (on number 5) with the mouse cursor and then replace those header CSS using the code below in order to split header in 2 parts:

/* Two Column Header Layout
=================================== */
#header-wrapper {
width:800px;
margin:0 auto 0px;
background:white;
height:190px;
}

#head-inner {
width:500px;
margin-left: auto;
margin-right: auto;
float:left;
background-position: left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#second_header{
width:300px;
float:left;
padding-top:10px;
}

7. Find the code that defines the HTML code for header
Ok, now proceed to the next step. Scroll down to the bottom of the HTML code and by pressing Ctrl+F, find the code below:

    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Title (Header)' type='Header'/>
</b:section>
    </div>

8. Replace the whole HTML code that defines the header element
Now by using your mouse cursor, block the whole code above and replace it with the code below:

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='second_header'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

9. Save the change
OK, Now you are done. Save the change by pressing the Save Template button. To see the result, go to Page Element again and now you can see that your blog header has been split in two header parts. 

Okay then, that's it for now about how to split header in two parts. If you have something to ask to me, just type your question on the comment section below and i'll try my best to give you the answer sooner.

Read More