Cara Memasang Widget Recent Post Slider Otomatis Di Blog

Contoh Widgetnya

Cara Memasang Widget Recent Post Slider Otomatis Di Blog - Pada kesempatan hari ini saya akan menshare widget  recent post slider otomatis di Blogger. Recent Post adalah widget yang menujukkan artikel terbaru atau postingan terbaru dari blog kita. Widget ini sangat bagus jikalau dipasang untuk blog,selain ringan dan bagus. Blog ini juga membuat tampilan blog menjadi bagus.

saya sarankan kepada anda,jika sudah memasang Popular Post,jangan memasang widget ini. Karena blog anda akan menjadi berat. Dan akan mendapatkan pengunjung yang sedikit.

Untuk Cara Pemasangannya Ikuti Langkah-Langkahnya Dibawah Ini:

1. Login ke Blogger

2. Klik Tata Letak.

3. Klik Tambahkan Gadget.

4. Cari HTML/JavaScript.

5. Setelah menemukannya masukkan kode dibawah ini di dalam HTML/JavaScript seperti di dalam gambar.

 

<center>

<div id="headerbox">Posting Terbaru</div>

<div id="featuredpostside"></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/7221315131/sidebarslider.js" type="text/javascript"></script>

<script type='text/javascript'>

//<![CDATA[

FeaturedPostSide({

blogURL:"http://n3-c.blogspot.com/",

MaxPost:8,

idcontaint:"#featuredpostside",

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">

/*

Design by http://seosc.blogspot.com

*/

ul.abt-sidebar-slider * {

    -moz-box-sizing: border-box;

}

ul.abt-sidebar-slider {

    font: 11px Verdana,Geneva,sans-serif;

}

ul.abt-sidebar-slider, ul.abt-sidebar-slider li {

    list-style: none outside none;

    margin: 0;

    padding: 0;

    position: relative;

}

ul.abt-sidebar-slider {

    height: 500px;

    width: 100%;

}

ul.abt-sidebar-slider li {

    display: none;

    float: left;

    height: 24.5%;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 100%;

}

ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {

    display: block;

}

ul.abt-sidebar-slider li:nth-child(2) {

    left: 0;

    top: 50%;

}

ul.abt-sidebar-slider img {

    border: 0 none;

    height: 100%;

    width: 100%;

}

ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {

    transition: all 0.4s ease-in-out 0s;

}

ul.abt-sidebar-slider li:nth-child(4) {

    left: 0;

    top: 75%;

    width: 100%;

}

ul.abt-sidebar-slider li:nth-child(3) {

    left: 0;

    top: 25%;

}

ul.abt-sidebar-slider .overlayx {

    background-color: rgba(0, 0, 0, 0.5);

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: 2;

}

ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {

    border: 4px solid #2E8DCE;

    border-radius: 3px 3px 3px 3px;

}

ul.abt-sidebar-slider .overlayx:hover {

    opacity: 0.1;

}

ul.abt-sidebar-slider h4 {

    color: white;

    font-family: Oswald;

    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.abt-sidebar-slider .label_text {

    bottom: 10px;

    color: white;

    font-size: 90%;

    left: 10px;

    position: absolute;

    z-index: 2;

}

ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-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 #535353 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 #535353;

    margin-left: -3px;

}

.date {

    background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);

    bottom: 93px;

    padding: 8px;

    position: relative;

    right: 6px;

}

#headerbox {

    background: #8FB93D;

    font-family: Oswald;

    padding: 4px;

}

</style>

</center>

Attention:

Ganti Dengan URL Anda Dengan Yang Sudah Saya Tebalkan "http://n3-c.blogspot.com/"

6. Terakhir Klik Simpan.

Hanya itu postingan saya kali ini,jika ada kesalahan silahkan berkomentar dibawah ini dengan baik dan sopan. Terima kasih atas perhatiannya saya ucapkan terima kasih..

 happy blogger