Cara Membuat Text Area Dengan Tombol Select All

Text area adalah area untuk memperlihatkan data-data yang sangat panjang, dan pengunjung blog yang melihat text area tersebut biasanya harus mencopy semua data yang ada dalam text area. Biasanya, data-data yang sangat panjang tersebut adalah kode HTML, kode CSS, dan lainnya. Afiq Tutorial juga menggunakan text area untuk memudahkan pengunjungnya untuk mencopy kode-kode HTML dan CSS. Secara utuh, berikut tampilan text area (dengan tombol select all).

Teks Area by Afiq

Nah, widget text area ini dapat kita pasang hanya di halaman postingan dan halaman gadget HTML/JavaSript. Berikut langkah-langkah membuat text area:

1. Buat dahulu entri baru.

 

2. Pada entri baru, pindahkan mode ke mode HTML, copy kode text area dibawah.

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 100px" name="txt" rows="100" wrap="VIRTUAL" cols="55">text area by afiq></p></div></form>

Pengaturan:

Text Area by Afiq = ganti dengan teks yang akan ditampilkan di text area.

WIDTH = ganti dengan ukuran lebar text area (ganti angka di depannya)

HEIGHT = ganti dengan ukuran ketinggian text area (ganti angka di depannya)

3. Publikasikan.

Cara Memasang Widget Alexa di Blog

Jika Anda sudah membuat akun Alexa, tidak lengkap rasanya apabila Anda tidak memiliki widget Alexa. Ya, fungsi dari widget Alexa adalah untuk melihat statistik peringkat blog Anda di mata Alexa di dunia internet internasional. Memang, jika Anda tidak memasang widget Alexa Anda masih dapat melihat peringkat blog Anda di situs resmi Alexa. Namun, cara tersebut kurang praktis. Oleh karena itu, kita harus memasang widget Alexa agar kita dapat melihat peringkat blog kita secara lebih praktis. Namun mungkin akan ada rasa  kebanggan tersendiri juga bagi orang yang memasang widget Alexa dengan peringkat yang sudah bagus. Jadi tunggu apalagi ? Ini dia cara memasang widget Alexa !

1. Kunjungi http://www.alexa.com/siteowners/widgets.

2. Masukkan alamat URL blog Anda pada kolom "Alexa Site Stats Button"(lihat gambar diatas). Setelah itu, klik Build Widget.

3. Copy kode yang disediakan Alexa, terserah Anda mau memilih tampilan yang mana saja. Setelah di copy, masukkan ke Gadget HTML/JavaScript.

4. Klik Simpan. Sekarang lihat perubahannya.

Letakkan Judul Posting Di Depan Nama Blog Untuk SEO

Meletakkan judul posting di depan nama blog bertujuan agar pengunjung dapat dengan lebih jelas melihat apa judul artikel (postingan) yang sedang dibaca. Coba Anda melihat tab browser blog ini, pasti tampilannya adalah judul artikel (postingan) kemudian baru judul blog. Ya, hal ini memang sudah diterapkan di blog ini, karena meletakkan judul artikel di depan nama blog diyakini banyak orang dapat meningkatkan SEO (search engine optimization) karena judul posting yang terpotong oleh judul blog tidak baik untuk SEO. Dan juga kadang-kadang judul artikel kita terpotong pada saat ditampilkan oleh query Google, sehingga dapat memperuburuk SEO blog kita juga tentunya. Oleh karena itu, sangat dianjurkan bagi Anda untuk meletakkan judul posting di depan nama blog.

1. Dari dasbor, ke menu Template.

2. Pilih Edit HTML.

3. Cari kode <title><data:blog.pageTitle/></title>. Untuk mempermudah pencarian, tekan Ctrl+F.

4. Jika sudah ketemu, ganti kode tadi dengan kode berikut:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>

Pengaturan:

Warna hijau = Ganti dengan simbol pemisah antara judul posting dan nama blog.

5. Simpan Template. Sekarang, klik pratinjau untuk melihat perubahan.   

Menghapus Bayangan Pada Gambar di Postingan Blog

Tentu bayangan pada gambar sangat mengganggu artikel blog, karena jika dilihat akan memberi kesan jelek terhadap gambar tersebut. Apalagi, jika Anda sedang menulis artikel yang mengharuskan Anda menampilkan gambar yang banyak, tentu meresahkan bukan? Suasana seperti ini membuat gambar seakan tidak menyatu dengan artikel karena bayangannya. Saya juga dulu pernah mengalami hal seperti ini. Namun, seperti kata pepatah, banyak jalan menuju Roma, kita pun dapat menghapus bayangan tersebut.

Langkah 1: Dari Template, masuk ke Edit HTML.

Langkah 2: Cari kode .post-body img .

Langkah 3: Setelah ketemu, maka Anda akan melihat kode seperti dibawah ini.

.post-body img {
  padding: 8px;
  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 2, .2);
  box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2); 

Langkah 4: Ganti angka yang ditulis dengan warna hijau dengan angka 0. 

Langkah 5: Simpan Template. Lihat perubahannya.

Membuat Recent Post di Blogspot

Recent post maksudnya adalah artikel terbaru. Ya, sekarang kita akan membahas widget recent post. Widget recent post (artikel terbaru) berfungsi untuk menampilkan artikel terbaru blog Anda, dan berguna juga untuk memberi tahu kepada pengunjung bahwa blog Anda sudah memiliki artikel terbaru. Dengan pernyataan seperti itu, dapat dikatakan bahwa widget recent post juga merupakan alat navigasi blog.

Recent post juga dapat mendongkrak traffic blog, karena mungkin saja ada blog yang memiliki pembaca setia yang menyukai isi artikel blog. Dengan recent post Anda dapat membuktikan bahwa Anda menunjukkan eksistensi didalam dunia blogging. Traffic juga dapat memberi nilai lebih dalam SERP (Search Engine Result Page) dan SEO (Search Engine Optimization).

Langkah 1: Masuk menu Tata Letak, kemudian tambahkan gadget HTML/JavaScript. Disarankan untuk menambahkan gadget di bagian sidebar (bagian kanan blog).

Langkah 2: Pada kolom judul, isikan dengan kata "Artikel Terbaru" atau kata lainnya yang relevan. Pada kolom konten, copy paste kode berikut:

<style type='text/css'> img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:left;margin:10px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}</style> <script style='text/javascript' src='http://yourjavascript.com/1159358112/www.mybloggertopic.blogspot.com.js'></script> <script style='text/javascript'> var numposts = 5; var showpostthumbnails = true; var displaymore = false; var displayseparator = true; var showcommentnum = true; var showpostdate = true; var showpostsummary = true; var numchars = 100;</script> <script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> <hr/>

Langkah 3: Simpan Template.

Recent Post ini tidak membutuhkan alamat URL blog Anda, karena secara otomatis akan memuat daftar artikel terbaru blog Anda.

Membuat Tombol Back To Top Dengan Efek Smooth

Back to top adalah tombol yang digunakan untuk kembali lagi ke bagian atas blog tanpa menggunakan scrollbar atau menscrolling mouse. Fungsi dari tombol back to top ini selain untuk kembali ke atas adalah untuk mempercantik tampilan blog dan memberi kesan canggih kepada blog kita. Back to top ini tidak memberatkan blog, karena menggunakan kode jQuery. Back to top ini juga mudah dikonfigurasikan, dan kita juga dapat mengubah gambar tombol back to top yang akan dipakai.

Sebagai contoh, lihat pada bagian bawah blog Afiq Tutorial. Disana Anda akan mendapati tanda panah kecil mengarah keatas berwarna hitam. Cobalah untuk mengeklik tombol tersebut. Itulah contoh tombol back to top. Back to top ini sangat cocok untuk Anda yang suka memodifikasi blog karena tidak memberatkan blog.

Langkah 1: Dari menu Template, beralih ke menu Edit HTML.

Langkah 2: Cari kode (Ctrl+F) </body>. Copy terlebih dahulu kode jQuery dibawah. Lewati langkah ini apabila dalam blog Anda sudah memiliki kode jQuery, karena dalam blog hanya dibutuhksn 1 kode jQuery saja.

           

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Langkah 3: Copy kode berikut dan masukkan diatas kode </body>.

<script src='http://bloggerpeer.googlecode.com/files/backtotop.js' type='text/javascript'/> <!-- Back to top start www.afiqtutorial.blogspot.com --!> <a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJsImPn-QZ4Jg9jArKxYjYvwonZLrTa_04nbONbnnfxjx66glZeScFA4DozTnI2xkHPPGysK0H8NlG-rg7h_vwYyPzqE5JpANv3vbgTJXoqNOVSKXwrC-aFlpA6er9vlrbGcUsXiRaG7Q/s1600/back-to-top.gif'/></a>

Keterangan:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJsImPn-QZ4Jg9jArKxYjYvwonZLrTa_04nbONbnnfxjx66glZeScFA4DozTnI2xkHPPGysK0H8NlG-rg7h_vwYyPzqE5JpANv3vbgTJXoqNOVSKXwrC-aFlpA6er9vlrbGcUsXiRaG7Q/s1600/back-to-top.gif = Anda ganti dengan tombol back to top yang lain sesuai selera Anda.

Back To top = Anda ganti dengan kata ketika tombol back to top disorot.

Membuat Arsip Blog Auto Scroll

Arsip blog merupakan widget penting yang isinya untuk menampilkan posting terdahulu menurut tanggal publikasi. Arsip blog tentu akan terlihat tidak bagus dan tidak professional apabila posting sudah banya sehingga membuat arsip blog terlalu panjang. Terkadang, arsip blog yang terlalu panjang akan membuat widget lainnya tidak terlihat karena jauh dibawah. 

Namun, kita dapat mengantisipasinya dengan membuat auto scroll pada arsip blog. Dengan auto scroll, maka pengunjung blog yang ingin melihat seluruh posting harus menekan tombol scroll pada mouse atau melalui scroll bar yang ada di bagian arsip blog.

Langkah 1: Masuk ke menu Template, kemudian Edit HTML.

Langkah 2: Cari kode (Ctrl+F) <div id='ArchiveList'>. 

Langkah 3: Perhatikan kode dibawah ini.

<div style='overflow:auto; width:ancho; height:200px;'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div></div>
  <b:include name='quickedit'/>
  </div>
</b:includable>

Keterangan:

Kode berwarna hijau adalah kode yang ditambahkan. 200px, ganti dengan angka ketinggian scroll. Direkomendasikan dengan angka 200px.

Kode berwarna merah adalah kode yang dicari (lihat poin nomor 2).

Maaf jika tidak jelas. Silakan tanya di kolom komentar. Terima kasih.  

Membuat Widget Translate Bendera Bulat di Blog

Widget translate adalah widget yang umumnya wajib dimiliki seorang blogger dalam membuat blognya. Hal ini dikarenakan banyaknya orang di dunia, dan bukan tidak mungkin orang luar negeri melihat artikel blog Anda. Jika mereka tidak mengerti bahasa yang kita gunakan maka rugi bukan? Ya, widget translate ini memang sangat cocok untuk blog yang ingin memiliki pengunjung dari luar negeri.

Widget translate yang sedang dibahas memuat 12 bahasa. Meskipun sampai sekarang saya sudah menonaktifkan widget translate ini, karena saya ingin fokus blogging di dalam negeri kita, Indonesia. Dengan begini, maka pengunjung blog dari negara lain dapat menikmati entri dan artikel kita bukan? Bukankah jika pengunjung dari luar negeri tersebut memberi komentar dengan bahasa mereka juga, bukankah kita dapat jadi belajar bahasa asing? 

Langkah 1: Dari dasbor, pindah ke Tata Letak. Tambahkan gadget "HTML/JavaScript.

Langkah 2: Copy kode ini di kolom konten.

<style> .translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; padding-left:0px; } .translate:hover img { filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50; border:0; } </style> <div style="text-align:center"> <a class="translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONg60bT3mh2gI4txd-pRqxT_00B71qKeaqNY3Ch43OpMsAYzSQMxgUhN0c4h7FZcVTxUS0-6Njv9ugFn4DnqFgAKO9WllhHY57G-u3AS_SKkuVeH3Uq1dBFfOQqXOt7rDUHRR1RXnSmHM/s144/uk-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkGBPxcMgths66-Q3aNfIV4JIG5qjyIdjfOChW3D-W1PYN1gF-Sn4D7ifMTMBJaHzfbT87TUbLOjIwNJq0USqlDKS3slsXtKyFIqFmSZX97fO9ovU5HEe83AAm9v8aX03kobMTktaJiDvR/s144/france-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO8kDO3kpv6-mnqf3afOjhDNfuzsaTDXMUjEj8fityC2u1Unn7pU7gsWYCh2ihaWqpnmidb3gQh0S_cDhaufKdtO0WpLOQRhSHmueeWTtfS8IVUn-jZnFRuAU5QzGerxK22Bw-DoEK6g54/s144/german-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSGOsSRRx5jRLffqkx_dr6V5EcNzPrYK405heq-lnNPcfvQ9er7XL2pGl2bYHZuuPFFqO0dkQySjBxF2dZysiN9yO-DWj4nwLWiWau86kpuxwNiHQgN1HZNAzPETASQ8eQHZSyHcxfLC0-/s144/spain-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTm92NIsSySJ6tSi1TGYLa4KaG_QJ2omFJxWtMM0mhnTx4lLhjQ6X3FDr3YhKyZ2bV7xsl_vAy7r6R8TymK9h005xFdtbYdneJRPGJkOKydumLmMVjATXrVa4_PUiQMU4dGyJKnHqWvAm4/s144/italy-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZJl3OkheiMPwianVwK__-3OFhJXdAWFElJCWNWRldIn77-zrfmB-Yzuuw4zLjI_VSGM_1ZItTGkToLEBFPE_Ho2bvayZORhjo4AkxlneI3Mp4MRuOdyLt3Fq6WS35sGj9UooiDY5SW_My/s144/dutch-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <br/><br/> <a class="translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEfElUeZVmhxj1t6oj-SnR3J0fT-XccZ5X9eo9yd62JZwsSAcMVR47YTGWJJV3FramuqJoEP-v9t8jhcq36436uvPHQIbLNWR1yJvUI3B475VzpnBSKCgtOlojCLxJpHa9HCkoyxDgw0I6/s144/russian-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" border="0" align="absbottom" title="Brazilian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgaE_iSl2Eu6IVFyoXjx8kXnQpJ2PCUNaHnzyOMbE3xPTFtUAomewoGxO9Csk9VhwA-XNPlLd9-qsk5zHT5l8Jk7Uo9mz1VIqZmnrGp_aq_FjvGOKWg85R3PS2_nySFIJEaVv7dSbLSrfG/s144/brazil-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9tV5Z2WMvzre6lrgFzN6_2qR8-7IlBqq_Po8yF_J2SgZ_aGE8-0w6R5frIlymIeJKVr5vlLuNgR5y6Bg0SmWvDytsVZJC3d3SiQhVNufBSkBpGKnPOSk4rnmtG5ONY1nnATVnnZAUQJk/s144/japan-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM9b9iLNR8fk487tQLjA9IpV086UHBziFF-Jk7iHy9ik_5kJ-iTY2cWug6lIrz84K97Xb7yx1A2Xcd9CFmtEEhrowOnJIayrfg8IzLROuNU_nENox0PmqatBoEeR3MsTPU6N1wG3iPRNNQ/s144/korean-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLoG06cshqJ8RbwE9bZUZf9SqN514WwARqpJHlUjsMyfhTP5dNvRcI0eTSkGtfJpFlkB3vIDoqDy_WKa5V9JoQhwCSVdMz-4_HoDnMGxdnghinAnixT9qowa8VEpXGrqGeEmhDEu1i7BGn/s144/arab-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvynEpBRYGHKYm6OImssnB3O9eI8CpQRm8zPcfNyVaFC9JNwkp2W_EeI6MaN8ClIxoAUUviPVmFjj5r8irFlt_8Sq8oJV3OI26YakOc1KnBHiivpmltbbaUnvFn59FYcrmLBQcKoB3XnIl/s144/china-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <div style="font-size:9px; padding:8px 0px 0px 0px"> <a href="http://afiqtutorial.blogspot.com/2014/03/membuat-widget-translate-bendera-bulat_8.html" target="_blank">Translate Widget</a> by Google </div> </div>

Langkah 3: Klik Simpan. Lihat perubahannya di blog Anda.

Jika lebar widget translate yang Anda inginkan tidak sesuai dengan selera Anda, maka coba klik menu Template >> Template >> Sesuaikan Lebar.

Mengecek Pagerank Blog Terbaru 2014

Meningkatkan pagerank adalah salah satu cara untuk membuat blog berada di halaman pertama mesin pencari Google walau tidak selalu. Terdapat beberapa aspek penunjang pagerank, misalnya backlink, keyword, dan lainnya. Namun, ternyata backlink tidak sepenting bila dibandingkan dengan konten. Ya, konten adalah hal nomor satu dalam Blogging. Apabila artikel Anda hanya entri copy-paste, yakinlah pasti blog Anda tidak akan masuk SERP (Search Engine Result Page). Jika Anda adalah blogger yang kreatif dan ingin mendapatkan kesuksesan, berhentilah dari budaya copy-paste !!

Ada baiknya juga kita melihat pagerank. Hal ini untuk melihat status blog kita sudah sampai mana. Isi dari pagerank adalah antara 0-10, terendah 0 dan tertinggi 10. Jika Anda mendapat status pagerank N/A itu berarti  artinya Not Available. Jangan sedih, karena untuk membuat blog bagus dan banyak pengunjung, Anda harus bersabar.

Cara mengisi formulir pengecek pagerank , pertama masukkan alamat URL lengkap blog Anda, kemudian klik Check PR. Semoga beruntung !! 

Check Page Rank of your Web site pages instantly:

This page rank checking tool is powered by Page Rank Checker service  By http://www.afiqtutorial.blogspot.com

Membuat Layanan Contact Form di Blog

Layanan kontak dalam blog sangat diperlukan demi kemajuan sebuah blog. Kita harus juga memerhatikan pengunjung yang kebingungan dengan artikel atau konten blog kita. Karena, tanpa pembaca (pengunjung) setia sebuah blog tidak dapat hidup, dan diibaratkan seperti kota mati yang tidak berpenduduk. Sekarang kita akan membahas layanan kontak pada blog.

Kita dapat menggunakan Foxyform sebagai layanan kontak pada blog karena enak digunakan (user friendly). Kira-kira tampilan Foxyform adalah sebagai berikut:

Bagaimana? kelihatannya praktis dan mudah digunakan bukan? Tentu saja, karena Afiq Tutorial juga menggunakan layanan dari Foxyform ini (hahaha). Jika Anda ingin menggunakan layanan kontak Foxyform, ikuti langkah berikut:

Langkah 1: Kunjungi Foxyform.

Langkah 2: Kustomisasikan layanan kontak Anda sendiri. Jika sudah selesai, klik  Create Formular.

Langkah 3: Copy-paste kode disana di laman baru. Sebelumnya, ganti mode pengeposan ke mode HTML.

Langkah 4: Klik Publikasikan. Lihat blog Anda sekarang.

Memberi Warna Background Pada Judul Widget

Judul widget dalam blog tidak mempunyai warna background. . Secara default, Blogger tidak menyediakan fasilitas untuk memberi warna background untuk judul widget. Ini membuat judul widget kurang menarik dan kurang berwarna.Tentu saja, hal ini membuat blog kita tampak kurang bagus dan kurang professional. Namun, seperti judul diatas, kita dapat memberi warna  background pada judul widget dengan kode CSS. Penasaran? Ikuti langkah berikut ini:

Langkah 1: Dari dasbor, pindah ke Template, kemudian pilih Edit HTML.

Langkah 2: Cari kode (Ctrl+F) ]]></b:skin>. Copy-paste kode berikut DIATAS kode tersebut.

.sidebar h2 { background:#009900; color: #ffffff; margin: 0px 0px 8px 0px; box-shadow: 0 0 0 4px #009900, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); border-radius: 3px; -moz-border-radius: 1px; -webkit-border-radius: 1px; text-align:center;

Keterangan:
#009900= Ganti dengan warna background yang dikehendaki. Jika Anda tidak mengubah kode ini, maka background judul widget blog Anda adalah hijau muda.

Center= Ganti untuk mengubah rata teks. Ganti menjadi left untuk rata kiri, dan right untuk rata kanan.

Membuat Widget Flag Counter di Blogspot

Flag Counter merupakan widget yang dapat melihat statistik pengunjung blog. Widget ini dapat menampilkan seluruh pengunjung blog dari berbagai negara di dunia. Flag counter terkenal karena akurat dan ringan untuk blog. Sehingga widget flag counter tidak memberatkan blog. Fungsi lain dari flag counter selain menampilkan seluruh pengunjung adalah untuk unjuk gigi bahwa blog kita memiliki banyak pengunjung. Namun, flag counter tidak menambahkan visitor (pengunjung) apabila pengunjung blog tersebut berasal dari komputer yang sama. Flag counter juga dapat untuk menampilkan pageviews, yaitu berapa kali halaman blog Anda dilihat. Berbanggalah jika pageviews yang dimiliki blog Anda tinggi, tidak seperti blog ini (hahaha).

Langkah 1 : Kunjungi Flag Counter.

Langkah 2 : Kustomisasikan flag counter Anda. 

Maximum Flags to show = Untuk menampilkan bendera gambar maksimal.

Columns of Flags = Untuk mengatur berapa kolom bendera.
Label on Top of Counter = Untuk mengurutkan counter dari negara teratas.

Background Color # = Untuk mengubah warna background.

Text Color # = Untuk mengubah warna teks dalam flag counter.

Border Color # = Untuk mengubah warna teks border.

Show Flag Labels = Untuk menampilkan label dari tiap bendera. Misal: Indonesia berarti ID.

Show Pageview Count = Untuk menampilkan pageviews blog Anda.

Show Number of Flags = Untuk menampilkan bendera negara pengunjung yang telah mampir ke blog.

Langkah 3 : Klik >> GET YOUR FLAG COUNTER

Langkah 4 : Copy kode untuk blog, kemudian pada Blogger , pilih Tata Letak. Kemudian Tambahkan Gadget HTML/JavaScript(disarankan pada sidebar). Pastekan kode tadi di kolom konten. Untuk judul, tulis saja misalnya "Statistik".

langkah 5 : Simpan Setelan. Sekarang lihat blog Anda.

Membuat Widget Related Post Dengan LinkWithin

Related Post merupakan widget yang berfungsi sebagai alat navigasi blog. Widget related post dapat menampilkan artikel terkait, karena arti related post dalam bahasa Indonesia berarti "Artikel Terkait". Dalam alat navigasi, widget related post ini menjadi yang cukup berpengengaruh. Letak widget ini biasanya berada di bawah postingan blog. Sehingga apabila seseorang yang membaca artikel Anda telah selesai, maka mereka akan menjumpai widget related post ini.

Dalam pembuatan widget related post, LinkWithin menjadi web yang dapat disebut sebagai "Related post generator" dan selalu diandalkan  orang yang ingin membuat widget related post.Tampilan widget related post ini elegan, dan mudah di pasang di blog. LinkWithin sendiri dapat membuat widget related post dengan thumbnails, sehingga apabila artikel Anda mempunyai gambar, maka akan ditaruh diatas judul posting dalam widget related post. Sehingga saya sarankan untuk menggunakan minimal satu gambar dalam artikel Anda jika Anda ingin widget related post Anda bagus. Kira-kira seperti ini tampilan widget Related Post:

Langkah 1 Kunjungi LinkWithin.

Langkah 2 Tuliskan alamat email , URL Blog , Platform Blog, dan berapa artikel yang akan ditampilkan dalam related post. Centang jika blog Anda backgroundnya gelap, dan jika sudah klik Get Widget!. Untuk platform blog, disarankan untuk platform pilih yang Other.

Langkah 3 Copy kode disana. Buka Template kemudian Edit HTML. Paste kode yang tadi diatas kode </body>.

Langkah 4 Simpan Template.