Showing posts with label blogger widgets. Show all posts

Friday, 25 January 2013

beautiful numbered page navigation for blogger blog

I recently Posted about characters and count tools for blogger which my readers really like but some of them ask me about blogger widgets. Some ask me about seo and blogger templates but i decide to post about blogger widgets. Blogger widgets are playing an important role in designing of blogs . Making blog beautiful is a simple wish which nowadays every blogger had. But you are thinking that which one widget i,m going to share now, it is beautiful number page navigation for blogger which makes your blog very beautiful . you can watch live demo in below picture

beautiful numbered page navigation for blogger

you can also add this beautiful widget in blog this widget is really awesome and beautiful . page navigation is one of the most important part of blogger blog because your readers can engaged with your blog and it make ease to locate following posts which they are searching for . You can add this navigation bar really easy but its coding is pretty long so do not bored please and follow my steps to create this navigation bar :)

Installation:

Goto blogger dashboard
now goto template tab and edit html
and click expands widget templates
now find ]]></b:skin> and paste below css just above ]]></b:skin> tag.

.pagenavi{ position: relative; display: block; width: 400px; height: 40px; overflow: visible; margin: 50px auto; border: 10px solid rgba(255,255,255,0.5); /*border-radius*/ -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; /*box-shadow*/ -webkit-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff; -moz-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff; box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff; } .pagenavi span,.pagenavi a{ font: bold 20px/30px Tahoma, Arial; cursor: pointer; text-decoration: none; color: #464646; display: block; float: left; margin-left: 2px; /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0; padding: 2px 10px; min-width: 10px; text-align: center; position: relative; text-shadow: #fff 0 1px 0; background: #cdcdcd; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.8)), to(rgba(200,200,200,0.9))); /*linear-gradient*/ background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.8)),to(rgba(200,200,200,0.9))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); background: linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); } .pagenavi a:after { content: ''; position: absolute; bottom: -3px; height: 100%; display: block; width: 100%; left: 0; /*box-shadow*/ -webkit-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0; box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0; } .pagenavi a:first-child::after { /*border-radius*/ -webkit-border-radius: 500px 0 0 500px; -moz-border-radius: 500px 0 0 500px; border-radius: 500px 0 0 500px; } .pagenavi a:last-child::after { /*border-radius*/ -webkit-border-radius: 0 50px 50px 0; -moz-border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0; } .pagenavi a.current:after { height: 1px; bottom: -1px; } .pagenavi a:before { content: ''; position: absolute; top: 1px; height: 100%; /*box-shadow*/ -webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0; box-shadow: rgba(0,0,0,0.4) 0 3px 0; width: 1px; display: block; background: rgba(0,0,0,0.4); right: -1px; } .pagenavi a:last-child::before { display: none !important } .pagenavi a:first-child { /*border-radius*/ -webkit-border-radius: 50px 0 0 50px; -moz-border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px; font-family: 'WebSymbolsRegular'; } .pagenavi a:last-child { /*border-radius*/ -webkit-border-radius: 0 50px 50px 0; -moz-border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0; font-family: 'WebSymbolsRegular'; } .pagenavi a:hover { /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0; } .pagenavi a:active { /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0; top: 1px; text-shadow: #fff 0 0 15px; } .pagenavi a:active:after { bottom: -2px } .pagenavi a:active:before { /*box-shadow*/ -webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0; box-shadow: rgba(0,0,0,0.4) 0 3px 0; top: 0px; } .pagenavi a.current { /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0; top: 2px; text-shadow: #fff 0 0 15px; } .pagenavi a.current:before { /*box-shadow*/ -webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0; box-shadow: rgba(0,0,0,0.4) 0 3px 0; top: -1px; } .pagenavi a.current:active:after { bottom: -1px }

now find <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
and paste below code just below the above tag

<b:includable id='page-navi'> <div class="pagenavi"> <script type="text/javascript"> var pageNaviConf = { perPage: 5, numPages: 6, firstText: "First", lastText: "Last", nextText: "»", prevText: "«" } </script> <script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script> <div class="clear" /> </div> </b:includable>

Now here's the final step find

<!– navigation –>
<b:include name='nextprev'/>

And replace them with below code

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Now save the template and its done

This widget is pretty cool but coding is pretty long also but it really make your blog beautiful i hope you like my post please share this with your friends and keep visiting to find more awesome widgets.

social buttons with hover effect like labnol.org

Today i,m going to tell you that how to add a beautiful social networking buttons to your blogger blog. these networking buttons are inspired from labnol.org . social networking buttons are one of the best way to engaged your users and it will create a better relation of you with your readers
here's the live demo of social networking buttons and i also add link below with which you can easily take a view of social networking buttons.

Social networking buttons with hover effect

Live Preview Click Here

You can easily install this widget to your blogger blog and these buttons are really beautiful

Installation:

Goto blogger dashboard
now Goto page layout tab
Then add a gadget and select html/javascript
Now paste below code in it.

<style> /************************** Social Buttons from Haseebnet.blogspot.com *************************/ .haseebnetgotsocial {padding: 2em 0 1.5em 50px;} .haseebnetgotsocial span a {display: block;width: 32px;height: 32px;text-indent: -9999px;background-color: none;background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2pLOHDMTPcwMEvmfEkAbCU7Athvyd47SYb9jJM_ZxP_JcLl-tEvQ5HCWNp3l10OUBLbkwiqbuTIr1iakD2nBm-dG2vEZ1H2hn-6piTk4A0SFr_yh-IjZivOGQrYc3TKQJS0yPQR5chzjm/s1600/socialbuttons.png") 0 0 no-repeat;} .haseebnetgotsocial span {float: left;display: inline;margin-right: 8px;}
#iconTwitter,#iconFacebook,#iconRSS,#iconYouTube,#iconGooglePlus {transition:background-position .4s ease-in-out;-webkit-transition:background-position .4s ease-in-out; -o-transition:background-position .4s ease-in-out; -moz-transition:background-position .4s ease-in-out; -ms-transition:background-position .4s ease-in-out;}
#iconTwitter {background-position: -33px -33px;} #iconTwitter:hover {background-position: -33px 0;}
#iconFacebook {background-position: -66px -33px;} #iconFacebook:hover {background-position: -66px 0;}
#iconRSS {background-position: 0 -33px;} #iconRSS:hover {background-position: 0 0px;}
#iconYouTube {background-position: -99px -33px;} #iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus {background-position: -132px -33px;} #iconGooglePlus:hover {background-position: -132px 0;}
.ads67 {border: 1px solid gainsboro;border-right-style: none;border-left-style: none;}

</style>
<div class="haseebnetgotsocial"> <span><a href="http://twitter.com/carelexxmalik" id="iconTwitter" target="_blank" title="Twitter: carelexx malik">Twitter</a></span> <span><a href="http://www.facebook.com/carelexxmallik" id="iconFacebook" target="_blank" title="Facebook: Carelexx malik">Facebook</a></span> <span><a href="http://feeds.feedburner.com/haseebnetwork" id="iconRSS" target="_blank" title="RSS Feed: haseebnet blog post feed">RSS</a></span> <span><a href="https://www.youtube.com/user/mrdevilkid63" id="iconYouTube" target="_blank" title="YouTube Channel: carelexx malik on youtube">YouTube</a></span> <span><a href="https://plus.google.com/108867173879409387931?rel=author" id="iconGooglePlus" target="_blank" title="Google Plus: haseeb malik">Google</a></span> </div>

Now kindly replace all yellow colored links with your links
Now save it and its done

I hope you like and enjoy my widgets and please keep visiting and if you have any question or feedback please comment below.

simple subscribe box below every post

In my previous posts i give you some beautiful social widgets for your blogs but you know blog is not complete without subscribe box . subscribe box is a widget you can use on sidebar and below post to attract visitors as a regular visitors the function of this box is that when your reader subscribe to you then whenever you publish a new post it will directly send to his inbox this is a benefit for which people add these subscribe box widgets to their blogs here the picture of that subscribe box and i also added live demo button so you can easily know more about this widget .

simple subscribe box below every post

Live Preview Click Here

You can add this box in your blog by follow my simple and easy steps .

Installation:

Goto blogger dashboard
Now goto template tab and edit html
Now expand widget templates
Then Find <data:post.body/>
Now add below code just below the <data:post.body/>

<style> /* Subcribe CSS */ .frm-stx-btm {border:1px solid gainsboro ;padding-left:10px;overflow: hidden;background:#F0F0F0;} #email-ui {font-size:25px;margin:10px 0px; } .nam-subeml {display:inline;border:2px solid gainsboro;width:300px !important;height:30px;font-size:25px;color:grey;font-family:Arial, Helvetica, sans-serif;padding:0px 5px 5px 10px;} .nam-subeml:focus {color:black;border-color:#3AA3E9;outline:none; } .inl-9005 p {display:inline !important;} #ui63494 {width:160px;padding:2px;top:-3px;vertical-align:middle;position:relative;border:2px solid #2580D5;background-color:#1B89EE;font-family:"verdana";color:white;font-size:25px;} #ui63494:hover {background-color:#46A6FF; } </style> <div class="subscribe-stx"> <form action="http://feedburner.google.com/fb/a/mailverify" class="frm-stx-btm" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=haseebnetwork', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <div id="email-ui"> Subscribe with Email for updates</div> <div class="inl-9005"> <input class="nam-subeml" name="email" style="width: 140px;" type="text" /> <input id="ui015424" name="uri" type="hidden" value="haseebnetwork" /> <input id="ui03994" name="loc" type="hidden" value="en_US" /> <input id="ui63494" type="submit" value="Subscribe" /> </div> <div id="ui43524"> Get updates from <a href="http://feeds.feedburner.com/haseebnetwork" target="_blank">Haseebnet</a></div> </form> </div>

Now replace all Haseebnetwork with your feedburner username
And then Save your template.

If you enjoyed our post then please share it with your friends thank you and keep visiting.

beautiful facebook like button with rounded corner box

In my last post i told you about social widget like spiceupyourblog.com And readers like that post and request me to make another beautiful widget with facebook like button . So, i,m here with a new social widget with facebook like button you can also watch the live demo of widget and i added the picture of that widget below so you can easily understand the design of widget and i hope that you like my this widget . Now a days social sharing is every thing and you cant find a blog without social sharing buttons because with them you can gain a huge traffic to your blog.

Facebook like button in style with round corner box

Live Preview Click Here

you can add this beautiful widget in your blogs sidebar and it create special impression on your readers and attract them to like and click your blog. There is now loading effect of this widget on your blog so don't worry about your blogs speed and loading time and if you think that it will effect on your loading time then please red following article How to increase blog loading speed . Now i,m going to tell you that how to add this widget its simple and easy. here's we go.

installation:

goto blogger dashboard
Now goto page layout tab
and Then add a gadget
Now select html/javascript and paste below code in it .

<div style="-khtml-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; background-color: #ccc9f1; border-radius: 15px; border: 4px solid #f3e88e; padding: 10px;"> <img border="0" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KI86J4HWsA-qSgrejKSjnV7JBq9-TxI9wDc4ecwIxrbWqNALBtArHZayyXz9_1EDjbB3X_WNn8yHWwdBeCjAGtmsINHeSFhXy7N0Y-zXY1HpUE5hNUyXPIXXhdoxBSP3bzD72QHRCsI/s1600/join.me-24work.blogspot.com.png" /><span style="color:#000099;">Join Our FaceBook Page To Stay With Us And Share Your Awesome Articles....</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKtg5nRPqyeI92Dfc_4BmwwegtTWQV5U-s1EUMiENjdsuG7R4lS0xgt1v_EORqiBTyDs9ZyofIz8z4aP857t2iblucpkxUVEcUUauAvk2Y0_tS76Q4h89CFRpa2-tYtjoDKb8jVvimbaM/s1600/Moving-picture-right-pointing-finger-gif-animation.gif" /><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fcarelexxmallik&send=false&layout=button_count&width=80& show_faces=false&action=like&colorscheme=light&font&height=21" style="border: none; height: 21px; overflow: hidden; width: 80px;"></iframe></div>

Now simply replace carelexxmallik with your facebook page username
Then save it and its done.

I hope you enjoy my post if you enjoyed then please share it with your friends and keep visiting daily for awesome new widgets

social widget like spiceupyourblog.com

Today i,m going to share a social widget which is used in spiceupyourblog.com . It is a beautiful widget with hover effect and when your cursor point on it, it rotates 360 degree and create a beautiful essence on your readers mind. This widget is created by the admin of spiceupyourblog.com . I just try to create a widget like that . Social widget is always the first choice of blogger because it bright your online presense and make you popular among peoples. Now watch the demo of the social widget below

Social widget for blogger

Live Preview Click Here

Without these widgets your blog not shine on the right way because these widgets are the main widgets So, wanna add this follow my steps.

Installation:

Goto blogger dashboard
now Goto layout tab
add a gadget and select html/javascript
Now paste below codes in the html/javascript box

<style> #social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <div id="social"><a title="Grab Our Rss Feed" href="http://feeds.feedburner.com/haseebnetwork" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4LqZ2dkxKXqFKw7_dZLwuk2J5YxUTMHUhhyphenhyphentOnAO6yUfXCC5uhFpHMV_sRE_Gr3EP5KvulSMITn__Oauk8Gld9sf_DpjlrpTMwQ-YX0Mnu2IyP-Qd3WTTRxsfjlU9x8N4q5ZfsmG8XcV7/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"></a><a rel="nofollow" title="Get Free Updates Via Email" href="lovelykid.haseeb@gmail.com" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIQELAJKmsvleR7jUJDRMNlJEXKkMv0_eTya0bpnSNTC7FVIsDBAeo0fT6UrS-R-2XQn5mDy1a_5QKaHsVmvI3bpYGo8GtatN-D4oy4-IIF2Lk-Sp6VgypQL-rKln_3nhZRhHipZr_1iAk/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"></a><a rel="nofollow" title="Like Our Facebook Page" href="https://www.facebook.com/undefeatablewarrior" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPIRHs2JkHi0BypSiqLkXEAutoUe5A9ww3Il15VMdnHzxj4cDebEO4YtkVy5Dx7G6UGTUWVFe6-9OIBjfjunllQERuluU_EHyKN7UgTKjgQbrFQ_eyjSEVmJehYgo97japF-6SptaWhOx_/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="http://www.twitter.com/carelexxmalik" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTlmMdkmRsD-r2WD_p6yIVBfmGX7WHdl5jUQ8aVYiIMAQV4QQZ55kAyICAZ2nmtdv_XwaVxXdRXvlDEl-Sq0W5uvpVZHK7OQ0IRJdp9JJO2IAcIrDCrXmibzKlUl_i6Zb-gfu1SLeqNcRx/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"></a><a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8PYcqeDPcn2WlddWB4d1nbAIQNfyJaIDW4RagmESZSvDRIbBR4cboxHC7H8qx7EEbMG9DO7g08F-k0LSAUgP_TjHFef5zUIzTyBN33cgg776zQcdXs6GyufLfJ1HjLppXNSz-48yVx0xf/s1600/GOOGLE-PLUS-48x48.png"></a><a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/carelexxmalik" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghQ_k-6jJM3Tbbt5PgP8j9k2G8V7LCwDnnvfhJ7BJB6pJ2aPntyNdkgjtEwuVdbTpoBQd-60ysrPUXsXvGLollshwI0Id_MUcZWZueTw8ex8RtgplFWGI3asH9g_KF3B9uZJQ0LXuXm04a/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest"></a></div>

Now change all the links with your social links
Then save it and its done

If you enjoy our widgets then please take a minute to share them with your friends and thank you for visiting our blog keep visiting daily and find new widgets.

beautiful and simple about the author box below every post in blogger

Today i,m going to tell you that how to add beautiful author box below every post . author information is one of the best way to increase social media strategy .means it is a best widget in which you can add your social media profiles and you can add also about your self so peoples can know more about you .it make your post body more beautiful.

Widget Demo

Installation

Goto blogger dashboard
then goto template tab and edit html
Now click expand widget template
Then find ]]></b:skin>
Now paste below code just above ]]></b:skin>

.author_info { float: right; width: 573px; padding: 10px; border: 1px solid #e0e0e0; margin-bottom: 15px; margin-top: 15px; background: #eee; } .author_info h3 { margin-bottom: 10px; } .author_photo { float: left; margin: 0 0 0 10px; } .author_photo img { margin-right: 10px; border: 1px solid #e0e0e0; }

Now search for <div class='post-footer-line post-footer-line-1'>
and paste below code just below <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == "item"'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://lh3.googleusercontent.com/-AEjwZp9w37s/UNSIMPc2PcI/AAAAAAAAA7M/JjHAI3AjFFI/h120/images.jpeg'/></div>
<h3>About the Author</h3> This article is written by: <b>YourName</b> - who has already written <b>30</b> articles for <a href='YOUR-BLOG-URL'>YOUR-BLOG-NAME</a> YourName is a professional web designer. Catch him on <a href='http://twitter.com/yourtwitterID'>Twitter</a>, <a href='Your Facebook URL'>Facebook</a> or <a href='your e mail ID'>email</a> him <br> </br> <br> </br>
YourName's <a href='your web url'>Website</a><br style='clear:both;'/>
</div>
</b:if>

Now make some changes as where suitable and save the template
Its all done

If you like my post kindly share it with your friends

Google followers box for blogger New

Google Plus

Social media is on the peak of internet nowadays and it is one of the most trending topic in which all of us are involved. Today almost every person is addicted of social networking. If we use it correctly we can gain highest traffic to our blog .Google plus is also one of the top social network in the list. google plus recently launched google plus followers box it completely work like facebook like box . So, in this way you can increase your google plus followers. you just have to put this follower box in your sidebar or Any suitable place and then wait peoples automatically attract people toward itself . Now i,m going to tell you that how to add it in your blog

First Watch its demo

Installation:

Goto blogger dashboard
goto page layout tab and add a gadget
now select html/javascript
Now paste below code in it

<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/100775406963584849560" data-source="blogger:blog:followers" data-width="300"> </div> <script type="text/javascript"> (function() { window.___gcfg = {'lang': 'en'}; 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>

Now just change Red colour code with your google plus page url
And then Save It and its Done

Now you have a beautiful google followers box Keep visiting and Find awesome widgets for your blogs

beautiful css animated menu for blogger

Today we are going to discuss about navigation menus in blogger . Navigation menu is one of the most important part of our blog, because with this our readers can find pages they want i.e contact us, feedback us, etc And if menu is animated then reader cant wait to click on it . creating a beautiful menu is not hard in these days but make it compatible with all major is browser is one of the question on these menus. But we are giving you the most beautiful menu for your blog and website the one more thing is that it is also work with html site so you can use it in both . It is a beautiful menu with animation effect and there is no effect of it on your blogs loading time because there is no jquery used in it. It is created with pure css So be free to use it in your blog . Now i,m going to tell you that how to add this beautiful css menu in your blogger blog but first you have to check its demo so you can easily take decision of adding it.
Some Previous posts about menu's:

Demo Click Here

Installation:

Goto blogger and select your blog in which you want to add menu
now select layout tab and add a gadget
The select html/javascript and paste below Code in it .

<style type="text/css">

.exespotlightmenu{

width: 100%;

overflow:hidden;

}

.exespotlightmenu ul{

margin: 0;

padding: 0;

font: bold 14px Verdana; /* font style and size */

list-style-type: none;

text-align: center; /* "left", "center", or "right" align menu */

}

.exespotlightmenu li{

display: inline-block;

position:relative;

padding: 5px;

margin: 0;

margin-right: 5px; /* right margin between menu items */

}

.exespotlightmenu li a{

display:inline-block;

padding: 5px;

min-width:50px; /* horizontal diameter of spotlight */

height:50px; /* vertical diameter of spotlight */

text-decoration: none;

color: black;

margin: 0 auto;

overflow:hidden;

-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.exespotlightmenu li:hover a{

color: white;

background: #a71b15; /* background color of spotlight */

-webkit-border-radius: 50%; /* large radius to create circular borders */

-moz-border-radius: 50%;

border-radius: 50%;

}

.exespotlightmenu li a exespan{

position:relative;

top:35%; /* move text down so it appears centered within menu item */

}

</style>

<div class="exespotlightmenu">

<ul>
<li><a href="##########"><exespan>Home</exespan></a></li>
<li><a href="##########"><exespan>About</exespan></a></li>
<li><a href="##########"><exespan>Portfolio</exespan></a></li>
<li><a href="##########"><exespan>Privacy</exespan></a></li>
<li><a href="##########"><exespan>Contact Us</exespan></a></li>

</ul>

</div>

Now Replace RED colour to your desire text And replace ######## with your desire link
Thank you very much for visiting my blog hope you like it if Yes then please share it with your friends

Powerful seo meta tags for blogger (new)

Meta tags All in one Pack

Today we are discussing about SEO and Meta tags in blogger and we are going to tell you the method about adding meta tags with a new way with which your blog can enter in search engines results. Mean meta tags are the gate of search engines, If your meta tags are configured correctly then your posts are on the top in search results . They are used to provide additional information about your blog to search engines.
To get better SEO results use Effectfull keywords because google also search keywords in blogs .
Follow my steps to add All in one Seo meta tags In blogger.

Installation:

1. Login to your blogger account

2. Edit html and Find

<title><data:blog.pageTitle/></title>

3. Now replace it with following code

<b:if cond='data:blog.pageType == "index"'>

    <title><data:blog.pageTitle/> - Blogger widgets, templates, wordpress expert.</title>

    <b:else/>

    <title><data:blog.pageName/> | Haseeb.net </title>

    </b:if>

4. Now replace blue colour with your blogs seo friendly name and replace red colour code with your seo friendly keywords.
Now you have seo friendly page OR post Thankyou for visiting my blog

fast loading css social widget for blogger

fast Css social widget

hi every one you know social networking is a great way to gain traffic for your blog and and it increase you SEO and you get 1000 of backlinks for your blog. Today i,m going to tell you that how to add beautiful and fast loading css social widget . it is user friendly and it is compatible with major browsers i,m writting about its compatibility in next paragraph

Browsers compatibility:

browsers compatibility is a main issues of new widgets but this widget work with these browsers

Google chrome 14 and 14+
firefox 4 and +
safari 4 and +
opera 10 and +
I.E 8 and +

you can also watch live demo of our social widget and then you can easily take decision of adding it .

Installation

1. Goto your blogger account > Dashboard

2. Now click on Expand template widget check box

3. Now find <div class=’post-footer-line post-footer-line-1'> tag

4. And then paste below code just below the <div class=’post-footer-line post-footer-line-1'>

<style type="text/css">
.container {
margin: 0px auto;
width: 300px;
text-align: center;
}

.share-btn {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0 5px;
padding-top: 40px;
width: 75px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 8px;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.share-btn:active {
margin-top: 3px;
}

.share-btn:active .share-btn-action {
padding-bottom: 3px;
-webkit-box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -3px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15);
}

.share-btn:active .share-btn-action:after {
bottom: 3px;
}

.share-btn-count {
position: absolute;
top: 0;
left: 0;
right: 0;
line-height: 40px;
font-size: 19px;
letter-spacing: -1px;
color: #555;
text-shadow: 0 1px white;
background: #e6eff5;
border-width: 1px 1px 0;
border-style: solid;
border-color: #c5c5c5 #bbb;
border-radius: 8px 8px 0 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0%, transparent 40%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.18), 0 2px rgba(0, 0, 0, 0.07);
}

.share-btn-count:before, .share-btn-count:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: #e6eff5;
}

.share-btn-count:before {
margin-left: -7px;
margin-top: 1px;
border-width: 7px;
border-top-color: rgba(0, 0, 0, 0.07);
}

.share-btn-action {
display: block;
position: relative;
line-height: 32px;
padding: 2px 0 6px;
font-size: 14px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
border: solid rgba(0, 0, 0, 0.18);
border-width: 0 1px;
border-radius: 0 0 8px 8px;
}

.share-btn-action:after {
content: '';
position: absolute;
top: 0;
bottom: 6px;
left: 0;
right: 0;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}

.share-btn-tweet {
background: #83cfe8;
background-image: -webkit-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -moz-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: -o-linear-gradient(top, #83cfe8, #6ebbd4);
background-image: linear-gradient(to bottom, #83cfe8, #6ebbd4);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.16), inset 0 -1px rgba(0, 0, 0, 0.15);
}

.share-btn-tweet:after {
-webkit-box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}

.share-btn-tweet + .share-btn-count {
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.12), 0 2px rgba(0, 0, 0, 0.04);
}

.share-btn-like {
background: #6480bd;
background-image: -webkit-linear-gradient(top, #6480bd, #3c5894);
background-image: -moz-linear-gradient(top, #6480bd, #3c5894);
background-image: -o-linear-gradient(top, #6480bd, #3c5894);
background-image: linear-gradient(to bottom, #6480bd, #3c5894);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.2);
}

.share-btn-plus {
background: #626262;
background-image: -webkit-linear-gradient(top, #626262, #404040);
background-image: -moz-linear-gradient(top, #626262, #404040);
background-image: -o-linear-gradient(top, #626262, #404040);
background-image: linear-gradient(to bottom, #626262, #404040);
-webkit-box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 -6px rgba(0, 0, 0, 0.08), inset 0 -1px rgba(0, 0, 0, 0.3);
}

</style>

<div class="container">
<a href='https://twitter.com/TechnologyTweak' rel='nofollow' target='_blank' title='Find us on twitter' class='share-btn'>
<span class="share-btn-action share-btn-tweet">twitter</span>
<span class="share-btn-count">400+</span>
</a>

<a href='https://www.facebook.com/Technononimous' rel='nofollow' target='_blank' title='Find us on facebook' class='share-btn'>
<span class="share-btn-action share-btn-like">facebook</span>
<span class="share-btn-count">500+</span>
</a>

<a href="https://plus.google.com/115574597696558279166" class="share-btn" target="_blank" rel="author" title='Find us on google+'>
<span class="share-btn-action share-btn-plus">google+</span>
<span class="share-btn-count">200+</span>
</a>
</div>

5. now replace the links with your links
6. Now save it and its done
Note if you like my post then please share it with friends

Egg sharing for blogger by sharethis

sharethis egg style social sharing widget

Today i,m going to tell you about sharing options in blogger . sharing on social sites is one of the best way to gain traffic and become famous on the web. but sharing with the style is one of the best way to get attention of your readers. sharethis is one of the best company in the web for there sharing options they provide a lot of widgets for blogger and for websites etc. so they are releasing many widgets for bloggers to gain there attention they are also providing beautiful sharing widgets. today i,m going to tell you that how to add sharethis egg slideout social sharing widget. So, follow my steps to get this widget.You can also watch live demo of this widget in our demo blog

Steps

1. goto your blogger account > dashboard > edit html

2. now find </head> tag

3. now paste below code just above the </head> tag

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> <script type='text/javascript'>stLight.options({publisher: "ur-8763731d-23ab-10e6-76cd-b53d73f2db8a", onhover:false}); </script> <link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

4. Now again Find </body> tag
5. and paste the below code just above the </body> tag

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'],{title:'<data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script>

6. Now save the template and its Done
Note: if you like our post please share it with your friends

expandable search box like wordpress for blogger

Expandable search boxes with Hover effect

Today i,m going to tell you that how to add expandable search box with or without hover effect. these search boxes are very beautiful and cool to use . These search boxes are made for wordpress site i,m sure you seen them on one of the wordpress blog but you can add them to blogger . It makes your blog more beautiful and creative it is user friendly and it does not have any effect on your blogs speed .

You can watch live demo of these search boxes in my demo blog

Now we are going to add this in blogger Follow my steps.

Steps

1. Goto your blogger account

2. goto page elements and add a gadget

3. select html/javascript and paste below code in it .

For search box with hover effect

<style>
#apple #search {

}

#apple #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HYSgZHvIWLEmso58qaBf1id4gsaL3gWYsto_ETb6LuXjBmrSl7XZ9qDQi-LcwSWztDVEpMhSJMiqcYuV2N8pMsu8aWfUOfBEGt9jw__ih3UuXrPv0dR5nBa2Ve3vCI9-FN3FDFnizL0/s1600/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#apple #search input[type="text"]:focus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1nlMf81GlYpMM89GUGLD8fL1OCGWuqh7IfdMfp-RYLRGBNuwxLf_VFVFRLoi0S-50RnxlJW5A7kk0xyDS_O5SJIoC7xzoYsWIlr70sVzRoSWnEoFRUE4PaN5HC31j087PP8m2Fs1kkFA/s1600/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
</style>
<div id="apple">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>

For Search box without hover effect (white)

<style>
#white #search {

}

#white #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HYSgZHvIWLEmso58qaBf1id4gsaL3gWYsto_ETb6LuXjBmrSl7XZ9qDQi-LcwSWztDVEpMhSJMiqcYuV2N8pMsu8aWfUOfBEGt9jw__ih3UuXrPv0dR5nBa2Ve3vCI9-FN3FDFnizL0/s1600/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#white #search input[type="text"]:focus {
width: 200px;
}
</style>
<div id="white">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>

For search box without hover effect(dark)

<style>
#dark #search {

}

#dark #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1nlMf81GlYpMM89GUGLD8fL1OCGWuqh7IfdMfp-RYLRGBNuwxLf_VFVFRLoi0S-50RnxlJW5A7kk0xyDS_O5SJIoC7xzoYsWIlr70sVzRoSWnEoFRUE4PaN5HC31j087PP8m2Fs1kkFA/s1600/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#dark #search input[type="text"]:focus {
width: 200px;
}
</style>
<div id="dark">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>

NoW save It and its done
please share it with others thank you

beautiful menu for blogger with search box

Add menu with search box in blogger

Today i,m going to tell you that how to add beautiful simple menu in blogger with a beautiful search box. This menu create a better impression on your reader and it make ease to search any thing in your blog.the menu look very simple and search box is looking very beautiful in it .

You can also check my previous posts about menu's and search box.

Watch Demo of this menu in my demo blog so you can easily understand about this menu

Now Follow my steps to add menu with search box in you blog.

Steps

1. Goto your blogger dashboard

2. Now click on Edit html and Find ]]></b:skin>

3. Now paste the below code just above ]]></b:skin>

#Menu a{color:#fff;display:block;font-weight:400;padding:5px 10px} #Menu a:hover{background:#f4f4f4;color:#333;display:block;text-decoration:none} #Menu ul{height:30px;list-style:none;margin:0;padding:0} #Menu li{height:30px;float:left;margin:0;padding:0} #MSA{width:960px;margin:0 auto;} #MSD{width:960px;} #Menu{height:30px;width:700px;float:left;} #SearchBox {height:35px;float:right;width:220px;} #SearchBox input[type="text"]{background-color:#2A2A2A;border:1px solid #484848;border-radius:5px;color:#7E7E7E;height:25px;outline:0;position:relative;-webkit-appearance:none;padding:3px 0 3px 8px} #SearchBox input[type="submit"]{background-color:#248334;border-radius:5px;color:#fff;height:28px;width:35px;border:1px solid #7a7a7a;background-image:url(http://lh4.googleusercontent.com/--9RbYGLhmI8/UAp2hm47JEI/AAAAAAAAAxI/t_neer3k3IM/s36/Subscribe.png);padding:3px}

4. Now save the template

5. Now goto page layout and add a gadget

6. Select html/javascript and paste below code in it

<div id='MenuBar'> <div id='MSA'> <div id='MSD'> <div id='Menu'> <ul> <li><a href='#'>Home</a></li> <li><a href='#' rel='author'>About</a></li> <li><a href='#'>Contact</a></li> <li><a href='#'>Advertise</a></li> <li><a href='#'>Write For Us</a></li> <li><a href='#'>Privacy Policy</a></li> <li><a href='http://www.haseebnet.blogspot.com/'>Add This</a></li> </ul> </div> <div id='SearchBox'> <form action='/search' method='get'> <input name='q' onblur='if (this.value == "") {this.value = "Search Here...";}' onfocus='if (this.value == "Search Here...") {this.value = "";}' type='text' value='Search Here...'/> <input type='submit' value='Go'/> </form> </div> </div> </div> </div> <!--MenuBar Ends--!>

7. Atlast save it

Note : i did not create this menu i find it on internet and i think that it is useful for you So, i share it with you Thanks

Please share it with your friends

stylish blockquote with hover effect for blogger

Block quote style with hover effect

Today i,m going to tell you that how to customized blockquote in blogger . Blockquotes are mostly used in
blogging tricks blogs so you can easily embed html codes in your blog posts with a new style .
Blockquotes are mainly used for writting some quotes or Codes .

Demo

if you want to add this please follow my steps.

Steps To follow

1. first goto your blogger account

2. then click on edit html

3. Now search for ]]></b:skin>

4. now paste the below code just above the ]]></b:skin>

/*****************************************
Haseebnet.blogspot.com post blockquote
******************************************/
.post blockquote
{
font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;
background-color: #F2F1F1;
color: #000;
margin: 5px 10px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.post blockquote:hover
{
background-color: darkgreen ;
color: #fff;
}
.post blockquote:active
{
background-color: CornflowerBlue ;
color: #000;
}

Thank you very much for visiting my blog and reading my post if you like my post then please share it with your friends

Add css3 search box in blogger

Today i,m going to tell you that how to add beautiful css3 search box in you blogger blog you can also

use this search box in your html templates but this search box is created for blogger and we recommed to

use it on blogger blog. this search box is specially created for those blogger who want to customized there

blog as a professional So, ready to rock follow my steps to add it on blogger blog.

Steps To Follow

1. goto your blogger account

2. Click blog title → Layout → Add Gadget In Sidebar

3. now select html/javascript

4. now add below code in it

<style> #s {
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: none;
padding: 12px 48px 12px 12px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
width: 300px;
height: 16px;
color: #3a4449;
border: none;
outline: none;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
z-index: 2;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihpIR4HQwY5X6xy3Ot6-oahzSm8s4ZhyphenhyphenjxMyRph7njuD9nHNBpO7FTjp84_KY0Z4ChFJ13PYi48xTthZwZrqQRKfZtlY_pLNuC9mS-KQI3TbpYkhGKUE2psbowMJZ_8S82S5j5MVogmLY/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
} </style>
<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Search Me">
</form>
<style>

Thanks to harshdeep arsani for creating this widget
Note: please share this post with your friends

Today i,m going to tell you that how to add social widget in sidebar like way2blogging.org
way2blogging is a tips and tricks blog which is very famous for there tricks and widgets. way2blogging is administrated by harish .
social widgets on your sidebar help's your visitors to connect with
you on other social networks and then you can share your posts with
your readers on social network also.
Please follow my steps to install this widget on your blog

Steps to follow:

Login To Blogger Account
Click blog title → Layout → Add gadget in sidebar
and select html/javascript

4.Now add below code inside the html/javascript box

<br />

<ul class="social" style="background-color: white; border: 0px; color: #454545; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font: inherit; line-height: 22px; list-style: none; margin: 10px; overflow: hidden; padding: 0px; vertical-align: baseline;">

<li class="rssicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="http://feeds.feedburner.com/haseebnetwork" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrjVRKbbDvUGAHbtDiPshuKeiZ3bo42r9S-UyQKJLHe98XGavu_GAhyphenhyphen5El6hJJ9ToBhIGET6dUmLQ1G3Maac5vzB_FQNNAggohGzsOHfQoV0JEkGjFt0D1jVcCQcNO5_sY08NnagnJoc/s1600/w2bsocials.png); background-position: -33px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;"> </span>RSS Feed <span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">100 READERS</span></a></li>

<li class="twicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="http://twitter.com" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrjVRKbbDvUGAHbtDiPshuKeiZ3bo42r9S-UyQKJLHe98XGavu_GAhyphenhyphen5El6hJJ9ToBhIGET6dUmLQ1G3Maac5vzB_FQNNAggohGzsOHfQoV0JEkGjFt0D1jVcCQcNO5_sY08NnagnJoc/s1600/w2bsocials.png); background-position: 0px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;"> </span>Twitter <span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">100+ FOLLOWERS</span></a></li>

<li class="fbicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="http://facebook.com" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrjVRKbbDvUGAHbtDiPshuKeiZ3bo42r9S-UyQKJLHe98XGavu_GAhyphenhyphen5El6hJJ9ToBhIGET6dUmLQ1G3Maac5vzB_FQNNAggohGzsOHfQoV0JEkGjFt0D1jVcCQcNO5_sY08NnagnJoc/s1600/w2bsocials.png); background-position: -99px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;"> </span>Facebook <span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">15 LIKES</span></a></li>

<li class="gicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="https://plus.google.com/u/0/108867173879409331" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBrjVRKbbDvUGAHbtDiPshuKeiZ3bo42r9S-UyQKJLHe98XGavu_GAhyphenhyphen5El6hJJ9ToBhIGET6dUmLQ1G3Maac5vzB_FQNNAggohGzsOHfQoV0JEkGjFt0D1jVcCQcNO5_sY08NnagnJoc/s1600/w2bsocials.png); background-position: -66px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;"> </span>Google + <span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">50+ FOLLOWERS</span></a></li>

</ul>

Now change the urls according to your url's
And please share this post with your friends

.

Friday, 25 January 2013

Installation:

Thursday, 24 January 2013

Installation:

Wednesday, 23 January 2013

Installation:

installation:

Tuesday, 22 January 2013

Installation:

Saturday, 19 January 2013

Friday, 18 January 2013

Installation:

Monday, 14 January 2013

Installation:

Sunday, 13 January 2013

Installation:

Saturday, 12 January 2013

Browsers compatibility:

Installation

Wednesday, 9 January 2013

Steps

Monday, 7 January 2013

Steps

For search box with hover effect

For Search box without hover effect (white)

For search box without hover effect(dark)

Sunday, 6 January 2013

Steps

Friday, 4 January 2013

Steps To follow

Thursday, 3 January 2013

Steps To Follow

Steps to follow: