Skip to content Skip to sidebar Skip to footer
Home / Blogger / CSS / Desain Blog / HTML / Tutorial

Membuat Slider Feature Post di Homepage

By iqis Post a Comment
Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Membuat Slider Feature Post di Homepage, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang Blogger, CSS, Desain Blog, HTML, Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Cara membuat featured post slider ( bergerak ) di homepage pada blog, feature post ini saya temukan pada salah satu blog yang tidak sengaja saya temui pada saat saya lagi mencari sebuah tutorial di Google. Dibawah ini merupakan tampilan dari feature post slider di homepage.

Gimana menurut Anda? keren bukan? jika Anda ingin memasang feature post ini, ada sebaiknya Anda pasang di bagian homepage saja, untuk menghindari kebanyakannya widget pada blog Anda.

Langsung saja ke intinya, jika Anda ingin menggunakan slide feature post ini, ada baiknya Anda tidak terlalu memakai widget yang banyak, nanti akan memberatkan loading pada blog Anda, pakailah widget seperlunya saja.

Memasang Slide Feature Post


Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda copy CSS dibawah ini di atas kode ]]></b:skin>

/*  Slider  */

#slider-body

{

width: 100%;

margin:0 auto;

padding:0;

}

#slider-content

{

position: relative;

padding: 35px 0 112px 0;

background-image:url(http://4.bp.blogspot.com/-dphLEfOsanI/TzLoZ3NMrxI/AAAAAAAAHP4/jmCht-4MANA/s1600/slider.png),url(http://2.bp.blogspot.com/-zTuJW2D_2YQ/TzL0e9AasVI/AAAAAAAAHRg/dEi85g4__Hc/s1600/silder-bg-1.png);

background-repeat:no-repeat;

background-position: top center;

text-align: center;

}

#featured{

width: 960px;

background:#181818;

height: 400px;

margin: 0 auto;

text-align: left;

overflow: hidden;

position: relative;

}

#featured ul.gambar-kanan{

position:absolute;

top:0px;

right:0px;

list-style:none;

padding:0;

width:218px;

height:100%;

overflow:auto;

overflow:hidden;

z-index:100;

}

#featured ul.gambar-kanan li{

padding:0 0 0 15px;

}

#featured ul.gambar-kanan li img{

float:left;

margin:0 8px 0 0;

background:#111;

padding:3px;

width:60px !important;

height: 45px !important;

}

#featured ul.gambar-kanan li span{

position:relative;

top:10%;

padding:0;

line-height:1.5em;

}

#featured li.gambar-kanan a{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHa5c5zfo99ALeMBwRtuVPf0YyPqAIAEEyw5il9mkNU21P3yv5nnUPpIcPRBW3NVhwqEdVp2d9KjSup-IVzmesqixFPFJIcFk37EPdcHImqIQG6j98jLmhcuI0eEPFSoDcc-gaF9MRJv8/s0/nav-item_bg.png) no-repeat center bottom,url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu9lrIp_XbtJBEEc23zxQGbUmbbn9AVtRNEAi5SJnwzeCYZf2sJvna_XGNuQJVjF9LMO1ph1HJZIhDLQeqd2aimNlVVmF3r7EK3ysxTa1Di0TVXCvP609O_q2jDhnvatv51EJFsNnQ3Ww/s0/pattern.png);

border:1px solid #aaa;

display:block;

padding:8px;

height:65px;

text-decoration:none;

line-height:1.2em;

outline:none;

border:none;

}

#featured li.ui-tabs-selected{

background:#111;

z-index:200;

}

#featured ul.gambar-kanan li.ui-tabs-selected a{

color:#999;

border:none;

}

#featured .ui-tabs-panel{

width:410px;

height:280px;

position:relative;

padding:0;

margin:0;

z-index:50;

}

#featured .ui-tabs-panel img{

width:729px !important;

height:375px !important;

border:13px solid #111;

z-index:50;

}

#featured .ui-tabs-panel .tulisan-bawah{

background:#222;

position:absolute;

padding:5px 10px;

bottom:-110px;

left:12px;

line-height:1.3em;

overflow:hidden;

height:66px;

width:710px;

opacity:0.6;

filter:alpha(opacity=90);

.width: 100%; /* IE */

z-index:50;

}

#featured .tulisan-bawah h2{

height:23px;

font-size:18px;

padding:0;

margin:0;

font-family:&quot;PT Sans&quot;, Arial, Tahoma, sans-serif;

font-weight:bold;

overflow:hidden;

}

#featured .tulisan-bawah h2 a{

color:#fff;

}

#featured .tulisan-bawah p{

margin:0;

padding:0;

line-height:1.4em;

color:#999

}

#featured .tulisan-bawah a{

text-decoration:none;

color:#e8e4db;

}

#featured .tulisan-bawah a:hover{

text-decoration:none;

}

#featured .ui-tabs-hide{

display:none

}

Lalu Anda cari kode <div id='outer-wrapper'> atau <div id='content-wrapper'> atau sebagainya

<!-- Featured Content Slider Started -->

<!-- Featured Content Started --> 

<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='slider-body'>

<div id='slider-content'>

<div id='featured'>

<!-- star icon gambar kanan -->

<ul class='gambar-kanan'>

<li class='gambar-kanan  ui-tabs-selected' id='nav-gambar-1'><a href='#gambar-1'><img alt='featured 1' height='45' src='URL GAMBAR KANAN' width='60'/><span>crazy-windows.blog</span></a>

</li>

<li class='gambar-kanan ' id='nav-gambar-2'><a href='#gambar-2'><img alt='featured 2' height='45' src='URL GAMBAR KANAN' width='60'/><span>crazy-windows.blog</span></a>

</li>

<li class='gambar-kanan ' id='nav-gambar-3'><a href='#gambar-3'><img alt='featured 3' height='45' src='URL GAMBAR KANAN' width='60'/><span>crazy-windows.blog</span></a>

</li>

<li class='gambar-kanan' id='nav-gambar-4'><a href='#gambar-4'><img alt='featured 4' height='45' src='URL GAMBAR KANAN' width='60'/><span>crazy-windows.blog</span></a>

</li>

<li class='gambar-kanan' id='nav-gambar-5'><a href='#gambar-5'><img alt='featured 4' height='45' src='URL GAMBAR KANAN' width='60'/><span>crazy-windows.blog</span></a>

</li>

</ul><!-- end icon gambar kanan -->

<!-- gambar 1 -->

<div class='gambar-slider' id='gambar-1' style=''>

<img alt='featured-1' height='375' src='URL GAMBAR UTAMA ANDA' width='727'/><div class='tulisan-bawah'><h2><a href='#'>crazy-windows.blog</a></h2><p>Cool</p></div></div>

<!-- gambar 2 -->

<div class='ui-tabs-panel ui-tabs-hide' id='gambar-2' style=''>

<img alt='featured-2' height='375' src='URL GAMBAR UTAMA ANDA' width='727'/><div class='tulisan-bawah'><h2><a href='#'>crazy-windows.blog</a></h2><p>Awesome</p></div></div>

<!-- gambar 3 -->

<div class='ui-tabs-panel ui-tabs-hide' id='gambar-3' style=''>

<img alt='featured-3' height='375' src='URL GAMBAR UTAMA ANDA' width='727'/><div class='tulisan-bawah'><h2><a href='#'>crazy-windows.blog</a></h2><p>Wow</p>

</div></div>

<!-- gambar 4 -->

<div class='ui-tabs-panel' id='gambar-4' style=''>

<img alt='featured-4' height='375' src='URL GAMBAR UTAMA ANDA' width='727'/><div class='tulisan-bawah'><h2><a href='#'>crazy-windows.blog</a></h2><p>Cool</p></div></div>

<!-- gambar 5 -->

<div class='ui-tabs-panel' id='gambar-5' style=''>

<img alt='featured-5' height='375' src='URL GAMBAR UTAMA ANDA' width='727'/><div class='tulisan-bawah'><h2><a href='#'>crazy-windows.blog</a></h2><p>Images</p></div></div>

</div>

</div>

</div></b:if>

<!-- Ends of Featured content-->

<!-- Featured Content Slider End -->

Silakan Anda ganti tulisan URL GAMBAR UTAMA ANDA dengan Url gambar utama atau depan pada feature post. Lalu Anda ganti juga tulisan URL GAMBAR KANAN dengan Url gambar icon yang di gunakan pada gambar kanan.

Tahap selanjutnya silakan Anda Copy kode Javascript di bawah ini dan Pastekannya di atas kode </body>

<script type='text/javascript'>

    $(document).ready(function(){

        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 2500, true);

    });

</script>

Silakan Anda Save Template Anda, dan lihat hasilnya.

Demikian tutorial yang saya berikan hari ini, semoga bermanfaat. Jangan lupa Share Sob!
Baca Juga


Demikianlah Artikel: Membuat Slider Feature Post di Homepage
kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Slider Feature Post di Homepage dengan alamat link https://blog-kita-semuaa.blogspot.com/2017/04/membuat-slider-feature-post-di-homepage.html

Artikel Lainnya

Post a Comment for "Membuat Slider Feature Post di Homepage"