Menambah widget pada bagian header

Seperti yang kita ketahui bahwa Add a Gadget adalah sebuah fasilitas yang digunakan untuk menambahkan widget baru pada template. Sehingga kita bisa menambahkan widget atau kode HTML tertentu pada blog kita

Namun ada sebagian template yang tidak menyediakan fasiltas add a gadget pada bagian tertentu sehingga kita tidak bisa menambahkan widget atau kode HTML pada bagian tersebut.

Sebagai contoh, anda ingin menambah widget pada bagian header namun dibagian tersebut tidak ada Add a Gadget.


Lalu bagaimana caranya? Gampang silahkan ikuti langkah-langkah dibawah ini:

1. Login ke blogger. Klik Layout -> Edit HTML
2. Cari kode:

<div id='header'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

atau

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Keterangan:
Maxwidgets: jumlah widget yang bisa ditambahkan
Showaddelement: menampilkan fungsi add a element atau add a gadget.

3. Kalau sudah ketemu, ganti kode diatas dengan kode berikut ini

<div id='header'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

atau

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Itu berarti kita bisa menambahkan maksimal 3 widget pada bagian header. Anda bisa mengganti angkanya dengan nilai lain sesuai kebutuhan.

4. Jika sudah, klik Save Template lalu klik Page Element maka hasilnya akan menjadi seperti ini.


Untuk bagian Blog Post cari kode:

<div id='main'>
<b:section class='main' id='main' showaddelement='no'>

Sedangkan untuk bagian Footer cari kode:

<div id='footer'>
<b:section class='footer1' id='footer1' showaddelement='yes'>

Cara Mengubah Tampilan Kursor Blog

Secara default, tampilan cursor pada blog adalah berbentuk panah namun bagi anda yang merasa bosan dengan tampilan tersebut atau ingin memberi decak kagum bagi pengunjung. Anda bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang ke blog anda, tampilan kursornya akan berubah sesuai dengan icon yang anda gunakan. Agar lebih jelas anda bisa lihat disini.

Untuk mengubah tampilan kursor menjadi icon gambar, caranya sangat mudah. Berikut langkah-langkahnya:

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Cari kode </head>
3. Letakkan kode css berikut diatasnya

<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>

Keterangan:
Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin anda gunakan.

4. Setelah itu, simpan template anda. Selesai

Jika anda tidak memiliki icon kursor, coba kunjungi http://www.totallyfreecursors.com. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa anda pilih sesuai selera

Memasang Tombol Like Facebook Di Blog

Posted by Herman on Friday, July 02, 2010 48 comments

Beberapa waktu yang lalu saya pernah mengulas tentang cara mempromosi blog dengan memasang feed blog di Facebook.

Dengan cara ini maka semua postingan blog anda akan muncul di halaman profil Facebook sehingga dapat dinikmati oleh teman facebook anda.

Pada postingan ini saya akan membahas tentang teknik lain untuk menyebarkan artikel blog anda di Facebook yaitu dengan memasang tombol like Facebook pada postingan blog anda.

Keuntungan memasang tombol like ini adalah pembaca dapat dengan mudah berbagi postingan yang mereka sukai kepada teman facebook mereka hanya dengan satu klik. Dan sebagai pemilik blog, anda juga mendapat keuntungan berupa tambahan trafik dari pembaca yang mengelink artikel anda di profil Facebook mereka.

Nah bagi anda yang tertarik memasang tombol like ini, silahkan ikuti langkah- langkah dibawah ini:

1. Buka Blogger. Masuk ke menu Design -> Edit HTML

2. Beri centang pada "Expand Widget Templates"

3. Cari kode <data:post.body/>

4. Jika anda menemukan dua kode <data:post.body/> maka pilih yang pertama

5. Letakkan kode berikut ini dibawah <data:post.body/> jika anda ingin memasang tombol like dibawah posting atau letakkan diatas <data:post.body/> jika anda ingin memasang tombol like diatas posting

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' height='30' scrolling='no' style='border:none; overflow:hidden; '/>

6. Lalu Save template anda

Mengganti Link Read More dengan Icon Gambar

Beberapa waktu yang lalu saya telah menjelaskan cara membuat link read more atau baca selengkapnya dalam postingan blog. Ternyata ada sobat blogger yang bertanya kepada saya apakah bisa link read more diganti dengan gambar? Jawabannya tentu saja bisa dan sangat mudah.

Nah bagi sobat lain yang kebetulan juga ingin tahu bagaimana cara mengganti link read more menjadi icon gambar langsung saja ikuti tutorial berikut ini:

1. Pertama-tama, upload icon read more yang ingin anda gunakan ke situs image hosting. Setelah itu, catat alamat url gambarnya. Contoh https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBiIIk4DpihUWz1qQ_yVKjJwGUUkN-JqKBareZMR5wmftA425KG-5E2LTgJeCyOVyxjYdUc_fw6_I2sHYuBIQXsRCZn-z_zccdkMDh6n7tdQlra4xoQAU-wxIoo-9cGypRt6BZC8mEgUuR/

2. Login ke Blogger. Klik Design->Edit HTML
3. Beri centang pada 'Expand Widgets Templates'
4. Cari kode seperti ini

<span id='showlink'>
<a expr:href='data:post.url'>teks read more anda</a>
</span>

5. Ganti tulisan yang dicetak tebal dengan kode berikut

<img src="alamat-gambar-anda" />

Ingat, ganti teks berwarna merah dengan alamat url gambar anda yang sebenarnya.

6. Jika sudah, klik tombol Save. Selesai. Mudahkan?

Mempermudah Aktivitas Ngeblog Dengan Zementa

Posted by Herman on Wednesday, July 15, 2009 14 comments

Tadi pas blogwalking saya menemukan sebuah tool yang cukup bermanfaat bagi pengguna blogger. Namanya adalah Zementa. Tool ini bersifat browser plug-in sehingga kita tidak perlu memasukkan javascript ataupun kode HTML kedalam template untuk menggunakannya tetapi cukup dengan menginstal pada browser yang kita gunakan maka tool ini akan berfungsi. Zementa sudah mendukung hampir semua jenis browser seperti IE (Internet Explorer), Firefox, Google Chrome dan Safari sehingga anda tidak perlu khawatir tidak dapat mencicipi tool ini.

Tampilan dari tool zementa ini sangat user-friendly dimana setelah kita memasangnya. Pada sebelah kanan dan bawah post editor akan secara otomatis muncul gadget Zementa yang berisi gambar, link, tag (label), dan sumber informasi yang berhubungan dengan artikel yang disuguhkan. Contoh tampilannya seperti screenshot dibawah ini.


Dengan adanya tool ini, maka waktu ngeblog kita bisa dipersingkat karena kita tidak perlu menghabis banyak waktu untuk mencari gambar yang berhubungan. Tetapi tool ini akan secara otomatis menampilkan gambar, link, dan tag (label) yang sesuai dengan kata-kata yang kita ketik pada bagian post editor.

Selain itu tool ini juga akan secara otomatis menyuguhkan artikel yang berhubungan. Sehingga bisa dijadikan sebagai sumber referensi maupun informasi tentang topik yang kita bahas.

Dan gambar yang disuguhkan zementa sudah mendapat lisensi atas hak cipta sehingga kita tidak perlu khawatir atas tuntutan apapun bila kita menggunakan gambar milik orang lain. Nah bagi anda yang ingin mencoba kehebatan tool ini. Langsung aja menginstal plugin atau addon zementa di http://www.zemanta.com atau klik disini untuk pengguna Firefox dan disini untuk pengguna IE.

Sekedar info
Secara default, setelah anda menginstal, gadgetnya akan berada disamping kanan post editor. Jika anda ingin menggantinya ke sebelah kiri. Anda bisa mengganti posisinya di menu Preferences. Dan setiap kali anda memposting artikel menggunakan gambar, link atau label dari zementa maka pada bagian bawah artikel akan muncul signature zementa dalam bentuk gambar. Jika anda tidak ingin menampakkan signaturenya, anda bisa mengganti menjadi transparant image pada menu Preferences atau menghapus kode signature pada bagian post editor.

Selamat mencoba. Semoga bermanfaat

Tips Meningkatkan Trafik Blog

Posted by Herman on Monday, June 22, 2009 26 comments

Memiliki blog yang ber-traffic tinggi merupakan impian dari setiap blogger. Karena dengan memiliki blog yang rame pengunjung, maka para advertiser atau pemasang iklan akan berbondong-bondong datang ke blog kita untuk beriklan yang artinya duit akan terus menerus mengalir ke kantong kita. :D

Oleh karena itu, tidak heran jika setiap webmaster selalu berlomba-lomba mencari segala cara untuk meningkatkan trafik blognya. Tetapi untuk memiliki blog yang bertrafik tinggi itu tidaklah mudah. Kita harus mengorbankan banyak waktu, tenaga, pikiran dan uang untuk mewujudkannya. Tetapi percayalah selama anda mempunyai tekad dan niat yang kuat maka apapun impian anda bisa terwujud.

Nah untuk membangun trafik blog, ada 2 hal penting yang harus anda lakukan yaitu:

Konten
Konten adalah raja. Setiap pengunjung yang datang ke blog anda adalah untuk membaca konten anda (mencari informasi, solusi, dan ide). Oleh karena itu, tulislah konten yang berkualitas dan bermanfaat bagi pengunjung agar mereka selalu kembali ke blog anda.

Promosi
Setelah memiliki konten, langkah selanjutnya yang harus anda lakukan adalah promosi. Promosi merupakan jantung dari bisnis. Tanpa promosi sebagus apapun konten anda tidak ada yang tahu. Percuma. Jadi jika anda ingin menghasilkan trafik yang melimpah. Maka langkah ini wajib anda lakukan.

Berikut adalah cara-cara untuk mempromosikan blog anda.

1. Mendaftar blog anda ke search engine. Selengkapnya bisa anda pelajari disini.

2. Mendaftar blog ke blog direktori seperti Technorati, Mybloglog, dan Blogcatalog. List selengkapnya bisa anda download disini.

3. Submit artikel anda ke social bookmarking. Untuk artikel inggirs submit ke Technorati, Digg, Google Buzz, Stumbleupon dan delicious. Sedangkan artikel indonesia submit ke Lintas berita dan Infogue.

4. Mencantumkan alamat blog anda pada situs jejaring sosial seperti Facebook, Friendster, hi5 dan myspace.

5. Mencantumkan alamat blog pada signature email.

6. Aktif di forum dengan mencantumkan alamat blog pada bagian signature.

7. Blogwalking
Ini merupakan cara termudah untuk mempromosi blog anda. Selain dapat meningkatkan trafik blog. Cara ini juga dapat menjalin tali silahturami antar sesama blogger.

8. Meninggalkan komentar diblog lain. Hampir sama dengan blogwalking dimana bertujuan untuk meninggalkan jejak di blog lain. Jangan lupa untuk mencantumkan alamat blog anda agar pemilik blog dapat membalas kunjungan anda.

9. Pasang iklan gratis di situs iklan baris seperti forumiklan.com, iklanbisnisku.com, Iklanplaza.com, dan lain-lain.

10. Memasang widget Blogupp. Informasi selengkapnya silahkan baca disini


Sebenarnya masih banyak cara-cara lain. Tapi saya yakin cara-cara diatas sudah cukup untuk mendatangkan trafik bagi blog anda

Apa Itu Alexa Rank dan Manfaatnya

Posted by Herman on Monday, June 15, 2009 21 comments

Setelah membahas mengenai google page rank, kali ini saya ingin mengulas sedikit mengenai Alexa rank. Karena selain google page rank, Alexa rank merupakan salah satu faktor penentu untuk mencari uang di internet. Jadi jika anda serius untuk mencari uang di internet maka Alexa rank wajib anda ketahui.

Apa itu Alexa rank?
Alexa rank adalah sebuah alat yang dibuat oleh Alexa.com untuk menganalisa seberapa besar trafik atau page views dari sebuah website berdasarkan jumlah pengunjung yang memasang alexa toolbar pada browser mereka. Setelah itu, data-datanya akan dikumpulkan dan kemudian dirangking berdasarkan trafiknya. Semakin besar trafiknya semakin rendah rangkingnya.

Lalu bagaimana cara untuk mengetahui ranking Alexa website kita?
Ada 2 cara yang bisa anda gunakan untuk mengetahui rangking alexa rank web anda yaitu:

I. Memasang widget alexa pada blog anda yang tampilannya seperti ini

Cara pemasangan:

1. Buka http://alexa.com lalu klik For Site Owners

2. Kemudian klik Site Widgets yang terletak disebelah kiri

3. Masukkan alamat website anda pada widget yang ingin anda pasang. Contohnya: hermanblog.com lalu klik Build Widget

4. Copy kode widget yang ingin anda pasang lalu pastekan ke blog anda. Selesai


II. Menginstal alexa toolbar pada browser anda yang tampilannya seperti ini.


Cara pemasangan:

1. Pada halaman alexa.com. Klik Toolbar

2. Jika menggunakan browser Firefox. Maka halaman yang tampil adalah seperti ini

3. Klik Get Sparky lalu ikuti petunjuknya untuk menginstal alexa toolbar

4. Jika anda menggunakan browser Internet Explorer maka halaman yang muncul adalah seperti ini


5. klik Instal Now untuk menginstal alexa toolbar pada browser anda.

6. Jika sudah restart browser anda lalu lihat hasilnya.

Lalu apa manfaat alexa rank bagi blog?
Jika blog anda dimanfaatkan untuk mencari uang di internet maka alexa rank sangat penting bagi anda. Karena banyak program-program penghasil dolar di internet seperti TLA, Sponsoredreviews, Blogsvertise, Buyblogreviews, Linkworth, dll yang mensyaratkan alexa rank untuk bisa bergabung. Jadi semakin kecil rangking alexa blog anda semakin banyak program yang bisa anda ikuti yang artinya semakin besar pula kesempatan anda untuk menghasilkan uang di internet. Selain itu, alexa rank juga bisa digunakan untuk menentukan populer atau tidaknya sebuah blog. Blog yang memiliki alexa rank kecil biasanya akan lebih populer dan disukai oleh para advertiser dibandingkan blog yang memiliki alexa rank gede

Cara Membuat Kotak Daftar Isi

Postingan ini saya buat untuk menjawab pertanyaan dari seorang rekan blogger yang menanyakan kepada saya melalui email. Beliau bertanya kesaya, "mas, bagaimana cara membuat kotak blogger tutorial seperti di blog mas herman?" Hm.. Mungkin yang dimaksud adalah yang ini kali ya :)

Blogger Tutorial

1. Apa itu blog

2. Panduan membuat blog di blogger

3. Bagaimana cara memposting artikel pada blog

4. Optimalkan tampilan blog dengan template modern

5. Mengganti header template pada blogger

6. Cara mudah mengganti warna dan font template

7. Mengenali fungsi-fungsi dalam menu setting blog

8. cara menambahkan read more/ baca selengkapnya pada blogger

9. Cara membuat dan memasang shoutbox pada blogger

10. Cara mengatasi masalah pada kode read more

11. Memasang foto di profile

12. Apa fungsi label

13. Cara menambahkan yahoo emoticons pada blogger

14. Memposting kode HTML pada artikel

15. Mendaftar dan mengupload gambar di photobucket

16. Menambah favicon pada blogger

17. Menambahkan search box atau kotak pencari pada blogger

18. Cara menghapus gambar di picasa web album

19. Tips menghilangkan warna pada kotak blockquote

20. Cara mendapatkan kode warna dengan photoshop

21. Cara mendapatkan kode warna dengan ms paint

22. Cara membackup template, widget, dan artikel

23. Cara menghilangkan icon quick edit berbentuk tang dan obeng

24. Memasang feedjit pada blogger

25. Memasang jam pada blog

26. Membuat efek marquee atau teks berjalan

27. Tentang RSS feed

28. Memanfaatkan translator online dari google

29. Pasang Google Translator pada blog

30. Cara membuat kotak scrollbar pada blogger

Ok sebenarnya cukup mudah untuk membuat daftar isi seperti diatas. Bagi anda yang sudah lama ngeblog pasti sudah tahu cara membuatnya hanya saja mungkin caranya yang berbeda.

Nah berikut saya akan memberikan cara membuat kotak daftar isi dengan cara saya sendiri. Silahkan diikuti bagi yang ingin mencobanya.

1. Login ke blogger. Buka menu Design -> Page Elements
2. Klik Add a Gadget -> HTML/Javascript. Masukkan kode dibawah ini kedalam kotak

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">

<div class="list">
1. <a href="http://www.hermanblog.com/2008/10/apa-itu-blog_15.html">Apa itu blog</a></div>

<div class="list">
2. <a href="http://www.hermanblog.com/2008/10/cara-membuat-blog-di-blogger_16.html">Panduan membuat blog di blogger</a></div>

</div>

Keterangan:
380px merupakan lebar kotak
180px merupakan tinggi kotak
#ffffff pada background-color merupakan warna background
#ffffff pada border merupakan warna garis pinggir. Silahkan ganti sesuai dengan template anda.

Ingat:
Ganti tulisan yang berwarna merah dengan alamat postingan anda dan ganti tulisan berwarna merah yg dicetak tebal dengan judul postingan anda. Jika anda ingin menambah postingan baru maka copy kode yang berkedip lalu letakkan diatas kode </div>

Jangan lupa untuk mengganti angkanya dengan angka 3 dan begitu seterusnya jika anda ingin menambah postingan baru lagi.

3. Kalau sudah klik Save Template. Selesai.

Jika anda ingin menggunakan icon gambar sebagai pengganti angka maka ganti kode ini

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

Dengan kode berikut

<style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8xuMoX6G3ux3VHcJytNMNk2gaN-RXFpjxpjZBkXDdufbDmupyXVW30enMpxQ42eBY8UrZvCGZVA091jqOMLz-Unh5m9-yW0l6QHgpte_jE2J2Bnwtv6sF7z4WthfHwhcoibC7Kd2Om7f/") no-repeat left center;
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px 0px 0px 20px;
}
</style>

Ganti tulisan yang berwarna merah dengan alamat icon gambar anda dan hapus angka pada setiap judul postingan

Mengoptimalkan Meta Tag Title Blogger

Untuk template standar blogger, ketika anda mengklik pada salah satu postingan anda biasanya yang muncul pada menu bar browser adalah judul blog anda yang kemudian diikuti dengan judul posting seperti contoh dibawah ini.

Dan pada halaman index search engine yang muncul adalah seperti ini.






Cara ini kurang bagus untuk SEO karena judul posting anda akan tertutup oleh judul blog apalagi bagi yang memberi judul blognya panjang.

Nah untuk mengatasi masalah tersebut kita bisa mengakalinya dengan menukar posisinya yaitu dari judul blog - judul posting menjadi judul posting - judul blog. Sehingga hasilnya menjadi seperti ini

Pada menu bar browser

Pada halaman index search engine






Ok uda jelaskan? Nah bagi anda yang tertarik. Silahkan ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Buka menu Edit HTML

2. Cari kode <title><data:blog.pageTitle/></title>

3. Ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/><title><data:blog.pageTitle/></title>
</b:if>

4. Kalau sudah klik Save Template

Pasang Meta Tag Keyword dan Deskripsi di Blogger

Melanjut postingan sebelumnya tentang cara mendaftar blog ke search engine dan tips agar blog cepat terindeks di search engine. Maka pada postingan ini saya akan membahas tentang SEO (Search Engine Optimization) lagi.

Ada banyak teknik SEO yang bisa diterapkan untuk mengoptimalkan blog anda. Seperti membangun backlink, mengoptimalkan konten, memasang meta tag, dan mendaftar blog ke direktori atau search engine.

Nah dari sekian teknik diatas, cara yang paling mudah diterapkan adalah memasang meta tag. Memasang meta tag pada blog sama seperti memberi identitas pada blog kita. Tujuannya agar search engine lebih mudah mengenali isi dari blog kita. Karena pertama kali yang di crawl atau ditelusuri pada blog kita adalah bagian title blog sehingga alangkah baiknya jika kita selipkan deskripsi atau keyword yang berhubungan dengan isi blog kita di bagian tersebut.

Untuk memasang meta tag di blogger caranya sangat mudah:

1. Buka blogger. Klik Design -> Edit HTML

2. Letakkan script meta tag berikut dibawah <title><data:blog.pageTitle/></title>

<meta name="description" content="deskripsi blog"/>
<meta name="keywords" content="keyword atau kata kunci blog"/>
<meta name="robots" content="index follow"/>

Keterangan:
Ganti tulisan yang dicetak merah sesuai dengan penjelasan berikut:

deskripsi blog: deskripsi singkat tentang topik blog anda. Contoh: "tutorial membuat blog untuk blogger". Usahakan kalimatnya tidak lebih dari 150 karakter

keyword atau kata kunci blog: isi dengan keyword atau kata kunci yang berhubungan dengan topik blog anda. Contoh: "blogger tips, blogger tutorial, tutorial blog". Usahakan untuk tidak mengulangi 1 kata lebih dari 3 kali dan tidak mengisi kata kunci yang tidak relevan dengan isi blog anda. Misalnya blog anda berisi tentang travel lalu anda memberi keyword "free download, foto bugil, video porno" yang merupakan keyword populer di internet. Karena hal ini akan dianggap spamming.

index follow: berarti meminta spider untuk mengindeks atau menelusuri link yang ada pada halaman blog. Jika anda tidak ingin spider untuk mengindeks link pada halaman blog anda. Gunakan perintah "noindex nofollow".

3. Jika sudah, klik Save Template. Selesai.