NicksLogy.Tech: WIDGETS

How To Add Drop Down Navigation Menu In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBCXQHcR-b8e20-0uMLzE9i9J2Fe4ApibVPBZPCt1cTbvmOBTgVyA336BksbVGagQP_olNlh9CtHnhoHMK6HdpvM3XaMLs_d41x1XgYqDyP7RJygwzU9SefJDxiyoYfHrbNZ5D4g4CHshS/s1600/Drop+Down+Menu.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Drop Down Menu" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBCXQHcR-b8e20-0uMLzE9i9J2Fe4ApibVPBZPCt1cTbvmOBTgVyA336BksbVGagQP_olNlh9CtHnhoHMK6HdpvM3XaMLs_d41x1XgYqDyP7RJygwzU9SefJDxiyoYfHrbNZ5D4g4CHshS/s1600/Drop+Down+Menu.jpg" title="Drop Down Navigation Menu" /></a></div>
Previously, I shared a tool by which bloggers can check and correct the grammatical mistakes
 in their articles and Today I’m going to share the simple drop down 
navigation menu for blogger. This is important for every blogger to make
 the navigation easier of their blogs due to several reasons and drop 
down navigation  menu is an ideal thing for it. In these kind of menus, 
when someone hovers the mouse cursor on any specific category then it 
drops some sub categories of it in the vertical style. And due to this 
effect, it is known as best menu style. Well, before installing this in 
your blog first let me tell you something about this.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="4558130384"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />

<h3 style="text-align: left;">
Drop Down Navigation Menu</h3>
<div>
This is the simple drop down navigation menu which is built with 
pure HTML, CSS3 and JQuery. It has a gray color because it is user 
friendly and it will not affect the visitors’ eyes. You know some heavy 
colors like Purple, Blue and Orange affect the visitors’ eyes and most 
web designers use light colors. So this menu shows the vertical sub 
categories when you’ll place the mouse on any drop down menu. It also 
has a focus or click effect. You can have a look at this by visiting the
 below demo link.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="4558130384"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<h3 style="text-align: left;">
Tutorial</h3>
Tutorial of installing this menu is your blog is just left hand 
game. Yeah! It is simply easy. So, follow the below given steps and add 
it.
<ol style="text-align: left;"><ol style="text-align: left;">
<li>Go To Blogger >> Layout >> Add a Gadget (In The Header Area)</li>
<li>Choose “HTML/JavaScript”</li>
<li>Paste The Following Code In The Content Box</li>
</ol>
</ol>
<blockquote>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”><br />
</script><br />

//When hovering over the main nav link we find the dropdown menu to the corresponding link.<br />
$(‘#dropdown_nav li’).hover(function() {<br />
//Find a child of ‘this’ with a class of .sub_nav and make the beauty fadeIn.<br />
$(this).find(‘.sub_nav’).fadeIn(100);<br />
}<br />
, function() {<br />
//Do the same again, only fadeOut this time.<br />
$(this).find(‘.sub_nav’).fadeOut(50);<br />
}<br />
);<br />
}<br />
);<br />
</script><br />
<style><br />
#dropdown_nav a {<br />
font-family:Arial, Sans-Serif;<br />
font-size:15px;<br />
font-weight:bold;<br />
color:#525252;<br />
text-decoration:none;<br />
}<br />
#dropdown_nav {<br />
width:960px;<br />
padding:0px;<br />
display:inline-block;<br />
list-style:none;<br />
-moz-box-shadow:inset 0px 0px 1px #fff;<br />
-webkit-box-shadow:inset 0px 0px 1px #fff;<br />
border:1px solid #ccc;<br />
-moz-border-radius:5px;<br />
-webkit-border-radius:5px;<br />
background:#e2e2e2;<br />
background:-moz-linear-gradient(#f3f3f3, #e2e2e2);<br />
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));<br />
}<br />

#dropdown_nav li {<br />
padding:10px 0px 10px 0px;<br />
float:left;<br />
position:relative;<br />
display:inline-block;<br />
}<br />

#dropdown_nav li a {<br />
padding:10px 15px 10px 15px;<br />
text-shadow:-1px 1px 0px #f6f6f6;<br />
-moz-box-shadow:inset 0px 0px 1px #fff;<br />
-webkit-box-shadow:inset 0px 0px 1px #fff;<br />
border-right:1px solid #ccc;<br />
}<br />
#dropdown_nav li a:hover {<br />
background:#f9f9f9;<br />
background:-moz-linear-gradient(#f9f9f9, #e8e8e8);<br />
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));<br />
}<br />
#dropdown_nav li a:active {<br />
background:#e2e2e2;<br />
background:-moz-linear-gradient(#e2e2e2, #f3f3f3);<br />
background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));<br />
}<br />

#dropdown_nav li a.first {<br />
-moz-border-radius:5px 0px 0px 5px;<br />
-webkit-border-radius:5px 0px 0px 5px;<br />
}<br />
/*#dropdown_nav li a.last {<br />
-moz-border-radius:0px 5px 5px 0px;<br />
-webkit-border-radius:0px 5px 5px 0px;<br />
}<br />
*/<br />

/* Sub-Nav styling */<br />
#dropdown_nav .sub_nav {<br />
width:160px;<br />
padding:0px;<br />
position:absolute;<br />
top:38px;<br />
left:0px;<br />
border:1px solid #ccc;<br />
background:#e2e2e2;<br />
}<br />

#dropdown_nav .sub_nav li {<br />
width:160px;<br />
padding:0px;<br />
}<br />

#dropdown_nav .sub_nav li a {<br />
display:block;<br />
border-bottom:1px solid #ccc;<br />
background:-moz-linear-gradient(#f3f3f3, #e2e2e2);<br />
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));<br />
}<br />
#dropdown_nav .sub_nav li a:hover {<br />
background:#f9f9f9;<br />
background:-moz-linear-gradient(#f9f9f9, #e8e8e8);<br />
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));<br />
}<br />
#dropdown_nav .sub_nav li a:active {<br />
background:#e2e2e2;<br />
background:-moz-linear-gradient(#e2e2e2, #f3f3f3);<br />
background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));<br />
}<br />
</style><br />
<!– Navigation Start –><br />
<ul id=”dropdown_nav”><br />
<li><a class=”first” href=”<span style="background-color: yellow;">http://www.bloggeryard.com/</span>“><span style="background-color: #6aa84f;">Home</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Tutorials</span></a><br />
<ul class=”sub_nav”><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Photoshop #1</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Photoshop #2</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Photoshop #3</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Photoshop #4</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Photoshop #5</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Photoshop #6</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Photoshop #7</span></a></li><br />
</ul><br />
</li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Artciles</span></a><br />
<ul class=”sub_nav”><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Announcements #1</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Announcements #2</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Announcements #3</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Announcements #4</span></a></li><br />
</ul><br />
</li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Freebies</span></a><br />
</li><br />
<li><a class=”last” href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Other Stuff</span></a><br />
<ul class=”sub_nav”><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Other Stuff #1</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Other Stuff #2</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Other Stuff #3</span></a></li><br />
<li><a href=”<span style="background-color: yellow;">#</span>“><span style="background-color: #6aa84f;">Other Stuff #4</span></a></li><br />
</ul><br />
</li><br />
</ul></blockquote>
<ol style="text-align: left;">
<li>Replace Yellow Highlighted Characters With Links</li>
<li>Replace Green Highlighted Characters With Link Text</li>
<li>Click “Save” Button</li>
<li>That’s All!</li>
</ol>
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="4558130384"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

How To Add Drop Down Navigation Menu In Blogger

Previously, I shared a tool by which bloggers can check and correct the grammatical mistakes in their articles and Today I’m going to sh...

Best Tool For Bloggers To Correct Grammatical Mistakes

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQICfSIfQpHRwNV3vTtsxSvSAdM9Lr1RfoA_h4yiCH-M5k6gaNvl99y62C1Vo0IMPN3lzNO7VZpMSzWfGYaiV3IJQu6WDam9RhuUeAhVXJeXqbUU9fo-gFytmLftpoDJe-zE0mTGt9nfSh/s1600/Improve+Grammatical+Mistakes.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Improve Grammatical Mistakes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQICfSIfQpHRwNV3vTtsxSvSAdM9Lr1RfoA_h4yiCH-M5k6gaNvl99y62C1Vo0IMPN3lzNO7VZpMSzWfGYaiV3IJQu6WDam9RhuUeAhVXJeXqbUU9fo-gFytmLftpoDJe-zE0mTGt9nfSh/s1600/Improve+Grammatical+Mistakes.jpg" title="Improve Grammatical Mistakes" /></a></div>
<span></span><span></span>Blogging needs so many skills to properly 
manage a blog. Content writing is one of the most important skill that 
every blogger must know. In content writing there are some other things 
like informative articles writing skill, making articles search engine and user friendly.
 If you’re English speaking person then you will not face many things 
but if you’re non English speaking then you may be making huge 
grammatical mistakes in your articles. So today in this post, I have 
brought the best tool for bloggers by which they can check and correct 
grammatical errors in their articles. Even  I’m also using this tool to 
find out mistakes in articles so I thought why not share it with my 
loyal readers.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="4558130384"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
<h3 style="text-align: left;">
Ginger Software – Grammar and Spell Checker and Corrector</h3>
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikHFB0rzj2XuOK_g9EFIuNlTwmgNbSDdg20JrEiaR8hP58zbhR5DIZc7mIdASoC_8MKZMty8p4ZvMb362BKCnau7MVmAANB_tO_3RDrMYUnV5p4dvP7A0Kg8BdDmGF6vlPzT7V9jiQLiYJ/s1600/Ginger+Software.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Ginger Software" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikHFB0rzj2XuOK_g9EFIuNlTwmgNbSDdg20JrEiaR8hP58zbhR5DIZc7mIdASoC_8MKZMty8p4ZvMb362BKCnau7MVmAANB_tO_3RDrMYUnV5p4dvP7A0Kg8BdDmGF6vlPzT7V9jiQLiYJ/s1600/Ginger+Software.png" title="Ginger Software - Grammar and Spell Checker and Corrector" /></a></div>
<div>
This is the <a href="http://www.gingersoftware.com/" rel="nofollow" target="_blank" title="Ginger Software">Ginger Software</a>
 which checks the grammatical and spelling errors in text documents. 
This is helpful for Bloggers, students, employees, office workers and 
all for those who use to write the documents. After installing this on 
your computer, you can use it anywhere. I mean it works everywhere. You 
can use it in Microsoft Office files, WordPad or NotePad, Browsers, 
Social Sites and even in the post editor. Yeah! It also works in the 
post editor that’s why I’ve used the best degree with it. </div>
<h3 style="text-align: left;">
How This Works?</h3>
<div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="4558130384"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
First, You’ll need to download and install it on your computer. 
Then it will also install some extensions for chrome and internet 
explorer automatically. After completing the installation, You’ve to 
write or open the document in which you want to check grammatical 
errors. Now here you’ve to wait just 5 seconds and then it will 
highlight the mistakes in that text. Simply, hover on that highlighted 
error, it will show the correction and then click on the correction to 
correct that error. Was this difficult ?</div>
<h3 style="text-align: left;">
Why Bloggers Should Correct Grammatical Errors?</h3>
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTgwMXb1erDVQB2MrY61sVoqmp0M5ywuVcLzPznosCD_LJOmgZKuF1cQ0rR140_M1ICx5tkfk9-sHSWjjrRoOmboY58wjebXawUNpI5nxodI1eIwVbVq652xfuNvJWyt-MTkxKmn_6wjOR/s1600/Little+Boy+Thinking.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Little Funny Boy Thinking" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTgwMXb1erDVQB2MrY61sVoqmp0M5ywuVcLzPznosCD_LJOmgZKuF1cQ0rR140_M1ICx5tkfk9-sHSWjjrRoOmboY58wjebXawUNpI5nxodI1eIwVbVq652xfuNvJWyt-MTkxKmn_6wjOR/s320/Little+Boy+Thinking.jpg" title="Why Bloggers Should Correct Grammatical Errors?" width="250" /></a></div>
Probably, Grammatical errors in articles are made by non English 
speaking bloggers. Bloggers must check and correct the errors before 
publishing the post because search engines love meaningful, well 
written, informative and unique articles and it helps bloggers to get 
good ranking in search results. As a demo, search any popular topic and 
you’ll get the Wikipedia’s article at the top. Another thing, people 
also love the articles without errors, so if you’ve tons of mistakes 
then readers will think that they’re wasting their time on foolish 
things and you may loose the readers.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="4558130384"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>

Best Tool For Bloggers To Correct Grammatical Mistakes

Blogging needs so many skills to properly manage a blog. Content writing is one of the most important skill that every blogger must kno...

Google+ Rolled Out! Add New Google+ Badges In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;">
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7EcIg384P1nTeJBUlcf6Qzs7bODoGmgKxsnx6ve16sVigrJ9T3xLPjt6VnESwhAiHXd6iDsZzH0vqa_POcDdTQAgGyN0-xie0zxjJ6U-EYkpQ-gkJc8-JlXMZEgpyZw-j_Il0qly132zH/s1600/New+Google++Badges.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="New Google+ Badges" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7EcIg384P1nTeJBUlcf6Qzs7bODoGmgKxsnx6ve16sVigrJ9T3xLPjt6VnESwhAiHXd6iDsZzH0vqa_POcDdTQAgGyN0-xie0zxjJ6U-EYkpQ-gkJc8-JlXMZEgpyZw-j_Il0qly132zH/s1600/New+Google++Badges.jpg" title="New Google+ Badges" /></a></div>
If you’re a blogger user then you probably know that recently there 
were introduced many new features like New Interface, Google+ Comments, 
New HTML Editor and many more. Blogger is owned by Google and it’s team 
has also introduced new layout of Google+. Well, Google+ is a fantastic 
place for webmasters and bloggers to make their webs even more Google 
friendly. Recently, There was another announcement in which we’ve got 
the fully stylish Google+ Badges. Yes, They’ve introduced Badges for 
blogs/sites. In this new release, we’ve found a lot of improvements, So 
let me explain something about these new widgets.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
<h3 style="text-align: left;">
New Google+ Badges</h3>
<div>
These are the stylish and fully professional badges which are 
introduced recently. These are fully changed if we compare them with old
 ones. Old badges were having add to circle and plus one button but here
 you’ll get the follow and plus one buttons only. Take a look of the 
below image.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKfw86wxkh9RdvOHiPqQmnjW-8i-dHx6KtWfKS1lzDLjDZdDwPXZmpH0LAVtkw-QYQEceiWq7qOm1Cl7vz2l1sTbP35PZi8GEfjgnORizlKdQqyT8yN-1CXAk-ou5KluA2YzGgovqWWvix/s1600/New+Google++Badges.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKfw86wxkh9RdvOHiPqQmnjW-8i-dHx6KtWfKS1lzDLjDZdDwPXZmpH0LAVtkw-QYQEceiWq7qOm1Cl7vz2l1sTbP35PZi8GEfjgnORizlKdQqyT8yN-1CXAk-ou5KluA2YzGgovqWWvix/s1600/New+Google++Badges.jpg" /></a></div>
</div>
<div style="clear: both; text-align: left;">
In the above image, you can 
see the set of latest badges which are recently made. You can see that 
there are follow buttons instead of add to circle buttons. Another great
 thing is that, it also shows the total number of followers and we’re 
unable to see the total number in previous badges.</div>
<h3 style="text-align: left;">
Why To Use These Badges?</h3>
<div>
I’m strongly recommending you to use these badges because they will
 give huge profit to you. It will increase the followers or plus ones on
 your profile which will help you in getting improvement in author rank.
 They can also help you in getting Google authorship and newbies are 
eager in getting it. Last thing is that they will help in being more 
Google friendly that can help for better ranking. If you’re already 
using old badges then replace them because in 90 days, old badges will 
be removed. So you’ve three months to do this.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<h3 style="text-align: left;">
Adding New Google+ Badges In Blogger</h3>
<div>
So now you’re going to implement these in your blog because they 
definitely are going to help you in many things. It is simple guys. Just
 follow the simple steps to implement it in blogger.</div>
<div>
<ul style="text-align: left;">
<li>Go To <a href="https://developers.google.com/+/web/badge/" rel="nofollow" target="_blank">Google+ Badges</a></li>
</ul>
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrgqxwD2TP6NeYynH1-AWqJZUbJKyiCwSX2HhCHZOHWoS4Ebr7vr9uoajITzvxTwfIWJ_lH8y0Oh4GsZgL3lLdyXcDWRydetbt6p0Edieqjg3QL61xt7JPCLRV8uS_klf3MWvDIa4Eae3o/s1600/Google++Badges+Settings.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrgqxwD2TP6NeYynH1-AWqJZUbJKyiCwSX2HhCHZOHWoS4Ebr7vr9uoajITzvxTwfIWJ_lH8y0Oh4GsZgL3lLdyXcDWRydetbt6p0Edieqjg3QL61xt7JPCLRV8uS_klf3MWvDIa4Eae3o/s1600/Google++Badges+Settings.png" /></a></div>
<ul>
<li>First select the profile in the “Google+ User” area.</li>
<li>Choose What you want Icon or Badge in features.</li>
<li>Here in layout you’ve two types of layout. Portrait is vertical 
layout whenever landscape is horizontal. Choose which one you want.</li>
<li>Choose width of the badge which may set in the area where you want to implement.</li>
<li>Choose the color theme.</li>
<li>In the last there some other advanced settings which you can easily set there.</li>
<li>Finally, after setting the badge, You’ll get the code in the right side below live demo </li>
<li>Copy the code and save it in notepad.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></li>
</ul>
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtZ2etp9bETaOiRNAmZj9-RhijXQmhOdwMcijuEeDG8X8_76C8QZreypM8pUV55Pgi3t7SffsMd_Klibt9eNL0PLtvfaqWJjC8ni7zrMwwI4NuPKLkswtdcN4EzUcNpWzE-niQrJNOoEJ_/s1600/code.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtZ2etp9bETaOiRNAmZj9-RhijXQmhOdwMcijuEeDG8X8_76C8QZreypM8pUV55Pgi3t7SffsMd_Klibt9eNL0PLtvfaqWJjC8ni7zrMwwI4NuPKLkswtdcN4EzUcNpWzE-niQrJNOoEJ_/s1600/code.png" /></a></div>
<ul>
<li>Now Go To Blogger >> Layout >> Add a Gadget</li>
<li>Choose “HTML/JavaScript”</li>
<li>Paste The Code In Content Area.</li>
</ul>
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihUCtoZrMBNnhqvroLDbz8Mt5DZnjM4xPxdyWaG3YT9febVNUIoiNHyKr4c7wzLzGCjav6ECfQcOkiE4bNWP1ZU9InojewGzVXhZNFyx0Skt-9vxKb-e5dRXKAl_Z0CSTAAJVgrCfFCBB-/s1600/Add+a+Gadget.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihUCtoZrMBNnhqvroLDbz8Mt5DZnjM4xPxdyWaG3YT9febVNUIoiNHyKr4c7wzLzGCjav6ECfQcOkiE4bNWP1ZU9InojewGzVXhZNFyx0Skt-9vxKb-e5dRXKAl_Z0CSTAAJVgrCfFCBB-/s1600/Add+a+Gadget.png" /></a></div>
<ul style="text-align: left;">
<li>Hit “Save Button” and That’s it.</li>
</ul>
<h3 style="text-align: left;">
Final Words</h3>
<div>
So friends, how was this tutorial and new badges? I hope this quick
 post is gonna help in replacing the older widgets in newer ones and 
you’ll not face any problem in implementing this. If you’re facing any 
problem then don’t shy in asking in the comment area. I’m here to help 
you. Get in touch for more and take a lot of care of you and your 
family. Cheers!</div>
</div>
</div>
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Google+ Rolled Out! Add New Google+ Badges In Blogger

If you’re a blogger user then you probably know that recently there were introduced many new features like New Interface, Google+ Comme...

How To Add BluePrint Subscription Widget In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC1yn5vUdX2RGAq0TM33zMzdNBtZL3EcUmG0rwocz4vUi6Kybq0upwFqSz8cCCNaDTwsP56eQhb_M8E9ScVCdjmHLTUK1ufnuP0ybpirSMUtXzimUJOWkN0ORWOfJgRnuo5g4Q9bWqIwlw/s1600/Social+Widget.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="BluePrint Subscription Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC1yn5vUdX2RGAq0TM33zMzdNBtZL3EcUmG0rwocz4vUi6Kybq0upwFqSz8cCCNaDTwsP56eQhb_M8E9ScVCdjmHLTUK1ufnuP0ybpirSMUtXzimUJOWkN0ORWOfJgRnuo5g4Q9bWqIwlw/s1600/Social+Widget.png" title="BluePrint Subscription Widget" /></a></div>
Last time we meet with Abdul Wali
 in our previous post and I also told you all that we’ve designed 
another widget which I’m going to share here. Subscription widgets are 
important for every blog to increase the subscribers and fans. There are
 tons of designs for free that can be used by anyone but here we’re 
giving a professional widget to you all. This is the stylish design in 
which we’ve added the title at the top, secondly it is having impressive
 social icons which can help in getting more social fans. In third 
portion, there is a little message for subscription that what they will 
get after subscribing. In the last, it is having responsive subscription
 form with name, email and button field. Input fields are having stylish
 effect when someone comes to write or focus on it and it’s button is 
also styled.<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-8224162800388116" data-ad-format="auto" data-ad-slot="7511596786" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<br />
<div style="text-align: center;">
</div>
<h3 style="text-align: left;">
Why To Use This Widget?</h3>
<div>
If you want to make your blog even more responsive and stylish then
 use it. This can help you gaining social followers along with email 
subscribers. This is build with pure HTML and CSS3 and it also works in 
almost all browsers.</div>
<h4 style="text-align: left;">
Credits</h4>
<div>
This widget is designed by Blogger Yard so all the credit goes to 
us. Even this time we’re not asking for any credit link in the widget so
 this is hundred percent free. But if you’re sharing this in your blog 
then you’ll need to link back us. One thing I want to tell you that 
please respect the efforts of the designer and don’t violate. Thanks.<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-8224162800388116" data-ad-format="auto" data-ad-slot="7511596786" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<h3 style="text-align: left;">
Tutorial</h3>
<div>
<ul style="text-align: left;">
<li>Go To Blogger >> Layout >> Add a Gadget</li>
<li>Choose “HTML/JavaScript”</li>
<li>Paste The Following Code In The Content Box</li>
</ul>
</div>
</div>
<blockquote>
<link href=”http://fonts.googleapis.com/css?family=Roboto:400,700″ rel=”stylesheet” type=”text/css” /><br />
<link href=’//fonts.googleapis.com/css?family=Source Sans 
Pro:200,200italic,300,300italic,regular,italic,600,600italic,700,700italic,900,900italic&amp;subset=latin’
 rel=’stylesheet’ type=’text/css’/><br />
<style><br />
  #byard-socialsub {<br />
    width:300px;<br />
    height:350px;<br />
    background:whitesmoke;<br />
    border:1px solid #eaeaea;<br />
    box-shadow:0 0 2px 2px #ccc;<br />
  }<br />
  .byard-socialsub-title {<br />
    font-size:20px;<br />
    font-family: ‘Oleo Script’, cursive;<br />
    background:hsl(198, 100%, 49%);<br />
    padding:5px;<br />
    border-bottom: 2px solid #444;<br />
    color:white;<br />
    text-align:center;<br />
  }<br />
  #byard-socialsub-icons{<br />
    padding-top: 8px;<br />
    padding-left: 4px;<br />
    padding-bottom: 15px;<br />
    border-bottom: 2px dotted hsl(0, 0%, 27%);<br />
  }<br />
  ul.byard-socialsub-icons{<br />
    margin:0;<br />
    padding:0;<br />
    list-style:none;<br />
    -webkit-perspective: 10000px;<br />
  <br />
    -moz-perspective: 10000px;<br />
    -o-perspective: 10000px;<br />
    perspective: 10000px;<br />
  }<br />
  ul.byard-socialsub-icons li{<br />
    display: inline-block;<br />
    width: 55px;<br />
  <br />
    height: 50px;<br />
    margin-right: -px;<br />
  <br />
    background: none;<br />
    font: bold 36px Arial;<br />
  <br />
    text-transform: uppercase;<br />
    text-align: center;<br />
    cursor: pointer;<br />
    padding-left:10px;<br />
  }<br />
  ul.byard-socialsub-icons li a{<br />
    display:block;<br />
    width: 100%;<br />
    height: 100%;<br />
    color: black;<br />
    text-decoration: none;<br />
    outline: none;<br />
    -webkit-transition:all 300ms ease-out 0.1s;<br />
  <br />
    -moz-transition:all 300ms ease-out 0.1s;<br />
    -o-transition:all 300ms ease-out 0.1s;<br />
    transition:all 300ms ease-out 0.1s;<br />
  }<br />
  ul.byard-socialsub-icons li a span{<br />
    -moz-box-sizing: border-box;<br />
    -webkit-box-sizing: border-box;<br />
    box-sizing: border-box;<br />
    padding-top: 5px;<br />
  <br />
    display:block;<br />
    width: 100%;<br />
    height: 100%;<br />
    -webkit-transition:all 300ms ease-out 0.1s;<br />
    -moz-transition:all 300ms ease-out 0.1s;<br />
    -o-transition:all 300ms ease-out 0.1s;<br />
    transition:all 300ms ease-out 0.1s;<br />
  }<br />
  ul.byard-socialsub-icons li a img{<br />
    border-width: 0;<br />
  }<br />
  ul.byard-socialsub-icons li:hover a{<br />
    -moz-transform: rotateY(180deg);<br />
  <br />
    -webkit-transform: rotateY(180deg);<br />
    transform: rotateY(180deg);<br />
    background: none;<br />
  <br />
  }<br />
  ul.byard-socialsub-icons li:hover a span{<br />
    -moz-transform: rotateY(180deg);<br />
  <br />
    -webkit-transform: rotateY(180deg);<br />
    transform: rotateY(180deg);<br />
  }<br />
  .byard-socialemailsub {<br />
    font-size:14px;<br />
    padding:5px;<br />
    color:#444;<br />
    font-family: Arial;<br />
    font-family:bold;<br />
  }<br />
  .byard-socialemailsubname {<br />
 
   background:#fff 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAc1j56w65SVXZjHlRqxseY6T3LqEEAJnubrPg8-g6nVzpsVXxkQ5jUnqJA9DpH427lRFvVMAlFLeRHZn7vkP8986H7MUPF3KKBurHUKpPrgOWNA7IsQrvIHGNfXjjbZlfmMtFLbD7Odw/s320/name.png)
 no-repeat 7px 8px;<br />
    border:1px solid #ddd;<br />
    font-family:Arial,sans-serif;<br />
    font-size:13px;<br />
    font-weight:bold;<br />
    color:hsla(0,0%,27%,0.69);<br />
    width:225px;<br />
    height:25px;<br />
    padding:5px 15px 5px 28px;<br />
    margin-left:10px;<br />
    display:inline-block;<br />
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;<br />
  <br />
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;<br />
  <br />
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;<br />
  <br />
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;<br />
  <br />
  <br />
  }<br />
  .byard-socialemailsubemail {<br />
 
   background:#fff 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuHdcVqedXHUdXM4iZgRsiHhij1_s5QrQLhbVjvmW53mWuFgbq2jVz9KKzotoX7AB3qH3LzuCK-amX957WuEYW-Djcqu4MxFYlNetY6Avl55ensq7nzm8qyXReFCeyoRddWFJimtLeoBQ/s320/email.png)
 no-repeat 7px 10px;<br />
    border:1px solid #ddd;<br />
    font-family:Arial,sans-serif;<br />
    font-size:13px;<br />
    font-weight:bold;<br />
    color:hsla(0,0%,27%,0.69);<br />
    width:225px;<br />
    height:25px;<br />
    margin-top:10px;<br />
    padding:5px 15px 5px 28px;<br />
    margin-left:10px;<br />
    display:inline-block;<br />
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;<br />
  <br />
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;<br />
  <br />
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;<br />
  <br />
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;<br />
  <br />
  <br />
  }<br />
  .byard-socialemailsubname:hover,.byard-socialemailsubemail:hover {<br />
    border:1px solid #bebebe;<br />
    box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);<br />
  }<br />
  .byard-socialemailsubname:focus, .byard-socialemailsubemail:focus{<br />
    border-color: hsl(198, 100%, 49%);<br />
  <br />
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);<br />
  <br />
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);<br />
  <br />
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);<br />
  <br />
    outline: 0 none;<br />
  <br />
  }<br />
  .byard-socialemailsubbutton {<br />
  <br />
    -moz-box-shadow: 3px 4px 0px 0px #1564ad;<br />
    -webkit-box-shadow: 3px 4px 0px 0px #1564ad;<br />
    box-shadow: 3px 4px 0px 0px #1564ad;<br />
  <br />
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));<br />
    background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);<br />
    background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);<br />
    background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);<br />
    background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);<br />
    background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);<br />
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#79bbff’, endColorstr=’#378de5′,GradientType=0);<br />
  <br />
    background-color:#79bbff;<br />
  <br />
    -moz-border-radius:5px;<br />
    -webkit-border-radius:5px;<br />
    border-radius:5px;<br />
  <br />
    border:1px solid #337bc4;<br />
  <br />
    display:inline-block;<br />
    color:#ffffff;<br />
    font-family:arial;<br />
    font-size:17px;<br />
    font-weight:bold;<br />
    padding:8px 70px;<br />
    text-decoration:none;<br />
    margin-top:10px;<br />
    margin-left:35px;<br />
    text-shadow:0px 1px 0px #528ecc;<br />
  <br />
  }<br />
  .byard-socialemailsubbutton:hover {<br />
  <br />
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));<br />
    background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);<br />
    background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);<br />
    background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);<br />
    background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);<br />
    background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);<br />
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#378de5′, endColorstr=’#79bbff’,GradientType=0);<br />
  <br />
    background-color:#378de5;<br />
  }<br />
  .byard-socialemailsubbutton:active {<br />
    position:relative;<br />
    top:1px;<br />
  }<br />
</style><br />
<div id=’byard-socialsub’><br />
  <div class=’byard-socialsub-title’><br />
    Get In Touch With Us<br />
  </div><br />
  <div id=’byard-socialsub-icons’><br />
    <ul class=”byard-socialsub-icons”><br />
      <li><br />
        <a href=”<span style="background-color: yellow;">http://www.facebook.com/BloggerYard</span>“><br />
 
         <img 
src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhCffTVIWF2g90DHpjuyz5aQbMRu1Jv3lHxh2IojSsA9ttEH2mr_isBTJQVleHq9nomPmiicTv69jDf1G_ws8-N6hbEVkmS9R-9G9o0E4jzy7fEiKk8HBUNA8ErY_ST6lNVoDv2lKRzI/s64/blueprint-social-03.png”
 title=”Add to Facebook” /><br />
        </a><br />
      </li><br />
      <li><br />
        <a href=”<span style="background-color: yellow;">https://plus.google.com/101996924620264617682</span>“><br />
 
         <img 
src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFVrhTSem6ymaNk18fDBJBRMNPACKri7ZdHN4-MmCPg4DBR3ADeDLMQyCsMX434oxG-d02FKHXnK2GF2FYQG9kzU-aOSsg2WkwuETKS0zdWwrWNthCzT5ChxBC5MTWhpwwIpzIvbFfh0/s64/blueprint-social-04.png”
 title=”Google plus” /><br />
        </a><br />
      </li><br />
      <li><br />
        <a href=”<span style="background-color: yellow;">http://www.twitter.com/BloggerYard</span>“><br />
 
         <img 
src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsBRrbo9uThv3uHCrASjs40mUUvXhkOZg3Xl0ZvRCLIb0r5pdwfeylfNUJb9EU38tVeiOacbCsLdw0_d_wZ_irISejZRD2Sd8vqFfg9bjunsFWE8NBCXUwU0Zwb4KaIUMq7pnUb1-bgko/s64/blueprint-social-01.png”
 title=”Add to Twitter” /><br />
        </a><br />
      </li><br />
      <li><br />
        <a href=”<span style="background-color: yellow;">http://feeds2.feedburner.com/BloggerYard</span>“><br />
 
         <img 
src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYWM2iBe2M8lCrZe6m-kw4PecW96407V2CsQIuhFPnmQqP12dK_v_JlybUYuIWfUeCTJ946s8R2b_UK8MwJkFwxoNlCvoRa5-Jof0n2OOBpIAWy1rnUDTvuEiFh47aZoleIuTmXNimHFc/s64/blueprint-social-10.png”
 title=”Add RSS Feed” /><br />
        </a><br />
      </li><br />
    </ul><br />
  </div><br />
  <div class=’byard-socialemailsub’><br />
    <p style=’padding-top:5px;padding-bottom:10px;font-size: 14px;padding: 10px;font-family:Source Sans Pro;’><br />
      <span style="background-color: yellow;">Sign
 Up For Free To Get Blogging Tips, Blogger Resources, Search Engine 
Optimization Tips, Templates and Widgets Straight In Inbox.</span><br />
    </p><br />
    <form action=’http://feedburner.google.com/fb/a/mailverify?uri=<span style="background-color: yellow;">BloggerYard</span>‘ class=’byard-subsbox-form’ method=’post’ target=’_new’><br />
      <input class=’byard-socialemailsubname’ name=’name’ placeholder=’Your Name’ type=’text’/><br />
      <input class=’byard-socialemailsubemail’ name=’email’ placeholder=’Your Email Address’ type=’text’/><br />
      <input class=’byard-socialemailsubbutton’ type=’submit’ value=’Sign Up!’/><br />
    </form><br />
  </div><br />
</div></blockquote>
<ul style="text-align: left;">
<li>Replace Highlighted Links With Yours</li>
<li>Replace Sign Up Message With Yours</li>
<li>Replace <span style="background-color: yellow;">BloggerYard</span> With Your Feedburner Name.</li>
<li>Finally, Click “<b>Save</b>” Button. </li>
</ul>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-8224162800388116" data-ad-format="auto" data-ad-slot="7511596786" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<br />
<h3>
Need Help?</h3>
<div>
So friends, how was this widget ? I hope this is gonna help you. If
 you need any kind of help in implementing this widget then feel free to
 ask in comments. I’m always here to help you. Also share your views 
about this in the comment area. Get connected with us for more and also 
subscribe us. Take Care. <b>Happy Blogging!</b></div>
</div>
</div>

How To Add BluePrint Subscription Widget In Blogger

Last time we meet with Abdul Wali in our previous post and I also told you all that we’ve designed another widget which I’m going to ...

How To Add Stylish CSS3 Push Buttons In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="clearfix post-163 post type-post status-publish format-standard hentry category-blogger-tricks category-widgets" id="post-163">
<div class="entry">
<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI7AWS0hBN3O5xNtp21WBGGghfsO6OF03KB9T9N5SD2MXE1TaA6HMMWTjb3roaVhYyPmmurppAlWKyc7qBqoUSCI9WKhSvXkCPE3le9vx_C2dBW4lkJZ37-GggUjf7k4ez4eGVEt2wrC8P/s300/Push+Buttons+For+Blogger.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Push Buttons For Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI7AWS0hBN3O5xNtp21WBGGghfsO6OF03KB9T9N5SD2MXE1TaA6HMMWTjb3roaVhYyPmmurppAlWKyc7qBqoUSCI9WKhSvXkCPE3le9vx_C2dBW4lkJZ37-GggUjf7k4ez4eGVEt2wrC8P/s300/Push+Buttons+For+Blogger.jpg" title="Add Push Buttons In Blogger" /></a></div>
<br />
So 
today we’re going to add the stylish css3 push buttons in blogger which 
can make your blog more professional and beautiful. You can add these 
buttons in post area or anywhere you want. These are the quality, 
stylish, beautiful, unique and pure buttons that’s why I’m going to 
share this and so
 all the credit goes to them. Before we get into the tutorial about 
installing this in blogger first let me tell you something about this.<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-8224162800388116" data-ad-format="auto" data-ad-slot="7511596786" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
<h3 style="text-align: left;">
Stylish CSS3 Push Buttons</h3>
<div>
These are the unique and beautiful buttons which can be used as 
DEMO, DOWNLOAD or any kind of button in blogger. These are build with 
pure CSS3. We’ve two themes of this button which are red and blue. These
 buttons have stylish background like these a placed in a hole. It also 
has hover and active effect which makes this more unique. The developer 
of these buttons has integrated the “OSWALD” font family which even more
 beautify these buttons. Adding these buttons in blogger is not so 
difficult, it is easy so let’s begin the tutorial.
<br />
<div style="text-align: center;">
<br /></div>
</div>
<h3 style="text-align: left;">
Installing This In Blogger</h3>
<div>
<ul style="text-align: left;">
<li>Go To Blogger >> Template >> Edit HTML</li>
<li>Click Anywhere In The Coding To Active It</li>
<li>Search For <b>]]></b:skin></b></li>
<li>Paste The Following Code Above<b> ]]></b:skin></b></li>
</ul>
</div>
</div>
<blockquote>
<!– Start Push Button By Www.BloggerYard.Com –><br />
.push_button {<br />
<span style="white-space: pre;"> </span>position: relative;<br />
<span style="white-space: pre;"> </span>width:220px;<br />
<span style="white-space: pre;"> </span>height:40px;<br />
<span style="white-space: pre;"> </span>text-align:center;<br />
<span style="white-space: pre;"> </span>color:#FFF;<br />
<span style="white-space: pre;"> </span>text-decoration:none;<br />
<span style="white-space: pre;"> </span>line-height:43px;<br />
<span style="white-space: pre;"> </span>font-family:’Oswald’, Helvetica;<br />
<span style="white-space: pre;"> </span>display: block;<br />
<span style="white-space: pre;"> </span>margin: 30px;<br />
}<br />
.push_button:before {<br />
<span style="white-space: pre;"> </span>background:#f0f0f0;<br />
<span style="white-space: pre;"> </span>background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));<br />
<span style="white-space: pre;"> </span><br />
<span style="white-space: pre;"> </span>-webkit-border-radius:5px;<br />
<span style="white-space: pre;"> </span>-moz-border-radius:5px;<br />
<span style="white-space: pre;"> </span>border-radius:5px;<br />
<span style="white-space: pre;"> </span><br />
<span style="white-space: pre;"> </span>-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;<br />
<span style="white-space: pre;"> </span>-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;<br />
<span style="white-space: pre;"> </span>box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;<br />
<span style="white-space: pre;"> </span><br />
<span style="white-space: pre;"> </span>position: absolute;<br />
<span style="white-space: pre;"> </span>content: “”;<br />
<span style="white-space: pre;"> </span>left: -6px; right: -6px;<br />
<span style="white-space: pre;"> </span>top: -6px; bottom: -10px;<br />
<span style="white-space: pre;"> </span>z-index: -1;<br />
}<br />
.push_button:active {<br />
<span style="white-space: pre;"> </span>-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;<br />
<span style="white-space: pre;"> </span>top:5px;<br />
}<br />
.push_button:active:before{<br />
<span style="white-space: pre;"> </span>top: -11px;<br />
<span style="white-space: pre;"> </span>bottom: -5px;<br />
<span style="white-space: pre;"> </span>content: “”;<br />
}<br />
.red {<br />
<span style="white-space: pre;"> </span>text-shadow:-1px -1px 0 #A84155;<br />
<span style="white-space: pre;"> </span>background: #D25068;<br />
<span style="white-space: pre;"> </span>border:1px solid #D25068;<br />
<span style="white-space: pre;"> </span><br />
<span style="white-space: pre;"> </span>background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);<br />
<span style="white-space: pre;"> </span>background-image:-moz-linear-gradient(top, #F66C7B, #D25068);<br />
<span style="white-space: pre;"> </span>background-image:-ms-linear-gradient(top, #F66C7B, #D25068);<br />
<span style="white-space: pre;"> </span>background-image:-o-linear-gradient(top, #F66C7B, #D25068);<br />
<span style="white-space: pre;"> </span>background-image:linear-gradient(to bottom, #F66C7B, #D25068);<br />
<span style="white-space: pre;"> </span><br />
<span style="white-space: pre;"> </span>-webkit-border-radius:5px;<br />
<span style="white-space: pre;"> </span>-moz-border-radius:5px;<br />
<span style="white-space: pre;"> </span>border-radius:5px;<br />
<span style="white-space: pre;"> </span><br />
<span style="white-space: pre;"> </span>-webkit-box-shadow:0
 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) 
inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);<br />
<span style="white-space: pre;"> </span>-moz-box-shadow:0
 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) 
inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);<br />
<span style="white-space: pre;"> </span>box-shadow:0
 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) 
inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);<br />
}<br />
.red:hover {<br />
<span style="white-space: pre;"> </span>background: #F66C7B;<br />
<span style="white-space: pre;"> </span>background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);<br />
<span style="white-space: pre;"> </span>background-image:-moz-linear-gradient(top, #D25068, #F66C7B);<br />
<span style="white-space: pre;"> </span>background-image:-ms-linear-gradient(top, #D25068, #F66C7B);<br />
<span style="white-space: pre;"> </span>background-image:-o-linear-gradient(top, #D25068, #F66C7B);<br />
<span style="white-space: pre;"> </span>background-image:linear-gradient(top, #D25068, #F66C7B);<br />
}<br />
.blue {<br />
<span style="white-space: pre;"> </span>text-shadow:-1px -1px 0 #2C7982;<br />
<span style="white-space: pre;"> </span>background: #3EACBA;<br />
<span style="white-space: pre;"> </span>border:1px solid #379AA4;<br />
<span style="white-space: pre;"> </span>background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA);<br />
<span style="white-space: pre;"> </span>background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA);<br />
<span style="white-space: pre;"> </span>background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA);<br />
<span style="white-space: pre;"> </span>background-image:-o-linear-gradient(top, #48C6D4, #3EACBA);<br />
<span style="white-space: pre;"> </span>background-image:linear-gradient(top, #48C6D4, #3EACBA);<br />
<span style="white-space: pre;"> </span><br />
<span style="white-space: pre;"> </span>-webkit-border-radius:5px;<br />
<span style="white-space: pre;"> </span>-moz-border-radius:5px;<br />
<span style="white-space: pre;"> </span>border-radius:5px;<br />
<span style="white-space: pre;"> </span><br />
<span style="white-space: pre;"> </span>-webkit-box-shadow:0
 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) 
inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);<br />
<span style="white-space: pre;"> </span>-moz-box-shadow:0
 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) 
inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);<br />
<span style="white-space: pre;"> </span>box-shadow:0
 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) 
inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);<br />
}<br />
.blue:hover {<br />
<span style="white-space: pre;"> </span>background: #48C6D4;<br />
<span style="white-space: pre;"> </span>background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4);<br />
<span style="white-space: pre;"> </span>background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4);<br />
<span style="white-space: pre;"> </span>background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4);<br />
<span style="white-space: pre;"> </span>background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);<br />
<span style="white-space: pre;"> </span>background-image:linear-gradient(top, #3EACBA, #48C6D4);<br />
}<br />
<!– End Push Button By Www.BloggerYard.Com –></blockquote>
<ul style="text-align: left;">
<li>Click “Save Template”</li>
<li>Now You’ve Installed These Buttons In Your Blog. Let’s Jump To Next Step, </li>
</ul>
<h3 style="text-align: left;">
Adding This In Blogger</h3>
<div>
<ul style="text-align: left;">
<li>Go To Blogger >> New Post >> HTML Tab</li>
</ul>
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTnTTL2wDrUE7mZIgMps6aHuhZ-HWzXmunKwoY8CL6DD8bz9xqGsRtGSZ6nAATAaX1OxaA9KRY0hj9Nnz-mFFtOyjAy1YI5hvVnen0M9DiFQ2AK7115St89KYE4uXwPtp1VaF9XPvL4SQe/s268/html+tab.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTnTTL2wDrUE7mZIgMps6aHuhZ-HWzXmunKwoY8CL6DD8bz9xqGsRtGSZ6nAATAaX1OxaA9KRY0hj9Nnz-mFFtOyjAy1YI5hvVnen0M9DiFQ2AK7115St89KYE4uXwPtp1VaF9XPvL4SQe/s268/html+tab.png" /></a></div>
<ul style="text-align: left;">
<li>Pick Up The Button From Below Code</li>
<li>Paste It There In The HTML Tab.</li>
</ul>
</div>
</div>
<blockquote>
<b>Copy Below Code For Red Button : </b><br />
<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’><br />
<a href=”#” class=”push_button red”>Push the button</a><br />
<b>Copy Below Code For Blue Button : </b><br />
<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’><br />
<a href=”#” class=”push_button blue”>Push the button</a></blockquote>
<ul style="text-align: left;">
<li>Now Complete Your Post and Hit “Publish” Button. </li>
<li>You Can Also Check It In The Preview.</li>
<li><b>CONGRATULATIONS! </b>You’ve Successfully Got This Button In Your Blogger Blog! </li>
</ul>
<h3 style="text-align: left;">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle" data-ad-client="ca-pub-8224162800388116" data-ad-format="auto" data-ad-slot="7511596786" style="display: block;"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Final Words</h3>
<div>
So friends, How was these buttons ? I hope these buttons will help 
you in making your blog more beautiful and stylish. If you’re facing any
 problem then feel free ask in the comments area. Have you more buttons?
 Then do share it with us. Get in touch with us for more and leave your 
feedbacks. Take Care. <b>Happy Blogging!</b></div>
</div>
</div>
</div>
</div>

How To Add Stylish CSS3 Push Buttons In Blogger

So today we’re going to add the stylish css3 push buttons in blogger which can make your blog more professional and beautiful. Yo...

Use Blogger and Google+ Comments Together In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjeAullEC1gYZbeOlrEOefHulPcigz-NZTONogWwGyWGHQdpgHkLzaRYbI7q1WAXLOXTQvHP0MPsj2WnIXa48OzESqEDYuadbJXvMRYlq2wPfHwy8jaC5WgX7GysXU6-MZ3WNCwZU3I1Qp/s1600/Blogger+and+Google++Comments.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Blogger and Goolge+ Comments" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjeAullEC1gYZbeOlrEOefHulPcigz-NZTONogWwGyWGHQdpgHkLzaRYbI7q1WAXLOXTQvHP0MPsj2WnIXa48OzESqEDYuadbJXvMRYlq2wPfHwy8jaC5WgX7GysXU6-MZ3WNCwZU3I1Qp/s1600/Blogger+and+Google++Comments.jpg" /></a></div>
As you know that previously Blogger Team has introduced the Goolge+ 
commenting system for Blogger blogs but when we look at the 
disadvantages alone then we realize that we shouldn’t use this in our 
blog and in other hand, when we look at the advantages then we say that 
we shouldn’t miss this system. So here the guy confuses and can’t decide
 the proper decision. But don’t worry, we’ve got the proper solution for
 this problem and we’re going to use Blogger and Google+ Comments 
Together. Yes it is possible and here we’re going to learn this little 
Blogger hack today. Before we begin the tutorial, first of all let me 
tell you something about this hack, how we did this and how it is gonna 
work.<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-8224162800388116" data-ad-format="auto" data-ad-slot="7511596786" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br />
<br />
<h3 style="text-align: left;">
How This Works?</h3>
<div>
You can have look at our commenting system that we’re also using 
both systems together with toggle. You will see the two icons and 
between them a little message telling the visitors that they can use 
Blogger and Goolge+ comments. By default, it will show the Blogger 
comments and when someone click on Google+ icons then Blogger comments 
will be hidden and Google+ comments will be appearing. To show the 
header with icons, the post must have a Blogger comment otherwise it 
will not be shown.</div>
<h3 style="text-align: left;">
How This is Made?</h3>
<div>
We’ve made this with simple JavaScript and CSS and it will not 
affect on loading speed. It just loads in micro seconds. Google+ comment
 system is added the JavaScript which we’re going to add in blog 
template in the tutorial and you’ll not need to enable it from Google+ 
area of blogger. Originally the developer of this hack is David Kutcher  and Syed Faizan Ali so all the credits goes to him.</div>
<h3 style="text-align: left;">
Why Use Both Systems?</h3>
<div>
The main reason is that we should use Google+ comment system but 
due to it’s disadvantages it creates problem and due to these problem 
we’re using Blogger comments with them. This will be fine from every 
side. You will not loose your comments by allowing only Google+ users to
 comment. By this your blog will be more Google friendly that is pretty 
cool for every webpage. It will also help in improving the author rank 
which is the future of SEO.</div>
<h3 style="text-align: left;">
Tutorial</h3>
<div>
Well, after telling you something about this now it’s time to do 
this hack. Now follow the below given steps carefully and don’t forget 
to backup your template.</div>
<div>
<ul style="text-align: left;">
<li>Go To Blogger >> Template >> Backup Your Template</li>
<li>Click Edit HTML and Search For Below Code</li>
</ul>
</div>
</div>
<blockquote>
<b:includable id=’comment_picker’ var=’post’><br />
.<br />
.<br />
.<br />
.<br />
</b:includable></blockquote>
<ul style="text-align: left;">
<li> Replace The Above Code With The Following.</li>
</ul>
</div>
<blockquote>
<b:includable id=’comment_picker’ var=’post’><br />
  <b:if cond=’data:post.forceIframeComments’><br />
    <b:include data=’post’ name=’iframe_comments’/><br />
    <b:if cond=’data:post.showThreadedComments’><br />
      <b:include data=’post’ name=’threaded_comments’/><br />
    <b:else/><br />
      <b:include data=’post’ name=’comments’/><br />
    </b:if><br />
  <b:else/><br />
    <b:if cond=’data:post.commentSource == 1′><br />
      <b:include data=’post’ name=’iframe_comments’/><br />
    <b:else/><br />
      <b:if cond=’data:post.showThreadedComments’><br />
        <b:include data=’post’ name=’threaded_comments’/><br />
      <b:else/><br />
        <b:include data=’post’ name=’threaded_comments’/><br />
      </b:if><br />
    </b:if><br />
  </b:if><br />
</b:includable></blockquote>
<ul style="text-align: left;">
<li>After replacing the code, once again search another below code. </li>
</ul>
</div>
<blockquote>
<b:includable id=’threaded_comments’ var=’post’><br />
.<br />
.<br />
.<br />
.<br />
</b:includable></blockquote>
<ul style="text-align: left;">
<li>Again Replace This Code With The Following One </li>
</ul>
</div>
<blockquote>
  <b:includable id=’threaded_comments’ var=’post’><br />
  <div id=’com-header’><br />
<h6>Comment
 With:</h6> <img class=’com-on’ id=’com-norm’ 
src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6DThJeANakctCanWrd-jAjQIgQHg27dm8xte5UNbGxIHcvaM-bHDiAnwPvijbqAjjRpJX1Be2-nZH5nms5YOhONUjDl7TWugaYydL1HoRaysx1pMI8135B_FjwBbLgdiyhRWg8A-Au-er/s50/blogger_on.png’
 title=’view Blogger comments’/><h6>OR</h6> <image 
id=’com-gplus’ 
src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0bAA2YXQf-zsZdHzxBs-gUgCNGDnU1JlQos2KE5SHi3DqkoBjkFLv6u6_k0Q3HWG-ffIq56EUZbrfG4K6_0zOZec9H4-jRNgyLJ-MZUcl06HDvyhLpNmuAnZBMdHorTvEBqyttv3EYEmZ/s50/plus_off.png’
 title=’view Google+ comments’/><h6>The Choice is 
Yours!</h6><br />
<div id=’copyrigtsmbl’><a 
href=’http://www.mybloggerlab.com/2013/04/ow-to-use-blogger-and-google-comments-together.html’
 id=”mblrights”>Get This Widget</a></div><br />
</div><br />
<div id=’comment-zone’><br />
  <div class=’comments’ id=’comments’><br />
    <a name=’comments’/><br />
    <h4><data:post.commentLabelFull/>:</h4><br />
    <div class=’comments-content’><br />
      <b:if cond=’data:post.embedCommentForm’><br />
        <b:include data=’post’ name=’threaded_comment_js’/><br />
      </b:if><br />
      <div id=’comment-holder’><br />
         <data:post.commentHtml/><br />
      </div><br />
    </div><br />
    <p class=’comment-footer’><br />
      <b:if cond=’data:post.allowNewComments’><br />
        <b:include data=’post’ name=’threaded-comment-form’/><br />
      <b:else/><br />
        <data:post.noNewCommentsText/><br />
      </b:if><br />
    </p><br />
    <b:if cond=’data:showCmtPopup’><br />
      <div id=’comment-popup’><br />
        <iframe allowtransparency=’true’ frameborder=’0′ id=’comment-actions’ name=’comment-actions’ scrolling=’no’><br />
        </iframe><br />
      </div><br />
    </b:if><br />
    <div id=’backlinks-container’><br />
    <div expr:id=’data:widget.instanceId + &quot;_backlinks-container&quot;’><br />
       <b:if cond=’data:post.showBacklinks’><br />
         <b:include data=’post’ name=’backlinks’/><br />
       </b:if><br />
    </div><br />
    </div><br />
  </div><br />
  <div id=’gcontainer’><div id=’gcomments’/></div><br />
<script src=’http://apis.google.com/js/plusone.js’/><br />
<script src=’https://googledrive.com/host/0B0WJjcJEFNziQU01STJVc3RzeWc’/><br />
<style><br />
#gcontainer {<br />
display:none;<br />
  }<br />
#com-norm,#com-gplus {<br />
cursor:pointer;<br />
padding:0 5px;<br />
float:left<br />
  }<br />
#com-header {<br />
border: 1px solid #d2d2d2;<br />
padding: 10px;<br />
float: left;<br />
width: 580px;<br />
margin-bottom: 20px;<br />
background: #f5f5f5;<br />
  }<br />
#com-header h6{<br />
font-size: 20px;<br />
text-transform: uppercase;<br />
font-weight: bold;<br />
float: left;<br />
padding-top: 15px;<br />
margin: 0px;<br />
margin-right: 7px;<br />
margin-left: 7px;<br />
  }<br />
#copyrigtsmbl {<br />
float: right;<br />
margin-top: 20px;<br />
border-top: 1px solid #d2d2d2;<br />
margin-right: -10px;<br />
padding-right: 10px;<br />
padding-top: 5px;<br />
padding-left: 10px;<br />
border-left: 1px solid #d2d2d2;<br />
padding-bottom: 5px;<br />
margin-bottom: -10px;<br />
font-size:11px;<br />
background: #fff;<br />
  }<br />
#copyrigtsmbl a {<br />
text-decoration:none;<br />
color:111!important;<br />
  }<br />
</style><br />
</div><br />
</b:includable>a</blockquote>
<ul style="text-align: left;">
<li>Now finally save your template and you’ve done! </li>
</ul>
<h3 style="text-align: left;">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle" data-ad-client="ca-pub-8224162800388116" data-ad-format="auto" data-ad-slot="7511596786" style="display: block;"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Need Help?</h3>
<div>
So friends, This was our little hack which is gonna rock. I hope 
this tutorial is helpful for you and if you’re facing any problem then 
feel free to ask in comments. I’ll reply you back soon. Stay connected 
with us for more hacks and also subscribe us for getting updates in your
 inbox. Take care. <b>Happy Blogging!</b></div>
</div>
</div>

Use Blogger and Google+ Comments Together In Blogger

As you know that previously Blogger Team has introduced the Goolge+ commenting system for Blogger blogs but when we look at the di...

Add Email Subscription Box In Header With Social Icons

<div class="entry">
					<div dir="ltr" style="text-align: left;">
<div dir="ltr" style="text-align: left;">
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5DwCuCXvoWzw8sqTj-mFxPbo76qbpBE8qQqGEYyQ_1LIyPehp_i9-bjOCBJJn_MfuhVh2tXTFFEI85vzQWw0HyQ_kP96_WO0U28fasL1EokNybmMcfFuPMX6X4nJRMnJwYccZB8R7rLmo/s1600/Header+Subscription+BOx.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Header Subscription Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5DwCuCXvoWzw8sqTj-mFxPbo76qbpBE8qQqGEYyQ_1LIyPehp_i9-bjOCBJJn_MfuhVh2tXTFFEI85vzQWw0HyQ_kP96_WO0U28fasL1EokNybmMcfFuPMX6X4nJRMnJwYccZB8R7rLmo/s1600/Header+Subscription+BOx.jpg" /></a></div>
Previously, we’ve created some widgets which were <a href="http://www.bloggeryard.com/2013/06/socializer-widget-for-blogger-increase-social-traffic/" target="_blank">Socializer Widget</a>, <a href="http://www.bloggeryard.com/2013/06/newsletter-email-subscription-widget-for-blogger/" target="_blank">Email Subscription Widget</a> and we  released <a href="http://www.bloggeryard.com/2013/06/tech-shadow-blogger-template-free-download/" target="_blank">Tech Shadow blogger template</a>.
 In that template we’d created the email subscription widget with social
 icons in header and here we’re going to share that widget with all you 
guys. This is the best widget to increase the email subscribers 
instantly and the main thing is it’s place. In header, it will be shown 
to every one and there will be a lot of chances that any visitor may 
subscribe you through that widget. Even you can see that we’ve also 
added the subscription widget in header. Installing this widget in your 
blog is not so difficult but before the tutorial let me tell you 
something about that widget.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br /><a href="https://www.blogger.com/null" name="more"></a>
<br />
<ul style="margin-top: 15px; text-align: left;">
<li><b>Also Read : </b><a href="http://www.bloggeryard.com/2013/06/tips-to-write-quality-and-unique-posts-for-your-blog/" target="_blank">Tips To Write Quality and Unique Content For Your Blog</a></li>
</ul>
<h3 style="text-align: left;">
Header Email Subscription Widget With Social Buttons</h3>
<div>
This is the stylish and clean header email subscription widget in 
which social buttons or icons are also available for increasing social 
followers. This widget is divided into two sections. Left portion of 
this widget is having subscription form where Name and Email field are 
implement along with the subscribe button. Heading and a little spam 
message is also available in that area. While right portion of this 
widget is having the social buttons which are Facebook, Twitter, 
Google+, Feed burner and Pinterest. This widget is gonna obviously help 
you in increasing your email subscribers and social fans because this 
will be implemented in the header and header is the great place for 
attracting your visitors for subscribing you.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div style="text-align: center;">
<a href="http://tech-shadow-by-bloggeryard.blogspot.com/" rel="nofollow" target="_blank">See Live Demo</a>

<ul style="margin-top: 20px; text-align: left;">
<li><b>Dont Miss : </b><a href="http://www.bloggeryard.com/2013/06/tips-to-write-seo-friendly-blog-posts/" target="_blank">Tips To Write SEO Friendly Blog Posts</a></li>
</ul>
</div>
</div>
<h3 style="margin-top: -5px; text-align: left;">
Tutorial</h3>
<div>
Well, I’ve told you something about this widget and now you may be 
want to implement it in your blog. Don’t worry you can do this just 
following the simple steps below.</div>
<div>
<ul style="text-align: left;">
<li>Go To Blogger >> Layout >> Add a Gadget (In The Header Area)</li>
<li>Choose <b>HTML/JavaScript </b>and Paste The Following Code In The Content Box</li>
</ul>
</div>
</div>
<blockquote>
<style><br />

#byard-topsubsbox {background:#fff; width:940px!important; 
height:90px!important;margin-top:20px; padding:10px;box-shadow:5px 5px 
5px #ccc; border:1px solid #ddd;overflow:hidden;}<br />  
#subscriptionsection {float:left;border-right: 1px solid rgb(168, 168, 
168);padding-right: 56px;margin-top: -10px;padding-top:9px;}<br />  
.subsbox-heading {font-size:20px; font-family:&#39;Source Sans 
Pro&#39;; text-align:center;text-shadow:1px 1px 1px 
#ABABAB;font-weight:bold;}<br />  .topsubsboxname {background:#fff 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAc1j56w65SVXZjHlRqxseY6T3LqEEAJnubrPg8-g6nVzpsVXxkQ5jUnqJA9DpH427lRFvVMAlFLeRHZn7vkP8986H7MUPF3KKBurHUKpPrgOWNA7IsQrvIHGNfXjjbZlfmMtFLbD7Odw/s320/name.png)
 no-repeat 7px 8px;border:1px solid #ddd; font-family:Arial,sans-serif; 
font-size:13px; font-weight:bold;color:hsla(0,0%,27%,0.69); width:150px;
 margin-top:10px; height:24px; padding:5px 15px 5px 28px; 
vertical-align:top; display:inline-block;margin-left:15px;}<br />  
.topsubsboxemail {background:#fff 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuHdcVqedXHUdXM4iZgRsiHhij1_s5QrQLhbVjvmW53mWuFgbq2jVz9KKzotoX7AB3qH3LzuCK-amX957WuEYW-Djcqu4MxFYlNetY6Avl55ensq7nzm8qyXReFCeyoRddWFJimtLeoBQ/s320/email.png)
 no-repeat 7px 10px; border:1px solid #ddd; 
font-family:Arial,sans-serif; font-size:13px; font-weight:bold; 
color:hsla(0,0%,27%,0.69); width:150px; height:24px; margin-left:5px; 
margin-top:10px; padding:5px 15px 5px 28px;vertical-align:top; 
display:inline-block;}<br />.topsubsboxname:hover,.topsubsboxemail:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}<br />.topsubsboxbutton
 {-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;-webkit-box-shadow:inset
 0px 1px 0px 0px #bbdaf7;box-shadow:inset 0px 1px 0px 0px 
#bbdaf7;background:-webkit-gradient( linear, left top, left bottom, 
color-stop(0.05, #00B3FF), color-stop(1, #349ECB) 
);background:-moz-linear-gradient( center top, #00B3FF 5%, #349ECB 100% 
);<span style="white-space: pre;"> </span>filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00B3FF&#39;,
 endColorstr=&#39;#349ECB&#39;);background-color:#00B3FF; 
 margin-top:12px; 
 margin-left:5px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px
 solid 
#84bbf3;display:inline-block;color:#ffffff;font-family:arial;font-size:15px;font-weight:bold;padding:6px
 10px;text-decoration:none;text-shadow:1px 1px 0px 
#528ecc;}.topsubsboxbutton:hover {background:-webkit-gradient( linear, 
left top, left bottom, color-stop(0.05, #349ECB), color-stop(1, #00B3FF)
 );background:-moz-linear-gradient( center top, #349ECB 5%, #00B3FF 100%
 
);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#349ECB&#39;,
 
endColorstr=&#39;#00B3FF&#39;);background-color:#349ECB;}.topsubsboxbutton:active
 {position:relative;top:1px;}<br />  #socialsection {float:left;margin-top:20px;}<br /> 
 .socialheading{font-size:20px; font-family:&#39;Source Sans 
Pro&#39;; text-align:right;margin-right:20px;text-shadow:1px 1px 1px
 #ABABAB;font-weight:bold;}<br />  .socialicons ul {list-style:none; display:inline;float:right;margin-top:10px;margin-right:10px;}<br />.socialicons li {opacity: 1;float:left;padding: 0px 10px 0px 0px;}<br />.socialicons li:nth-child(6) {padding: 0;}<br />.socialicons li a img{height:49px;width:49px}<br /></style><br />

<!– Top Subsbox By Www.BloggerYard.Com Start –><br /><div id=’byard-topsubsbox’><br /><div id=’subscriptionsection’><br /><div class=’subsbox-heading’>Subscribe For Free Updates!</div><br /> <form action=’http://feedburner.google.com/fb/a/mailverify?uri=<span style="background-color: yellow;">BloggerYard</span>‘ class=’byard-subsbox-form’ method=’post’ target=’_new’><br /> 
 <input class=’topsubsboxname’ name=’name’ onblur=’if (this.value == 
&apos;&apos;) {this.value = &apos;Your Name&apos;;}’ 
onfocus=’if (this.value == &apos;Your Name&apos;) {this.value = 
&apos;&apos;;}’ value=’Your Name’/><br />  <input 
class=’topsubsboxemail’ name=’email’ onblur=’if (this.value == 
&apos;&apos;) {this.value = &apos;Your Email 
Address&apos;;}’ onfocus=’if (this.value == &apos;Your Email 
Address&apos;) {this.value = &apos;&apos;;}’ value=’Your 
Email Address’/><br />  <input class=’topsubsboxbutton’ type=’submit’ value=’Sign Up!’/><br /> </form><br /> 
 <p style=’margin-top: 8px;font-size: 13px;text-align: 
center;font-family: Source Sans Pro;font-style: italic;font-weight: 
600;’>We&#39;ll not spam mate! We promise.</p><br />

</div><br /><div class=’socialicons’><br />  <div class=’socialheading’>Become Our Fan on Social Sites!</div><br />

<ul><br /><li><a href=’<span style="background-color: yellow;">https://www.facebook.com/BloggerYard</span>‘><img
 
src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinS5nv1HZHH0t6OLJ4ph5cWRNwJuCK5VfUONxTZPksHNOz13zZ_7CQDXR9TFNTrsligxb07LC41OvQD9WOick9f5iITCvkXbVN_hkqr1lSfEu3zayt_KwhgD_JIzKV3cPUDeRUnlyFT0kJ/s1600/facebook_64.png’
 title=’Facebook’/></a></li><br /><li><a href=’<span style="background-color: yellow;">https://twitter.com/BloggerYard</span>‘><img
 
src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7sBOdF-fefQ4L4AvUX9VABx06ZQxHT1EekBnWK0mYkJ-68iX61Q79s6eKc5ZxnInAJRoqjGBXbFfgrHWmhOQsvRy_7HsaQLF3FvkHeybYXLN86O3Np6eOT2a86Qg_jonD1WTjWVWX8liz/s1600/twitter_64.png’
 title=’Twitter’/></a></li><br /><li><a href=’<span style="background-color: yellow;">https://plus.google.com/101996924620264617682/</span>‘><img
 
src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSc1Hx42KSOjyWIE01lMyWTtJMU-KOemCXNZpRpOv6CKnVYIv659GLwNWOEuMnA8Q4Knau1eN_EQKv-tmsytds2i6p-_bpY-YrSJ-q5Luujvg12_4oZipN_6ol6kqbD47vddGXlScFFS5R/s1600/google-plus_64.png’
 title=’Google +’/></a></li><br /><li><a href=’<span style="background-color: yellow;">http://feeds.feedburner.com/BloggerYard</span>‘><img
 
src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY16iyWfgiiHjNGkMHYFyeIvMgYsSB5JoeptDvafM5XXrs-y-GlSTeGFOFIL1oO6qBbvVhUzDTcxVAOgOEdUyEAYl5R_OxeJ_cSkjnyIBt7bJg1vD4NoGQCxz95TBRDXBteq1RcJ-u_xAC/s1600/rss_64.png’
 title=’Rss’/></a></li><br /><li><a href=’<span style="background-color: yellow;">http://pinterest.com/yaqoobhisbani/</span>‘><img
 
src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhatdBx5JuYRtFtMB5DwbIOFVhGWkxwME6vV7a8feAlmfYZ_iG8O-WGR4F77M27rxAUM4uj_6KaIsrsWx2UurWT9Yg5wGBaptNhMaQsohld8Puo0pUEZwj4Yy8VtPPa8P7IJnKT1ANRoJGE/s1600/pinterest_64.png’
 title=’Pinterest’/></a></li><br /></ul>  </div><br />    </div><br /><!– Top Subsbox By Www.BloggerYard.Com End –></blockquote>
<ul style="text-align: left;">
<li>Replace The Highlighted URLs With Yours</li>
<li>Click “<b>Save</b>” and You’ve Done!</li>
</ul>
<div>
<h3 style="text-align: left;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Final Words</h3>
</div>
<div>
So friends this was our third resource which is an stylish 
subscription widget for header. I hope you’ve liked this widget and 
you’re using this in your blog. However, If you wish to share this with 
your readers and you can share this but you’ll need to link back us as 
credits. Any problem? let me know in comments. Take Care. <b>Happy Blogging!</b></div>
</div>
</div>
</div>
</div>

Add Email Subscription Box In Header With Social Icons

Previously, we’ve created some widgets which were Socializer Widget , Email Subscription Widget and we released Tech Sh...

How To Add Chat Room In Blogger Blogs

<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVuuwNfUib_nJ2mnEJOJuaFradvcAKbbVjC0GJGD0FQtqXWOXEGQ27ZiZF8GGOlKYdb7BVl2w_qQLahQaICs55R72N_hc1Xenk2ix8vI4hVGWRBtGPOvN0Nk1XLf_mWSPFCsViEN1E-T_/s1600/Add+Chat+Room+In+Blogger.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Chat Room For Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVuuwNfUib_nJ2mnEJOJuaFradvcAKbbVjC0GJGD0FQtqXWOXEGQ27ZiZF8GGOlKYdb7BVl2w_qQLahQaICs55R72N_hc1Xenk2ix8vI4hVGWRBtGPOvN0Nk1XLf_mWSPFCsViEN1E-T_/s1600/Add+Chat+Room+In+Blogger.jpg" /></a></div>
Have you ever thought about adding chat room in your blog? One of our
 reader asked me yesterday that how can we add chat room in blogger 
blogs. I told him to wait a little and we’ll fulfill your wish in our 
next post and here we’re going to teach that how to implement chat room 
in Blogger. By default in Blogger, we can’t add any chat room but we can
 do it by using any service. So today we’re going to use ChatWing which 
is most popular chat widget. That chat widget can be added in the 
specific page or in the sidebar. But you’ll need to set the height and 
width of the widget and that is not so difficult as you think. First of 
all let me tell you some features of that widget.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br /><a href="https://www.blogger.com/null" name="more"></a><br />
<br />
<h3 style="text-align: left;">
ChatWing Features</h3>
<div>
ChatWing is a free service for everyone which provides the custom 
web based chat widget which can be used anywhere on the web. This 
service is having some awesome features which we’ve described below.</div>
<h4 style="text-align: left;">
Login Methods</h4>
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsqDD1LjUx7G9YURW9Pqp2kNKVL__wmd9eVvkx3DBa9X2DuuXsxgi6d9XwjPubd6b_qUT9-M61Wp2fCHOcIxDYfXG-pa63OxlRWk4LZFMyDomMAK9y2o47hRUpd8Bvvmpv3F3H-Zm9Y5e1/s1600/login+methods.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsqDD1LjUx7G9YURW9Pqp2kNKVL__wmd9eVvkx3DBa9X2DuuXsxgi6d9XwjPubd6b_qUT9-M61Wp2fCHOcIxDYfXG-pa63OxlRWk4LZFMyDomMAK9y2o47hRUpd8Bvvmpv3F3H-Zm9Y5e1/s320/login+methods.png" width="320" /></a></div>
<div style="clear: both; text-align: left;">
Your users can easily login 
with any social networking account. No matter, If someone has not any 
social account, he can also login as a guest. You can also enable and 
disable any social site’s account.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<h4 style="text-align: left;">
Easy To Change The Size</h4>
<div style="clear: both; text-align: center;">
<a href="http://chatwing.com/images/feature_2.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="281" src="http://chatwing.com/images/feature_2.png" width="400" /></a></div>
<div style="clear: both; text-align: left;">
Another feature is that you 
can easily change the height and width or the size of your chat widget. 
You don’t to have much knowledge about coding to do this. You will just 
need to drag the slider and press save button to generate the new 
coding.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<h4 style="text-align: left;">
Create Custom URL</h4>
<div style="clear: both; text-align: center;">
<a href="http://chatwing.com/images/feature_3.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://chatwing.com/images/feature_3.png" /></a></div>
<div style="clear: both; text-align: left;">
This is also good feature 
that you can easily create the custom URL of your widget. By this you 
can easily reach to chat box by entering the custom address on browser.</div>
<h4 style="text-align: left;">
Add The Music In Your Chat Box</h4>
<div style="clear: both; text-align: center;">
<a href="http://chatwing.com/images/feature_4.png" style="margin-left: 1em; margin-right: 1em;"><img adg-hidden="display;;" border="0" src="http://chatwing.com/images/feature_4.png" style="display: none ! important;" /></a></div>
<div style="clear: both; text-align: left;">
This is also great feature 
that you can easily add the mp3 music in your chat widget. No matter if 
your readers get bored, You just add the audio url along with audio name
 by going to to settings. Then your readers will enjoy the music.</div>
<h4 style="text-align: left;">
Easy To Edit The Chat Box</h4>
<div style="clear: both; text-align: left;">
You can also easily edit the
 font of your chat box and also change the background image but if you 
wish to upload your own custom image then you can also do it. This is 
not difficult but you can do it in just 4 5 clicks. And this service is 
having a lot of awesome features.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<h3 style="text-align: left;">
Create ChatWing Chat Room</h3>
<div>
In order to add the chat room in your blog, You will need to first join the ChatWing then you can do it. Simply go to <a href="http://chatwing.com/" rel="nofollow" target="_blank">ChatWing</a> and join it. Now after joining it go to your account and Click on “<b>Create Chatbox</b>“.</div>
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGFP7Ezzf-1_lQOMPIbdpwGrB8qP9lxjCQePCrY0OYPzYtyHGLMHgaK-AYzjnjbvoHA3tj957V5Is6zRMTmgu2zDP7qAeA-NfVSADl719MJ1x2r6jViA1Z9xvMGSYGi9cgRmK24F3jfKQV/s1600/create+chatbox.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGFP7Ezzf-1_lQOMPIbdpwGrB8qP9lxjCQePCrY0OYPzYtyHGLMHgaK-AYzjnjbvoHA3tj957V5Is6zRMTmgu2zDP7qAeA-NfVSADl719MJ1x2r6jViA1Z9xvMGSYGi9cgRmK24F3jfKQV/s1600/create+chatbox.png" /></a></div>
<div>
After that you will come to next step which is customizing your 
chatbox. You can easily do any kind of change with it. After completing 
the editing, Click on “<b>Save</b>” and Then Hit “<b>Use</b>” button.
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXou3l8rAxB8Y_YAeEn_pZs-Wbx_Kqn1HLjTA_7z1wSKnAQM-sp4_ERP2itRv10k2H5taMH0StvHTVt1Ips5OPzH3bltoNTuqM2Vc9lh6JYL2I-0COEvMgJv9KpBQZYdA4BOkBRVNBPsYC/s1600/save+and+use.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXou3l8rAxB8Y_YAeEn_pZs-Wbx_Kqn1HLjTA_7z1wSKnAQM-sp4_ERP2itRv10k2H5taMH0StvHTVt1Ips5OPzH3bltoNTuqM2Vc9lh6JYL2I-0COEvMgJv9KpBQZYdA4BOkBRVNBPsYC/s400/save+and+use.png" width="400" /></a></div>
<div style="clear: both; text-align: left;">
After that, Go to <b>embedded options</b> in order to add that chat widget in your blog. There you will see the<b> iframe code</b> at the bottom, copy that code and save it in notepad.</div>
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPSjJioUUCL0-AQn14EeagCic5FmBImxXkbM-mxjVAQ9RKWRPkquRdhEco6GeH6iJM3m26nlMEpkl0FAAfOjgoU880dmHOe9VXBDp9TTNZpAYcVHN_WaIRnfsaHi6OZREdShe9uuxXi1hr/s1600/iframe+code.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPSjJioUUCL0-AQn14EeagCic5FmBImxXkbM-mxjVAQ9RKWRPkquRdhEco6GeH6iJM3m26nlMEpkl0FAAfOjgoU880dmHOe9VXBDp9TTNZpAYcVHN_WaIRnfsaHi6OZREdShe9uuxXi1hr/s1600/iframe+code.png" /></a></div>
<div style="clear: both; text-align: left;">
Now Go To <b>Blogger </b>>> <b>Pages </b>>> <b>New Page</b> >> <b>Blank Page</b></div>
<div style="clear: both; text-align: left;">
Write The Page Name and Go To “<b>HTML</b>” Tab.</div>
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIiqVgR2vy982UZtCQF3bZbMQKSJ7O0MuCJMShpjTFLk9S_GvUPdElzNZs-hkoYoRec7qMDAdrxiXmcracFCxyGi3Ds6WT8Frjc7XyIVguhXQpcIS4gFIg_ljZlMEOK-xmEemJ3hmgJP31/s1600/html+tab.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIiqVgR2vy982UZtCQF3bZbMQKSJ7O0MuCJMShpjTFLk9S_GvUPdElzNZs-hkoYoRec7qMDAdrxiXmcracFCxyGi3Ds6WT8Frjc7XyIVguhXQpcIS4gFIg_ljZlMEOK-xmEemJ3hmgJP31/s1600/html+tab.png" /></a></div>
<div style="clear: both; text-align: left;">
Paste The Chat Box Coding There and Hit “<b>Publish</b>” Button.</div>
<div style="clear: both; text-align: left;">
<b>That’s All!</b></div>
</div>
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

How To Add Chat Room In Blogger Blogs

Have you ever thought about adding chat room in your blog? One of our reader asked me yesterday that how can we add chat room in blogger...

Newsletter Email Subscription Widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVMazTm1NUpT5xZFUP2Wiyfv-YVSgckSP_oUX8rzDaLbfmkExdRlmf5KMxI8mvyzjm-XkbwHRmShfsv239Fc9nsM-sXisxQtaFC7-VktrHjtzp1aBWwnuZD2cbVY6yczU71OqiR3MNF-eX/s1600/Newsletter+Email+Subscription+Widget.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Newsletter Email Subscription" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVMazTm1NUpT5xZFUP2Wiyfv-YVSgckSP_oUX8rzDaLbfmkExdRlmf5KMxI8mvyzjm-XkbwHRmShfsv239Fc9nsM-sXisxQtaFC7-VktrHjtzp1aBWwnuZD2cbVY6yczU71OqiR3MNF-eX/s1600/Newsletter+Email+Subscription+Widget.jpg" /></a></div>
After releasing our first widget which was “<a href="http://www.bloggeryard.com/2013/06/socializer-widget-for-blogger-increase-social-traffic/" target="_blank">Socializer Widget</a>”
 here we’re back with our second widget. Socializer Widget was pretty 
cool and having awesome effects with gorgeous button which we’ve shared 
with you and we hope that you’re using it. But now today we’ve developed
 a simple and clean widget which is Newsletter Email Subscription 
Widget. This widget will help you in increasing the email subscribers. 
Email subscribers play important role for a blog. They help your blog in
 getting high number of page-views and daily visits. Not only they help 
in traffic, But they also give support in getting approval from 
BuySellAds and Google AdSense or on any other advertising networks. It 
means these networks also check the email subscribers.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><br /><a href="https://www.blogger.com/null" name="more"></a><br />
<br />
<h3 style="text-align: left;">
Newsletter Email Subscription Widget</h3>
<div>
This is a clean, simple and attractive widget which is obviously 
going to help you in building the email subscribers list. This widget is
 build with only two programming languages which are CSS3 and HTML. 
After developing this, we’ve checked it in several most popular browsers
 and we came to know that it’s working pretty cool in every browser. It 
consists of a title on the top, little description along with cool icon 
to tell the subscriber that what he will receive, two input fields which
 are Name and Email Address, a little line for telling your visitors 
that we’ll not spam and in the last, an awesome Sign Up button. This 
widget is having 500 pixels width, So the best place for adding this 
widget is below every post. There you have more chances of getting new 
subscribers. Before you get this widget in your blog, have a live look 
on this widget by pressing the below button.<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div style="text-align: center;">
<a href="http://bloggeryardlab.blogspot.com/2013/05/bla-bla-bla.html" rel="nofollow" target="_blank">LIVE DEMO</a>
<ul>
<li style="text-align: left;"><b>Must Read : </b><a href="http://www.bloggeryard.com/2013/06/submit-blogger-sitemap-to-google/" target="_blank">Submit Blogger Sitemap To Google</a></li>
</ul>
</div>
<div style="text-align: left;">
<h3 style="text-align: left;">
Adding This Widget In Blogger</h3>
<div>
<ul style="text-align: left;">
<li>Go To Blogger >> Template >> Backup Your Template</li>
<li>Click Edit HTML and Search For Below Code</li>
</ul>
</div>
</div>
<blockquote>
<data:post.body/></blockquote>
<ul style="text-align: left;">
<li>After Finding The Above Code Paste The Following Code Below <data:post.body/></li>
</ul>
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvs6WE_E8EPe4Bx-fwsbrC8GaxSii2p5-SOqyzMEdxgyj_Eui6_GK3rI49HRau5iFDfgXMmsLIQP8ztx5MYQBVrbxp-JYBGNAFGsYbTdmpcujZQEg2Bi3pSndCtuHwBh1MidtZgicLg5J/s1600/data+post+body.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifvs6WE_E8EPe4Bx-fwsbrC8GaxSii2p5-SOqyzMEdxgyj_Eui6_GK3rI49HRau5iFDfgXMmsLIQP8ztx5MYQBVrbxp-JYBGNAFGsYbTdmpcujZQEg2Bi3pSndCtuHwBh1MidtZgicLg5J/s1600/data+post+body.png" /></a></div>
<blockquote>
 <b:if cond=’data:blog.pageType == &quot;item&quot;’><br /><!– Newsletter Widget By Www.BloggerYard.Com –><br /><style><br />#byard-subsbox {<br /><span style="white-space: pre;"> </span>height:300px;<br /><span style="white-space: pre;"> </span>width:500px;<br /><span style="white-space: pre;"> </span>background:hsla(0,0%,95%,0.4);<br /><span style="white-space: pre;"> </span>padding:10px;<br /><span style="white-space: pre;"> </span>border:5px solid hsla(0,0%,67%,0.19);<br /><span style="white-space: pre;"> </span>border-radius:10px 10px 10px 10px;<br />}<br />#byard-subsboxh3 {<br /><span style="white-space: pre;"> </span>text-align:center;<br /><span style="white-space: pre;"> </span>margin:10px;<br /><span style="white-space: pre;"> </span>text-transform:uppercase;<br /><span style="white-space: pre;"> </span>font-weight:bold;<br /><span style="white-space: pre;"> </span>font-family:&#39;Merienda&#39;;,cursive;<br /><span style="white-space: pre;"> </span>font-size:1.4em;<br /><span style="white-space: pre;"> </span>letter-spacing:1px;<br />}<br />#byard-subsboxheader {<br /><span style="white-space: pre;"> </span>border-bottom:1px solid #ddd;<br /><span style="white-space: pre;"> </span>border-top:1px solid #ddd;<br /><span style="white-space: pre;"> </span>font-size:16px;<br /><span style="white-space: pre;"> </span>padding-bottom:10px;<br /><span style="white-space: pre;"> </span>font-family:&#39;Marmelad&#39;,sans-serif;<br /><span style="white-space: pre;"> </span>text-align:left;<br />}<br />.byard-subsbox-form {<br /><span style="white-space: pre;"> </span>padding:20px;<br />}<br />#byard-subsboxheader img {<br /><span style="white-space: pre;"> </span>padding-right:10px;<br />}<br />.byard-subsbox-name {<br /><span style="white-space: pre;"> </span>background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAc1j56w65SVXZjHlRqxseY6T3LqEEAJnubrPg8-g6nVzpsVXxkQ5jUnqJA9DpH427lRFvVMAlFLeRHZn7vkP8986H7MUPF3KKBurHUKpPrgOWNA7IsQrvIHGNfXjjbZlfmMtFLbD7Odw/s320/name.png) no-repeat 7px 8px;<br /><span style="white-space: pre;"> </span>border:1px solid #ddd;<br /><span style="white-space: pre;"> </span>font-family:Arial,sans-serif;<br /><span style="white-space: pre;"> </span>font-size:13px;<br /><span style="white-space: pre;"> </span>font-weight:bold;<br /><span style="white-space: pre;"> </span>color:hsla(0,0%,27%,0.69);<br /><span style="white-space: pre;"> </span>width:90%;<br /><span style="white-space: pre;"> </span>height:24px;<br /><span style="white-space: pre;"> </span>padding:5px 15px 5px 28px;<br /><span style="white-space: pre;"> </span>vertical-align:top;<br /><span style="white-space: pre;"> </span>display:inline-block;<br />}<br />.byard-subsbox-email {<br /><span style="white-space: pre;"> </span>background:#fff
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuHdcVqedXHUdXM4iZgRsiHhij1_s5QrQLhbVjvmW53mWuFgbq2jVz9KKzotoX7AB3qH3LzuCK-amX957WuEYW-Djcqu4MxFYlNetY6Avl55ensq7nzm8qyXReFCeyoRddWFJimtLeoBQ/s320/email.png)
 no-repeat 7px 10px;<br /><span style="white-space: pre;"> </span>border:1px solid #ddd;<br /><span style="white-space: pre;"> </span>font-family:Arial,sans-serif;<br /><span style="white-space: pre;"> </span>font-size:13px;<br /><span style="white-space: pre;"> </span>font-weight:bold;<br /><span style="white-space: pre;"> </span>color:hsla(0,0%,27%,0.69);<br /><span style="white-space: pre;"> </span>width:90%;<br /><span style="white-space: pre;"> </span>height:24px;<br /><span style="white-space: pre;"> </span>margin-top:10px;<br /><span style="white-space: pre;"> </span>padding:5px 15px 5px 28px;<br /><span style="white-space: pre;"> </span>vertical-align:top;<br /><span style="white-space: pre;"> </span>display:inline-block;<br />}<br />.byard-subsbox-name:hover,.byard-subsbox-email:hover {<br /><span style="white-space: pre;"> </span>border:1px solid #bebebe;<br /><span style="white-space: pre;"> </span>box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);<br />}<br />.byard-subsbox-submit {<br /><span style="white-space: pre;"> </span>float:right;<br /><span style="white-space: pre;"> </span>margin-top:20px;<br /><span style="white-space: pre;"> </span>-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;<br /><span style="white-space: pre;"> </span>-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;<br /><span style="white-space: pre;"> </span>box-shadow:inset 0px 1px 0px 0px #ffffff;<br /><span style="white-space: pre;"> </span>background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );<br /><span style="white-space: pre;"> </span>background:-moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );<br /><span style="white-space: pre;"> </span>filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#ededed&#39;,endColorstr=&#39;#dfdfdf&#39;);<br /><span style="white-space: pre;"> </span>background-color:#ededed;<br /><span style="white-space: pre;"> </span>-moz-border-radius:6px;<br /><span style="white-space: pre;"> </span>-webkit-border-radius:6px;<br /><span style="white-space: pre;"> </span>border-radius:6px;<br /><span style="white-space: pre;"> </span>border:1px solid #dcdcdc;<br /><span style="white-space: pre;"> </span>display:inline-block;<br /><span style="white-space: pre;"> </span>color:#777777;<br /><span style="white-space: pre;"> </span>font-family:arial;<br /><span style="white-space: pre;"> </span>font-size:15px;<br /><span style="white-space: pre;"> </span>font-weight:bold;<br /><span style="white-space: pre;"> </span>padding:6px 24px;<br /><span style="white-space: pre;"> </span>text-decoration:none;<br /><span style="white-space: pre;"> </span>text-shadow:1px 1px 0px #ffffff;<br />}<br />.byard-subsbox-submit:hover {<br /><span style="white-space: pre;"> </span>background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed) );<br /><span style="white-space: pre;"> </span>background:-moz-linear-gradient( center top,#dfdfdf 5%,#ededed 100% );<br /><span style="white-space: pre;"> </span>filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#dfdfdf&#39;,endColorstr=&#39;#ededed&#39;);<br /><span style="white-space: pre;"> </span>background-color:#dfdfdf;<br />}<br />.byard-subsbox-submit:active {<br /><span style="white-space: pre;"> </span>position:relative;<br /><span style="white-space: pre;"> </span>top: 1px;<br />}<br /></style><br />    <link href=’http://fonts.googleapis.com/css?family=Marmelad’ rel=’stylesheet’ type=’text/css’/><br />    <link href=’http://fonts.googleapis.com/css?family=Merienda’ rel=’stylesheet’ type=’text/css’/><br /><center><br /><div id=’byard-subsbox’><br /><span style="white-space: pre;"> </span><div id=’byard-subsboxh3′><br /><span style="white-space: pre;">  </span>Subscribe To Our Newsletter<br /><span style="white-space: pre;"> </span></div><br /><span style="white-space: pre;"> </span><div id=’byard-subsboxheader’><br /><span style="white-space: pre;">  </span><a
 href=’http://goo.gl/6rQJK’><img 
src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6OuNlcDQcdFHHRvRivvElD8IknA1XXsZ7RdBBLNPoMSxKMLMMCg-QZHJYR5Ht1aGKyq4ibKhgUu45jbvr8GYN0eITUPZ4dyEXDFaBf6atuxrFgjeY3nWYWozU2gU5drrE03D1a0rtbqA/s1600/mail-icon.png’
 style=’float:left;’/></a><br /><span style="white-space: pre;">  </span><p style=’margin-top:13px;’><br /><span style="white-space: pre;">   </span><span style="background-color: yellow;">Sign
 Up Now To Get Free Pro Tutorials About Search Engine Optimization, 
Blogging Guide, Making Money Online, Giveaways and Much More. 
It&#39;s 100% Free!</span><br /><span style="white-space: pre;">  </span></p><br /><span style="white-space: pre;"> </span></div><br /><span style="white-space: pre;"> </span><form action=’http://feedburner.google.com/fb/a/mailverify?uri=<span style="background-color: yellow;">BloggerYard</span>‘ class=’byard-subsbox-form’ method=’post’ target=’_new’><br /><span style="white-space: pre;">  </span><input
 class=’byard-subsbox-name’ name=’name’ onblur=’if (this.value == 
&apos;&apos;) {this.value = &apos;Your Name&apos;;}’ 
onfocus=’if (this.value == &apos;Your Name&apos;) {this.value = 
&apos;&apos;;}’ value=’Your Name’/><br /><span style="white-space: pre;">  </span><input
 class=’byard-subsbox-email’ name=’email’ onblur=’if (this.value == 
&apos;&apos;) {this.value = &apos;Your Email 
Adress&apos;;}’ onfocus=’if (this.value == &apos;Your Email 
Address&apos;) {this.value = &apos;&apos;;}’ value=’Your 
Email Address’/><br /><span style="white-space: pre;">  </span><input class=’byard-subsbox-submit’ type=’submit’ value=’Sign Up!’/><br /><span style="white-space: pre;"> </span></form><br /><span style="white-space: pre;"> </span><p style=’font-family:times new roman;margin-top:10px;font-size:15px;’><br /><span style="white-space: pre;">  </span><b>We Hate Spam! </b>Really, It&#39;s terrible and we never do it.<br /><span style="white-space: pre;"> </span></p><br /></div><br /></center><br /> </b:if></blockquote>
<ul style="text-align: left;">
<li>Replace Long Highlighted Message With Your Own.</li>
<li>Replace <span style="background-color: yellow;">BloggerYard</span> With Your Feedburner Username.</li>
<li>Press “<b>Save Template</b>“</li>
<li><b>That’s All!</b> </li>
</ul>
<h3 style="text-align: left;">
From The Editors Desk</h3>
<div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8224162800388116"
     data-ad-slot="7511596786"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
So friends, How is this simple widget ? I hope you’ve liked it and 
you’re using it in your blog. If you wish to share this widget on your 
blog then kindly link back to original post. If you have got any problem
 then leave a comment below and let’s discuss about it. Other many 
amazing developments are coming soon. So get connected with us for and 
don’t forget to subscribe us. Take care. <b>Cheers!</b></div>
</div>

Newsletter Email Subscription Widget For Blogger

After releasing our first widget which was “ Socializer Widget ” here we’re back with our second widget. Socializer Widget was pretty c...