Blogging Academy - Professional Blogging Tips and tricks

How use meta Tags In Blogger

06:28 1

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;">Hi Friends.Whats going on.Today I tell you how we add meta tags in Blogger.First I tell you the importance of Meta tags.Meta tags is another way in which search engine can index your Blog posts.Meta tags are the words or brief explanation placed in head area of template that give a brief description,Keywords,author name,author email address,language etc </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJXNatN025eXg7ef8Y1f6i_g14tY972nr1RKEJ5Fgf3o_lXb8DkoixHwjOvJ2kLYt1tgm0Dd8XZKSko3UvdkxLTyGs1esrnlSMplWb1KCHj3eoG392n7_QVUK0mHuXN2mErJ31topNwCs/s1600/how+add+meta+tags+to+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJXNatN025eXg7ef8Y1f6i_g14tY972nr1RKEJ5Fgf3o_lXb8DkoixHwjOvJ2kLYt1tgm0Dd8XZKSko3UvdkxLTyGs1esrnlSMplWb1KCHj3eoG392n7_QVUK0mHuXN2mErJ31topNwCs/s1600/how+add+meta+tags+to+blogger.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: Arial, Helvetica, sans-serif;">Google is not depending to use meta tags.But other search engines like yahoo,bing etc are used meta tags.Google mostly used title and first 25 word of Page Article,than meta tag Description.Below hoe we add meta tags with some basic tips for adding it.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<div class="message_box announce">
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://mybloggersacademy.blogspot.com/2014/03/best-seo-tips-for-blogger-especially.html" target="_blank">Some basic SEO tips For Blogger Specially Newbies.</a></span></div>
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">How we add Meta Tags in Blogger?</span></h2>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Go to Blogger Dashboard >>  Template  >> Edit Template</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Find The Below code.This code usually on the top .</span></li>
</ul>
<br />
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><head></span></blockquote>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Paste the following given code after find code </span><b style="font-family: Arial, Helvetica, sans-serif;"> <head></b></li>
</ul>
<br />
<h3>
<span style="font-family: Arial, Helvetica, sans-serif;">Meta Tag Description</span></h3>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Place keyword in Meta Tag Description </span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Don't repeat keyword more than two times</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Maximum 200 Characters</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Use different Meta Tags for each page</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">should in form of sentence</span></li>
</ul>
<br />
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><meta expr:content='data:blog.pageTitle &quot; Blogger Tricks,Tips And Tutorials &quot;' name='description'/></span></blockquote>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Meta Tag Keywords</span></h3>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Don't repeat keyword sentence</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">You can repeat keyword up to three times in different keyword phrase.Example </span><b style="font-family: Arial, Helvetica, sans-serif;">Blogger</b><span style="font-family: Arial, Helvetica, sans-serif;"> Tricks,</span><b style="font-family: Arial, Helvetica, sans-serif;">Blogger</b><span style="font-family: Arial, Helvetica, sans-serif;"> widgets,</span><b style="font-family: Arial, Helvetica, sans-serif;">blogger</b><span style="font-family: Arial, Helvetica, sans-serif;"> templates.the word Blogger repeats Three times in different phrases.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Use keyword that exist in Keyword and Title</span></li>
</ul>
<br />
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><meta expr:content='data:blog.pageTitle &quot; Blogger Tricks,Blogger Ticks,Blogger Tutorials&quot;' name='keywords'/></span></blockquote>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Additional Meta tags</span></h3>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><meta name="robots" content="selection"></span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><meta name="copyright" content="text"></span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><meta name="googlebot" content="noodp">  </span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><meta name="language" content="english"></span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><meta name="reply-to" content="email address"></span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><meta name="web_author" content="text"></span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><link rel=”author” href=”https://plus.google.com/[YOUR PERSONAL G+ PROFILE HERE]“/></span></blockquote>
<span style="font-family: Arial, Helvetica, sans-serif;">I hope that you understand it.if any Query please comment below or send us message.Your comment will be apprecialbe for us. <b>Happy Blogging</b></span></div>

Hi Friends.Whats going on.Today I tell you how we add meta tags in Blogger.First I tell you the importance of Meta tags.Meta tags is anothe...

Add Floating Facebook Like Box to Blogger

00:52 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;">Hello Everyone,I hope all of you fine and leading a good life.Today I tell you how we add Floating <a href="http://facebook%2Ccom/" target="_blank">Facebook</a> Like box to blogger. Everyone know that Facebook is most used social media Platform.Facebook Has more 6 Billion User across the Global. It is very large amount of users.If you have a good amount of Your Facebook Page followers then it generates handsome visitors for you.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijfF1Nfs7Rl-z4DC0p4WQDY8qSF_iBrezZ2NmTvJ21qAnm0uGWgFwnAs3mNKDmaGz21TUACtcNUaFLeJtmVWX5F_cQCcwkX4MCq_77Ge8AbvoVTz2NMnT9nCf1ruhVdLnNlmnVgyZ1Bsk/s1600/floating+facebook+like+box+to+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijfF1Nfs7Rl-z4DC0p4WQDY8qSF_iBrezZ2NmTvJ21qAnm0uGWgFwnAs3mNKDmaGz21TUACtcNUaFLeJtmVWX5F_cQCcwkX4MCq_77Ge8AbvoVTz2NMnT9nCf1ruhVdLnNlmnVgyZ1Bsk/s1600/floating+facebook+like+box+to+blogger.png" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><a class="button seagreen medium" href="http://watchtv2013.blogspot.com/" target="_blank">Live Demo</a>
</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
<br />
</span><br />
<div class="message_box announce">
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://mybloggersacademy.blogspot.com/2014/03/how-add-professional-facebook-popup.html" target="_blank">20 Different Styles Of Facebook fan box for Blogger</a>.
</span></div>
<div class="message_box announce">
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://mybloggersacademy.blogspot.com/2013/11/20-different-styles-facebook-fan-box.html" target="_blank">Add Popup Facebook Like box to Blogger</a>.
</span></div>
<div class="message_box announce">
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://mybloggersacademy.blogspot.com/2014/04/add-simple-facebook-like-box-to-blogger.html" target="_blank">Add simple Facebook like box to blogger</a>.
</span></div>
<div class="message_box announce">
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://mybloggersacademy.blogspot.com/2014/04/add-socializing-widget-for-blogger.html" target="_blank">Add socialization widget to Blogger below post content</a>.
</span></div>
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Steps of Installation</span></h2>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Step 1 : Adding Jquery JavaScript Plugin(If you already add it then ignore it)</span></h3>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Go to Blogger Dashboard >> Template  >> Edit Template</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Find the below code by Pressing <b>CTRL+F</b></span></li>
</ul>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><b></b><br /></span>
<blockquote class="tr_bq">
<b><span style="font-family: Arial, Helvetica, sans-serif;"></head></span></b></blockquote>
<span style="font-family: Arial, Helvetica, sans-serif;">Paste below code above find code <b></head></b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script></span></blockquote>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Step 2 : Adding Widget Code</span></h3>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Go To Blogger Dashboard >><b> Layout</b> >> <b>Add a gadget</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Select <b>HTML/JavaScript</b> and Paste the below code in <b>HTML/JavaScript</b> Box</span></li>
</ul>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript"> // </script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhix3z809GgXln3hXtPvR0pbO0TKlem4xmMRPBkbt7zSx_SYmPnFOhuGZLKrpCsW7CmFPJ9KjSprLwTRRgZYQZFYuahMWzs-Op1gzz6bUlzYjvuPZmEp6FcWecFzYgACs6pXUSbhV7PE_6p/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F<b><span style="color: red;">mybloggingacademy</span></b>&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://mybloggersacademy.blogspot.com/">Blogging Academy</a> / <a href=" http://mybloggersacademy.blogspot.com"> Get This!</a></span></div></div></span></blockquote>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Replace "<b><span style="color: red;">mybloggingacademy</span></b>" with your page username</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Save and Your mission is complete.</span></li>
</ul>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
If you have any Problem Please comment below or send us messages through contact us page.Your comments and Messages are appreciable for Us.<b>Happy Blogging</b></span></div>

Blogger Widgets and Plugins Add Floating Facebook Like Box to Blogger

Hello Everyone,I hope all of you fine and leading a good life.Today I tell you how we add Floating Facebook Like box to blogger. Everyone ...

Add a Twitter Fanbox widget with Faces Image to Blogger

11:29 4

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;">Hi Friends,Have a good day.Today Post is about How we add <a href="http://twitter.com/" target="_blank">Twitter</a> Fan box widget with Images to Blogger.Everyone know that Twitter is emerging social media website have almost have 645 Million active Users.So Twitter is generated a lot of visitors.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">This widget is too much better that other Twitter Follow Widgets.It designed very beautifully that attracts visitors.It also show faces of Peoples who follow you.According to my opinion its a good widget for Bloggers who want to Increase Twitter Followers.By following these easy steps you can add it easily.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJLwDfATfTUEO7WGRi7ODL3T4Px3lRXNadpy8AJI2lYjhWfIcMiU87vMSqbc6hGVa5MU-MGRFyv2aSOQ7TM6nLxqRBJbaYmkAFlZGihHBKhayY_NOAIBd9-zMYK6tKJlmAzuDd5cGd88U/s1600/how+add+twitter+followers+box+to+blogger.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJLwDfATfTUEO7WGRi7ODL3T4Px3lRXNadpy8AJI2lYjhWfIcMiU87vMSqbc6hGVa5MU-MGRFyv2aSOQ7TM6nLxqRBJbaYmkAFlZGihHBKhayY_NOAIBd9-zMYK6tKJlmAzuDd5cGd88U/s1600/how+add+twitter+followers+box+to+blogger.PNG" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><a class="button seagreen medium" href="http://watchtv2013.blogspot.com/">Live Demo</a>
</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<div class="message_box announce">
<a href="http://mybloggersacademy.blogspot.com/2013/10/add-twitter-popup-followers-box-for.html" target="_blank"><span style="font-family: Arial, Helvetica, sans-serif;">Add a Popup Twitter Followers Box To Blogger</span></a></div>
<div class="message_box announce">
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://mybloggersacademy.blogspot.com/2014/04/add-socializing-widget-for-blogger.html" target="_blank">Add a socializing widget below post content(To much impressive Widget)</a>.
</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">
Steps to Install in Blogger</span></h2>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Go to Blogger Dashboard  >> Layout</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Click on Add a Gadget then Choose <b>HTML/JavaScript.</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Open the <b>HTML/JavaScript</b> and Paste the below code </span></li>
</ul>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><div id="twitter-box"></div></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><script></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">var tw_user = '<span style="color: red;"><b>Chahmdnaeem</b></span>';</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">var tw_width = 300;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">var tw_height = 325;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">var no_face = 19;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">(function() {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">tw_box.src = '//www.twitter-fanbox.com/tw.js';</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">})();</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"></script></span></blockquote>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Replace <b><span style="color: red;">chahmdnaeem</span></b> red highlighted text with your Twitter username </span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Save it.</span></li>
</ul>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">
2nd Way to get  Above Code</span></h3>
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Go to Twitter-fan box official website by <b><a href="http://www.twitter-fanbox.com/" target="_blank">click here</a></b></span></li>
</ul>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEbv-R12XIMZcydoRHTFmkb_v_vrqTihVhkMud3p_gcaVeqRnCXxMl7JwuS8wNR9qhl_97eHoZs5pTtaDJSbENDWlMTZFv6htL_JxD8EJO3O1UO4cPvHNQqQLWPmiDvLXzVo54BeeUeTA/s1600/add+twitter+fanbox+widget+to+Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEbv-R12XIMZcydoRHTFmkb_v_vrqTihVhkMud3p_gcaVeqRnCXxMl7JwuS8wNR9qhl_97eHoZs5pTtaDJSbENDWlMTZFv6htL_JxD8EJO3O1UO4cPvHNQqQLWPmiDvLXzVo54BeeUeTA/s1600/add+twitter+fanbox+widget+to+Blogger.png" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Write your username,adjust width and height according to your choice and generate code and paste in HTML/JavaScript</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Save it</span></li>
</ul>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">If you have any query then please comment below or message us using <b>contact us</b> Page.Your comments and Messages are appreciable for us.<b>Happy Blogging</b></span></div>

Blogger Widgets and Plugins Add a Twitter Fanbox widget with Faces Image to Blogger

Hi Friends,Have a good day.Today Post is about How we add Twitter Fan box widget with Images to Blogger.Everyone know that Twitter is emer...

How To submit/add website and Blog To Alexa?

05:47 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;">Alexa is global leader in analytic.It is also leading provider of free global web metrics.Search are used to discover more successful sites on the web by keyword,category and country.You can also used pro(premium) Tools to optimize your blog presence on web. Alexa is also used to know how improvement made in your Blog or I also added this Blog to Alexa Rank.But Now i am new So my Alexa Rank is low.But this is short tutorial for you.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZMP9JkLDVfTzzVu_UATeoGnP0hhmx8rHMFfB2KR8ZDntULSOlkjOt-NWYpcR6pKKfB-QBIax81q4WA0jFuisfoWzFDRBQC6rJE1EDJoL2kPKhGUnbu3ZA8pv5HHIuk-to0IC-MqmXl4/s1600/alexa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZMP9JkLDVfTzzVu_UATeoGnP0hhmx8rHMFfB2KR8ZDntULSOlkjOt-NWYpcR6pKKfB-QBIax81q4WA0jFuisfoWzFDRBQC6rJE1EDJoL2kPKhGUnbu3ZA8pv5HHIuk-to0IC-MqmXl4/s1600/alexa.png" width="320" /></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Steps to Get Alexa rank Page for Your Blog</span></h2>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">This tutorial is image base because you understand all thing Clearly</span></div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Go to Alexa Official Website and create an account</span></li>
</ul>
</div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Rm75iP1wTUEhf0O0fL7Xjk4hxlUxdinW8BpQg1kYOapU4772BfKD6w_l2k_p0-z41YKRApgNZ6urKgUIEgZOE_GF4m5cxvpLsmLbo84tBZenNUjXyWTIEIcftiaEYfvBYwvaSnw4ATE/s1600/create+an+account+on+alexa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="61" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Rm75iP1wTUEhf0O0fL7Xjk4hxlUxdinW8BpQg1kYOapU4772BfKD6w_l2k_p0-z41YKRApgNZ6urKgUIEgZOE_GF4m5cxvpLsmLbo84tBZenNUjXyWTIEIcftiaEYfvBYwvaSnw4ATE/s1600/create+an+account+on+alexa.png" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">When Click on create account then following page shown</span></li>
</ul>
</div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9x4P950gw5KnSfSh6YXw1L7Hc-71FBCQDfMpY5_4m6OcTMRTzHyNTVolniZF4JyVOYR89J58srRyrlL6abnVc29I_Q9GoKO5Dhk8izCiJqmvYq52nEPix34x3e1HzKVjZF7w2LrB1NUU/s1600/alexa+sign+up+page.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="95" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9x4P950gw5KnSfSh6YXw1L7Hc-71FBCQDfMpY5_4m6OcTMRTzHyNTVolniZF4JyVOYR89J58srRyrlL6abnVc29I_Q9GoKO5Dhk8izCiJqmvYq52nEPix34x3e1HzKVjZF7w2LrB1NUU/s1600/alexa+sign+up+page.png" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">You can sign up using Facebook or email</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">By signup through email or Facebook,you can get a Message in your inbox</span></li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih2XpAFLGMPvWjiFObPMubg3S_TxEmyP8EbsFn0PJNrGmbC5qGq5JL0uJm6EWL53y7HnQc2xtO3O2jm9eBL-2DYXagZlgiX4qLfpILYiBbY3Ea6dpAbNAKcR4yH-433pg1gPhwvfD7Ai4/s1600/alexa+signup.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="107" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih2XpAFLGMPvWjiFObPMubg3S_TxEmyP8EbsFn0PJNrGmbC5qGq5JL0uJm6EWL53y7HnQc2xtO3O2jm9eBL-2DYXagZlgiX4qLfpILYiBbY3Ea6dpAbNAKcR4yH-433pg1gPhwvfD7Ai4/s1600/alexa+signup.png" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">When you get a email then open it and confirm it,it will redirect you on Alexa Password setting Page.Set up your password</span></li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7uekubxTttH-le08UCGmT2IgyoauDqMD7cn-zXA3-xlQNFoSInWv5qfAqa4CUDJ1Xy4OQ5V1qNUESWHYrfcWs3UgT5Lla3txfkcNm9LNKjfPZSBGp527MbgNFR2hUq4GerqVIvDuXJAw/s1600/alexa+rank+password.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7uekubxTttH-le08UCGmT2IgyoauDqMD7cn-zXA3-xlQNFoSInWv5qfAqa4CUDJ1Xy4OQ5V1qNUESWHYrfcWs3UgT5Lla3txfkcNm9LNKjfPZSBGp527MbgNFR2hUq4GerqVIvDuXJAw/s1600/alexa+rank+password.png" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Now fill out your profile page and hit update button.</span></li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBgYvHEJZQVbLj5JVOEEqajGlfkY46uGMZyfGdBx04vgWhRkulmYUnevwuxWT6CtSWiYM3F_Vty8go6yfKU470g6yNce15-_VUjQsW1j9hCOcX9uohpRo6u3-61SnR3LkFVo1pge03ZQQ/s1600/alexa+edit+profile.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBgYvHEJZQVbLj5JVOEEqajGlfkY46uGMZyfGdBx04vgWhRkulmYUnevwuxWT6CtSWiYM3F_Vty8go6yfKU470g6yNce15-_VUjQsW1j9hCOcX9uohpRo6u3-61SnR3LkFVo1pge03ZQQ/s1600/alexa+edit+profile.png" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Now go to Dashboard On left side</span></li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc1Qa9y608-PtUCfeZAJiPBfv7nlt3ZHn_3LGIrehDO8-lXosG_Bc-qohKTSXTH46CZSeAo6dhAnu4NxIVBSoMPrmbgHTQV26pDD-Q0Tv4-vlfylfLrFtUCphZsas2eNp0tvSmXmqLKD0/s1600/alexa+edit+profile.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc1Qa9y608-PtUCfeZAJiPBfv7nlt3ZHn_3LGIrehDO8-lXosG_Bc-qohKTSXTH46CZSeAo6dhAnu4NxIVBSoMPrmbgHTQV26pDD-Q0Tv4-vlfylfLrFtUCphZsas2eNp0tvSmXmqLKD0/s1600/alexa+edit+profile.png" width="320" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Click add a site Button</span></li>
</ul>
</div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja99wlY0WUqWcyxeG2MMfcLpjYoWXO9QKBC7qjd6cFONXXgrS-CxHLgbPvQtLZrddK-G3TCFIF0pbYq2xHLAa00ohzm4x8En2ozt-lrYWWpuH2yuOqlKpxIt4dhzHXaeiaU91uxMbG6bc/s1600/alexa+add+a+site.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="38" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja99wlY0WUqWcyxeG2MMfcLpjYoWXO9QKBC7qjd6cFONXXgrS-CxHLgbPvQtLZrddK-G3TCFIF0pbYq2xHLAa00ohzm4x8En2ozt-lrYWWpuH2yuOqlKpxIt4dhzHXaeiaU91uxMbG6bc/s1600/alexa+add+a+site.PNG" width="400" /></span></a></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Now Select Plan.I choose Free and also same recommends you.</span></li>
</ul>
</div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNeQoivKkEE5_s7m4nnFwN8mvUtKXA2Q1YyfSWH8Dbhja_BwyYlewP4eH_kMIld2nGwBEDMTML6hnlQ4baNNx7aWW6IqRqsQQBHzWs7eqcEVn8ZaXCJF1-ICnwVhnMKZgKMK0lKTCg6vc/s1600/alexa+price+and+feee.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNeQoivKkEE5_s7m4nnFwN8mvUtKXA2Q1YyfSWH8Dbhja_BwyYlewP4eH_kMIld2nGwBEDMTML6hnlQ4baNNx7aWW6IqRqsQQBHzWs7eqcEVn8ZaXCJF1-ICnwVhnMKZgKMK0lKTCg6vc/s1600/alexa+price+and+feee.PNG" width="400" /></span></a></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Now click on Free and Enter your Website URL</span></li>
</ul>
</div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxfV3-OFQ_KPQM9DfRo-tVIiCowb3ggG90srnu-tJ48h0RPtK5a-Q1kEkZg7Nff7ChaJ4T5-y7m5LRFgaa_pmhI7AhdSlXiKa8TZSvbogI5tnTnMzoxG7wybetRRp_qf45PtFxuzZBbEA/s1600/alexa+website+submission.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxfV3-OFQ_KPQM9DfRo-tVIiCowb3ggG90srnu-tJ48h0RPtK5a-Q1kEkZg7Nff7ChaJ4T5-y7m5LRFgaa_pmhI7AhdSlXiKa8TZSvbogI5tnTnMzoxG7wybetRRp_qf45PtFxuzZBbEA/s1600/alexa+website+submission.png" width="400" /></span></a></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Press continue and new page is open like this</span></li>
</ul>
</div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzagevyl3EiWPzapR3ECigs6zteavPgdb5SWS9c05Qp7gAqGs1xRdnrgJgacAj1QtPnjLg-tiAIGrYFNSlADFo7ogKQBO_ChnwCfvmf8__r8C6THCU6JO7tGwMOnWoYFjVPrMd_8Q1eAY/s1600/alexa+claimed+website.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="301" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzagevyl3EiWPzapR3ECigs6zteavPgdb5SWS9c05Qp7gAqGs1xRdnrgJgacAj1QtPnjLg-tiAIGrYFNSlADFo7ogKQBO_ChnwCfvmf8__r8C6THCU6JO7tGwMOnWoYFjVPrMd_8Q1eAY/s1600/alexa+claimed+website.png" width="320" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Now open new Tab >> Login in Blogger Account</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Go to Blogger Dashboard >> Template >> Edit template </span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Paste the all code that show in Box below head Tag.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Replace keyword with your site keywords and Ti tile with your website Tittle </span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Save Template</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Go Back to Alexa opened page and click on </span><b style="font-family: Arial, Helvetica, sans-serif;">verify my id</b></li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">After Verify at the top you got a message of Website Claimed.</span></li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6z3lDIigSUOKgc1DpAfuHFH4PrfSiRAjk0e0HRJPfj7Zv-qzow5Inyx4XqhQY9JVub0KOhGHE3uvoQEOZxv2vlXKpp5cU1YPxr9k5eSPtCHUvWcGptDlskHmvze6T5wyAbQVPobWBQW0/s1600/alexa+website+verified+2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6z3lDIigSUOKgc1DpAfuHFH4PrfSiRAjk0e0HRJPfj7Zv-qzow5Inyx4XqhQY9JVub0KOhGHE3uvoQEOZxv2vlXKpp5cU1YPxr9k5eSPtCHUvWcGptDlskHmvze6T5wyAbQVPobWBQW0/s1600/alexa+website+verified+2.PNG" width="400" /></span></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC1hFu2Crzzr7yMGjMnNoTDGdkrzOJJv-vlFMBeMXgkYYGy8zgfn1r8qP8Wif5MPGtzT2yicORgRkxVGUcxjLwz8glgKD2NM8yG54xZbN8b8Jm-zeYrCwNEn-ZanjtVwfV2JiCWZlR0Ro/s1600/alexa+website+verified.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC1hFu2Crzzr7yMGjMnNoTDGdkrzOJJv-vlFMBeMXgkYYGy8zgfn1r8qP8Wif5MPGtzT2yicORgRkxVGUcxjLwz8glgKD2NM8yG54xZbN8b8Jm-zeYrCwNEn-ZanjtVwfV2JiCWZlR0Ro/s1600/alexa+website+verified.PNG" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Your Mission is Complete.</span></li>
</ul>
<h4 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">From Writer's Desk</span></h4>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">I hope and believe that you understand the tutorial well.I can explain easy as can as I.If you like the post share it with your friends.If you have any problem please comment below or you can send us message through contact us page.</span></div>
<br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<br /></div>
</div>

Blogger SEO Newbies Guide SEO How To submit/add website and Blog To Alexa?

Alexa is global leader in analytic.It is also leading provider of free global web metrics.Search are used to discover more successful sites...

Stylish Note,Announce,success and Warning Boxes for blogger

12:44 5

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;">Hi friends,I hope all of you all fine.Today i present you a very beautiful Blogger widget that i likes it very much.After a long search I find it yet.I present you at this time.Widget is about how add stylish Note,announce,success and warning boxes to blogger step by step Tutorial.These boxes attract reader to get notified.You see these boxes on many sites especially on WordPress based websites.Now it is available on Blogger also.These cute messages boxes inform your visitors and readers because they have professional Look.Warning Messages tells about warning don't do it .Announcement boxes are used to announce latest news and important notification.So are you ready to install this widget.</span><br />
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5cyCsqao_h_q8M4dq4QTesD6rgCSvPWVvEihmgP05BPXr_BhWsFrdcqCcHiMAtnseJs8BvqQyS7g63HLmlPEAL8Ige3qsFP1sVlho-IC60msjRfJjFZIK6NdFte_HKrDzY83CdVNBGc/s1600/Stylish+Notification+Message+Boses+for+blogers.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5cyCsqao_h_q8M4dq4QTesD6rgCSvPWVvEihmgP05BPXr_BhWsFrdcqCcHiMAtnseJs8BvqQyS7g63HLmlPEAL8Ige3qsFP1sVlho-IC60msjRfJjFZIK6NdFte_HKrDzY83CdVNBGc/s1600/Stylish+Notification+Message+Boses+for+blogers.jpg" width="400" /></a></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Steps to Added to Blogger</span></h2>
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Step 1: Installation</span></h2>
<div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Go to Blogger Dashboard >> Template >> Edit Template</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Find the below code By Pressing <b>CTRl+F</b></span></li>
</ul>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"> ]]></b:skin></span></blockquote>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Paste the following CSS above find code</span></li>
</ul>
</div>
<div>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;">@font-face {<br />    font-family: 'Open Sans';<br />    font-style: normal;<br />    font-weight: 400;<br />    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');<br />  }<br />  @font-face {<br />    font-family: 'Open Sans';<br />    font-style: normal;<br />    font-weight: 700;<br />    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');<br />  }<br /><br />  .message_box {<br />    margin:15px 0;<br />  }<br />  .note {<br />    color:#666;<br />    font-family:"Open Sans";<br />    font-size:16px;<br />    border:1px solid #FDEBA5;<br />    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbRk8FuUJoclbvId-69G-CG23SSDXLF4x7CQ9T1d2gvuEq_N-oh-5jYnY_1oD0ljUujvL0Dr4KwkXrm7vRO0FOx9xlUEylfJbACVteWeSt3xE9sdKn6RT1cTVl7FtjIhUh9tFz17f9Ez7/s1600/thumb.png) no-repeat scroll 10px center #FEF4C8;<br />    padding:.5em 1em .5em 3em;<br />  }<br />  .announce {<br />    color:#666;<br />    font-family:"Open Sans";<br />    font-size:16px;<br />    border:1px solid #BEE5F8;<br />    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvI1w-DRJgiM7mJ_yoMQH9G5LAEr0q5J1dM-sh_CdsMRw1j8y3KQeuuFkgA7ltG8qwaRQoLUEOu7zQIA07yK5md6g8tOCTrfCpLjRs91ckOlGL-CaGN2t2fMY5uXLqP7JERNZ-iLm0tAg3/s1600/speaker.png) no-repeat scroll 10px center #D7EFFB;<br />    padding:.5em 1em .5em 3em;<br />  }<br />  .success {<br />    color:#666;<br />    font-family:"Open Sans";<br />    font-size:16px;<br />    border:1px solid #DEF1BF;<br />    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGF_CVi8u_zsEr0n0io8JByUNQ1a-kmKH9VhWQxvqt6luJoJWRhEPNHDK4zoJ1Bx6z1qqxwMMTA3iuYCPfsZSVNOmGjhTd3tAUG2EYSDo-FXH2oySu22_FM5ZOSMPV4im6UrSn4y-KPh6a/s1600/tick.png) no-repeat scroll 10px center #E8F6D2;<br />    padding:.5em 1em .5em 3em;<br />  }<br />  .warning {<br />    color:#666;<br />    font-family:"Open Sans";<br />    font-size:16px;<br />    border:1px solid #FFDBDB;<br />    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiblYGcXfwCnRO2YsdEIUclYF7bHqT7RID0qYmvqitdTVuK7CkAFrHyNlEPr_K4oxs3GuN9NdUB_v0buQ7E7LLNyVDOLVGecnC2aqMOZM9WTuSA4kWpQEf4SOcrgWD6rM0SdjaMW7b8bNIL/s1600/cross.png) no-repeat scroll 10px center #FFE7E7;<br />    padding:.5em 1em .5em 3em;<br />  }</span></blockquote>
</div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Save Template</span></li>
</ul>
</div>
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Step 2: Creating These Boxes In Blogger Post</span></h2>
<div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Go to Blogger Dashboard >> <b>Posts</b> >> <b>Create New Post</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Select the <b>HTML Tab</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Choose any box from the following which you want to add and copy the prospective code.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Paste the Code where you want to show.</span></li>
</ul>
</div>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Stylish Note Box</span></h3>
<div>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><div class="message_box note"><br /><span style="color: red;">  Hi, I am Mr.Noter. I'll notify your readers about the news.</span></div></span></blockquote>
</div>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Announce Box</span></h3>
<div>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><div class="message_box announce"><br /><span style="color: red;">  Mr.Annoucer is having meetup with Blogger Yard's Readers.</span><br /></div></span></blockquote>
</div>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Success Box</span></h3>
<div>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><div class="message_box success"><br />  <span style="color: red;">Mr.Success. Never give up! A day wil come when you will catch me.</span><br /></div></span></blockquote>
</div>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Warning Box</span></h3>
<div>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><div class="message_box warning"><br />  <span style="color: red;">Mr.Warner. I will try my best to warn from such worst things.</span></div></span></blockquote>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Replace <span style="color: red;">Red</span> Highlighted text with your text which you want to show</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Publish the Post and Mission Complete.</span></li>
</ul>
<br />
<h4 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">From Writer's Desk</span></h4>
<span style="font-family: Arial, Helvetica, sans-serif;">I hope that you like it very much as I like it when I see it first time. In case of any problem please free to comment below and send us messages through contact us page.your comments and messages are appreciable for us.<b>Happy Blogging.</b></span></div>
</div>
</div>
</div>

Blogger Trips and Tricks Blogger Widgets and Plugins Stylish Note,Announce,success and Warning Boxes for blogger

Hi friends,I hope all of you all fine.Today i present you a very beautiful Blogger widget that i likes it very much.After a long search I f...

How add Stylish Google+ Followers Widget to Blogger?

10:36 6

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;">Hello everyone,I hope all of you fine.Today I tell you how add a custom <a href="http://plus.google.com/" target="_blank">Google+</a> Follower Widget to Blogger.Google+ is styling and emerging social media owned by Google.It visitors increase day by day.I am also big fan of Google+.It 's my favorite social media.To increase Google+ followers,you need to add it to website or blog.so this tutorial concern that thing.So are you ready to add this on Blogger.There are easy steps to install it.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-HPPIOc7fieSb2sIm8uD5hdeSBO6wQBXuyAS3A-Om_fZocgsoGRvdjkr4bcdislrlmJr24HhUHinX-qZJRq7Gg70HKJg4EdbF7-86YDfpnUQ9k4OXGJFbPJ2LNcZPcH4WxAA2WqerguI/s1600/how+add+stylish+google++followers+widget+to+blogger.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-HPPIOc7fieSb2sIm8uD5hdeSBO6wQBXuyAS3A-Om_fZocgsoGRvdjkr4bcdislrlmJr24HhUHinX-qZJRq7Gg70HKJg4EdbF7-86YDfpnUQ9k4OXGJFbPJ2LNcZPcH4WxAA2WqerguI/s1600/how+add+stylish+google++followers+widget+to+blogger.PNG" width="276" /></a></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="text-align: center;">
<a class="button seagreen medium" href="https://watchtv2013.blogspot.com" target="_blank">Live Demo</a>
</div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<br />
<h4 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Also Read:</b> <a href="http://mybloggersacademy.blogspot.com/2014/04/add-simple-facebook-like-box-to-blogger.html" target="_blank">Add a Facebook Like Box to blogger</a></span></h4>
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Steps to install it on Blogger</span></h2>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Login Blogger  >> Blogger Dashboard  >> Layout</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Add a gadget  >> Scrolling down and open <b>HTML and  JavaScript</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Paste the below code</span></li>
</ul>
<br />
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <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><br /><style><br />.wc-gplusmod, .wc-gplusmod:before, .wc-gplusmod:after { background: #ffffff;  border-radius: 5px 5px 0 0;    border: 1px solid #ccc;  box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2); }<br />.wc-gplusmod {  position: relative;   width:250px;   padding: 1em;   margin: 50px auto; }<br />.wc-gplusmod:before, .wc-gplusmod:after {   content: "";   position: absolute;  left: 0;   top: 0;   width: 100%;   height: 100%;   -webkit-transform: rotateZ(2.5deg);   -o-transform: rotate(2.5deg);   transform: rotateZ(2.5deg);  z-index: -1; }<br />.wc-gplusmod:after {   -webkit-transform: rotateZ(-2.5deg);   -o-transform: rotate(-2.5deg);   transform: rotateZ(-2.5deg); } </style> <div class="wc-gplusmod"><div class="g-plus" data-action="followers" data-height="290" data-href="<span style="color: red;">https://plus.google.com/112126372822486069948</span>?prsrc=2" data-source="blogger:blog:followers" data-width="290"> </div> </div></span></blockquote>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Replace the red Highlighted area with your Google+ Username</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Save and Mission Complete </span></li>
</ul>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><b>In case of any problem please comment below or contact us.Your comments and messges is appreciable for us.Happy Blogging.</b></span></div>
</div>

Blogger Widgets and Plugins How add Stylish Google+ Followers Widget to Blogger?

Hello everyone,I hope all of you fine.Today I tell you how add a custom Google+ Follower Widget to Blogger.Google+ is styling and emerging...

Add a simple Facebook Like Box to Blogger

06:33 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;">Facebook is most used social media website that generates million of billions visitors to your blog and Website.Facebook is a Place where people share everything which they was to spread around globe.So this widget become very popular for <a href="http://blogger.com/" target="_blank">Blogge<span id="goog_2120746812"></span><span id="goog_2120746813"></span>rs</a> and SEO's. If you have good amount of Facebook followers and likes,then you generate a handsome amount of visitors to your website.Today I tell you how add <a href="http://facebook.com/" target="_blank">Facebook</a> like box to blogger easily.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBCNpxe7FoGTTtVG80MSAt07wwq0ePr0sXWrDClnRA__RIUPank_gpQV3RrdwTuzbcDPpcwGj79UquomZM1TnxmDdaAnyhrQyydguL0qVpowQw5wQMUzbrwYuvHUyBjKEBLyax7IFExUk/s1600/simple+facebook+like+box+for+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBCNpxe7FoGTTtVG80MSAt07wwq0ePr0sXWrDClnRA__RIUPank_gpQV3RrdwTuzbcDPpcwGj79UquomZM1TnxmDdaAnyhrQyydguL0qVpowQw5wQMUzbrwYuvHUyBjKEBLyax7IFExUk/s1600/simple+facebook+like+box+for+blogger.png" width="315" /></a></div>
<br />
<h4 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b><span style="font-size: large;"> </span></b><a href="http://mybloggersacademy.blogspot.com/2014/03/how-add-professional-facebook-popup.html" target="_blank">Add  Professional popup Facebook Like To Blogger</a></span></h4>
<h4 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">  <a href="http://mybloggersacademy.blogspot.com/2013/11/20-different-styles-facebook-fan-box.html" target="_blank">20 Different stylish of Facebook Like box to Blogger</a> </span></h4>
<h4 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://mybloggersacademy.blogspot.com/2014/04/add-socializing-widget-for-blogger.html" target="_blank">Add a Socializing widget below post content to Blogger</a></span></h4>
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Steps to install in Blogger</span></h2>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Login in your blogger Account >> Blogger Dashboard</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Then go to Layout  >> Add a gadget</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Scrolling down and Select HTML and JavaScript.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Paste the below code in HTML and JavaScript area</span></li>
</ul>
<br />
<blockquote class="tr_bq" style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F<span style="color: red;">mybloggingacademy</span>&amp;width=300&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=564667783624008" scrolling="no" frameborder="0" style="border:none; overflow:hidden; <span style="color: orange;">width:300</span>px; <span style="color: lime;">height:290</span>px;" allowTransparency="true"></iframe></span></blockquote>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;"> Replace the red higlighted area with your Facebbok Page Name</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Change the width and height of your widget by changing higlighted area. </span><span style="color: orange; font-family: Arial, Helvetica, sans-serif;">width:300</span><span style="font-family: Arial, Helvetica, sans-serif;">px; </span><span style="color: lime; font-family: Arial, Helvetica, sans-serif;">height:290</span><span style="font-family: Arial, Helvetica, sans-serif;">px;</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Hit save Mission Complete</span></li>
</ul>
</div>

Blogger Widgets and Plugins Add a simple Facebook Like Box to Blogger

Facebook is most used social media website that generates million of billions visitors to your blog and Website.Facebook is a Place where p...

Fancy CSS3 and jQuery Menu for Blogger

22:53 1

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;">Hello friends,I hope all of you are,In previous post,a beautiful socializing widget present you.Today i have a great post about fancy and attractive lavalamp menu for blogger.This menu has different colors,choose according to your website color which is suitable for it.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOvROVKJ6eklOI5YCfAFuiK14boCuYEJT4-ikBpqhZBrAw6z0hfcLETzaIhC1eIXOTV_QeTgeCZRujEfr2TvSOmoj1LgpEksnAvbh7rcvvpdkHjXip-HnsvfVIJMGM6-3U7J8hFV94FE/s1600/fancy-css3-jquery-menu-for-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="259" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOvROVKJ6eklOI5YCfAFuiK14boCuYEJT4-ikBpqhZBrAw6z0hfcLETzaIhC1eIXOTV_QeTgeCZRujEfr2TvSOmoj1LgpEksnAvbh7rcvvpdkHjXip-HnsvfVIJMGM6-3U7J8hFV94FE/s1600/fancy-css3-jquery-menu-for-blogger.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a class="button seagreen small" demo-bloggingacademy.blogspot.com="" href="https://www.blogger.com/null" http:=""><br /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a class="button seagreen small" demo-bloggingacademy.blogspot.com="" href="http://demo-bloggingacademy.blogspot.com/" http:="" target="_blank">Live Demo </a></div>
<br /></div>
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">How add it to Blogger?</span></h2>
<span style="font-family: Arial, Helvetica, sans-serif;">For your understanding,I divide the tutorials in three parts</span><br />
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Adding Scripts</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Adding Styles</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Adding Menu and Change color</span></li>
</ul>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Adding Scripts</span></h3>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Go to Blogger Dashboard >>  Template  >> Edit HTML</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Find the Below code in your template</span></li>
</ul>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"></head></span></blockquote>
<br />
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Paste the below code just above the find code (If you already added jQuery Library to your blog then remove the highlighted area )</span></li>
</ul>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script></span> <script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script> </span></blockquote>
<br />
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Adding Styles</span></h3>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Now again find the below code</span></li>
</ul>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;">]]></b:skin></span></blockquote>
<br />
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Paste the below CSS code just above/before it</span></li>
</ul>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;">.lavalamp { position: relative; border: 1px solid #d6d6d6; background: #fff; padding: 15px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); height: 18px; font-family: calibri; } .magenta { background : rgb(190,64,120); background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); border: 1px solid #841144; } .cyan { background : rgb(64,181,197); background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); border: 1px solid #2f8893; } .yellow { background : rgb(255,199,79); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); border: 1px solid #c08c1f; } .orange { background : rgb(255,133,64); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); border: 1px solid #c04f11; } .dark { background : rgb(89,89,89); background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); border: 1px solid #272727; } .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{ color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.40); } .lavalamp a { text-decoration: none; color: #262626; line-height: 20px; } .lavalamp ul { margin: 0; padding: 0; z-index: 300; position: absolute; } .lavalamp ul li { list-style: none; float:left; text-align: center; } .lavalamp ul li a { padding: 0 20px; text-align: center; } .floatr { position: absolute; top: 10px; z-index: 50; width: 70px; height: 30px; border-radius : 8px; -moz-border-radius : 8px; -webkit-border-radius : 8px; background : rgba(0,0,0,.20); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; }</span></blockquote>
<br />
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Save Template</span></li>
</ul>
<br />
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Adding Menu and Change Color</span></h3>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Go to blogger Dashboard >> Layout  >> <b>Add a Gadget (Below Header)</b></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Select the<b> HTML and JavaScript</b> and Paste the below code</span></li>
</ul>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: orange;"><div class="lavalamp dark"> <ul></span> <li class="active"><a href="">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">Back to Article</a></li> <li><<a href="#">How it Works?</a></li> </ul> <div class="floatr"></div> </div></span></blockquote>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;"> Replace <span style="color: blue;">#</span> with your Link</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Replace <span style="color: lime;">Home,about,blog,Services</span> with your name</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">If you want to change the color then replace the code  <span style="color: orange;"><div class="lavalamp dark"> </span>with one of the code below</span></li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtR_nTzUF4LWQGdMTRu_OrOBMdbUVkxa_y1jbIwvH1vsMtOMQ9ZvrEiy6rQ4Tn2_j-SBj05Z2wtZ9tr3zqdlJsIQ8D4Hsq7WxmA8pQLUnn7NuYQw6yRbjo2SQYlekAgCVyd-bQhVT-fQI/s1600/fancy+menu+for+blogger.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtR_nTzUF4LWQGdMTRu_OrOBMdbUVkxa_y1jbIwvH1vsMtOMQ9ZvrEiy6rQ4Tn2_j-SBj05Z2wtZ9tr3zqdlJsIQ8D4Hsq7WxmA8pQLUnn7NuYQw6yRbjo2SQYlekAgCVyd-bQhVT-fQI/s1600/fancy+menu+for+blogger.PNG" width="383" /></span></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Save your widget and successfully added it to Blogger</span></li>
</ul>
<h4 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">From Writer's Desk</span></h4>
<span style="font-family: Arial, Helvetica, sans-serif;">I hope you understand this tutorial very well,I can explain as i can.In case of any problem please comment below your comment is appreciated for us.</span><br />
<br /></div>

Blogger Widgets and Plugins Fancy CSS3 and jQuery Menu for Blogger

Hello friends,I hope all of you are,In previous post,a beautiful socializing widget present you.Today i have a great post about fancy and ...

Add a Socializing Widget For Blogger Below Post Content

10:56 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;">Hello Friends,I hope all of you fine.In the previous Post I tell <a href="http://mybloggersacademy.blogspot.com/2014/03/how-add-professional-facebook-popup.html" target="_blank">how you add professional popup Facebook Like Box</a>.Now  I present a beautiful Social Widget Below post content. Everyone have a desire that it generate more and more traffic for his Blog and Website.There are many methods to boost your traffic,Social Media is also an important source to generate traffic.Now a days,Facebook,twitter,Google+ plays an important role to generate traffic.This widget is designed by <a href="https://plus.google.com/+MohammedYaqoob" target="_blank">Muhammad yaqoob</a> owner of <a href="http://bloggeryard.com/">Bloggeryard.com</a>.I thankful to him for providing such a nice social widget</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixLXRcFDHha9uJ-0KO0Fr5zN_qk-o1JcnJtY_1KZ3slvsB_GUWiW5ig2JWWXTKSJfYHLMwQfEwocvPo1nZSK95S51ieFyPDYUQed3QYdLmMBQrkXWtpWyQuZG2rKSX7HpufxaFBsW1Bac/s1600/socializing+widget+below+post+for+blogger.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixLXRcFDHha9uJ-0KO0Fr5zN_qk-o1JcnJtY_1KZ3slvsB_GUWiW5ig2JWWXTKSJfYHLMwQfEwocvPo1nZSK95S51ieFyPDYUQed3QYdLmMBQrkXWtpWyQuZG2rKSX7HpufxaFBsW1Bac/s1600/socializing+widget+below+post+for+blogger.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a class="button seagreen small" href="http://demo-bloggingacademy.blogspot.com/2014/04/social-media-widget-below-post.html">Live Demo </a>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">At the top of widget,there is stylish and attractive heading,you can change it according to your choice</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">There are three position of widget,at top portion you can like,tweet and +1 your post content</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">In middle portion,you can like <a href="http://facebook.com/" target="_blank">Facebook</a> page and follow on twitter widget,It is most important for gaining more likes and followers.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">In the last,there is social media like Facebook,Google+,pinterest,twitter haring widget.I just only say that there are three different and most important widget in one widget means 3 in 1 pack.</span></li>
</ul>
<div>
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Steps To Install it On Blogger</span></h2>
</div>
<div>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Login in Blogger >> Blogger Dashboard  >> Template  >> Edit template</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Find The below Code</span></li>
</ul>
</div>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><data:post.body/></span></blockquote>
<div>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Paste the given below code after the code you find.</span></li>
</ul>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<blockquote>
<span style="font-family: Arial, Helvetica, sans-serif;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"> <style></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">#byard-socializer {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    width: 500px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    height: 240px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    border: 1px solid #ddd;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    -webkit-box-shadow0px 7px 9px rgba(50, 50, 50, 0.75);</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">-moz-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    background: #f1f1f1;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    -transition: background 0.50s;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    -webkit-transition: background 0.50s;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    -moz-transition: background 0.50s;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    margin-bottom: 10px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    overflow: hidden;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">#byard-socializer:hover {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    background: #fff;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">#byard-socializer-title {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    text-align: center;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    border: 1px solid #2aa4cf;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    font-size: 20px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    background: #2aa4cf;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    font-weight: 2000;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    font-family: oswald;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    padding: 5px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    color: #fff;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">#SocializeIt {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    float: left;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    border-top: 1px solid #eaeaea;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    border-bottom: 1px solid #eaeaea;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    margin-left: -10px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    margin-top: 10px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">.tweet, .like, .plusone, .stumbleit {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    float: left;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    border-left: 1px solid #eaeaea;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    padding-left: 18px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    padding-top: 15px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    padding-bottom: 10px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">.g-plusones {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    margin-left: 20px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">.heading {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    float: left;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    padding-right: 20px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    padding-top: 15px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    text-transform: uppercase;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    font-weight: bold;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    margin: 0px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    padding-left: 30px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    font-family: oswald;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">#followus, #share {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    float: left;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    border-bottom: 1px solid #eaeaea;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    margin-left: -10px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">.likeonfb, .followontwitter, .sharing {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    float: left;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    border-left: 1px solid #eaeaea;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    padding-left: 10px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    padding-bottom: 10px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    padding-top: 15px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">#sw-credits {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    float: right;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    padding: 3px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    font-size: 10px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    margin-right: 10px;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">}</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"></style></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   <script type='text/javascript'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">(function (_0x2162x1, _0x2162x2, _0x2162x3) {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    var _0x2162x4 = _0x2162x1[&#39;getElementsByTagName&#39;](_0x2162x2)[0];</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    if (!_0x2162x1[&#39;getElementById&#39;](_0x2162x3)) {</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">        _0x2162x1 = _0x2162x1[&#39;createElement&#39;](_0x2162x2);</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">        _0x2162x1[&#39;id&#39;] = _0x2162x3;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">        _0x2162x1[&#39;src&#39;] = &#39;//platform.twitter.com/widgets.js&#39;;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">        _0x2162x4[&#39;parentNode&#39;][&#39;insertBefore&#39;](_0x2162x1, _0x2162x4);</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    };</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">})(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   </script></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><script type='text/javascript'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    var switchTo5x = false;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"></script></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><script type='text/javascript'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    stLight.options({</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">            publisher: &quot;</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">            ede9503f - 57ea - 4698 - a245 - 17187b93fa50 &quot;, doNotHash: false,</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">            doNotCopy: false,</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">            hashAddressBar: false</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">        });</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"></script></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"> <center></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><div id='byard-socializer'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"> <div id='byard-socializer-title'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"> <span style="color: red;">  Socializer Widget By Blogger Yard</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"> </div></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"> <div id='SocializeIt'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">  <font class='heading'>SOCIALIZE IT &#8594;</font></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">  <div class='tweet'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">  </div></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">  <div class='like'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   <iframe allowtransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">  </div></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">  <div class='plusone'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   </div></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">  </div></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">  <div id='followus'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   <font class='heading'>FOLLOW US &#8594;</font></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   <div class='likeonfb'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FBloggerYard&amp;send=false&amp;layout=button_count&amp;width=77&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21' style='border:none; overflow:hidden; width:77px; height:21px;'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   </div></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   <div class='followontwitter'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    <a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/<span style="color: #4c1130;">BloggerYard</span>' rel='nofollow'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   </div></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">  </div></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">  <div id='share'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   <font class='heading'>SHARE IT &#8594;</font></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   <div class='sharing'></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    <span class='st_facebook_large' displaytext='Facebook'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    <span class='st_twitter_large' displaytext='Tweet'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    <span class='st_googleplus_large' displaytext='Google +'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    <span class='st_pinterest_large' displaytext='Pinterest'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    <span class='st_linkedin_large' displaytext='LinkedIn'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    <span class='st_stumbleupon_large' displaytext='StumbleUpon'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    <span class='st_email_large' displaytext='Email'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">    <span class='st_sharethis_large' displaytext='ShareThis'/></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">   </div></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">  </div></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"> </div></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"> </center></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"> </b:if></span></blockquote>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Replace <span style="color: red;">Social Widget By Blogger Yard</span> according to your choice</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Replace<span style="color: #4c1130;"> Bloggeryard</span> with your Facebook and twitter userame</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Save Template mission complete</span></li>
</ul>
<h4 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">From Writer's Desk</span></h4>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">I hope you like this widget very much,It is most important and attractive widgets.I recommended you to implement it and then see its benefit.If you have any problem then contact us or comment below.Happy Blogging and Again Say thanks to Bloggeryard.com owned by Muhammad Yaqoob who designed such a nice socializer widget.</span></div>
<div>
<br /></div>
</div>

Blogger Widgets and Plugins Add a Socializing Widget For Blogger Below Post Content

Hello Friends,I hope all of you fine.In the previous Post I tell how you add professional popup Facebook Like Box .Now I present a beauti...

How add Professional Facebook Popup Like Box to Blogger?

05:22 1

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDuogfMi_VFH13ZiWzvFr-RH78gPfBtAEcq6ROxV1gOavIeUX9Dy24LbswzHTeUWPOQwV5mT7RW0G_7q9-rQbXOiOMBIr3QSwJbhC6WHwoIQHkroykXWDYCqLTZ-Wi03KyUEe1s9z27sc/s1600/popup+facebook+like+box+for+blogger.PNG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDuogfMi_VFH13ZiWzvFr-RH78gPfBtAEcq6ROxV1gOavIeUX9Dy24LbswzHTeUWPOQwV5mT7RW0G_7q9-rQbXOiOMBIr3QSwJbhC6WHwoIQHkroykXWDYCqLTZ-Wi03KyUEe1s9z27sc/s1600/popup+facebook+like+box+for+blogger.PNG" width="309" /></a><span style="font-family: Arial, Helvetica, sans-serif;">Hello friends,I hope all of you fine and leading a happy life with friends and family. In.In previous Post i discussed about Some <a href="http://mybloggersacademy.blogspot.com/search/label/SEO" target="_blank">seo</a> tips for blogger especially newbies.Now i present you beautiful Facebook popup lies box.Everyone know that <a href="http://facebook.com/" target="_blank">Facebook</a> is most used social media around globe and it generates larges number of visitors.Some popup widgets creates problems for visitors but this widget is wonderful creates no problem because it has close button everyone can close it easily.Main thing is that it shows on cookies.If we set day 1, If visitor visit the site and it experience this widget.If visitor visit on same day Popup box don't show due to cookies,It shows after one day.I hope you understand it well.I am new entrepreneur so ignore it.Below I describe the steps to which we easily add to Blogger Blog/website.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><b><a href="http://lab1-pkwebdesigning.blogspot.com/" target="_blank">Live Demo</a></b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><br /></span>
<br />
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;"><b><a href="http://mybloggersacademy.blogspot.com/2013/10/add-twitter-popup-followers-box-for.html" target="_blank">Add Popup Twitter Follower Box for Blogger</a></b></span></li>
</ul>
</div>
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
Steps to add it</span></h2>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Login Blogger and Go to Blogger Dashboard</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Select Template >> Edit Template</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Find the Following code</span></li>
</ul>
<blockquote class="tr_bq">
<ul style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">
</head></span></ul>
</blockquote>
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">When you find above code,paste below code just above<b> it.</b></span></li>
</ul>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/> 
<script type='text/javascript'> 
jQuery(document).ready(function(){ 
if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) { 
var setDays = 1000*60*60*24<span style="background-color: transparent;"><span style="color: #cc0000;"><b>*5</b></span></span>; 
var expires = new Date((new Date()).valueOf() + setDays); 
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString(); 
$.colorbox({width:&quot;400px&quot;, height:&quot;430px&quot;, inline:true, href:&quot;#facebook-popup&quot;}); 
}});</script> </span></blockquote>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><b><u>Note:</u></b> <span style="color: #e06666;">*5</span> setting this value refreshment of cookies.I have set the like box appear after 5 days once visitor visit it and then again after 5 days it shows it.You can change it from 1 to 7,If you select 1 then it annoy the visitors.</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Again search the following code and it similar like this (show in picture.)</span></li>
</ul>
<blockquote class="tr_bq">
<ul style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">
</b:skin></span></ul>
</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5VKbYHBqnKRMHhc6zzFkY8cxNJRLrN6-Bqka7YqgoTJL8rrGqOKReTMeGjDbMyCYdMjNbYuYf4vO2qqIXW47pbCyoc5Liq6caZVKoUPMwSuLNViYoQT1i8rAGicKZ2srvPocjMuRtKZM/s1600/blogging+academy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5VKbYHBqnKRMHhc6zzFkY8cxNJRLrN6-Bqka7YqgoTJL8rrGqOKReTMeGjDbMyCYdMjNbYuYf4vO2qqIXW47pbCyoc5Liq6caZVKoUPMwSuLNViYoQT1i8rAGicKZ2srvPocjMuRtKZM/s1600/blogging+academy.png" width="400" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Paste the following code just before above this tag  <b></b:skin></b></span></li>
</ul>
<blockquote class="tr_bq">
<ul style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">
/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; } #colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqTew_FY0HMmqazflWUDHuu0c5zGNUBWkF6WIK8RZMxaOlDjKdRXXNcYRNS-O_9g6S5dX8fcZlWGS3p-a_fPB5x8wwZXpMk170h68gjgPkWHoPV3Yqu3KYVCtKpXdMMAahVax0Cpafoc_8/s32/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnW7tzdsgQhD20LPsCOZCbFOu5dhCOHFBJ2tewTKj4itCmzmkuovRRbe8shUj2VPg79LT6zI0ZyeWBQ_tXt3WBbNlA-sbVU4byv1D5h1brdU0A4fPJCuGK0KJGTvBsWUV5_YfTmYQv5F7_/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }</span></ul>
</blockquote>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Save your Template and It is 2nd last step </span></li>
</ul>
<div>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Now we move on last steps</span></h3>
</div>
<div>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Now find below code</span></li>
</ul>
<br />
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"></body></span></blockquote>
</div>
<div>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Paste the following code just before and above this code  <b></body></b></span></li>
</ul>
</div>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><div style='display:none'> 
<div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'> 
<div style='text-align:center;padding-top:15px'> <h3 style='font-family: &apos;Source Sans Pro&apos;, Sans Serif; Font-size: 18px; font-weight: 300px; '>Receive All Free Updates Via Facebook.</h3> 
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: #cc0000;"><b>mybloggingacademy</b></span>&amp;width=342&amp;height=300&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/> 
  </div> 
  </div> 
    </div></span></blockquote>
<br />
<ul style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;"> Save Template you done your Job Perfectly.</span></li>
</ul>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;">Note: Bold and Red highlighted area replace with your Facebook Fan Page address.</span><br />
<h4 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">From Writer's Desk</span></h4>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">I hope you understand all these steps easily.I can explain simply as I can.If you lie this widget share it with your friends and <b style="color: #6fa8dc;">Happy Blogging.</b> In case of any problem <a href="http://mybloggersacademy.blogspot.com/p/contact-us.html" target="_blank">contact me</a> or comment below</span></div>
</div>