Postingan Hari ini Setelah sebelumnya Postingan kami beberapa menit yang lalu mengenai Cara Membuat Slideshow di Blog. Dan untuk postingan Kedua Hari ini masih Menyangkut mengenai Tutorial Blogging. Teman-teman yang bermain jejaring sosial tadi biarkan saja dulu (Aku Cuek). Kali ini Kami postingkan dan kami bagikan tutorial dengan Judul Memasang Content Slider di Blog. Alhamdulillah Cara / Tutorial ini sedang kami gunakan di Blog ini. Perhatikan saja di Halaman Depan Blog ini.
Content slider ini mengandalkan dan menggunakan Kode JQuery untuk Sildeshownya dan sedikit script-script UI yang digunakan sebagai pendukung JQuerynya. Content Slider ini memang banyak digunakan oleh para Blogger yang mengedepankan Kreatifitas dan Modif serta Desain buat blog Mereka.
Berikut Silahkan ikuti langkah-langkahnya :
Pertama :
Login Ke Akun Blogger
Kedua :
Pergi ke Rancangan >> Edit HTML
Ketiga :
Masukkan Kode di bawah ini Setelah Kode <head>
| No | Kode HTML / Scripts |
|---|---|
<link href='http://sites.google.com/site/bloggermintcom/style1.css' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); $("#featured").hover( function() { $("#featured").tabs("rotate",0,true); }, function() { $("#featured").tabs("rotate",5000,true); } ); }); </script> |
Keempat :
Letakkan Kode berikut Sebelum kode </head>
| No | Kode HTML / Scripts |
|---|---|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script>$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); });</script> |
Keterangan :
5000 adalah keterangan kecepatan Slidenya
Kelima :
Letakkan Kode berikut Sebelum Kode ]]></b:skin>
| No | Kode HTML / Scripts |
|---|---|
#featured{
width:400px;
padding-right:200px;
padding-left:5px;
position:relative;
border:5px solid #ccc;
height:260px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:200px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://i47.tinypic.com/6jojr4.jpg') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:200px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtF6eMH_xsAe3_SJQQVAvz8H6p7_j-XEHMG2Qdb7PE5oeIxK5tjTFT2bff2XPVDlHTWOQ-7QwFJcam4xzJu5oBPH9JhC43ctzgj813P5xcmo-q7uw-eSwO-B0-5kUDn1dfgHpuw8tfRtA/s1600/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
|
Keterangan :
Silahkan ganti Kode berwarna biru di atas dengan Selera Anda
Keenam :
Letakkan Kode di bawah ini Setelah Kode <div id='content-wrapper'> atau Tempat Lainnya
| No | Kode HTML / Scripts |
|---|---|
<b:if cond='data:blog.pageType == "index"'>
<div id='featured'> <ul class='ui-tabs-nav'> <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='https://sites.google.com/site/idesainerweb/hpsmart_80x50.jpg'/><span>Modem Smart di Linux (Ubuntu)</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='https://sites.google.com/site/idesainerweb/MultiLevel-DropDown-Menu-With-Out-J-Query-Onlt-HTML-CSS_80x50.jpg'/><span>Toolbar Multi DropDown di Blogger </span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='https://sites.google.com/site/idesainerweb/sosialmediakiri_80x50.jpg'/><span>Sosial Media di Sisi Kiri Blogger</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='https://sites.google.com/site/idesainerweb/social-networking_80x50.jpg'/><span>Social Network Teknik Floating</span></a></li> </ul> <!-- First Content --> <div class='ui-tabs-panel' id='fragment-1' style=''> <img alt='mac' src='https://sites.google.com/site/idesainerweb/hpsmart.jpg'/> <div class='info'> <h3><a href='http://idesainer.blogspot.com/2012/02/pasang-modem-smart-di-linux.html'>Pasang Modem Smart di OS Linux (Ubuntu)</a></h3> <p>Memasang Modem Smart di Linux dapat dilakukan dengan....<a href='http://idesainer.blogspot.com/2012/02/pasang-modem-smart-di-linux.html'>read more</a></p> </div> </div> <!-- Second Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''> <img alt='' src='https://sites.google.com/site/idesainerweb/MultiLevel-DropDown-Menu-With-Out-J-Query-Onlt-HTML-CSS.png'/> <div class='info'> <h3><a href='http://idesainer.blogspot.com/2012/02/membuat-toolbar-menu-drop-down-di-blog.html'>Membuat Multi DropDown JQuery di Blog</a></h3> <p>Toolbar Multi DropDown adalah toolbar yang berisi...<a href='http://idesainer.blogspot.com/2012/02/membuat-toolbar-menu-drop-down-di-blog.html'>read more</a></p> </div> </div> <!-- Third Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''> <img alt='' src='https://sites.google.com/site/idesainerweb/sosialmediakiri.jpg'/> <div class='info'> <h3><a href='http://idesainer.blogspot.com/2012/02/memasang-sosial-media-di-sisi-kiri-blog.html'>Sosial Media di Bagian Kiri Blog</a></h3> <p>Media Sosial yang kami maksud disini adalah Facebook...<a href='http://idesainer.blogspot.com/2012/02/memasang-sosial-media-di-sisi-kiri-blog.html'>read more</a></p> </div> </div> <!-- Fourth Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''> <img alt='' src='https://sites.google.com/site/idesainerweb/social-networking.jpg'/> <div class='info'> <h3><a href='http://idesainer.blogspot.com/2012/02/cara-memasang-sosial-network-dengan.html'>Sosial Network dengan Teknik Floating</a></h3> <p>Memasang Sosial Network di Blog dengan Floating....<a href='http://idesainer.blogspot.com/2012/02/cara-memasang-sosial-network-dengan.html'>read more</a></p> </div> </div> </div> </b:if> |
Keterangan :
Silahkan Edit Kode di atas dengan link dan deskripsi blog Anda Sendiri
Terakhir :
Simpan Template
Selamat Mencoba tutorial ini
| Meta Keyword |
|---|
software,modem+aha, modem+smart, koneksi+smart, dns, ip+address, proxy+changer, facebook, internet, visual+basic, vb6+source, gadget, software+gratis, download+software, mp3, tips+blogger, tips, bisnis, bisnis+onlline, amazon, iklan+ppc, ppc+lokal, bukti+pembayaran, paypal, verifikasi+paypal, hacking, sql+injection, google+dork, iklan+gratis, internet+gratis, browser+tercepat, download+manager, notebook, android, handphone, gadget, iphone, hacking+ppc, hacking+ptc, cewek+seksi, cewek+sma, abg+hot, cara+amazon, buku+tamu, software+hacking, internet, keluarga, komputer, pendaftaran, alami, air, video, situs, kanker, percetakan, masyarakat, apartemen, bayi, download, motor, hadiah, teknologi, konsultasi, perusahaan, telkomsel, biaya, perawatan, domain, kelahiran, seks, pria, wanita, kansultan, digunakan, asi, komputer, paket, musik, kasus, gratis, sayur, mobile, china, sony, foto, tinggi, kamera, umrah, kamera, badan, penyakit, kesehatam, surabaya, musik, pulsa, ibu, gambar, eksklusif, ibu, lembaga, tampil, kontes, center, siswa, dollar, perempuan, jakarta, menuju, lebaran, angka, haji, sablon, seksual, apartemen, banyumas, kabupaten, ponsel, tradisional, akses, barat, pc, terbesar, kulit, world, islam, anggota, timur, publik, low, ungu, iso, harga, umrah, beras, lagu, jawaservices, ketua, smartphone, ahm, paket, gambar, indonesia, jaringan, meningkat, bangunan, kecantikan, masalah, nelepon, menarik, yahoo, penjualan, usaha, cepat, honda, bonus, rumahinformasi, akses, center, makanan, terbaik, tanah, bakar, menu, naik, web, obat, kegiatan, warga, biaya, kelahiran, aksi, hotel, pendidikan, android, putih, indonesia, personal, consulting, terbaik, internet 7 download, wireless internet internet providers internet marketing internet browsers what is internet internet services internet radio home internet internet access internet speed test get,internet internet,service ie9 internet,9 mobile,internet, internet,speed, cable,internet, internet,connection, history,of,internet, internet,explorer9, internet,browser, internet,exploer,8, internet,exploer,9, definition,of,internet, wireless,internet,providers, internet,exploer, internet,games, internet,exp, broadband,internet, internet,explorer8, test,internet,speed, download,internet,8, high,speed,internet, internet,7, cheap,internet, internet.com, internet,proxy, internet,ex, internet,explorer7, internet,8,download, internet,history, youtube, internet,radio,player, internet,advertising, internet,checkers, internet,exploler, dish,internet, microsoft,internet, windows,internet, definisi,keluarga, keluarga,sakinah, mitra,keluarga, keluarga,berencana, keluarga,azhari, hari,keluarga, keluarga,saya, tema,hari,keluarga, keluarga,anwar,ibrahim, lagu,keluarga, keluarga,dude,harlino, program,hari,keluarga, kota,keluarga,batangas, tema,keluarga,saya, medical,card,keluarga, hotel,keluarga,langkawi, doa,hari,keluarga, keluarga,nora,danish, keluarga,kita, keluarga,brooke, poster,hari,keluarga, komputer,stacjonarny, komputery, pc,komputer, mj,komputer, laptop, sklep,komputerowy, komputer,sklep, zlz,komputer, bit,komputer, komputer,cena, komputer,pokladowy, komputer,stacjonarny,cena, komputer,multimedialny, przyspiesz,komputer, laptopy, servis,komputer, komputer,pc, komputer,ceny, komputer,biurowy, komputery,pc, sprzedam,komputer, jak,zlozyc,komputer, komputer,swiat, komputer,dla,grafika, jaki,komputer,kupic, komputer,laptop, najlepszy,komputer,swiata, komputer,do,gier, kupie,komputer, komputer,do,biura, komputery,sklep, komputer,w,monitorze, jual,komputer, komputer,do,grafiki, jak,odwirusowac,komputer, internetowy,sklep,komputerowy, dobry,komputer,stacjonarny, komputer,dotykowy, tablet,pc, jak,odmulic,komputer, jak,zresetowac,komputer, m,j,komputer, tani,komputer,stacjonarny, komputer,pentium,4, skladamy,komputer, komputer,pc,sklep, jak,wybrac,komputer, komputer,swiat,sklep, komputer,czesci, komputer gry, pendaftaran mahasiswa baru, pendaftaran snmptn, pendaftaran snmptn 2012, pendaftaran umb, pendaftaran pmdk ,unud, pendaftaran online, pendaftaran online snmptn, pendaftaran stan 2010, pendaftaran usm stan, syarat pendaftaran,cpns, pendaftaranuny, pendaftaran unpad, pendaftaran stis, pendaftaran pns,2010, pendaftaran unmul, pendaftaran stpn,2010, pendaftaran ipb, pendaftaran trisakti, pendaftaran ui 2010, formulir pendaftaran, pendaftaran stpn, pendaftaran spmb, pelangsing alami, syarat pendaftaran akpol, pendaftaran pmdk, diet alami, pendaftaran snmptn online, pendaftaran polwan, pendaftaran simak,ui, pendaftaran tkhi, pendaftaran universitas, pendaftaran s2 ugm, pendaftaran unila, pendaftaran binus, pendaftaran stsn, pendaftaran akmil, pendaftaran secaba,polri, pendaftaran mkios,telkomsel, pendaftaran unikom, pendaftaran smptn, pendaftaran cpns,2010, pendaftaran cpns,online, pendaftaran pns, pendaftaran undip, pendaftaran stpdn, pemandangan alami, pendaftaran online cpns, syarat pendaftaran polisi, pendaftaran penmaba unj, pendaftaran polri,
|
Demikian informasi Spesifikasi dan Harga Memasang Content Slider di Blog yang kami sampaikan kali ini, semoga informasi diatas bisa menjadi referensi bagi anda semua, dan tak lupa kami sampaikan terima kasih bagi anda yang sudah menyimak informasi halbapitaguni.blogspot.com
0 comments:
Post a Comment