Subscribe For Free Updates!

We'll not spam mate! We promise.

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!