All About Blogging ++

Tampilkan postingan dengan label Html. Tampilkan semua postingan

Selasa, 16 November 2010

Cara Mengganti Teks Link Menu Dengan Image

Obrak abrik blog dan baca-baca template dari blog saya muncul ide ini yaitu mengganti link menu dari bentuk tulisan / teks menjadi image gambar sesuka kita, yang berupa icon gambar yang dapat kita browsing terlebih dahulu dengan menggunakan google.co.id atau image yang kita miliki dengan ukuran misalnya 16 x 16 pixel. Untuk mencoba tips ini sepertinya harus sobat lihat dulu template pada blog sobat.

disini saya menggunakan template hasil desain dari Rohman Abdul Manap seperti pada informasi berikut ini :

dari template tersebut telah disediakan menu teks standar dan submenu pada menu tersebut yang dapat kita tambahkan yang kemudian saya modifikasi dengan mengganti teks menu menjadi gambar, tentu saja pada bagian ini kang rohman mengizinkan kita untuk memodifikasinya. Adapun susunan html menu dari template ini seperti pada gambar berikut :

Jika template sobat memiliki sedikit kesamaan pada susunan html menu tersebut sangat mudah kok untuk memulai memodifikasinya, yaitu :
1. Sobat cari kode <div id='NavbarMenu'> dibawah kode tersebut terdapat deklarasi dari menu dan submenunya beserta link menu tersebut.
2. Silahkan sobat tambahkan url image / icon / gambar yang akan digunakan pada gambar diatas contohnya terletak pada kode <img src="http://i647.photobucket.com/albums/uu191/admincoy/logo/icon-home.gif" border="0" alt="home"/></a> kode ini untuk menu home.
3. Jika sobat ingin menambahkan dari menu yang lain kode url imagenya sobat letakan setelah kode <a href='#'>
4. Jika sudah semua silahkan Simpan Template lihat hasilnya

Ok mudah bukan, semoga bermanfaat ..!!!

Jumat, 05 November 2010

Membuat Link Email Untuk Pengunjung

Ada baiknya sebagai pemilik blog kita memberikan tempat bagi pembaca untuk menyampaikan saran, kritik, bahkan sesuatu hal yang ingin mereka tanyakan dengan mengirimkan hal tersebut melalui e-mail kita, sehingga komunikasi lebih terjalin dengan baik, dan dapat sebagai media untuk berdiskusi tentang sebuah postingan atau hal lainnya, asalkan membicarakan yang positif saja ya, gak usah yang aneh-aneh atau yang bagaimana gitu ..?? Untuk membuat link email ini silahkan lanjutkan dulu bacanya ya..

Sebenarnya postingan ini saya sadur dari blognya Kranthi, lihat saja disini, makasih ya sharing ini. Ada 2 bentuk / cara untuk menampilkannya yaitu :

1. Menggunakan Text Link
misalnya alamat e-mail yang anda miliki : abc@gmail.com
sehingga untuk menampilkan link tersebut seperti berikut ini :
<a href="mailto:abc@gmail.com">Email me </a> Hasilnya : Email me

2. Menggunakan Image Link
Cara yang kedua ini menggunakan icon image sebagai linknya, sehingga akan tampil lebih menarik lagi, pengunjung dapat langsung memahami icon gambar tersebut.

Untuk itu anda perlu mengup-load terlebih dahulu image / icon yang akan digunakan pada pada file hosting seperti Photobucket.com dan meng-copy Direct link dari icon yang sudah di upload tersebut.

INI YANG LEBIH MUDAH LHO ... !!
Jika anda menggunakan blog dari Blogger, setiap gambar yang anda upload akan memiliki kode link-nya yang otomatis diberikan oleh blogger seperti gambar yang saya gunakan diatas kode link-nya :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONCUi29oCJK-UhM9AhO9PffmzgDsN4wvYemyBTOWmhYfn8krUmb1gdK7TeIEozlvRMQdkYdXjXGrsFdNYMW406KUK-kCPlIqbv2ImGodxLOLvwCBAfeelzLZgslTJpXLehq8vqz3C1Q/s1600/eMail%2520Icon.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 114px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONCUi29oCJK-UhM9AhO9PffmzgDsN4wvYemyBTOWmhYfn8krUmb1gdK7TeIEozlvRMQdkYdXjXGrsFdNYMW406KUK-kCPlIqbv2ImGodxLOLvwCBAfeelzLZgslTJpXLehq8vqz3C1Q/s320/eMail%2520Icon.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5535893898479432930" /></a>

Dari link gambar diatas silahkan anda Copy / ambil bagian ini saja dan silahkan modifikasi tag alt-nya, hasilnya :

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 114px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONCUi29oCJK-UhM9AhO9PffmzgDsN4wvYemyBTOWmhYfn8krUmb1gdK7TeIEozlvRMQdkYdXjXGrsFdNYMW406KUK-kCPlIqbv2ImGodxLOLvwCBAfeelzLZgslTJpXLehq8vqz3C1Q/s320/eMail%2520Icon.png" border="0" alt="kirim via e-mail" id="BLOGGER_PHOTO_ID_5535893898479432930" />

Terakhir silahkan anda gabungkan kodenya seperti berikut ini :

<a href="mailto:abc@gmail.com"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 114px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONCUi29oCJK-UhM9AhO9PffmzgDsN4wvYemyBTOWmhYfn8krUmb1gdK7TeIEozlvRMQdkYdXjXGrsFdNYMW406KUK-kCPlIqbv2ImGodxLOLvwCBAfeelzLZgslTJpXLehq8vqz3C1Q/s320/eMail%2520Icon.png" border="0" alt="kirim via e-mail" id="BLOGGER_PHOTO_ID_5535893898479432930" /></a>

Hasilnya :

Untuk penempatannya dapat rekan letakkan kodenya pada sidebar atau tempat tertentu menurut selera anda, so kalau masih belum jelas dan ada yang ingin ditanyakan kirim saja ke-email saya :

Kamis, 04 November 2010

Memasang Total Comment pada Title Post

Penulis : oom.com

Pasti rekan sudah sering melihat ada beberapa blog yang menampilkan total comment setelah judul postingan, dengan demikian kita / pengunjung lain dapat mengetahui langsung seberapa jauh menariknya postingan tersebut dengan indikator jumlah komentar pada posting tersebut. Untuk bisa memiliki tampilan seperti itu caranya sangat mudah sekali. ikuti saja tutorialnya dibawah ini

Pertama buka halaman "EDIT HTML", kemudian beri tanda centang pada "Expand Template Widget". cari kode seperti dibawah :

<a expr:href='data:post.url'><data:post.title/></a>

kalau sudah ketemu, tinggal Copy-paste aja semua kode dibawah ini dan letakan setelah / dibawah kode diatas.

<b:if cond='data:blog.pageType != "item"'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFu4Ht72BSyobxdDKzhu4FkrXGyDq8Mf7BojdIc_AZSvSOJ6jYQYklDTEesf6LfGb76P4jwVwRlu6BVfFmUBdXbL9239rRqRsF3OoEbmDZDQkORhymr1MpSyHZRoFXLrpBN4XcVXq0JGs9/s400/icon_comments.png'/>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>

Terakhir Simpan Template , so Refresh blog anda.
Bagaimana seharusnya kita memberikan komentar postingan dari sebuah blog silahkan anda baca disini

Jumat, 29 Oktober 2010

Favicon Instan Untuk Blog

Favicon adalah sebuah icon yang tampil sebelum url address dari sebuah website pada layar browser anda. Icon ini sangat efektif untuk memberikan ciri dari sebuah blog / website yang biasanya berkaitan dengan content sebuah blog / website tersebut, sehingga blog / website tersebut akan terlihat lebih profesional dan tentu memiliki keunikan tersendiri.

seperti pada ilustrasi berikut ini

Banyak sudah tutorial blog yang menjelaskan cara memasang favicon ini. Walau demikian saya tetap akan mencoba sharing cara tersebut TETAPI tips yang akan saya jelaskan ini adalah bagaimana memanfaatkan icon-icon yang sudah ada pada sebuah website yang khusus menyediakan icon-icon tersebut seperti di www.iconarchive.com
Langkah-langkahnya adalah sebagai berikut :
1. Buka browser anda menuju ke www.iconarchive.com

2. Silahkan anda cari icon berdasarkan kategori yang ada. Misalnya : “ Halloween icons ”

akan muncul tampilan berikut ini

3. Klik salah satu icon Halloween pada bagian gambar tersebut, akan kembali tampil dengan jumlah icon yang tersedia (19 icon)

4. Klik pada icon yang akan digunakan, misalnya : “ Tounge icon “
5. Akan muncul tampilan berikut ini pada browser anda, Klik pada ukuran icon yang akan digunakan misalnya : 32x32 pixel

6. Icon akan tampil pada satu halaman browser penuh, Silahkan anda copy URL nya

7. Login pada blogger anda pada Dashboard klik Rancangan – Edit HTML, klik option Expand template widget
Cari kode ini :
<link href='URL DARI ICON YANG ADA' rel='shortcut icon'/>
Biasanya Kode diatas diletakkan setelah ]]></b:skin>dan sebelum </head>

8. Silahkan anda ganti / Paste-kan dari langkah 6 diatas pada bagian kode yang berwarna MERAH diatas dari URL ICON standar blog anda.

9. Simpan Template – Lihat / Refresh blog anda.

Catattan :
Gunakan browser Mozilla Firefox untuk melihat hasilnya.

Jumat, 08 Oktober 2010

Memasang Widget Recent Post + (Thumbnails dan Comment Count)

Beberapa rekan mungkin sudah ada yang pernah memasang Widget Recent Post + Thumbnails + Comment Count ini ya, bagi yang belum pernah tidak ada salahnya mencoba memasang widget cantik ini yang saya ketahui pembuatnya bernama Kranti, yaitu owner dari Bloggertriks.com.

Kalo tidak salah dulu saya pernah juga menulis tentang Recent Posts menggunakan Javascript, tapi yang terbaru ini rada beda, dimana widget ini tidak hanya menampilkan recent post doank, tetapi juga dilengkapi dengan penambahan fasilitas gambar dan juga jumlah komentar, seperti pada gambar diatas.
Untuk memasang widget ini caranya sangat mudah, kita tinggal copy-paste aja semua kode dibawah ini, kemudian langsung paste aja dalam gadget HTML/javascript (Tuju tab Layout - Page Elements - Add a Gadget - pilih HTML/javascript)
Berikut kodenya :

Senin, 16 Agustus 2010

Pluralink: Menampilkan Banyak Pilihan Dalam Satu Link

Pluralink menyediakan plugin berbasis javascript yang sangat menarik, dengan plugin ini kita dapat menampilkan satu link tunggal yang didalamnya juga berisi daftar drop-down menu beberapa link sekaligus. Sebagai contoh dalam sebuah artikel kita sedang membahas tentang software dan software tersebut ternyata memiliki beberapa alternatif link download yang berbeda, tentu tidak ada cara lain khan selain kita berusaha mengurutkan link download tersebut satu persatu.

Tetapi dengan Pluralink kita cukup menampilkannya hanya dalam satu link saja misalkan "download disini", dan selanjutnya biarkan pengguna yang memilih salah satunya.

Pluralink kemungkinan besar dapat digunakan di halaman web/blog apa saja, termasuk blogger salah satunya selama flatform tersebut Support Javascript Enable. Silahkan pelajari instruksi cara memasangnya dan untuk pengguna Wordpress sudah tersedia juga pluginnya, silahkan download saja disini.
(cakepkan kan tampilan link-nya diatas ..)

Cara Pasang Di blogger:
Copy-Paste semua kode dibawah ini, kemudian letakan diatas kode </head> pada halaman Edit HTML

<script type="text/javascript" src="http://pluralink.com/files/pluralink.js"></script>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink.css" type="text/css" media="screen" />



Contoh penerapan Link : Rekan bisa memasang link ini dimanapun rekan suka, bisa pada menu atau dalam artikel. Pastikan pemisah link dan link title mengunakan tanda ||

seperti pada contoh berikut ini :
<a href="http://firstlink.com/||http://secondlink.org/" title="First link description||Second link description">Some pluralink</a>

Hasilnya :
Some pluralink

Jumat, 09 Juli 2010

Tampilan Iklan Dengan Gaya Adsense

Oke...topik yang ingin saya angkat pada saat ini yaitu bagaimana membuat iklan dengan tampilan yang cukup sederhana, namun tidak meninggalkan kesan jual untuk iklan tersebut, justru jika anda bisa lebih hebat dalam mengkreasikan kehebatan anda dalam dunia coding, maka tampilan tersebut bisa lebih mantap dibanding tampilan iklan seperti banner, bahkan menurut pendapat saya iklan seperti ini lebih bergengsi, karena jika anda lihat dengan seksama, tampilan iklan seperti ini khalayaknya iklan-iklan ADSENSE.

Oke...langsung saja ketahap pembuatannya :
Iklan ini saya spesifikasikan menggunakan kode HTML. naah...disini juga terdapat dua alternative untuk membuat frame pada kode HTMLnya, yaitu HTML yang menggunakan kode <div> atau bisa menggunakan kode <span>.
Nah, langkah awal untuk membuat iklan yang bergaya seperti diatas,lebih baik anda persiapkan terlebih dahulu iklan apa yang akan anda tampilkan, lebar iklan, konten iklan, warna frame, warna latar belakang, warna huruf, dan lain sebagainya. Jika sudah siap semuanya, kita langsung saja ke kode HTML yg akan di buat
Kodenya seperti ini:

<div style="border: 3px yellow; background: #121B1E; padding:10px; width:250px; text-align:left; color:white;">
<a style="font-size: 17px;COLOR: blue; text-decoration:none;" href="http://blogging-admin.blogspot.com" title="click here"><b>GRATIS DOWNLOAD </b></a> »<br />
Dapatkan MP3, Movie, Software, Artikel-artikel tentang blog disini. Semua serba <blink>GRATIS...!!!</blink><br />
<a style="color:red; font-size:12px; text-decoration:none;" href="http://blogging-admin.blogspot.com" title="click here"><b>www.blogging-admin.blogspot.com</b></a>
</div>

Hasil dari kode diatas seperti pada gambar berikut ini :

SELAMAT BERKREASI - SELAMAT BEREKSPERIMEN DALAM MENCIPTAKAN TAMPILAN YANG INDAH UNTUK IKLAN-IKLAN ANDA...
SALAM BLOGGER

Kamis, 24 Juni 2010

Cara buat Random “tips of the day”

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.

Memangnya Tips of the day ini berguna om? tentu saja, dari pengamatan saya selama ini banyak pengunjung menyukai tips singkat yang saya sampaikan di blog saya -> PD bgt ya he100x. Selain berguna menampilkan informasi singkat, coba bayangkan ketika kamu hanya ingin memposting artikel yang pendek misalkan hanya 250 karakter..masa mau dipaksa dipanjang-panjangin khan malah terlihat aneh, disinilah untungnya memasang Tips of the day. Pengen tau cara buatnya...

Untuk kodenya bisa kamu pelajari script dibawah ini:

<a href="http://www.o-om.com">
<img border="0" style="float:left; margin:0 5px 5px 0;cursor:pointer; cursor:hand;" alt="http://www.o-om.com" src="http://www.geocities.com/oom_directory/tipsOftheday.gif"/></a>
<font color="#333333"><b>Did You Know...</b>
<script language="JavaScript">
//store the quotations in arrays
tips = new Array(5);
tips[0] = "<i>tips bla bla bla 1</i>";
tips[1] = "<i>tips bla bla bla 2</i>";
tips[2] = "<i>tips bla bla bla 3</i>";
tips[3] = "<i>tips bla bla bla 4</i>";
tips[4] = "<i>tips bla bla bla 5</i>";
//calculate a random index
index = Math.floor(Math.random() * tips.length);
//display the quotation
document.write("\n");
document.write(tips[index]);
//done
</script>
</font>
<a href="javascript:location.reload(true)">»»</a> <a target="_blank" href="http://blogging-admin.blogspot.com/2010/06/cara-buat-random-tips-of-day.html">(?)</a>
<br/>

Sedikit penjelasan kode :
Kode warna hijau merupakan text tips yang akan ditampilkan nantinya.

Kode warna pink merupakan icon/logo dari tips, kamu bisa mengganti sesuai keinginan (caranya tinggal arahkan saja alamat url dimana logo/icon kamu disimpan).

Kode warna kuning merupakan kode singkat untuk melakukan refresh atau reload halaman, ketika kode ini di klik maka setiap halaman di refresh tips tersebut akan berganti secara otomatis (kode ini jangan di modifikasi).

Bagaimana Menambah Tips nya biar banyak ?
Lihat contoh kode dibawah, ini berarti kamu hanya menampilkan 5 tips.
tips = new Array(5);
tips[0] = "<i>tips bla bla bla 1</i>";
tips[1] = "<i>tips bla bla bla 2</i>";
tips[2] = "<i>tips bla bla bla 3</i>";
tips[3] = "<i>tips bla bla bla 4</i>";
tips[4] = "<i>tips bla bla bla 5</i>";

Kalau pengen nambah 10 tinggal tambahin aja script kodenya seperti ini.
tips = new Array(10);
tips[0] = "<i>tips bla bla bla 1</i>";
tips[1] = "<i>tips bla bla bla 2</i>";
tips[2] = "<i>tips bla bla bla 3</i>";
tips[3] = "<i>tips bla bla bla 4</i>";
tips[4] = "<i>tips bla bla bla 5</i>";
tips[5] = "<i>tips bla bla bla 6</i>";
tips[6] = "<i>tips bla bla bla 7</i>";
tips[7] = "<i>tips bla bla bla 8</i>";
tips[8] = "<i>tips bla bla bla 9</i>";
tips[9] = "<i>tips bla bla bla 10</i>";

Kalau sobat ingin lebih banyak lagi bisa kan ..? Yang harus diingat jumlah tips dihitung dari 0 (nol) bukan dari angka 1.

Cara memasang pada blogger :
Pilih Tempalate -> Elemen Halaman -> Tambahkan sebuah Elemen Halaman -> Copy-Paste kode script nya -> simpan dan lihat hasilnya.

Rabu, 23 Juni 2010

Search Engine With Flat Button and Flat Textbox Style

Search Engine pada blogger merupakan proses pencarian untuk memudahkan mengunjung mencari suatu artikel sesuai dengan kata kunci yang digunakan.

Walaupun sudah banyak yang mengetahui cara pembuatannya namun kali ini saya memberikan sentuhan yang berbeda dari yang standar, yaitu menampilkan dengan gaya Flat Button Style dan Flat Texbox Style.

Untuk membuatnya ikuti langkah dibawah ini:
1. Pada Template -> Element Halaman -> Tambahkan sebuah Elemen Halaman -> HTML/JavaScript
Copy / Paste code dibawah ini

Jangan lupa ganti NAMABLOG dengan nama blog sobat, dan jangan lupa disimpan.

2. Langkah kedua pada Template -> Edit HTML
Copy / Paste code dibawah ini pada jajaran kode CSS pada blogger, kalo masih bingung cari kode body { lalu setelah tanda akhiran body ada tanda } letakan saja dibawah kode tersebut.

.buttonreset {
color: #333;
background-color: #f3f3f3;
border: 1px solid #999;
padding: 1px;
}
.buttonsubmit {
color: #333;
background-color: #f3f3f3;
border: 1px solid #999;
padding: 1px;
}
.textinput {
color : #333;
background-color: #ffffff;
border: 1px solid #999;
padding: 1px;
}

jangan lupa disimpan, dan lihat hasilnya seperti dibawah ini

Jumat, 18 Juni 2010

Widget Translator Language

Translator widget tentu sesuatu yang sangat familiar bagi para pengguna internet untuk menerjemahkan isi dari informasi yang lagi dibaca terutama pada content non Indonesian Language. Anda dapat langsung mengetikkan kata, kalimat, bahkan beberapa paragrap yang akan diterjemahkan oleh google dengan fasilitas translatenya rekan dapat mencobanya di google translate

Bagi pengguna blog tentu dapat juga menambahkan fasilitas ini pada bagian / widget blognya, sehingga pengunjung yang non Indonesian people dapat mengerti isi dari blog kita.
Caranya mudah sekali, silahkan Copy - Paste dari salah satu bentuk tampilan translator berikut ini dan letakkan pada salah satu widget blog anda.

1. Vertical dengan Background Putih

mau yang seperti diatas berikut kodenya

<div style="border:1px solid #ccc;padding:10px 3px 3px 10px;text-align:center;background-color:#FFFFFF;">

<div align="left">

<strong> Google Translate</strong>â�¢<br/>
<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/> Chinese</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/> French</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/> German</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/> Italian</a>



<BR/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/> Japanese</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/> Korean</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/> Russian</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/> Spanish</a>



</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://blogging-admin.blogspot.com" target="_blank">+</a> <a href="http://blogging-admin.blogspot.com/2010/06/widget-translator-language.html" target="_blank">Grab this Widget</a></small><br/>

</div>

2. Vertical Background Transparent
sama dengan diatas tetapi dengan latar belakang transparan

<div style="border:1px solid #ccc;padding:10px 3px 3px 10px;text-align:center;background-color:none;margin:7px 0 7px 0;">


<div align="left">



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/> Chinese</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/> French</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/> German</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/> Italian</a>



<BR/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/> Japanese</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/> Korean</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/> Russian</a>



<br/>



<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/> Spanish</a>



</div>

<span style="font-size:70%;">Powered by</span> <br/>
<strong>Google</strong>â�¢ Translate<br/>
<span style="font-size:80%;"><a href="http://blogging-admin.blogspot.com" target="_blank">+</a> <a href=" http://blogging-admin.blogspot.com/2010/06/widget-translator-language.html " target="_blank">Grab this Widget</a></span>

</div>

3. Mendatar Background Putih

kodenya berikut ini

<div style="border:1px solid #ccc;padding:10px 0px 3px 0px;text-align:center;background-color:#FFFFFF;min-width:235px; margin: 5px 0 5px 0;">


<div align="center" style="width:auto;">



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/></a>



</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://blogging-admin.blogspot.com" target="_blank">+</a> <a href="http://blogging-admin.blogspot.com/2010/06/widget-translator-language.html" target="_blank">Grab this Widget</a></small><br/>

</div>

4. Mendatar 2 baris Background putih

kodenya berikut ini

<div style="border:1px solid #ccc;padding:10px 0px 3px 0px;text-align:center;background-color:#FFFFFF;min-width:180px; margin: 5px 0 5px 0;">


<div align="center" style="width:auto;">



<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/></a><BR/><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/></a>





<a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/></a>



</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://blogging-admin.blogspot.com" target="_blank">+</a> <a href=" http://blogging-admin.blogspot.com/2010/06/widget-translator-language.html" target="_blank">Grab this widget</a></small><br/>

</div>

Bagaimana mudah bukan, semoga bermanfaat ..!!

Selasa, 15 Juni 2010

Efisiensi Tampilan Link List

Penulis : Serba-seru Blogspot

Setelah posting sebelumnya yang mengangkat tema widget scrolling, nah sekarang tetap pada tema scrolling widget, namun disini yang akan diangkat adalah tentang scrolling pada Link, karena pada gadget Link ini tidak bisa secara langsung di edit melalui gadgetnya, namun melalui template blog kita, tapi supaya artikel ini tidak membingungkan, lebih baik dimulai dari awal aja yaaachhh....
Oke....lanjuuuuuuuuttttt....

Ikuti langkah-langkah berikut ini :
1. Pertama pastinya masuk dulu dong ke Blogger
2. Lalu masuk ke Tata Letak/Layout
3. Terus bikin dulu Link gadgetnya dengan mengklik Add Gadget - Link List
4. Nah Masukin dech beberapa Link dahulu, kl bisa agak banyakan, biar bisa ngeliat hasil scrollingnya nanti
5. Simpan dulu gadget link listnya....
6. Naaahhh, sekarang masuk ke tab Edit HTML diatas
7. Centang Expand Widget Template di kanan atas Box template.
8. Lalu cari code dibawah ini :

<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>

9. Ganti code diatas dengan code dibawah ini :

<div style='width:100%; height:100px; overflow:auto;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='new'><data:link.name/></a></li>
</b:loop>
</ul>
</div>

10. Simpan Template

Catatan :
Untuk code yang berwarna merah bisa anda sesuaikan dengan selera anda, untuk lebar dan tingginya.

Senin, 14 Juni 2010

Menambah Widget/Gadget Di Bawah Header Blog

Sebagian besar template blogspot kita tidak dapat menambahkan widget di bawah header. Why alias Kenapa kok bisa gitu? ini karena template telah mengunci kode htmlnya agar tidak bisa menambah Widget di bawah Header.
Untuk apa sich kok di tambah widget segala? banyak gunanya, kalau kamu suka adsense bisa nampilin iklan adsense disini, kalau yang suka affilied juga bisa buat nampilin iklannya atau keperluan yang lain juga boleh tergantung selera.

Lalu kalau mau nambah widget bagaimana caranya? tenang saja menurut pengalaman di dunia blogger semua ada caranya. langsung saja to....
Ikuti langkah-langkah berikut ini :
1. Masuk ke Account Blogger kamu.
2. Pilih tab Tata Letak/Rancangan klik Edit Html.

3. Jangan lupa backup template dengan klik Download Template Lengkap setelah itu contreng Expand Template Widget.

4. Cari kode di bawah ini :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
</b:section>

5. ubahlah kode berwarna merah menjadi seperti di bawah ini:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>
</b:section>

6. Setelah selesai klik Simpan Template
7. Lihat pada Element halaman bila disana sudah terlihat ada tulisan tambah gadget berarti kamu dah berhasil.. selamat ya.. :)

Catatan :
maxwidgets dapat di ubah sesuai keinginan kamu.

Modifikasi Tampilan MyBlogLog Recent Readers

Penulis : www.o-om.com

Namun ada satu hal yang tidak saya sukai, bukan dari tulisan mas cosa, tapi dari tampilan standar widgets MBL yang kurang nyaman memberikan kemudahan dalam mengajak pembaca bergabung dalam komunitas. Anda bisa melihat tampilan widget MBL anda saat ini, terasa sangat kental dengan nuansa MBL-nya dan bandingkan dengan MBL milik saya.

Lihat sample gambar dibawah:

Gambar diatas tidak perlu saya jelaskan panjang lebar, anda pasti memahaminya. Nah demi meningkatkan jumlah komunitas pembaca tentu harus ada sedikit perubahan, terutama pada modifikasi tampilan, selain MBL hanya tampak seperti thumbnails, anda juga bisa menambahkan sendiri kalimat berupa ajakan atau menghasut pengunjung agar tergabung dalam komunitas.

Cara Modifikasi tampilan MyBlogLog:

Sebelum memodifikasi tampilan, pastikan widget MBL yang anda gunakan merupakan versi lama, karena versi terbaru sudah jauh berbeda. Jika perlu anda bisa mengembalikan script baru anda ke versi lama, baca caranya: Copy paste kode dibawah ini, jangan lupa mengganti ID_MBL dengan code ID anda sendiri.

Senin, 07 Juni 2010

Menambahkan Tombol Save Page As PDF Pada Blog

Agar blog anda semakin cantik dan bermaksud memanjakan pengunjung agar dapat dengan mudah menyimpan informasi yang dibaca dengan format file PDF, kemarin keliling-keliling, lihat sana, lihat sini, eh .. ketemu fasilitas ini lumayan dalam rangka sharing informasi akhirnya saya posting-kan caranya disini… gimana ni lanjutkan ..??
Ini adalah salah satu tool yang saya baca dari Web2 PDF Convert setelah saya terapkan pada blog saya weleh…3x …. Ternyata sangat bermanfaat tool ini, akhirnya saya coba lanjutkan informasinya lewat blog ini .. gimana ni kembali lanjutkan ..??

Ok sobat ikuti saja langkah-langkah berikut ini :

Cara / Bentuk yang pertama atau yang disebut Simple
Bentuk yang pertama ini hasilnya sederhana/simple yaitu berupa teks dengan link perintah seperti ini :

Save to PDF

1. Silahkan sobat Copy kode berikut ini :

2. Kemudian Paste-kan pada template blog sobat, yaitu setelah kode berikut : <data:post.body/>
Atau bagian tempat lainnya pada blog sobat, yang penting sobat sudah paham susunan template blognya.

3. Simpan template

Cara / Bentuk yang kedua atau yang disebut Advance
Bentuk yang kedua ini hasilnya yaitu berupa image dengan link perintah seperti cara pertama, hanya saja di visualkan dengan icon/image/gambar.

Jika sobat ingin hasilnya sama persis dengan gambar diatas silahkan Copy kode berikut ini :

Kemudian langkah berikutnya sama dengan cara yang pertama diatas.

Ternyata sobat termasuk orang yang kreativ … dan berpikir " gimana kalau image / gambarnya kita buat sendiri dan kita gunakan pada script diatas ", bisa gak ya ….. ???
Tentu saja bisa .. !!
Nih ….. untuk itu silahkan Copy kode berikut ini :

Nah bedanya dari kode sebelumnya adalah ada kode CSS "custimg" iya kan ..? dimana script ini berisi dengan URL image / gambar yang kita upload terlebih dahulu sebelumnya ke web hosting image, yaitu pada kode :

http://i647.photobucket.com/albums/uu191/admincoy/pdf-save1.gif

untuk itu silahkan sobat buat dahulu image / gambar yang sobat suka dengan ukuran yang sesuai, upload ke hosting image sobat dan terakhir ganti URL image dari kode diatas dengan URL image yang sudah di upload tadi … Simpan Template dan lihat hasilnya .. jangan dilihat saja coba sobat lakukan uji cobanya .. berhasil gak ..?, Bermanfaat kan ..?

Kamis, 03 Juni 2010

Sexy Bookmarking For Blog

Kalo denger yang seksi-seksi biasanya bikin kita penasaran sambil ngiler. Tapi kalo setelah kata ‘seksi’ ada kata ‘bookmarking’ bukannya ngiler malah melongo. Apa coba yang seksi dari bookmarking? Nah ini dia… Sexy-Bookmarks v2 : gadget bookmarking untuk blogger yang seksi punya. Tools ini ‘menyembunyikan’ bookmarking yang diletakkan di bawah posting dan hanya akan nongol setiap kali ada mouse hover. Memang kadang yang keliatan dikit-dikit lebih seksi daripada yang langsung bugil (apa coba?!). Lanjutkan dulu bacanya ..

nah ini yang saya sebut sexy bookmarking itu

Caranya sebenarnya mudah, tapi agak panjang jalan yang harus dilalui, okelah kalo begitu, sudah siap?
Let’s get ready to rumble!!
1. Ada baiknya sebelum memulai anda mengunduh dulu file berikut Download Image

2. Unpack file gambar PNG yang ada di zip tersebut menggunakan unzip tools dan upload file yang ada ke image hosting kesayangan anda. (Misalnya imageshack.us, jangan gunakan picasa atau photobucket).

3. Masuk ke halaman layout kemudian Edit HTML anda. Centang tanda Expand Widget Template untuk menampilkan semua widget yang mungkin tersembunyi.

4. Masukkan kode di bawah ini sebelum tag </head>

5. Lalu letakkan kode di bawah ini setelah Script yang baru anda pasang di atas.

6. Nah kalau kode yang di bawah ini diletakkan setelah <data:post.body/>

<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to Script & Style'>Submit this to Script & Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='sexy-link'> Widget by <a href='http://www.cssreflex.com/' title='Web Design Blog, Blogger Hacks and Blogger templates'>Css Reflex </a>|<a href='http://www.tutzone.org/' title='Tutorials, Rare Downloads, Link Heaven, Tips Tricks, Hacks, Make How, Blogger Tricks And Tutorials, Internet, News, And Many More'> TutZone</a>|<a href='http://blogging-admin.blogspot.com/' title='Blogging, Download, Tips, Tricks, Windows, Computer, JavaScript, Internet, News, And Many More'> Desta</a></div>

7. Tugas berikutnya bagi anda adalah mencari kode berekstensi PNG yang ada di script kedua dan mengubah alamat urlnya dengan alamat url gambar yang sudah anda upload di image hosting anda tadi.

8. Klik Simpan Template

Akhirnya usai sudah perjalanan panjang untuk posting ini, silahkan sobat lihat hasilnya seperti pada bagian akhir posting ini, arahkan mouse pada salah satu bookmarking ... bagaimana Sexy bukan ...?