Kamis, 26 Januari 2012

Membuat Slideshow Keren


By on 18.24

Membuat Slideshow Keren - Sekarang saya akan berbagi Tips Blog yaitu Membuat Slideshow Keren, dengan menambah Fitur ini Blog kamu akan terlihat keren, dan tidak hanya itu pada Slideshow ini kamu bisa menyisipkan Beirta atau Artikel Terpopuler Supaya tampil pertama di Home Page, dan juga memudahkan pengunjung melihat Artikel Terpopuler, Cara Buat Nya Mudah Kok,Lihat Gambar Di Bawah Ini.






Slideshow BLAZER BLOG




Jika Sobat Tertarik Membuat Slideshow Keren ikuti langkah-langkah dibawah ini.

1. Login ke Blog Kamu.
2. Pilih Rancangan 
3. Pilih ADD GADGET Lalu Pilih HTML Java Script
4. Copy Kode Dibawah Ini.

<div id='featured'>
<ul class='ui-tabs-nav'>
<!-- 1st Small Image -->
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt="" src="http://1.bp.blogspot.com/-NiUxmNQtCAE/TpLhIyRRz7I/AAAAAAAABug/yXX9wQs5aGo/s320/Steve+Jobs+Memory.jpg" /><span>Steven Paul "Steve" Jobs was Gone</span></a></li>
<!-- 2st Small Image -->
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt="" src="http://4.bp.blogspot.com/-oAWC_Wbb9Do/TqSvTTnjHEI/AAAAAAAAByY/flz6ZpzFZfs/s320/Marco+Simoncelli.jpg" /><span>Race in Peace Marco Simoncelli</span></a></li>
<!-- 3st Small Image -->
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt="" src="http://2.bp.blogspot.com/-Vjl2Oz9DApI/Tr6dAUJ17DI/AAAAAAAAAPU/Og7uzZ2k4F4/s320/Lionel+Messi.jpg" /><span>Why Lionel Messi Is The Great One</span></a></li>
<!-- 4st Small Image -->
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt="" src="http://1.bp.blogspot.com/-PmpJeVjeMqM/Tr6efUCjFnI/AAAAAAAAAPk/2k-URpLgI08/s320/Valentino+Rossi.jpg" /><span>Rossi, The Legend of Moto GP</span></a></li>
<!-- 5st Small Image -->
<li class='ui-tabs-nav-item' id='nav-fragment-5'><a href='#fragment-5'><img alt="" src="http://2.bp.blogspot.com/-igxZ_0BQIf4/Tr6dmT8y1dI/AAAAAAAAAPc/M773MFQADCY/s1600/Michael+Jordan.jpg" /><span>Michael Jordan is the legend of Basketball</span></a></li>
</ul>
<!-- First Content -->
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt="" src="http://1.bp.blogspot.com/-NiUxmNQtCAE/TpLhIyRRz7I/AAAAAAAABug/yXX9wQs5aGo/s320/Steve+Jobs+Memory.jpg" />
<div class='info'>
<h2><a href='http://www.bloggermaps.com/2011/10/steve-jobs-creator-of-ipad-ipod-and.html'>Steve Jobs, Creator of iPad, iPod and iPhone was Gone</a></h2>
</div>
</div>
<!-- Second Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt="" src="http://4.bp.blogspot.com/-oAWC_Wbb9Do/TqSvTTnjHEI/AAAAAAAAByY/flz6ZpzFZfs/s320/Marco+Simoncelli.jpg" />
<div class='info'>
<h2><a href='http://www.bloggermaps.com/2011/10/motogp-lose-talented-rider-rest-in.html'>MotoGP lose Talented Rider , Rest in Peace Simonceli </a></h2>
</div>
</div>
<!-- Third Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt="" src="http://2.bp.blogspot.com/-Vjl2Oz9DApI/Tr6dAUJ17DI/AAAAAAAAAPU/Og7uzZ2k4F4/s320/Lionel+Messi.jpg" />
<div class='info'>
<h2><a href='http://borneo-sporty.blogspot.com/2011/11/why-lionel-messi-is-great-one.html'>Why Lionel Messi Is The Great One</a></h2>
</div>
</div>
<!-- Fourth Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt="" src="http://1.bp.blogspot.com/-PmpJeVjeMqM/Tr6efUCjFnI/AAAAAAAAAPk/2k-URpLgI08/s320/Valentino+Rossi.jpg" />
<div class='info'>
<h2><a href='http://borneo-sporty.blogspot.com/2011/11/valentino-rossi-legend-of-moto-gp.html'>Valentino Rossi, The Legend of Moto GP</a></h2>
</div>
</div>
<!-- Five Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-5' style=''>
<img alt="" src="http://2.bp.blogspot.com/-igxZ_0BQIf4/Tr6dmT8y1dI/AAAAAAAAAPc/M773MFQADCY/s1600/Michael+Jordan.jpg" />
<div class='info'>
<h2><a href='http://borneo-sporty.blogspot.com/2011/11/michael-jordan-is-legend-of-basketball.html'>Michael Jordan is the legend of Basketball</a></h2>
</div>
</div>
</div>
Belum Selsai Sekarang Pilih Rancangan Lalu Pilih EDIT HTML Lalu Cari Kode ]]></b:skin>
Copy kode dibawah ini Tepat di atas Kode ]]></b:skin>



/* Featured Content
----------------------------------------------- */
#featured {width:640px;height:290px;margin:0 0 10px 0;padding:0;position:relative;}
#featured ul.ui-tabs-nav{position:absolute;top:0;right:0;list-style:none;padding:0; margin:0;width:235px;height:290px;}
#featured ul.ui-tabs-nav li{height:58px;padding:0;position:relative;line-height:1.0em;background:url(http://2.bp.blogspot.com/-u22hGOHk3oc/TrovmToareI/AAAAAAAABD8/kOXMIZxfh5s/s1600/slide_basic.gif) repeat-y bottom right;}
#featured ul.ui-tabs-nav li span {padding:0;margin:0;line-height:1.0em;}
#featured .ui-tabs-panel{width:405px; height:290px;position:relative;overflow:hidden;padding:0}
#featured .ui-tabs-panel img {width:395px; height:290px;margin:0 5px}
#featured .ui-tabs-hide {display:none;}
#featured li.ui-tabs-nav-item a {height:38px;display:block;margin:0; padding:10px 20px 10px 10px;color:#000;overflow:hidden;line-height:1.0em;outline:none;}
#featured li.ui-tabs-nav-item a:hover{background:none;text-decoration:none;color:#A00000}
#featured li.ui-tabs-selected{position:absolute;}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{background:url(http://2.bp.blogspot.com/-sqxqIK6KCwc/Trovn3Vrf2I/AAAAAAAABEE/2oe3-PuKvYo/s1600/slide_hover.gif) no-repeat center right;display:block;font:normal 12px Arial;line-height:1.0em;color:#fff}
#featured ul.ui-tabs-nav li img{width:55px;height:38px;float:left; margin:0px 8px 5px 0;padding:0;border:none;}
#featured .ui-tabs-panel .info{position:absolute;top:230px; left:0; height:60px;width: 400px;background:#A00000;border-right:5px solid #000}
#featured .info h2{text-transform:none;line-height:1.2em;font-size:18px;font-family:Arial, serif;height:40px;color:#fff; padding:6px 10px; letter-spacing:.001em;margin:0;overflow:hidden;}
#featured .info a{text-decoration:none;color:#fff;}
#featured .info a:hover{color:#FFFF00;text-decoration:none;}


Keterangan.
Ganti Yang Berwarna Merah Dengan Judul Posting Atau Berita Artikel dan lain-lainnya.
Ganti Yang Berwarna Biru Dengan URL Posting, Artikel, Berita Dan Lain-lainnya
Ganti Yang Berwarna Ungu Dengan URL Gambar Kamu.


Lalu simpan Widget nya di atas Posting Kamu.
Jika ada kesalahan atau tidak berfungsi harap tinggalkan pesan di Kotak Komentar, karna Script ini masih dalam tahap percobaan.

SELAMAT MENCOBA

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

11 komentar:

  1. nice info gan.. boleh juga nih di coba :)

    BalasHapus
  2. Ok silahkan Gan dicoba, jika ada kegagalan haraf hub saya.

    BalasHapus
  3. maaf... di blog saya ngga jadi, gagal... www.andarunia.tk

    BalasHapus
  4. berhasil kang
    tapi ko hasilnya jadi beda ya
    ga seperti dalam gambar di atas

    BalasHapus
  5. Bgaus san yang ini sob yang diatas masih percobaan coba baca ini lebih bagus http://blazerracing.blogspot.com/2012/04/cara-membuat-nivo-slideshow-posting.html

    BalasHapus
  6. buset.... artikel nya agan yg atuk ini bagus2 bgt yach...'
    siip dah pokoknya buat agan

    BalasHapus
  7. gan ini udh saya coba. gambar nya nggk bergerak. diem di slide 1

    BalasHapus
  8. Yang ini memang gagal sob, mohon maaf yah kalau mau yang lain coba Cari di menu jQuery ada banyak jenis slide show.

    BalasHapus
  9. dah tau gagal.. kok di posting ciiiiiiiiiiii... kamprittttttttt

    BalasHapus
  10. terimakasih banyak gan, sangat bermanfaat sekali artikelnya..

    BalasHapus