Iklan

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

Next
Prev Post
Previous
Next Post

17 comments:

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

    ReplyDelete
  2. makasih gan sangat membantu buat kami yang newbie

    ReplyDelete
  3. Mantab banget sob, thanks ya...

    http://www.tokoobatku.com/

    ReplyDelete
  4. terimaksih infonya sob...manfaat bagi pemula

    ReplyDelete
  5. kalo bikin navbar kayak punya mas tu gmn?

    ReplyDelete
  6. kalo bikin navbar kayak punya mas tu gmn?

    ReplyDelete
    Replies
    1. Navbar yang mana ? Apa headline news maksudnya ..???

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

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

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

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

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

    ReplyDelete