Cara Membuat Widget Recent Post Slider Otomatis dan Responsive di Blogger

Salam Blogger, Artikel kali ini bloggingpasuruan tentang Cara Membuat Widget Recent Post Slider Otomatis dan Responsive di Blogger. Widget ini sangat ringan dan keren begitupun pemasangannya sangat mudah dilakukan.

Cara Membuat Widget Recent Post Slider Otomatis dan Responsive di Blogger


Langsung saja, Cara menambahkan kede Widget-nya :

>> Masuk ke akun Blogger Sobat

>> masuk ke Layout( tata letak ) >> Tambah gadget ( add gadget ) >> pilh HTML Java script

Cara Membuat Widget Recent Post Slider Otomatis dan Responsive di Blogger

>> Masukkan kode dibawah ini didalamnya ( kotak html java script )

<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="https://pasuruan-slider-sidebar.googlecode.com/svn/pasuruan-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://nama-blog-sobat.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">
/*
Dibuat oleh http://bloggingpasuruan.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>


Catatan : Ganti tulisan warna merah dengan URL blog Sobat.

>> Simpan dan lihat hasilnya

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Membuat Widget Recent Post Slider Otomatis dan Responsive di Blogger. Semoga bermanfaat dan terima kasih..

Share this with short URL: Get Short URLloading short url

Nama saya Usman Kurniawan dari Pasuruan - jawa timur dan bukan seorang Blogger Pro, Namun saya akan serius belajar jika menyukai sesuatu hal, termasuk dunia blogging.

Previous
Next Post »

17 comments

Write comments
Hasnan Rifki
AUTHOR
December 15, 2014 at 6:38 AM delete

Thanks gan mksih kunbalnya di tunggu usagi-ku.blogspot.com

Reply
avatar
dhimaz
AUTHOR
December 20, 2014 at 2:00 PM delete

matur nuwun mas infone...siip..

Reply
avatar
Ali Taufik
AUTHOR
March 9, 2015 at 6:07 AM delete

makasih gan sangat membantu buat kami yang newbie

Reply
avatar
Ace Maxs
AUTHOR
May 4, 2015 at 8:29 PM delete

Mantab banget sob, thanks ya...

http://www.tokoobatku.com/

Reply
avatar
Ahmad Sadli
AUTHOR
June 29, 2015 at 11:23 AM delete

terimaksih infonya sob...manfaat bagi pemula

Reply
avatar
November 18, 2015 at 8:16 AM delete

kalo bikin navbar kayak punya mas tu gmn?

Reply
avatar
November 18, 2015 at 8:18 AM delete

kalo bikin navbar kayak punya mas tu gmn?

Reply
avatar
November 18, 2015 at 4:10 PM delete

Navbar yang mana ? Apa headline news maksudnya ..???

Reply
avatar
Portal Kita
AUTHOR
January 19, 2016 at 11:54 PM delete

kl dibuat yang nampil cuma satu gambar ja gak bisa...??

Reply
avatar
January 20, 2016 at 4:23 AM delete

Untuk tampilan 1 slide ( bergantian ), scriptnya beda Mas...
Silahkan cari tutorialnya banyak kok..

Reply
avatar
hen dra
AUTHOR
October 8, 2016 at 1:02 AM delete

keren makasih kak buat infor nya
mampir juga ya ke
-> www.trackinformasi.com

Reply
avatar
December 7, 2016 at 10:27 PM delete

Tenks gan mampir ya di https://arganatic.blogspot.co.id/

Reply
avatar
Natasha Kale
AUTHOR
December 4, 2017 at 5:17 AM delete

Are you hunting for genuine real YouTube Views? Put aside your headaches, we can diligently assist you to buy YouTube Views

Reply
avatar