jQuery Hacks : Hiding Links inside Comments

span stopFor the past few months I have been dealing with a lot of spam in the comment section. The Blogger’s inbuilt filter has stopped more than 6000 spam comments but still some slipped by . Due to this very reason I had to close the Anonymous option for commenting. But this didn’t solve the problem and people with Blogger profile started to spam as well . So I have come up with a simple jQuery powered hack that hides any clickable link and just displays its text.

Demo
Try adding links in the comment below

Code

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script>  

$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});

</script>

Add it just before the </body> tag in the Edit HTML . In case you have already included the jQuery library , then add the code starting from Line 2 onwards.

If you want to completely remove the links from the comments , then use this code instead

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script>  

$('.comment-content a[rel$=nofollow]').hide());

</script>

This works for the Threaded Comments in Blogger , incase you want to make it work for the old Comments in Blogger , then the code is as follows

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script>  

$('.comment-body p a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});

</script>

Hope this helps you in curbing the spam in your comment section and feel free to share this simple trick with your friends
//

Blog Archive links Collapsed by Default Hack

blog archive widget hack

If you are using the Hierarchy style for your Blog Archive widget then you must have faced the problem of auto expansion of drop-down list of a particular month which is currently in the calendar or to which the opened post belongs. This simple hack solves that problem by making all the nodes in the hierarchy to be collapsed by default(As seen in the above picture ). This can be simply added by the One Click Installer or manually.

Demo

Prerequisites for this to Work
Before you apply this remember that you have to have a Blog Archive Widget present and the Style has to be set to Hierarchy (as shown in picture below )

blog archive widget config blogger

Applying this to your Blog

To add using One Click Installer Method

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script>
if ( $(‘.archivedate’).hasClass(‘expanded’) )
{
$(‘.archivedate’).removeClass(‘expanded’);
$(‘.archivedate’).addClass(‘collapsed’);
}
</script>
Blogger Templates

Or just add the following Code in your Blog (preferably before the </body> tag in the Edit HTML of the Template tab )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>  
if ( $('.archivedate').hasClass('expanded') ) 
{ 
 $('.archivedate').removeClass('expanded'); 
$('.archivedate').addClass('collapsed'); 
}
</script>

What this code does
It firstly checks if a element having class name “archivedate” also has a class “expanded” present in it. If this turns out to be true then it removes the “expanded” class and adds a class named “collapsed” .

If you face any problem implementing it in your blog then feel free to ask via comments.a_demo_four {
width:auto !important;
cursor:pointer !important;
padding-right:20px !important ;
text-align:center !important ;
font-weight:bold !important ;
border: 1px !important ;
background-color: #3bb3e0 !important;
font-family: ‘Open Sans’, sans-serif !important;
font-size: 12px !important;
text-decoration: none !important;
color: #fff !important;
position: relative !important;
padding: 10px 20px !important;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229))) !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-o-border-radius: 5px !important;
border-radius: 5px !important;
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
}

Dynamic Views type Comment Style

Dynamic Views are one the latest and greatest offering from the people at Blogger. I really liked its Comment style , the one-click and display and hide feature. After doing a bit of research I was able to implement it in normal/default Blogger templates.

Comment style

See Demo

To implement this in your Blogger Blog:

1. Go to Blogger Dashboard.

2. For New Interface ,go to Templates > Edit HTML
For Old Interface ,go to Design > Edit HTML

3. Now tick the Expand Widget Preview option & search for the term </head> tag and insert the following code Before it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
     $(document).ready(function() {
          // hides the comments elements as soon as the DOM is ready
          $(&#39;#comments,.avatar-stock img&#39;).hide();
          
          // view the comments on clicking the noted link  
          $(&#39;.readCom&#39;).click(function() {

           if ( $(&#39;#comments&#39;).is(&#39;:hidden&#39;) )
           {
               $(&#39;#comments&#39;).show(&#39;slow&#39;);
            }
          else
           {
             $(&#39;#comments&#39;).hide(&#39;slow&#39;);
               }
                 return false;
          });

  });
  </script>

and now search for the term class=’comments’ and insert the following code before/above it.

<span class='readCom'><a href='#'><data:post.numComments/> Comments</a></span>

Note: Exclude the 1st line if you already have jQuery present in your template.

What this does: It Inserts a link which displays the number of comments just after the end of the post which can be clicked to display and hide comments similar to the Dynamic Views templates. When the page loads the Comment section is hidden (See Line 5).

This will hide the whole comment section, If you only want to hide the comments and not the comment Box (where you enter the comments ) then replace #comments with #comments-block in the above code.

One thing ,to implement this you will have to have comments embedded under posts, change the settings at Settings > Comments > Comment Form Placement.

Thanks to BloggerMint’s Experimental templates for inspiring me

Slick Social Share Buttons for Blogger

Share Image Slick Social Share Buttons is a WordPress Plugin which adds floating social media Buttons to your blog. I have dismantled and then re-mantled  it so that it can be easily integrated with Blogger. Like many other side sharing Widgets ,you can add many different types of Share Buttons to it but its main feature is aesthetically pleasing On-click Sliding feature which shows these buttons only when the user wants and hides them when not required. It comes with a lot of customization possibilities which we will discuss through the post. I will be discussing the floating panel version here which is the more commonly used one.

See Demo

Adding the Side Floating Buttons

1. Login to your Blogger account.
2. Go to Design > Page Elements. (For New Blogger Interface Go to Layouts)
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Copy the code below and paste it inside the content box. (See how to Copy Easily)

<style>
#nav-dcssb, #nav-dcssb li {
margin: 0; 
padding: 0; 
list-style: none;
}
#nav-dcssb {
}
#nav-dcssb li {
padding: 5px;
}
#nav-dcssb li.size-box {
text-align: center;
height: 60px;
}
#nav-dcssb li.size-small {
height: 30px;
}
/* Floater */
.dc-social-float .tab {
cursor: pointer;
height: 44px;
margin-left: -1px;
}
.dc-social-float .dc-social-float-content {
background: #fff;
border: 1px solid #bbb;
padding: 10px;
}
.dc-social-float .dc-social-float-content {
border-radius: 10px; -webkit-border-radius: 10px;
}

/* Slick */
.dc-social-slick .dc-social-slick-content {
padding: 10px;
background: #fff;
border: 1px solid #ccc;
}
.dc-social-slick.vertical .dc-social-slick-content {
width: 78px;
}
.dc-social-slick.horizontal.left #nav-dcssb li.size-small, .dc-social-slick.horizontal.right #nav-dcssb 

li.size-small {
height: 60px;
}

.dc-social-slick.top  {
top: 0;
}
.dc-social-slick.bottom  {
bottom: 0;
}
.dc-social-slick.right  {
right: 0;
}
.dc-social-slick.left {
left: 0;
}
.dc-social-slick.right, .dc-social-slick.left {
padding-top: 2px; 
background: url(images/bg_slick_top.png) repeat-x 0 0;
}

.dc-social-slick.right .dc-social-slick-content {
border-top: none;
border-right: none;
border-radius: 0 0 0 10px; -webkit-border-radius: 0 0 0 10px;
padding: 10px 10px 20px 10px;
}
.dc-social-slick.left .dc-social-slick-content {
border-top: none;
border-left: none;
border-radius: 0 0 10px 0; -webkit-border-radius: 0 0 10px 0;
padding: 10px 10px 20px 10px;
}
.dc-social-slick.left.horizontal .dc-social-slick-content, .dc-social-slick.right.horizontal .dc-social-

slick-content {
border-radius: 0; -webkit-border-radius: 0;
padding: 10px 10px 18px 10px;
}
.dc-social-slick.top.vertical .dc-social-slick-content, .dc-social-slick.bottom.vertical .dc-social-

slick-content {
border-top: none;
border-bottom: none;
}

.dc-social-slick .tab {
cursor: pointer;
}
.dc-social-slick.top .tab, .dc-social-slick.bottom .tab {
height: 46px;
}
.dc-social-slick.left .tab, .dc-social-slick.right .tab {
width: 46px;
}

.dc-social-slick.bottom .tab {
top: 1px;
}
.dc-social-slick.top .tab {
bottom: 1px;
}
.dc-social-slick.align-left .tab {
margin-left: -1px;
}
.dc-social-slick.align-right .tab {
margin-right: -1px;
}

.dc-social-slick.bottom.align-right.horizontal .dc-social-slick-content {
border-radius: 10px 0 0 0; 
-webkit-border-radius: 10px 0 0 0;
}
.dc-social-slick.bottom.align-left.horizontal .dc-social-slick-content {
border-radius: 0 10px 0 0; 
-webkit-border-radius: 0 10px 0 0;
}

.dc-social-slick.top.align-right.horizontal .dc-social-slick-content {
border-radius: 0 0 0 10px; 
-webkit-border-radius: 0 0 0 10px;
}
.dc-social-slick.top.align-left.horizontal .dc-social-slick-content {
border-radius: 0 0 10px 0; 
-webkit-border-radius: 0 0 10px 0;
}

.dc-social-slick.right .tab, .dc-social-slick.left .tab {
margin-top: -2px;
}
.dc-social-slick.right .tab {
left: 1px;
}
.dc-social-slick.left .tab  {
right: 1px;
}

.dc-social-slick.horizontal #nav-dcssb li {
float: left;
}
.clear {clear: both;}
</style>
<script type="text/javascript" src=" 

https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type='text/javascript' 

src='http://stylifyyourblog1.googlecode.com/svn/trunk/easingplusslickfloat.js'></script>


<div id="dc-dcssb">
<ul id="nav-dcssb" >
<li id="dcssb-twitter" class="size-box"><script src="http://tweetmeme.com/i/scripts/button.js" 

type='text/javascript'></script>
</li>
<li id="dcssb-facebook" class="size-box"><a name="fb_share" type="box_count" 

href="http://www.facebook.com/sharer.php">Share</a><script 

src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</li>
<li id="dcssb-plusone" class="size-box"><script type="text/javascript" 

src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</li>
<li id="dcssb-linkedin" class="size-box"><script src="http://platform.linkedin.com/in.js" 

type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></li>
<li id="dcssb-stumble" class="size-box">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</li>
<li id="dcssb-digg" class="size-box">
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</li>
</ul>
</div>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#dc-dcssb').dcSocialFloater({
idWrapper : 'dcssb-float',
width: '98',
location: 'bottom',
align: 'right',
offsetLocation: 50,
offsetAlign: 50,
center: false,
centerPx: 0,
speedContent: 600,
speedFloat: 1000,
tabText: '<img src="http://3.bp.blogspot.com/-rFEb1cxZA4Y/Tr6w0EiCaeI/AAAAAAAABcU/ujxV1FR4zz4/s1600/tab_bottom_floating.png" alt="Share" />',
autoClose: false,
loadOpen: false,
tabClose: true,
classOpen: 'dcssb-open',
classClose: 'dcssb-close',
classToggle: 'dcssb-link'
});
});
</script>

6. Save the gadget.
7. Drag the gadget and reposition it either Right sidebar or Left sidebar (Make it the First Gadget).
8. Click Save button on upper right corner.

Customizing:

1. Alignment & Speed
To change position of the widget , check Line 190-194 with each attribute having the usual meaning. To change the speed check the attribute namely speedContent and speedFloat (Time is in Microseconds).

2. Closed or Open
This widget has a option whether you want these buttons be visible when the page loads or let them remain in the Closed state. To change this option search for “loadOpen” attribute in the code (Line 200) .To let them be visible when the page loads set the option as true .

3. Adding /Removing Buttons
Buttons can be added or deleted easily .To delete any button remove the code in-between the li tags. To add buttons other than those present already just add a li tag with class attribute something like the following code:

<li class="size-box">

----The Button Code----

</li>

4. Making it Appear on Selective Page 
If you want this to appear on only Post pages then you will have to go to Design > Edit HTML (As per new Interface Go to Template > Edit HTML).Tick the “Expand Widget Templates” and Then search for the Title of Gadget (If you have not given any title then give a dummy title like “abcd” and search using CTRF+F for this term) . Now see the following code

<b:widget id='WidgetID' locked='false' title='abcd' type='HTML'>
<b:includable id='main'> 
PUT CONDITIONAL TAG HERE  
  <b:if cond='data:title != &quot;&quot;'> 
    <h2 class='title'><data:title/></h2> 
  </b:if> 
  <div class='widget-content'> 
    <data:content/> 
  </div> 
<b:include name='quickedit'/> 
<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if> 
</b:includable> 
</b:widget>

List of conditional tags

Replace the “PUT CONDITIONAL TAG HERE” in the above code with any one of the thing.

1. Index (list) pages

Index pages include homepage, labels page and yearly archive page.

<b:if cond='data:blog.pageType == "index"'>

2. Post (item) page

<b:if cond='data:blog.pageType == "item"'>

3. Static Page

<b:if cond='data:blog.pageType == "static_page"'>

4. Archive page

<b:if cond='data:blog.pageType == "archive"'>

5. Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>

6. Specific page/url

<b:if cond='data:blog.url == "PUT_URL_HERE"'>

Now after putting the conditional tag, Preview the code and then Save.

Having problems, feel free to ask

See Demo

Implementing SuperSized in Blogger

Supersized jQuery PluginSupersized is a jQuery plugin that automatically resizes (background) images to the size of the browser while maintaining image dimension ratio and runs them as a slideshow in simple words its a Full Screen Slider.

There is no extra whitespace, no scrollbars – the entire browser window is always filled. It is lightweight and is compatible with Firefox, Safari, Opera, IE7, and IE6. It also allows integration with Flickr API.

See Demo

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.(For New Blogger Interface Go to Templates > Edit HTML)


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
  
<style>
#supersized {
position:fixed;
left:0;
top:0;
overflow:hidden;
z-index:-999;
height:100%;
width:100%;
}
#supersized img{
width:auto;
height:auto;
position:relative;
display:none;
outline:none;
border:none;
}
#supersized.speed img {
-ms-interpolation-mode:
nearest-neighbor;
image-rendering:-moz-crisp-edges;
}
/*----------------------------------------------------
{--------}  Speed  {--------}
----------------------------------------------------*/
#supersized.quality img {
-ms-interpolation-mode:
bicubic;
image-rendering:
optimizeQuality;
}
/*----------------------------------------------------
{--------}  Quality  {--------}
----------------------------------------------------*/
#supersized a {
z-index:-30;
position:absolute;
overflow:hidden;
top:0;
left:0;
width:100%;
height:100%;
background:#111;
}
#supersized a.prevslide { z-index:-20; }
#supersized a.activeslide { z-index:-10; }
#supersized a.prevslide img, #supersized a.activeslide img{ display:inline; }
</style>

<script type="text/javascript" src="http://stylifyyourblog1.googlecode.com/svn/trunk/supersize.js"></script> 
 

4.Now for adding the images into this plugin see the following markup:

<script type='text/javascript'>
//<![CDATA[
jQuery(function($){
$.supersized({
//Functionality
slideshow:1,//Slideshow on/off
autoplay:1,//Slideshow starts playing automatically
start_slide:1,//Start slide (0 is random)
random: 0,//Randomize slide order (Ignores start slide)
slide_interval:5000,//Length between transitions
transition:1,//0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed:1000,//Speed of transition
new_window:1,//Image links open in new window/tab
pause_hover:0,//Pause slideshow on hover
keyboard_nav:1,//Keyboard navigation on/off
performance:1,//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect:1,//Disables image dragging and right click with Javascript
//Size & Position
min_width:0,//Min width allowed (in pixels)
min_height:0,//Min height allowed (in pixels)
vertical_center:1,//Vertically center background
horizontal_center:1,//Horizontally center background
fit_portrait:1,//Portrait images will not exceed browser height
fit_landscape:0,//Landscape images will not exceed browser width
//Components
navigation:1,//Slideshow controls on/off
thumbnail_navigation:1,//Thumbnail navigation
slide_counter:1,//Display slide numbers
slide_captions:1,//Slide caption (Pull from "title" in slides array)
slides:[//Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wanderers-kitty.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg'},  
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg'},{image : 'http://4.bp.blogspot.com/-FbRA-c7XN7w/ToFyfWteFxI/AAAAAAAAAyI/5Wh2ELU1jC4/s000/1.jpg'},
{image : 'http://2.bp.blogspot.com/-RobdhmLJJqw/ToFyfzX1gcI/AAAAAAAAAyM/WpNVMsp3jeE/s000/2.jpg'},       
{image : 'http://2.bp.blogspot.com/-MFnQY9BN13o/ToFygdGxjRI/AAAAAAAAAyQ/fYOg05RsgjU/s000/3.jpg'}, 
{image : 'http://3.bp.blogspot.com/-C_x-CxMlq18/ToFyglftaKI/AAAAAAAAAyU/Id1R2ZTGUuQ/s000/4.jpg'},
{image : 'http://2.bp.blogspot.com/-En9rLi9a3Ag/ToFyhDg5lZI/AAAAAAAAAyY/CxUZyX6RONU/s000/5.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wilderness1.jpg'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/day2-emily.jpg'}
]
}); 
});
//]]>
</script>

All the options are explained with very understandable comments.



5.Now save the Post/Page.

Having any problem ,please feel free to ask

See Demo

Zen Audio Player for your Blog

Zen Audio Player Image

Zen Audio Player a single-song HTML5 Music Player, powered by jPlayer, styled and mostly animated with CSS3. It works more or less in Firefox4, Chrome, Safari, Opera, iOS, but there are some differences in the visuals. This blends jQuery, JavaScript and CSS3 in such a way that the end product is nothing less then a visual masterpiece.There are some known cross browser compatibility issues, but none the less its a funky looking Music Player which shows whats achievable with jQuery and CSS3 alone.

In this tutorial we will be discussing how to add this Music Player into your Blogs.

See DemoDownload

Simple Steps for Adding This into your Blog:


1. Go to the Post/Page you want to add this Music Player or 

    Go to Design > Page Elements > Add a Gadget > HTML/JavaScript type Gadget for adding this in the Sidebar

2. Copy the Following Code: (How to copy code easily)

<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="zen.css">
    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>   
 <script type="text/javascript" src="jquery.rotate.js"></script>
 <script type="text/javascript" src="jquery.grab.js"></script> 
 <script type="text/javascript" src="jquery.jplayer.min.js"></script>
 <script type="text/javascript" src="zen.js"></script>
 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

Note: If you already have jQuery library in your Header, then don’t include it again

Here zen.js contains the link of the audio file you want to play through this player. As you may observe that there are three different formats of the same file namely mp3, m4a and ogg. This is done as different Browsers have different native audio supports. Therefore it is suggested that you add the link to different formats of your Music file for better Cross Browser compatibility.

3. Now add the Following HTML markup:

<div id="zen">
  <span class="player"></span>
  <span class="circle"></span>
  <span class="progress"></span>
  <span class="buffer"></span>
  <span class="drag"></span>
  <div class="button">
   <span class="icon play"></span>
   <span class="icon pause"></span>
  </div>
 </div>
 

This code calls in the different CSS and JavaScript classes to give you the end product a.k.a. a super stylish Music Player.

4. Now just save and enjoy the Music.

See DemoDownload

Implementing Flex Slider in Blogger

Flexslider is a jQuery slider plugin which has been created, developed and maintained by Tyler Smith and released for Smashing Magazine and its readers. As usual, the plugin is absolutely free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive! It uses simple, semantic markup to create the slider and is lightweight, weighing only 5 Kb (minified). The plugin has been tested in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. In five simple steps, you can have a fully responsive slider for your responsive design.

See Demo

Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script src="jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" />
 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script src="jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" />

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

4.Now for adding the images into this plugin see the following markup:

<div id="container">
<div class="flexslider">
     <ul class="slides">
      <li>
       <img src="1.jpg" />
       <p class="flex-caption">Captions</p>
      </li>
      <li>
       <a href="http://www.google.com"><img src="2.jpg" /></a>
       <p class="flex-caption">This image is wrapped in a link!</p>
      </li>
      <li>
       <img src="3.jpg" />
      </li>
      <li>
       <img src="4.jpg" />
      </li>
     </ul>
   </div></div>

The div block with id “container” is the outer wrapper of the images to be displayed.

The class “flex-caption” is used for displaying captions below the image

Now for hooking this to the Slider using this JavaScript:

<script type="text/javascript">
  $(window).load(function() {
   $('.flexslider').flexslider();
  });
 </script>

5.Now save the Post/Page.

See Demo

Download

Implementing Slicebox into Blogger

Slicebox is a simple 3D Slider which makes use of the 3D transforms properties and allows a different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3d object. In case the browser does not support 3D transformations, a simple slider will be used as fallback. It comes in 6 versions.

See Demo

Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<link rel="stylesheet" type="text/css" href="demo.css" /> 
<link rel="stylesheet" type="text/css" href="slicebox.css" /> 
 <script type="text/javascript" src="modernizr.custom.13303.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
  <script type="text/javascript" src="jquery.slicebox.min.js"></script> 
  <script type="text/javascript"> 
   $(function() {
    $('#sb-slider').slicebox({
     slicesCount   : 15,
     sequentialRotation : true,
     sequentialFactor : 50,
     speed3d    : 250
    });
     if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>
 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!. If this code shows error while adding into the template, then Click Here to Escape Code and then copy into it


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="stylesheet" type="text/css" href="demo.css" /> 
<link rel="stylesheet" type="text/css" href="slicebox.css" /> 
 <script type="text/javascript" src="modernizr.custom.13303.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
  <script type="text/javascript" src="jquery.slicebox.min.js"></script> 
  <script type="text/javascript"> 
   $(function() {
    $('#sb-slider').slicebox({
     slicesCount   : 15,
     sequentialRotation : true,
     sequentialFactor : 50,
     speed3d    : 250
    });
     if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script>

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

4.Now for adding the images into this plugin see the following markup:

<div id="sb-slider" class="sb-slider"> 
    <img src="1.jpg" title="The Title that will appear below the Image"/> 
    <img src="2.jpg" /> 
    <img src="3.jpg" /> 
    <img src="4.jpg" /> 
    <img src="5.jpg" />  
   </div>

Here are some customized JavaScript for changing default Options:

Vertical Effect

<script type="text/javascript"> 
   $(function() {
    $('#sb-slider').slicebox({
     slicesCount   : 5,
     disperseFactor  : 30,
     sequentialRotation : true,
     sequentialFactor : 100
    });
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     $('#sb-examples > li:gt(2)').remove();
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

Horizontal Effect

<script type="text/javascript"> 
   $(function() {

    $('#sb-slider').slicebox({
     orientation   : 'h',
     slicesCount   : 3,
     disperseFactor  : 25,
     sequentialRotation : true,
     sequentialFactor : 140
    });
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     $('#sb-examples > li:gt(2)').remove();
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

Vertical Flipping

<script type="text/javascript"> 
   $(function() {
 
    $('#sb-slider').slicebox();
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

Horizontal Flipping

<script type="text/javascript"> 
   $(function() {
    
    $('#sb-slider').slicebox({
     orientation   : 'h'
    });
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

Expanding Effect

<script type="text/javascript"> 
   $(function() {
 
    $('#sb-slider').slicebox({
     slicesCount   : 9,
     disperseFactor  : 50,
     sequentialRotation : true,
     sequentialFactor : 20
    });
    
    if( !Modernizr.csstransforms3d ) {
     $('#sb-note').show();
     
     $('body').append(
      $('script').attr( 'type', 'text/javascript' ).attr( 'src', 'jquery.easing.1.3.js' )
     );
    } 
   });
  </script> 

5.Now save the Post/Page.


See Demo

Download

Implementing Flux Slider in Blogger

At some point in a site you might have used a slider of images for e.g. your featured articles or something. While there are literally hundreds of these out there, Flux goes a step further and while browser support is not the best , have a look at it as it utilizes some really great CSS3 effects. As the author states, you can either use jQuery or Zepto.js. In order to view the demo you need a browser that supports CSS3 transitions (Chrome or Safari ). It utilizes hardware acceleration wherever possible to improve performace on less powerful devices, such as mobiles & tablets making it mobile friendly specially iPad/Android.

See Demo

Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<!--[if lte IE 8]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
<!-- <script src="zepto.js" type="text/javascript" charset="utf-8"></script> -->   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="flux.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" charset="utf-8"> 
   $(function(){
    if(!flux.browser.supportsTransitions)
     alert("Flux Slider requires a browser that supports CSS3 transitions");
     
    window.f = new flux.slider('#slider', {
     pagination: true
    });
   });
</script> 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<!--[if lte IE 8]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="no title" charset="utf-8"> 
<!-- <script src="zepto.js" type="text/javascript" charset="utf-8"></script> -->   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="flux.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" charset="utf-8"> 
   $(function(){
    if(!flux.browser.supportsTransitions)
     alert("Flux Slider requires a browser that supports CSS3 transitions");
     
    window.f = new flux.slider('#slider', {
     pagination: true
    });
   });
</script> 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

4.Now for adding the images into this plugin see the following markup:

<section class="container"> 
<div id="slider"> 
    <img src="avatar.jpg" alt="" /> 
    <img src="greenhornet.jpg" alt="" /> 
    <img src="ironman.jpg" alt="" /> 
    <img src="tron.jpg" alt="" /> 
   </div>
</section>

The class container gives the pagination and bordering style to the plugin.

5.Now save the Post/Page.


See Demo

Download



Facing any problems ,Please feel free to ask

Implementing Diapo in Blogger

Diapo is a jQuery plugin for creating content sliders with beautiful and custom transition effects. It can display images, videos or any other HTML and can be browsed manually (with prev-next buttons or pagination links that also displays thumbnails) or the auto-slideshow functionality. The plugin is mobile-ready and has options to enable-disable features for mobile usage . Transitions can also be customized by defining sliced rows-columns, the transition period and more.

             See Demo                                                                                            Download

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)
<link rel='stylesheet' id='style-css'  href='diapo.css' type='text/css' media='all' /> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script type='text/javascript' src='jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='diapo.js'></script> 
<script>
$(function(){
 $('.pix_diapo').diapo();
});
</script>

 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!


2.Go to the Post/Page/Gadget you want to add this plugin and then go to Edit HTML tab .


3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel='stylesheet' id='style-css'  href='diapo.css' type='text/css' media='all' /> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<script type='text/javascript' src='jquery.easing.1.3.js'></script> 
<script type='text/javascript' src='jquery.hoverIntent.minified.js'></script> 
<script type='text/javascript' src='diapo.js'></script> 
<script>
$(function(){
 $('.pix_diapo').diapo();
});
</script>

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

4.Now for adding the images into this plugin see the following markup:

<div class="pix_diapo">


<div data-thumb="Small.jpg">
<img src="Large.jpg">
<div class="caption elemHover fromLeft">
This is a simple sliding image with caption. You can have more than one caption and decide the layout of the caption via css.
</div>
</div>

<div data-thumb="Small1.jpg">
<img src="Large1.jpg"> 
<div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ff0; text-transform:uppercase">
Here you can see two captions.
</div>
<div class="caption elemHover fromLeft" style="padding-top:5px;">
The first are loaded immediately before than the second one
</div>
</div>



<div data-thumb="Small2.jpg" data-time="7000">
<img src="Large2.jpg">
<div class="elemHover caption fromLeft">
You can also get the same effect as the caption with:
</div>
</div>



<div data-thumb="Small3.jpg">
<iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="FakeLarge3.jpg" frameborder="0" allowfullscreen></iframe>
<div class="elemHover caption fromLeft elemToHide">
You can also display videos, but it requires a "fake image" a.k.a. the Screenshot of video before starting
</div>
</div>



</div>

The div block with class “pix_diapo” is the container of the images to be displayed.

data-thumb is the container of the thumbnail which appears when mouse is hovered over the pagination icons.
The class “Caption elemHover fromZZZZ” is used to define the caption for the Slide. Here ZZZZ can be replaced by left ,right,top or bottom. ZZZZ defines from where the caption will enter the screen.

Videos are also embeddable but you will have put a fake image for the slide transitions. The fake image should normally be the starting screenshot of the video itself like for example if you are embedding a YouTube Video then the starting screenshot should be something like this

As you see the Image contains the Play button from YouTube to make it look like a real video

Here are some customized JavaScript for changing default Options:

<script>
$(function(){
 $('.pix_diapo').diapo({fx: 'scrollHorz', time: '5000'}); 
});
</script>

Here fx is the effect you want to apply between slide transitions (by default it is random)
time is the interval in microseconds between sliding .
For even more Options visit Here

5.Now save the Post/Page.


             See Demo                                                                                            Download