Static Follow By Email Pop Out Widget For Blogger

Presenting Static Follow By Email Pop Out Widget. This widget works with jQuery and other scripts. It has a function to slide out/ pop out on click. You will have a Heading, some text and follow by email widget. These all will slide out when you will click on a button. This is simple, you can easily edit the- Heading, Text etc. We will be adding this widget with a simple code. This widget is simple but with the slide out effect your blog gets more space and this will not look normally like your other subscription widgets. So lets get this-

How To Add Static Follow By Email Widget To Blogger?

Just follow the simple steps below-

1. Go to your blog.

2. Jump to "LAYOUT"

3. Add a new "HTML/JAVASCRIPT" gadget.(Anywhere in the corner) 

4. Paste the following code in the "EDITOR"-

<style type="text/css">
/*<![CDATA[*/
    #w2bfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
    .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
    .w2bfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
    .w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLnDJDItPekEmtXskhr7j-oM1LWAFeSVrUD69f03YEkDD0bmfYcdO90Ol2aOmjCtLCWvaemdFPxnWZ7BAErxU4ZwnIwVqsdAW2P1P_aw6bItl8oq2Wyuv4XXyyrYqwL12lIm-tAhASWQdp/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
    .w2bfollowButton:hover,.followActive {color: #fff !important;}
    .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
    .followactive {background-color: #333;}
    .w2bfollowForm {padding: 15px;}
    .w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
    .w2bfollowForm p {margin: 0 0 10px;}
    .w2bfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
    .w2bfollowForm form {text-align: center;}
    .w2bfollowForm .emailInput:focus {color: #000;border-color: #000;}
    .w2bfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
    .emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
    .emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
    .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
    .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
    .w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="w2bfollowSubscribe" style="display:none;">
    <div class="w2bfollowForm">
        <a class="w2bfollowButton" href="#" title="Follow"><span>Follow</span></a>
        <h3>Via Email</h3>
        <p>Get in touch with Blogger Tricks Hut via email.</p>
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrickshut', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
            <input type="hidden" value="BloggerTricksHut" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input type="submit" value="Subscribe" class="emailSubmit"/>
        </form>
        <p class="w2bFollowFooter">
            <a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
        </p>
    </div>
</div>

Read More

Pinterest Buttons With Counters For Blogger

The Pinterst now became the social media network of 2012 with more than 10.4 million registered users and 50 million blog posts. Daily Pinterest users have increased by over 145 percent from the beginning of 2012. This is a new networking site but is emerging amongst the existing popular social network giants like - Facebook, Twitter, Google Plus and LinkedIn. So now the task comes grabbing traffic to our blog from Pinterest. As other sites, Pinterest provides a button called "Pin It". These buttons help in increasing the traffic, similar to the buttons like - "Share", "Like" and "Tweet". So lets start our work on adding these buttons to our blog. 

How To Add Pinterest Buttons To Blogger?

1. Go To "BLOGGER" > "TEMPLATE".

2. Backup your template.

3. Click on "EDIT HTML"

4. Click "PROCEED"

5. Check the "EXPAND WIDGET TEMPLATES" box

6. Search for this code :

<data:post.body/> 

Now if you want to add the button, below your post titles then paste the codes provided just before/above the above code(<data:post.body/>). If you wish to add the button below your post then paste the provided codes just below/after the above(<data:post.body/>) code.

Horizontal Count

 <a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>

Vertical count 

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>

Today you have learned to add a pinterest button to your blog and how to promote your blog with it. We will be posting more such posts on pinterest and others. Stay tuned to blogger tricks hut. Don't forget to pin this post. 

Read More

Flash Animated Label Cloud Widget For Blogger

Presenting the Flash Animated Label Cloud Widget for blogger. This is a fully flash widget with wonderful effects. This is a easy customizable widget and automatically extracts labels from your blog. This has been a very popular plugin at WordPress. Your blog will surely get a good look with this tutorial. So in this post you will learn how to add this super cool widget to blogger blogs and customize it as per your needs. So lets get on to the tutorial!


DEMO

How to add this widget to blogger?

1. Sign into your blogger account.

2. Go to your blog and jump to "LAYOUT".

3. From there add a "HTML/JAVASCRIPT" gadget.

4. In the "HTML COMPOSER" paste the below code:-

<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://BLOGGERTRICKSHUT.BLOGSPOT.COM/">BLOGGER TRICKS</a></p></div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
    blogurl        : "HTTP://BLOGGERTRICKSHUT.BLOGSPOT.COM",
    color          : "000000",
    hoverColor     : "333333",
    backgroundColor: "FFFFFF",
    size           : 15,
    speed          : 100,
    width          : 250,
    height         : 250,
    transparency   : true
};
/*]]>*/
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_new_flash_label_cloud.js"></script>

How to customize this widget? 

As mentioned above this widget is an easy customizable widget, just fellow the simple steps to make this widget suit your blog. Just understand the simple words to be changed!

1. Change our blog url to yours(if you won't do it, labels will be extracted from

    our blog not yours).

2. In the label color- change the code 000000 to the color your want.

3. Change the hover color 333333 to the color you want.

4. Change background color FFFFFF to the color you want.

5. Change size 15 to the text size suiting your blog's sidebar links.

6. Change the height(250) and width(250) to the height and width your

    sidebar suits. 

That's it you have successfully added a super cool label cloud to your blog. Keep blogging. Don't forget to share. Bye!

 

Read More

Do You Like This Story Subscription Box For Blogger

We have learned to add a "Subscription Box Below Posts" that had an old look, but now we are up here with a super cool subscription box for blogger. We will add this widget below all our posts. So there are much chances for your visitors to subscribe your blog. This widget includes a link to your Twitter, Facebook and Feed-burner. So more chances to increase your Fans, Followers And Subscribers. As you can see we also have an subscribe via email form. This widget also includes two plugins from facebook- Like Button and Share Button, means increasing your blog traffic. This widget is created by My Blogger Tricks. Lets go on to the tutorial to add this cool widget to your blog!

ADDING DO YOU LIKE THIS STORY WIDGET TO BLOGGER!
1. After you sign up to blogger, jump to "TEMPLATE" and click "EDIT HTML".
2. Check the "Expand Widget Template" check-box.
3. Find for this code in the editor:

<data:post.body/>

4. Just below/after the above code paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFRM-ELIA9tWtJmrSmr5G2ZzDDmd1coyEbnpfPZY082c-lZOiQQRowb-mvdJhIP_rdbFlpirpUkNbyy7BjVf1SKU5PPKHV_QcpX_Fnv3sDa5nBqoyaUAs3L4fbAFKFHoenrDWoH4ppjl2/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbtbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>

<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana;  color:#FF683F;'>Do you Like this story..?</span>
<tr>
<td>

<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>

</td>

</tr>

<tr>

<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bloggertrickshut&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='bloggertrickshut'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>

<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>

<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px;  '>Follow us!</p>
<a href='http://feeds.feedburner.com/Bloggertrickshut' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYbVDAuaLsQ7KP0MEMaeWkAtCDxiYSZbiMja0NaNQ_Hgexo16fF1IeYN26kaENCManZqz6ETenByYJdwnnAtmnY52AUbNF8jRYTiqR0LIHFRj88hPaH3r2kbbrrmYDP08c6BRJ1mHOfMSJ/s40/w2bRSS+.png'/></a>

<a href='http://twitter.com/pradeepinku' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_lwU_09NOaUBiyuZKbKJ0RsRUG0DuQQV3THgBv5dTW_f0840u4DW3ce68oaMZTqWUp2g_86xzsit9Hu6FW2DfiBgd6vpkfxZBkTgcQyWbHnQdU7fPxUjctWtwG7nTN0yJqDcegRWDkygC/s40/w2bTwitter.png'/></a>

<a href='http://www.facebook.com/BloggerTricksHut' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB0rI4lKjg-Aso-PkR6wFv_Z-D7Km1psEyS9pf-ZUqCHpoaMKFCtwYNpQt7UPpiWNXtr2KPR5UW0ZslGxDPrkRMuVioLZaZ4XPZK3k-AFR9d2747rsjJF63kxSkzU9LmT8GoJ1M9NnfL_q/s40/w2bFaceBook.png'/></a>
</td>

</tr>

</tbody></table></div></div>
</b:if>

 CUSTOMIZING THE WIDGET!
1. Replace the orange link with your feed burner link.
2. Replace the blue link with your twitter link.
3. Replace the violet link with your facebook link.
4. Replace the red text with the text you like.


You have successfully added this to your blog now. This makes your visitors your readers and your readers your fans. Keep blogging. Share it with your friends. Your comments are welcome!

 

Read More

Social Media Share Widget For Blogger

Presenting a very cool subscription widget! As we know social media is the best one to pull traffic, and this widget is the best to start pulling traffic. This widget is very cool designed as you can see the image at left. This has a search bar, link to your RSS feeds, link to your blog's Twitter Profile, link to your Facebook Fan Page and share buttons that share the page the visitors are in. As per my results this widget is one my favorite widgets ever. 

Read More

Mashable Sharing Widget For Blogger

Presenting the Mashable Sharing Widget For Blogger.
This is a very powerful widget to make your readers subscribe to your blog. 
This widget has many plugins like - Facebook Like Box, Twitter Follow Button, Google's +1 button, Google Plus Follow button and links to your Facebook, Twitter And Google Plus accounts.
This widget also includes a Subscribe By Email Box. 
With cool light colors this widget brought to you for just embedding with some simple customizations. 
As we all know that social media is a powerful source for a blogs traffic, we could really expect a lot from this widget, specially if it is placed at a place where people have more attention on your blog. 
Social media could be the best for your blogs growth and this widget will be the best to make your blog grow. 

Read More

Facebook LikeBox jQuery Popup With Timer

We have posted many posts on social media for your blog. But today's post is something different from all of them. Today's widget is a popup Facebook Like Box, with count down timer. This widget has an image link to your fan-page, a small like box, a close button and a count-down timer. You can also set the timer. Your visitors need to wait for the seconds you provide in  the timer to close the popup Like Box, but still they can click on the close button at the top of the pop-out. People might like to click on the button as it interferes while going to your blog.

Read More

Sexy Sharing Is Caring Widget For Blogger

You must have noticed Sharing is sexy/caring social bookmarking auto-hide widget on many blogs and websites. This widget is very different than other available social bookmarking buttons. The graphics looks very stylish and different. The button of this widget has auto-hide effect when hover on it. All that makes it a must have widget for any blog. Here in this post, i will explain how you can add Sharing is sexy widget to Blogger blog after every post. You might like to see our post on Subscription Box Below Every Post.

Read More

Subscription Box Below Every Post For Blogger

Today we are going to add a subscription box below every posts of our blog. Why should you add this to your blog? After reading your article if your blog readers liked your article, they would subscribe to your blog to get more like updates. In todays tutorial I will not be using any images. After this tutorial I will be posting some more sharing widgets for blogger. For now lets start the tutorial.

Read More

Sticky Bar With Share Buttons And Text For Blogger

BTH's Stickybar is just a custom version of hello bar but it has no Ads and can easily be styled and customized to blend your blog template. Since it is always better to have your own custom widgets therefore we designed this easy bar which sticks to the top of your blog or website to grab the attention of all visitors. Both these social plugins would help you increase your fan following. The Facebook like button will be linked to your fan page so that any like may turn out into a Fan. You might also like to learn Adding Reply Link To Blogger Comments Lets get to work then!

Read More

Show Sharing Buttons Below Every Post

This widget includes popular social networking buttons like Twitter, Facebook Like, Google Plus +1, Add this and Stumbleupon. I am using it in my blog as you can see. We will also customize here the Add This button and will add blog title inside it. You can easily customize it to change the background colors and widget overall look. It can be added to both Blogger and Wordpress. It has great importance in boosting blog traffic through the shares made through these buttons which will circulate in social media and help you enjoy a long lasting referenced traffic. Lets add these valuable buttons to your blog.

Read More