SERVIS SANYO BLUMBUNGAN

.
Home » » cara bikin widget auto slide artikel blog

cara bikin widget auto slide artikel blog

ehem ehem..batuk dulu sebelom mulai..hahah kayak guru SD aja.xixixi. oke  klo dari kemaren saya share tentang gosip..ehh ternyata gosip itu membosankan hehe  maka dari itu pada kesempatan kali ini saya share tutorial blogger  cara bikin widget auto slide. dengan widget ini pengunjung bisa lebih mengetahui artikel favorit blog anda. postingan serupa pernah saya bahas sebelomnya tips menambah fitur slider postingan di blogger. saya sarankan agar link/URL artikel yang anda tampilakan dalam widget ini adalah artikel andalan blog sobat.






OKE LANGSUNG SAJA YAA.

1.  silahkan login bloger masing masing

2.  klik tab menu design | edit html

3. disini ada dua cara yang bisa anda coba.(tergantung template blog yang sedang anda pakai)   silahkan cari kode <body> atau </head>

4. setelah ketemu salah satu kode di atas silahkan copy paste kode dibawah ini dan paste di bawah salah satu kode di atas.(pilih salah satu saja)


<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/smoothscroll.js' type='text/javascript'/>
<link href='http://www.digitalbunch.com/wp-content/uploads/2011/07/smooth-slider-hacktutors.css' id='smooth_slider_css-css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/hacktutorsscript.js' type='text/javascript'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/jquery-hacktutors.js' type='text/javascript'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/slide1.js' type='text/javascript'/>
<style media='screen' type='text/css'>
#smooth_sldr {
width:860px;
height:230px;
background-color:#ffffff;
border:0px solid #999999;
}
#smooth_sldr_items {
padding:10px 18px 0px 26px;
}
#smooth_sliderc {
width:516px;
height:140px;
}
.smooth_slideri {
width:506px;
height:140px;
}
.sldr_title {
font-family:Georgia, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
font-style:normal;
color:#000000;
}
#smooth_sldr_body h2 {
line-height:17px;
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
font-style:normal;
color:#000000;
margin:0px 0 5px 0;
}
#smooth_sldr_body h2 a {
color:#000000;
}
#smooth_sldr_body span {
font-family:Arial, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
font-style:normal;
color:#333333;
}
.smooth_slider_thumbnail {
float:left;
margin:0px 5px 0 0px;
width:165px;
height:120px;
border:1px solid #000000;
}
#smooth_sldr_body p.more a {
color:#000000;
font-family:Arial, Arial, Helvetica, sans-serif;
font-size:12px;
}
#smooth_sliderc_nav li {
border:1px solid #333333;
font-size:12px;
font-family:Arial, Arial, Helvetica, sans-serif;
}
#smooth_sliderc_nav li a {
color:#000000;
}
.sldrlink {
padding-right:40px;
}
.sldrlink a {
color:#333333;
}
#slider {
background:#333;
height:205px;
display:block;
margin:22px 0 10px 10px;
width:565px;
}
</style>


5. setelah selesai silahkan klik simpan .

6. klik lagi menu design | page element |add a gadget | lalu pilih javascript/html

7. kemudian copy paste kode dibawah ini .


<div id="slider">
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'smooth_sliderc', //id of carousel DIV
beltclass: 'smooth_sliderb', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'smooth_slideri', //class of panel DIVs each holding content
autostep: {enable: true, moveby:1, pause:7000},
panelbehavior: {speed:500, wraparound: false, persist:false},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://www.shoutmeloud.com/wp-content/plugins/smooth-slider/images/button_prev.png', -8, 70], rightnav: ['http://www.shoutmeloud.com/wp-content/plugins/smooth-slider/images/button_next.png', 0, 70]},
statusvars: ['imageA', 'imageB', 'imageC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
onslide:function(){
jQuery("#smooth_sliderc_nav li a").css("fontWeight", "normal");
jQuery("#smooth_sliderc_nav li a").css("fontSize", "12px");
var curr_slide = imageA;
jQuery("#sldr"+curr_slide).css("fontWeight", "bolder");
jQuery("#sldr"+curr_slide).css("fontSize", "17px");

}
})
</script>
<noscript>
</noscript>
<div id="smooth_sldr">
<div id="smooth_sldr_items">
<div id="smooth_sldr_body">
<div id="smooth_sliderc">
<div class="smooth_sliderb">
<div class="smooth_slideri">
<!-- smooth_slideri --><a href="http://cara2daninfo.blogspot.com/2011/09/cara-bikin-widget-entri-populer-slide.html"><img class="smooth_slider_thumbnail" src="http://1.bp.blogspot.com/-XT89Kb5ReSg/Tmpq1g9zWPI/AAAAAAAABN8/WF9EYCgjFZ0/s1600/dofollow250A.jpg" alt="" /></a>
<h2><a href="http://cara2daninfo.blogspot.com/2011/09/cara-bikin-widget-entri-populer-slide.html">cara bikin widget entri popular slideshow</a></h2>
<span>ditengah malam yang sunyi senyap tiba-tiba terimspirasi bikin posting tutorial bloger hehehe..
dari pada melamun dan bersedih karena sikap seseorang yang tak mau berubah mendingan tulis post hitung-hitung buat pelajaran pribadi(catatan online) benar gak? hehe..</span>
<p class="more"><a href="http://cara2daninfo.blogspot.com/2011/09/cara-bikin-widget-entri-populer-slide.html">Selengkapnya...</a></p>
<!-- /smooth_slideri -->
</div>
<div class="smooth_slideri">
<!-- smooth_slideri --><a href="http://cara2daninfo.blogspot.com/2011/08/software-cara-belajar-sholat.html"><img class="smooth_slider_thumbnail" src="http://3.bp.blogspot.com/-7u8am3TUeYI/TlQE3zcShjI/AAAAAAAABL8/QeFmqPHiexU/s1600/1.jpg" alt="" /></a>
<h2><a href="http://cara2daninfo.blogspot.com/2011/08/software-cara-belajar-sholat.html">aplikasi untuk belajar sholat</a></h2>
<span>met pagi all pengunjung blog rajacolek and princeess farah (yang selalu ada dalam hatiku) ehem ehem ngarep.com heheh
bagi sebagian orang dewasa kadang malu untuk belajar kepada orang lain apalagi belajar sama orang yang usianya lebih muda..miskipun dirinya tidak begitu tau cara2 sholat yang benar</span>
<p class="more"><a href="http://cara2daninfo.blogspot.com/2011/08/software-cara-belajar-sholat.html">Selengkapnya...</a></p>
<!-- /smooth_slideri -->
</div>
<div class="smooth_slideri">
<!-- smooth_slideri --><a href="http://cara2daninfo.blogspot.com/2011/04/happy-bday-sayang.html"><img class="smooth_slider_thumbnail" src="http://3.bp.blogspot.com/-oBGggEtueBM/TnYgkSJBVKI/AAAAAAAABPQ/9sxJIFAbWeQ/s1600/c4dcc2cc0179a0.gif" alt="" /></a>
<h2><a href="http://cara2daninfo.blogspot.com/2011/04/happy-bday-sayang.html">ucapan ulang tahun buat pacar</a></h2>
<span>HAPPY B'DAY MY LOVE....SEMOGA SEHAT SELALU DAN SELALU SEMANGAT DLAM BERAKTIFITAS DAN TAK LUPA SEMOGA SEMAKIN SAYANG GAN PACARMU RAJA COLEK
DAN TERARHIR SEMOGA FARAH SUKSES SELALU APAPUN YANG DI INGIKANNYA DI DUNIA MAUPUN DI AHERAT.</span>
<p class="more"><a href="http://cara2daninfo.blogspot.com/2011/04/happy-bday-sayang.html">Selengkapnya...</a></p>
<!-- /smooth_slideri -->
</div>
<div class="smooth_slideri">
<!-- smooth_slideri --><a href="http://cara2daninfo.blogspot.com/2011/09/cara-pasang-auto-readmore-tampil-dengan.html"><img class="smooth_slider_thumbnail" src="http://4.bp.blogspot.com/--4J4_wCR4nA/Tn6DYIQS8HI/AAAAAAAABQ0/E4pMBOf8qPU/s1600/ScreenHunter_01+Sep.+24+18.24.gif" alt="" /></a>
<h2><a href="http://cara2daninfo.blogspot.com/2011/09/cara-pasang-auto-readmore-tampil-dengan.html">cara pasang auto readmore bergambar</a></h2>
<span>mungkin sobat bingung yaaa readmore tampil dengan gambar?? hehehe habis bingung mau bikin judulnya
hehe...itu maksudnya postingan yang tampil di homepage ketika readmore otomatis itu berfungsi akan menampilkan gambar disetiap postingan kecuali postingan sobat tidak berisi gambar.
</span>
<p class="more"><a href="http://cara2daninfo.blogspot.com/2011/09/cara-pasang-auto-readmore-tampil-dengan.html">Selengkapnya...</a></p>
<!-- /smooth_slideri -->
</div>
<div class="smooth_slideri">
<!-- smooth_slideri --><a href="http://cara2daninfo.blogspot.com/2011/09/cara-modifikasi-meta-taq-agar-di-sukai.html"><img class="smooth_slider_thumbnail" src="http://4.bp.blogspot.com/-axJsDLtlY2U/TnroRl8b1hI/AAAAAAAABQA/-i3NrN-XSfI/s1600/rajaklik.jpg" alt="" /></a>
<h2><a href="http://cara2daninfo.blogspot.com/2011/09/cara-modifikasi-meta-taq-agar-di-sukai.html">cara modifikasi meta taq agar disukai search engine</a></h2>
<span>meta taq keyword berfungsi untuk meningkatkan SEO (search engine optimization) agar blog/website lebih mudah dianalisa,di-crawl dan di-index search engine google,yahoo,bing dan yang lainnya, </span>
<p class="more"><a href="http://cara2daninfo.blogspot.com/2011/09/cara-modifikasi-meta-taq-agar-di-sukai.html">Selengkapnya...</a></p>

<!-- /smooth_slideri -->
</div>
<!-- /smooth_slideri -->
</div>
</div>
</div>
</div>
<ul id="smooth_sliderc_nav">
<li><a id="sldr1" href="#" >1</a></li>
<li><a id="sldr2" href="#" >2</a></li>
<li><a id="sldr3" href="#" >3</a></li>
<li><a id="sldr4" href="#" >4</a></li>
<li><a id="sldr5" href="#" >5</a></li>
</ul>
<br class="sldrbr" />
<div class="sldrlink"><a href="http://newbeingetop.wordpress.com/2011/12/07/cara-bikin-wid…e-artikel-blog/ " target="_blank">rajacolek</a></div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#smooth_sliderc_nav a').click(function() {
var id = jQuery(this).attr('id');
var step_to_slide = id.replace(/sldr/, "");
document.getElementById(id).href = "javascript:stepcarousel.stepTo('smooth_sliderc', "+step_to_slide+")";
});
});
</script>


KETERANGAN:

silahkan ganti  yang saya beri warna BIRU dengan  URL /link artikel yang ingin sobat tampilkan.

ganti yang berwarna MERAH dengan  URL gambar artikel anda.

ganti yang berwarna  ORINGE  dengan diskripsi singkat artikel anda.

ganti yang berwarna UNGU dengan judul artikel anda.

UPDATE:

jika kode script di atas error. anda bisa download     di link dibawah ini

http://www.ziddu.com/download/17737077/scriptautosliderkontenblog.txt.html

blog wordpress gratisan  agak sensitiv dengan kode kode script .

TIPS MENDAPATKAN LINK GAMBAR DI SEBUAH ARTIKEL:

buka artikel anda kemudian arahkan cursor mose ke gambar yang di inginkan  / lalu klik kanan tepat di gambar yang ingin diambil linknya./ dan pilih copy link location.  selesai....

contoh tuttorial  di atas menampilakan 5 artikel slideshow  dalam widget  tersebut, anda bisa menambah lebih banyak artikel untuk ditampilkan  cukup dengan menambahkan kode berikut

 <!-- /smooth_slideri -->
</div>
<div class="smooth_slideri">
<!-- smooth_slideri -->

setelah itu masukkan link  artikel+link gambar|diskripsi singkat | dan judul artikel.  kode scriptnya anda tiru saja yang sudah ada di atas. INFO ini jika anda ingin menambah lebih dari 5 artikel yang akan ditampilkan.

OYA...JANGAN LUPA DI SIMPAN YAAH...:D

selamat mencobat semoga Tutorial Blogger ini bermamfaat dan semoga berhasil...ukuran lebar dan tinggi widget bisa anda  ganti di bagian CCS nya.

berikan tanggapan anda ............................................makasih..


13 comments:

  1. kalau cara buat tempat seperti tempat contoh kode html anda diatas itu gimana gan?
    salam kenal ya,aku newbie jadi masih belum tahu nama nama tool diblog,harap dimaklum

    BalasHapus

  2. belajar :
    kalau cara buat tempat seperti tempat contoh kode html anda diatas itu gimana gan?
    salam kenal ya,aku newbie jadi masih belum tahu nama nama tool diblog,harap dimaklum



    saya kurang faham maksud anda..mohon pertanyaannya di bikin simple dan bisa dmengerti.. apa maksud anda cara posting kode html??

    BalasHapus
  3. mohon pencerahan..apa bisa edit blog dari hp..soalx di daerah sy kalo pake modem lemot banget...

    BalasHapus

  4. dink3r :
    mohon pencerahan..apa bisa edit blog dari hp..soalx di daerah sy kalo pake modem lemot banget…


    sebenarnya bisa..tapi sayang saya tidak tau caranya..coz saya tidak pernah menggunakan hp...maaf yaaa

    sekedar masukan coba lihat postingan terbaru saya soal antena penguat modem..
    moga jadi solusi

    BalasHapus
  5. menarik sekali om tengs infonya

    BalasHapus

  6. jb :
    menarik sekali om tengs infonya



    thanks balik atas kunjungan agan..hehehe...

    BalasHapus
  7. bagus juga neh totoral, thank sobat

    BalasHapus

  8. irwan efendi :
    bagus juga neh totoral, thank sobat



    semoga bermamfaat aja mas hehehe

    BalasHapus
  9. I’m impressed, I need to say. Really rarely do I encounter a weblog that’s both educative and entertaining, and let me tell you, you’ve hit the nail on the head. Your thought is excellent; the difficulty is something that not enough individuals are speaking intelligently about. I am very pleased that I stumbled throughout this in my search for something relating to this.

    BalasHapus
  10. pengen ane praktekin di blogcepot ane tapi koneksi lelet amir gan .. :mewek

    BalasHapus
  11. yaa itu lumayan berat gan...klo dah bnyak widged di blog agan mendingan gak usah di coba nanti loading blog agan tambah berat

    BalasHapus
  12. mana warna merah biru dllnya , kyaknya sma aja ..Bagus artikelnya
    kunjungi juga blog saya www.abstrakpengetahuan.blogspot.com

    BalasHapus
  13. mana warna merah biru dllnya , kyaknya sma aja ..Bagus artikelnya
    kunjungi juga blog saya www.abstrakpengetahuan.blogspot.com

    BalasHapus

ayukk berikan tanggapan di kotak komentar ini

DAFTAR POST

Translate blog

DONASI/DONATION

donation this blog my bank

BANK: BRI atas nama: abdus syukkur
No Rek: 6470-01-015176-538

Popular Posts

komentar terbaru

Servis pompa air blumbungan

google+

.comment-content a {display: none;}