close

Ticker

6/recent/ticker-posts

Membuat slide show di bloger

Untuk kesan menarik bagi pengunjung ini yang saya lakukan membuat slide untuk langkah langkah nya silakan ikuti langkah berikut
1.sesudah anda login di bloger masuklah ke tab design, dan pilih edit html.
2.cari script ]]></b:skin>
3.blog / lakukan drag pada script tersebut dan paste kan script di bawah ini
   /* Slider content------- */
    #slider{width:500px;height:280px;background:-moz-linear-gradient(top, #000, #999, #000);position:relative;overflow:hidden;}
    #slider #sizzles{float:left;width: 500px;position:absolute}
    #slider #sizzles img{width:490px;height:250px;position:absolute;margin:5px;}
    #slider .sizzle_caption{position:absolute;margin-top:15px;margin-left:5px;font-weight:bold;color:white;font-size:15px;}
    #slider .sizzle_title{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicrMJW1UFCWj0xzMwl6T50p_zkBcnbbJ5pMHUOH6cdj5VchM2mw9GzlgVeV9-zODG8H6es6930vEKY1otU62IkJwbrViEyj_lhUm1KpfMwSjre2OQ0qcRuuR1xsPors8BuQiDi9iaIHk4/') repeat transparent;position:absolute;margin:0px;left:5;top:55px;height:100px;font-size:17px;color:white;line-height:12px;padding:0px 10px;}
    #slider .sizzle_title a{color:#54a9fe;font:20px calibri;font-weight:bold;text-shadow:0px 1px 0px #00a;}
    #slider .sizzle_title a:hover{color:#8ec6fe;}
    #slider #sizzle_items{background:-moz-linear-gradient(top, #000, #999, #000);position:absolute;bottom:0;left:0;line-height:10px;width:100%;padding:10px;}
    #slider #sizzle_items,#subHeader #sizzle_items a{color:#fff;font-size:14px;font-family:Calibri, Helvetica Neue, Liberation Sans, sans-serif;font-weight:700;cursor:pointer;}
    #slider #sizzle_items a:hover{color:#000 !important;}
    #slider .title a{font-size: 18px;color:#888;line-height:25px;}
    #slider .title h1{font-size:37px;margin:0px;padding:0px;color:#333;}
    .pagehal{padding: 2px 8px;margin-right:5px;border:1px solid #444;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background:-moz-linear-gradient(top, #eee, #666);}
    .pageaktif {color:#fff;text-shadow:0 1px 2px #333;padding: 2px 8px;margin-right: 5px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;border:1px solid #444;background:-moz-linear-gradient(top, #8bc3fb, #0080ff);}

    ]]></b:skin>
4.Buatlag gadged baru, pindah ke tab page element, klik add a Gadged, pilih HTML/Java Script, beri judul Gadged dan masukkan script JS di bawah ini
<script type="text/javascript" src="http://h1.ripway.com/keichiro/JavaScript/jquery.js"></script>
<script type="text/javascript" src="http://h1.ripway.com/keichiro/JavaScript/slideshowleo.js"></script>

<div id="slider">
<div id="sizzles">

<a href="FOTO MU"><img id="sizzleImg0" src="FOTO MU" style="display: none;"/></a>
<div id="sizzle_title0" class="sizzle_title">
<a href="FOTO MU">KATA-KATA MU</a>
</div>

<a href="FOTO MU"><img id="sizzleImg1" src="FOTO MU" style="display: none;"/></a>
<div id="sizzle_title1" class="sizzle_title">
<a href="FOTO MU">KATA-KATA MU</a>
</div>

<a href="FOTO MU"><img id="sizzleImg2" src="FOTO MU" style="display: none;"/></a>
<div id="sizzle_title2" class="sizzle_title">
<a href="FOTO MU">KATA-KATA MU</a>
</div>

<a href="FOTO MU"><img id="sizzleImg3" src="FOTO MU" style="display: none;"/></a>
<div id="sizzle_title3" class="sizzle_title">
<a href="FOTO MU">KATA-KATA MU</a>
</div>

<a href="FOTO MU"><img id="sizzleImg4" src="FOTO MU" style="display: none;"/></a>
<div id="sizzle_title4" class="sizzle_title">
<a href="FOTO MU">KATA-KATA MU</a>
</div>

<div class="clear"></div>
</div>
<div id="sizzle_items">
<a id="sizzle_item_0" class="pagehal" onclick="slider.home.header.expand(0);">1</a>
<a id="sizzle_item_1" class="pageaktif" onclick="slider.home.header.expand(1);">2</a>
<a id="sizzle_item_2" class="pagehal" onclick="slider.home.header.expand(2);">3</a>
<a id="sizzle_item_3" class="pagehal" onclick="slider.home.header.expand(3);">4</a>
<a id="sizzle_item_4" class="pagehal" onclick="slider.home.header.expand(4);">5</a>
</div>
<script type="text/javascript">
slider.home.header.items[0] = [0];
slider.home.header.items[1] = [1];
slider.home.header.items[2] = [2];
slider.home.header.items[3] = [3];
slider.home.header.items[4] = [4];  
slider.home.header.set_timer();
</script></div>

tulisan hitam diantara merah adalah link foto dan juga kata-kata pada slide yang harus anda ganti

5.Kemudian Save Gadged Tersebut dan atur posisi nya

Selesai Moga membantu 

Posting Komentar

0 Komentar