Featured posts

Memasang Featured posts
Featured posts atau slider posts berfungsi untuk mendekteksi recent posts blog  bedasarkan label yang
sudah dibuat pada postingan blog dengan tujuan mempermudah pencarian artikel, berikut cara penerapannya :

Login ke akun blog klik tataletak dan klik tambah gadged
copy kode berikut kemudian pastekan kedalam gadged tersebut dan klik simpan selesai

<center>
<div id="headerbox">
Featured Posts</div>
<div id="Sliderpostside">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript">
</script>
<script src="http://yourjavascript.com/155251110521/featured-post.js"rel='stylesheet'/></script>
<script type='text/javascript'>
//<![CDATA[
SliderPostSide({
blogURL:"http://myscript2010seo.blogspot.co.id/",
MaxPost:8,
/*Slider http://myscript2010seo.blogspot.co.id/*/ idcontaint:"#Sliderpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false});
//]]>
</script> <link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/> <style scoped="" type="text/css">
/*Slider http://myscript2010seo.blogspot.co.id/*/ ul.my-sidebar-slider * {
    -moz-box-sizing: border-box;
}
ul.my-sidebar-slider {
    font: 11px Verdana,Geneva,sans-serif;
}
ul.my-sidebar-slider, ul.my-sidebar-slider li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
ul.my-sidebar-slider {
    height: 500px;
    width: 100%;
}
ul.my-sidebar-slider li {
    display: none;
    float: left;
    height: 24.5%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 100%;
}
ul.my-sidebar-slider li:nth-child(1), ul.my-sidebar-slider li:nth-child(2), ul.my-sidebar-slider li:nth-child(3), ul.my-sidebar-slider li:nth-child(4) {
    display: block;
}
ul.my-sidebar-slider li:nth-child(2) {
    left: 0;
    top: 50%;
}
ul.my-sidebar-slider img {
    border: 0 none;
    height: 100%;
    width: 100%;
}
ul.my-sidebar-slider .overlayx, ul.my-sidebar-slider li {
    transition: all 0.4s ease-in-out 0s;
}
ul.my-sidebar-slider li:nth-child(4) {
    left: 0;
    top: 75%;
    width: 100%;
}
/*Slider http://myscript2010seo.blogspot.co.id/*/ ul.my-sidebar-slider li:nth-child(3) {
    left: 0;
    top: 25%;
}
ul.my-sidebar-slider .overlayx {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
/*Slider http://myscript2010seo.blogspot.co.id/*/ ul.my-sidebar-slider .overlayx, ul.my-sidebar-slider img {
    border: 4px solid #000;
    border-radius: 3px 3px 3px 3px;
}
ul.my-sidebar-slider .overlayx:hover {
    opacity: 0.1;
}
ul.my-sidebar-slider h4 {
    color: white;
    font-family: Agency FB;
    font-size: 25px;
    font-weight: 100;
    line-height: 1.5em;
    margin: 0;
    padding: 0 10px;
    position: absolute;
    top: 25px;
    width: 100%;
    z-index: 2;
}
ul.my-sidebar-slider .label_text {
    bottom: 10px;
    color: white;
    font-size: 90%;
    left: 10px;
    position: absolute;
    z-index: 2;
}
ul.my-sidebar-slider li:nth-child(2) .autname, ul.my-sidebar-slider li:nth-child(3) .autname {
    display: none;
}
.buttons {
    margin: 5px 0 0;
}
.buttons a {
    display: inline-block;
    height: 25px;
    position: relative;
    text-indent: -9999px;
    width: 15px;
}
.buttons a:before {
    border-color: transparent #000 transparent transparent;
    border-style: solid;
    border-width: 8px 7px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 0;
}
.buttons a.nextx:before {
    border-color: transparent transparent transparent #000;
    margin-left: -3px;
}
.date {
/*Slider http://myscript2010seo.blogspot.co.id/*/     background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
    bottom: 93px;
    padding: 8px;
    position: relative;
    right: 6px;
}
#headerbox {
    moz-border-radius: 10px; -webkit-border-radius:  0px; background-color: #008B8B; border-radius:  0px; border: 5px double #333; padding: 4px; t-align: right;
}
</style> </center>

Penjelasan :
Ganti link yang berwarna merah dengan link sobat

All Sources
Edited by. Myscript2010

DEMOSHOW