Cara Memasang Slider Recent Post Responsive Pada Blog

Cara Memasang Slider Recent Post Responsive - Hai sobat MargopBlog sekalian, Bagaimana kabarnya sehatkan? Artikel yang saya tulis ini bertepatan dengan libur semester kuliah saya, daripada bingung mau ngapain saya berinisiatif untuk meng "upgrade" postingan di blog kesayangan saya ini. Kali ini kita akan membahas tentang bagaimana cara memasang slider recent post responsive.

Mungkin anda sudah sering menjumpai recent post yang menggunakan tampilan gambar atau thumbnail. Sedikit berbeda dengan jenis recent post tersebut, recent post yang akan kita pasang ini hanya menggunakan tampilan gambar. Sebenarnya saya sudah pernah memberikan postingan yang sama untuk itu saya memberikan judul postingan saya ini dengan tambahan jilid 2. Tenang saja, meskipun jenis recent post ini sama tapi tampilannya berbeda. Anda penasaran dengan tampilannya? baiklah langsung saja kita coba sekarang.

Cara Memasang Slider Recent Post Responsive Pada Blog

1. Login ke akun Dasbor Blogger anda.

2. Masuk ke laman Tata Letak.

3. Pilih Tambahkan Widget " Add Gadget"

4. Klik HTML/Javascript lalu masukkan kode dibawah ini.

<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://sites.google.com/site/jquerymargop/jquery-js/margopbloggers.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://url-blog-anda.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">
/*
creater by: http://margopblogger.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>

5. Simpan setelan dan lihat hasilnya.

Apabila terjadi kendala, bisa langsung anda tanyakan di kolom komentar mudah- mudahan saya bisa membantu.

"Semoga Bermanfaat"

Pages

Cara Memasang Slider Recent Post Responsive Pada Blog

Unknown

Apa tanggapan Anda untuk "Cara Memasang Slider Recent Post Responsive Pada Blog"

Post a Comment

Cara Memasang Slider Recent Post Responsive Pada Blog

Postingan terkait:

Unknown

Apa tanggapan Anda untuk "Cara Memasang Slider Recent Post Responsive Pada Blog"

Post a Comment