Cara Memasang Widget Recent Post Slider Otomatis Di Blog

Cara Memasang Widget Recent Post Slider Otomatis Di Blog
Contoh Widgetnya


















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.
Cara Memasang Widget Recent Post Slider Otomatis Di Blog




4. Cari HTML/JavaScript.


Cara Memasang Widget Recent Post Slider Otomatis Di Blog






5. Setelah menemukannya masukkan kode dibawah ini di dalam HTML/JavaScript seperti di dalam gambar.
 Cara Memasang Widget Recent Post Slider Otomatis Di Blog

<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.jstype="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://seosc.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://seosc.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 
Previous
Next Post »

3 komentar

Write komentar
7 Januari 2015 20.00 delete

iya gan,terima kasih sudah berkunjung.

Reply
avatar
30 Mei 2015 08.51 delete

Terimakasih agan infonya, nice...

Reply
avatar

Silahkan Berkomentar! EmoticonEmoticon