Cara Membuat Scroll Pada Bloglist (Daftar Blog) Blogspot

Banyak sobat yang menggunakan gadget Bloglist (Daftar Blog) dari fasilitas blogger/blogspot pada sidebar blognya. Memang ada keuntungan disana. Dengan memamfaatkan gadget Bloglist ini kita bisa melihat setiap artikel-artikel terbaru dari blog-blog yang terdapat di dalamnya, sehingga kita dapat dengan mudah mengetahui setiap perkembangan dan topik bahasan artikel dari blog-blog tersebut.

Sayangnya, jika isi Bloglist ini terlalu banyak maka akan terlihat memanjang sehingga memenuhi halaman blog, dan kadang melebihi panjang halaman artikel yang dimuat. Bahkan sekalipun kita memilih opsi terpendek (5 blog yang ditampilkan), tetap saja apabila kita klik "selengkapnya" (Show all) pada Bloglist tersebut maka akan memanjang memenuhi halaman blog. Tentu saja hal ini terlihat kurang rapih dan menarik.

Untuk mengatasi hal itu kamu bisa menambahkan perintah scroll. Sepintas memang kelihatan sulit untuk menambahkannya karena gadget-nya bukan berupa HTML/JavaSript. Tapi sebenarnya cukup mudah dan simpel, kamu hanya cukup menambahkan perintah overflow dan mengatur ukuran tinggi (height)-nya.

Untuk mengetahui lebih jelas cara membuatnya kamu dapat mengikuti langkah-langkah berikut:

1. Dari halaman dasbor, klik Tata Letak - Edit HTML.
2. Beri tanda centrang pada Expand Template Widget.
3. Kemudian cari kode type='BlogList' (gunakan Control F atau F3).
4. Perhatikan kode yang ada di bawahnya, seperti ini:
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>


<div class='widget-content'>
5. Tambahkan perintah style='overflow:auto; height:200px' pada kode yang berwarna biru, sehingga menjadi seperti ini:
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content' style='overflow:auto; height:200px'>
6. Atur ukuran tinggi (height)-nya sesuai kebutuhan.
7. Simpan hasil. SEMOGA BERMANFAAT...!!
Catatan: Jika muncul bullets selain logo blogger pada Bloglist tersebut, itu karena CSS untuk widget pada blog kamu diatur seperti itu. Untuk menghilangkannya, cukup kamu hapus kode class='widget-content' pada script di atas.

Read more »

Membuat Blogroll dengan Menu Dropdown

Untuk membuat blogroll pada menu dropdown, silahkan lihat contoh di bawah :

<form>

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option> - Blogroll - </option>

<option value="http://bloggerblogku.blogspot.com/">Blog Tutorial</option>

<option value="http://andresahan.blogspot.com/">Ruang Blogger</option>

<option value="http://andresahanblogku.blogspot.com/">Blog Khusus Kode Script</option>

</select>

</form>

Contoh Hasilnya:

- Blogroll - Blog Tutorial Ruang Blogger Blog Khusus Kode Script

Contoh variasi lainnya :

<h3> Blogroll </h3>

<div align="left">

<select style size=5="font-weight: normal; font-size: 13px; width="135"; font-family: Verdana,Tahoma,Arial; background-color: rgb(229, 229, 229);" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" name="menu">

<option style="font-weight: normal; font-size: 11px; color: rgb(204, 204, 204); font-family: Verdana,Tahoma,Arial;" value="" selected="selected">--Teman-temanku--</option>

<option> - Blogroll - </option>

<option value="http://bloggerblogku.blogspot.com/">Blog Tutorial</option>

<option value="http://andresahan.blogspot.com/">Ruang Blogger</option>

<option value="http://andresahanblogku.blogspot.com/">Blog Khusus Kode Script</option>

</select>

</form> </div>

Hasilnya Seperti ini :

Blogroll

--Teman-temanku-- - Blogroll - Blog Tutorial Ruang Blogger Blog Khusus Kode Script

Sedikit clue, kata left yang berada pada kode

menunjukan bahwa menu ini akan di simpan di sebelah kiri, jika mau di rubah tinggal ganti saja dengan kata "center" atau "right".

Dan masih banyak lagi alternatif lainnya.
Selamat Mencoba

Read more »

Alternatif Membuat Blogroll dengan Marquee/ Berjalan

Apa itu Blogroll?

Blogroll atau di sebut juga Link Exchange atau kata orang bandung sih tukeran link antar blog atau website adalah menyimpan link address milik orang lain pada blog/website milik kita.

Apa manfaat dari blogroll?

Mungkin secara sekilas para sobat berpikir bahwa memasang link address milik orang lain pada blog/website milik kita akan merugikan, sebab dengan itu tentu saja kita memberikan jalan kepada para pengunjung untuk meninggalkan blog kita. Alasan itu mungkin ada benarnya, akan tetapi tidak seutuhnya benar. Dengan adanya blogroll banyak sekali manfaat yang kita dapatkan, antara lain yaitu mempererat tali silaturahmi atau tali persaudaraan diantara pemilik blog/website. selain itu semakin banyak blog kita di link oleh blog lain maka semakin baik pula posisi rangking blog kita pada Search Engine semacam Google, Yahoo, Msn serta teman-temannya. Tentu saja sama-sama kita ketahui bahwa setiap pemilik blog/website berkeinginan bahwa blog/website miliknya mempunyai rangking yang baik pada search engine. Makanya budayakan tukeran link jangan pelit, karena kalau kita pelit memberi link ya tentu saja tidak akan ada yang mau pasang link addres milik kita pada blog mereka.

Langsung saja copy Script dibawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >

<a href="http://andresahanblogku.blogspot.com/" target="_blank">Blog Khusus Kode Script</a>
<br/><br/>
<a href="http://bloggerblogku.blogspot.com/" target="_blank">Blog Tutorial</a>
<br/><br/>
<a href="http://andresahan.blogspot.com/" target="_blank">Ruang Blogger</a>

<br/><br/>

</marquee>

Hasilnya akan seperti ini :


Blog Khusus Kode Script


Blog Tutorial


Ruang Blogger





Sedikit clue biar agak jelas. Kode diatas tidak baku harus di tuliskan persis seperti di atas, tapi bisa di sesuaikan dengan kondisi dan keinginan sobat. Kode yang bisa di rubah adalah :

scrollamount="2" --> angka "2" adalah menunjukan kecepatan gerakan, jika ingin lebih cepat silahkan ganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3" ,scrollamount="4" , scrollamount="5"

direction="up" --> tulisan "up" menunjukan arah gerakan keatas, kalau ingin di rubah tinggal ganti kata "up" menjadi "down,left,right" . Misal : direction="down" , direction="left" , direction="right" .

width="50%" --> tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai yang di inginkan. contoh : width="30%" , width="70%" , width="100%"

height="200" --> tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika ingin di ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" , height="400" , height="250" .


Ada variasi lain, yaitu dengan memakai tabel, contoh :

<table border="3" width="155" height="130" cellpadding="2">
<tr>
<td align="left">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >
<a href="http://andresahanblogku.blogspot.com/" target="_blank">Blog Khusus Kode Script</a>
<br/><br/>
<a href="http://bloggerblogku.blogspot.com/" target="_blank">Blog Tutorial</a>
<br/><br/>
<a href="http://andresahan.blogspot.com/" target="_blank">Ruang Blogger</a>
<br/><br/>
</marquee>
</td>
</tr>
</table>

Hasilnya Seperti ini :

Blog Khusus Kode Script Blog Tutorial Ruang Blogger

Read more »