SHM-HACK: WIDGETS

How To Add AddThis Welcome Bar In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIE5SzG3BnPyWjwE_XR_cVoyqvJ5BbxQ4wtX8Y0J3iv_uYcXQU9xjmWBynYZAQSH5C0_9kTTKHGjrdHgPGm9FrX8gTVhg1Fjwn4JPnhJXW2oWZVivGgouljKOBMhZ5b5bSte0KLaqKUMs/s1600/Welcomebar.png" imageanchor="1" style="color: #5a9e25; margin-left: 1em; margin-right: 1em; margin-top: 15px; padding: 3px 7px; text-decoration: none;"><img alt="AddThis Welcome Bar" border="0" padding="10px 10px 10px 0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIE5SzG3BnPyWjwE_XR_cVoyqvJ5BbxQ4wtX8Y0J3iv_uYcXQU9xjmWBynYZAQSH5C0_9kTTKHGjrdHgPGm9FrX8gTVhg1Fjwn4JPnhJXW2oWZVivGgouljKOBMhZ5b5bSte0KLaqKUMs/s320/Welcomebar.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="AddThis Welcome Bar" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
</div>
<div style="background-color: white; color: #666666; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.5; text-align: justify;">
Did you believe that blogging is building up traffic? Well... not exactly. Blogging is more like exchanging with an audience. A blogger does everything to keep his audience interested and involved. In return he gets traffic, comments and subscribers on his site and followers on FaceBook and other social networks. One of the best ways to attract the attention of your readers is to implement in your site, a welcome bar displaying a short welcome message. Nowadays it is really easy to do with AddThis (<a href="http://www.addthis.com/" style="color: #5a9e25; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;">www.addthis.com</a>). In this article we will show you how to implement AddThis Welcome Bar in your blogger blog. AddThis Welcome Bar can displayed on all modern browsers including IE 9 and above. AddThis Welcome Bar can be downloaded for free. <h3 style="color: #3d5054; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-align: left !important; text-transform: capitalize;">
How To Add AddThis Welcome Bar In Blogger? </h3>
 Step 1: Go to https://www.addthis.com/get/welcome and register. Registering with AddThis is mandatory however if you have a FaceBook, Twitter or Google+ account, you can sign in directly. After logging, a customization panel is displayed. <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnNTNdcZxYbq1oahQ8-18Jw60xKZrkczZsYlbzxgDpGY3HihVJhfu__zz0j_MRH4NGb3hNj1jeU93F1Czu0iTJsXVwh5bM_TIg4paPZq6S9-qgaBgKu7abOnqkVw_p3wqw5Qda1wUZkvQ/s1600/dashboard.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnNTNdcZxYbq1oahQ8-18Jw60xKZrkczZsYlbzxgDpGY3HihVJhfu__zz0j_MRH4NGb3hNj1jeU93F1Czu0iTJsXVwh5bM_TIg4paPZq6S9-qgaBgKu7abOnqkVw_p3wqw5Qda1wUZkvQ/s400/dashboard.png" style="border-width: 0px; margin: 10px; max-width: 90%; padding: 20px 0px;" /></a></div>
Step 2: To customize the bar, you must select a theme (color), enter the message you want to display, enter the link associated with the button that is displayed on the bar, etc. Step 3: Now you have to copy the code proposed by AddThis into your blog. To do that go to blogger.com, open the template, click on HTML and paste the code in the head section then save. It's done! Good blogging.</div>
</div>

BLOGGER CUSTOMIZATION WIDGETS How To Add AddThis Welcome Bar In Blogger

Did you believe that blogging is building up traffic? Well... not exactly. Blogging is more like exchanging with an audience. A blogge...

Add Stylish Vertical Floating Sharing Buttons to Blogger

Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title" itemprop="name" style="background-color: white; color: #d52a33; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 22px; font-stretch: normal; font-weight: normal; margin: 0px; position: relative;">
 </h3>
<div class="post-header" style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 1.6; margin: 0px 0px 1em;">
<div class="post-header-line-1">
</div>
</div>
<div class="post-body entry-content" id="post-body-7819494636599846436" itemprop="articleBody" style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.2px; position: relative; width: 726px;">
<div dir="ltr" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglZoPjrwpxBkDzM1sMz675P2q23CEwwZ7RiUyzrSPABq8lhNtEIAj0ax8tkJnsPBHOMEj3v3lEK2n1OvVktf3M8pSHcugPKcDrkFFk0bvoNkmQLrzR5aFImUKCxmM-z60ebQahiVUshpU/s1600/New+Stylish+Vertical+Floating+Share+Button.png" imageanchor="1" style="clear: left; color: #7d171d; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglZoPjrwpxBkDzM1sMz675P2q23CEwwZ7RiUyzrSPABq8lhNtEIAj0ax8tkJnsPBHOMEj3v3lEK2n1OvVktf3M8pSHcugPKcDrkFFk0bvoNkmQLrzR5aFImUKCxmM-z60ebQahiVUshpU/s1600/New+Stylish+Vertical+Floating+Share+Button.png" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 5px; border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px; padding: 8px; position: relative;" /></a></div>
Sharing is the best method to increase blog traffic so after publishing our blog posts we share them to social media and in return we get a lot of traffic. When our visitors landed on our blog's page and like our post then they thought to say thanks to the<a href="http://www.mybloggerbuzz.com/2012/11/5-things-blogger-should-always-remember.html" rel="" style="color: #7d171d; text-decoration: none;" target="_blank">author</a> so they do comment on the post but there is one another way by which visitors can say thanks to us i.e. sharing. By this method visitors can share the post to their favourite social media and we get a lot of visitors and pageviews. So, here we are discussing about a great floating sharing widget for blogger which floats vertically with the page. This widget contains all major social media on which your visitors can easily share or like your posts in a click. This widget contains <a href="http://www.mybloggerbuzz.com/2013/12/facebook-showing-wrong-thumbnail-image.html" style="color: #7d171d; text-decoration: none;" target="_blank">Facebook</a> like and share, google +1, Pinterest Pin buttons. So if you like this widget and wants to add it to your blog just follow the easy steps below. <a href="https://draft.blogger.com/null" name="more"></a><h2 style="border-bottom-color: rgba(0, 0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 14px; font-stretch: normal; line-height: normal; margin: 0px; padding: 0.6em 0px 0.5em; position: relative;">
How to add the new floating share buttons to blogger</h2>
<div style="border-top-color: rgb(170, 177, 34); border-top-style: solid; border-top-width: 1px; line-height: 24px; padding-top: 8px; text-align: justify;">
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="border: none; margin: 0px 0px 0.25em; padding: 0.25em 0px;"> Log in to your Blogger account and go to Template > Edit HTML</li>
<li style="border: none; margin: 0px 0px 0.25em; padding: 0.25em 0px;"> Search for <html , leave a space and add xmlns:fb=”http://ogp.me/ns/fb#” just after it. The resulting code should lok like this:</li>
</ul>
</div>
<div style="line-height: 24px; text-align: justify;">
<blockquote>
<html xmlns:fb=”http://ogp.me/ns/fb#”</blockquote>
</div>
<div style="line-height: 24px; text-align: justify;">
If this is already there, you don’t need to do it again. </div>
<div style="text-align: justify;">
 <ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="border: none; line-height: 24px; margin: 0px 0px 0.25em; padding: 0.25em 0px;"> Search for <code style="line-height: normal;"><data:post.body/></code>. If you have more than one of it in your template, search for <code style="line-height: normal;"><div class='post-footer-line post-footer-line-1'/></code></li>
<li style="border: none; margin: 0px 0px 0.25em; padding: 0.25em 0px;"> And just below that paste the following code:</li>
</ul>
</div>
<div style="line-height: 24px; text-align: justify;">
 <blockquote>
<blockquote class="tr_bq" style="direction: ltr; line-height: normal; margin-bottom: 0in; text-align: left; unicode-bidi: embed;">
<b:if cond=’data:blog.pageType == &quot;item&quot;’><!–Start Floating Share Buttons with Pinterest–><style type=’text/css’>#dc-float {position:fixed; bottom:15%; right:10px; float:left;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border:1px solid #BBBBBB;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 5px 5px 5px;-moz-box-shadow: #B3B3B3 5px 5px 5px;box-shadow: #B3B3B3 5px 5px 5px;padding:0 0 2px 0;z-index:10;}#dc-float .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}.fb_share_count_top {width:48px !important;}.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}</style><div id=’dc-float’ title=’Share with your friends’><div class=’sbutton’ id=’rt’><a class=’twitter-share-button’ data-count=’vertical’ href=’http://twitter.com/share’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’/></div><div class=’sbutton’ id=’su’><script src=’http://www.stumbleupon.com/hostedbadge.php?s=5′/></div><div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’>&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;&lt;script&gt;(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=167544263382192&quot;;  fjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;<div class=’fb-like’ data-layout=’box_count’ data-send=’false’ data-show-faces=’false’ data-width=’48′/></div><div class=’sbutton’ id=’gplusone’><script src=’https://apis.google.com/js/plusone.js’ type=’text/javascript’/><g:plusone size=’tall’/></div><div class=’sbutton’ id=’gb’><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></div><div class=’fb_button_share’>&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;&lt;script&gt;(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=112973755438933&quot;; // appId must be validfjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;&lt;fb:share-button type=&quot;box_count&quot;&gt;&lt;/fb:share-button&gt;</div> <!–End Floating Share Buttons with Pinterest–></b:if></blockquote>
<div dir="RTL">
</div>
</blockquote>
</div>
<div style="line-height: 24px; text-align: justify;">
</div>
<div style="line-height: 24px; text-align: justify;">
 <ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="border: none; margin: 0px 0px 0.25em; padding: 0.25em 0px;">Hit the Save Template button and view your blog.</li>
</ul>
</div>
<div style="line-height: 24px; text-align: justify;">
To make the share butons float to the left instead of right, search for this code:</div>
<div style="line-height: 24px; text-align: justify;">
<blockquote class="tr_bq">
dc-float {position:fixed; bottom:15%; right:10px; float:left;</blockquote>
</div>
<div style="line-height: 24px; text-align: justify;">
Replace with this:</div>
<div style="line-height: 24px; text-align: justify;">
<blockquote class="tr_bq">
dc-float {position:fixed; bottom:15%; left:10px; float:left;</blockquote>
</div>
<div style="line-height: 24px; text-align: justify;">
So this is the easy steps to add this professional floating share buttons to your blogger blog. If you have any query or to give your feedback use the comment box. Keep sharing this post with your friends till then Peace, Blessings and Happy Sharing.</div>
</div>
</div>
</div>

BLOGGER CUSTOMIZATION WIDGETS Add Stylish Vertical Floating Sharing Buttons to Blogger

Sharing is the best method to increase blog traffic so after publishing our blog posts we share them to social media and in retur...

Simple Related Posts Widget For Blogger With Thumbnails

Unknown 3

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Here we provide Simple Related Posts Widget for Blogger with Thumbnails for your blog post. Related posts widget shows other posts in same category or label. With the help of related post widget you can increase your blog page views and attract your readers to give related posts for spend more time. It’s help to increase visitor time periods of your website. If you need this related post widget you need to create some changes in your Template.</div>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
 </div>
<div class="separator" style="background-color: white; border: 0px; clear: both; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; word-wrap: break-word;">
<a href="http://www.haakblog.com/2013/06/simple-related-posts-widget-for-blogger-with-thumbnails.html" style="border: 0px; color: #a0a0a0; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; text-decoration: none; vertical-align: baseline; word-wrap: break-word;"><img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBRS7_QWyaVmX8LJvXIaY1HFnR3EW1euxzNgo4taSaoFZBk0i7_up5B6DOAK-4ES433cWqDUSW6uS8hmRDZwXvbfsz4xT4IxKqjwzsaR4uT6x-fG9Wx4lEaEdLdcBQw0nfeZO1VF3Fx3bJ/s1600/Blogger_landing_page1.jpg" style="border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; max-width: 100%; padding: 4px; position: relative; vertical-align: baseline; word-wrap: break-word;" title="Related Posts Widget" /></a></div>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
 </div>
<h2 style="background-color: white; border: 0px; color: #595959; font-family: Oswald, 'Bebas Neue', Bebas, 'Arial Narrow', sans-serif; font-size: 21.6px; font-stretch: normal; font-weight: normal; margin: 10px 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
How to Add Related Posts Widget</h2>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
You can easily add related posts widget with follow below steps:</div>
<h3 style="background-color: white; border: 0px; color: #595959; font-family: Oswald, 'Bebas Neue', Bebas, 'Arial Narrow', sans-serif; font-size: 19.2px; font-stretch: normal; font-weight: normal; margin: 10px 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Step 1</h3>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Go to your blogger Dashboard > Template > Edit HTML as shown in below picture.</div>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
 </div>
<div class="separator" style="background-color: white; border: 0px; clear: both; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; word-wrap: break-word;">
<a href="http://www.haakblog.com/2013/06/simple-related-posts-widget-for-blogger-with-thumbnails.html" style="border: 0px; color: #a0a0a0; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; text-decoration: none; vertical-align: baseline; word-wrap: break-word;"><img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDGpYUT3-dFDtHbDnp2v4x0TjiWT9Zr0IaVJhX0eCrz493ruybkNNPlIqlidaFLBrdfHWSLm5iQDu9lRrduaHfPJhUsvuKYrTNJneccHgNOFMb0OzmeiTQWjkuaX77ocaHLfoB6TrgMdUc/s1600/edit+html.PNG" style="border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; max-width: 100%; padding: 4px; position: relative; vertical-align: baseline; word-wrap: break-word;" title="Related Posts Widget" /></a><span style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; text-align: left; vertical-align: baseline; word-wrap: break-word;"> </div>
<h3 style="background-color: white; border: 0px; color: #595959; font-family: Oswald, 'Bebas Neue', Bebas, 'Arial Narrow', sans-serif; font-size: 19.2px; font-stretch: normal; font-weight: normal; margin: 10px 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Step 2</h3>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Click on the "Expand widgets template" as shown in below picture.</div>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
 </div>
<div class="separator" style="background-color: white; border: 0px; clear: both; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; word-wrap: break-word;">
<a href="http://www.haakblog.com/2013/06/simple-related-posts-widget-for-blogger-with-thumbnails.html" style="border: 0px; color: #a0a0a0; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; text-decoration: none; vertical-align: baseline; word-wrap: break-word;"><img alt="Related Posts Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFkpTyk0mtT9Sypy3NBZs3kc_T3V9Jlu_LlCok6887Z-2qHCUc-DcRyAfsIjbCiO1kQ7SrVzzs_eid9ozbJQSf7IKObhtH-pe5J2p_io0kSe_UkjandtdrtzKVIJnukbJJnUfkLEws0LT/s1600/ExpandWidgetTemplates.jpg" style="border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; max-width: 100%; padding: 4px; position: relative; vertical-align: baseline; word-wrap: break-word;" title="Related Posts Widget" /></a></div>
<h3 style="background-color: white; border: 0px; color: #595959; font-family: Oswald, 'Bebas Neue', Bebas, 'Arial Narrow', sans-serif; font-size: 19.2px; font-stretch: normal; font-weight: normal; margin: 10px 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Step 3</h3>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Search below code with the help of CTRL + F</div>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
 </div>
<blockquote class="tr_bq" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
</head></blockquote>
<h3 style="background-color: white; border: 0px; color: #595959; font-family: Oswald, 'Bebas Neue', Bebas, 'Arial Narrow', sans-serif; font-size: 19.2px; font-stretch: normal; font-weight: normal; margin: 10px 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Step 4</h3>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Copy below code and Paste it just before </head></div>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
 </div>
<blockquote class="tr_bq" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
<span style="border: 0px; color: lime; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;"><b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}#related-posts h2{font-size: 18px;letter-spacing: 2px;font-weight: bold;text-transform: none;color: #5D5D5D;font-family: Arial Narrow;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{border-right: 1px dotted #DDDDDD;color:#5D5D5D;}#related-posts a:hover{color:black;background-color:#EDEDEF;}</style><script type='text/javascript'>var defaultnoimage=&quot;<span style="border: 0px; color: red; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUSoxkITSBY_FDUK-czofXxIauGoy8-qPPewBrzILXnRbDxGmM0IJ0Nd_EJT5GSjtRvVUWDqHJiWK0xkncKugFj4AhCYEpgO6KSH4ILZ4_UITbuCXOEGoUhS23CkfhDw_4HmLubORR92R8/s1600/no_image.jpg&quot;;var maxresults=<span style="border: 0px; color: blue; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">5;var splittercolor=&quot;#DDDDDD&quot;;var relatedpoststitle=&quot;Related Posts&quot;;</script><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/><span style="border: 0px; color: lime; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;"></b:if></blockquote>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
 </div>
You can changed your default picture, Just changed red URL with your new default Picture URL. You can also changed number of post, just changed <span style="background-color: white; border: 0px; color: blue; font-family: "verdana" , "geneva" , sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">5 to your values that you want to show. If you also want to show related post on homepage then just removed Green colored codes. 
<h3 style="background-color: white; border: 0px; color: #595959; font-family: Oswald, 'Bebas Neue', Bebas, 'Arial Narrow', sans-serif; font-size: 19.2px; font-stretch: normal; font-weight: normal; margin: 10px 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Step 5</h3>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Now Search following code:</div>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
 </div>
<blockquote class="tr_bq" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
<div class='post-footer'></blockquote>
<h3 style="background-color: white; border: 0px; color: #595959; font-family: Oswald, 'Bebas Neue', Bebas, 'Arial Narrow', sans-serif; font-size: 19.2px; font-stretch: normal; font-weight: normal; margin: 10px 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Step 6</h3>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Copy and paste below code just above it:</div>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
 </div>
<blockquote class="tr_bq" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop><script type='text/javascript'>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script></div><div style='clear:both'/></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://www.haakblog.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPsGr_TE0PjUI-MeggEOrsJ1yGTqZYgIRwPWGV7yH3WjkWQXTsRArWemHHncOOwwHylukjpDhSSfmuHsPGjNYf3hcVsa3WpBq1eWCwi-_BcWny5s9lKmlU2YiEuHm_EUEaRwfkfjb_B1mo/s1600/best+blogger+tips.png'/></a></b:if></b:if><div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;"><a href="http://www.haakblog.com/2013/06/simple-related-posts-widget-for-blogger-with-thumbnails.html" target="_blank" title="Related Posts Widget">Related Posts Widget</a><a href="http://www.haakblog.com/" target="_blank" title="Blogger Widget">Blogger Widget</a></div></blockquote>
</blockquote>
 
<h3 style="background-color: white; border: 0px; color: #595959; font-family: Oswald, 'Bebas Neue', Bebas, 'Arial Narrow', sans-serif; font-size: 19.2px; font-stretch: normal; font-weight: normal; margin: 10px 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Step 7</h3>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
Save Template</div>
 
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
You're done perfectly. Now refreshed your blog post to see related post with thumbnail in your blog post, it's look like as shown in below picture.</div>
<div class="MsoNormal" style="background-color: white; border: 0px; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; word-wrap: break-word;">
 </div>
<div class="separator" style="background-color: white; border: 0px; clear: both; color: #595959; font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-stretch: inherit; line-height: 18px; margin: 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline; word-wrap: break-word;">
<a href="http://www.haakblog.com/2013/06/simple-related-posts-widget-for-blogger-with-thumbnails.html" style="border: 0px; color: #a0a0a0; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; text-decoration: none; vertical-align: baseline; word-wrap: break-word;"><img alt="Related Posts Widget " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT24lkdmUX82xUN6GOlkrMGiD4rhTy2pBtenXwnu9VKY6uvzJuhYzvn5mlbdUdbVG0p0LTOnEMUZzC1kLDrwyC35iOXk6-UJlZpy94QMdleCtVlKwJ8ru4g0hOjtDY5-kn8SRjf4KoaTxb/s1600/related+post.png" style="border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; max-width: 100%; padding: 4px; position: relative; vertical-align: baseline; word-wrap: break-word;" title="Related Posts Widget " /></a></div>
</div>

WIDGETS Simple Related Posts Widget For Blogger With Thumbnails

Here we provide Simple Related Posts Widget for Blogger with Thumbnails for your blog post. Related posts widget shows other posts in same...

Pure CSS3 Image Slider Widget for Blogspot (Cycle Style)

Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator tr_bq" style="background-color: white; clear: both; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 16px; line-height: 25.6px; text-align: center;">
<a href="http://project.dimpost.com/image-slider/pure-css3-cycle-slider" imageanchor="1" style="color: #0060a6; text-decoration: none;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4fq4vwQ89BhZmXZM2073MzOUKb9P3sPUeYLigrHNRRF_Jer3VlfQBcVlWXyXS33w0q9mIROznWB1HAxaeFDgsoDZ0YKxP0BGj_WMD_I8DBvjZkExuN2nod0rl9k8I9zUEA1OE2zwtAGEh/s628/css3-image--slider.jpg" style="border-width: 0px; max-width: 628px;" /></a></div>
 
Here I came up with a stylish and hot image slider for blogger that is just using pure CSS3. No Javascript or jQuery is used. So this slider is more easy to customize for newbies, just need a basic HTML and little good CSS3 knowledge. No server side coding is used here, so all is on your hand. This cycle style slider is created by <a href="http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/" rel="nofollow" style="background-color: white; color: #0060a6; font-family: 'Segoe UI', Arial; font-size: 16px; line-height: 25.6px; text-decoration: none;" target="_blank">smashingmagazine</a>. Take a look on their page for more about it. 
<div style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 16px; line-height: 25.6px;">
I created a bogarized version from theirs, it is now just need to follow few easy steps to installing this slider on blogspot blog. 
<a href="https://draft.blogger.com/null" name="more"></a></div>
<h3 style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 20px; font-weight: 500; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
<ul>
<li><a href="http://project.dimpost.com/image-slider/pure-css3-cycle-slider" style="color: #0060a6; display: block; text-decoration: none;" target="_blank">DEMO</a></li>
</ul>
</h3>
<ul style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 16px; line-height: 25.6px;"></ul>
<div style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 16px; line-height: 25.6px;">
</div>
<h3 style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 20px; font-weight: 500; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
</h3>
<h3 style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 20px; font-weight: 500; line-height: 1.2em; margin-bottom: 10px; margin-top: 0px;">
Lets follow the simple 4 steps to add this "CSS3 image slider to Blogger blog"</h3>
<div style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 16px; line-height: 25.6px;">
1. Go to Blogger Dashboard > Layout >   
2. Add a HTML/Javascript Gadget 
3. Copy the code below and paste on it.</div>
<div style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 16px; line-height: 25.6px;">
 </div>
<blockquote style="background-color: white; color: #4f4f4f; font-family: 'Segoe UI', Arial; font-size: 16px; line-height: 25.6px;">
<style type="text/css" media="screen">.container { margin: 0 auto; overflow: hidden; width: 700px;}
#content-slider { height: 335px; width: 100%;}
#slider { background: none repeat scroll 0 0 #000000; border: 5px solid #FFFFFF; -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); height: 320px; margin: 10px auto; overflow: visible; position: relative; width: 680px;}
#mask { height: 320px; overflow: hidden;}
#slider ul { margin: 0; padding: 0; position: relative;}
#slider li { width: 680px; height: 320px; position: absolute; top: -325px; list-style: none;}
#slider li.firstanimation { -moz-animation: cycle 25s linear infinite; -webkit-animation: cycle 25s linear infinite;}
#slider li.secondanimation { -moz-animation: cycletwo 25s linear infinite; -webkit-animation: cycletwo 25s linear infinite;}
#slider li.thirdanimation { -moz-animation: cyclethree 25s linear infinite; -webkit-animation: cyclethree 25s linear infinite;}
#slider li.fourthanimation { -moz-animation: cyclefour 25s linear infinite; -webkit-animation: cyclefour 25s linear infinite;}
#slider li.fifthanimation { -moz-animation: cyclefive 25s linear infinite; -webkit-animation: cyclefive 25s linear infinite;}
#slider .tooltip { background: rgba(0, 0, 0, 0.7); width: 300px; height: 60px; position: relative; bottom: 75px; left: -320px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
#slider .tooltip h1 { color: #fff; font-size: 24px; font-weight: 300; line-height: 60px; padding: 0 0 0 20px;}
#slider li#first:hover .tooltip,#slider li#second:hover .tooltip,#slider li#third:hover .tooltip,#slider li#fourth:hover .tooltip,#slider li#fifth:hover .tooltip { left: 0px;}
/* PROGRESS BAR */
.progress-bar { position: relative; top: -5px; width: 680px; height: 5px; background: #000; -moz-animation: fullexpand 25s ease-out infinite; -webkit-animation: fullexpand 25s ease-out infinite;}
/* ANIMATION */
@-moz-keyframes cycle { 0% { top: 0px; } 4% { top: 0px; } 16% { top: 0px; opacity: 1; z-index: 0; } 20% { top: 325px; opacity: 0; z-index: 0; } 21% { top: -325px; opacity: 0; z-index: -1; } 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } 100% { top: 0px; opacity: 1; }}
@-moz-keyframes cycletwo { 0% { top: -325px; opacity: 0; } 16% { top: -325px; opacity: 0; } 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } 36% { top: 0px; opacity: 1; z-index: 0; } 40% { top: 325px; opacity: 0; z-index: 0; } 41% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; }}
@-moz-keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; }}
@-moz-keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; }}
@-moz-keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100% { top: 325px; opacity: 0; z-index: 0; }}
@-webkit-keyframes cycle { 0% { top: 0px; } 4% { top: 0px; } 16% { top: 0px; opacity: 1; z-index: 0; } 20% { top: 325px; opacity: 0; z-index: 0; } 21% { top: -325px; opacity: 0; z-index: -1; } 50% { top: -325px; opacity: 0; z-index: -1; } 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } 100% { top: 0px; opacity: 1; }}
@-webkit-keyframes cycletwo { 0% { top: -325px; opacity: 0; } 16% { top: -325px; opacity: 0; } 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } 36% { top: 0px; opacity: 1; z-index: 0; } 40% { top: 325px; opacity: 0; z-index: 0; } 41% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; }}
@-webkit-keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; z-index: 0; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; }}
@-webkit-keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; }}
@-webkit-keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100% { top: 325px; opacity: 0; z-index: 0; }}
/* ANIMATION BAR */
@-moz-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }}
@-webkit-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }}</style><div class="container"> <div id="content-slider"> <div id="slider"> <div id="mask"> <ul> <li id="first" class="firstanimation"> <a href="http://dimpost.com"> <img src="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Cougar" /> </a> <div class="tooltip"> <h1>Cougar</h1> </div> </li> <li id="second" class="secondanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Lions" /> </a> <div class="tooltip"> <h1>Lions</h1> </div> </li> <li id="third" class="thirdanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker" /> </a> <div class="tooltip"> <h1>Snowalker</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling" /> </a> <div class="tooltip"> <h1>Howling</h1> </div> </li> <li id="fifth" class="fifthanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing" /> </a> <div class="tooltip"> <h1>Sunbathing</h1> </div> </li> </ul> </div> <div class="progress-bar"></div> </div> </div></div></blockquote>
 
 4. Change link and images with yours.</div>

WIDGETS Pure CSS3 Image Slider Widget for Blogspot (Cycle Style)

Here I came up with a stylish and hot image slider for blogger that is just using pure CSS3. No Javascript or jQuery is used. So thi...

SHM-HACK

How To Add AddThis Welcome Bar In Blogger

Add Stylish Vertical Floating Sharing Buttons to Blogger

Simple Related Posts Widget For Blogger With Thumbnails

Pure CSS3 Image Slider Widget for Blogspot (Cycle Style)

Trending Topics

Translate