Blogger Widget - Lofsider News Slide Show

This Widget is very interesting and easy to install, please follows below instruction

1. Go to Bloger

2.Go to Design

3.Add Popular Post & Java Script/Html as illustrated on below

4.Save Widget and Enjoy

5.Click Live Dimo

 Copy Below Code


<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent{
    position:relative;
    overflow:hidden;
    border:#F4F4F4 solid 1px;
    width:892px;
    height:300px;
}
.lof-slidecontent .preload{
    height:100%;
    width:100%;
    background:#FFF;
    position:absolute;
    top:0;
    left:0;
    z-index:100000;
    color:#FFF;
    text-align:center
}
.lof-slidecontent .preload div{
    height:100%;
    width:100%;

    background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
    position:relative;
    height:100%;
    width:600px;
    z-index:3px;
    overflow:hidden;
}

/*******************************************************/
.lof-main-item-desc{
    z-index:100px;
    position:absolute;
    top:150px;
    left:50px;
    width:400px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

    /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
    color:#FFF;
    margin:0 8px;
    padding:8px 0
}
.lof-main-item-desc h3 a{
    color:#FFF;
    margin:0;
    font-size:140%;
    padding:20px 8px 2px;
    font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
.lof-main-item-desc h3 a:hover{
    color:#FF6;
    text-decoration:underline;
}

/* main flash */
ul.lof-main-wapper{
    /* margin-right:auto; */
    overflow:hidden;
    background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
    padding:0px;
    margin:0  !important;
    height:300px;
    width:600px;
    position:absolute;
    overflow:hidden;
}

ul.lof-main-wapper li{
    overflow:hidden;
    padding:0px  !important;
    margin:0px;
    height:100%;
    width:600px;
    float:left;
}
.lof-opacity  li{
    position:absolute;
    top:0;
    left:0;
    float:inherit;
}
ul.lof-main-wapper li img{
    padding:0px !important;
    width:600px  !important;
    height:300px  !important;
}

li-desc{
    z-index:100px;
    position:absolute;
    top:150px;
    left:50px;
    width:400px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

    /* filter:0.7(opacity:60) */
}
li-desc p{
    color:#FFF;
    margin:0 8px;
    padding:8px 0
}
li-desc h3 a{
    color:#FFF;
    margin:0;
    font-size:140%;
    padding:20px 8px 2px;
    font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
    color:#FF6;
    text-decoration:underline;
}

/* item navigator */
ul.lof-navigator{
    top:0  ;
    padding:0  ;
    margin:0 ;
    position:absolute ;
    width:100% ;
    background:none !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
ul.lof-navigator li{
    cursor:hand !important;
    cursor:pointer !important;
    list-style:none !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
}
.lof-navigator-outer{
    position:absolute !important;
    right:0 !important;
    top:00px !important;
    z-index:100 !important;
    height:300px !important;
    width:310px !important;
    overflow:hidden !important;
    color:#FFF
}
.lof-navigator li.active{
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-bg.png) no-repeat scroll left center;
    color:#FFF
}
.lof-navigator li:hover{

}

.lof-navigator li h3{
    color:#FFF;
    font-size:120%;
    padding:15px 0 0 !important;
    margin:0;

}
.lof-navigator li div{
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);
    color:#FFF;
    height:100%;
    position:relative;
    margin-left:15px;
    padding-left:15px;
    border-top:1px solid #E1E1E1;
}

.lof-navigator li.active div{
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/grad-bg.gif);
    color:#FFF;
}
.lof-navigator li img{
    height:60px;
    width:60px;
    margin:15px 15px 10px 0px;
    float:left;
    padding:3px;
    border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
    border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
    color:#FFF;

.PopularPosts .item-title{0 !important; }
}
.PopularPosts .widget-item-control {display:none}

</style>

<script type="text/javascript" src="https://sites.google.com/site/fashiondegree/recent-post-thumbnail/Lofsider.js?revision=1"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofslider.js"></script>
<script type="text/javascript">
 $(document).ready( function(){
        $('#lofslidecontent45').lofJSidernews( { interval:2000,
                                                 easing:'easeInOutQuad',
                                                duration:1200,
                                                auto:true } );
    });

</script>
<style>

    ul.lof-main-wapper li {
        position:relative;
    }
</style>

Blogger Widget - Carousel Slide using with Popular post Widget

This is very interesting widget which tag with popular post, it is very simple to install, follow below steps to install widget easily

• Login in to Blogger Dashboard and go to  Design – Page Element
•  Then Click “Add Gadget” and select “Popular Posts”(If you already have this gadget skip this step, but drag it to correct position if not )
• After that select Gadget “Add Gadget” again and select “HTML/Javascript”
• Copy all below content of Java Script Code and paste it to "HTML/Javascript"  Gadget
• See below Gadget placement for easy guide

 Here below Java Script Code

<style>

#slider ol,#slider ul,#slider li
 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}

.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:150px;
  height:120px;
}

ol, ul {
    list-style: none;
    }

.wrapper {
    width: 720px;
    margin: 0 auto;
    position:relative;
}

.clear {
    clear: both;
    }

.display-none {
    display:none;
    }

#slider {
    position: relative;
    top: -2px;
    z-index: 1;
    }

#slider .prev {
    position: absolute;
    width: 21px;
    height: 21px;
    display: block;
    background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
    top: 150px;
    left: -51px;
    }

#slider .next {
    position: absolute;
    width: 21px;
    height: 21px;
    display: block;
    background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
    top: 150px;
    right: -51px;
    }

#slider #slider-wrapper {
    width: 720px;
    height: 300px;
    padding-top: 40px;
    overflow: hidden;
    z-index: 999;
    position: relative;
    }

#slider #slider-inner {
    width:9780px;
    height:300px;
    position:absolute;
    }

#slider .article {
    width: 150px;
    height: 300px;
    float: left;
    margin-right: 30px;
    }

#slider .article img {
    margin-bottom: 25px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    }

#slider .article h2 {
    margin-bottom: 15px;
    line-height: 18px;
    }

#slider .article h2 a {
    font-size: 18px;
    color: #404040;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff;
    line-height: 23px;
    }

#slider .article .meta-comments a {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #fff;
    }

#slider .article .item-snippet {
    margin-left: 15px;
    }

#slider .widget-item-control { display: none}

</style>
<script type="text/javascript" src="https://sites.google.com/site/fashiondegree/recent-post-thumbnail/slide.js?revision=1"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script>

Click for Live Dimo

Random Blog Post widget with dropdown effect

1. Log on Blogger

2.Go to Design

3.Select Add Gadget

 
4.Click Add "Java Script/Html"

5.Copy below Code And Save


<script src="https://sites.google.com/site/fashiondegree/recent-post-thumbnail/dropdown.js?revision=1" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:500px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#FFFFFF
}

#spylist li a {
text-decoration:none;
color:#ffffff;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

    <script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[5] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 500;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 100;

thumbheight = 120;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://Your.Blog.com/";

limitspy=8
intervalspy=4000

</script>

<div id="spylist">
    <script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

___________________________

6.Insert your Blog Url in Red Highlighted

7.See Blow Demo

Recent Post widget along with picture thumbnail and blog content

Please follow below guideline to install this interesting widget

Step 1 :

Log on  Blogger. Then go to your Blogger Dashboard > Design/Layout > Page Element > Add a Gadget > HTML/JavaScript

Step 2 :

Copy and paste code below:

 <style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='https://sites.google.com/site/fashiondegree/recent-post-thumbnail/recentpost.js?revision=1'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://Your-Blog-Url/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

 Step 3 :


Now change YOUR-BLOG-URL with your blog url.


Step 4 :


Save the template and view

See Below How it works

Random Blogger Post

Copy below Code

----------------------------------------------------------------------------------------------------

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 120;

thumbheight = 127;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 4;

home_page = "http:/yourblogaddress.com/";

</script>

<script src="https://sites.google.com/site/fashiondegree/recent-post-thumbnail/recentpost_thumbnail.js?revision=1" type="text/javascript"></script>

---------------------------------------------------------

 You may change red highlighted clause as you wish, After do the amendment log into blogger click add gadget and then select "Add Java Script/HTML" and then paste the code and save,

See Demo