URDU - HINDI BLOGGER

In this tutorial I’ll show you that how to add a adsense banner or other widget in your blogger’s header. Header is the top most part of your blog, and inside the Header you will have other sub-blocks too - for the Header Title,theHeader Description, and others for the Adsense banners, a menu bar,search box, social media button etc... Many new blogger don’t know that how to add a Widget in blogger’s header. We can add widget in any part of blogger but in this tutorial i’ll show you how to add a widget on the right of blog Title. And by this section you can add any widget like Adsense , Search box, Social media etc .. in your blogger’s header. If you want to add this section in your blog just follow below instruction :

1 . First go to your blogger account
2 . Than go to Template >> Edit html >> Proceed
( make sure Expand Widget Templates Checkbox is Unchecked )
3 . Find following line in html ( press Ctrl + F to find )

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

<b:widget id='Header1locked='true' title='Your blog title(Header)' type='Header'/>

</b:section>

4 . Add following code after it.

<b:section id='header-right' showaddelement='yes'/>

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

5 . Add some code of CSS. By this CSS code it will be displaying on the right of blog Title.



         >>>   Go to Template > Edit html > Proceed
           ( make sure Expand Widget Templates Checkbox is Checked   )

        >>>    Find    ]]></b:skin> in html code

>>>    Add following code before ]]></b:skin>

#header {width:50%;display:inline-block;float:left;}

#header-right {width:40%;display:inline-block;float:right;padding:10px;}

>>> Lastly Save template and Enjoy

This is a subscribe box with hover effect for blogger blog. This is all in one widget subscribe box which contains feed subscription, rssfeed, social media button ( twitter, facebook, pinterest). Subscribe box is very important for blog where visitor can submit their Email ID to receive updates from your blog, and by social media button they are connected with you and recive update from your blog or website.

Live Demo

If you want to add this widget to your blog or website just follow below instruction :

1. first of all sign in to your blogger account and click on " layout "
2. Then Click on " Add a Gadget " tab.
3. Copy below code :

<style type="text/css">

#mysubform { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3a-qOSn4k0Sv6iOrpUJQstL7-XQWC3V3CkhzWzt7y9tfpN-MsWI0wkSXs-DMlFoasAm5-AOFU9PBBFRa2DYKJjNn8yieNQBDjtBi05kj7LgUXAVJiWB52ajadCPQAHu6hgHr3iiG89I/s128/back4.png);
    background-color: #0FF; width: 300px;
    background-repeat: repeat-y;
    position: relative; padding:5px; border-color:#0f599e;
        border:2px solid; } #message { font-family: "Cooper Std Black";
    font-weight: bolder;
    font-size: 20px;
    text-align: center;
    display: inline-block;
    height: auto;
    width: 250px;
    text-shadow: 2px 2px 2px #666;
    color: #006; } #emailinput { font-family: "Comic Sans MS", cursive; font-size: 12px; font-weight: bold; background-color: #CCC;
    background-position:center left;
    float: left;
    height: 30px;
    width: 150px;
    border-radius: 5px;
    border: thin solid #000; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5eRcsIzhO73oBpTb4KI2DNimT5SEWTNn8zJexsLxxTIHr7ksA1iPBO55BZRpZh6oZP9NAKrFxI-WugFkfomG0pr3oCXzvubBOIjM0asQDbWLyWMR7TizAHVqzWMAuylZC7_pv_3_dQ0/s1600/mesaage3.png); background-repeat: no-repeat;
    padding-left: 25px;
    padding-right: 5px; } #emailinput:hover { -moz-box-shadow: inset 0 0 1px 1px #fff;
-webkit-box-shadow: inset 0 0 1px 1px#fff;
box-shadow: inset 0 0 1px 1px #fff;
} #submitbtn { text-decoration: none;
    background-color:transparent;
    border:none; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjA2b3Ylc_-oqaeJ-mrXERN23GzMTQFV-0-sJRLP-mjQveyfiHCD5D2O_jyNMWPI9gAeYZ62FBXo11SJHBsALzHRjQ-SfjD0aARxXuEmUuMA2DYoXYqySoajv3zw1x1Ctt4CgSumBTGb0/s128/submit.png);
    text-align: center;
    display: inline-block;
    height: 38px;
    width: 85px; } #submitbtn:hover { transform:rotate(7deg);
-ms-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-o-transform:rotate(7deg); background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq26SUDVCJOOASIt8XBr4SfuY0Gx3dANM6MXQBLJ7tS7XFzHM5VaUkqhKmsITsyz0cRYoxUUQtKJwPmWIrsAcWkti0xlEBzd21WIlNOnA93rEKJHO5G7dWqnlayEE6hCf7yTyQD92I7xw/s128/submithover.png); cursor:pointer; } #followUS { font-family: "Cooper Std Black";
    color: #006;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: block;
    height: 45px;
    margin-bottom: 0px; } #feedreadercount {
text-align:center; } #flike {
padding:10px; }#mysubform #socialbtncontain { text-decoration: none;
    text-align: center; } #mysubform #socialbtncontain #facebtn { text-decoration: none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIHuEzFSWX5xlvkUazAjrF-0P3qlWRSTn7_FEA479MEWCctJCUI2wYh4i09gZQECjXAOMq4yb10zWNjwT-F0UB8Hz1A6e2tW5jZxUO3OOVZePqa8YYL8h-Ez2WGi-PXJJUsXC1PAWGK6I/s45/faceebook60.png);
    background-repeat: no-repeat;
    text-align: center;
    display: inline-block;
    height: 45px;
    width: 45px; } #mysubform #socialbtncontain #facebtn:hover { transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg); background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfM-f-71URYTa-y-I2lYb7llZXM3SO5KRGRykLchKyhA6uzLeiWHXtb1E0Drt4xrTQQ88Z7G-muKDk7aJAa8YaCH8xfgSb-E4O7Q1C9RuOChGlqp2GdQHXtSqCxMEpLhsFAxTbb158vGw/s45/facebook%2520haver.png); } #mysubform #socialbtncontain #twittbtn { text-decoration: none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj52fF7WTlNHDrfPJlsR0zvbHsVozNtie2v4D2GFf_jK_g8UZ07WyvKpjUhhD6MvB6t8N7BrgcAPFlu9BOcgqQ957ionsxT2YBujsIxFHIDvRXAFGHCQgwyY31NaSy-q37Nyh-jIAogSSQ/s128/twitter.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 45px;
    width: 45px; } #mysubform #socialbtncontain #twittbtn:hover { transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg); background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc2BAbD7PpIMxEhWW2uprT3kFsL9oHcxWXVqqFHqxFXFFtvSCU8B6QR9yxFComr_5GJErGaPhFEOb8xSlsSRMQDUWyZlcgnVGJQ4aIcos5aMc7z-RqeODwXUJv5_sYQbSwTsa0jWikGig/s128/twitterhover.png); } #mysubform #socialbtncontain #gplusbtn { text-decoration: none;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3yLvthjU7I7FckDF9-OkILv0ADmO1NLc0hPdKwHO1n2tpfamVQtReaW8R9_GBVDqiaOGaAVKQREMwHDtfLGM45pvfg7MFFt3pQ6F9_1J05lsvS6oanWgiUyplG2eA8IwXEAxhZDOyvGE/s128/gplus.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 45px;
    width: 45px; } #mysubform #socialbtncontain #gplusbtn:hover { transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0yEysUpqAn8Iq_XEkqJVyAbD-DX-IH-yTdxOntYo9qm6yCZ8TpS7UgPj_dgZtisv7_KZRwW3idmPFzNoMD1uTLRCI94ErEIefuLowgZVNGq5tU4zTQc8khIaPKppnv1y3h8DZHBC8Ngs/s128/gplushover.png); } #mysubform #socialbtncontain #pintbtn { text-decoration: none;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirUk85Lax38GrqkE4hYyua7z932YMu2KL1MPnQYUCPlK8jBAXq78tfsYHaI5VHZGeqUBwjiALfyAOv2qLz6aevGwQ0jPA2-VYIAw2AsBsA0YUZXrLykkMKNXghC2NQqQ1xIbuC8GVapkg/s128/pinterest.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 45px;
    width: 45px;} #mysubform #socialbtncontain #pintbtn:hover { transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg); background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiZ739vrZC0hyphenhyphenLSwLASC7pa9HBJaht7btpnMP6vZA4DLJqE0XRlkDeLokrOgsNK9V9w_bz3QhW2RbgHsDY7PrN1f2BAQGUlhQ7dsr22tEQRMRl0mvo4tjkhh0d6A_gtEChyPquJ13SUuM/s128/pinteresthover.png);
    } #mysubform #socialbtncontain #rssbtn { text-decoration: none;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgenHQDefZYL0Tu960Bsz1NzK4QVyNB6yyd9Etsdo9ux8IZ3zZGJ5fOCV5BgNojGmwmqigCSdpHHGUHcktFQKen9wBAYF9c7gtDP90rNBkDuiL0LUQXJnoysCZzmcqvuQdYE_3YXwn4ABg/s128/rss.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 45px;
    width: 45px;
}#mysubform #socialbtncontain #rssbtn:hover { transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMljF2HaD4BvydKIv8gwwDOKCP8EWzgbNUi5WTqoKtpT7-5LjIeh9pekpWdXINnzLJqPUgBggi3vv20IqTrIALZItCsgfuoap4GtiKFgVg4zlHQ7n0y1bPSjIkW1qxekpHvfarYykejvY/s128/rsshover.png);
    } #mysubform #mycreditlink {
    font-family: "Comic Sans MS", cursive;
   font-weight: bold;
   font-size: 12px;
   text-align: center;
   display: block;
   color: #D6D6D6;
   margin-top: -10px;
   float:right;
   height: 10px;
   width: 70px;
    text-decoration: none; } #mysubform #mycreditlink a {
text-decoration:none;
    margin-bottom: 4px;
} </style>
<div id="mysubform">
<div id="flike">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Furduhindiblog&send=false&layout=button_count&width=100&show_faces=false&font=verdana&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe>
 

<div class="g-plusone" data-annotation="inline" data-width="150"></div>
<script type="text/javascript">
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

</div>
<hr/>
<a href="http://pinterest.com/USERNAME/"><img src="https://s-passets-ec.pinimg.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a>
 
<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.urduhindiblog.com%2F&media=http%3A%2F%2Fwww.urduhindiblog.com%2F" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
<hr/>
<p id="message">Get Free Update via E-mail</p>

<form action="http://feedburner.google.com/fb/a/mailverify" style="padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Feedburnur ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<p><input id="emailinput" name="email" type="text" value="Enter your email address:" onclick="this.value='';" />

 
<input value="Feedburner ID" name="uri" type="hidden" />

<input value="en_US" name="loc" type="hidden" />

<input id="submitbtn" value="" type="submit" /></p></form>
<div id="feedreadercount">
<p><a href="http://feeds.feedburner.com/Feedburner Name"><img src="http://feeds.feedburner.com/~fc/Urdu-HindiBlogger?bg=99CCFF&fg=444444&anim=1" height="26" width="88" style="border:0" alt="" /></a></p>
</div>

<div id="socialbtncontain">

    <a id="facebtn" href="your facebook url"></a>
    <a id="twittbtn" href="your twitter url "></a>
    <a id="gplusbtn" href="your gplus url"></a>
    <a id="pintbtn" href="your pinterest url"></a>
    <a id="rssbtn" href="your rss feed url"></a>

</div>
<hr/>
<div id="mycreditlink">
<a href="http://www.urduhindiblog.com">Get this >></a></div>

</div>

4. Select " HTML/JavaScript " and paste above code and click save and you are all done!

Change Highlighted area with with your feedburner id and social profile url