Cara memasang slider di blog
Blogger. Nah Langsung Saja ulasan untuk review kamu Yang Ingin memasang slider seperti inisial di blogmu. Berikut Adalah Cara memasang slider di Template blog. MASUK KE Template >> Edit HTML. Hati Untuk berjaga-jaga jika Terjadi Kesalahan pengeditan Nantinya, sebaiknya backup template dulu Yang Andari. Penghasilan kena Pajak SEMUA Langkah Diatas Andari lakukan, letakkan Kode berikut ini Label Diatas Kode
/ * Slider http://www.seocips.com * /
#featuredSlider {background: # fff; float: kiri; margin: 0; padding: 0 0 10px; -webkit-box-shadow: 1px 1px 5px # c3c3c3; -moz-box-shadow: 1px 1px 5px # c3c3c3; -MS-Box-shadow: 1px 1px 5px # c3c3c3; bayangan -o-kotak-: 1px 1px 5px # c3c3c3; box-shadow: 1px 1px 5px # c3c3c3; border: # fff Padat 1px; width: 99%; position: relative; color: # 666;}
#featuredSlider .featured-ibu {float: left; margin: 10px; padding: 0px;}
#featuredSlider .container {height: 266px; margin: 0 10px 0 0; overflow: hidden; position: relative;}
.featuredTitle {padding-top: 15px; Font yang: 16px Oswald; text-shadow: 1px 1px 1px # ccc;}
.featuredTitle SEBUAH {color: # f7441a}
.featuredTitle a: hover {color: # 000}
.navigation {position: relative; bottom: 23px; float: right; overflow: hidden;}
ul.pagination {list-style-type: none; margin: 0 auto; padding: 0;}
ul.pagination SEBUAH {float: left; margin: 0 5px; display: inline;}
Ul.pagination a {display: block; width: 12px; padding-top: 12px; height: 0; overflow: hidden; background-position: 0 0; background-repeat: no-repeat;}
Ul.pagination a: hover {background-position: 0 -12px;}
Ul.pagination a: hover {background-position: 0 -12px;}
Ul.pagination a.activeSlide {background-position: 0 -12px}
a.readmore {float: left; border: 1px solid # 444; background: # 585858 url (http://2.bp.blogspot.com/- S4AKqSDPUEs / ToSYCWJy4qI / AAAAAAAAABI / conBgqSajOY / S1600 / fade.png) mengulang-x differences; display: block ;; Huruf: 12px Tebal Arial; text-shadow: -1px -1px 0 # 333; margin: 10px 0 0 0; Bantalan: 4px
0px 1px 1px 0px RGBA (0, 0, 0, 0,5); - Moz-box-shadow: 0px 1px 1px 0px RGBA (0, 0, 0, 0,5); box-shadow: 0px 1px 1px 0px RGBA (0, 0, 0, 0,5);}
a.readmore: hover {color: # ff0}
Keterangan: Kode Yang di kasih warna di perbedaan Adalah Lebar Dan Tinggi slider Otomatis Suami silahkan sesuaikan DENGAN Template Andari Dan width: 99% ITU karna Saya memasangnya di Template Yang seresponsif Jadi Saya mengganti kodenya DENGAN width: 99% agar slidernya Jadi seresponsif, jika Andari memakai Template biasa Maka Andari DAPAT mengganti kodenya DENGAN width: 640px; (Angka 640 Andari DAPAT menggantinya Sesuai DENGAN Lebar postingan di Template Yang Andari.
Langkah selanjutnya, masukkan Kode berikut ini Label Diatas Kode </ Head> :
<script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type = 'text / javascript' /> <script src = 'http: // yourjavascript .com / 221222113215 / jquery.innerfade.js 'type =' text / javascript '/>
<script src = 'http: //yourjavascript.com/122111125120/cycle.js' type = 'text / javascript' />
<script jangan masukkan = 'text / javascript'>
// <[CDATA [!
imgr = new Array ();
imgr [0] =
= True;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts = 7;
fungsi fungsi removeHtmlTag (strx, chop) {var s = strx.split ("<"); for (var s}
showrecentposts fungsi fungsi (json)
{? j = (showRandomImg) Math.floor ((imgr.length + 1) * Math.random ()): 0;
img = new Array ();
document.write ('<div class = "slide">')
jika (numposts <= json.feed.entry.length)
{maxpost =
numposts;}
Lain
{maxpost =
json.feed.entry.length;}
for (var i = 0; i <maxpost; i ++)
{var MASUK = json.feed.entry
[saya] ;. var Judul Posting = entry.title $ t;
var PCM;
var posturl;
jika (i == json.feed.entry.length) break;
for (var k = 0; k <entry.link.length; k ++)
{if (entry.link [k] .rel = = 'alternatif')
{posturl = entry.link [k] .href;
istirahat;}}
for (var k = 0; k <entry.link.length; k ++)
{if (entry.link [k]. rel == 'Balasan' && entry.link [k] .type == 'text / html')
{PCM = entri .link [k] .title.split ("") [0];
istirahat;}}
if ("content" di entri)
{var postcontent = entry.content $ t;.}
Lain
jika ("Ringkasan" di entri)
{var postcontent = entry.summary $ t;.}
Lain var postcontent = "";
mengundurkan = entri. diterbitkan $ t;.
if (j> -imgr.length 1) j = 0;
img [i] = imgr [j];
s = postcontent; a = s.indexOf ("<img"); b = s.indexOf ("src = \" ", a); c = s.indexOf (" \ "", b + 5); d = s.substr (b + 5, cb-5);
(!! !! (A = - 1) && (b = - 1) && (c = - 1) && (d = "")) jika img [i] = d;
// Cmtext = (text = 'no'!)? '<i> <font color = "' + acolor + '"> (' + PCM + '' + Teks + ') </ font> </ i>': '';
var bulan = [1,2, 3,4, 5,6,7,8,9,10,11,12];
var bulan2 = ["Jan", "Februari", "Mar", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember "];
var hari = postdate.split ("-") [2] .substring (0,2);
var m = mengundurkan .split ("-") [1];
var y = postdate.split ("-") [0];
for (var u2 = 0; u2 <month.length; u2 ++)
{if (parseInt (m) == bulan [u2])
{m = bulan2 [u2];
istirahat;}}
var trtd = '<p> <p class = "memiliki-ibu"> <a href="'+posturl+'"> <img width = "350" height = "262" src = "' + img [i] + '"/> </a> </ p> <div class =" featuredTitle "> <a href="'+posturl+'">' Topik Judul + '</a> </ p> <p>' + removeHtmlTag (postcontent, summaryPost) + '... </ p> <a href="'+posturl+'" class="readmore"> Baca lebih lanjut & # 187; </a> </ span> ';
Dokumen .write (trtd);
j
++;}
document.write ('</
p> ')}
//]]>
</ script>
Keterangan:
Script Perhatikan URL Diatas warna biru, ITU Adalah jquery.min.js naskah Kode. Jika PADA Template Andari Sudah Ada jquery.min.js meskipun Serinya BERBEDA, Kode warna merah Diatas TIDAK Butuh Lagi Andari masukkan. Cukup Satu jquery.min.js Yang ADA di Template, terserah mau seri berapa, kalau Bisa versi terbaru Yang.
Kode warna biru Angka 350 Dan 262 Adalah Panjang Dan Lebar gambar Yang ADA di slider.
Langkah selanjutnya Adalah memanggil slider tersebut agar Muncul di blog kitd. Cari Kode<div id = 'main-wrapper'> , Kemudian letakkan Kode berikut Suami dibawahnya:
<b: if 'data: blog.pageType = & quot; Item Yang & quot; '= Cond> <div id =' featuredSlider '>
<div class = 'Wadah'>
<script>
document.write (& quot; & lt; script yang Yang
class = 'menu'>
<class ul = 'pagination' /> <script>
$ (& # 39; .slides & # 39;) SIKLUS ({.
fx: & # 39; memudar & # 39 ;,
Kecepatan: & # 39; Lambat & # 39 ;,
Batas Waktu: 3000,
pager: & # 39; .pagination & #
39;});
</ Script>
</ Div> </ div> <- - end .container!>
</ Div>
</ B: if>
Sekarang Tinggal Simpan tamplate Andari Dan lihat hasilnya.
Komentar
Posting Komentar