Baru-baru ini fitur blogger telah bertambah yaitu geotag, tapi ini khusus Blogger in Draft yang terletak di bawah editor posting. Dengan geotag kamu dapat memberikan lokasi dimana posting ini dibuat. Dengan begitu pembaca dapat menelusuri lokasi posting ini dibuat.
Caranya cukup mudah yaitu tinggal klik add location pada bagian bawah editor posting, masukkan nama kotamu dalam kotak pencarian lalu tekan Search. Klik tombol Hybrid untuk memunculkan nama kota dan rute jalan, klik tombol + untuk memperbesar tampilan gambar. Fitur ini baru tersedia kalau kamu login account kamu dengan alamat url sebagai berikut : http://draft.blogger.com/start atau klik disini.
Pada editor posting yang terdapat di Blogger in Draft banyak yang berubah, contohnya : kamu bisa memperpanjang atau memperkecil kotak editor posting. Trus pada Post Option juga terdapat tambahan fitur yaitu Edit HTML Setting, dan masih banyak lagi yang berubah, silahkan utak-atik sendiri ya...
Fitur Baru Blogger : Geotagging
Tips Mencari Kode HTML
Karena kemarin ada yang bingung mencari sebagian kode HTML yang terdapat di Edit HTML, maka gak ada salahnya kalau saya sedikit memberi tips mencari kode tersebut. Sebetulnya tidak ada bedanya ketika kita ingin mencari sebuah kata/angka di dalam MS. Word atau Notepad, caranya cukup mudah tinggal tekan Ctrl+F kemudian akan muncul dialogbox Find. Nah kita tinggal menulis kode yang dicari kemudian enter, contoh :
Membuat 5-Star Rating Widget
Kalau kamu ingin mengetahui rating posting-an kamu dari penilaian pengunjung maka sekarang ada widget yang cukup menarik yaitu The Outbrain Widget. Biasanya pengunjung agak sedikit males untuk memberi komentar mengenai posting kamu tapi dengan adanya widget ini, pengunjung tinggal mung-klik icon bintang yang terdapat dibawah posting.
Selamat mencoba...! Baca Selengkapnya >>> "Membuat 5-Star Rating Widget"
Memasang Icon Yahoo Messenger
Satu lagi yang harus saya buat demi meramaikan dunia blogger indonesia, sebetulnya saya juga baru berkecimpung di dunia blogger ini. Tapi setiap langkah yang saya tempuh di blog ini pasti akan saya posting, siapa tau berguna bagi kawan-kawan blogger yang mampir disini, walaupun banyak juga tutorial yang membahasnya.
Langsung aja deh.. Untuk menampilkan icon Yahoo Messenger cukup mudah kok, ada lima macam icon YM yang bisa kamu pilih salah satu, silahkan tentukan icon mana yang paling kamu sukai diantara dibawah ini :
Masing-masing icon tersebut memiliki kode script tersendiri, yaitu :
Untuk icon ID 1 :
<a href="ymsgr:sendIM?YAHOOIDKAMU"><img src="http://opi.yahoo.com/online?u=YAHOOIDKAMU&m=g&t=1" border="0"></a>
Untuk icon ID 2 :
<a href="ymsgr:sendIM?YAHOOIDKAMU"><img src="http://opi.yahoo.com/online?u=YAHOOIDKAMU&m=g&t=2" border="0"></a>
Untuk icon ID 3 :
<a href="ymsgr:sendIM?YAHOOIDKAMU"><img src="http://opi.yahoo.com/online?u=YAHOOIDKAMU&m=g&t=3" border="0"></a>
Untuk icon ID 4 :
<a href="ymsgr:sendIM?YAHOOIDKAMU"><img src="http://opi.yahoo.com/online?u=YAHOOIDKAMU&m=g&t=4" border="0"></a>
Untuk icon ID 5 :
<a href="ymsgr:sendIM?YAHOOIDKAMU"><img src="http://opi.yahoo.com/online?u=YAHOOIDKAMU&m=g&t=5" border="0"></a>
Silahkan ganti YAHOOIDKAMU dengan Yahoo ID kamu, kemudian salin ke Layout-Page Elements-Add a Gadget-HTML/JavaScript.
Membuat Top Komentator di Blogger
Top komentator adalah informasi ranking pemberi komentar pada posting blog kamu yang paling banyak. Tujuannya apa memasang top komentator ini? tujuannya adalah memberi penghargaan kepada komentator yang telah rajin mengunjungi, membaca dan meluangkan waktunya untuk memberikan komentar pada posting blog kita.
Gak usah basa-basi, berikut kode scriptnya :
<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ul>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ul>");
}
</script>
<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&
_id=33e2eb4dc25c7c21b9c586e11d2bc904&url=http%3A%2F%2FBLOGNAME.blogspot.com&num=10" type="text/javascript"></script>
Dari kode script diatas, ada beberapa yang harus kamu edit, yaitu :
BLOGNAME = Ganti dengan nama domain blog kamu
10 = Ganti dengan jumlah peringkat uang ingin kamu tampilkan
Membuat Recent Comment
Recent Comment atau bisa disebut dengan komentar terbaru adalah sebuah informasi mengenai komentar pengunjung yang ditampilkan berurutan sesuai waktu komentar. Sebetulnya ada beberapa cara untuk membuatnya dari mulai menggunakan widget creator, alamat feed, maupun java script. Dalam posting ini akan saya jelaskan dua cara memasang widget.
Cara Pertama :
Cara Kedua :
Show 5 item : Akan menampilkan 5 komentar
Item dates : Menampilkan tanggal komentar
Item Sources/Authors : Menampilkan nama pemberi komentar
Silahkan configurasi sesuka kamu!
Untuk membuatnya tidak terlalu sulit, cukup salin kode script dibawah ini di Layout-Page Elements-Add a Gadget-HTML/JavaScript.
<script style="text/javascript" src="http://www.geocities.com/oom_directory/recentcomments.txt"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://workshop-robot.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
Yang perlu dirubah dari kode diatas adalah :
workshop-robot = Ganti dengan nama blog kamu
Tips Menaikkan Alexa Traffic Rank
Kenapa begitu penting Alexa Traffic Rank?, Kenapa para pelajar yang dapat ranking 3 besar atau 10 besar begitu bangga dan senang?, jawaban dari kedua pertanyaan tersebut hampir sama. Kalau begitu penting banget meningkatkan Alexa Traffic Rank, tapi semuanya butuh proses, kalau di sekolah pingin dapat ranking satu maka setiap hari kita harus belajar n belajar. Di dunia maya ini pun juga sama, untuk meningkatkan Alexa Traffic Rank kita harus konsisten, hasilnya mungkin tidak bisa dinikmati langsung.
Langsung aja deh, berikut ini tips meningkatkan Alexa Traffic Rank :
Memasang Alexa Traffic Rank Widget
Alexa Traffic Rank adalah website yang menyediakan informasi mengenai trafik sebuah website/blog. Alexa Traffic Rank memberikan ranking berdasarkan jumlah pengunjung yang mendatangi sebuah website/blog. Kenapa Alexa Rank begitu penting dan banyak dibicarakan para blogger? alasan pertama, memiliki Alexa Traffic Rank tinggi merupakan kebanggaan tersendiri bagi pemilik blog/website, ya kayak sekolah gitu deh, kalau dapat renking satu di raportnya pasti seneng dan bangga. Alasan kedua, ada bebrapa website layanan iklan komersial yang mewajibkan kepada membernya harus memiliki Alexa Traffic Rank yang cukup bagus.
Langkah-langkah memasang Alexa Traffic Rank Winget :
Membuat Read More di Blog
Apa itu Read More? Read More adalah membaca sebuah posting lebih lengkap, artinya posting kita yang tampil pada halaman utama tidak terlalu panjang sehingga mengurangi beban blog kita dan dalam halaman utama kita dapat menampilkan posting yang banyak.
Cara membuat read more yang saya posting ini sedikit berbeda dari tutorial yang ada, read more yang saya bikin hasilnya seperti ini :
Ingin mencobanya? Ikuti petunjuknya dibawah ini :
- Masuk di Layout - Edit HTML
- Beri centang tanda Expand Widget Templates
- Cari kode seperti ini :
- Rubah kode tersebut menjadi :
- Kemudian klik Simpan Template
<p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Baca Selengkapnya >>> "<data:post.title/>"</a>
</b:if>
Lebih baik ngeblog dari pada friendsteran.
Apa aja manfaat ngeblog?
Yang akan kita tampilkan pada halaman utama hanya tulisan "Lebih baik ngeblog dari pada friendsteran." dan tulisan "Apa aja manfaat ngeblog?" disembunyikan. Caranya sebagai berikut :
Lebih baik ngeblog dari pada friendsteran.<span class="fullpost">
Apa aja manfaat ngeblog?</span>
Hasilnya akan seperti ini :
Lebih baik ngeblog dari pada friendsteran.
Baca Selengkapnya >>>"Judul Posting"
Selamat mencoba! Baca Selengkapnya >>> "Membuat Read More di Blog"
Membuat Bener Tukeran Link
Untuk apa sih bikin bener link dan di tuker ma blogger yang lain? ini sangat penting sekali karena dengan dipasangnya bener link kita di blog orang lain berarti kita dapat space iklan gratis tentang blog kita di blog yang memasangnya, apalagi kalau yang bener kita terpasang di blog yang traffic ranknya tinggi, jadi ikut terkenal deh kita.
Berikut cara-caranya :
Link gambarku yang akan muncul seperti dibawah ini
<br/>
<img border="0" src="http://i421.photobucket.com/albums/pp298/workshoprobot/Bener.gif"/>
<br/>
Buat yang mau tukeran link, silahkan copy paste kode script di bawah ini, aku pasti link balik asal gambarx gak terlalu besar
<br/>
<textarea rows="5" cols="35" name="code">
<a href="http://workshop-robot.blogspot.com/" target="_blank"><img border="0" src="http://i421.photobucket.com/albums/pp298/workshoprobot/Bener.gif"/></a></textarea>
<br/>
Kalau link gambarku sudah dimuat di blog kamu, konfirmasi di Shoutmix Chatku. Trims sebelumnya...!
Hasilnya akan seperti ini :
Link gambarku yang akan muncul seperti dibawah ini
Buat yang mau tukeran link, silahkan copy paste kode script di bawah ini, aku pasti link balik asal gambarx gak terlalu besar
Kalau link gambarku sudah dimuat di blog kamu, konfirmasi di Shoutmix Chatku. Trims sebelumnya...!
Untuk kode ini <a href=<a href="http://workshop-robot.blogspot.com/" target="_blank">
ganti dengan
<a href="http://Nama blog kamu.blogspot.com/" target="_blank">
<textarea rows="5" cols="35" name="code"> adalah kode untuk mengatur panjang dan lebar textarea
Selamat Mencoba...
Membuat Form Kirim Pesan
Karena kemarin ada yang tanya "bagaimana cara membuat form kirim pesan seperti dibawah posting di blog ini" maka mau gak mau saya harus membikinya. Sebelum membikin form kirim pesan, saya sarankan kamu menyediakan alamat Email yang khusus untuk menerima pesan dari form ini, "lo kenapa kok gitu?" kalau Email penerima form kirim pesan ini kamu campur dengan yang lain saya takutkan nanti kamu bingung coz ketika kamu pasang form ini siap2 aja menerima pesan yang lumayan buanyak jadi lebih enaknya kamu sediain Email khusus biar kamu gak bingung atau stres.
Buanyak website yang menyediakan fasilitas pembuatan form kirim pesan tapi saya kemarin menggunakan fasilias form kirim pesan dari http://www.emailmeform.com, jadi cara2 yang saya bahas, ya caranya bikin form di emailmeform.com, berikut cara2nya :
Selamat mencoba...!
Menghapus Beberapa Pesan di Shoutmix
Kadang ada beberapa pesan yang masuk di shoutmix kita yang berbau sara atau bahasanya yang kurang sopan dan kita ingin menghapusnya, nah ada tips yang mudah sekali ketika kamu ingin menghapus pesan tersebut, gak perlu login user di www.shoutmix.com. Berikut langkah-langkahnya :
Cara Upload Gambar di Photobucket.Com
Kalau kita membuat blog pasti tidak terlepas dari yang namanya meng-upload gambar. Sebetulnya blogspot juga menyediakan jasa gratis untuk meng-upload gambar di http://picasaweb.google.com/ selain itu juga ada tempat hosting upload gambar gratis yang mudah dan cepat yaitu di Photobucket.Com
Di posting ini yang akan dibahas adalah cara upload gambar di Photobucket.Com, langkah-langkahnya sebagai berikut :
Selesai deh... selamat mencoba ya...
Membuat Gambar Selalu Terlihat
Tidak ada salahnya kalau kamu mencoba yang satu ini, yaitu membuat gambar yang selalu terlihat di pojok bawah sebelah kiri. Gambar ini tidak selalu yang bergerak, bisa juga yang diam dan kamu juga dapat menaruh iklan disini jadi gambar kamu akan selalu terlihat oleh pengunjung walupun skrolnya diturunkan atau dinakkan.
Contohnya seperti ini :
Ingin tau cara2nya? ikuti petunjuk di bawah ini :
Langkah 1
Langkah 2
Kode warna mearah berikut ini :
#top_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
<div id='top_image'>
<img border='0' src='http://i419.photobucket.com/albums/pp277/khusnulhidayat/Doraemon_thumb.gif'/>
</div>
<img border='0' src='http://i419.photobucket.com/albums/pp277/khusnulhidayat/Doraemon_thumb.gif'/>
Silahkan ganti dengan alamat gambar kamu tapi kalau kamu males bikin gambar, ya gak perlu dirubah kodenya.
Buat Tabview Paling Mudah
Setelah browsing mencari tutorial membuat tabview akhirnya aku menemukan tutorial yang lumayan bagus n praktis, awalnya setelah browsing dari berbagai tutorial tabview yang menurut aku terlalu ribet akhirnya aku putuskan memakai cara-cara seperti dibawah ini.
Caranya gak susah kok tinggal copy code script dibawah kemudian salin di Page Elements-HTML/Javascript tidak perlu meng-edit code script template kita. Coba aja kalau g percaya...!
<style type="text/css">div.TabTampil div.TTs{height: 24px; overflow: hidden; }div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active{ background-color: #77d0ee; }div.TabTampil div.Halamans{ clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;}div.TabTampil div.Halamans div.Halaman{ height: 100%; padding: 0px; overflow: hidden; }div.TabTampil div.Halamans div.Halaman div.Alas{ padding: 3px 5px; }div.TabTampil div.TTs a{ border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb; border-bottom:0px solid #0199cb; float: left;display: block; width: 104px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;font-size: 12px; font-weight: 900; color: #222}</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil"><div style="width: 318px;" class="TTs"> <a>My Labels</a> <a>Tab 2 Name</a> <a>Tab 3 Name</a></div>
<div style="width: 316px; height: 200px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<ul><li><a href="http://workshop-robot.blogspot.com/">Workshop Robot</a></li>
<li><a href="http://workshop-robot.blogspot.com/2009/01/membuat-gambar-selalu-terlihat.html">Membuat Gambar Selalu Tampil Diatas Layar</a></li>
</ul></div></div>
<div class="Halaman">
<div class="Alas">
Maaf lom ada isinya...!
</div></div>
<div class="Halaman">
<div class="Alas">
Maaf lom ada isinya...!
</div></div>
</form><script style="text/javascript" src="http://meichelina.googlepages.com/newscriptab.js"></script><script type="text/javascript">tabtampil_inisial('TabTampil');</script>
Kode dibawah ini :
<a href="http://workshop-robot.blogspot.com/2009/01/membuat-gambar-selalu-terlihat.html">Membuat Gambar Selalu Tampil Diatas Layar
Silahkan ganti dengan :
<a href="http://Nama blog kamu.blogspot.com/search/label/Nama label kamu/">Nama label yang akan muncul
Met mencoba...!
Membuat Favicon
Favicon adalah gambar kecil yang menggantikan icon bloger yang terletak di sebelah alamat url seperti gambar dibawah ini.
Ini dia langkah-langkah tuk mengganti favicon :
Seberapa Cepat dan Berat Element Blog Kamu
Gak ada salahnya kalau kita selalu memperhatikan seberapa cepat blog kita dan seberapa besar kapasitasnya. Karena semakin besar kapasitas data yang ada di halaman utama akan membuat blog kamu semakin lemot alias telmi (telat mikir). Nah kalau dah lemot pengunjung pasti males buka blog kita tapi kalau blognya dah terkenal sih gak papa lemot2 dikit kayak ketika kita mau ketemu orang spesial pasti mau kalau disuruh nunggu lama tapi.. kalau yang kita temui orang gak spesial banget pasti bawaannya marah, nah.. gak pinginkan pengunjung menutup blog kita sebelum liat2 isinya, kalau gitu kamu harus slalu perhatikan seberapa cepat blog kamu.
Silahkan masukkan nama situs kamu. Masukkan per situs per baris. Ingat, yang kamu masukkan adalah nama blog atau situs kamu diikuti domain anda. Ingat!!! Tanpa HTTP. Contoh : workshop-robot.blogspot.com
Hasil pengujian akan muncul beberapa saat kemudian. Perhatikan! jika hasil pengujian melebihi 100 KB, saran saya kurangi assesoris pada blog atau situskamu misalnya link yang nggak perlu banget atau yang semacam itulah. Ingin membuktikannya? Silahkan klik disini
Nah.. sekarang coba kamu cek secara detail tiap2 element kamu yang bikin berat, ingat element postingan kamu biasanya, element ini nggak terlalu besar size nya. Tapi ingat, semakin banyak post kamu pada main page, akan tetap terbaca size blog anda lebih berat dibanding post yang sedikit di main page. Saran saya...... jika blog anda adalah blog yang mapan dalam arti sudah punya pembaca setia, apalagi yang udah berlangganan artikel anda, hal ini nggak jadi masalah. Tapi jika blog anda masih (maaf) miskin pengunjung (seperti saya) ada baiknya di main page anda cantumkan maksimal 5 post aja dan di "Read More. Ingin mengetahui seberapa berat tiap2 element kamu silahkan klik disini.
Membuat Teks Berjalan
Untuk membuat pengunjung blog kita semakin betah liat2 blog kita maka gak ada salahnya kalau kamu bikin sedikit animasi pada beberapa teks atau tulisan di blog. Teks berjalan ini biasa disebut dengan Marquee.
Contoh Teks berjalan dari kanan ke kiri :
<marquee align="center" direction="left" height="100" scrollamount="2" width="100%">
marquee dari kanan ke kiri
</marquee>
Hasilnya seperti dibawah ini :
Ganti directionnya dengan right, up atau down
Contoh Teks berjalan bolak-balik :
<MARQUEE align="center" direction="left" height="100" scrollamount="3" width="70%" behavior="alternate">
marquee bolak-balik
</MARQUEE>
Hasilnya seperti dibawah ini :
Contoh Teks berjalan bolak-balik dengan beground warna :
<div align="left"><span ><b><marquee scrollamount="3" behavior="alternate" width="70%" bgcolor="RED">
marquee dengan beground warna
</marquee></b></span></div>
Hasilnya seperti ini :
Contoh marquee bila di tunjuk mouse akan berhenti :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">
silahkan tunjuk ke sini
</marquee>
Hasilnya seperti dibawah ini :
Contoh marquee yang didalamnya terdapat link :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href="http://workshop-robot.blogspot.com/2009/01/optimasi-blog-dengan-google-webmaster.html" target="new">Optimasi Blog dengan Goole Webmaster Tool</a><br/>
<a href="http://workshop-robot.blogspot.com/2009/01/google-sitemap.html" target="new">Google Sitemap</a><br/>
<a href="http://workshop-robot.blogspot.com/2009/01/menambah-meta-tag-pada-html.html" target="new">Meta Tag</a><br/>
</marquee>
Hasilnya seperti dibawah ini :
