Subscribe For Free Updates!

We'll not spam mate! We promise.

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

    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!!