Selasa, 30 April 2013

Memperindah Tampilan Blog Dengan Link Berkilau Yang Cantik

Coba sobat blogger perhatikan gambar di bawah ini. Teks yang terdapat di gambar adalah sebuah link. Link tersebut terlihat seperti sebuah berlian yang berkilau. Link akan memancarkan kilaunya jika cursor diarahkan atau membayangi link itu. Kilauan link ini, terkadang terlihat seperti bintang yang berkedap kedip, terlihat indah dan menakjubkan.

link,link blogger,link blog,link blogspot.beautiful link,link cantik,link keren,lenk sites,link bintang,link star,link berkilau

Buat sobat blogger yang memiliki template warna gelap seperti hitam, biru, merah, coklat dan warna gelap lainnya, sebaiknya langsung memasang kode CSS yang sudah saya simpan di dalam Blogger Widget Generator ini.

Cara Memasang Link Berkilau Di Blogger

  • Sign In di blogger.com
  • Setelah itu, klik tombol warna biru yang ada di bawah ini.
  • Terakhir, klik tombol add a gadget

  • Secara otomatis, link berkilau akan langsung tersimpan di blog sobat.

Link berkilau ini tidak terlihat bagus pada blog yang background utamanya berwarna cerah seperi putih dan warna terang lainnya.

Minggu, 28 April 2013

Cara Menghilangkan Kotak Komentar Yang Terdapat Di Bawah Posting Blog

Kotak komentar yang terdapat di blog merupakan salah satu media interaksi antara pemilik blog dengan pengunjung blog yang datang. Dengan adanya kotak komentar pengunjung dapat memberikan tangapannya terhadap posting yang sudah di baca baik itu berupa saran, kritikan, atau pertanyaan. Kolom komentar tidak hanya di mamfaatkan untuk hal-hal yang saya sebutkan di atas, tetapi juga dimamfaatkan untuk menjalin silaturahmi antara pemilik blog yang satu dengan pemilik blog yang lain.

Rasulullah Saw bersabda :

مَنْ أحَبَّ أنْ يُبْسَطَ لَهُ فِي رِزْقِهِ وَ يُنْسَأ لَهُ فِي أثَرِهِ فَلْيَصِلْ رَحِمَه (متفق عليه)

Barangsiapa yang senang diluaskan rizkinya dan dipanjangkan umurnya (diberkahi), maka hendaklah ia bersilaturrahmi (Muttafaq 'Alaih).

Tapi sangat disayangkan, saat ini banyak blogger yang memamfaatkan kotak komentar untuk melakukan Spamming (Meninggalkan link di pesan yang ditinggalkan). Oleh karena itu, banyak blogger yang me-nonaktif-kan atau men-disable kotak komentar mereka.

Cara Membuat Kotak Komentar Disable atau Non Aktif

  1. Masuk ke akun blogger sobat
  2. Pada menu drop down, pilih settings. Klik gambar di bawah ini untuk memperbesar ukurannya!
  3. Setting kotak komentar,kotak komentar,kolom komentar
  4. Selanjutnya, pilih Post and Comments
  5. Lihat menu yang terdapat disana! Pada Comment Location, terdapat 4 pilihan. Sobat blogger harus memilih Hide (Sembunyikan)
  6. Kemudian klik Save Settings.
Proses menghilangkan kolom atau kotak komentar sudah selesai. Open one of your post and look at the result!

Jumat, 26 April 2013

Mencari Keyword Sebelum Mempublikasikan Postingan Blog

Selama sobat blogger menulis posting, apakah sobat blogger asal menulis saja, tanpa menyusupkan kata kunci pada setiap posting sobat blogger? Emang, seberapa penting Keyword atau kata kunci dalam sebuah posting? Jawabannya sederhana sekali yaitu "Sangat Penting" karena semakin relevan kata kunci dengan posting blog kita, maka hasil yang akan sobat blogger peroleh untuk search query di hasil penelusuran Google cenderung semakin lebih baik.

Salah satu alat yang disediakan oleh Google untuk mencari kata kunci yang sesuai dengan blog atau situs kita adalah "Google Adwords". Google Adwords adalah Alat Kata Kunci/Keyword untuk mengidentifikasi ide kata kunci dengan volume penelusuran yang tinggi berdasarkan negara tertentu atau berdasarkan semua negara, lalu Google Adwords membuatkan dan menampilkan daftar kata kunci itu dalam sebuah daftar.

google adwords,adwords,alat kata kunci,keywords tools,keywords,kata kunci,penggunaan kata kunci,penggunaan keywords


Cara menggunakan Tools Google Adwords
  1. Kunjungi laman AdWords melalui link berikut : https://adwords.google.co.id
  2. Masukkan kata atau frasa pada kolom pertama dan alamat situs web di bagian kolom kedua.
  3. Ketik karakter yang muncul pada gambar yang tersedia.
  4. Klik tombol Telusuri. Selanjutnya, hasil akan muncul dalam tabel

Peringatan :
Keywords yang berlebihan dalam satu posting dapat membuat posting sobat tidak di index oleh Google, jadi sebaiknya sobat blogger menggunakan keyword yang sewajarnya.

Rabu, 24 April 2013

Mengatasi Duplicate Meta Descriptions Dan Title Tags Dengan Meta Tag Dinamis

Duplicate meta descriptions dan Duplicate title tags (Duplikasi deskripsi meta dan Duplikasi tag judul) adalah masalah yang sering muncul di blogger blog. Masalah tersebut dapat kita lihat di laman Google Webmaster Tools di bagian Optimization di HTML Improvements/ Perkembangan HTML. Duplicate meta descriptions dan Duplicate title tags sangat berpengaruh terhadap kinerja situs/blog di hasil penelusuran search engine seperti Bing dan Google karenanya banyak blogger yang Frustasi ketika tidak dapat memecahkan masalah tersebut.

Cara terbaik di dalam mengatasi masalah Duplicate meta descriptions dan Duplicate title tags adalah dengan cara memasang meta tag blogger yang SEO Friendly. Meta tags yang saya maksudkan adalah meta tag Dinamis (Kalau bahasa kerennya Dynamic Meta tags Blogger).

Bagaimana cara kerja meta tag dinamis sehingga dapat mengatasi masalah Duplikasi deskripsi meta dan Duplikasi tag judul? Cara kerja Dyanamic Meta Tag dapat di lihat pada kolom di bawah ini!


Laman Home PageLaman Posting
Judul dan deskripsi blog akan menjadi meta deskripsiJudul posting dan deskripsi blog akan menjadi meta deskripsi
Judul dan keyword blog akan menjadi meta keywordJudul posting dan keyword akan menjadi meta keyword

Saya yakin, sobat blogger akan sedikit kebingungan dengan penjelasan yang ada pada kolom di atas. Akan tetapi, ketika sobat blogger sudah menerapkan dynamic meta tag di blog sobat, kemudian sobat blogger melakukan view source melalui Google Chrome atau Firefox, kebingungan itu dengan sendirinya akan hilang.

Cara Memasang Meta Tag Dinamis Di Blogger

  • Login ke blogger.com
  • Pada menu drop down, pilih template
  • Backup template sobat terlebih dahulu
  • Klik tombol Edit HTML dan klik Proceed
  • Copy paste kode berikut tepat di atas kode <b:skin><![CDATA[
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle + &quot;-DESKRIPSI BLOG SOBAT DISINI&quot;' name='description'/>
<meta expr:content='data:blog.pageTitle + &quot;,KEYWORD BLOG SOBAT DISINI&quot;' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot;-DESKRIPSI BLOG SOBAT DISINI&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;,KEYWORD BLOG SOBAT DISINI&quot;' name='keywords'/>
</b:if>
<meta content='index, follow' name='robots'/>
  • Terakhir, klik Save

Keterangan :
Ganti yang warna merah dengan Deskripsi dan Keyword blog sobat. Ingat... Terdapat dua kali pengulangan deskripsi dan keyword pada kode meta tag di atas.

Biasanya, Google akan mengindex perubahan meta tag kita setelah 2 atau 3 minggu. Jadi, silahkan sobat blogger memeriksa secara berkala laman Webmaster Tools untuk melihat perubahan data blog kita di HTML Improvements.

Selasa, 23 April 2013

Dampak Buruk Memasang Komentar Google+ Di Blog

Mamfaat dan Cara Mengaktifkan Komentar Google Plus Di Blogger adalah posting yang saya publikasikan dua hari yang lalu. Sekarang, saya akan memberikan sedikit gambaran tentang kekurangan atau dampak negatif komentar Google+ yang dirilis oleh Google bulan April ini. Saya merasa dituntut untuk menerbitkan posting ini supaya sobat blogger tidak asal mengaktifkannya.

Mengaktifkan komentar Google+ di blog berarti secara tidak langsung kita sudah me-nonaktif-kan komentar default blogger. Seperti yang kita tahu bersama, komentar default blogger memiliki banyak mamfaat diantaranya :
  1. Kita dapat mengetahui jumlah komentar yang masuk ke blog kita
  2. Kita dapat melihat komentar yang masuk ke dalam kategori Spamm
  3. Kita dapat melihat komentar yang menunggu moderasi dari kita.
Kalau kita memasang komentar Google Plus di blog maka Tab Komentar yang terdapat di laman dashboard blogger terhapus sehingga pesan pembaharuan yang terdapat pada laman Ikhtisar blogger hanya menampilkan "Penayangan hari ini » Pos » Pengikut". Untuk lebih jelasnya, perhatikan screenshot yang yang saya ambil di bawah ini!

blogger dasboard,laman blogger,komentar blogger,moderasi komentar,komentar terbit,Kelemahan Komentar Google+,jumlah komentar,comentar,google+ comments,comments

Jadi... Dampak buruk komentar Google Plus adalah :
  1. Kita TIDAK dapat mengetahui jumlah komentar yang masuk ke blog kita.
  2. Kita TIDAK dapat melihat komentar yang masuk ke dalam kategori Spamm.
  3. Kita TIDAK dapat melihat komentar yang menunggu moderasi dari kita.
  4. TIDAK ada pemberitahuan tentang komentar yang menunggu moderasi
  5. TIDAK ada pemberitahuan tentang komentar yang diterbitkan
  6. Orang lain TIDAK dapat memberikan komentar menggunakan akun di luar akun Google.

Pesan saya : berpikirlah dua kali sebelum memasang komentar Google+ di blogger blog.

Senin, 22 April 2013

Cara Membuat Menu Bar Cantik Plus Kotak Pencarian

Menu bar yang berdampingan dengan search box mulai tenar di kalangan blogger Indonesia semenjak salah satu webmaster kita, Agus Ramadhani memasangnya di bawah header website miliknya. Saat ini, mungkin ada ratusan blogger yang memasang menu bar plus kotak pencarian di blog mereka. Menurut saya, banyaknya blogger yang memasang menu bar seperti itu sangatlah wajar karena menu bar yang berdampingan dengan kotak pencarian mempunyai tampilan yang sangat manis. Untuk melihat bgaimana tampilan dari menu bar yang saya jelaskan di atas, coba sobat blogger klik gambar di bawah ini untuk memperbesar ukurannya!

Menu bar,menu navigasi horizontal,menu blog,search box

Bagaimana pendapat sobat blogger tentang menu bar di atas? Manis bukan? Menu bar ini bisa sobat blogger modifikasi sesuai dengan keinginan sobat blogger sehingga setiap menu memiliki sub menu (Bercabang).

Cara Memasang Menu Bar Plus Kotak Pencarian Di Blog

  • Sign In di blogger.com
  • Pada Menu Drop Down, sobat pilih Template
  • Kemudian klik tombol "Edit HTML" dan Klik Proceed
  • Kasih tanda centang pada Expand Widget Template.
  • Copy Paste kode berikut tepat di atas kode ]]></b:skin>
#menubar{
width:920px;
height:38px;
background:#222;
border-radius:2px;
float:center;
margin:0px auto;
}
#menubar-left{
float:left;
width:720px;
padding:0 0 2px 2px;
}
#menubar-right{
float:right;
width:170px;
padding-top:8px;
padding-right:18px
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:12px 10px;
color:#fff;
position:relative;
font-weight:bold !important;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
text-decoration:none;
background:#222;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #222;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #222;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #222;
border-radius:0px 0px 8px 8px;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
#search{
border:1px solid #222;
height:20px;
width:180px;
background:#f6f4f4;
}
#search input{
color:#777;
border:none;
}
#s-m{
font-size:11px;
width:180px;
padding-left:4px;
padding-top:5px;
margin:0;
}
#search-t #search{
background-color:#FFFFFF;
border:1px solid #222;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
#search-t #s-m{
width:155px;
padding-top:3px;
}
  • Pasang kode berikut, sebelum kode <div id="content-wrapper">
<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 2</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 3</a>
<ul>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 4</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 5</a></li>
</ul>
</div>
<div id='menubar-right'>
<div id='search-t'>
<div id='search'>
<form action='/search' method='search' target='_blank'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}' onfocus='if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel disini..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_mL403rc-insNKQFFwJf7Up7PfUu-ECy4D_udtB8je1zbxDmLLTdD6-8eMqbUXklsZk9JW5KGhiOSmu74NeBsMJu8MGOzQidfiB3e-ju-TVNXxpf_3PNKaVPTHL4lNELDK83qGtlJ3sE/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>
  • Klik Preview terlebih dahulu. Kalau hasilnya sudah mantap, jangan lupa untuk menyimpan template sobat blogger.

Tambahan :
  1. Setiap template memiliki kode yang berbeda, jadi, jika di dalam template sobat blogger tidak terdapat kode <div id="content-wrapper"> sobat blogger bisa meletakkan kode HTML di atas sebelum kode <div id="header-wrapper"> atau <div id="outer-wrapper"> atau <div class='tabs-outer'> atau sebelum kode <div class='tabs-cap-top cap-top'>
  2. Jika sobat blogger ingin mengganti warna dari menu bar di atas, sobat blogger tinggal mencari kode #222 kemudian di ganti dengan kode warna yang sesuai dengan warna template sobat.
  3. Ganti http://URL-YANG-DI-TUJU.blogspot.com/ dengan URL blog sobat. Dan jangan lupa juga untuk mengganti "Menu" dan "Sub Menu" sesuai Title yang diinginkan.

Artikel Terkait :
  1. Beautiful Floating Vertical Menu For Blogger Blog
  2. Cara Membuat Menu Navigasi Horizontal Yang Keren Di Blog

Sabtu, 20 April 2013

Cara Membuat Dan Memasang Search Box Keren Di Blogger

Search Box adalah salah satu widget yang diperuntukkan buat pengunjung sehingga mereka dipermudah di dalam mengakses konten yang terdapat di dalam blog atau website kita. Hanya dengan memasukkan beberapa kata kunci ke dalam search box, pengunjung akan menemukan posting yang mereka butuhkan.

search box,kotak pencarian,search engine

Bentuk atau tampilan dari search Box ini bisa di lihat pada gambar di atas! Jika Cursor kita letakkan pada kolom yang tersedia, maka Search Box akan langsung memanjang ke kiri. Proses memanjangnya search box disebabkan oleh adanya penambahan kode CSS transition yang terdapat pada search box ini. Yang pasti, dengan memasang search box ini, performance dari blog sobat pasti tambah cool atau keren.

Cara Memasang Search Box Keren Di Blogger


  1. Kunjungi blogger.com
  2. Setelah sign in/login, klik tombol warna biru yang terdapat di bawah ini.
  3. Lalu, klik Add Widget.
  4. Secara otomatis, Search Box keren ini akan langsung terpasang di blog kesayangan sobat.

Pastikan sobat blogger meninggalkan pesan, saran atau komentar setelah memasang Search Box yang keren di atas.

Tutorial terkait dengan posting di atas :
  1. Membuat Kotak Pencarian Cantik Dengan CSS3
  2. Cara Buat Kotak Pencarian Pinterest