UNIK

Translate

Membuat Slideshow Keren

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QyMtiOeygTTiHHhw9-2vW-zd1oYjUvCBAFp52DJ6YeYCGPhcPLR3QYiwPmczXGCOUZMZ5DzcU9415bKkRYjagv4Ry4WRq8DIN97ewNDpR66V2134WfZud8HcN-s-Q4QPJIPlymAD6ag/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmkU_DZemkZSTjIK2Ave_5o6ddcJaR0iWD0epTaNJP8uCsjDyxhxZggBcChUlIuN6ZMwBpK7t3pCPtx4PvJ5REruKFQASsYJCVW6qDZcR0eMFuXoZGHLyUv7jHaDbr__gLyvRrlgTDyA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUzmYQP1-Xm_FkhKUgnvudNgE_9XroBuJNKrSqMTfZQVCGICmkWIIRcRhyphenhyphenADkzaTzPg_UHa2xpB7pn7mWTN1DLkGJ61JxRADBE3Khr_nzY1GCr2EsEr8fhKSfxD0rQrAU1J2hWIie_dqA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpxDqesfwUyEURjMZ-_Vm8YXUw5P-spM6svRHeToL5rD95VKIQFY7IxvhbfSEtWnExQ8QLusJ6RjCv7I7bP3653b3gJtx1TxrLLui7UScuIi_M5vyjZJTOU5WHGBcDsL57BDerANB20TM/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuMfxi5yXMIv2qh8KDh9fAwI8d8Nj9OL_mn82s0XpZFs5dS8GIbLOH16UEB01ohxEl3n8uJTo8UTYIPxQCBllUmbU78Uqerm8KAwzNyUd9br8ICt-cgQKKrrFHxhFHYoZimv4gmj3Z-MQ/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QyMtiOeygTTiHHhw9-2vW-zd1oYjUvCBAFp52DJ6YeYCGPhcPLR3QYiwPmczXGCOUZMZ5DzcU9415bKkRYjagv4Ry4WRq8DIN97ewNDpR66V2134WfZud8HcN-s-Q4QPJIPlymAD6ag/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmkU_DZemkZSTjIK2Ave_5o6ddcJaR0iWD0epTaNJP8uCsjDyxhxZggBcChUlIuN6ZMwBpK7t3pCPtx4PvJ5REruKFQASsYJCVW6qDZcR0eMFuXoZGHLyUv7jHaDbr__gLyvRrlgTDyA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUzmYQP1-Xm_FkhKUgnvudNgE_9XroBuJNKrSqMTfZQVCGICmkWIIRcRhyphenhyphenADkzaTzPg_UHa2xpB7pn7mWTN1DLkGJ61JxRADBE3Khr_nzY1GCr2EsEr8fhKSfxD0rQrAU1J2hWIie_dqA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpxDqesfwUyEURjMZ-_Vm8YXUw5P-spM6svRHeToL5rD95VKIQFY7IxvhbfSEtWnExQ8QLusJ6RjCv7I7bP3653b3gJtx1TxrLLui7UScuIi_M5vyjZJTOU5WHGBcDsL57BDerANB20TM/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuMfxi5yXMIv2qh8KDh9fAwI8d8Nj9OL_mn82s0XpZFs5dS8GIbLOH16UEB01ohxEl3n8uJTo8UTYIPxQCBllUmbU78Uqerm8KAwzNyUd9br8ICt-cgQKKrrFHxhFHYoZimv4gmj3Z-MQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtVM7YTB2TKheyOAdRiFx7Ka4odDtzy8GTaQhdnTMiUOEaHki0FhngWcm8x8gnUUOhDz8-cM7hCHrhU8UZdWv0y3h8Nq5aCY2ZMFSXomyiqXbl16uOg1sYSijvgJuob4W77GVI0snIP9E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9DkYV2tSY9zFfbtomhZc3Ru5iLNEbZZ2PnNiBKx8OjotMN7amh6aw1KmeMGBgb-2klFSl4y2TVHFHz01gSWCPNjJJ-6hfb-AW4Pogp8nZsyUWg8uyLoZx_YiCrtSglMrdTJoI_2yk3OU/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

BACA JUGA YANG INI :

Related Posts Plugin for WordPress, Blogger...