Membuat Feature Slider Random Keren di blog tanpa edit HTML

Membuat Feature Slider Random Keren di blog tanpa edit HTML

Jalak Ikal 28 May 1 komentar
Slider Random merupakan salah satu Feature yang dimana dengan Slider tersebut menampilkan Artikel artikel tertentu yang sangat penting atau juga sangat menarik,denga Feature Slider Random ini pun tampilan template anda akan menjadi keren sekali sehingga tidak heran jika banyak Blogger yang menggunakan Feature Slider tersebut

Pada Pembahasan sebelum nya saya juga Pernah Membahas tentang Feature Slider Post seperti ini juga,namun pada artikel sebelum nya saya membahas pemasangan Feature Slider Post Random ini dengan Meng edit Html yang berada di template

Baca Juga : Feature Slider Random keren untuk blog

Memang Benar tampilan Feature Slider Random Post kali ini juga tampilan nya masih sama seperti artikel sebelum nya,namun dengan Slider Random Post yang sekarang ini anda tidak perlu cape cape untuk meng edit html template anda sehingga tidak terjadi banyak kesalahan

Cara Memasang Slider Random Post di blog

Kali ini anda dapat memasang Feature Slider Random Post ini hanya perlu menerapkan kode di bawah di bagian Widget template anda,dengan begitu secara Praktis template anda akan mempunyai Feature Slider Random Post yang keren

Dan untuk pemasangan nya pun sangat lah mudah sekali seperti anda memasangan Javascript pada Widget umum nya,namun jika anda masih bingung bisa anda ikuti langkah-langkah pemasangan Slider Random Post di bawah ini
  • Seperti biasa masuk ke akun blogger sobat
  • Setelah itu silahkan anda masuk ke Layout/Tata Letak
  • Kemudian pilih Add a Gadget
  • Lalu kemudian pilih lagi Javascript/Html dan masukan kode berikut di kolom yang sudah tersedia

<style type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://3.bp.blogspot.com/-r6RYARGYuZc/UeQuKTJKu0I/AAAAAAAACHc/ip52Cim8SGM/s1600/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:11px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:10px;line-height:15px}
#slides .label_text{font-size:8px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://yourjavascript.com/40107930212/aab-slider-pribadie.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://infotrens.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
  • Kemudian Save
 Setelah anda mengklik Save anda dapat melihat slider Random Post di blog anda
- Silahkan anda ganti URL yang berwarna merah dengan alamat Blog anda
- Sedang kan untuk yang berwarna Biru itu adalah maksimum artikel yang akan di tampilkan di slider tersebut
- Jika anda ingin menghentikan perputaran Slider nya,anda hanay perlu ganti true menjadi false pada kode autoplay nya

Apakah kode Slider Random Post ini bisa di pasang dengan edit Html template

Jawab nya bisa,karena saya juga sudahmencoba nya Slider yang ini di tempatkan pada template,maksud nya semua kode tersebut tidak di pasangan bersamaan di Widget,namun sebagian nya saya pasang di bagian edit html di template

Namun sekarang saya tidak menjelaskan bagaimana cara pemasangan nya,jika anda penasaran untuk pemasangan nya anda bisa kunjungi dengan link yang berada di bagian atas artikel ini.mah itulah cara pembuatan Slider Random Post di blog,semoga artikel ini bisa bermanfaat dan bisa membantu sobat blogger semua,selamat mencoba.

Ratings: 
Posted by Jalak Ikal, Published at 28 May and have 1 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

1 komentar:

Gak bisa dicopy kodenya

Balas

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi