Recent Posts Widget for Blogger CSS Hover Effect with jQuery

How to Add Recent Posts Widget for Blogger CSS Hover Effect with jQuery to increase page views and give information to visitors about your new post. Recent Post Widget helps to increase page views and keep visitors to spend more time on your blog. This is a tutorial about How to add recent post widget for blogger with some text css hover effect. We provide you all css and jQuery code of Recent Post Widget to your blog or website. You can attract your visitors to spend more time on your blog and increase more page views. Its decrease your bounce rate and this is easy way to do this.

Recent Posts Widget for Blogger

Follow below steps to add Recent Posts Widget for Blogger CSS Hover Effect with jQuery:

Step 1

Login into your blogger account and Go to Blogger Dashboard. Go to Layout tab at left panel in your dashboard and click on Add a Gadget Link. See below picture for help.

Step 2

When you click on Add a Gadget Link a pop-up window will open with all available gadgets for blogger. Scroll down and select HTML/JavaScript gadget from list. See below picture for more help.

Step 3

Select your style for recent post and paste below code into HTML/JavaScript box:

Style 1:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"> <script language="JavaScript">home_page = "http://www.haakblog.com/"; numposts = 5;imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="https://dl.dropboxusercontent.com/u/127448791/recent-posts-min-1-ycode.js" type="text/javascript"/></script><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/ecikvgo68yrfgps/recent-posts-min-1.css" /></div> <div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"> <a href="http://www.haakblog.com/2013/11/recent-posts-widget-for-blogger-css-hover-effect-jquery.html" target="_blank" title="Recent Post Widget">Recent Post Widget</a> <a href="http://www.haakblog.com/" target="_blank">Blogger</a></div>

Note: Change http://www.24-work.blospot.com/ to your home page and if you change number of post than change 5 as your requirement.

Live Demo

Style 2:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"> <script language="JavaScript">home_page = "http://www.haakblog.com/"; numposts = 5;imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="https://dl.dropboxusercontent.com/u/127448791/recent-posts-min-1-ycode.js" type="text/javascript"/></script><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/b5er1tiy806lg6x/recent-posts-min-4.css" /></div> <div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"> <a href="http://www.haakblog.com/2013/11/recent-posts-widget-for-blogger-css-hover-effect-jquery.html" target="_blank" title="Recent Post Widget">Recent Post Widget</a> <a href="http://www.haakblog.com/" target="_blank">Blogger</a></div>

Note: Change http://www.24-work.blogspot.com/ to your home page and if you change number of post than change 5 as your requirement.

Live Demo

Style 3:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"> <script language="JavaScript">home_page = "http://www.haakblog.com/"; numposts = 5;imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="https://dl.dropboxusercontent.com/u/127448791/recent-posts-min-1-ycode.js" type="text/javascript"/></script><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/096opvko2j87076/recent-posts-min-6.css" /></div> <div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"> <a href="http://www.haakblog.com/2013/11/recent-posts-widget-for-blogger-css-hover-effect-jquery.html" target="_blank" title="Recent Post Widget">Recent Post Widget</a> <a href="http://www.haakblog.com/" target="_blank">Blogger</a></div>

Note: Change http://www.24-work.blogspot.com/ to your home page and if you change number of post than change 5 as your requirement.

Live Demo

Style 4:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"> <script language="JavaScript">home_page = "http://www.haakblog.com/"; numposts = 5;imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="https://dl.dropboxusercontent.com/u/127448791/recent-posts-min-1-ycode.js" type="text/javascript"/></script><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/1qicet23p7v6xuw/recent-posts-min-10.css" /></div> <div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"> <a href="http://www.haakblog.com/2013/11/recent-posts-widget-for-blogger-css-hover-effect-jquery.html" target="_blank" title="Recent Post Widget">Recent Post Widget</a> <a href="http://www.haakblog.com/" target="_blank">Blogger</a></div>

Note: Change http://www.24-work.blogspot.com/ to your home page and if you change number of post than change 5 as your requirement

Live Demo

Style 5:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"> <script language="JavaScript">home_page = "http://www.haakblog.com/"; numposts = 5;imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="https://dl.dropboxusercontent.com/u/127448791/recent-posts-min-1-ycode.js" type="text/javascript"/></script><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/do2fk4pfz9jl74w/recent-posts-min-13.css" /></div> <div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"> <a href="http://www.haakblog.com/2013/11/recent-posts-widget-for-blogger-css-hover-effect-jquery.html" target="_blank" title="Recent Post Widget">Recent Post Widget</a> <a href="http://www.haakblog.com/" target="_blank">Blogger</a></div>

Note: Change http://www.24-work.blospot.com/ to your home page and if you change number of post than change 5 as your requirement.

Live Demo

How to Add Image Slider in Blogger Post

Today we provide you tutorial about Add Image Slider in Blogger Post. You can easily add image slider in your blog post just follow some steps to add Image Slider. In this slider you get a ribbon at the left corner and it’s also contains with a slice effect. You can also edit it as you wish to perfectly for your blog.

 

Add Image Slider in Blogger Post 

You can follow below step by step guide to Add Image Slider in Blogger Post:


Step 1 :

Login to your Blogger Dashboard.





Step 2 :

Go to Layout then Click on Add A Gadget as shown in Below Picture.


 


Step 3 :

Select HTML/JavaScript as shown in Below Picture.






Step 4 :

Copy and Paste Below Code.

<style type="text/css"> /* http://dimpost.com */ #sliderFrame {position:relative;width:700px;margin: 0 auto 40px;} #slider { width:700px;height:306px;/* Make it the same size as your images */ background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg98yGkSAidaFyBC7PRScpKXqa6_XiB67UAibMy0Xf6JNmzrHy1LDNQq71-mVCHPdM5HXCfTvigSMtjTxWY396a7ablX_QmlHRQ5QKXq17gOMt7QbOjjMVUixsPv4d_DEbNYGYT4SeKEMi3/s1600/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto;/*make the image slider center-aligned */ box-shadow: 0px 1px 5px #999999; } #slider img { position:absolute; border:none; display:none; } /* the link style (if an image is wrapped in a link) */ #slider a.imgLink { z-index:2; display:none;position:absolute; top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%; } /* Caption styles */ div.mc-caption-bg, div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:0; left:0px; bottom:15px; z-index:3; overflow:hidden; font-size: 0; } div.mc-caption-bg { background-color:black; } div.mc-caption { font: bold 14px/20px Arial; color:#EEE; z-index:4; padding:10px 0; text-align:center; } div.mc-caption a { color:#FB0; } div.mc-caption a:hover { color:#DA0; } /* ------ built-in navigation bullets wrapper ------*/ div.navBulletsWrapper { top:320px; left:280px; /* Its position is relative to the #slider */ width:150px; background:none; padding-left:20px; position:relative; z-index:5; cursor:pointer; } /* each bullet */ div.navBulletsWrapper div { width:11px; height:11px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT17py6-F0gGVba4ZAvlavae4MET4cBPuBYlkzyADw3qQC37nLb-0JMJJpiOthfOypSnrHOZc0YJbaAm_oVaKT3QhXULMV-ogdIj4nXLBE5GKg8KSHMNEEF0Qye0N1XjSpHz8Rc_-C0ggh/s1600/bullet.png) no-repeat 0 0; float:left;overflow:hidden;vertical-align:middle;cursor:pointer; margin-right:11px;/* distance between each bullet*/ _position:relative;/*IE6 hack*/ } div.navBulletsWrapper div.active {background-position:0 -11px;} /* --------- Others ------- */ #slider { transform: translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); } </style> <script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="slider"> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJRfuKJ-f_Ij8UyqfcP-EzdKZO_gKSDEtuLmjEn5DpKHDHDaHC-Er7poHv229aouGC-wSlhRlgcPu-TUdQtimvOk9ioIxa-I9v5XV7Fx_J_J80IjHGahZY3FDDbetHW5TVysUhohjxZ-BU/h120/image-slider-1.jpg" alt="#htmlcaption1" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uEQhQ1LwfmJ3VaBn7aZBRwO70rXHVoLSRr7USgUqAIOXYyN3n1K2kwLXgrWJhAoVSoOMXhrj1vbmKFWxF_-QFRRFIJbTK5teItcNV3bmFmuVvBCDiuul-MTbnm8w4VYHi5IOlQ8V5O7u/h120/image-slider-2.jpg" alt="Go UP!" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3mc1bZ9hVxKnWu1pDidc-QVCoD2wkqWTwRXvN51KuumO_q_rOAGOe_RI0Di6Mwu6GDvEZN7FkCT0rgigVLq7Ya_VdmAVkeC7OwlOzlAg8jnPYJ4VMvapXI6TmJgeZt4bJTq0WeGS8XK19/h120/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLnww9hD5TCKzu_G1LCD5i3gBc03nmnuKsoGmt8RM9yVtglNnuO6ScUNcItZyNY2vUWz5-iPfjg29IsMhC71E-HDKub3zCmma3IBkpfSNC7xKEswFVbdgsChaBWvklLHmwsc59BKW6hGNC/h120/image-slider-4.jpg" alt="#htmlcaption2" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT38cUDq3OU7wJJzoQrzEayY4zvBbfBfpNpyZZBT_ujzXqDAHV3_sRemIa0ckG4OOn4S8BFYbE7SVsSOG5wELtSolxuKlh3cKajlEZn0N8enIv24y-tEuicV1WEA_uyisCc6AjA985g9yJ/h120/image-slider-5.jpg" alt="Stay Connected"/></a> </div> <div id="htmlcaption1" style="display: none;"> Code by <a href="http://www.24-work.blogspot.com" target="_blank">24-Work</a> </div> <div id="htmlcaption2" style="display: none;"> <a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks. </div> </div>

Tips: You can change your width and height as you wish. You can also change image URL which is show in red color.

Step 5 :

Now click on Save.

You have done. Its very simple to add image slider in your blogger blog. If you have any more updates then give us your updated code we will publish your updates as soon as possible.

If you have any question or update than you can contact with us any time at our E-mail support umairabbas92@gmail.com. I am always ready for fixing your css/HTML issues, For personalized help, you can HIRE ME

Animated Recent Posts for Blogger with Thumbnails

Animated Recent Posts for Blogger with Thumbnails good way to show your recent posts in side bar with animation effect to your readers. This is very fantastic way to get more clicks on your recent posts and present your new post in headlines update for your readers. Animated Recent Posts gadget shows your most recent posts with animated effect to move smoothly through the posts. We are giving you full tutorial about Animated Recent Posts for Blogger with Thumbnails. We also give you different types of recent post widget for your blog. You can simply add our code on your sidebar and it will show recent posts on your blog. We give you also demo of recent posts widget to show how to look this on your blog.

Animated Recent Posts with Thumbnails For Blogger

Follow below steps to add Animated Recent Posts for Blogger with Thumbnails on your blog:

Step 1 :

Login into your Blogger Account. Go to Your Blogger Dashboard and Click on Layout tab at the left side panel. Now click on Add a Gadget Link like below Picture.

 Step 2 :

After click on Add a Gadget Link a popup window will open with all available gadgets. Select HTML/JavaScript from gadgets list. See below picture for more help.

Step 3 :

Please select your style and paste codes in HTML/JavaScript box:

Style 1:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <style type="text/css" media="screen"> <!-- #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:350px; } #spylist ul{ width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:70px; overflow: hidden; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6NkURgkBmnjILYHtGkDdLFTuQXqUXmOcdPViNBKv92u8HPUQTqHAJIQvLFk3PyckzJnbJD7wzm0n_iBAZYVKO8kuOwIC2WWlaGYZt7BqBO7b7mOnxZBoUU7GmzDbnTkVa0wBWkqYja9y/s1600/24work-blogspot-com.jpg) repeat-x; border:1px solid #ddd; } #spylist li a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #spylist li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } .spydate{ overflow:hidden; font-size:10px; color:#0284C2; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } --> </style><a href="http://www.24-work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><script language='JavaScript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgWskaqUO4XIo53CyFU5-QY0BYF063mi1vRBsNCKSHX14FY288JO0VDfmjfKAfA427AYEP7773mXVCtY8A51V_hT9mWacsMepLnZHvR-iaQngAC3h54jf_ZC_iqCSvGsCg-3Y0hp7mICC/s1600/noimage.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgWskaqUO4XIo53CyFU5-QY0BYF063mi1vRBsNCKSHX14FY288JO0VDfmjfKAfA427AYEP7773mXVCtY8A51V_hT9mWacsMepLnZHvR-iaQngAC3h54jf_ZC_iqCSvGsCg-3Y0hp7mICC/s1600/noimage.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgWskaqUO4XIo53CyFU5-QY0BYF063mi1vRBsNCKSHX14FY288JO0VDfmjfKAfA427AYEP7773mXVCtY8A51V_hT9mWacsMepLnZHvR-iaQngAC3h54jf_ZC_iqCSvGsCg-3Y0hp7mICC/s1600/noimage.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgWskaqUO4XIo53CyFU5-QY0BYF063mi1vRBsNCKSHX14FY288JO0VDfmjfKAfA427AYEP7773mXVCtY8A51V_hT9mWacsMepLnZHvR-iaQngAC3h54jf_ZC_iqCSvGsCg-3Y0hp7mICC/s1600/noimage.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgWskaqUO4XIo53CyFU5-QY0BYF063mi1vRBsNCKSHX14FY288JO0VDfmjfKAfA427AYEP7773mXVCtY8A51V_hT9mWacsMepLnZHvR-iaQngAC3h54jf_ZC_iqCSvGsCg-3Y0hp7mICC/s1600/noimage.png"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 70; thumbheight = 70; fntsize = 12; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://www.24-work.blogspot.com/"; limitspy=4intervalspy=4000 </script> <div id="spylist"> <script src='https://dl.dropboxusercontent.com/u/127448791/animated-recent-posts-ycode-1.js' type='text/javascript'></script> </div> <div style="font-family: arial, sans-serif; font-size: 8px;" class="ycdr"> <a href="http://24-work.blogspot.com/2013/11/animated-recent-posts-for-blogger-with-thumbnails.html" target="_blank" title="Recent Post Widget">Animated Post Widget</a> <a href="http://www.24-work.blogspot.com/" target="_blank">Blogger</a></div>

Note: Change http://www.24-work.blogspot.com/ to Your Home page URL and Change 4 to number of recent post that you want to show in widget. You can also change Width of this widget with change both width:220px and width:208px; in style section.

Live Demo

Style 2:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <style type="text/css"> #rp_plus_img{height:377px;} #rp_plus_img li {height:60px;padding:5px;list-style:none; background-color:#ffffff; border:solid 1px #000000;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px; text-align:justify; -moz-border-radius: 5px;} #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;} </style><a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><script type="text/javascript" src="https://dl.dropboxusercontent.com/u/127448791/animated-recent-posts-ycode-2.js"></script> <script type="text/javascript"> var speed = 1500; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"> <script style="text/javascript"> var numposts = 5; var numchars = 0; </script> <script src="http://www.24-work.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul> <div style="font-family: arial, sans-serif; font-size: 8px;" class="ycdr"> <a href="http://24-work.blogspot.com/2013/11/animated-recent-posts-for-blogger-with-thumbnails.html" target="_blank" title="Recent Post Widget">Animated Post Widget</a> <a href="http://www.24-work.blogspot.com/" target="_blank">Blogger</a></div>

Live Demo

Note:Change www.24-work.blogspot.com to your blog URL.

Style 3:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <style type="text/css" media="screen"> #workwidget { overflow: hidden; margin-top: 5px; padding: 0px 0px; height: 385px; } #workwidget ul { width: 295px; overflow: hidden; list-style-type: none; padding: 0px 0px; margin: 0px 0px; } #workwidget li { width:230px; background: #1ed2f2; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 1px 10px !important; -webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px; } #workwidget li a { text-decoration: none; color: #4B545B; font-size: 15px; height: 18px; overflow: hidden; margin: 0px 0px; padding: 0px 0px 2px 0px; } #workwidget img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; } #workwidget img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7); } #workwidget li:hover { background: #84f6f5; } #workwidget img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); } .spydate { overflow: hidden; font-size: 10px; color: #0284C2; padding: 2px 0px; margin: 1px 0px 0px 0px; height: 15px; font-family: Tahoma,Arial,verdana, sans-serif; } .spycomment { overflow: hidden; font-family: Tahoma,Arial,verdana, sans-serif; font-size: 10px; color: #262B2F; padding: 0px 0px; margin: 0px 0px; } </style><a href="http://www.24-work.blogspot.com" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><script language='JavaScript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgWskaqUO4XIo53CyFU5-QY0BYF063mi1vRBsNCKSHX14FY288JO0VDfmjfKAfA427AYEP7773mXVCtY8A51V_hT9mWacsMepLnZHvR-iaQngAC3h54jf_ZC_iqCSvGsCg-3Y0hp7mICC/s1600/noimage.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgWskaqUO4XIo53CyFU5-QY0BYF063mi1vRBsNCKSHX14FY288JO0VDfmjfKAfA427AYEP7773mXVCtY8A51V_hT9mWacsMepLnZHvR-iaQngAC3h54jf_ZC_iqCSvGsCg-3Y0hp7mICC/s1600/noimage.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgWskaqUO4XIo53CyFU5-QY0BYF063mi1vRBsNCKSHX14FY288JO0VDfmjfKAfA427AYEP7773mXVCtY8A51V_hT9mWacsMepLnZHvR-iaQngAC3h54jf_ZC_iqCSvGsCg-3Y0hp7mICC/s1600/noimage.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgWskaqUO4XIo53CyFU5-QY0BYF063mi1vRBsNCKSHX14FY288JO0VDfmjfKAfA427AYEP7773mXVCtY8A51V_hT9mWacsMepLnZHvR-iaQngAC3h54jf_ZC_iqCSvGsCg-3Y0hp7mICC/s1600/noimage.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgWskaqUO4XIo53CyFU5-QY0BYF063mi1vRBsNCKSHX14FY288JO0VDfmjfKAfA427AYEP7773mXVCtY8A51V_hT9mWacsMepLnZHvR-iaQngAC3h54jf_ZC_iqCSvGsCg-3Y0hp7mICC/s1600/noimage.png"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 50; thumbheight = 50; fntsize = 15; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://www.24-work.blogspot.com/"; limitspy=4; intervalspy=4000; </script> <div id="workwidget"> <script src='https://dl.dropboxusercontent.com/u/127448791/animated-recent-posts-ycode-3.js' type='text/javascript'></script> </div> <div style="font-family: arial, sans-serif; font-size: 8px;" class="ycdr"> <a href="http://24-work.blogspot.com/2013/11/animated-recent-posts-for-blogger-with-thumbnails.html" target="_blank" title="Recent Post Widget">Animated Post Widget</a> <a href="http://www.24-work.blogspot.com/" target="_blank">Blogger</a></div>

Live Demo

Note: Change http://www.24-work.blogspot.com/ to your Blog URL. You can also change Width of this widget with change both width: 295px; and width:230px; in style section.

How To Add Facebook Share Button Automatically in Blogspot Blog

This is a step by tutorial to add Facebook share button automatically under blog post. Make your blogger template more beautiful and user friendly. Also give your visitor the opportunity to share your post directly on Facebook. So don’t be late. Add a stylish Facebook Share Button on your Blogspot Blog now and make your blog more beautiful.

Recently we talked about How to Add Facebook Comments Box on Blogger Blog. Today I am going to extend how to add Facebook share button automatically under every blog post. If you are using WordPress, you can easily do this using a WordPress plugin name “Facebook Share”. But there is no way to use any plugin on Blogspot blog. But if you want to add this feature Facebook share button on your blogger blog, you need to do this manually. You can easily do this by adding a simple FBML code into your blogger template. Just follow my tutorial if you are interested about this.

There are many ways to do this. But all the ways are not working and not easy. But today I am going to extend the easiest and working way to do this.

 Step 1:- Go to blogger dashboard> Template > Edit HTML. Mark “Expand Widget Template”.

Step 2:- Press Ctrl +F and search for this line.

<div class="’post-header-line-1′/">

Step 3 – When you find this line, Paste this new line under the previous line.

 <div style=’float:right; margin-left:10px;’> <a expr:share_url=’data:post.url’ name=’fb_share’ rel=’nofollow’ type=’button_count’/> <script type=”text/javascript” src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share”/></div>

Yes, That’s it. This feature not only give your visitor the opportunity to share your post directly on Facebook but also make your blog more beautiful and user friendly. By adding the Facebook share button you can also get more traffic from Facebook when someone share your post with their friends. Don’t forget to add the Facebook share button on your Blogspot blog.

Don’t worry about your blog beauty, just see my Blogger Tutorial collection. It’s free. To get my post updates daily, Please subscribe our email news later. Thanks for coming.

Add Facebook Comments Box Blogger (Blogspot) Blog Just in 1 Minute

This is a Step by step tutorial to add Facebook comments box on blogger blog easily in 1 minute. Make you Blogspot blog more friendly and beautiful by setting up this widget. Also give your blog visitor the opportunity to post a comment directly without logging in , registration or fill up anything .

There are many blogging CMS (Content Management System) on the World Wide Web. But Blogspot is the most popular of them. And the other side Facebook is the world largest social community website. Facebook comments box give your visitors the opportunity to post a comment on your Blogspot blog without logging in or filling up anything. Facebook give us a great opportunity to get a more traffic using this feature .

When someone post a comment on your blogger blog post using Facebook comments box, this content has been automatically share on his wall. Now it really a great way to get more traffic on your Blogspot blog from Facebook .So why you still not add this feature Facebook comments box on your Blogspot blog? If you setup a Facebook comments box on your Blogspot blog under every post, anyone can post a comment easily and also share it easily with his Facebook friend. So let’s add it.

Add Facebook Comments box Blogger Blog:-

This is my 3rd post about blogger tutorial. In my previous tutorial, I was explained how to add Facebook share button on every blogger blog post. Today I am going to explain how to add a Facebook comments box for blogger blog. So let’s do it.

Step 1:- At first go to Blogger Dashboard > Template > Edit HTML. Then ark the “Expand Widget Templates” option following the screenshot blew.
 

Now find this code from your blogger template. To find easily, simply press Ctrl + F.

<data:post.body/>

After finding the code, Paste this new code after the previous code.

<h3> Post Comment</h3> <div id="’fb-root’/"> <script src="’http://connect.facebook.net/en_US/all.js#xfbml=1′/"><fb:comments expr:href=’data:post.url’ num_posts=’5′ width=’500′/>

If you facing any problem, follow the screenshot blew.



Your job is almost done. Now click “Save Template” and save this editing on your blogger template. Now visit your blog again and check it. This feature, Facebook comments box not only make the commenting system easy but also make your blog beautiful. So add this gadget on your blog and make your blog better looking and more friendly.

Thanks for reading this tutorial. Do not forget to add this gadget on your Blogspot blog to make your blog more beautiful. Do you have any problem? Please feel free to comment. I will try to resolve this.

This blog is free and always will be. If you want to get updates about blogger tutorial, Blogger tricks, Blogger background; Please subscribe our Email news later. Thanks for coming.

Stylish Mashable Social Media and Subscription Box For Blogger Blog

Want to add Mashable Social Media into box Blogger blog easily? In this tutorial I’m going to say how to add mashable social share box into blogger blog. You can make your blogger blog more beautiful and also give your reader the opportunity to share your updates.

Social media is the best way ever to share you posts. Social share button and Subscription box that allow your visitors to not only subscribe your blog post but also share those on social media. So I think the mashable social media widget is a part and parcel for every blog. As a blogger you may know about mashable social media box. But unfortunately they made it only for WordPress blog. But today I am going to say give you a good news that we rebuild it mashable social media box for blogger blog. So, let’s roll

Take a look on the picture below. It shows Stylish Mashable Social Share and Subscription box’s look.

How to Add Mashable Social Media Box to Blogger /Blogspot?

1. At first go here – HTML code of Mashable Social Media and copy the full code.
2. Go to Blogger Dashboard > Layout. Then select Add a ‘Gadget‘
3. Select “HTML/JavaScript” and paste the copying code.
4. Now save the wizard and view your blog.

Customize :-

1. Replace “Your Page Link Here” with your own username.

2. Replace “Your Google Page Link Here” with your Google + profile link.

That’s it. Now visit your blog. The stylish mashable social media wizard will be displaying on your blogger blog. That’s not only make your blog more user friendly but also make your blog more beautiful for your readers. Now your readers can easily subscribe and share your updates on social media direct and easily. Stop using any third party application and never forget to add this feature on your blogger/ Blogspot blog.

Thanks for visiting my new blog. Please drop your comment if you feel happy and please share this post with your friends. Thanks for coming on my blog.
 
<style type="text/css"> /*<!CDATA[*/ #w2b-mashable{width:300px;margin:auto;padding:0;} .w2b-googleplus {height: 57px;} .w2b-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;} .w2b-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;} .w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;} .w2b-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;} .w2b-twitter a.twitter-follow-button {display: block;} .w2b-twitter iframe {margin: 9px 11px;} .w2b-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;} .w2b-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;} .w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;} .w2b-emailbox input.emailu:focus {color: #333;} .w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;} .w2b-emailbox input.submitu:hover {text-decoration: none;} .w2bDefault {border: 1px solid #cc7c00;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);} .w2bDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;} .w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;} /*]]>*/ </style> <div id="w2b-mashable"> <div class="w2b-googleplus"> <script type="text/javascript"> /*<![CDATA[*/ window.___gcfg = {lang: 'en'}; (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 class="g-plus" data-href="Your Google Page Link Here" data-width="300" data-height="69" data-theme="light"> </div> </div> <div class="w2b-facebook"> <center> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FYour Page Link Here&send=false&layout=standard&width=300&show_faces=false&font=segoe+ui&colorscheme=light&action=like&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:35px;" allowTransparency="true"></iframe></center> </div> <div class="w2b-gplusone"> <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 class="g-plusone" data-size="medium" data-href="Your Google Page Link Here"> </div> <span>Recommend on Google</span> </div> <div class="w2b-twitter"> <a href="Your Twitter Page Link Here" class="twitter-follow-button" data-show-count="true">Follow @mybloggertuto</a> <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script> </div> <div class="w2b-emailbox"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed Burner Name Here', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow"> <table width="100%"> <tr> <td> <input class="emailu" name="email" placeholder="Enter your email" type="text"/> </td> <td width="64px"> <input class="submitu w2bDefault" type="submit" value="Subscribe"/> </td> </tr> </table> <input name="uri" type="hidden" value="Your Feed Burner Name Here"/> <input name="loc" type="hidden" value="en_US"/> </form> </div> <div class="w2b-moresubs"> <!—Please do not remove this line. We request you to respect our work --> <a href=" http://www.24-work.blogspot.com">Get this Gadget</a> </div> </div>