Subscribe For Free Updates!

We'll not spam mate! We promise.

Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Wednesday, October 9, 2013

Add Stylish Subscribe Via Email Widget In Blogger

Hi Friends,In this post i m going to share a stylish and cool email subscribe widget for your Blogger Blog.
It will help to increse your blog subscriptions.

This Widget is fully seo optimized and Does not effect on your blog load speed.Place this Widget in below the Post Widget or Above the Post Widget.






How To Add Stylish Subscribe Via Email Widget In Blogger?
  • First for All Go To Blogger.com > Design > Edit Html
  • Find ]]></b:skin> Using 
    CTRL+F
  • Copy the code below and paste it just Above ]]></b:skin> tag 
 /*Custom Header Styling*/
#headline{background:url('http://1.bp.blogspot.com/-NdSSDI1IOkU/Twk4eOQkErI/AAAAAAAAA8I/efWcI1_qBKE/s1600/headline-bg.png') repeat; color:#fff; margin:0 auto; border-top: 1px solid #000; height:30px; font-size:12px; position:fixed; bottom:0; z-index:1000; width:100%;border-top-left-radius:20px;border-top-right-radius:20px; display:block;}
#headline:hover{background:#333;}
#headline p{line-height:30px; font-size:12px; text-align:center; width:95%; float:left;}
#headline p a{ text-decoration:blink; color:#ffcc00; border-bottom:1px dashed;}
#headline li.widget, #headline li.widget p{margin:0; line-height:30px; list-style:none; font-size:12px; text-align:center;}
.kill-btn{display:block; position:relative; right:15px; float:right;}
.kill-btn a{font-size:18px; font-weight:bold; font-family:"Comic Sans MS"; color:#fc0; line-height:30px;}
/* Subscription Box */
#sleek-subscribe{display: block; margin:0 auto; }
.newsheadline {color:#222; font-size:16px; line-height:50px; float:left; font-weight:bold;}
.newsheadline span{font-size:38px; color:#444; line-height:14px; font-family:"Trebuchet MS"; font-weight:normal;}
.newsheadline cite{font-style:normal; color:#f00;}
.signform{background:url('http://4.bp.blogspot.com/-WRSL0nB1jds/TtIfq0vkHkI/AAAAAAAAAiw/655L2S2tMnk/s1600/dwd.PNG') no-repeat;padding:0 0 10px 100px; float:right; }
      .txt2, .txt2:focus{width:140px; font-size:15px; background:#fff; color:#000000; border:1px solid #FF9332; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;}
      .btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #FF0000; color:#fff; font-size:15px; border-radius:10px;}
            .btn2:hover{background:#6689b0; }

  • Then Go To Page Elements > Add a Gadget 
  • Choose HTML/JavaScript from the list of the gadgets
  • Copy and paste the code below in the content box.

 <div id="sleek-subscribe">
<div class="newsheadline"><span>Sign-up</span> for <cite>FREE</cite> daily Updates.</div>
<form action="http://feedburner.google.com/fb/a/mailverify?uri=HashmiWorld4U" class="signform" method="post" target="_new">
<input class="txt2" name="name" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Your Name...&#39;;}" onfocus="if (this.value == &#39;Your Name...&#39;) {this.value = &#39;&#39;;}" value="Your Name..." />
<input class="txt2" name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Your Email Address...&#39;;}" onfocus="if (this.value == &#39;Your Email Address...&#39;) {this.value = &#39;&#39;;}" value="Your Email Address..." />
<input class="btn2" type="submit" value="Subscribe Us!" />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><a href="http://hashmiworld4u.blogspot.com/" target="_blank" title="Blogger Widgets">Get This Widget</a></span></div>
></div>
</form>
<div class="clear"></div>
</div>

  • Replace HashmiWorld4U with your feedburner Feed ID 
Well Done!

    Add SpiceUpYourBlog Style Social Widget In Blogger

    Hi Friends, Today i goona Share this Awesome social widget with roung spinning effect for your blogger blog.SpiceUpYourBlog is a Popular blog which covers topics like Blogging Tips, SEO etc. You must have visited this blog before and if you did, you must have noticed its awesome social widget. The Social widget has a nice spinning effect on mouse hovering.this is very cool widget.Its main feature is it covers all major social links facebook, twitter, feedburner feeds, google+, Pinterest.It changes your blog look attractive.



    How To Add SpiceUpYourBlog Style Social Widget In Blogger?

    • First for All Go To Blogger.com > Page Elements > Add a Gadget
    • Choose HTML/JavaScript from the list of the gadgets
    • Copy and paste the code below in the content box. 
     <style>
    #social img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    }
    #social img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    .comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;margin:0;background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px}
    .CSS_LIGHTBOX_BG_MASK
    {
    background-color:#990000 !important;opacity: 0.8 !important;
    }
    .post img {max-width:95% !important;}
    --></style>
    <center><div id="social"><a title="Grab Our Rss Feed" href="http://feeds.feedburner.com/HashmiWorld4U"  target="_blank"><img border="0" src="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="http://feedburner.google.com/fb/a/mailverify?uri=HashmiWorld4U&amp;loc=en_US"  target="_blank"><img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="http://facebook.com/HashmiWorld4U"  target="_blank"><img border="0" src="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="http://twitter.com/HKashifJaved"  target="_blank"><img border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/104283015279880391921" target="_blank"><img style="margin-right:1px;" src="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/YourUserName" target="_blank"><img style="margin-right:1px;" src="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div></center> 
    Change all Bold Red words with your URL's


    • Replace HashmiWorld4U with your feedburner Feed ID
    • Replace HashmiWorld4U with your facebook Page ID
    • Replace HKashifJaved with your twitter ID
    • Replace https://plus.google.com/104283015279880391921 with your Google+ ID 
    • Replace http://pinterest.com/YourUserName with your Linkedin URL
    Well Done!

    Add Css Social Widget In Blogger

    Hi Friends,In this Post i m sharing this css Social widget with hower effect for blogger.Hope you like this widget.This css widget is very cool and stylish.itcontains all the social links like: facebook,twitter,Google+,LinkedIn,Rss feeds,I'm sure that this will tempt your readers to have a look at on your social links.Now,Hurry up add this widget in your blog. Its very easy. just follow the below steps one by one.





    How To Add Css Social Widget In Blogger 

    • First for All Go To Blogger.com > Page Elements > Add a Gadget
    • Choose HTML/JavaScript from the list of the gadgets
    • Copy and paste the code below in the content box. 
     <style type="text/css">
    .btnt-chronicl-social {  width: 320px;  margin: -10px;  }
    .btnt-chronicl-social ul {  margin: 0;  padding: 0;  }
    .btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
    .btnt-chronicl-social ul li a {   color: #fff;   display:block;  }
    .btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
    .btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
    .btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
    .btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
    .btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
    .btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
    </style>
    <div class="btnt-chronicl-social">
    <ul>
    <li><a class="rss" href="http://feeds.feedburner.com/HashmiWorld4U">Subscribe to the RSS Feed</a></li>
    <li><a class="twitter" href="https://twitter.com/HKashifJaved">Follow me on Twitter</a></li>
    <li><a class="facebook" href="https://www.facebook.com/HashmiWorld4U">Find me on Facebook</a></li>
    <li><a class="google" href="https://plus.google.com/104283015279880391921">Join me on Google+</a></li>
    <li><a class="linkedin" href="http://in.linkedin.com/in/YourUserName">Connect with me on LinkedIn</a></li>
    </ul>
    </div>
    Change all Bold Red words with your Url's.


    • Replace HashmiWorld4U with your feedburner Feed ID
    • Replace HashmiWorld4U with your facebook Page ID
    • Replace HKashifJaved with your twitter ID
    • Replace https://plus.google.com/104283015279880391921 with your Google+ ID 
    • Replace http://in.linkedin.com/in/YourUserName with your Linkedin URL
    Well Done!

    Friday, July 5, 2013

    Add Floating Share Buttons Widget in Blogger

    Blogging becomes more interesting if visitors share your contents in different social media networks sites with their friends less in time. But now a days it becomes a common problem for every blogger and webmaster when they spend alot of time in sharing theirs contents on different social media sites and waste their precious blog posting time. really it will take all your precious time think about it.
    Today in this article i will share with you some amazing Social Sharing buttons widget with the help of this social sharing buttons widget you will be able to share your each post contents in less than a minute. this vertical social sharing floating buttons widgets widely used by many bloggers and webmasters.

    So this article is all about how to add social sharing floating buttons widget in Blogger. by adding this awesome All social sharing buttons widgets in your blog, then  you will see a dramatically change in visitors in all your social sharing media sites.

    How To Add Floating Share Buttons Widget in Blogger
    • First for All Go To Blogger.com > Design > Edit Html
    • Find <b:includable id='post' var='post'> Using 
      CTRL+F
    • Copy the code below and paste it just after <b:includable id='post' var=post'> tag 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style>
    .mbt_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;
    width:60px;
    background-color:#f7f7f7;
    padding: 5px 0 0px 0px;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    border-bottom:1px solid #ddd;
    z-index:9999px !important;
    border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
    }
    .mbt_social_floating .mbt_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
    }
    .mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
    }
    .mbt_social_floating .st_fblike_vcount{
    margin-left:5px;
    }
    .mbt_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
    }
    .mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
    background:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
    }
    .st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif&#39;) !important;
    }
    .mbt_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
    }
    .mbt_social_floating .stButton_gradient{
    border:none !important;
    }
    .mbt_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
    }
    .mbt_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
    }
    .st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
    }
    .st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
    }
    .st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
    }
    .mbt_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
    }
    </style>
    <div class='mbt_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
    <span class='st_fblike_vcount' displaytext=''/>
    <span class='st_twitter_vcount' displaytext='' st_via='HashmiWorld4U'/>
    <div style='margin:5px 0 0px 0;'>
    <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</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> </center>
    </div>
    <div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
    </div>
    <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
    <a class='addthis_counter'/>
    </div>
    <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
    <script type='text/javascript'>
    var addthis_config = {
    ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,
    ui_header_color: &quot;#ffffff&quot;,
    ui_header_background: &quot;#0080FF&quot;
    }
    </script>
    <span class='st_email' displaytext=''/>
    <p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.hashmiworld4u.blogspot.com/2013/07/add-floating-share-buttons-widget-in.html' style='color:#CAC8C8;'>Widgets</a></p>
    </div>
    </b:if></b:if>
    • Replace HashmiWorld4U With Your Twitter Username..

    That's All Done!

    Thursday, May 30, 2013

    Add Related Posts Widget For Blogger With Thumbnails

    Are you looking to increase page views of your blog? This should be a must have widget for your blogger blog. Related Posts with thumbnails is not just a one more related posts widget. This widget really looks good with the content and thus adds something worth to the overall design of your template. It helps your readers to go through the similar posts they were reading and so helps to decrease your bounce rate by increasing page views.

    By displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

    In this post we will go through the steps of adding the Related Posts Widget with thumbnails for Blogger. Ready to add to your template? Go through the steps below.

    How To Add Related Posts Widget For Blogger With Thumbnails

    • First for All Go To Blogger.com > Design > Edit Html
    • Find </head> Using CTRL+F
    • Copy the code below and paste it just after </head> tag 
    <!--Related Posts with thumbnails Scripts and Styles Start B2W--><b:if cond='data:blog.pageType == &quot;item&quot;'><style type="text/css">#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
    #related-posts h2{font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{color:black;}#related-posts a:hover{color:black;}
    #related-posts  a:hover {background-color:#d4eaf2;}</style><script type='text/javascript'>var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="Related Posts";</script><script src='http://beautifulbloggerwidgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/></b:if><!--Related Posts with thumbnails Scripts and Styles End B2W-->
    • Now find the following code: 
    <div class='post-footer-line post-footer-line-1'>
    • If you can't find it, then search for this one: 
    <p class='post-footer-line post-footer-line-1'>
    OR:
    <data:post.body/>
    • Copy the code below and paste it just after <data:post.body/> tag and save your template.   
    <!-- Related Posts with Thumbnails Code Start B2W-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
    <script type='text/javascript'>
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
    </script>
    </div><div style='clear:both'/>
    <!-- remove --></b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
    <a href='http://beautifulbloggerwidgets.blogspot.com/' ><img style="border: 0" alt="Blogger Widgets" src="http://2.bp.blogspot.com/-Hn8-zTJf3L0/T9cqAcnrfJI/AAAAAAAAAGM/5gBy5_MPPBQ/s1600/blogger-widgets.png" /></a>
    </b:if></b:if>
    <!-- Related Posts with Thumbnails Code End B2W-->
    • Change the 6 value from max-results=6 with the number of posts you want to be displayed.