Subscribe For Free Updates!

We'll not spam mate! We promise.

Showing posts with label Blogger Tricks. Show all posts
Showing posts with label Blogger Tricks. 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!

    Tuesday, October 8, 2013

    Add Stylish Subscription Widget In Blogger

    Today i Share This Cool and Stylish Subscription Widget For your Blogger Blog. I hope this widget helps you to stylish your blog. this widget contains all important social network links like: facebook like box, google+, Twitter followers. Add to circles and the most important is subscribe option. subscription widget is very important to increase your readers and traffic.
    you can also add this widget on Wordpress by just add a code in your blog. Now, Follow the

    some below steps and install it on your blog or website.

    How To Add Stylish Subscription 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>
     #TB-mashable-bar {
    background-color: #f9f9f9; box-shadow: 0 0 3px #b0b0b0;
         border:1px solid #ccc;
           padding:6px;
    width: 270px;
        }
    #subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#f7f7f7;}
     #subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding: 9px 11px;}
     #subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
     #subscribe-box .email-box {
       border-right: 1px solid #C7DBE2;
            border-left: 1px solid #C7DBE2;         background: #d3e0ed;
    border: 1px solid #ccdaed;  padding:11px; margin-bottom: -4px;}
      #subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
    #subscribe-box .email-box .txt,#subscribe-box .email-box .txt:focus{
    border: 1px solid #d2d2d2;
    color: #a19999; font-size: 12px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height:21px;
    padding: 6px 28px 8px; width: 93px;
    }
      #subscribe-box .email-box .btn,#subscribe-box .email-box .btn:focus{ float:right;
    margin-top: 0px;
    background: #30a146;  background: linear-gradient(top, #30a146 0%, #249334 100%);  background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));  background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%);   text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);  font-weight:bold;    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #248334 ;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:8.5px 10px;
        margin-left:3px;
        font-weight:bold;
        font-size:12.2px;
        cursor:pointer;
        border-image: initial;}
       #subscribe-box .email-box .btn:hover{
    opacity: .8;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #248334  ;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0}
    </style>
    <div id="ABT-mashable-bar">
    <div id="subscribe-box">
    <div class="email-box">
    <h4>Subscribe updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=HashmiWorld4U" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/HashmiWorld4U" target="_blank">RSS</a></h4>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HashmiWorld4U', 'popupwindow',  'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow">
    <input class="txt" style="background: #FFF  url('http://i.imgur.com/2BCD0.png') no-repeat 6px !important;" onfocus="if (this.value == 'Your email ID ')  {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your email ID ';}" type="text" name="email" value="Your email ID " />
    <input type="hidden" name="uri" value="HashmiWorld4U" />
    <input type="hidden" name="loc" value="en_US" />
    <input class="btn" style="margin-left: 4px;" type="submit" value="Subscribe" />
    <div style="clear: both;"></div>
    </form></div>
    <div class="fb-like-box"><iframe style="border: none; overflow: hidden; width: 80px; height: 21px;" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2HashmiWorld4U&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" frameborder="0" scrolling="no" width="320" height="240"></iframe><a style="color: #3b5998; font-family: ubuntu; font-size: 18px; font-weight: bold; line-height: 20px;" href="http://www.facebook.com/HashmiWorld4U" rel="nofollow" target="_blank"> Like on Facebook </a>
    <div class="clear"></div>
    </div>
    <div class="gplusone">
    <div style="float: left; width: 90px;">
    <div id="___plusone_0" style="height: 24px; width: 106px; display: inline-block; text-indent: 0pt; margin: 0pt; padding: 0pt; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline;"><iframe id="I1_1322986463651" style="position: static; left: 0pt; top: 0pt; width: 106px; margin: 0px; border-style: none; height: 24px; visibility: visible;" title="+1" name="I1_1322986463651" src="https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2FHashmiWorld4U.blogspot.com%2F&size=standard&count=true&annotation=&hl=en-US&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fwidget%2F__features__%2Frt%3Dj%2Fver%3D-8uDua_W7bo.en_GB.%2Fsv%3D1%2Fam%3D%218NuGo4ypxRCIwtBaLA%2Fd%3D1%2F#id=I1_1322986463651&parent=http%3A%2F%2FHashmiWorld4U.blogspot.com&rpctoken=511986996&_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="240"></iframe></div>
    </div>
    <a style="color: #dd0000; font-family: ubuntu; font-size: 16px; font-weight: bold; line-height: 24px;" href="https://plus.google.com/104283015279880391921" rel="author" target="_blank">Circle on Google+</a>
    <div class="clear"></div>
    <!-- Place this render call where appropriate -->
    <script type="text/javascript">// <![CDATA[
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    // ]]></script></div>
    <div class="twitter-follow">
     <iframe style="width: 300px; height: 20px;" title="" src="http://platform.twitter.com/widgets/follow_button.html#_=1322986464549&button=blue&id=twitter-widget-22&lang=en&screen_name=HKashifJaved" frameborder="0" scrolling="no" width="320" height="240"></iframe>
    <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>
    <div id="mashable" style="height: 12px; background: #f9f9f9; border: 0px solid #CCC; border-top: 1px solid white; text-align: right; border-image: initial; font-size: 10px;"><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://hashmiworld4u.blogspot.com/2013/10/add-stylish-subscription-widget-in.html" target="_blank">Grab This Widget »</a></span></div>
    </div>
    </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 

     Well Done!

    Add nRelate Related Posts Widget In Blogger

    Now i am share a post about how to add related posts widget in blogger via nRelate. Related posts is very useful for every blog to easy to navigate posts. It is also useful to increase your blog pageviews.
    To Install this widget on blogger, simply follow the below steps.





    How To Add nRelate Related Posts 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.
    1: Display Widget on Posts only
    <div id="nrelate_related_backup_placeholder"></div>
    <script type="text/javascript">
    var nr_posts_only = true;
    </script>
    <script async type="text/javascript" src="http://static.nrelate.com/rcw_b/0.52.0/loader.min.js"></script>
    2: Display Widget on Posts and Homepage
    <div id="nrelate_related_backup_placeholder"></div><script type="text/javascript" src="http://static.nrelate.com/rcw_b/0.52.0/loader.min.js"></script>
    Save it,Well done! 

    Add Simple Recent Posts Widget In Blogger

    The main advantage on this Recent Posts widget is that it will show not only post titles but also post excerpts or snippets and it's easy to customize/ apply different style on it. To style it into your own design, you just have to modify the CSS style - you can change the link or background color, the size and color of text/links.

    What you can do with this widget:
    display post titles only
    change the number of posts
    change the number of characters of the post snippet/excerpt
    show the post dates



    How To Add Simple Recent Posts Widget In Blogger?

    • First for All Go To Blogger.comPage Elements > Add a Gadget
    • Choose HTML/JavaScript from the list of the gadgets
    • Copy and paste the code below in the content box.
    1: Recent Posts Widget With Snippets
    <div id="hlrpsa">
    <script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
    </script>
    <script>
    var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
    </script>
    <script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
    </script></div>
    <div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
    <a href="http://hashmiworld4u.blogspot.com/2013/10/add-simple-recent-posts-widget-in.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://HashmiWorld4U.blogspot.com" title="Recent Posts Widget">Tricks World</a></div>
    <noscript>Your browser does not support JavaScript!</noscript>
    <style type="text/css">
    #hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
    #rpdr, #rpdr a {color:#808080;}
    #hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
    .hlrps a {font-weight:bold; }
    .hlrpssumm {}
    </style>
     2: Recent Posts Widget Showing Post Titles Only
    <div id="hlrpsb">
    <script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
    <script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
    <script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
    <div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://hashmiworld4u.blogspot.com/2013/10/add-simple-recent-posts-widget-in.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://HashmiWorld4U.blogspot.com" title="Recent Posts Widget">Tricks Worlds</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
    <style type=text/css> 
    #hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
    #rpdr, #rpdr a {color:#808080;}
    .bbrecpost2 {
    padding-top:6px;
    padding-bottom:6px;
    border-bottom: 1px #cccccc dotted; }
    </style>

    • Change 5 (option 1) and 10 (option 2) with the number of posts you want to display. 
    • Change false to true if you want the posts dates to appear 
    • Change 100 (option 1) if you want more characters to be displayed.
    • To change the color and font size of the links, modify the values in blue (links) and violet (font-size)
    • To change the style of posts summary, modify the values in green (color) and orange (font size)
    • Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example: 
    http://www.your-site.com/feeds/posts/default....
    Well Done!

    Tuesday, October 1, 2013

    Add Share To Enter Pop Up Box In Blogger

    How many of you guys are getting traffic from social networking sites? There are a lot of Bloggers or web masters which are getting handsome traffic from social sites because now a days these sites are an important source of getting traffic and almost every internet user is using social sites. Well, let's come to our today's post which is about "Share To Enter" pop up box. This pop up box is really fantastic in getting traffic from social sites because when someone will enter to your blog/site. This pop up box will appear and the user will have to click on any social button to access your site. This pop up box is built with the 3 main social site buttons which are Facebook like button, Twitter tweet button and Google+ plus one button.
    Some Great Features Of This Pop Up Box
    1. This widget has a close button which can allow your readers to dismiss this widget.
    2. This widget is working fine on every browser and it is cleaned widget.
    3. It has three main social buttons Facebook Like, Tweet and Plus one.
    4. This widget will only appear to those who is not following you on social sites and after the following it will disappear next time to that visitor.

    How To Add Share To Enter Pop Up Box In Blogger?
    • First for All Go To Blogger.com > Design > 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>
    .blackout {
     display: none;
     position:fixed;
     _position:absolute;
     width: 100%;
     z-index:10000;
     background-color:#000;
     margin: 0px;
     padding: 0px;
     left:0;
     top:0;
    }
    .socialmodalOuter {
     display: none;
     font-family: arial;
     color: #575E6D;
        font-size: 14px;
     line-height: 20px;
     background: rgb(73, 73, 73); /* The Fallback */
        background: rgba(0, 0, 0, 0.6);
        border-radius: 10px;
        left: 50%;
        padding: 7px;
        position: fixed;
     _position:absolute;
        top: 50%;
        z-index: 10001;
    }
    .socialmodal {
        background: none repeat scroll 0 0 #FFFFFF;
        border-radius: 3px 3px 3px 3px;
        width: 460px;
    }
    .socialmodal .title {
        border-bottom: 1px solid #E5E8EF;
        font-weight: bold;
        font-size: 19px;
        font-weight: bold;
     padding:16px 15px 10px 15px;
     text-align:center;
    }
    .socialmodal .subtitle {
     margin: 0px;
     background:#2e6886;
     color:#ffffff;
     padding:4px;
     text-align:center;
     font-weight: bold;
     font-size: 15px;
    }
    .socialmodal .warning {
     margin: 0px;
     background:#cb2026;
     color:#ffffff;
     padding:4px;
     text-align:center;
    }
    .socialmodal .content {
     padding: 0px 15px;
        margin-top: 10px;
     line-height: 17px;
    }
    .socialmodal .share {
     padding: 0px 15px;
     margin:20px 0px 15px 0px;
     text-align:center;
     height: 24px;
    }
    .socialmodal .close {
     background: url("http://1.bp.blogspot.com/-Ke5ehk-86ic/UDjNPBFGGSI/AAAAAAAAE7Q/n_T4qfGD40U/s1600/close.png") no-repeat;
        cursor: pointer;
        height: 12px;
        position: absolute;
        right: 15px;
        top: 15px;
        width: 12px;
     display: none;
    }
    .socialmodal .button {
        float: left;
        width: 115px;
     line-height: 24px;
     height: 24px;
    }
    .socialmodal .like {
     margin-left: 15px;
    }
    .socialmodal .twttr {
     margin-left: 30px;
    }
    .socialmodal .plus {
     width: 90px;
     margin-left: 50px;
    }
    /*
    // cusomize position of elements
    */
    .socialmodal .footer {
     clear: both;
        background: none repeat scroll 0 0 #E8EAEF;
        border-radius: 0 0 3px 3px;
        border-top: 1px solid #DDE0E8;
        padding: 10px 0;
        color: #878D9C;
        text-shadow: 0 1px 0 #FFFFFF;
     text-align:center;
     font-size:13px;
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      !window.jQuery && document.write('<script src="js/jquery.js"><\/script>')
    </script>
    <script src="http://apis.google.com/js/plusone.js" type="text/javascript" gapi_processed="true"></script>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
    <script src="http://platform.twitter.com/widgets.js"></script>
    <script src="http://mytechcafe.googlecode.com/svn/trunk/sharetoenter.js" type="text/javascript"></script>
    <script src="http://mybloggerlab.com/Scripts/jquery.cookie.js" type="text/javascript"></script>
    <script language="javascript">
    $(function() {
     $('body').socialmodal({
      uniqueName: 'autoloadmodal',
      subtitle: 'Like And +1 to Disable This Notification',
      facebook: 'https://www.facebook.com/SoftTechSpot',
      plusone: 'http://www.SoftTechSpot.BlogSpot.com',
      count: 0,
      manualClose: true,
     });
     $('body').socialmodal({
      twitter: 'HKashifJaved',
      onclick: '#download',
      callback: function(success) {
      },
     });
    });
    </script>

    • Replace https://www.facebook.com/SoftTechSpot with your Facebook page URL.
    • Replace http://www.SoftTechSpot.BlogSpot.com/ with your blog URL.
    • Replace HKashifJaved with your twitter username. 

    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!

    Saturday, June 29, 2013

    Add Beautiful Social Subscription Widget To Blogger

    The Social subscription widget is for the people who wants more genuine readers and good fan following for them. Yes the Subscription widget is an RSS type , which the people will enter their email and subscribe to the updates of the blog. Whenever the user post new content they will get the news on their email immediately.
    The Subscription widget here is mix up of CSS and HTML, and it is flavored with the Social media icons too, which reduces the blog space too.





    How To Add Beautiful Social Subscription Widget To Blogger
    • First for All Go To Blogger.com > Design > 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>
    #sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
     .sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
     .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
     .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
     .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
     .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
     .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
     #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
    a.social-icons{margin-right: 5px;height:45px;width:45px;}
    a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
    </style>

    <div id="sidebar-subscribe-box">
    <div class="sidebar-subscribe-box-wrapper">
        <br/>
    <a class="social-icons" href="https://www.facebook.com/SoftTechSpot"><img src="http://2.bp.blogspot.com/-0UOzHUdczG4/USDjuyJCndI/AAAAAAAAAY8/5nN8AcBcvHs/s1600/Bloggertrix-facebook.png" /></a>
    <a class="social-icons" href="https://twitter.com/HKashifJaved"><img src="http://2.bp.blogspot.com/-H-E4Ll7i2-0/USDjw3bxgVI/AAAAAAAAAZc/a2kMp8rGRVU/s1600/bloggertrix-twitter.png" /></a>
    <a class="social-icons" href="https://plus.google.com/b/100702882701565711888/100702882701565711888/posts"><img src="http://3.bp.blogspot.com/--KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png" /></a>
    <a class="social-icons" href="http://feeds.feedburner.com/SoftTechSpot"><img src="http://2.bp.blogspot.com/-kXhnrJzlA_A/USDju5hXjPI/AAAAAAAAAZA/x6NdMR0JFhQ/s1600/Bloggertrix-Rss.png" /></a>
    <p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
    <div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=SoftTechSpot" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SoftTechSpot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="way2usefulinfo" />
    <input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/>
    <input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
    </div></div></div>
    • Replace all highlighted colors.
    Done!! 

    Monday, June 10, 2013

    Add Stylish Subscription Box With Social Media Buttons Below Each Post In Blogger

    Adding subscription box below your each post is another best way of increasing your blog subscribers. This widget comprises of a subscription box, RSS link, twitter link, facebook link, and google + link. It will appear at the bottom of your post and this is one of the best way to get your readers attention.
    How To Add Stylish Subscription Box With Social Media Buttons Below Each Post In Blogger ?
    • First for All Go To Blogger.com > Design > Edit Html
    • Find <data:post.body/> Using 
    • CTRL+F
    • Copy the code below and paste it just after <data:post.body/> tag 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    form.feedburner{
    margin:20px 0 0;
    display:block;
    clear:both;
    }
    .RBstyle{
    background:url(http://3.bp.blogspot.com/-pl1ECUAcVEQ/T4YS7ZgR_uI/AAAAAAAAB_k/R92yDhiO65Q/s400/email_icon.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;
    }
    .RBsubmit{
    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%);
    }

    #emailwidget-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;
    }
    #emailwidget-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;
    }
    #emailwidget-outer td{
    padding:3px 0;
    }
    </style>

    <center>
    <div id='emailwidget-outer'>
    <div id='emailwidget'>
    <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
    <tbody>

    <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

    <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
    <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=HashmiWorld4U&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='Realcombiz'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input class='RBstyle' 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='RBsubmit' title='' type='submit' value='Submit'/>
    </form>
    </td>

    <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
    <a href='http://feedburner.google.com/fb/a/mailverify?uri=HashmiWorld4U' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://3.bp.blogspot.com/-ShqPVqX-vhs/TqgOXX5m9WI/AAAAAAAAFCg/WFRLxQ4yjuM/s1600/rss-30×43.png'/></a>

    <a href='http://twitter.com/HashmiWorld4U' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/-eVZSNf1mj_E/TqgOX_ldq1I/AAAAAAAAFCk/2wDDaA8esG8/s1600/twitter-30×43.png'/></a>

    <a href='http://www.facebook.com/HashmiWorld4U' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://1.bp.blogspot.com/-sT9lHle5N54/TqgOWhi-amI/AAAAAAAAFCU/MwoQL3ZhEy4/s1600/facebook-30×43.png'/></a>

    <a href='https://plus.google.com/104283015279880391921' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://3.bp.blogspot.com/-icT9kVFhtOs/TqgOXLJCbBI/AAAAAAAAFCY/pU4wo8HyHNI/s1600/googleplus-30×43.png'/></a> 
    </td>
    </tr>
    </tbody></table>
    <div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://yaqoobzone.blogspot.com/2012/10/how-to-add-stylish-subscription-box.html' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>
    </div></div>
    </center>
    </b:if>
    Please Make These Changes : 
    • Replace HashmiWorld4U,HashmiWorld4U with your feedburner username.
    • Replace HashmiWorld4U with your Twitter username.
    • Replace HashmiWorld4U with your Facebook Page username.
    • Replace https://plus.google.com/104283015279880391921 with your Google+.

    Sunday, June 9, 2013

    Add Simple Subscribe Via Email Box Widget To Blogger

    Today tutorial is about how to add a simple subscription box to your blogger blog, in my previous post, i have drop a lot of tutorials on how to add a different customize subscription box to blog. One thing that i like about this widget was that, it look so simple, and you can implement it anywhere on your blog. Follow the few steps below on how to add the widget to your blog.

    How To Add Simple Subscribe Via Email Box ?
    • First for All Go To Blogger.com > Design > 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>
    .rb-email{
    background:url(http://4.bp.blogspot.com/_MbejYjGokMM/TSeZHmWJ6oI/AAAAAAAAALE/93ELYyzmi64/s1600/email.png) no-repeat 0px 12px ;
    width:300px;
    padding:10px 0 0 55px;
    float:left;
    font-size:1.4em;
    font-weight:bold;
    margin:0 0 10px 0;
    color:#686B6C;
    }
    .rb-emailsubmit{
    background:#9B9895;
    cursor:pointer;
    color:#fff;
    border:none;
    padding:3px;
    text-shadow:0 -1px 1px rgba(0,0,0,0.25);
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    font:12px sans-serif;
    }
    .rb-emailsubmit:hover{
    background:#E98313;
    }
    .textarea{
    padding:2px;
    margin:6px 2px 6px 2px;
    background:#f9f9f9;
    border:1px solid #ccc;
    resize:none;
    box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
    width:170px;
    color:#666;}
    </style>
    <div class="rb-email">
    Subscribe via Email
    <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Yaqoobzone', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here...&quot;;}" onfocus="if (this.value == &quot;Enter email address here...&quot;) {this.value = &quot;&quot;;}" value="Enter email address here..." type="text" />
    <input type="hidden" value="HashmiWorld4U" name="uri"/><input type="hidden" name="loc" value="en_US"/>
    <input class="rb-emailsubmit" value="Submit" type="submit" />
    </form>
    </div>
    • Replace HashmiWorld4U with your feed title/username

    Add Flipper Sharing Widget Below Every Post In Blogger

    Hi Friends , Today our topic is about how to add flipper sharing widget below every post in blogger ? By adding this your readers will be able to share your blog on their favourite social media sites and you will be get more traffic and backlinks for those sites. Let's add it to your blog.

    How To Add Flipper Sharing Widget Below Every Post In Blogger?
    • First for All Go To Blogger.com > Design > Edit Html
    • Find <data:post.body/> Using CTRL+F
    • Copy the code below and paste it just after <data:post.body/> tag 

    <style>
    /*--------Flipper Sharing Widget ------*/
    .flipper a {
    display:block;
    height:48px;
    width:48px;
    padding:0 4px;
    float:left;
    background:transparent url(http://4.bp.blogspot.com/-dlD3BDKTZjA/T9IuXkfhSeI/AAAAAAAAGno/s8BGOkjdwX0/s1600/flipper.png) no-repeat;
    -webkit-transition: ease-in 0.15s all;   
    -moz-transition: ease-in 0.15s all;   
    -o-transition: ease-in 0.15s all;   
    -ms-transition: ease-in 0.15s all;   
    transition: ease-in 0.15s all;
    cursor:pointer;
    }

    .flipper a.googleplus {
    background-position: 0px -348px;
    }
    .flipper a.googleplus:hover {
    background-position: 0px -406px;
    }

    .flipper a.pinterest {
    background-position: 0px -464px;
    }
    .flipper a.pinterest:hover {
    background-position: 0px -522px;
    }

    .flipper a.delicious {
    background-position: 0px 0px;
    }
    .flipper a.delicious:hover {
    background-position: 0px -58px;
    }
    .flipper a.digg {
    background-position: 0px -116px;
    }
    .flipper a.digg:hover {
    background-position: 0px -174px;
    }
    .flipper a.stumbleupon {
    background-position: 0px -812px;
    }
    .flipper a.stumbleupon:hover {
    background-position: 0px -870px;
    }
    .flipper a.technorati {
    background-position: 0px -928px;
    }
    .flipper a.technorati:hover {
    background-position: 0px -406px;
    }
    .flipper a.twitter {
    background-position: 0px -928px;
    }
    .flipper a.twitter:hover {
    background-position: 0px -986px;
    }
    .flipper a.facebook {
    background-position: 0px -232px;
    }
    .flipper a.facebook:hover {
    background-position: 0px -290px;
    }
    .flipper a.reddit {
    background-position: 0px -580px;
    }
    .flipper a.reddit:hover {
    background-position: 0px -638px;
    }
    .flipper a.rss {
    background-position: 0px -696px;
    }
    .flipper a.rss:hover {
    background-position: 0px -754px;
    }

    .Pleaseshare{
    margin:10px 0px;
    color:#333333;
    font-weight:bold;
    font-size:20px;
    font-family:sans-serif;
    }
    </style>

    <div class='flipper'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class="Pleaseshare">
    Please Share it! :) </div>

    <!--Google Plus-->
    <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

    <!--Facebook-->
    <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

    <!-- Twitter -->
    <a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

    <!-- Pinterest -->
    <a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

    <!-- Delicious -->
    <a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

    <!--DIGG-->
    <a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
    <!--Stumble-->
    <a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

    <!-- Reddit -->
    <a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
    <!--RSS -->
    <a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/>
    </b:if></div>
    <div style="clear:both"/>
    To Change The Color Of The Text That Appears On The Top Of The Widget Edit #333333 

    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.  

    Wednesday, May 22, 2013

    How To Show Adsense Ads Between Post Title In Blogger ? Two Methods


    Hello Readers!
    Today I am going to share with you a small tip that how to add adsense inside your blogger's blog. Mostly people think that thay earned not too much from adsense and they want to earn more from adsense , so Guys follow this
    small trick and get a chance to earn more from blogger's blog .




    How To Show Adsense Ads Between Post Title In Blogger ?


    Method no 1:
    • First of all goto this link and convert your adsense code: http://htmlentities.net/
    • Find <data:post.body/> using CTRL+F 
    • Now paste the following code above "<data:post.body/>"

               <div style ="float: left; margin 10px 10px 10px 0px;">
                            YOUR ADSENSE CODE HERE</div>

    • Replace "YOUR ADSENSE CODE HERE" to your converted code 
    All done!

    If this method is not working try Method No 2:

    Method No 2:
    • First of all goto this link and convert your adsense code: http://htmlentities.net/
    • Find <div class='post-body entry-content'> using CTRL+F 
    • Now paste the following code above "<div class='post-body entry-content'>"
                        
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div align='left'>
       YOUR ADSENSE CODE HERE
      </div>
    </b:if>

    • Replace "YOUR ADSENSE CODE HERE" to your converted code 
    All done! 
    Take care friends

    Sunday, May 19, 2013

    How To Add Facebook Like Box In Blogger Blog


    Hello Readers, Today we will learn how to add a facebook like box in Bloggers Blog. Social networking websites like Facebook, Twitter and Google+ are providing the custom follow and like boxes which helps every blogger in many ways. Now social networks are one the most important part of blogging. Facebook like box help you to extend your reach and connect to the audience by proving them a mean to join you on facebook. It does not only help you to grow your community but traffic as well. Every blogger knows the importance of social networking websites for referral traffic.

    When you start your Facebook page you ask your friends and family members to like it and after that it all depends upon the content you write. If people like your content they will voluntary like your Facebook page. But still you need to provide them with an easy method of doing this. Facebook like box allows your visitors to join you easily and they don't have to find you manually. Facebook developers have made this thing very easy to integrate a Facebook like box in to your Blog by adding a few lines of code in it. No let us take a look at the steps you need to follow.

    How To Add Facebook Like Box In Blogger Blog.
    • This process includes the editing of your Blog's template, so it is recommended to take a backup of your Blog. First click on the template from your Blogger Dashboard. Then click on Backup/Restore and download the template from the pop-up window.
    • Now that you have taken the backup, you are ready for the process. Visit the FacebookDevelopers.
    • You will see a window like the one shown below.


    • Customize the look and feel, height, width of your Like box from this window.
    • Uncheck the show stream if you don't want the latest posts with this widget.
    • Uncheck the header checkbox if you don't want to display "Find us on Facebook".
    • Once you are done with the customization, click on Get code. It would pop-up a window like the one shown below.



    • Click on Edit template from the Blogger dashboard. Copy the code 1 from the above window and paste it just after the <body> tag.
    • Now save the template and click the Layout button.
    • Click on add a gadget from your sidebar. Add HTML/JavaScript gadget and Paste the code 2 in it.
    • Now you are done. Save the arrangement and click on View Blog.

    • You just added a Facebook like Box in your Blog. If you need any help you can comment here. You should also see other Blogging and SEOtips on Unziptech, it will help you improve your Blogging experience.
    • If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumble upon or giving us a link back via the links below. Stay tuned for more tech updates.