Blogger Tips | Blogspot Tutorial | Optimasi Blog | Herman Blog

Choosing a Good Web Hosting

noreply@blogger.com (Herman) — Wed, 28 Mar 2012 02:12:43 PDT

Choosing a good web hosting provider is very important because it directly affects your website’s performance. Therefore you must choose your web host service carefully. When it comes to choosing a web hosting service, ensure that the web hosting company can provide reliable service. It means that the company should be able to provide high quality services such as high server uptime, good server performance and reliable support. All of these are crucial to the success of your web business.

So when choosing a web hosting provider, make sure you check those things first. Do not just sign up based on the price. You will end up spending more money later on if you get a cheap web hosts that is not reliable. If the server has poor uptime and performance, it will hurt your business in the long term.

If you want to find a good and reliable web hosting, I recommend you to check this site http://www.webhostingfan.com. In webhostingfan, you will get complete information about the features and price of each web hosting services. On the website, you can also read the reviews given by webmasters who have been using the hosting service so it can help you decide which web hosting service is the best for your needs.

In addition, they also provide many useful articles and tips related to web hosting which can gain your web hosting knowledge. So, visit the website now, I'm sure you'll find the best web hosting service provider in webhostingfan.com.

Cara Mensubmit RSS Feed Blog ke Facebook dengan RSS Graffiti

noreply@blogger.com (Herman) — Wed, 23 Feb 2011 19:50:21 PST

Jika anda ingin postingan blog anda dapat dibaca oleh lebih banyak orang maka salah satu cara yang harus anda lakukan adalah mensubmit RSS feed ke Facebook. Dengan mensubmit RSS feed blog anda ke Facebook, maka setiap kali anda memposting artikel baru, artikel tersebut akan otomatis muncul dihalaman profil facebook anda, sehingga teman atau sahabat facebook anda dapat membaca artikel blog anda langsung di halaman profil facebook anda. Jika artikel anda bagus tentu mereka akan mengunjungi blog anda untuk membaca lebih lanjut sehingga dapat turut mempromosi blog anda.

Mengenai cara mensubmit RSS feed ke Facebook sebenarnya sudah pernah saya posting di blog ini. Namun karena Facebook telah mengganti tampilan halamannya dan fitur untuk submit RSS juga sudah ditiadakan sehingga cara sebelumnya sudah tidak dapat digunakan lagi.

Meskipun Facebook sudah tidak menyediakan fitur untuk submit rss feed. Namun kini ada banyak aplikasi facebook yang dapat melakukan tugas ini. Salah satunya yang saya gunakan adalah RSS Graffiti.

RSS Graffiti akan secara otomatis mensubmit postingan blog anda ke halaman profil facebook anda setiap kali anda update posting sehingga anda tidak perlu submit artikel secara manual ke facebook.

Apa yang harus anda lakukan hanya buka aplikasi RSS graffiti dan tambahkan alamat feed blog anda. Setelah itu semuanya akan berjalan secara otomatis.. tis.. tis.. tis

Selain itu, RSS graffiti juga menyediakan beberapa pengaturan sehingga anda dapat mengkustomisasi tampilan feed sesuai dengan yang anda inginkan.

Beberapa fitur yang disediakan oleh RSS graffiti antara lain:

Memperbolehkan anda untuk mengatur tampilan artikel dalam bentuk feed biasa atau pesan singkat seperti Twitter
Menyaring artikel dari tanggal tertentu
Memberi pesan tambahan pada setiap artikel yang dipublikasi
Mengatur jadwal posting
Mempublikasi twitter tweak ke facebook

Cara mensubmit RSS Feed ke RSS Graffiti

1. Login ke Facebook.
2. Buka aplikasi RSS Graffiti dan jalankan.
3. Setelah itu, klik Add Feed.
4. Kemudian akan muncul halaman seperti berikut

Feed URL: isi alamat feed blog anda. Contoh http://bloganda.blogspot.com/feeds/posts/default
Source Name: Isi nama blog anda
Source URL: Isi alamat blog anda
Post style: Biarkan saja 'Standard'. Jika anda ingin postingan muncul dalam bentuk pesan singkat seperti Twitter pilih 'Compact' atau 'Status updates'

5. Jika sudah tekan Save. Selesai

Sekarang setiap kali anda memposting artikel, artikel tersebut akan secara otomatis muncul dihalaman facebook anda.

Cara Menampilkan Form Komentar Hanya di Postingan Tertentu

noreply@blogger.com (Herman) — Wed, 09 Feb 2011 22:25:58 PST

Beberapa hari yang lalu, ada seorang sobat blogger yang bertanya kepada saya melalui email tentang cara menampilkan form komentar hanya di postingan tertentu. Berhubung pertanyaannya cukup menarik dan tidak menutup kemungkinan masih ada blogger lain yang belum tahu caranya. Maka pada kesempatan ini saya akan mencoba untuk menjelaskannya disini.

Nah untuk menampilkan form komentar hanya di postingan tertentu caranya sangat mudah, karena blogger.com sudah menyediakan opsi untuk hal itu, jadi kita tinggal tentukan postingan mana yang mau ditampilkan form komentarnya dan mana yang tidak.

Opsi tersebut bisa anda temukan di bawah halaman post editor. Perhatikan kolom yang saya garis merah dibawah ini:

Secara default, opsi komen akan selalu "allow", jika anda tidak ingin pembaca memberi komentar pada postingan anda, cukup pilih "Don't allow" maka form komentarnya akan hilang. Sangat mudah bukan?

Selamat mencoba. Jika ada yang kurang jelas silahkan bertanya melalui form komentar.

Google Update Pagerank Juga Akhirnya

noreply@blogger.com (Herman) — Mon, 24 Jan 2011 20:36:19 PST

Setelah penantian lama, akhirnya google update pagerank juga kemarin tepatnya tanggal 21 Januari 2011. Ini merupakan yang pertama kalinya google update pagerank sejak bulan April 2010 lalu.

Jika dibandingkan dengan update2 sebelumnya, update PR kali bisa dikatakan yang paling lama karena butuh waktu lebih kurang 9 bulan sedangkan biasanya hanya 3-4 bulan saja. Apakah Google sudah mengubah waktu update pagerank menjadi 9 bulan sekali atau hanya kesalahan teknis saja? Hm.. entahlah, hanya Google yang tahu. Tapi yang pasti rumor tentang Google telah meniadakan konsep PR itu tidak benar. Ini artinya peluang untuk meraup dolar dari sell links dan bisnis Paid To Review (PTR) masih terbuka lebar.

Dalam update kali ini, saya sendiri cukup puas, karena beberapa PR blog saya naik, salah satunya adalah blog tutorial ini naik dari PR0 menjadi PR4 dan tidak ada PR yang drop dalam update kali ini. hehehe...

Nah bagaimana dengan blog anda? Semoga hasilnya juga memuaskan.

Cara Setting atau Custom DNS di Namecheap

noreply@blogger.com (Herman) — Sun, 10 Oct 2010 00:54:19 PDT

Pada posting sebelumnya saya telah menjelaskan cara membeli domain di Namecheap. Setelah membeli domain, langkah selanjutnya yang harus anda lakukan adalah melakukan setting atau custom DNS di domain anda. Ini bertujuan agar domain anda dapat terhubung ke hosting anda.

Jadi secara gampang DNS ibarat pipa air yang menyalurkan air dari mata air ke rumah anda. Saya ibaratkan domain adalah kran dan hosting adalah PAM (Perusahaan Air Minum). Untuk dapat menikmati aliran air dari PAM, anda perlu menghubungkan kran di rumah dengan jaringan PAM melalui pipa air.

Nah proses custom DNS lebih kurang seperti itu. Jadi agar anda dapat mengakses website atau blog dengan nama domain yang telah anda beli di Namecheap, anda harus melakukan setting pada sistem DNS di domain anda. Sistem DNS ini nanti akan secara otomatis menghubungkan domain anda ke layanan hosting.

karena dalam tema postingan ini adalah mensetting DNS di Namecheap maka saya akan menggunakan halaman Namecheap sebagai panduannya. Bagi anda yang membeli domain dari domain registrar lainnya, caranya lebih kurang sama. Intinya adalah mengganti atau mengubah nama DNS di akun domain registar anda dengan DNS hosting anda. Untuk lebih jelasnya, perhatikan langkah-langkah berikut ini:

1. Pertama-tama buka situs Namecheap, lalu login ke akun Namecheap anda. Pada area member pilih Manage Domains

2. Kemudian pilih domain yang mau diganti DNS dan klik Transfer DNS To Webhost

3. Kemudian anda akan dibawa kehalaman custom DNS. Karena anda ingin mengarahkan alamat domain ke hosting anda maka centangin Specify Custom DNS Servers dan masukkan nama DNS hosting anda pada kotak yang disediakan. Nama DNS ini biasanya akan dikirimkan ke email anda setelah hosting anda diaktifkan. Jika anda tidak menerimanya, anda bisa contact pihak hosting anda untuk menanyakan perihal DNS mereka. Jika sudah, klik Save Changes

4. Kemudian anda akan mendapat pesan "Domain server updated!". Selamat! Proses pengalihan telah berhasil. Tunggu maksimal 24 jam hingga domain tersebut secara sempurna berpindah ke hosting baru anda.

Panduan Membeli Domain di Namecheap

noreply@blogger.com (Herman) — Sat, 02 Oct 2010 03:43:26 PDT

Jika anda ingin serius menjalankan bisnis secara online maka menggunakan TLD (Top Level Domain) adalah hal yang sangat penting. Karena kebanyakan customer atau pemasang iklan lebih suka bertransaksi dengan situs yang menggunakan TLD dibandingkan subdomain atau domain gratisan. Dengan kata lain peluang untuk menghasilkan uang akan lebih besar dengan TLD.

Selain itu, dengan menggunakan TLD maka nama domain tersebut menjadi milik anda sepenuhnya sehingga anda tidak perlu khawatir suatu saat situs atau blog anda dibanned oleh penyedia layanan blog gratisan seperti Blogger.com, Wordpress.com, dan lain-lain.

Untuk mendapatkan TLD seperti .com, .net, org, dll, kini sudah sangat mudah, karena saat ini ada banyak sekali situs yang melayani domain registrar baik lokal maupun luar negeri dengan harga terjangkau.

Contoh situs penyedia domain lokal:
1. Idwebhost
2. Hostingtangguh
3. Idebagus
4. Jagoanhosting
5. Dapurhosting

Contoh situs penyedia domain luar negeri:
1. Godaddy
2. Namecheap
3. Cheapdomain

Selain yang disebutkan diatas, masih banyak situs penyedia domain lainnya. Anda bisa mencari sendiri melalui search engine dengan kata kunci “cheap domain” atau “domain murah”.

Kalau saya sendiri membeli domain di Namecheap. Alasan saya memilih Namecheap karena di Godaddy tidak menerima pembayaran melalui Paypal. Sehingga pilihan saya jatuh pada Namecheap yang merupakan salah satunya situs penyedia domain luar negeri terpercaya (yang saya tahu) yang menerima pembayaran melalui Paypal.

Jika anda memiliki kartu kredit, silahkan membeli domain di Godaddy saja karena harganya lebih murah. Sebagai contoh di Godaddy untuk domain berekstensi .com harganya hanya US$7.67 per tahun (setelah diskon) sedangkan di NameCheap harganya US$8.81 per tahun (setelah diskon). Namun dengan kurs US$1 = Rp9000 (per tgl 28 Sep 2010) , harga tersebut masih tergolong murah dibandingkan dengan situs penyedia domain lokal yang mematok harga dari Rp85.000 - Rp100.000 per tahun. Selain itu harga tersebut sudah termasuk fitur Whois Guard sehingga bisa dikatakan sangat murah.

Nah bagi anda yang ingin membeli domain di Namecheap.com. Silahkan ikuti langkah-langkah dibawah ini:

1. Klik disini untuk membuka situs Namecheap
2. Jika anda belum memiliki akun di Namecheap, buat terlebih dahulu dengan klik Signup for a free account.
3. Jika sudah login ke akun anda. Pada area member ketik nama domain yang anda inginkan pada search box lalu klik tombol GO

4. Jika domain yang anda cari sudah terdaftar maka gunakan nama domain lain. Usahakan untuk tetap fokus pada ekstensi .com.

5. Jika statusnya available berarti domain tersebut bisa digunakan. Klik Add to cart

6. Selanjutnya anda akan dibawa ke halaman berikut. Tentukan lama waktu anda ingin berlangganan domain tersebut pada kolom Duration dan masukkan kode kupon pada pada kotak Coupon code untuk mendapat potongan harga. Nah kebetulan di bulan september ini ada promo domain jadi anda bisa mendapatkan domain .com, .net, dan .org dengan harga yang lebih murah yaitu hanya $5.99 dari harga normal $8.81 (setelah diskon). Kode promo bulan september adalah SAVEBIG. Kupon diskon ini biasanya akan berubah setiap bulan. Jadi jika anda membeli domain di bulan lainnya. Silahkan cari kode kuponnya di Google sesuai bulan pendaftaran anda. Misalnya anda membeli domain di NameCheap pada bulan November 2010 maka ketik NameCheap Coupon codes for November 2010, dst. Jika sudah klik Apply Coupon.

7. Jika kode yang anda masukkan benar, maka harganya akan berubah dari US$9.69 menjadi US$8.81. Selanjutnya klik Standard Checkout

8. Kemudian anda akan disuguhkan sebuah form. Isi semua data anda yang diperlukan dengan benar lalu klik Continue to options

9. Beri tanda centang pada kolom enable untuk mendapat fitur Whoisguard secara gratis lalu klik Continue to options

10. Jika anda sudah menyewa hosting dan ingin segera mengarahkan DNS hosting ke domain anda maka masukkan DNS hosting anda pada kotak 'Use custom name servers'. Jika tidak maka biarkan saja begitu lalu klik Continue Checkout

11. Selanjutnya pilih metode pembayaran anda. Karena kita ingin membayar lewat paypal maka gunakan opsi Pay using the funds available in your account. Berhubung saya punya saldo sebesar US$0.09 di akun Namecheap yang merupakan sisa pembelian domain sebelumnya maka saya cukup menambahkan dana sebasar US$8.72 saja. Untuk menambah saldo klik Add funds.

12. Pilih Add Funds Using Paypal

13. Masukkan jumlah dana sesuai dengan nilai transaksi anda di Namecheap pada kotak Amount to Add lalu klik Proceed to Paypal

14. Tunggu beberapa saat hingga terbuka halaman Paypal. Login ke akun paypal anda.

15. Perhatikan deskripsi pembayarannya, jika jumlahnya benar klik Pay Now

16. Jika transaksi berhasil maka akan muncul halaman 'Thank you for your payment' dan berisi transaksi id anda. Sampai disini anda telah berhasil menambah dana ke akun Namecheap. Selanjutnya, klik Go to account paypal overview jika anda ingin melihat sisa saldo anda di Paypal atau klik Return to Unifiedregistrar untuk kembali ke halaman NameCheap. Tapi agar data paypal anda tidak jatuh ke pihak lain, sebaiknya jangan gunakan link Return to UnifiedRegistrar untuk balik ke halaman Namecheap. Tutup halaman tersebut lalu buka kembali situs Namecheap.com

17. Setelah masuk ke halaman Namecheap, login ke akun Namcheap anda lalu ulangi langkah 3 hingga tiba di halaman seperti gambar dibawah ini. Sekarang dana anda telah mencukupi untuk membeli domain. Klik Proceed to secure payment

18. Kemudian anda akan masuk ke halaman konfirmasi seperti berikut. Klik Charge and Process untuk memproses pembayaran anda

19. Jika muncul pesan “Completed. Redirecting to summary page” maka proses pembelian domain telah berhasil. Tunggu berapa saat hingga anda berhasil dialihkan ke halaman summary seperti contoh dibawah ini. Klik Continue untuk kembali ke halaman account anda

20. Selesai. Sekarang anda telah memiliki domain sendiri. Silahkan ketik alamat domain anda di address bar untuk melihatnya.

Agar alamat domain anda dapat digunakan anda harus mengarahkan DNS hosting anda ke Namecheap. Untuk caranya akan saya bahas pada postingan berikutnya. See you...

Promo Domain: Hanya $5.99 di Namecheap

noreply@blogger.com (Herman) — Tue, 28 Sep 2010 17:52:18 PDT

Sepertinya Namecheap tidak mau kalah dengan Godaddy yang sering mengadakan promo domain untuk menggaet customer baru. Di akhir bulan setember ini giliran Namecheap yang mengadakan promo domain dengan diskon hingga 40% untuk domain ekstensi .com, .org, dan .net. Promo ini berlaku sampai tanggal 30 September 2010.

Dimasa promo ini anda bisa mendapatkan TLD populer (.com, .net dan .org) dengan harga yang sangat murah yaitu $5.99 untuk tahun pertama dari harga normal $9.98. Caranya, masukkan kode promo: SAVEBIG pada kolom Coupon code.

Fitur yang didapatkan antara lain:

URL Forwarding
Customizable Parking Page
Email Forwarding
Real-time DNS Servers
WhoisGuard Privacy Protection
Custom Nameserver Registration

Mengingat promo seperti ini tidak selalu ada, jadi bagi anda yang ingin membeli domain untuk keperluan bisnis, inilah saatnya untuk mendapatkan domain elit dengan harga murah. Ingat promo ini hanya berlaku sampai tanggal 30 September jadi jangan sampai lewatkan.

Selamat berburu domain!

Untuk info selengkapnya silahkan lihat disini

Memasang Widget Sharing Is Sexy di Posting Blog

noreply@blogger.com (Herman) — Sat, 02 Oct 2010 03:52:07 PDT

Sharing is sexy adalah salah satu widget social bookmarking yang disediakan untuk memberi kemudahan bagi pemilik blog maupun pengunjung dalan mensubmit atau membookmark artikel yang ia sukai ke situs social bookmarking hanya dengan mengklik pada icon-icon social bookmarking yang ada.

Keunikan dari widget sharing is sexy adalah icon-icon social bookmarking yang terdapat didalamnya bisa bergerak ketika disorot mouse sehingga terlihat lebih hidup dan menarik. Untuk lebih jelasnya, silahkan lihat disini.

Mengenai cara memasang widget social bookmarking sebenarnya sudah pernah saya bahas di blog ini hanya saja cara pemasangan widget sharing is sexy ini sedikit berbeda. Oleh karena itu, pada postingan ini saya akan menjelaskan bagaimana cara memasang widget sharing is sexy di posting blogger/ blogspot.

Bagi anda yang tertarik, silahkan ikuti langkah-langkah dibawah ini:

1. Masuk ke menu Design->Edit HTML.
2. Beri centang pada 'Expand Widget Templates'
3. Letakkan kode berikut diatas ]]></b:skin>

div.beauty-bookmarks {
height:54px;
background:url('http://lh3.ggpht.com/_15FopxVONSo/TJ2lhfOASVI/AAAAAAAAD94/6nj2oVs3yrM/sharing-is-sexy.png') no-repeat left bottom;
position:relative;
width:455px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://lh3.ggpht.com/_15FopxVONSo/TJ2lhfOASVI/AAAAAAAAD94/6nj2oVs3yrM/sharing-is-sexy.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.beauty-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover {
background:url('http://lh4.ggpht.com/_15FopxVONSo/TJ2lhtVIAUI/AAAAAAAAD98/VgXQRtSTpQ4/sharing-is-sexy-icons.png') no-repeat !important;
}

.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}

NB:
Jika anda ingin mengganti tulisan 'Sharing is sexy' menjadi 'Sharing is caring' maka ganti left bottom dan right bottom menjadi left top dan right top

4. Setelah itu cari <data:post.body/>
5. Letakkan kode berikut dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>

<li class='beauty-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


<li class='beauty-twitter'><a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'/></li>


<li class='beauty-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

</ul>
<span class='beauty-rightside'/>
</div>
</b:if>

Jika ada situs social bookmarking tertentu yang tidak ingin anda gunakan maka hapus saja kodenya. Contoh anda tidak ingin memasang Facebook maka hapus kode seperti ini:

<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

6. Kalau sudah simpan template anda. Selesai

Selamat mencoba!!

Pasang Auto Read More di Blogger Posts

noreply@blogger.com (Herman) — Thu, 23 Sep 2010 22:56:45 PDT

Saya yakin pembaca sudah tidak asing dengan fitur read more yaitu sebuah metode untuk menyembunyikan sebagian isi artikel dari halaman depan blog agar tampilan blog terlihat lebih rapi dan profesional.

Untuk metode read more yang lama, biasanya pemilik blog harus menyelipkan kode pada setiap postingan agar fitur read more bekerja. Kelemahan dari cara ini tentu kurang praktis.

Nah bagi anda yang tidak mau repot, anda bisa menggunakan fitur 'auto read more'. Dengan fitur ini anda tidak perlu lagi menambah kode read more dalam setiap postingan namun sistem akan secara otomatis menghasilkan link read more untuk postingan anda. Dengan cara ini tentu kerja kita akan menjadi lebih ringan.

Nah bagi anda yang ingin menerapkan sistem auto read more pada blog anda langsung saja ikuti langkah-langkah dibawah ini.

Catatan:
Bagi anda yang pernah memasang read more manual harap dihapus terlebih dahulu kodenya sebelum memasang kode auto read more.

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Beri centang pada "Expand Widget Templates"
3. Letakkan kode dibawah ini tepat diatas </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 300; summary_img = 301; img_thumb_height = 150; img_thumb_width = 150; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="http://2.bp.blogspot.com/_0Nr--qemD8Y/TCLunoOn0SI/AAAAAAAAAsU/PFNWur48hKg/s1600/def-thumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Keterangan:
summary_noimg = 300 menunjukkan jumlah karakter yang ditampilkan tanpa gambar
summary_img = 301 menunjukkan jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 menunjukkan tinggi gambar thumbnail
img_thumb_width = 150 menunjukkan lebar gambar thumbnail
float:right menunjukkan posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
img src="http://2.bp.blogspot.com/_0Nr--qemD8Y/TCLunoOn0SI/AAAAAAAAAsU/PFNWur48hKg/s1600/def-thumb.png" adalah gambar cadangan yang muncul jika tidak ada gambar dalam postingan. Anda bisa ganti gambar cadangan dengan gambar lain atau hapus saja alamat gambarnya jika anda tidak mau menggunakan gambar cadangan.

4. Kemudian cari <data:post.body/> atau <p><data:post.body/></p>

5. Ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>Read more »</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><p><data:post.body/></p>
</b:if>

6. Kalau sudah, simpan template anda.

7. Selesai. Silahkan lihat hasilnya

Seperti biasa anda bisa mengkreasi sendiri link read more misal dengan menambah judul posting didalamnya atau mengganti link read more dengan gambar. Caranya sama dengan read more manual. Selamat mencoba!!

Jika ada yang kurang jelas silahkan bertanya melalui kolom komentar saya akan berusaha membantu anda.

Namechk: Cek Ketersedian Username di Ratusan Situs Social Media

noreply@blogger.com (Herman) — Sat, 18 Sep 2010 23:23:19 PDT

Namechk adalah situs yang menyediakan layanan cek ketersedian username di ratusan situs social media secara gratis. Untuk menggunakan layanan ini sangat mudah, anda hanya perlu memasukkan username yang anda inginkan kemudian situs ini akan mengecek dan menampilkan hasilnya apakah username yang anda masukkan available atau sudah dipakai orang lain.

Selain itu, situs ini juga menyediakan link ke masing-masing situs social media sehingga user bisa dengan cepat menuju ke situs yang diinginkan dan mendaftarkan username yang telah di cek ketersediannya.

Satu hal yang menarik dari layanan ini adalah kecepatan. Dari hasil percobaan, rata-rata situs ini hanya membutuhkan waktu lebih kurang 10 detik untuk menampilkan keseluruhan hasilnya.

Ingin mencoba layanan ini, langsung saja kunjungi http://namechk.com

Cara Mengubah Tampilan Kursor Blog

noreply@blogger.com (Herman) — Sat, 25 Sep 2010 04:40:17 PDT

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.

Selamat mengkreasi blog anda :)

Cara Membuat Widget Related Posts V2

noreply@blogger.com (Herman) — Thu, 28 Jul 2011 03:45:16 PDT

Kemarin ada seorang sobat yang bertanya kepada saya, 'bagaimana cara membuat widget related posts seperti yang saya gunakan pada blog ini'. Sebenarnya cara membuat widget related posts sudah pernah saya posting di blog ini, hanya saja memang versi related posts yang saya gunakan sekarang ini berbeda dengan versi related posts yang sudah pernah posting di blog ini. Oleh karena itu, pada postingan ini saya akan menjelaskan cara membuat related posts seperti yang saya gunakan pada blog ini atau yang saya beri nama related posts v2.

Mungkin anda akan bertanya apa perbedaan antara related posts v1 dan v2?
Kalau pada related posts v1, related posts akan ditampilkan bersamaan dengan judul labelnya dan dikelompokan berdasarkan labelnya masing-masing. Sebagai contoh, perhatikan screenshot dibawah ini.

Sedangkan versi 2, related posts atau artikel yang berhubungan hanya menampilkan judul posting saja (tanpa judul label) dan semua artikel yang berhubungan digabung menjadi satu sehingga mirip dengan widget related posts milik Wordpress. Contoh tampilannya seperti ini:

Bagi anda yang ingin memasang related posts v2 atau related posts ala wordpress silahkan ikuti langkah-langkah dibawah ini:

1. Pada halaman dashboard blogger, buka menu Design -> Edit HTML

2. Beri centang pada "Expand Widget Templates"

3. Cari kode ]]></b:skin>

4. Letakkan kode css berikut diatasnya

#related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; }
#related-posts a{ color:#4b4b4b; }
#related-posts a:hover{ color:#ca1717; }
#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }
#related-posts a { text-decoration : none; }
#related-posts a:hover { text-decoration : none; }
#related-posts ul { margin : 10px 5px 5px 20px; padding : 0; }

5. Selanjutnya cari </head>

6. Letakkan kode javascript berikut diatasnya

<script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'/>

7. Kemudian cari <p><data:post.body/></p> atau <data:post.body/>

8. Jika ada dua kode yang sama, pilih yang pertama

9. Letakkan kode berikut dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<div style='font-size:18px'><b>Related Posts:</b></div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'/>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Keterangan:
Teks yang dicetak tebal adalah judul widget dan angka 5 adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan

10. Jika sudah, simpan template anda dan lihat hasilnya. Kalau berhasil jangan lupa pencet tombol like dibawah

Cara Mengecek Blog Dofollow atau Nofollow di Berbagai Browser

noreply@blogger.com (Herman) — Tue, 14 Sep 2010 03:44:54 PDT

Jika anda mencari informasi tentang tips meningkatkan pagerank blog biasanya salah satu tips yang disarankan adalah berkomentar di blog dofollow. Memang benar berkomentar di blog dofollow bisa meningkatkan google pagerank karena blog dofollow adalah blog yang telah menghilangkan atau melepaskan atribut nofollow dari form komentarnya sehingga jika ada pemilik blog yang meninggalkan komentar di blog tersebut, maka ia akan mendapat backlink dari empunya blog dengan catatan si pemilik blog harus berkomentar sebagai name/URL atau mencantumkan link blognya disana.

Bagi anda yang belum tahu apa itu Nofollow? Nofollow adalah atribut HTML yang berfungsi untuk memberi perintah kepada search engine untuk tidak menelusuri suatu link pada halaman blog sehingga google search engine tidak akan menganggap link tersebut sebagai backlink. Cara ini dibuat pertama kali oleh Matt cutts dan Jason Shellen pada tahun 2005 untuk mencegah pemilik blog melakukan spam dengan berkommentar sebanyak-banyaknya di blog ber PR tinggi.

Contoh kode link nofollow:

<a href="http://www.contoh.com/" rel="nofollow">bogger tips n tutorial</a>

Secara default, blog blogspot menggunakan sistem nofollow pada form komentarnya. Namun tidak sedikit pula blogger yang menerapkan sistem dofollow dalam comment formnya.

Untuk menemukan blog-blog mana saja yang menggunakan sistem dofollow, anda bisa googling dengan kata kunci 'dofollow blog list' atau 'daftar blog dofollow'. Ada banyak situs yang membuat daftar blog dofollow di situsnya.

Nah sekarang pertanyaannya adalah apakah blog tersebut masih menganut sistem dofollow? Sebab tidak sedikit blog yang awalnya memang bersifat dofollow tapi sekarang sudah tidak lagi. Untuk mengetahuinya, gunakan cara berikut:

Browser Firefox
Ada 2 cara yang bisa digunakan:

1. Melihat properties linknya
Ini adalah cara klasik yang sering digunakan blogger atau webmaster untuk mengecek status link. Caranya, klik kanan pada link yang berada pada kolom komentar lalu pilih Properties jika muncul tulisan relation: nofollow berarti blog tersebut bersifat nofollow.

2. Menggunakan addons Firefox
Ada banyak addons Firefox yang mampu mendeteksi link nofollow, salah satunya adalah SearchStatus. Dengan addons ini anda bisa melihat apakah suatu link dofollow atau nofollow dalam waktu yang bersamaan. sehingga lebih cepat. Anda bisa instal addonsnya disini. Setelah instal, aktifkan fitur pendeteksi nofollow dengan cara klik kanan pada logo SearchStatus yang terletak dipojok kanan bawah layar lalu pilih Highlight Nofollow Links. (Jika anda ingin menonaktifkan fitur ini cukup hilangkan centang pada 'Highlight Nofollow Links').

Jika link dihighlight merah berarti blog tersebut bersifat nofollow.

Browser Google Chrome
Instal Chrome SEO disini. Setelah itu, aktifkan fitur pendeteksi nofollow dengan cara klik logo Chrome SEO yang terletak di pojok kanan atas. kemudian tunggu beberapa saat hingga menu Chrome SEO muncul selanjutnya klik link Show Nofollow.

Browser IE
Untuk pengguna IE, caranya cukup mudah anda tinggal copas kode dibawah ini ke address bar pada halaman dimana anda ingin melakukan pengecekan.

javascript: var anchors;anchors = document.getElementsByTagName("a");var anchorIndex;for(anchorIndex = 0;anchorIndex < anchors.length;anchorIndex++) { if(anchors[anchorIndex].getAttribute("rel") && anchors[anchorIndex].getAttribute("rel")=="nofollow") anchors[anchorIndex].style.backgroundColor="red";} void(0);

Jika blog tersebut bersifat nofollow maka link akan dihighlight merah seperti gambar berikut.

Browser Safari
Caranya hampir sama dengan browser IE yaitu tinggal copas kode ke address bar pada halaman dimana anda ingin melakukan pengecekan.

javascript:var%20a=document.getElementsByTagName('a');for(var%20z=0;z%3Ca.length;%20z++){if(a[z].rel==’nofollow’){a[z].style.border=’1px%20solid%20%23F00';}}

Semoga bermanfaat..!

Cara Mengimport Feed Blog ke Digg V4

noreply@blogger.com (Herman) — Fri, 10 Sep 2010 22:27:39 PDT

Kabar baik buat teman-teman yang menggunakan layanan Digg untuk mempromosi artikel blog anda. Kini anda tidak perlu lagi repot untuk mensubmit artikel anda satu per satu satu ke Digg karena melaui fitur baru Digg V4 yaitu Import feed, sekarang anda dapat mengimport feed blog anda ke Digg sehingga setiap kali anda memposting artikel baru, artikel tersebut akan secara otomatis dikirim ke Digg tanpa campur tangan dari kita.

Dengan adanya fitur ini, tentu akan mempermudah pemilik blog yang ingin mempromosikan artikel blognya di Digg.

Bagaimana Cara Mengimport Feed Blog ke Digg?

1. Login ke akun Digg anda.
2. Jika diminta untuk follow digger lain dan invite friend, abaikan saja dengan klik Next Step
3. Setelah masuk ke halaman akun anda. Pilih Setting -> Import Feeds
4. kemudian anda akan dibawa kehalaman seperti berikut.

5. Isi alamat feed blog anda.Contoh http://namabloganda.com/feeds/posts/default atau http://feeds.feedburner.com/idanda jika anda menggunakan layanan feed dari feedburner dan pilih topik yang sesuai lalu klik tombol Add Feed

6. Setelah itu, anda akan diminta untuk memverifikasi blog anda. Copy kode yang diberikan dan letakkan diatas postingan terbaru anda lalu klik Veriry Now. (Anda bisa menghapus kodenya setelah proses verifikasi selesai). Jika berhasil maka akan muncul status verified seperti gambar dibawah ini.

7. Dan semua artikel anda akan muncul di halaman 'My News' dalam waktu kurang dari 24 jam. Berikut adalah contoh tampilan artkel blog saya yang muncul dihalaman Digg setelah melakukan import feeds.

Selamat mensubmit artikel blog anda ke Digg... Semoga bermanfaat

Kontes Namecheap: Gratis Domain Setiap Jam. Buruan!

noreply@blogger.com (Herman) — Tue, 28 Sep 2010 17:52:18 PDT

Tadi pagi pas cek email saya dapat info menarik dari Namecheap.com. Saya dapat email ini karena saya sendiri langganan domain disana. Kabarnya mereka sedang mengadakan kontes Bored At Work And Back To School yang akan berlangsung selama 1 minggu yaitu mulai dari tanggal 3 -10 September 2010. Dalam kontes ini Namecheap akan membagi 5 domain secara cuma-cuma setiap jamnya selama satu minggu + (3 Macbook Pros + 1 Apple Ipad + 1 Amazon Kindle) yang akan dibagikan ke 5 peserta teraktif. Total hadiah yang dibagikan lebih dari $10.000. Wow...

Untuk berpatisipasi dalam kontes ini sangat mudah, anda cukup follow namecheap di Twitter. Selanjutnya jawab pertanyaan yang di berikan oleh Namecheap. Dari tanggal 3-10 September, Namecheap akan mengtweet pertanyaan setiap jamnya. Jika anda adalah orang yang pertama menjawab pertanyaan dengan benar maka anda akan mendapat saldo sebesar $10.11 yang langsung dikredit ke akun Namecheap anda. Sedangkan 4 pemenang lainnya akan diundi dari semua peserta yang berhasil menjawab pertanyaan dengan benar. Pemenang dan jawabannya akan diumumkan Namecheap di twitter.

Setiap peserta hanya berhak mendapat 1 domain per hari. Jadi bagi anda yang sudah berhasil menjawab pertanyaan dengan benar dan mendapat hadiah domain pada hari ini, anda tidak akan di ikutkan dalam undian lagi meskipun anda berhasil menjawab pertanyaan dengan benar pada pertanyaan selanjutnya. Namun jangan menyerah karena semakin banyak anda menjawab pertanyaan dengan benar, semakin besar kemungkinan anda untuk meraih hadiah grand prize yang tediri dari 3 Macbook Pros, 1 Apple Ipad dan 1 Amazon Kindle.

Untuk mengklaim saldo anda, anda harus menghubungkan akun Namecheap ke akun twitter anda. Caranya:
1. Login ke akun Namcheap anda. Jika belum punya, buat saja akun baru di Namecheap (gratis koq).
2. Setelah itu, masuk ke menu My Account -> Manage Profile. Klik link Twitter integration yang terletak dimenu sebelah kiri.
3. Masukkan username Twitter anda lalu klik Link to your account
4. Selanjutnya Namecheap akan mengirim sebuah kode ke inbox Twiiter anda. Copy kode tersebut dan paste ke kotak yang disediakan. Jika berhasil maka saldo akan dikredit ke akun Namecheap anda dalam waktu kurang dari satu hari.

Nah bagi anda para penggemar Twitter tunggu apalagi? Ini adalah kesempatan terbaik bagi anda untuk mendapat Top Level Domain (TLD) secara cuma-cuma dan membawa pulang Apple Ipad. .

Sedikit tips bagi anda yang mau ikutan kontes ini, semua jawaban dari pertanyaan yang diberikan Namecheap bisa anda temukan di internet. Jadi anda tidak perlu pikir sampe jungkir balik cukup copy pertanyaannya ke kotak pencari maka semua jawabannya akan muncul di halaman pencarian. Mudah bukan? So good luck to all of you.

Untuk informasi selengkapnya mengenai kontes Namecheap. Silahkan baca disini

8 Practical Tips To Be A More Productive Blogger

noreply@blogger.com (Herman) — Fri, 03 Sep 2010 19:56:08 PDT

One of the biggest challenges for bloggers who want to taking seriously in blogging world and make money from blog is the ability to manage time effectively and efficiently. Many bloggers who eventually stopped writing on his blog for several months after they knew the world of blogging just because it failed to manage time well.

Honestly, I still have to struggle to manage time better. But as time passes, slowly i have been able to organize my time better. It can be seen by an increasing number of posts.

Here are 8 practical tips that proved to increase my productivity as a blogger:

1. Make daily or weekly schedule posts. Thus you will more motivated to write posts in your blog
2. Reading emails only in the morning and before turning off your computer.
3. Just read and reply an emails that really need to.
4. Just check the stats and earnings once a day.
5. Bookmark sites that relevant to your blog niche in your browser or social bookmarking site.
6. Use most of your time to think about blogging ideas.
7. Immediately note any ideas that arise in your mind.
8. Always think optimistically and enjoyed all your blogging activity

Being a productive blogger is a choice. But if you really want to taking seriously in blogging world and make money from blog, that choice into something that can't be avoid. By become productive, way to achieve your goal in generate money on the internet will be more easier and faster.

What do you think? Do you have other tips that proved to increase your productivity? I'm glad if you willing to share here :)

New Blogger Gadgets: Popular Posts & Blog Stats

noreply@blogger.com (Herman) — Thu, 02 Sep 2010 21:01:01 PDT

Few days ago, precisely on 31 August 2010 blogger.com celebrate its 11th birthday. As usual blogger.com will give a surprise to users on its birthday. For this year, quite many surprise was given such as the presence of stats feature in the dashboard menu which previously could only be enjoyed on blogger draft and the launched of two new gadgets that you can add to your blog: Blog’s stats and Popular Posts.

Blog's stats
Gadget that display the total page views of your blog. This gadget is very useful if you want to show your blog's pageviews to visitors or your advertiser. There are several styles that you can choose including an animated display.

Popular posts
This gadget will display a list of your popular post based on most viewed. You can displayed with or without a thumbnail. Also you can display the most popular posts from the last 7 days, last 30 days or all time.

How to add popular post and blog's stats on blog?
1. At the moments, these gadget only available on Blogger draft so to add these gadgets go to http://draft.blogger.com

2. In dashboard menu click Design -> Page Elements then click Add a Gadgets link and you will see the two new Gadgets like image below.

3. Click on the gadget you want add to your blog and save it. Done

Thanks to Blogger.com for introducing these great gadgets especially popular post, very useful for me. :) How about you?

LinkFromBlog - A Best Place For Blog Advertising

noreply@blogger.com (Herman) — Fri, 03 Sep 2010 23:30:44 PDT

Certainly you should have familiar with blog advertising, ie advertising through blog or website. This is the best and effective way to getting exposure for your products or services, considering internet user growth rapidly from year to year.

If you are interested in blog advertising to promote your products or services, then Linkfromblog is the right place for you. Linkfromblog is one of blog advertising service that connects advertisers and bloggers from around the world. They have plenty of bloggers willing to write reviews about advertiser's product and service on their blog.

Both bloggers and advertisers would greatly benefit from each other. As blogger you will get paid by writing honest reviews about advertiser's products and services. And as Advertiser, you will get a ton of traffic and inbound links from blogger sites with low prices.

Additionally, there are still many benefits that you can gain with become advertiser or blogger in Linkfromblog. For more information, please visit http://linkfromblog.com. Don't wait anymore, LinkFromBlog.com is truly a paradise for every blogger or advertiser. Check it out now!

Membuat Navigasi Breadcrumb di Blogger

noreply@blogger.com (Herman) — Tue, 24 Aug 2010 23:37:01 PDT

Tidak terasa sudah satu minggu saya tidak update blog ini. Hal ini dikarenakan saya sedang sibuk menata ulang konten di blog ini dan menambah beberapa tool ke dalamnya. Salah satunya adalah navigasi Breadcrumb.

Breadcrumb merupakan salah satu plugin milik Wordpress yang berfungsi untuk memudahkan pembaca dalam menelusuri halaman blog. Jadi ibarat peta atau sitemap dalam blog.

Plugin ini biasanya diletakkan diatas halaman posting. Contoh tampilannya seperti ini:

Selain dapat memudahkan pembaca dalam mengetahui lokasi halaman yang sedang ditelusuri, plugin ini juga dapat mengoptimasi halaman blog di search engine (SEO). Bahkan dianjurkan langsung oleh Google lho. Tidak percaya? Berikut adalah kutipan yang saya ambil dari ebook 'Google Search Engine Optimization Starter Guide'.

Ingin mengetahui lebih banyak teknik-teknik SEO dalam ebook Google Search Engine Optimization Starter Guide? Silahkan baca disini.

Ok saya rasa cukup penjelasannya, untuk pengguna wordpress anda bisa download plugin Breadcrumb disini. Sedangkan untuk pengguna blogger ikuti langkah-langkah berikut untuk memasang navigasi breadcrumb:

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

2. Beri centang pada 'Expand Widget Templates'.

3. Setelah itu, cari kode <b:if cond='data:post.title'>

4. Letakkan kode berikut dibawah <b:if cond='data:post.title'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> »
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
»
</b:if>
<data:post.title/>
</div>
</b:if>

5. Selanjutnya cari kode ]]></b:skin>

6. Letakkan kode css berikut diatasnya

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

7. Jika sudah simpan template anda dan lihat hasilnya.

Semoga bermanfaat :)

Cara Memasang Tombol Facebook Share Dalam Postingan Blog

noreply@blogger.com (Herman) — Sat, 21 Aug 2010 23:42:39 PDT

Selain facebook like yang sudah pernah saya bahas sebelumnya, Facebook juga memperkenalkan widget lain yang cukup terkenal yaitu Facebook share.

Sesuai namanya, widget ini berguna untuk membagikan sebuah halaman situs ke profil facebook.

Lalu apa bedanya antara Facebook like dan Facebook share?

Secara umum kedua widget tersebut sama-sama berguna untuk membagikan sebuah halaman situs ke Facebook. Sebagai contoh anda menyukai postingan ini maka anda bisa membagikan halaman ini ke teman facebook anda dengan menekan tombol facebook like atau facebook share.

Nah yang berbeda adalah cara penyajiannya. Jika anda membagikan melalui facebook like maka halaman ini akan muncul pada menu 'recent activity' sedangkan dengan facebook share halaman akan muncul pada menu 'News Feed'.

Agar lebih jelas perhatikan screenshot berikut:

Contoh tampilan posting yang dibagikan melalui facebook like

Contoh tampilan posting yang dibagikan melalui facebook share

Ok... sudah jelas ya perbedaannya. Sekarang mari kita pelajari cara memasang tombol facebook share dalam postingan blog. Untuk cara memasang tombol facebook like bisa anda baca disini.

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

2. Beri centang pada 'Expand widget templates'

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

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

5. Letakkan salah satu kode tombol facebook share berikut ini dibawah kode <data:post.body/> jika anda ingin memasang tombol fshare dibawah postingan atau letakkan diatas <data:post.body/> jika anda ingin memasang diatas postingan.

Tombol Fshare tanpa counter

Kode:

<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Tombol Fshare dengan counter diatas

Kode:

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Tombol Fshare dengan counter disamping

Kode:

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

6. Jika sudah simpan template anda dan lihat hasilnya.

Sistem Komentar Baru Pada Menu Blogger

noreply@blogger.com (Herman) — Wed, 18 Aug 2010 04:21:59 PDT

Tidak lama ini blogger telah mengintegrasi sistem komentar baru dalam menu dashboard blogger. Bagi anda yang tidak menemukan menu comment pada akun blogger anda. Anda bisa memunculkannya dengan cara memilih Only on posts older than atau Always pada bagian 'Comment moderation' di menu Setting->Comments.

Beberapa fitur yang ditambahkan dalam sistem ini antara lain:

1. Comment inbox
Melalui fitur ini kini anda dapat melihat semua komentar di blog anda langsung dari menu Comment->Published. Anda dapat mengelola komentar blog anda layaknya dalam kotak email. Fasilitas yang disediakan antara lain:

Spam: Menandai komentar sebagai spam
Delete: Menghapus komentar secara total dari kolom kometar blog
Remove Content: Menghapus isi komentar saja. Nama komentator tetap muncul di kolom komentar blog

2. Comment spam filtering
Fitur ini akan secara otomatis menyaring komentar yang terdeteksi spam ke kotak spam pada menu Comment sehingga tidak muncul dalam kolom komentar di blog anda. Komentar yang masuk ke kotak spam bisa anda aktifkan kembali dengan menandai Not Spam bila anda merasa komentar tersebut bukan spam atau hapus secara permanen dengan menekan tombol Delete.

Dengan sistem komentar baru ini menurut saya sangat memudahkan kita sebagai pengguna blogger dalam mengelola komentar di blog terutama fitur spam filtering yang sangat ampuh dalam melawan spammer.

Satu hal yang menurut saya kurang dari fitur ini adalah sistem ini hanya muncul apabila sistem moderasi diaktifkan sehingga dirasa kurang fleksibel karena bagaimanapun juga tidak semua pengguna blogger ingin menggunakan sistem moderasi dalam komentarnya. Bagaiman menurut anda?

Semoga kedepan Blogger.com dapat lebih menyempurnakan sistem komentar ini agar semua pengguna blogger dapat menikmati layanan ini tanpa harus mengaktifkan sistem moderasi.

Cara Membuat Efek Gradiasi Dengan CSS3

noreply@blogger.com (Herman) — Fri, 06 Aug 2010 07:12:30 PDT

Sebelumnya saya sudah sempat menyinggung tentang salah satu fitur dari CSS3 yaitu text-shadow yang berguna untuk membuat efek bayangan pada teks. Nah kali ini saya akan menjelaskan tentang fitur lain dari CSS3 yaitu efek gradiasi.

Pada umumnya untuk membuat efek gradiasi, orang akan menggunakan program image editing seperti Photoshop, Coreldraw, dan lain-lain untuk menghasilkan gambar gradiasi. Kelemahan dari cara ini tentu saja dapat memperlambat loading blog. Apalagi gambar yang digunakan berukuran besar bisa-bisa pengunjung sudah kabur sebelum blog anda berhasil kebuka.

Nah untuk mengatasi hal ini anda dapat menggunakan fitur gradiasi dari CSS3. Dengan menggunakan fitur ini anda dapat membuat efek gradiasi hanya dengan menambahkan kode css pada template blog anda sehingga tidak memperlambat loading blog.

Fitur ini sudah mendukung sebagian besar browser seperti IE, Safari, Firefox (versi 3.6 keatas), dan Google Chrome.

Berikut adalah kode CSS3 untuk membuat efek gradiasi:

background: #ffa45a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);

Keterangan:

background: #ffa45a;

merupakan warna background yang akan muncul apabila browser tidak mendukung

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');

merupakan kode efek gradiasi untuk browser IE. StartColorstr='#ffa45a' adalah warna awal gradiasi dan endColorstr='#ba5b0d' adalah warna akhir gradiasi

background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));

merupakan kode efek gradiasi untuk browser webkit seperti Safari, Google Chrome, dll. Linear adalah tipe gradiasi. Anda dapat mengganti dengan Radial, Angle, dll. From(#ffa45a) adalah warna awal gradiasi dan to(#ba5b0d) adalah warna akhir gradiasi.

background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);

merupakan kode efek gradiasi untuk browser Firefox v3.6 keatas. Linear adalah tipe gradiasi anda mengganti dengan Radial, Angle, dll. #ffa45a adalah warna awal gradiasi dan #ba5b0d adalah warna akhir gradiasi.

Cara peletakan kode gradiasi di blog
Ganti property background pada template blog anda yang ingin dipasang efek gradiasi

Sebagai contoh anda ingin memasang efek gradiasi di bagian menu navigasi maka cari kode css untuk menu navigasi di template blog anda. Contohnya:

#nav{
background: #403f3f url(http://lh3.ggpht.com/15FopxVONSo/nav-bg.gif) left repeat-x;
height:35px;
margin-left:10px;
margin-right:10px;
}

Ganti teks berwarna merah dengan kode efek gradiasi sehingga hasilnya menjadi seperti ini.

#nav{
background: #ffa45a; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d'); background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d)); background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
height:35px;
margin-left:10px;
margin-right:10px;
}

Untuk mendapatkan efek gradiasi yang lebih bervariasi sebenarnya anda juga bisa menambahkan property 'color-stop' untuk mengatur scale warna seperti yang terdapat pada Photoshop Tapi karena pengaturannya agak ribet maka tidak saya jelaskan disini.

Sebagai penggantinya anda bisa membuat efek gradiasi yang lebih bervariasi dengan menggunakan CSS3 Gradient Generator yang beralamat di http://gradients.glrzad.com/

Selamat berkreasi. Semoga bermanfaat

10 Gadget Menarik dari Google Friend Connect

noreply@blogger.com (Herman) — Fri, 10 Sep 2010 22:03:21 PDT

Sebagai pengguna blogger, anda tentu sudah tidak asing lagi dengan gadget Follower yang dapat ditemukan pada halaman blogger gadget.

Gadget ini merupakan salah satu gadget populer dari Google friend connect yang memungkinkan pengunjung untuk bergabung dan berlangganan blog kita.

Selain Follower sebenarnya masih banyak gadget Google friend connect lainnya yang tidak kalah bagus dan menariknya seperti Newsletter Subscription, Social bar, Screensaver, dan masih banyak lagi. Hanya saja gadget tersebut tidak ditambahkan pada halaman blogger gadget sehingga banyak pengguna blogger yang tidak mengetahui keberadaan mereka.

Agar lebih jelas berikut saya cantumkan 10 gadget yang menurut saya cukup menarik dari Google Friend Connect. Untuk melihat lebih banyak gadget-gadget lainnya, silahkan kunjungi http://google.com/friendconnect/

1. Social bar
Gadget berbentuk toolbar yang menampilkan opsi join site, isi komentar, jumlah follower, dan lain-lain.

2. Comments
Memungkinkan pembaca untuk komentar pada postingan atau link video kita

3. Rating and reviews
Memperbolehkan pembaca memberi rating dan mereview konten pada blog kita.

4. Newsletter subscription
Memperbolehkan pengunjung untuk berlangganan newsletter anda melalui email

5. Iphone
Gadget Follower dengan tampilan iPhone. Cocok untuk blog yang berhubungan gadgets.

6. Recent Visitor
Hampir sama dengan widget recent visitor milik Mybloglog. Hanya yang ini dilacak berdasarkan id Google

7. Screensaver
Memungkinkan anda untuk menampilkan screensaver di blog anda yang gambarnya diambil dari komunitas anda. Pengunjung dapat mengklik pada gambar member untuk menjadi temannya.

8. Top 10 members
Menampilkan 10 top member di blog anda berdasarkan jumlah kunjungannya

9. Get Answer
Mirip dengan yahoo answer dimana pembaca dapat bertanya, menjawab pertanyaan dari member lain dan memberi voting terhadapt jawaban yang menurut mereka bagus

10. Cloud
Gadget follower versi cloud dimana nama follower akan berotasi saat disorot mouse. Mirip dengan label cloud.

Untuk cara pemasangannya sangat mudah, cukup klik link Get this gadget pada masing-masing gadget yang ingin anda pasang kemudian atur tampilan yang anda inginkan dan klik tombol Generate Code. Copas kodenya ke blog anda. Selesai.

Semoga informasi ini bermanfaat untuk anda.

Pasang Avatar di Kotak Komentar Blogger

noreply@blogger.com (Herman) — Wed, 15 Sep 2010 09:29:50 PDT

Berkat fitur Show your face dari Blogger kini kotak komentar blogger sudah dapat menampilkan gambar atau foto dari pengunjung yang memberi komentar di blog.

Untuk menampilkan avatar, caranya sangat mudah. Anda cukup mengaktifkannya dengan masuk ke menu Setting -> Comments lalu pada bagian "Show profile images on comments" pilih YES. Beres..

Hanya saja cara ini hanya berlaku untuk template tertentu saja khususnya template yang disediakan oleh blogger dan hasilnya kurang optimal dimana avatar hanya muncul jika pengunjung memberi komentar dengan blogger id. Sedangkan yang berkomentar dengan openid atau anonymous, avatar tidak muncul.

Meskipun demikian, anda juga dapat memunculkannya dengan melakukan sedikit pengeditan pada kode template anda sehingga hasilnya menjadi seperti ini.

Untuk mengimplementasikannya:

1. Pertama-tama masuk ke menu Setting->Comments. Pilih lalu YES pada bagian "Show profile images" dan tekan Save.

2. Setelah itu, masuk ke menu Design-> Edit HTML

3. Beri centang pada "Expand Widget Templates". Agar lebih aman backup template anda.

4. Cari kode berikut:

<dl id='comments-block'>

5. Ganti kode tersebut dengan kode ini

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

6. Setelah itu cari kode berikut

<a expr:name='data:comment.anchorName'/>

7. Ganti kode tersebut dengan kode berikut ini

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

8. Setelah itu tambahkan kode css berikut diatas ]]></b:skin>

#comments-block .avatar-image-container img {
background: #fff url(http://i37.photobucket.com/albums/e74/mrphoto16/Hermanblog/avatar.gif) no-repeat left top;
width:32px;
height:32px
}

Keterangan:
Teks yang berwarna merah merupakan alamat gambar untuk avatar anonymous. Sedangkan teks yang dicetak tebal merupakan ukuran avatar. Anda bisa ganti sesuai keinginan.

9. Kalu sudah simpan template anda. Selesai

Selamat mencoba. Semoga berhasil

Google Code - Alternatif Hosting File Javascript di Google

noreply@blogger.com (Herman) — Fri, 10 Sep 2010 21:50:37 PDT

Bagi anda yang sedang mencari tempat hosting javascript yang handal dan terpercaya maka Google code adalah jawabannya. Google Code merupakan layanan hosting milik Google sehingga soal kredibilitas sudah tidak perlu diragukan lagi.

Melalui project hosting dari Google code, anda bisa menyimpan file Javascript, PHP, Ajax, Flash, CMS, dan lain-lain secara gratis di Google Code. Kapasitas yang diberikan tidak tanggung tanggung yakni 2GB dan unlimited bandwith sehingga anda tidak perlu khawatir bakal kehabisan bandwith :D

Sebenarnya layanan hosting yang mendukung file javascript sudah dihadirkan oleh Google melalui Google Sites. Hanya saja berdasarkan pengalaman pribadi, file javascript yang disimpan di Google sites tidak bekerja jika kita tidak sedang login di akun Google Sites.

Saya tidak tahu apakah anda juga mengalami masalah yang sama dengan Google sites jika iya maka Google Code bisa menjadi alternatifnya.

Berikut cara menyimpan file javascript di Google Code:

1. Pertama login ke akun Google anda kemudian kunjungi http://code.google.com/hosting/

2. Klik create a new project

3. isi data-data sesuai yang diminta lalu klik Create Project.

4. Pilih tab 'Download' dan klik New download

5. Klik Browse dan pilih file javascript yang ingin upload. Isi informasi yang berhubungan dengan file javascript tersebut kemudian klik Submit file.

6. Sekarang file javascript anda akan diupload ke Google code.

7. Untuk mendapatkan direct link dari file yang anda upload. Klik kanan pada nama file tersebut kemudian pilih copy link location (firefox) seperti contoh.