BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Membuat kotak Scroll untuk blogroll

S udah sama-sama mafhum kalau ngeblog tampa pertukeran link ibarat sayur tampa garam.

Namun karena seringnya melakukan pertukaran link, terkadang untuk mengurus yang satu ini menjadi sangat ribet. ada sebagian orang yang mengakalinya dengan cara membuat text berjalan ( Marquee ).

Dan dalam tulisan ini, saya ingin memberi alternatif lain untuk menangani blogroll tersebut dengan cara membuat wadag atau kotak yang bisa di scroll, atau kita sebut saja Blogroll scrolling. - yang kebetulan akhir-akhir ini mulai trend di gunakan oleh para blogger mania.

Dan Blogroll scrolling yang saya akan tunjukan, tidak akan merubah kebiasaan kita ketika menambah sebuah link baru,  tetap  mengunakan elemen linklist seperti biasanya, artinya kita tidak perlu membuat brogroll dari elemen Html/javascript, yang apabila menambah link baru, kita di harus menulis manuali seperti ini : <ul><li> alamat blog </li> </ul> di ulang-ulang sampai pegal tangan kita.. cape deeeh !!!...

Untuk membuatnya, seperti biasa dalam halaman layout kita buka
tab Edit Html. kemudian tandai kotak Expand Template widget.

Setelah itu masukan kode di bawah ke dalam halaman sintaks Css.
( atau simpan saja di atas kode ini ->  ]]></b:skin>

#scrolling {
     overflow: auto; height: 100px; width: 94%;
      background-color:#EFEFEF; border:1px solid #777;
      margin: 0px auto; padding:5px; font-size: 14px;       
      color: #999; text-align: left;
  }

oke setelah itu cari elemen blogroll yang telah kita pasang,- agar memudahkan dalam pencarianya gunakan find browser yang kita pakai, jika anda mengunakan browser firefox buka menu file Find In This page.

maka di posisi kiri bawah jendela browser akan terlihat kotak kosong seperti ini 

kemudian agar mudah mencarinya ke dalam kotak kosong tersebut masukan judul elemen blogroll kita, misalkan judulnya " link Teman ",
" Blogroll " atau " my link " dll . kemudian klik tombol Next sampai kita menemukan tulisan judul tersebut , juga sampai terlihat semua kode html elemen blogroll seperti di bawah ini ( aslinya elemen LinkList ).

<b:widget id='LinkList1' locked='false' title='blogroll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'>
   <ul> <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

setelah itu masukan kode Html yang sintaks Css-nya telah kita buat, yakni id = " scrolling " atau tulisan lengkapnya menjadi <div id='scrolling'> dan di akhiri dengan tag </div>.

hasil penambahan dan letak posisinya  bisa di lihat pada tulisan yang dipertebal di bawah ini.

<b:widget id='LinkList1' locked='false' title='blogroll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div id='scrolling'>
<div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Setelah itu klik tulisan Pratinjau, jika hasilnya oke klik tulisan Simpan Template.

sekarang coba masuk ke halaman elemen kemudian buka elemen blogroll tersebut dan tambahkan link baru.. hmmm ngga pegal lagi kan mengetik berulang-ulang ....enjoy aja lagi !

Begitu juga jika anda keukeuh ingin mengunakan text berjalan ( marquee ) untuk blogroll ini, lakukan saja tata cara dan upacara pada bagian tag Html seperti di atas. hasilnya seperti ini.

<b:widget id='LinkList1' locked='false' title='blogroll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<marquee behavior="alternate" direction="top" bgcolor="#33FFCC">
<div class='widget-content'>
   <ul> <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div></marquee>
</b:includable>
</b:widget>

Setelah itu klik tulisan Pratinjau, jika hasilnya oke klik tulisan Simpan Template. ( penjelasan tentang marque bisa anda lihat di sini )

sekarang coba masuk ke halaman elemen kemudian buka elemen blogroll tersebut dan tambahkan link baru.. hmmm enjoy aja lagi !

Masalah Dan Solusi

Nah sekarang bagaimana jika tampilan blogroll-nya  ingin seperti ini. memanjang secara horizontal.

Gampang saja dalam tag Html listlist di atas kita tinggal hapus tulisan ini semua : <ul> <li> </li> </ul> .. segitu saja ngga kurang ngga lebih. :).

Page views this post: reader

48 komentar:

Kristina Dian Safitry said...

kayaknya kok ribet ya, bos? kira2 bisa ndak nih dian. soalnya link teman juga dah panjang tuh. btw..kalo gak berhasil khan ada yang disalahun,he,,,he,,,,

Jaloee said...

wakakakak.. isi di luar tanggung jawab penerbit... gitu lho :)
btw coba aja dulu hitung2 ngisi tete es kalau pusing tinggal minum oskadon.. hehehe

BENY said...

Kalau untuk membuat scroll ke samping gimana? Misalnya link blognya panjang. Otomatis disambung ke bawah. bagaimana kalau dibuat scrol ke samping agar linknya tidak nyambung ke bawah?

Jaloee said...

pertanyaan yang baus... cuman sayang aku bloem sempat mengakalinya.. saya coba pake properti display:inline; .. tapi bloem bisa.. mungkin lain kali sy akan coba lagi... thanks pertanyaan yg bermangfaat

Unknown said...

Teng kyu Boss, saya uda coba di http://artistcommunity.blogspot.com

teng kyu, teng kyu...

Blog Kang Robby said...

Thnks Atas Tutorialnya ya...

Jaloee said...

to : balichecin dan Robiee Alca

thanks jg atas kunjungannya

DJ (Wahyudin) said...

Hi salam kenal ya
Visit my blog ya
at http://programdjs.blogspot.com

Unknown said...

kok eroor ya

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "li" must be terminated by the matching end-tag "".

ada tulisan kaya gt

Jaloee said...

to plaza notebook : coba untuk script Html na jangan di copy-paste ( copas ), tulis saja secara manual. teruta untuk tanda kutip ( ' " ) dan slash penutup (/)

Noor said...

makasih ilmunya ... (coba praktek ah ...) TQ suhu

Jaloee said...

yu makasih juga atas kunjuganya

Anonymous said...

Thanks nih tutorialnya, informatif banget, qu lebih mudah mengikutinya.

Anonymous said...

Bos..., untuk nambahin garis pemisah antara nama link satu dengan yang lainnya gimana..?
thx...

Jaloee said...

@ zlam

gunakan saja ( shift + \ ) di keyboard untuk setiap pemisahan link

Anonymous said...

kang dah aku buat blogrollnya... dah jadi....
punya kang jaloe yang di link yang mana ya? banyak sih blognya

Nop said...

Aku baru praktekin, berhasil kayanya! Thak kopi postingannya ya! Ntar thak back link! makasih

Baka Kelana said...

Bos...kalau untuk arsip buat box scroll marquee ada tips nya nggak ya

Jaloee said...

@ Baka Kelana

caranya sama saja mas..

Anonymous said...

thx yach kang infonyaaaaaaaa

Jaloee said...

@ Talent

sama2 thank jg atas kunjuganya

Anonymous said...

oke om aku mau cubi pasang di blogku .... thanks.

Mas Muji said...

thanks a lot bro...

muanteep...langsung actioon dech...

dedi cyber said...

kang aq dah ikutin petunjukna, kok ndak bs.....
http://cyberfive-blog.blogspot.com

Unknown said...

ilangkan scroll horisontal dibawah agar tdk bsa gser kiri n kanan diblogeer gimana?....emailku rusakb@gmail.com

Tirta Kusuma said...

Sangat membantu mas...makasih banyak infonya..

Unknown said...

linknya kok ga muncul di dalam kotak ya? maalah di luar kotak.
mohon solusinya.

Fiqri said...

scroll dan blogrollnya tak muncul, cuma kotaknya saja.
kenapa?

Jaloee said...

@ Fiqri

itu lantaran tinggi/lebar kotaknya melebihi isinya... coba ukuran tinggi kotaknya di kurangi.. misal height: 100px; menjadi height: 30px;

Mama caca said...

makacih juga atas ilmunya..nih langsung praktek aja biar pinter..hi...hi dan blog abang ta masukin link di blog saya. nda apa-apa khan. http://khairilinsani.blogspot.com

sidiq said...

Mas kok caranya ribet bener nich!

Uliah black said...

thx 4,,, info.y

Jaloee said...

@ ulih black

sip.. thx atas kunjuganya

movic said...

makasih bruw atas tutorialnya....

internet-b said...

saya mh newbie jadi sgt ribet sm yg ginian..he...he...

merawat dan memperbaiki komputer said...

makasih infonya sobat.banyak artikel tentang blog disini..

aktifis sandal jepit said...

dicoba....coba...coba....

kemarin sudah pasang scribt serupa tapi template rusak,dan sekarang hilang entah kemana.

sound of classick said...

thanks gan,mantep nich buat otak-atik blognya..

pintu islam said...

terima kasih mas...udah saya praktekan..mohon tinjauannnya ke TKP...saya pasang link sampean ya mas..

pakar bisnis online said...

makasih infnya sob

Herru Gembil said...

ikutan blajar ach..tengqyu kang...kl sempet mampir ke warung ane ngopidoeloe313-ngopidoeloe.blogspot.com...txlotoff

M4RLiF said...

Keren sob, banyak banget kodingnya.tapi g apa2lah setelah diutak-utik akhirnya tembus juga....

Ivan Jaya said...

Thanks atas tutorialnya bro. Sangat bermanfaat. Btw, blogroll tersebut bisa dibuat nofollow gak?

Unknown said...

makasih pencerahannya

Handset News and Reviews said...

Akhirnya ketemu juga...langsung coba dan.....mantap.....thanks gan...hasilnya di http://handset-news.blogspot.com/

Cheat Game4u said...

Thanks tutornya gan,,

Putra said...

Nice bangeeeeet mas.. beda sama yang lain.. :)

aldi said...

thank bos tutor nya

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial