Tampilkan postingan dengan label Tip dan Triks Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tip dan Triks Blog. Tampilkan semua postingan

Rabu, 10 Maret 2010

Memasang Alexa Graffic pada Blog

Pada artikel sebelumnya yang membahas tentang "Pengertian Alexa dan Kegunaannya" dan " Tips untuk Meninggkatkan / Menaikkan Alexa", maka artikel kali ini akan kita bahas secara khusus tentang cara pemasangan widget alexa di blog. Ini tentunya di tujukan bagi anda yang masih bingung tentang cara memasang widget alexa. Bagi anda yang sudah mahir, rasanya tutorial ini kurang berguna bagi anda.

Widget alexa itu sendiri selain berguna sebagai tempat melihat perkembangan traffic / grafik blog yang kita miliki juga berguna sebagai salah satu widget mempercantik blog kita... semakin kecil angka grafik terlihat berarti semakin populer juga blog yang kita miliki.

caranya sangat mudah dan sederhana :
  1. Masuk ke http://www.rankwidget.com/check_alexa_traffic_rank/
  2. Masukkan alamat URL / web pada kolom tersedia, klik Get Rank!
  3. Kemudian copas aja Kode Html sesuai dengan tampilan yang anda inginkan. karena tersedia banyak tampilan yang menarik.
selamat berkreasi...

Memasang Jadwal Sholat pada Blog

Sedikit cara memperindah blog dengan menambahkan widget yang berguna, terutama yang dapat menyajikan info yang bermanfaat, seperti halnya jadwal sholat menyajikan info sekalian ibadah...

copas aja kode html di bawah...

<a href="http://www.myQuran.com" target="_blank">
<img alt="Jadwal Sholat Kota Samarinda" src="http://myquran.com/sholat/?type=png&theme=hitam&kota=62541"/>
</a>


Tampilan :


KET : ganti kode html "warna hijau" sesuai dengan kode wilayah anda...(No. wilayah berdasarkan kode telp)..

selamat mencoba...

Selasa, 09 Maret 2010

Mengganti Background / Latar Belakang pada Blog

Salah satu cara agar pengunjung betah berlama-lama di blog kita adalah dengan menggunakan template yang menarik, Selain kecepatan loading juga tentunya sangat berpengaruh pada pengunjung blog, template yang menarik tentu akan sedikit menambah bumbu dalam blog kita.
Dengan menggunakan template yang menarik tentu harus didukung dengan penggunaan background / latar belakang yang menarik pula.

Pemakaian background sebaiknya di sesuaikan dengan tempalte yang kita pakai terutama dari segi warna ataupun motif dan topik blog kita, tentunya sesuai dengan keinginan kita.
Adapun cara mengganti background sangat mudah dan sederhana, hanya sedikit mengedit pada html kode nya aja...

cari kode seperti di bawah (kadang agak berbeda, tapi intinya sama aja...)

body {
background:url(http://i131.photobucket.com/albums/p287/hyuugaprincess/Backgrounds/stars.gif) repeat;


Ket : ganti warna hijau dengan alamat gambar yang anda inginkan... eiiiitttttt...untuk mengambil contoh-contoh alamat gambar langsung aja ke tkp...http://photobucket.com/ mumpung ada yang gratis...hehe...


Membuat Banner / Logo pada Blog

Buat para blogger yang ingin membuat banner atau logo, tapi bingung gimana cara???##%$%... mungkin anda bisa baca artikel pendek ini... tapi buat yang sudah jago dalam internet dan photoshop ini caranya sangat kuno.

Tapi di sini saya akan memberikan bantuan kepada yang belum tau cara untuk membuat banner sendiri, melainkan secara online dengan fasilitas yang gratisan....hehehe...... Caranya sangat mudah bahkan tidak perlu belajar dalam waktu yang lama untuk membuatnya.

Dengan punya banner atau logo sendiri blog kita akan lebih keliahatan sedikit berkelas deh... kan bisa kita gunakan untuk tukeran link / link exchange sesama teman atau blohgger lainnya.. keren ya...... dari pada panjang lebar jelasinnya langsung aja ke TKP...

Ini adalah caranya..
  1. Kunjungi situs http://cooltext.com/
  2. Klik menu DESIGN A LOGO (bagian atas).
  3. Di menu CHOOSE A LOGO DESIGN pilih gambar yg Anda suka, contoh, klik EMBOSSED.
  4. Di menu LOGO TEXT saya tulis “Tutorials Blog”
  5. Klik menu RENDER LOGO DESIGN (bagian paling bawah).
  6. klik GET HTML CODE
  7. klik I AGREE
  8. copas aja kodenya.. trus selesai dah...
selamat mencona ya.... gue tunggu link exchangenya....

Membuat Snap Shot pada Blog

Apakah sobat pernah mengunjungi blog yang apabila mouse menyorot link kemudian keluar screenshoot? nah apabila anda berkeinginan blognya mempunyai fasilitas seperti itu coba fasilitas seperti d bawah ini.

Untuk mendapatkan tool screenshoot seperti itu, sobat bisa mendapankannya diberbagai situs di internet. Agar tidak berlama-lama mencari, saya ambil contoh salah satunya adalah http://www.snap.com. Berminat tapi masih bingung cara mendapatkannya? silahkan ikuti langkah-langkah berikut ini :

  1. silahkan sobat kunjungi http://www.snap.com
  2. Apabila sobat sudah berada dihalaman situs tersebut, klik tombol Get Started Now
  3. Pilih warna yang di inginkan di bawah tulisan CHOOSE A COLOR THEME, klik saja warna yang tersedia
  4. Pilih Snap shot icon dan trigger di bawah tulisan CHOOSE A SNAP SHOT AND TRIGGER, klik saja pada radio button yang ada
  5. Apabila sobat ingin memasang logo milik sendiri, klik tombol Browse...., kemudian pilih gambar icon yang tersedia pada komputer sobat, apabila tidak mau ya biarkan saja
  6. Pilih ukuran snap shots di bawah tulisan CHOOSE SNAP SHOTS SIZE, beri tanda pada radio button nya
  7. Klik tombol Continue
  8. Masukan alamat blog sobat pada kotak di bawah tulisan Enter Your Site URL. contoh : http://template-unik.blogspot.com
  9. Masukan alamat email sobat di bawah tulisan Enter Your Email
  10. Beri tanda centang pada kotak di samping tulisan I agree to the Terms and Conditions below (kalau mau dibaca, silahkan baca dulu TOS nya)
  11. Klik tombol Continue
  12. Apabila sobat memakai template baru, klik banner logo Blogger, silahkan sign in di blogger dan pilih nama blog yang di inginkan
  13. Klik tombol MENAMBAH WIDGET, maka akan secara otomatis kode dari snaps shots akan di tambahkan
  14. Pindahkan elemen yang baru di tambahkan pada tempat yang di inginkan, karena kode tersebut memuat pula banner dari snapshot
  15. Klik tombol SIMPAN
  16. Selesai.
Bagi sobat yang memakai template klasik, pada langkah yang ke 12, sobat klik lagi tombol Continue. Klik link READ MORE yang berada di bawah tulisan yang berjudul Put a Snap Shots Badge on your site. Copy kode yang di berikan dan paste pada notepad. langkah terakhir tinggal memasukannya kedalam kode template sobat.

selamat mencoba ya....

Minggu, 07 Maret 2010

Membuat Flag Counter pada Blog

lama nih.. gak update blog... hehehe.... Skarang artikel kali ini masih bersangkutan dengan salah satu cara memperindah blog.. yaitu salah satunya dengan menambahkan widget "flag counter" pada blog...
flag counter dapat di istilahkan sebagai tempat menampilkan jumlah visitor yang berkunjung ke blog kita, yang dapat kita lihat dari jumlah setiap negara... ribet dah mau jelasinnya... hehe...
yuk copas aja kode di bawah...


<a href="http://s06.flagcounter.com/more/6mY"><img src="http://s06.flagcounter.com/count/6mY/bg=FFFFFF/txt=000000/border=CCCCCC/columns=2/maxflags=16/viewers=0/labels=0/" alt="free counters"></a>



untuk mengubah warna ataupun ukuran sesuai dengan keinginan langsung aja berkunjung ke empunya ya...http://www.flagcounter.com/index.html

selamat mencoba.....

Kamis, 18 Februari 2010

Cara Memasang Live Traffic pada Blog

Pada artikel kali ini ini kita membahas bagaimana memasang Live traffic pada blog, biar blog kita lebih kelihatan keren lagi, baik itu Live Traffic Map atau Live Traffic Feed.
copas kode di bawah :
Live Traffic Map

<script type="text/javascript" src="http://feedjit.com/map/?bc=FFFFFF&amp;tc=494949&amp;brd1=336699&amp;lnk=494949&amp;hc=336699&amp;dot=FF0000"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript>

Live Traffic Feed



<script type="text/javascript" src="http://feedjit.com/serve/?bc=FFFFFF&amp;tc=494949&amp;brd1=336699&amp;lnk=494949&amp;hc=336699&amp;ww=160"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript>

selamat mencoba...

Cara Memasang Ip Address pada Blog

Salah satu cara unutk memperindah blog yaitu dengan memasang IP Address pada Blog, selain itu juga berguna untuk mengetahui Ip Address yang sekarang kita gunakan.
caranya mudah dan sederhana, anda hanya copas link di bawah :

IP

<a href="http://www.wieistmeineip.de/cometo/?en"><img src="http://www.wieistmeineip.de/ip-address/" border="0" width="125" height="125" alt="IP" /></a>


bentuk memanjang :

IP

<a href="http://www.wieistmeineip.de/cometo/?en"><img src="http://www.wieistmeineip.de/ip-address/?size=468x60" border="0" width="468" height="60" alt="IP" /></a>

tempatkan dimana anda suka, dan ganti ukurannya sesuai keinginan.
selamat mencoba....

Senin, 15 Februari 2010

Cara Memasang Jam pada Blog

Agar blog anda tampak cantik dan menarik untuk di lihat, maka anda bisa memasang beberapa aksesori blog, salah satunya adalah dengan cara memasang jam. Jam ini bisa anda dapatkan secara gratis pada situs http://www.clocklink.com.

Dan bagi anda yang ingin blognya di pasang jam juga, silahkan ikuti langkah-langkah berikut :

1. Silahkan kunjungi situs http://www.clocklink.com
2. Jika sudah berada pada situs tersebut, silahkan klik tulisan Want a clock on your Website ?
3. Silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll
4. Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang berada di bawah jam yang anda sukai tadi
5. Klik tombol yang bertuliskan Accept
6. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00
7. Set ukuran jam yang anda sukai di samping tulisan size
8. Copy kode HTML yang di berikan pada notepad
9. Paste kode HTML yang di copy tadi pada tempat yang anda inginkan
10. Selesai

selamat mencoba......

Kamis, 11 Februari 2010

Cara Memasang Search Engine pada Blog

salah satu gadget yg dapat kita guna gunakan memperindah blog yaitu, memasa search engine. Untuk membuat sebuah Search Engine pada sebuah blog, sebenarnya mudah dan sangat sederhana karena anda hanya harus menambahkan sedikit kode HTML/script, scriptnya seperti ini
<form id="searchform" action="http://BlogAnda.blogspot.com/search" name="searchform" method="get">
<input id="s" value="" name="q" type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>

Tulisa "Bloganda" seperti biasa anda ganti dengan anama blog anda sendiri, mungkin anda sedikit ingin mengubah kata/kalimat di dalamnya seperti kata "serach", dapat anda ganti dengan kata "Telusuri", "Cari", "Go", dan lainnya, tergantung selera masing2 lah....
selamat mencoba...

Rabu, 10 Februari 2010

Recent Post dengan Slide Show pada Blog

Artikel kali ini kita membahas tentang Recent post tapi denga sedikit di beri efek slide show, hal ini akan menjadikan blog kita lebih cantik dan lebih menarik.
Untuk membuat Widget ini sangat mudah katanya kerennya simple aja... :)

kita hanya memasukkan kode script / html kedalam gadget, dan letakkan dimana yg anda suka. copas kode di bawah :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://bloganda.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://popular-post-blogger.googlecode.com/files/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Ket :
jangan lupa gabti "http://bloganda.com/" dgn alamat/url blog anda.
ukuran lebar dan tinggi dapat dirubah/disesuaikan.

Selasa, 09 Februari 2010

Membuat Marquee pada Blog

Artikel kali ini kita membahas teantang Marquee, Marquee merupakan suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.

*Ket :
BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks
DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks
BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan
Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)
TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks
SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.
SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik
LOOP="angka|-1|infinite" --> Mengatur jumlah loop
WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Marquee gerakan dari Kanan ke Kiri
<MARQUEE align="center" direction="right" height="80" scrollamount="2" width="100%">
teks/link gambar
</MARQUEE>

tampilan :

TEKS/LINK GAMBAR

JIKA ingin mengganti gerakan sesuai yg diinginkan, ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down.

Marquee gerakan bolak-balik / dari kanan ke kiri tru ke kanan lg, dst...
<MARQUEE align="center" direction="left" height="80" scrollamount="3" width="100%" behavior="alternate">
TEKS/LINK GAMBAR
</MARQUEE>

Tampilan :

TEKS/LINK GAMBAR


Marquee dengan variasi hurup dan warna latar belakang :
<div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="100%" scrollamount="3" behavior="alternate">
TEKS/LINK GAMBAR
</MARQUEE></b></FONT></div>



TEKS/LINK GAMBAR


selamat mencoba dan selamat berkereasi...

Senin, 08 Februari 2010

Cara Memnuat Recent Comment pada Blog

Artikel tutorialt kali ini membahas tentang cara membuat Recent Comments. ada beberapa cara untuk membuat widget ini dari mulai menggunakan widget creator, alamat feed, maupun java script. kali ini kita akan menggunakan alamat feed, untuk menghindari loading page yang terlalu berat jika menggunakan javascript.

Cara membuat Recent Comments atau Komentar Terbaru

1. Login ke akun blogger anda dan pilih blog mana yang akan anda buat recent comments
2. Pilih Layout (tata letak) >> Add Page Gadget (tambah elemen halaman) pada sidebar atau dimana saja sesuai keinginan anda.
3. Pilih Feed dan masukkan alamat url feed berikut, http://bloganda.blogspot.com/feeds/comments/full, kemudianpilih continue/lanjutkan, jangan lupa mengganti tulisan yang dicetak tebal dengan nama blog anda

4. Jika Muncul pop up window, Isikan title/judul : label widget anda (misal : komentar terbaru, recent comments dll,) Show : jumlah komentar yang akan ditunjukkan (max 5 item), anda bisa menampilkan atau tidak tanggal dan pembuat komen dengan mencentang kotak item date dan item source/author
5. save / simpan

selamat mencoba...

Membuat Status Yahoo Messenger pada Blog

Bagi blogger yg ingin mempercantik blognya dapat dengan menambahkan status Yahoo Messengger / YM di blog, caranya mudah saja..
contoh tampilan :


<div align="center">
<a style="text-decoration: none" href="ymsgr:sendIM?idanda" title="Kirim YM: idanda"><img border="0" src="http://opi.yahoo.com/online?u=szones29&m=g&t=2"/></a></div>


Ket : ganti tulisan "idanda".
selamat mencoba.......... :)

Minggu, 07 Februari 2010

Cara Membuat artikel terkait atau related posts

Related Post atau Postingan Terkait itu sendiri banyak versi. Namun tujuannya tetap sama yakni menampilkan artikel terkait menurut kategorie atau label dari tulisan yang sedang kita baca. Dan ini biasanya sangat membantu jumlah PageView ( halaman yang di baca ) pada blog kita, Terutama bagi visitor yang ingin menggali lebih dalam artikel lainnya yang kita tulis.
Untuk tata letak bagusnya “ Related Post “ di simpan tepat bawah artikel, atau sedikit jarak dengan artikel.
Perlu di ingat Post terkait ini akan berjalan atau terlihat jika artikel kita mempunyai label/kategorie/tag yang sama dari beberapa tulisan.
Menambah Script Artikel Terkait “ Related Post “

Berikut ini tahap-tahap untuk menambahkan script Arttikel Terkait ke dalam Template Blog.

1. Login/masuk ke Blogger.com jika belum log in.

2. Pada halaman Dasboard masuk ke Layout ( tata-letak ), pilih tab Edit Html.

3. Kemudian tandai/centang kotak di samping tulisan “Expand Template Widget”

4. Setelah itu tempatkan script berikut ini di bawah tag ]]></b:skin>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

5 Kemudian cari bagian ini, dan tambahkan seperti kode yang di beri warna
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>

</b:if>

</b:loop>
</b:if>
</span>

6. Sekarang cari kode baris post-footer berikut ini.
<div class='post-footer-line post-footer-line-3'>

kemudian masukan di bawahnya script ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-posts'>
<h4>Posts Terkait:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Simpan Perubahan ( save template )

Menampilkan tanggal postingan pada hari yang sama

Para blogger (termasuk saya sendiri...hehe..) kemungkinan pernah mengalami bingung terhadap tanggal postingan, selalu menampilkan tgl sehari sebelumnya. Karena secara default blogspot tidak bisa menampilkan tanggal postingan pada hari yang sama. Dan ini kadang-kadang menggangu konsistensi dalam sebuah layout . Untuk itu agar tanggal postingan tampil pada hari yang sama perlu di tambahkan/diganti dengan sebuah script baru.
Untuk menyimpan script ini ke dalam layout kita cukup mudah.
pertama - cek/centang atau tandai “ Expand Widget Templates “
kedua - cari dulu kode html untuk tanggal . ( Ctrl + F )
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

ketiga - kemudian ganti html di atas dengan kode berikut ini.
<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

selamat mencoba...

Rabu, 03 Februari 2010

Membuat Menu Dropdown atau Scrollbox pada Blog

Pada artikel kali ini adalah cara membuat scrollbox atau juga disebut dengan Menu Dropdown. selain berguna mempercantik blog kita, scrollbox atau menu dropdown juga berguna memaksimalkan halaman pada blog.

cara mudah aja, copas aja kode html / script ke dalam gadget HTML/java script, letakkan di mana yg anda suka.


<div style="overflow:auto; height:250px; width:220px">
<ul>
<li><a href="http://alamat url link 1/" target="_blank">Link 1</a></li>
<li><a href="http://alamat url link 2/" target="_blank">Link 2</a></li>
<li><a href="http://alamat url link 3/" target="_blank">Link 3</a></li>
<li><a href="http://alamat url link 4/" target="_blank">Link 4</a></li>
<li><a href="http://alamat url link 5/" target="_blank">Link 5</a></li>
<li><a href="http://alamat url link 6/" target="_blank">Link 6</a></li>
<li><a href="http://alamat url link 7/" target="_blank">Link 7</a></li>
<li><a href="http://alamat url link 8/" target="_blank">Link 8</a></li>
<li><a href="http://alamat url link 9/" target="_blank">Link 9</a></li>
<li><a href="http://alamat url link 10/" target="_blank">Link 10</a></li>
<li><a href="http://alamat url link 11/" target="_blank">Link 11</a></li>
<li><a href="http://alamat url link 12/" target="_blank">Link 12</a></li>
<li><a href="http://alamat url link 13/" target="_blank">Link 13</a></li>
<li><a href="http://alamat url link 14/" target="_blank">Link 14</a></li>
<li><a href="http://alamat url link 15/" target="_blank">Link 15</a></li>
</ul>
</div>

Keterangan untuk script di atas Height itu menunjukkan tinggi dari scrollbox yang kita buat, dan width adalah lebarnya (untuk lebar samakan dengan lebar dari sidebar yang kita pilih).

Link 1, Link 2, Link 3 dan seterusnya adalah nama dari Link dan alamat url link 1, 2, 3, dan seterusnya adalah url tujuan.

Memasang Gadget / Widget Update Twitter pada Blog

Artikel kali kita membahas cara memasang gadget Twitter pada blog, biar menambah kesan lebih menarik pada blog. cara cukup sederhana / tidak terlalu sulit.
syarat kita tentunya harus punya id Twitter juga... :)
Click on Twitter Gadget (under main blog)
Copy paste kode html / script di bawah ini :
<div class="twitter"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display: block; text-align: right;" href="http://twitter.com/idtwitteranda">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/idtwitteranda.json?callback=twitterCallback2&amp;count=2" type="text/javascript"></script>

jangan lupa ganti "idtwiiteranda"

Membuat Teks Berkedip pada Blog

Buat blogger yang sekedar ingin menambahkan atau memodifikasi teks maupun linknya kelihatan berkedip, sangatlah mudah / tidak terlalu sulit.
seperti contohnya di bawah ini :

MADRIDISTA

Jika anda tertarik untuk menggunakan tutorial seperti di atas di blog Anda, anda hanya dengan menambahkan kode <blink> dan </blink> diantara Teks atau Link yg hendak di pasang :
<blink>
MADRIDISTA
</blink>

Selamat mencoba ya...

Widget Tag Clouds pada Blog #2

Sebelumnya kita membahas Tag Clouds dgn fasilitas Delicious, pada artikel kali ini kita membahas Tag Clouds dengan bentuk animasi sehingga terkesan variatif.
Widget tag cloud ini terkesan lebih elegan karena menyajikan animasi gerak jika cursor diarahkan ke widget tersebut. Selama ini mungkin anda hanya mengenal tag cloud standar dengan kata kunci yang hanya berbeda pada besaran hurufnya saja. Nah, bagi anda yang senang mengutak-atik blog, tutorial yang satu ini patut untuk anda coba. Langkah awal, silahkan anda login dan masuk ke account blogger anda dan arahkan ke layout > edit HTML (jangan lupa untuk untuk download full template anda untuk backup jika sesuatu yang tidak diinginkan terjadi).

Langkah selanjutnya, silahkan cari kode di bawah ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>


kalau sudah ketemu, silahkan letakkan kode dibawah ini tepat dibawah kode yang diatas :

<b:widget id='Label88' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://hermanblogtips.blogspot.com'>Herman Blog</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;200&quot;, &quot;150&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='14'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Selesai, jangan lupa simpan template anda.

Catatan : silahkan atur angka 200 yang menunjukkan lebar dan angka 150 yang menunjukkan tingginya. Ganti nilainya sesuai dengan ukuran sidebar template anda. Sedangkan kode huruf ffffff menunjukkan warna background dan angka 333333 menunjukkan warna teks serta angka 14 menunjukkan ukuran teks. Silahkan diganti sesuka hati sesuai selera anda.
 
Link Exchange
Tutorials Zone
<center><a href="http://tutorials-zone.blogspot.com/"><img src="http://images.cooltext.com/1358077.png" width="176" height="55" alt="Tutorials Zone" /></a></center>
<a href="http://tutorials-zone.blogspot.com" target="_blank">Tutorials Zone</a>

"U Follow Me, I Follow U"

Blogger & Tutorial Zone's Copyright © 2009 DarkfolioZ is Designed by Bie Blogger Template for Ipietoon
In Collaboration With fifa