Bloggerdaddy - A guide for new blogger: Widgets

How to Create 3D Rolling Link Effect Using CSS in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
 
 
Everything is possible with the power of CSS. You can do whatever you 
want using CSS. While customizing your template or adding effects to 
blog elements, everything you do for beautifying your blog is based on 
CSS and today we are also going to share a beautiful CSS effect known as
 3D Rolling Link Effect. I hope that you'll love it and this effect will
 make your blog different and unique from other blogs. So without any 
further delay let’s install this 3D Rolling Link Effect. All you need is
 just to add the CSS code first and then the HTML for that link. See how
 it looks and play with it on <a href="http://jsfiddle.net/" rel="" target="_blank">jsfiddle.net</a>, hove the text in the results section to see how it looks. 
 
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMBmcZWNJuMsdY8NnzHJvP4o3BMu_PfBERmnb64IT5ZzRkKkeLNSCyhMWHf72AbtneqtI0v_hLapYYi5CuoVu86V2UYLd59S-jywPBMxPH83DHIfD8DbMqZj0WCNtN-5mMMUnXXB8SdI/s1600/3D+Rolling.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMBmcZWNJuMsdY8NnzHJvP4o3BMu_PfBERmnb64IT5ZzRkKkeLNSCyhMWHf72AbtneqtI0v_hLapYYi5CuoVu86V2UYLd59S-jywPBMxPH83DHIfD8DbMqZj0WCNtN-5mMMUnXXB8SdI/s400/3D+Rolling.jpg" /></a></div>
<h3>
 Create 3D Rolling Link Effect Using CSS in Blogger</h3>
First and foremost log in to your Blogger Account >> Select your Blog >> Template >> click Edit HTML >> click inside the code area and use Ctrl+F to search and search for the following tag 
 
<blockquote class="tr_bq">
]]></b:skin></blockquote>
 
Now copy the below code and paste it just above/before it (]]></b:skin> tag) 
 
<blockquote class="tr_bq">
.bgt-roll-link { 
    color: #2aa4cf; 
    text-decoration: none; 
    font-weight:bold; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
  
    -webkit-perspective: 600px; 
       -moz-perspective: 600px; 
       -ms-perspective: 600px; 
       perspective: 600px; 
    -webkit-perspective-origin: 50% 50%; 
       -moz-perspective-origin: 50% 50%; 
       -ms-perspective-origin: 50% 50%; 
       perspective-origin: 50% 50%;     
} 
.bgt-roll-link:hover {text-decoration:none; color: #2aa4cf; font-weight:bold;} 
.bgt-roll-link span { 
    display: block; 
    position: relative; 
    padding: 0 2px; 
    -webkit-transition: all 300ms ease; 
       -moz-transition: all 300ms ease; 
       -ms-transition: all 300ms ease; 
       transition: all 300ms ease; 
  
    -webkit-transform-origin: 50% 0%; 
       -moz-transform-origin: 50% 0%; 
       -ms-transform-origin: 50% 0%; 
       transform-origin: 50% 0%; 
  
    -webkit-transform-style: preserve-3d; 
       -moz-transform-style: preserve-3d; 
       -ms-transform-style: preserve-3d; 
       transform-style: preserve-3d; 
} 
.bgt-roll-link:hover span { 
        background: #2aa4cf;       
 
        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); 
           -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); 
           -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); 
           transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); 
} 
.bgt-roll-link span:after { 
    content: attr(data-title); 
    display: block; 
    position: absolute; 
    left: 0; 
    top: 0; 
    padding: 0 2px; 
    color: #fff; 
    background: #2aa4cf; 
    -webkit-transform-origin: 50% 0%; 
    -moz-transform-origin: 50% 0%; 
    -ms-transform-origin: 50% 0%; 
    transform-origin: 50% 0%; 
    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); 
    -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); 
    -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); 
    transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); 
    a.roll-link:link, a.roll-link:visited{color:red;} 
}</blockquote>
 
Hit the Save Template button. Now the HTML, copy the HTML code below and paste it where you want to use this effect. 
 
<blockquote class="tr_bq">
<a class="bgt-roll-link" href="http://bloggerdaddy.tk">Bloggerdaddy - A Guide for New Blogger"> Bloggerdaddy - A Guide for New Blogger</a></blockquote>
 
Customization: 
<ul>
<li>Replace Bloggerdaddy - A Guide for New Blogger and  Bloggerdaddy - A Guide for New Blogger with your Link text.</li>
</ul>
<ul>
<li>Replace http://bloggerdaddy.tk with your Link.</li>
</ul>
 
To use this link effect in your blogger blog posts, switch your post 
editor to HTML mode and add the above HTML code where you want to use 
it. 
Congratulations: You've successfully added this 3D Rolling Link Effect to your blog. 
<h3>
From Editors Desk</h3>
We hope this tutorial may have helped you in creating a 3D Rolling Link Effect for your Blog. Share this post 
with your friends and don't forget to subscribe us. Got a Question? Let us know in the comments section below. 
 </div>

Widgets How to Create 3D Rolling Link Effect Using CSS in Blogger

Everything is possible with the power of CSS. You can do whatever you want using CSS. While customizing your template or adding effects ...

Lights Widget for Blogger

4:19:00 PM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="right: 0%; top: 0%;">
<a href="http://bloggerdaddy.tk/" target="_blank"><img alt="Blog Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6HxalMwkgpQn0GxawA6mWaFbJ5kxqDywlFGux6jWWmIRrImFYA6IZaF-Zfalj9TBhtOH_xa8-30etECsOuoQnfOF6prf4XftmHT-5h-dByefrTuvxMrZFZv8ufGg-561NbNTXVxorpYIr/s1600/flashing+christmas+lights%255B12%255D.gif" /></a>
</div>
<div style="left: 0%; top: 0%;">
<a href="http://bloggerdaddy.tk/" target="_blank"><img alt="Blog Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6HxalMwkgpQn0GxawA6mWaFbJ5kxqDywlFGux6jWWmIRrImFYA6IZaF-Zfalj9TBhtOH_xa8-30etECsOuoQnfOF6prf4XftmHT-5h-dByefrTuvxMrZFZv8ufGg-561NbNTXVxorpYIr/s1600/flashing+christmas+lights%255B12%255D.gif" /></a>
 
 
<h3>
 How to Add Christmas Lights Widget for Blogger</h3>
 
1. Go to Blogger Dashboard > Layout 
2. Click Add Gadget and select 'HTML/Javascript' 
3. Paste below code. 
 
<blockquote class="tr_bq">
<div style='position: fixed; top: 0%; right: 0%;'/> 
<a href="http://www.bloggerdaddy.tk/" target="_blank"><img alt="Blog Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6HxalMwkgpQn0GxawA6mWaFbJ5kxqDywlFGux6jWWmIRrImFYA6IZaF-Zfalj9TBhtOH_xa8-30etECsOuoQnfOF6prf4XftmHT-5h-dByefrTuvxMrZFZv8ufGg-561NbNTXVxorpYIr/s1600/flashing+christmas+lights%255B12%255D.gif"/></a> 
</div> 
<div style='position: fixed; top: 0%; left: 0%;'/> 
<a href="http://bloggerdaddy.tk/" target="_blank"><img alt="Blog Tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6HxalMwkgpQn0GxawA6mWaFbJ5kxqDywlFGux6jWWmIRrImFYA6IZaF-Zfalj9TBhtOH_xa8-30etECsOuoQnfOF6prf4XftmHT-5h-dByefrTuvxMrZFZv8ufGg-561NbNTXVxorpYIr/s1600/flashing+christmas+lights%255B12%255D.gif"/></a> 
</div></blockquote>
 
4. Now save your HTML/Javascript'. 
 </div>
</div>

Widgets Lights Widget for Blogger

How to Add Christmas Lights Widget for Blogger 1. Go to Blogger Dashboard > Layout 2. Click Add Gadget and select 'H...

Create a Custom Flash Video Player For Your Blogs

11:27:00 AM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
 
<div style="text-align: center;">
<img alt="" height="199" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzHjacFakWmmE_wSc4j9X0yI6FUHFLNj7wlj8WM5Y5Y_Z5Y5fT" title="" width="320" /></div>
<div style="text-align: center;">
 
<div style="background: white; line-height: 18.0pt; margin-bottom: .0001pt; margin: 0in; text-align: justify;">
A Custom video Player to let you feel more confident while
sharing your videos with visitors. You don't need youtube, dailymotion,
metacafe or any other video player with Brand name on it because now you can
create a video player which can be all yours for free thanks to <a href="http://www.alsacreations.fr/dewtube.html" style="outline: none;" target="_blank">Dewtube</a>.
After sharing the music player created by alsacreations its now time
to learn how to embed the video player created by them in blogs and websites.
The steps this time are far more easy. You just need to upload the flash file
and flv file on a free hosting site  and there you get a beautiful flash
video player.<o:p></o:p></div>
<div style="background: white; line-height: 18.0pt; margin-bottom: .0001pt; margin: 0in; text-align: justify;">
 </div>
<div style="text-align: left;">

</div>
<div style="background: white; line-height: 18.0pt; margin-bottom: .0001pt; margin: 0in; text-align: justify;">
Paste the following code anywhere you want for the player to
appear:<o:p></o:p></div>
<blockquote class="tr_bq">
<object type="application/x-shockwave-flash" data="dewtube.swf?movie=video.flv" width="512" height="384"> <param name="movie" value="dewtube.swf?movie=video.flv" /> </object></blockquote>
<div style="background: white; line-height: 18.0pt; margin-bottom: .0001pt; margin: 0in; text-align: justify;">

</div>
<div style="background: white; line-height: 18.0pt; margin-bottom: .0001pt; margin: 0in; text-align: justify;">
 </div>
<div style="margin-bottom: .0001pt; margin: 0in; text-align: justify;">
The
file format SWF downloaded here:<o:p></o:p></div>
<div style="margin: 0in 0in 0.0001pt; text-align: justify;">
 </div>
<div style="background: white; line-height: 18.0pt; margin-bottom: .0001pt; margin: 0in; text-align: justify;">

Version
1.0 beta: <a href="http://www.alsacreations.fr/mediaflash/dewtube.zip" target="_blank">dewtube.zip</a></div>
</div>
</div>

Widgets Create a Custom Flash Video Player For Your Blogs

A Custom video Player to let you feel more confident while sharing your videos with visitors. You don't need youtube, dailymotion...

New Floating Facebook Like Box Widget For Blogger

12:35:00 PM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; box-sizing: border-box; color: #666666; font-family: "Source Sans Pro", sans-serif; font-size: 19px; line-height: 30.875px; margin-bottom: 30px; padding: 0px;">
 
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPEyZR9gV-lomHKluaZnBis8qLE9rfEjKLyUEgNKF-hdrT4y2N-ipgeeYOXxO9Z6iwT02roTKfFlh2QO0lqx9JrbCrHw7Ss6H0KkJY8ZiZUjYqKPPUHC8yuQtEqMtuCGGJNYvWPBzap04/s1600/ff2.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPEyZR9gV-lomHKluaZnBis8qLE9rfEjKLyUEgNKF-hdrT4y2N-ipgeeYOXxO9Z6iwT02roTKfFlh2QO0lqx9JrbCrHw7Ss6H0KkJY8ZiZUjYqKPPUHC8yuQtEqMtuCGGJNYvWPBzap04/s400/ff2.png" /></a></div>
Recently we shared simple yet stylish floating facebook like box widget. Now we came with Another New Floating Facebook Like Box Widget For Blogger ! This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. This will help you to increase facebook likes. You just need to put small code to your blogger blog.  Currently this widget is only for Bloggeer/Blogspot blogs. We will soon share about WordPress in our next post. Now lets move to how you can add this in blogger I will show you How You Can Add Another New Floating Facebook Like Box Widget For Blogger?</div>
<div>
<h3 class="mystyle" style="background-color: white; box-sizing: border-box; color: #444444; font-family: "Source Sans Pro", sans-serif; font-size: 28px; line-height: 1.2; margin: 0px 0px 20px;">
Add Floating Facebook Like Box Widget To Blogger !</h3>
<ol style="background-color: white; box-sizing: border-box; color: #666666; font-family: "Source Sans Pro", sans-serif; font-size: 19px; line-height: 30.875px; margin: 0px 0px 30px 40px; padding: 0px;">
<li style="box-sizing: border-box; list-style-type: decimal;">Go to Design > Page Elements.</li>
<li style="box-sizing: border-box; list-style-type: decimal;">Click Add A Gadget.</li>
<li style="box-sizing: border-box; list-style-type: decimal;">In Add A Gadget window, select the HTML/Javascript .</li>
<li style="box-sizing: border-box; list-style-type: decimal;">Paste the following code inside it,</li>
</ol>
<div>
 
<blockquote class="tr_bq">
<script type="text/javascript"> 
<blockquote>
 /*<![CDATA[*/ 
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); 
 /*]]>*/ 
 </script> 
 <style type="text/css"> 
 .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAmuT2mRo-_KRr-_lzWfUQssHWH4HierYmS1jwQ-bNthzBMpQsCqKWx6aNEfFodK0ryLAKnm6WH9VAW1c-h4sQ1nFqGosJxwBlrSduZELJ7B1ZAs-KysMB9zW8zau4NcVrNKJwdk0WXoU/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} 
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} 
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} 
 .abtlikebox span a{color: gray;text-decoration:none;} 
 .abtlikebox span a:hover{text-decoration:underline;} 
} 
</style> 
 <div class="abtlikebox" style=""> 
     <div> 
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FBloggerdaddy&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe> 
     </div> 
 </div></blockquote>
</blockquote>

<div style="color: #666666;">
 </div>
 
<div style="background-color: white; box-sizing: border-box; color: #666666; font-family: "Source Sans Pro", sans-serif; font-size: 19px; line-height: 30.875px; margin-bottom: 30px; padding: 0px;">
5. Click on Save button and done !</div>
<div style="background-color: white; box-sizing: border-box; color: #666666; font-family: "Source Sans Pro", sans-serif; font-size: 19px; line-height: 30.875px; margin-bottom: 30px; padding: 0px;">
Note:-</div>
<div style="background-color: white; box-sizing: border-box; font-family: "Source Sans Pro", sans-serif; font-size: 19px; line-height: 30.875px; margin-bottom: 30px; padding: 0px;">
Replace Bloggerdaddy With Your Facebook Page URL or User name.</div>
</div>
<div>
</div>
</div>
</div>

Widgets New Floating Facebook Like Box Widget For Blogger

Recently we shared simple yet stylish floating facebook like box widget. Now we came with Another New Floating Facebook Like Box Widget...

How to make all Links in Blog to Open in Another Tab

3:16:00 PM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
Many <a href="http://www.bloggerdaddy.tk/search/label/Widgets" target="_blank">Blogger Tricks and Widgets</a>
 have been shared on this blog recently. So today, I want to share a 
trick with you on how you can make all the links on your blog to show in
 a new tab. This trick can help increase blog page view and decrease 
your bounce rate. 
 
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgiuMNHOq4neQSkbxs3Pzn4bifnG3ZQj_tb1PO72v49jOXvTbgwzTDphT8HLq_sl3wLb9G2Z_6jIuQ4u4Dw6KXAvjqV8zD7lkAf-IREoLSMi15Vmprc41RQA8vKxGrOrK14rjjz3Q3M50/s1600/45+%25282%2529.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgiuMNHOq4neQSkbxs3Pzn4bifnG3ZQj_tb1PO72v49jOXvTbgwzTDphT8HLq_sl3wLb9G2Z_6jIuQ4u4Dw6KXAvjqV8zD7lkAf-IREoLSMi15Vmprc41RQA8vKxGrOrK14rjjz3Q3M50/s400/45+%25282%2529.png" /></a></div>
 
 
This trick is simple and easy to install on blogger blogs to make the
 entire link on your blog to open in another tab as default. Follow the 
process below to install it on your blog by adding a code to your 
template. 
 
==> Sign in to your blogger blog >> Template 
==> Search for <code><head></code> in your template by using CTRL+F and then after it add below code 
<code> </code>
<blockquote class="tr_bq">
<code><base target='_blank' /></code></blockquote>
<code> </code>
 
==>Finally save your template.

By now all the link on your blog will automatically open in another tab whenever it is clicked on.</div>

Tips Tricks Widgets How to make all Links in Blog to Open in Another Tab

Many Blogger Tricks and Widgets have been shared on this blog recently. So today, I want to share a trick with you on how you can make a...

How to Create a Sitemap or Table Of Contents Page For Blogger

2:53:00 PM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
Sitemap  is a page on your blog where all 
posts are arranged in accordance to their type, and it shows the links 
to all posts published on your blog so far. Sitemap (Table of Contents) 
is important for all bloggers to have on their blog. This make blog look
 professional, and it helps your blog visitors and readers to navigate 
through your blog post. 
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPo3Im1yv8KkwbXNszOU-0GNR0miHUNMo1x94TPyht5ZRUfTwJ7UnuPBuSBWp9SN8jQdxPzY_JTaGjjGL67vNXM39ZTYzF6JbRkyVS7UIZ5PS9ApRw49f4Ovp-jTENIBNYTSnLhvPJb4/s1600/20160529144225362.png" imageanchor="1"><img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPo3Im1yv8KkwbXNszOU-0GNR0miHUNMo1x94TPyht5ZRUfTwJ7UnuPBuSBWp9SN8jQdxPzY_JTaGjjGL67vNXM39ZTYzF6JbRkyVS7UIZ5PS9ApRw49f4Ovp-jTENIBNYTSnLhvPJb4/s320/20160529144225362.png" width="320" /></a> 
 </div>
 
Here is a script that saves time and helps to update all new posts 
made on your blog to your sitemap (Table of Contents) page 
automatically. This script will display all posts made on your blog 
under their specified categories (Labels). This widget also comes with a
 CSS & Jquery to make it attractive. 
<h4>

Steps To Add Automatic Sitemap (Table of Contents) Generator</h4>
 
1. Add the CSS code below to your template. This can be done by going to Blogger >>> Template, use (CTRL+F) to search for ]]></b:skin> in your template and finally paste the CSS code below above <code>]]></b:skin></code> tag. 
 
<blockquote class="tr_bq">
<code>/*--------bloggerdaddy.tk TOC-----*/</code><code>
.judul-label{</code><code>
background-color:#E5ECF9;</code><code>
font-weight:bold;</code><code>
line-height:1.4em;</code><code>
margin-bottom:5px;</code><code>
overflow:hidden;</code><code>
white-space:nowrap;</code><code>
vertical-align: baseline;</code><code>
margin: 0 2px;</code><code>
outline: none;</code><code>
cursor: pointer;</code><code>
text-decoration: none;</code><code>
font: 14px/100% Arial, Helvetica, sans-serif;</code><code>
padding: .5em 2em .55em;</code><code>
text-shadow: 0 1px 1px rgba(0,0,0,.3);</code><code>
-webkit-border-radius: .5em;</code><code>
-moz-border-radius: .5em;</code><code>
border-radius: .5em;</code><code>
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);</code><code>
-moz-box-shadow: 1px 1px 4px #AAAAAA;</code><code>
box-shadow: 0 1px 2px rgba(0,0,0,.2);</code><code>
color: #e9e9e9;</code><code>
border: 2px solid white !important;</code><code>
background: #6e6e6e;</code><code>
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));</code><code>
background: -moz-linear-gradient(top,  #888,  #575757);</code><code>
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');</code><code>
}</code><code>
.data-list{</code><code>
line-height:1.5em;</code><code>
margin-left:5px;</code><code>
margin-right:5px;</code><code>
padding-left:15px;</code><code>
padding-right:5px;</code><code>
white-space:nowrap;</code><code>
text-align:left;</code><code>
font-family:"Arial",sans-serif;</code><code>
font-size:12px;</code><code>
}</code><code>
.list-ganjil{</code><code>
background-color:#F6F6F6;</code><code>
}</code><code>
.headactive{</code><code>
    color: #fef4e9;</code><code>
    border: 2px solid white !important;</code><code>
    background: #1C8DFF;</code><code>
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));</code><code>
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);</code><code>
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');</code><code>
} </code></blockquote>
 
 
Save your Template after inserting the CSS 
 
2.    Create a Page: to create a new page, go to Blogger >>> Pages >>> New Page. Now give the page a title such as “Table of Contents” “Site Maps” or any title you wish. Click EDIT HTML button on the compose mode screen, now paste the code below in it. 
 
 
<blockquote class="tr_bq">
<script src="https://www.dropbox.com/s/20wu2kszj4droq8/Justnaira-tos-file.js?dl=1"></script> 
<script src="http://www.bloggerdaddy.tk/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script> 
<script type="text/javascript"> 
var accToc=true; 
</script><script src="https://www.dropbox.com/s/5m7gwnjqm4w5rft/oncordian-tos.js?dl=1" type="text/javascript"></script></blockquote>
 
Make sure you change http://www.bloggerdaddy.tk to your own blog URL and then publish the page. Visit the page link to view your awesome blog sitemap (Table of Contents). 
<h4>

Sitemap (Table of Contents) Customization</h4>
The color of the category when in active mode is blue while when it is inactive it appears as dark gray. 
 
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqCX7IRfbqzr2BEt5rJrW08Hxc63f15HQ-pXu0d-CVtIXnjb6HKDOWTuospVTQWLaUmdeqYAdG014VEPxD2kgIMl4BjkBB5O7dSoCWjQED1g1XxPqfvmrQqvfFHg6ppb1YVPMDEergc0/s1600/20160529144239952.png" imageanchor="1"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqCX7IRfbqzr2BEt5rJrW08Hxc63f15HQ-pXu0d-CVtIXnjb6HKDOWTuospVTQWLaUmdeqYAdG014VEPxD2kgIMl4BjkBB5O7dSoCWjQED1g1XxPqfvmrQqvfFHg6ppb1YVPMDEergc0/s400/20160529144239952.png" width="400" /></a></div>
 
So to change the active mode, simply change #9dc2e7 and #438cd2. Here is a <a href="http://www.bloggerdaddy.tk/2015/11/color-code-generator.html" target="_blank">color generator tool</a> that will aid you to select the best color code that you love. 
If you encounter any difficulties in the process of setting up your blog Sitemap, don’t hesitate to use the comment box below.</div>

Tricks Widgets How to Create a Sitemap or Table Of Contents Page For Blogger

Sitemap is a page on your blog where all posts are arranged in accordance to their type, and it shows the links to all posts published o...

Facebook Popup Like Box Widget For Blogger

11:33:00 AM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq3ewfF0fsUHk5wms5HIXPtNU37rYzma2dzuU78D24xx53_5kw8qLuRinYtJDGdyEPG922w78UMgGvU0PrrqFrawHcSN61DQBA9-KknkKpbGKW9rRT_d4Mve_GFtXrPdOAmQMc3Lft_fU/s1600/20160524113002664.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq3ewfF0fsUHk5wms5HIXPtNU37rYzma2dzuU78D24xx53_5kw8qLuRinYtJDGdyEPG922w78UMgGvU0PrrqFrawHcSN61DQBA9-KknkKpbGKW9rRT_d4Mve_GFtXrPdOAmQMc3Lft_fU/s400/20160524113002664.png" /></a></div>
<h2 class="tr_bq" style="text-align: left;">
<div style="text-align: left;">
 </div>
How to Add the Facebook popup Like Box Widget</h2>
 1. Log into your Blogger account and select your blog > go to 'Layout' & click the 'Add a Gadget' link on the right side 2. Once the popup window is open, select the HTML/JavaScript gadget from the list: 
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJB1tfzLojNjsMNYv_jwndGoa2X6CruVWrVmrYBdJ-yuMAGsAr930VqQ7tmR_XL5eMcRW24S3HmB7A1NgUyMxhaoklD9BUHRK0i22iHjC_15QNu2Io2jo5-8xDgMdEte_hTdHBJUopOzM/s1600/add-html-javascript-gadget-blogger.png" imageanchor="1"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJB1tfzLojNjsMNYv_jwndGoa2X6CruVWrVmrYBdJ-yuMAGsAr930VqQ7tmR_XL5eMcRW24S3HmB7A1NgUyMxhaoklD9BUHRK0i22iHjC_15QNu2Io2jo5-8xDgMdEte_hTdHBJUopOzM/s400/add-html-javascript-gadget-blogger.png" width="400" /></a></div>
<div style="text-align: center;">
 </div>
<div style="text-align: left;">
3. Copy and paste the following code inside the empty box:</div>
<blockquote style="text-align: left;">
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><style>#fbox-background {    display: none;    background: rgba(0,0,0,0.8);    width: 100%;    height: 100%;    position: fixed;    top: 0;    left: 0;    z-index: 99999;} #fbox-close {    width: 100%;    height: 100%;} #fbox-display {    background: #eaeaea;    border: 5px solid #828282;    width: 340px;    height: 230px;    position: absolute;    top: 32%;    left: 37%;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;} #fbox-button {    float: right;    cursor: pointer;    position: absolute;    right: 0px;    top: 0px;} #fbox-button:before {    content: "CLOSE";    padding: 5px 8px;    background: #828282;    color: #eaeaea;    font-weight: bold;    font-size: 10px;    font-family: Tahoma;} #fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {    color: #aaaaaa;    font-size: 9px;    text-decoration: none;    text-align: center;    padding: 5px;}</style><script type='text/javascript'>//<![CDATA[jQuery.cookie = function (key, value, options) {// key and at least value given, set cookie...if (arguments.length > 1 && String(value) !== "[object Object]") {options = jQuery.extend({}, options);if (value === null || value === undefined) {options.expires = -1;}if (typeof options.expires === 'number') {var days = options.expires, t = options.expires = new Date();t.setDate(t.getDate() + days);}value = String(value);return (document.cookie = [encodeURIComponent(key), '=',options.raw ? value : encodeURIComponent(value),options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IEoptions.path ? '; path=' + options.path : '',options.domain ? '; domain=' + options.domain : '',options.secure ? '; secure' : ''].join(''));}// key and possibly options given, get cookie...options = value || {};var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;};//]]></script><script type='text/javascript'>jQuery(document).ready(function($){if($.cookie('popup_facebook_box') != 'yes'){$('#fbox-background').delay(5000).fadeIn('medium');$('#fbox-button, #fbox-close').click(function(){$('#fbox-background').stop().fadeOut('medium');});}$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });});</script><div id='fbox-background'><div id='fbox-close'></div><div id='fbox-display'><div id='fbox-button'></div><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Bloggerdaddy/1234567890&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe><div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://blogerdaddy.blogspot.in/" rel="nofollow">Bloggerdaddy</a></div></div></div></blockquote>
4. Press the 'Save' button to add the widget to your blog. That's it!  
<h2 style="text-align: left;">
 Customization</h2>
<div>
After adding the code, replace the address in blue</div>
<div>
 </div>
<div>
https://www.facebook.com/pages/Bloggerdaddy/1234567890 with your site's facebook page URL.</div>
<div>
 </div>
<div>
The widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part:</div>
<blockquote class="tr_bq">
 .delay(5000)</blockquote>
</div>
 
 
<li>By default, the like box only shows up the first time the user visits your page.  If you would like the Facebook box to popup every time the page loads, then remove this line of code:</li>
 
<blockquote class="tr_bq">
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });</blockquote>
<ul>
<li>If you want to display only when user visits your homepage, go to 'Template' > hit the 'Edit HTML' button on the right side and search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:</li>
</ul>
<style>.post-body ul li{list-style-type: square;}</style>

<blockquote class="tr_bq">
</body> </blockquote>
Paste the facebook popup widget right above the body tag and make sure to include the conditional tags below: 
<blockquote class="tr_bq">
&lt;b:if cond='data:page.type == "index"'&gt;ADD THE FACEBOOK WIDGET CODE HERE &lt;/b:if&gt;</blockquote>
After saving your work, you can test out your new feature by returning to one of your old posts which should bring up a little popup widget asking if you'd like to join the site's facebook page. 
 
If you don't see the Facebook Like Box on the page, you may need to delete your cookies or check out the 'Customization' section above in order to display the widget every time a user visits your site. Once this widget is added to your site, all your hard work should start to translate into an increase in web traffic and number of Facebook fans.</div>

Widgets Facebook Popup Like Box Widget For Blogger

How to Add the Facebook popup Like Box Widget 1. Log into your Blogger account and select your blog > go to 'Layout' ...

jQuery Image Slider For Blogger - V3

10:37:00 AM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="tr_bq">
 </div>
<div class="tr_bq" style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlcU-ghIcw3ow90ARr3spAsdUJ7QwmNmATxUGMGomnbQ0eupEC4fzgdtkbAY82RTYdkBcRFsNkk6UmX9cIpk3DOK1SgHZSSLytBonqJDLCFNk2VPOOTCE7ANyKmTQ1bRWsCcPAPdzKwvc/s1600/Jquery-Blogger-slider%255B14%255D.jpg" imageanchor="1"><img border="0" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlcU-ghIcw3ow90ARr3spAsdUJ7QwmNmATxUGMGomnbQ0eupEC4fzgdtkbAY82RTYdkBcRFsNkk6UmX9cIpk3DOK1SgHZSSLytBonqJDLCFNk2VPOOTCE7ANyKmTQ1bRWsCcPAPdzKwvc/s320/Jquery-Blogger-slider%255B14%255D.jpg" width="320" /></a></div>
<div class="tr_bq">
 </div>
<div class="tr_bq">
As per your requests we are glad to present yet another stunning version
 of Image slideshow Widget for BlogSpot blogs. This widget is different 
from its previous versions with regard to speed, load time, navigation 
and control options. You can use it to display even your Featured Posts
 using the Featured post title and description. This widget is again an 
extracted code from a WordPress template. The slider is coded such that 
it will appear on your homepage only.</div>
 
<h3>
 Adding the Slider To Blogger:</h3>
Kindly follow these steps: 
 
<ol>
<li>Go To Blogger > Design > Edit HTML </li>
<li>Backup your template </li>
<li>Search for </head> </li>
<li>Just above it paste the jQuery code </li>
</ol>
<div>
 </div>
<blockquote class="tr_bq">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ (function($){ 	/* hoverIntent by Brian Cherne */ 	$.fn.hoverIntent = function(f,g) { 		// default configuration options 		var cfg = { 			sensitivity: 7, 			interval: 100, 			timeout: 0 		}; 		// override configuration options with user supplied object 		cfg = $.extend(cfg, g ? { over: f, out: g } : f ); 		// instantiate variables 		// cX, cY = current X and Y position of mouse, updated by mousemove event 		// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval 		var cX, cY, pX, pY; 		// A private function for getting mouse position 		var track = function(ev) { 			cX = ev.pageX; 			cY = ev.pageY; 		}; 		// A private function for comparing current and previous mouse position 		var compare = function(ev,ob) { 			ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); 			// compare mouse positions to see if they've crossed the threshold 			if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) { 				$(ob).unbind("mousemove",track); 				// set hoverIntent state to true (so mouseOut can be called) 				ob.hoverIntent_s = 1; 				return cfg.over.apply(ob,[ev]); 			} else { 				// set previous coordinates for next time 				pX = cX; pY = cY; 				// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs) 				ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval ); 			} 		}; 		// A private function for delaying the mouseOut function 		var delay = function(ev,ob) { 			ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); 			ob.hoverIntent_s = 0; 			return cfg.out.apply(ob,[ev]); 		}; 		// A private function for handling mouse 'hovering' 		var handleHover = function(e) { 			// next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut 			var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget; 			while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } } 			if ( p == this ) { return false; } 			// copy objects to be passed into t (required for event object to be passed in IE) 			var ev = jQuery.extend({},e); 			var ob = this; 			// cancel hoverIntent timer if it exists 			if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); } 			// else e.type == "onmouseover" 			if (e.type == "mouseover") { 				// set "previous" X and Y position based on initial entry point 				pX = ev.pageX; pY = ev.pageY; 				// update "current" X and Y position based on mousemove 				$(ob).bind("mousemove",track); 				// start polling interval (self-calling timeout) to compare mouse coordinates over time 				if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );} 			// else e.type == "onmouseout" 			} else { 				// unbind expensive mousemove event 				$(ob).unbind("mousemove",track); 				// if hoverIntent state is true, then call the mouseOut function after the specified delay 				if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );} 			} 		}; 		// bind the function to the two event listeners 		return this.mouseover(handleHover).mouseout(handleHover); 	}; 	})(jQuery); //]]> </script> <script type='text/javascript'> //<![CDATA[ /*  * Superfish v1.4.8 - jQuery menu widget  * Copyright (c) 2008 Joel Birch  *  * Dual licensed under the MIT and GPL licenses:  * 	http://www.opensource.org/licenses/mit-license.php  * 	http://www.gnu.org/licenses/gpl.html  *  * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt  */ ;(function($){ 	$.fn.superfish = function(op){ 		var sf = $.fn.superfish, 			c = sf.c, 			$arrow = $([' &#187;'].join('')), 			over = function(){ 				var $$ = $(this), menu = getMenu($$); 				clearTimeout(menu.sfTimer); 				$$.showSuperfishUl().siblings().hideSuperfishUl(); 			}, 			out = function(){ 				var $$ = $(this), menu = getMenu($$), o = sf.op; 				clearTimeout(menu.sfTimer); 				menu.sfTimer=setTimeout(function(){ 					o.retainPath=($.inArray($$[0],o.$path)>-1); 					$$.hideSuperfishUl(); 					if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);} 				},o.delay);				}, 			getMenu = function($menu){ 				var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0]; 				sf.op = sf.o[menu.serial]; 				return menu; 			}, 			addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); }; 					return this.each(function() { 			var s = this.serial = sf.o.length; 			var o = $.extend({},sf.defaults,op); 			o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){ 				$(this).addClass([o.hoverClass,c.bcClass].join(' ')) 					.filter('li:has(ul)').removeClass(o.pathClass); 			}); 			sf.o[s] = sf.op = o; 						$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() { 				if (o.autoArrows) addArrow( $('>a:first-child',this) ); 			}) 			.not('.'+c.bcClass) 				.hideSuperfishUl(); 						var $a = $('a',this); 			$a.each(function(i){ 				var $li = $a.eq(i).parents('li'); 				$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);}); 			}); 			o.onInit.call(this); 					}).each(function() { 			var menuClasses = [c.menuClass]; 			if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass); 			$(this).addClass(menuClasses.join(' ')); 		}); 	}; 	var sf = $.fn.superfish; 	sf.o = []; 	sf.op = {}; 	sf.IE7fix = function(){ 		var o = sf.op; 		if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined) 			this.toggleClass(sf.c.shadowClass+'-off'); 		}; 	sf.c = { 		bcClass     : 'sf-breadcrumb', 		menuClass   : 'sf-js-enabled', 		anchorClass : 'sf-with-ul', 		arrowClass  : 'sf-sub-indicator', 		shadowClass : 'sf-shadow' 	}; 	sf.defaults = { 		hoverClass	: 'sfHover', 		pathClass	: 'overideThisToUse', 		pathLevels	: 1, 		delay		: 800, 		animation	: {opacity:'show'}, 		speed		: 'normal', 		autoArrows	: true, 		dropShadows : true, 		disableHI	: false,		// true disables hoverIntent detection 		onInit		: function(){}, // callback functions 		onBeforeShow: function(){}, 		onShow		: function(){}, 		onHide		: function(){} 	}; 	$.fn.extend({ 		hideSuperfishUl : function(){ 			var o = sf.op, 				not = (o.retainPath===true) ? o.$path : ''; 			o.retainPath = false; 			var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass) 					.find('>ul').hide().css('visibility','hidden'); 			o.onHide.call($ul); 			return this; 		}, 		showSuperfishUl : function(){ 			var o = sf.op, 				sh = sf.c.shadowClass+'-off', 				$ul = this.addClass(o.hoverClass) 					.find('>ul:hidden').css('visibility','visible'); 			sf.IE7fix.call($ul); 			o.onBeforeShow.call($ul); 			$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); }); 			return this; 		} 	}); })(jQuery); //]]> </script> <script type='text/javascript'> //<![CDATA[ /*  * jQuery Cycle Plugin (with Transition Definitions)  * Examples and documentation at: http://jquery.malsup.com/cycle/  * Copyright (c) 2007-2010 M. Alsup  * Version: 2.88 (08-JUN-2010)  * Dual licensed under the MIT and GPL licenses.  * http://jquery.malsup.com/license.html  * Requires: jQuery v1.2.6 or later  */ (function($){var ver="2.88";if($.support==undefined){$.support={opacity:!($.browser.msie)};}function debug(s){if($.fn.cycle.debug){log(s);}}function log(){if(window.console&&window.console.log){window.console.log("[cycle] "+Array.prototype.join.call(arguments," "));}}$.fn.cycle=function(options,arg2){var o={s:this.selector,c:this.context};if(this.length===0&&options!="stop"){if(!$.isReady&&o.s){log("DOM not ready, queuing slideshow");$(function(){$(o.s,o.c).cycle(options,arg2);});return this;}log("terminating; zero elements found by selector"+($.isReady?"":" (DOM not ready)"));return this;}return this.each(function(){var opts=handleArguments(this,options,arg2);if(opts===false){return;}opts.updateActivePagerLink=opts.updateActivePagerLink||$.fn.cycle.updateActivePagerLink;if(this.cycleTimeout){clearTimeout(this.cycleTimeout);}this.cycleTimeout=this.cyclePause=0;var $cont=$(this);var $slides=opts.slideExpr?$(opts.slideExpr,this):$cont.children();var els=$slides.get();if(els.length<2){log("terminating; too few slides: "+els.length);return;}var opts2=buildOptions($cont,$slides,els,opts,o);if(opts2===false){return;}var startTime=opts2.continuous?10:getTimeout(els[opts2.currSlide],els[opts2.nextSlide],opts2,!opts2.rev);if(startTime){startTime+=(opts2.delay||0);if(startTime<10){startTime=10;}debug("first timeout: "+startTime);this.cycleTimeout=setTimeout(function(){go(els,opts2,0,(!opts2.rev&&!opts.backwards));},startTime);}});};function handleArguments(cont,options,arg2){if(cont.cycleStop==undefined){cont.cycleStop=0;}if(options===undefined||options===null){options={};}if(options.constructor==String){switch(options){case"destroy":case"stop":var opts=$(cont).data("cycle.opts");if(!opts){return false;}cont.cycleStop++;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);}cont.cycleTimeout=0;$(cont).removeData("cycle.opts");if(options=="destroy"){destroy(opts);}return false;case"toggle":cont.cyclePause=(cont.cyclePause===1)?0:1;checkInstantResume(cont.cyclePause,arg2,cont);return false;case"pause":cont.cyclePause=1;return false;case"resume":cont.cyclePause=0;checkInstantResume(false,arg2,cont);return false;case"prev":case"next":var opts=$(cont).data("cycle.opts");if(!opts){log('options not found, "prev/next" ignored');return false;}$.fn.cycle[options](opts);return false;default:options={fx:options};}return options;}else{if(options.constructor==Number){var num=options;options=$(cont).data("cycle.opts");if(!options){log("options not found, can not advance slide");return false;}if(num<0||num>=options.elements.length){log("invalid slide index: "+num);return false;}options.nextSlide=num;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}if(typeof arg2=="string"){options.oneTimeFx=arg2;}go(options.elements,options,1,num>=options.currSlide);return false;}}return options;function checkInstantResume(isPaused,arg2,cont){if(!isPaused&&arg2===true){var options=$(cont).data("cycle.opts");if(!options){log("options not found, can not resume");return false;}if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}go(options.elements,options,1,(!opts.rev&&!opts.backwards));}}}function removeFilter(el,opts){if(!$.support.opacity&&opts.cleartype&&el.style.filter){try{el.style.removeAttribute("filter");}catch(smother){}}}function destroy(opts){if(opts.next){$(opts.next).unbind(opts.prevNextEvent);}if(opts.prev){$(opts.prev).unbind(opts.prevNextEvent);}if(opts.pager||opts.pagerAnchorBuilder){$.each(opts.pagerAnchors||[],function(){this.unbind().remove();});}opts.pagerAnchors=null;if(opts.destroy){opts.destroy(opts);}}function buildOptions($cont,$slides,els,options,o){var opts=$.extend({},$.fn.cycle.defaults,options||{},$.metadata?$cont.metadata():$.meta?$cont.data():{});if(opts.autostop){opts.countdown=opts.autostopCount||els.length;}var cont=$cont[0];$cont.data("cycle.opts",opts);opts.$cont=$cont;opts.stopCount=cont.cycleStop;opts.elements=els;opts.before=opts.before?[opts.before]:[];opts.after=opts.after?[opts.after]:[];opts.after.unshift(function(){opts.busy=0;});if(!$.support.opacity&&opts.cleartype){opts.after.push(function(){removeFilter(this,opts);});}if(opts.continuous){opts.after.push(function(){go(els,opts,0,(!opts.rev&&!opts.backwards));});}saveOriginalOpts(opts);if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($slides);}if($cont.css("position")=="static"){$cont.css("position","relative");}if(opts.width){$cont.width(opts.width);}if(opts.height&&opts.height!="auto"){$cont.height(opts.height);}if(opts.startingSlide){opts.startingSlide=parseInt(opts.startingSlide);}else{if(opts.backwards){opts.startingSlide=els.length-1;}}if(opts.random){opts.randomMap=[];for(var i=0;i<els.length;i++){opts.randomMap.push(i);}opts.randomMap.sort(function(a,b){return Math.random()-0.5;});opts.randomIndex=1;opts.startingSlide=opts.randomMap[1];}else{if(opts.startingSlide>=els.length){opts.startingSlide=0;}}opts.currSlide=opts.startingSlide||0;var first=opts.startingSlide;$slides.css({position:"absolute",top:0,left:0}).hide().each(function(i){var z;if(opts.backwards){z=first?i<=first?els.length+(i-first):first-i:els.length-i;}else{z=first?i>=first?els.length-(i-first):first-i:els.length-i;}$(this).css("z-index",z);});$(els[first]).css("opacity",1).show();removeFilter(els[first],opts);if(opts.fit&&opts.width){$slides.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}var reshape=opts.containerResize&&!$cont.innerHeight();if(reshape){var maxw=0,maxh=0;for(var j=0;j<els.length;j++){var $e=$(els[j]),e=$e[0],w=$e.outerWidth(),h=$e.outerHeight();if(!w){w=e.offsetWidth||e.width||$e.attr("width");}if(!h){h=e.offsetHeight||e.height||$e.attr("height");}maxw=w>maxw?w:maxw;maxh=h>maxh?h:maxh;}if(maxw>0&&maxh>0){$cont.css({width:maxw+"px",height:maxh+"px"});}}if(opts.pause){$cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});}if(supportMultiTransitions(opts)===false){return false;}var requeue=false;options.requeueAttempts=options.requeueAttempts||0;$slides.each(function(){var $el=$(this);this.cycleH=(opts.fit&&opts.height)?opts.height:($el.height()||this.offsetHeight||this.height||$el.attr("height")||0);this.cycleW=(opts.fit&&opts.width)?opts.width:($el.width()||this.offsetWidth||this.width||$el.attr("width")||0);if($el.is("img")){var loadingIE=($.browser.msie&&this.cycleW==28&&this.cycleH==30&&!this.complete);var loadingFF=($.browser.mozilla&&this.cycleW==34&&this.cycleH==19&&!this.complete);var loadingOp=($.browser.opera&&((this.cycleW==42&&this.cycleH==19)||(this.cycleW==37&&this.cycleH==17))&&!this.complete);var loadingOther=(this.cycleH==0&&this.cycleW==0&&!this.complete);if(loadingIE||loadingFF||loadingOp||loadingOther){if(o.s&&opts.requeueOnImageNotLoaded&&++options.requeueAttempts<100){log(options.requeueAttempts," - img slide not loaded, requeuing slideshow: ",this.src,this.cycleW,this.cycleH);setTimeout(function(){$(o.s,o.c).cycle(options);},opts.requeueTimeout);requeue=true;return false;}else{log("could not determine size of image: "+this.src,this.cycleW,this.cycleH);}}}return true;});if(requeue){return false;}opts.cssBefore=opts.cssBefore||{};opts.animIn=opts.animIn||{};opts.animOut=opts.animOut||{};$slides.not(":eq("+first+")").css(opts.cssBefore);if(opts.cssFirst){$($slides[first]).css(opts.cssFirst);}if(opts.timeout){opts.timeout=parseInt(opts.timeout);if(opts.speed.constructor==String){opts.speed=$.fx.speeds[opts.speed]||parseInt(opts.speed);}if(!opts.sync){opts.speed=opts.speed/2;}var buffer=opts.fx=="shuffle"?500:250;while((opts.timeout-opts.speed)<buffer){opts.timeout+=opts.speed;}}if(opts.easing){opts.easeIn=opts.easeOut=opts.easing;}if(!opts.speedIn){opts.speedIn=opts.speed;}if(!opts.speedOut){opts.speedOut=opts.speed;}opts.slideCount=els.length;opts.currSlide=opts.lastSlide=first;if(opts.random){if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.backwards){opts.nextSlide=opts.startingSlide==0?(els.length-1):opts.startingSlide-1;}else{opts.nextSlide=opts.startingSlide>=(els.length-1)?0:opts.startingSlide+1;}}if(!opts.multiFx){var init=$.fn.cycle.transitions[opts.fx];if($.isFunction(init)){init($cont,$slides,opts);}else{if(opts.fx!="custom"&&!opts.multiFx){log("unknown transition: "+opts.fx,"; slideshow terminating");return false;}}}var e0=$slides[first];if(opts.before.length){opts.before[0].apply(e0,[e0,e0,opts,true]);}if(opts.after.length>1){opts.after[1].apply(e0,[e0,e0,opts,true]);}if(opts.next){$(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1);});}if(opts.prev){$(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1);});}if(opts.pager||opts.pagerAnchorBuilder){buildPager(els,opts);}exposeAddSlide(opts,els);return opts;}function saveOriginalOpts(opts){opts.original={before:[],after:[]};opts.original.cssBefore=$.extend({},opts.cssBefore);opts.original.cssAfter=$.extend({},opts.cssAfter);opts.original.animIn=$.extend({},opts.animIn);opts.original.animOut=$.extend({},opts.animOut);$.each(opts.before,function(){opts.original.before.push(this);});$.each(opts.after,function(){opts.original.after.push(this);});}function supportMultiTransitions(opts){var i,tx,txs=$.fn.cycle.transitions;if(opts.fx.indexOf(",")>0){opts.multiFx=true;opts.fxs=opts.fx.replace(/\s*/g,"").split(",");for(i=0;i<opts.fxs.length;i++){var fx=opts.fxs[i];tx=txs[fx];if(!tx||!txs.hasOwnProperty(fx)||!$.isFunction(tx)){log("discarding unknown transition: ",fx);opts.fxs.splice(i,1);i--;}}if(!opts.fxs.length){log("No valid transitions named; slideshow terminating.");return false;}}else{if(opts.fx=="all"){opts.multiFx=true;opts.fxs=[];for(p in txs){tx=txs[p];if(txs.hasOwnProperty(p)&&$.isFunction(tx)){opts.fxs.push(p);}}}}if(opts.multiFx&&opts.randomizeEffects){var r1=Math.floor(Math.random()*20)+30;for(i=0;i<r1;i++){var r2=Math.floor(Math.random()*opts.fxs.length);opts.fxs.push(opts.fxs.splice(r2,1)[0]);}debug("randomized fx sequence: ",opts.fxs);}return true;}function exposeAddSlide(opts,els){opts.addSlide=function(newSlide,prepend){var $s=$(newSlide),s=$s[0];if(!opts.autostopCount){opts.countdown++;}els[prepend?"unshift":"push"](s);if(opts.els){opts.els[prepend?"unshift":"push"](s);}opts.slideCount=els.length;$s.css("position","absolute");$s[prepend?"prependTo":"appendTo"](opts.$cont);if(prepend){opts.currSlide++;opts.nextSlide++;}if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($s);}if(opts.fit&&opts.width){$s.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}s.cycleH=(opts.fit&&opts.height)?opts.height:$s.height();s.cycleW=(opts.fit&&opts.width)?opts.width:$s.width();$s.css(opts.cssBefore);if(opts.pager||opts.pagerAnchorBuilder){$.fn.cycle.createPagerAnchor(els.length-1,s,$(opts.pager),els,opts);}if($.isFunction(opts.onAddSlide)){opts.onAddSlide($s);}else{$s.hide();}};}$.fn.cycle.resetState=function(opts,fx){fx=fx||opts.fx;opts.before=[];opts.after=[];opts.cssBefore=$.extend({},opts.original.cssBefore);opts.cssAfter=$.extend({},opts.original.cssAfter);opts.animIn=$.extend({},opts.original.animIn);opts.animOut=$.extend({},opts.original.animOut);opts.fxFn=null;$.each(opts.original.before,function(){opts.before.push(this);});$.each(opts.original.after,function(){opts.after.push(this);});var init=$.fn.cycle.transitions[fx];if($.isFunction(init)){init(opts.$cont,$(opts.elements),opts);}};function go(els,opts,manual,fwd){if(manual&&opts.busy&&opts.manualTrump){debug("manualTrump in go(), stopping active transition");$(els).stop(true,true);opts.busy=false;}if(opts.busy){debug("transition active, ignoring new tx request");return;}var p=opts.$cont[0],curr=els[opts.currSlide],next=els[opts.nextSlide];if(p.cycleStop!=opts.stopCount||p.cycleTimeout===0&&!manual){return;}if(!manual&&!p.cyclePause&&!opts.bounce&&((opts.autostop&&(--opts.countdown<=0))||(opts.nowrap&&!opts.random&&opts.nextSlide<opts.currSlide))){if(opts.end){opts.end(opts);}return;}var changed=false;if((manual||!p.cyclePause)&&(opts.nextSlide!=opts.currSlide)){changed=true;var fx=opts.fx;curr.cycleH=curr.cycleH||$(curr).height();curr.cycleW=curr.cycleW||$(curr).width();next.cycleH=next.cycleH||$(next).height();next.cycleW=next.cycleW||$(next).width();if(opts.multiFx){if(opts.lastFx==undefined||++opts.lastFx>=opts.fxs.length){opts.lastFx=0;}fx=opts.fxs[opts.lastFx];opts.currFx=fx;}if(opts.oneTimeFx){fx=opts.oneTimeFx;opts.oneTimeFx=null;}$.fn.cycle.resetState(opts,fx);if(opts.before.length){$.each(opts.before,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});}var after=function(){$.each(opts.after,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});};debug("tx firing; currSlide: "+opts.currSlide+"; nextSlide: "+opts.nextSlide);opts.busy=1;if(opts.fxFn){opts.fxFn(curr,next,opts,after,fwd,manual&&opts.fastOnEvent);}else{if($.isFunction($.fn.cycle[opts.fx])){$.fn.cycle[opts.fx](curr,next,opts,after,fwd,manual&&opts.fastOnEvent);}else{$.fn.cycle.custom(curr,next,opts,after,fwd,manual&&opts.fastOnEvent);}}}if(changed||opts.nextSlide==opts.currSlide){opts.lastSlide=opts.currSlide;if(opts.random){opts.currSlide=opts.nextSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];if(opts.nextSlide==opts.currSlide){opts.nextSlide=(opts.currSlide==opts.slideCount-1)?0:opts.currSlide+1;}}else{if(opts.backwards){var roll=(opts.nextSlide-1)<0;if(roll&&opts.bounce){opts.backwards=!opts.backwards;opts.nextSlide=1;opts.currSlide=0;}else{opts.nextSlide=roll?(els.length-1):opts.nextSlide-1;opts.currSlide=roll?0:opts.nextSlide+1;}}else{var roll=(opts.nextSlide+1)==els.length;if(roll&&opts.bounce){opts.backwards=!opts.backwards;opts.nextSlide=els.length-2;opts.currSlide=els.length-1;}else{opts.nextSlide=roll?0:opts.nextSlide+1;opts.currSlide=roll?els.length-1:opts.nextSlide-1;}}}}if(changed&&opts.pager){opts.updateActivePagerLink(opts.pager,opts.currSlide,opts.activePagerClass);}var ms=0;if(opts.timeout&&!opts.continuous){ms=getTimeout(els[opts.currSlide],els[opts.nextSlide],opts,fwd);}else{if(opts.continuous&&p.cyclePause){ms=10;}}if(ms>0){p.cycleTimeout=setTimeout(function(){go(els,opts,0,(!opts.rev&&!opts.backwards));},ms);}}$.fn.cycle.updateActivePagerLink=function(pager,currSlide,clsName){$(pager).each(function(){$(this).children().removeClass(clsName).eq(currSlide).addClass(clsName);});};function getTimeout(curr,next,opts,fwd){if(opts.timeoutFn){var t=opts.timeoutFn.call(curr,curr,next,opts,fwd);while((t-opts.speed)<250){t+=opts.speed;}debug("calculated timeout: "+t+"; speed: "+opts.speed);if(t!==false){return t;}}return opts.timeout;}$.fn.cycle.next=function(opts){advance(opts,opts.rev?-1:1);};$.fn.cycle.prev=function(opts){advance(opts,opts.rev?1:-1);};function advance(opts,val){var els=opts.elements;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if(opts.random&&val<0){opts.randomIndex--;if(--opts.randomIndex==-2){opts.randomIndex=els.length-2;}else{if(opts.randomIndex==-1){opts.randomIndex=els.length-1;}}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.random){opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.currSlide+val;if(opts.nextSlide<0){if(opts.nowrap){return false;}opts.nextSlide=els.length-1;}else{if(opts.nextSlide>=els.length){if(opts.nowrap){return false;}opts.nextSlide=0;}}}}var cb=opts.onPrevNextEvent||opts.prevNextClick;if($.isFunction(cb)){cb(val>0,opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,val>=0);return false;}function buildPager(els,opts){var $p=$(opts.pager);$.each(els,function(i,o){$.fn.cycle.createPagerAnchor(i,o,$p,els,opts);});opts.updateActivePagerLink(opts.pager,opts.startingSlide,opts.activePagerClass);}$.fn.cycle.createPagerAnchor=function(i,el,$p,els,opts){var a;if($.isFunction(opts.pagerAnchorBuilder)){a=opts.pagerAnchorBuilder(i,el);debug("pagerAnchorBuilder("+i+", el) returned: "+a);}else{a='<a href="#">'+(i+1)+"</a>";}if(!a){return;}var $a=$(a);if($a.parents("body").length===0){var arr=[];if($p.length>1){$p.each(function(){var $clone=$a.clone(true);$(this).append($clone);arr.push($clone[0]);});$a=$(arr);}else{$a.appendTo($p);}}opts.pagerAnchors=opts.pagerAnchors||[];opts.pagerAnchors.push($a);$a.bind(opts.pagerEvent,function(e){e.preventDefault();opts.nextSlide=i;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}var cb=opts.onPagerEvent||opts.pagerClick;if($.isFunction(cb)){cb(opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,opts.currSlide<i);});if(!/^click/.test(opts.pagerEvent)&&!opts.allowPagerClickBubble){$a.bind("click.cycle",function(){return false;});}if(opts.pauseOnPagerHover){$a.hover(function(){opts.$cont[0].cyclePause++;},function(){opts.$cont[0].cyclePause--;});}};$.fn.cycle.hopsFromLast=function(opts,fwd){var hops,l=opts.lastSlide,c=opts.currSlide;if(fwd){hops=c>l?c-l:opts.slideCount-l;}else{hops=c<l?l-c:l+opts.slideCount-c;}return hops;};function clearTypeFix($slides){debug("applying clearType background-color hack");function hex(s){s=parseInt(s).toString(16);return s.length<2?"0"+s:s;}function getBg(e){for(;e&&e.nodeName.toLowerCase()!="html";e=e.parentNode){var v=$.css(e,"background-color");if(v.indexOf("rgb")>=0){var rgb=v.match(/\d+/g);return"#"+hex(rgb[0])+hex(rgb[1])+hex(rgb[2]);}if(v&&v!="transparent"){return v;}}return"#ffffff";}$slides.each(function(){$(this).css("background-color",getBg(this));});}$.fn.cycle.commonReset=function(curr,next,opts,w,h,rev){$(opts.elements).not(curr).hide();opts.cssBefore.opacity=1;opts.cssBefore.display="block";if(w!==false&&next.cycleW>0){opts.cssBefore.width=next.cycleW;}if(h!==false&&next.cycleH>0){opts.cssBefore.height=next.cycleH;}opts.cssAfter=opts.cssAfter||{};opts.cssAfter.display="none";$(curr).css("zIndex",opts.slideCount+(rev===true?1:0));$(next).css("zIndex",opts.slideCount+(rev===true?0:1));};$.fn.cycle.custom=function(curr,next,opts,cb,fwd,speedOverride){var $l=$(curr),$n=$(next);var speedIn=opts.speedIn,speedOut=opts.speedOut,easeIn=opts.easeIn,easeOut=opts.easeOut;$n.css(opts.cssBefore);if(speedOverride){if(typeof speedOverride=="number"){speedIn=speedOut=speedOverride;}else{speedIn=speedOut=1;}easeIn=easeOut=null;}var fn=function(){$n.animate(opts.animIn,speedIn,easeIn,cb);};$l.animate(opts.animOut,speedOut,easeOut,function(){if(opts.cssAfter){$l.css(opts.cssAfter);}if(!opts.sync){fn();}});if(opts.sync){fn();}};$.fn.cycle.transitions={fade:function($cont,$slides,opts){$slides.not(":eq("+opts.currSlide+")").css("opacity",0);opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.opacity=0;});opts.animIn={opacity:1};opts.animOut={opacity:0};opts.cssBefore={top:0,left:0};}};$.fn.cycle.ver=function(){return ver;};$.fn.cycle.defaults={fx:"fade",timeout:4000,timeoutFn:null,continuous:0,speed:1000,speedIn:null,speedOut:null,next:null,prev:null,onPrevNextEvent:null,prevNextEvent:"click.cycle",pager:null,onPagerEvent:null,pagerEvent:"click.cycle",allowPagerClickBubble:false,pagerAnchorBuilder:null,before:null,after:null,end:null,easing:null,easeIn:null,easeOut:null,shuffle:null,animIn:null,animOut:null,cssBefore:null,cssAfter:null,fxFn:null,height:"auto",startingSlide:0,sync:1,random:0,fit:0,containerResize:1,pause:0,pauseOnPagerHover:0,autostop:0,autostopCount:0,delay:0,slideExpr:null,cleartype:!$.support.opacity,cleartypeNoBg:false,nowrap:0,fastOnEvent:0,randomizeEffects:1,rev:0,manualTrump:true,requeueOnImageNotLoaded:true,requeueTimeout:250,activePagerClass:"activeSlide",updateActivePagerLink:null,backwards:false};})(jQuery); /*  * jQuery Cycle Plugin Transition Definitions  * This script is a plugin for the jQuery Cycle Plugin  * Examples and documentation at: http://malsup.com/jquery/cycle/  * Copyright (c) 2007-2010 M. Alsup  * Version:	 2.72  * Dual licensed under the MIT and GPL licenses:  * http://www.opensource.org/licenses/mit-license.php  * http://www.gnu.org/licenses/gpl.html  */ (function($){$.fn.cycle.transitions.none=function($cont,$slides,opts){opts.fxFn=function(curr,next,opts,after){$(next).show();$(curr).hide();after();};};$.fn.cycle.transitions.scrollUp=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssBefore={top:h,left:0};opts.cssFirst={top:0};opts.animIn={top:0};opts.animOut={top:-h};};$.fn.cycle.transitions.scrollDown=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssFirst={top:0};opts.cssBefore={top:-h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.scrollLeft=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:0-w};};$.fn.cycle.transitions.scrollRight=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:-w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.scrollHorz=function($cont,$slides,opts){$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.left=fwd?(next.cycleW-1):(1-next.cycleW);opts.animOut.left=fwd?-curr.cycleW:curr.cycleW;});opts.cssFirst={left:0};opts.cssBefore={top:0};opts.animIn={left:0};opts.animOut={top:0};};$.fn.cycle.transitions.scrollVert=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.top=fwd?(1-next.cycleH):(next.cycleH-1);opts.animOut.top=fwd?curr.cycleH:-curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0};opts.animIn={top:0};opts.animOut={left:0};};$.fn.cycle.transitions.slideX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;});opts.cssBefore={left:0,top:0,width:0};opts.animIn={width:"show"};opts.animOut={width:0};};$.fn.cycle.transitions.slideY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;});opts.cssBefore={left:0,top:0,height:0};opts.animIn={height:"show"};opts.animOut={height:0};};$.fn.cycle.transitions.shuffle=function($cont,$slides,opts){var i,w=$cont.css("overflow","visible").width();$slides.css({left:0,top:0});opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);});if(!opts.speedAdjusted){opts.speed=opts.speed/2;opts.speedAdjusted=true;}opts.random=0;opts.shuffle=opts.shuffle||{left:-w,top:15};opts.els=[];for(i=0;i<$slides.length;i++){opts.els.push($slides[i]);}for(i=0;i<opts.currSlide;i++){opts.els.push(opts.els.shift());}opts.fxFn=function(curr,next,opts,cb,fwd){var $el=fwd?$(curr):$(next);$(next).css(opts.cssBefore);var count=opts.slideCount;$el.animate(opts.shuffle,opts.speedIn,opts.easeIn,function(){var hops=$.fn.cycle.hopsFromLast(opts,fwd);for(var k=0;k<hops;k++){fwd?opts.els.push(opts.els.shift()):opts.els.unshift(opts.els.pop());}if(fwd){for(var i=0,len=opts.els.length;i<len;i++){$(opts.els[i]).css("z-index",len-i+count);}}else{var z=$(curr).css("z-index");$el.css("z-index",parseInt(z)+1+count);}$el.animate({left:0,top:0},opts.speedOut,opts.easeOut,function(){$(fwd?this:curr).hide();if(cb){cb();}});});};opts.cssBefore={display:"block",opacity:1,top:0,left:0};};$.fn.cycle.transitions.turnUp=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=next.cycleH;opts.animIn.height=next.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,height:0};opts.animIn={top:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnDown=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,top:0,height:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnLeft=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=next.cycleW;opts.animIn.width=next.cycleW;});opts.cssBefore={top:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.turnRight=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={top:0,left:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.zoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false,true);opts.cssBefore.top=next.cycleH/2;opts.cssBefore.left=next.cycleW/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};opts.animOut={width:0,height:0,top:curr.cycleH/2,left:curr.cycleW/2};});opts.cssFirst={top:0,left:0};opts.cssBefore={width:0,height:0};};$.fn.cycle.transitions.fadeZoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false);opts.cssBefore.left=next.cycleW/2;opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};});opts.cssBefore={width:0,height:0};opts.animOut={opacity:0};};$.fn.cycle.transitions.blindX=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.blindY=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.blindZ=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();var w=$cont.width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:w};opts.animIn={top:0,left:0};opts.animOut={top:h,left:w};};$.fn.cycle.transitions.growX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=this.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:0};});opts.cssBefore={width:0,top:0};};$.fn.cycle.transitions.growY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=this.cycleH/2;opts.animIn={top:0,height:this.cycleH};opts.animOut={top:0};});opts.cssBefore={height:0,left:0};};$.fn.cycle.transitions.curtainX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true,true);opts.cssBefore.left=next.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:curr.cycleW/2,width:0};});opts.cssBefore={top:0,width:0};};$.fn.cycle.transitions.curtainY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false,true);opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,height:next.cycleH};opts.animOut={top:curr.cycleH/2,height:0};});opts.cssBefore={left:0,height:0};};$.fn.cycle.transitions.cover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);if(d=="right"){opts.cssBefore.left=-w;}else{if(d=="up"){opts.cssBefore.top=h;}else{if(d=="down"){opts.cssBefore.top=-h;}else{opts.cssBefore.left=w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.uncover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(d=="right"){opts.animOut.left=w;}else{if(d=="up"){opts.animOut.top=-h;}else{if(d=="down"){opts.animOut.top=h;}else{opts.animOut.left=-w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.toss=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(!opts.animOut.left&&!opts.animOut.top){opts.animOut={left:w*2,top:-h/2,opacity:0};}else{opts.animOut.opacity=0;}});opts.cssBefore={left:0,top:0};opts.animIn={left:0};};$.fn.cycle.transitions.wipe=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.cssBefore=opts.cssBefore||{};var clip;if(opts.clip){if(/l2r/.test(opts.clip)){clip="rect(0px 0px "+h+"px 0px)";}else{if(/r2l/.test(opts.clip)){clip="rect(0px "+w+"px "+h+"px "+w+"px)";}else{if(/t2b/.test(opts.clip)){clip="rect(0px "+w+"px 0px 0px)";}else{if(/b2t/.test(opts.clip)){clip="rect("+h+"px "+w+"px "+h+"px 0px)";}else{if(/zoom/.test(opts.clip)){var top=parseInt(h/2);var left=parseInt(w/2);clip="rect("+top+"px "+left+"px "+top+"px "+left+"px)";}}}}}}opts.cssBefore.clip=opts.cssBefore.clip||clip||"rect(0px 0px 0px 0px)";var d=opts.cssBefore.clip.match(/(\d+)/g);var t=parseInt(d[0]),r=parseInt(d[1]),b=parseInt(d[2]),l=parseInt(d[3]);opts.before.push(function(curr,next,opts){if(curr==next){return;}var $curr=$(curr),$next=$(next);$.fn.cycle.commonReset(curr,next,opts,true,true,false);opts.cssAfter.display="block";var step=1,count=parseInt((opts.speedIn/13))-1;(function f(){var tt=t?t-parseInt(step*(t/count)):0;var ll=l?l-parseInt(step*(l/count)):0;var bb=b<h?b+parseInt(step*((h-b)/count||1)):h;var rr=r<w?r+parseInt(step*((w-r)/count||1)):w;$next.css({clip:"rect("+tt+"px "+rr+"px "+bb+"px "+ll+"px)"});(step++<=count)?setTimeout(f,13):$curr.css("display","none");})();});opts.cssBefore={display:"block",opacity:1,top:0,left:0};opts.animIn={left:0};opts.animOut={left:0};};})(jQuery); //]]> </script> <script type='text/javascript'> /* <![CDATA[ */ jQuery.noConflict(); jQuery(function(){ 	jQuery('ul.menu-primary').superfish({ 	animation: {opacity:'show'}, autoArrows:  true,                 dropShadows: false,                 speed: 200,                 delay: 800                 });             }); jQuery(function(){ 	jQuery('ul.menu-secondary').superfish({ 	animation: {opacity:'show'}, autoArrows:  true,                 dropShadows: false,                 speed: 200,                 delay: 800                 });             }); jQuery(document).ready(function() { 	jQuery('.fp-slides').cycle({ 		fx: 'fade', 		timeout: 4000, 		delay: 0, 		speed: 1000, 		next: '.fp-next', 		prev: '.fp-prev', 		pager: '.fp-pager', 		continuous: 0, 		sync: 1, 		pause: 1, 		pauseOnPagerHover: 1, 		cleartype: true, 		cleartypeNoBg: true 	});  }); /* ]]> */ </script></blockquote>
<ol>
<li>Then search for ]]></b:skin> </li>
</ol>
<blockquote class="tr_bq">
<ol>
<li>Just above it paste the CSS code below, </li>
</ol>
/*-------------------- Bloggerdaddy jQuery Image Slider -------------*/ 
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;} .fp-slides{} .fp-post{padding:13px;} .fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} .fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} .fp-title{color:#787878;font:bold
 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; 
text-transform:uppercase;} .fp-title a{color:#000;text-decoration:none;} .fp-title a:hover{color:#0080fF;text-decoration:none;} .fp-label{color:#504D4D;margin:15px
 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px 
Arial,Helvetica,Sans-serif;} .fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;} .fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;} .fp-nav{width:590px;padding:0px 10px;height:14px;} .fp-pager
 
a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA20DR2lueY_CHlj59zGr-EeTkPM5LBC5sVqucmpwy6PYQCQhyFC68WpJcVwTb9DlN3CWhFn45bUxfi1iyAVQvyK3Kge60u4w9U8gijTC7zoN6KI1rYfs68D9HdZWcBd9p15nWksJaO_w/s1600/featured-pager.png);cursor:pointer;margin:3px
 6px 0 
0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0
 0;} .fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;} .fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOitciVm8GDfmGNgfNIP7kXyFte0nlqugqEfIP8sd5pHCfJ8H6ehvJXVPyXOJgJSD1G4lyKhvshsj6OJ0OkCRHY4a4SxyVxKJUxI57tVzy-W9Jpt1zKSHBcEHEfVZuPlG-zmjMJhheDHg/s1600/featured-prev.png)
 top left no-repeat;} .fp-prev:hover{opacity:1;} .fp-prev:active{opacity:0.7;} .fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXm16a5Kjm-1Bdkg22EYGZ8w21YaNWJIafCa5FFTQuRVGuClXbW3M22zf9BW4AJoFOj0qsEMUsP3CCGYFxwpEGGy4xSpY4nUL52ycixyORQl9M6AebohcO8eMZanHZultrRrEloWHRmZ4/s1600/featured-next.png;)
 top left no-repeat} .fp-next:hover{opacity:1;} .fp-next:active{opacity:0.7;}</blockquote>
   7.   Now Search for this, 
<blockquote class="tr_bq">
<div id='main-wrapper'></blockquote>
 Hint: This code is located near <div id='content-wrapper'>

PS: In this part most of you will face problems as the coding 
for each template differ. If you could not find this code then do not 
panic and simply post your Blog URL in the comments.<div>
 
   8.   and just below it add the HTML code below,</div>
<blockquote>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div class='featuredposts clearfix'> 
<div class='fp-slides'> 
<div class='fp-post'> <div class='fp-thumbnail'><a href='ADD POST URL-1 HERE'><img src='ADD IMAGE-1 LINK HERE'/></a></div><h3 class='fp-title'><a href='ADD POST URL-1 HERE'>WRITE POST TITLE HERE...</a></h3> WRITE POST DESCRIPTION HERE... </div> 
<div class='fp-post'> <div class='fp-thumbnail'><a href='ADD POST URL-2 HERE'><img src='ADD IMAGE-2 LINK HERE'/></a></div> <h3 class='fp-title'><a href='ADD POST URL-2 HERE'>WRITE POST TITLE HERE...</a></h3> WRITE POST DESCRIPTION HERE... </div> 
<div class='fp-post'> <div class='fp-thumbnail'><a href='ADD POST URL-3 HERE'><img src='ADD IMAGE-3 LINK HERE'/></a></div> <h3 class='fp-title'><a href='ADD POST URL-3 HERE'>WRITE POST TITLE HERE...</a></h3> WRITE POST DESCRIPTION HERE... </div> 
<div class='fp-post'> <div class='fp-thumbnail'><a href='ADD POST URL-4 HERE'><img src='ADD IMAGE-4 LINK HERE'/></a></div> <h3 class='fp-title'><a href='ADD POST URL-4 HERE'>WRITE POST TITLE HERE...</a></h3> WRITE POST DESCRIPTION HERE... </div> 
<div class='fp-post'> <div class='fp-thumbnail'><a href='ADD POST URL-5 HERE'><img src='ADD IMAGE-5 LINK HERE'/></a></div> <h3 class='fp-title'><a href='ADD POST URL-5 HERE'>WRITE POST TITLE HERE...</a></h3> WRITE POST DESCRIPTION HERE... </div> 
</div>          
<div class='fp-nav clearfix'>                <a class='fp-next' href='#fp-next'/> <a class='fp-prev' href='#fp-prev'/> </div>          </div> </b:if></b:if></blockquote>
Make these changes: 
<ul>
<li>Replace ADD POST URL-1, 2, 3, 4, 5 HERE with the URL of your 
post pages one by one. These URLs will be added twice for each slide. 
Once for the image and second time for the Post title. </li>
<li>Replace ADD IMAGE-5 LINK HERE with the Image link of the Featured post. By default all images have width:580px; height:266px;
 You can edit the image size by editing the width and height in the CSS 
code shared in step#6. Make sure all your images must have same size </li>
<li>Replace WRITE POST TITLE HERE... with the title of your Post Page </li>
<li>Replace WRITE POST DESCRIPTION HERE
 with the Post Page description. You can write the first few lines of 
your post here and the readers can read the full post by clicking the 
title. </li>
<li>To Change the Overall size of the slider container then edit in step#6 the following two codes -> width:608px and height:400px </li>
</ul>
   9.   Save your template and you are done! Visit your blog and say Bingo! :> </div>

Widgets jQuery Image Slider For Blogger - V3

As per your requests we are glad to present yet another stunning version of Image slideshow Widget for BlogSpot blogs. This widget ...