Tips terbaik memilih nama domain

Walaupun bukan yang utama, memilih nama domain juga perlu pertimbangan.Sebab terkadang nama domain bisa juga mempengaruhi mood dari pengunjung.Kok bisa?,,,,ya bisa saja, seperti halnya pada nama orang, bila seseorang  mendengar nama orang yang kurang enak didengar, pikiran biasanya langsung tidak tertarik.Padahal belum tentu tahu siapa dan bagaimana orang yang punya nama tersebut.

Domain yang unik dan dicari banyak orang bisa dijual dengan harga yang sangat mahal.Dan sebaliknya, nama domain tertentu yang tidak menarik bahkan tidak laku dijual.Jika Kamu berfikir nama domain situs adalah investasi, maka layak untuk mempertimbangkan sebuah nama domain yang paling bagus.

Berikut tips dan pertimbangan memilih nama domain yang terbaik:

Pendek

Usahakanlah untuk memilih nama domain yang pendek, atau tidak lebih dari 2 kata.Bahkan kalau bisa cukup hanya 1 kata saja, itu justru lebih baik.Menurut beberapa Pakar Blog, nama domain dengan hanya 1 kata itu memiliki nilai jual yang lebih tinggi dari yang dua kata apalagi yang 3 kata atau lebih.
Semakin pendek nama domain, maka akan semakin mudah untuk diingat.Karena selain bookmark, perilaku pengunjung biasanya paling banyak dengan mengetikkan nama di bar browser.Untuk mengetikkan nama domain secara langsung di browser, tentunya harus ingat betul dengan domain situsnya.

Mudah dieja

Walaupun hanya terdiri dari 1 kata saja, sebaiknya pilih nama domain yang mudah dieja.Kalau blog ternyata berbahasa indonesia, alangkah baiknya juga jika memilih nama domain yang berarti kata dalam bahasa Indonesia.Jika orang kurang fasih berbahasa inggris, akan sulit mengingat kata dengan ejaan yang benar.Alasannya agar mudah diingat.

Memilih ekstensi domain dot com

Bukankah nama domain itu sebenarnya bisa lebih spesifik lagi, misalnya co.id untuk situs indonesia, dot net untuk situs forum atau dot org untuk situs organisasi.Kenapa mesti dot com, yang spesifikasinya untuk komersial, padahal nama domain untuk blog pribadi?,,,Ekstensi dot com lebih banyak dikenal orang daripada ekstensi yang lain.Bagi orang awam pada umumnya, lebih mengenal ekstensi dot com daripada yang lainnya.Alasannya nama domain lebih familier untuk banyak orang.
Hal ini sudah dibuktikan oleh Darren Rowse. Ia membuat blognya di ekstensi .net (Problogger dot net). Meskipun sudah begitu terkenal, banyak pengunjung yang masih salah menuju blognya karena mengetikkan alamat blog di ProBlogger dot com.

Perlu diketahui: Untuk mendaftar kan Nama domain ekstensi co.id, pemohon harus menunjukkan surat identitas penanggung jawab dan SIUP.Itulah kenapa situs dengan ekstensi co.id lebih tinggi memiliki tingkat kepercayaan.Jadi  ekstensi co.id lebih disarankan untuk situs perusahaan atau situs yang berhubungan dengan transaksi/keuangan.Untuk lebih jelasnya tentang domain ektensi co.id, baca klik disini.

Tidak menggunakan angka dan tanda sambung (-)

Orang kebanyakan lebih akrab dengan nama domain yang tanpa menggunakan tanda hubung dan tidak menggunakan angka.Banyak blogger dunia mengatakan bahwa domain yang memiliki kata sambung dan nomor memiliki dua kelemahan dasar.
Berikut ini contoh yang bisa menjelaskan alasannya.
spider-beat dot com: orang bisa saja lupa mengetikkan kata sambungnya sehingga akan mengetikkan spiderbeat dot com.
sunday6 dot com: angka enam ini akan membingungkan, karena bisa saja orang mengetikkan nama domain sundaysix dot com, sehingga orang akan salah alamat.

Deskriptif

Artinya nama domain sudah menunjukkan seperti apa kontent dari blog kamu.Arti kata lain dari nama domain deskriptif adalah mengandung kata kunci.Ini pilihan terbaik, khususnya untuk nice blog/bertarget pengunjung spesifik.Hal ini akan lebih menarik seseorang untuk mengklik, terutama dari search engine.Secara psikologis, dengan membaca nama domainnya saja orang merasa sudah menemukan apa yang dia cari.

Mengandung nama dagang/merk

Kalau yang ini biasanya blog untuk perusahaan atau orang-orang terkenal.Jadi kalau kamu membuat blog untuk promosi usaha, bisa memilih nama domain yang sama dengan nama perusahaan kamu.Atau kamu adalah seorang selebritis, nama kamu bisa menjadi nama domain yang paling keren dan banyak dicari orang.
Bukan hanya itu saja, menggunakan nama domain berdasarkan merk bisa menjadi pilihan.Misalnya kamu bertujuan mempopulerkan diri agar cepat dikenal sebagai motivator,seniman atau penulis, nama sendiri bisa dipakai sebagai nama domain blog.Nama domain berciri seperti ini bisa digabung dengan katakunci, misalnya eddyfotografer dot com.

Semoga dengan membaca tips diatas, kamu akan lebih mudah lagi dalam memilih nama domain untuk blog/situs web kamu.

Dampak artikel blog yang Copy paste

Copy paste adalah cara instan untuk mengisi artikel blog yang hingga kini masih saja marak dilakukan.Untuk membuat artikel secara natural, minimal bisa dilakukan dalam waktu 1-2 jam.Dengan waktu sebanyak itu, kita sudah bisa memposting artikel sebanyak 50 halaman dengan cara copypaste.Sangat jauh ya bedanya?......Artikel hasil copy paste adalah artikel yang berbobot semua, karena merupakan hasil penyeleksian.Benarkah membuat blog bisa semudah demikian????,,,,teruskan membaca....

Definisi Copy paste blog

Copy dan paste adalah dua baris perintah yang berada pada menu klik kanan pada mouse komputer setelah diseleksi.Atau bisa juga dengan jalan menggunakan perintah shortcut pada keyboard komputer, CTRL+C dan CTRL+V setelah artikel diseleksi.Dengan menggunakan perintah perintah tersebut, kamu sudah bisa memiliki sebuah artikel yang sama persis dari aslinya.Sangat mudah, hanya perlu sekian menit saja.
Walaupun tanpa menggunakan perintah copy dan paste, kamu bisa juga menyadurnya dengan cara mengetik secara manual.Tapi mana mungkin seseorang menyalin dengan cara ketik manual untuk membuat artikel.Yang jelas bagaimanapun caranya, apabila seluruh atau sebagian artikel yang sama bisa disebut hasil copy paste.

Walaupun kelihatannya mudah, namun tindakan copas ternyata dampaknya sangat merugikan kita dan blog kita sendiri.Berikut dampak yang bisa terjadi jika bikin artikel dengan cara copypaste:

Menjadi pemalas
Dengan copas terus menerus, kita akan menjadi orang yang malas.Selalu cari yang instant tanpa mau belajar.Jika kamu berniat untuk berbisnis online sebagai blogers, tidak akan pernah berhasil jika malas.
Karena penyebab kegagalan terbesar dari bisnis online adalah kemalasan.Dan faktanya, tidak ada kesuksesan bisnis online yang bisa dihasilkan dengan cara instan.

Mematikan kreatifitas
Blog adalah dunia menulis, dan untuk bisa menulis itu butuh pembiasaan.Jika hanya copas melulu, kapan saatnya untuk mulai membiasakan diri agar bisa menulis?.Jangan takut tulisan sendiri dibilang jelek, karena siapapun blogers tidak serta merta bisa menulis begitu saja.Semuanya melalui proses, tidak ada bayi yang langsung bisa jalan tanpa merangkak terlebih dahulu.
PEdE aja lagi dengan tulisan sendiri, jangan malu atau takut diejek..Ini adalah blog milik kamu sendiri, kamu bebas menulis apapun dan bagaimanapun asal karya sendiri.Ingat!!!,,,blog adalah dunia menulis, dengan menekuni bloging berarti harus bisa menulis.
Buktinya, saya sendiri juga tidak malu jika tulisan saya ini jelek,,,

Tidak dihargai oleh sesama blogers
Blogers lain akan merasa enggan untuk menjalin hubungan dengan kamu, apalagi untuk bekerjasama.

Blog bernilai rendah
Walaupun trafik kamu tinggi, jika hasil copas akan sulit digunakan sebagai sumber pendapatan.Semua penyedia periklanan premium terbaik yang ada sekarang tidak menerima kerjasama dengan blog hasil copypaste.

Tidak disukai oleh pembaca
Jangan dianggap para pembaca yang awam ngeblog tidak akan bisa menilai. Mereka akan geram jika merasa seperti mengalami DEJAVU, setelah membaca artikel blog hasil copas.Dengan menemukan artikel yang sama persis dengan yang dibaca sebelumnya, mereka seolah telah menemukan sampah.

Disingkirkan oleh mesin pencari
Dari waktu kewaktu algoritma mesin pencari seperti google search terus mengalami update.Hal ini untuk terus memberikan peningkatan pengalaman terbaik bagi penggunanya.
Mungkin untuk beberapa waktu lalu blog copas masih aman, update terbaru algoritma search google (dynosaurus) sampai saat ini sudah berhasil menjaring ribuan blog yang dianggap spam [Baca di Forum-Forum sebelah].
Blog copypaste bisa terdeteksi sebagai blog SPAM, dan pada akhirnya akan disingkirkan dari result.Jadi masa depan blog yang copas akan terus memburuk kedepannya.

Blog bisa dihapus oleh penyedia layanan
Jika artikel hasil copypaste dilaporkan pelanggaran DMCA oleh penulis aslinya, maka artikel akan dihapus jika memakai layanan blogger.Jika blog menggunakan platform lain misalnya wordpress, artikel akan deindex oleh mesin pencari.Pada tingkatan pelanggaran hakcipta yang lebih parah,  hal ini bisa menimpa keseluruhan domain/isi blog.

Mengingat dampaknya yang cukup besar jika melakukan copas, sebisa mungkin untuk dihindari demi keberlangsungan jangka panjang blog yang dikelola.
Hanya sekedar mengingatkan akan pentingnya peningkatan kualitas blog, karena pada akhirnya kita sendiri yang akan menikmati keuntungannya.
Untuk bisa sukses ngeblog, suka atau tidak suka ya beginilah caranya.Yuk kita berbuat sesuatu yang lebih baik lagi bersama sama, mulai dari sekarang.Happy Bloging!!....

Cara Merubah domain blogspot menjadi dot com

Custom domain blogger adalah mengganti subdomain bawaan blogger,yaitu  subdomain.blogspot.com dengan domain TLD (Top Levels Domain).Hal ini memang telah didukung sepenuhnya oleh blogger, jadi kamu pun bisa melakukannya sendiri dengan mudah.Nama domain apa saja bisa kamu pergunakan untuk mengcustomisasi blog blogspot kamu,asalkan penyedia nama domain/registar mendukung kamu sepenuhnya untuk melakukan setting DNS.
Saran saya kamu lebih baik menggunakan nama domain TLD,karena blog kamu adalah investasi jangka panjang yang bisa kamu kelola.
Nama domain TLD seperti contoh: .com,.net,.biz,.ID,.org dll.Agar domain blogspot kamu bisa menjadi dot com,tentunya kamu pilih domain dengan ekstensi .com.Atau ekstensi domain apapun bisa kamu terapkan untuk mencustomisasi blogspot dengan nama domain sendiri.
Belum mengerti apa itu domain dan TLD?,,Baca dulu: Pengertian domain dan hosting.

Ada dua cara customisasi blogspot yang bisa kamu lakukan:

Pertama langsung memesan nama domain melalui dashboard blogger dimana blog kamu berada.Ikuti prosesnya sampai dengan selesai,dan jangan lupa sediakan dana untuk membeli nama domain pesanan kamu tersebut.
Kedua adalah melakukan setting DNS pada Admin Area yang diberikan penyelenggara domain,jika kamu sebelumnya sudah memiliki nama domain.

Dan yang akan kita bahas disini adalah cara setting DNS custom domain blogspot/blogger.Setting DNS adalah mengarahkan name server dan membuat record agar nama domain tersebut mengarah pada blog kamu diserver blogger.

Keuntungan menggunakan domain sendiri
Jika kamu memang berniat menjadikan blog sebagai make money online/bisnis,menggunakan nama domain sendiri akan terkesan sebagai blog yang digarap dengan bersungguh sungguh.
Biaya ngeblog lebih murah jika dibandingkan dengan menggunakan platform blog hosting sendiri,karena kamu tidak perlu untuk memikirkan biaya server.
Dan masih banyak keuntungan lainnya yang bisa kamu dapatkan dengan menggunakan custom domain blogspot.

Cara setting DNS custom domain blogger:

1.Login kedalam admin area kamu yang diberikan penyelenggara nama domain -> Manage Orders-> List Orders

2.Klik Nama domain Kamu yang akan kamu gunakan sebagai custom domain blogspot.

3.Cari fitur DNS Managemen -> Klik Name servers -> Auto update name servers,hal ini adalah mengaktifkan name server domain kamu.Selanjutnya muncul pesan yang menerangkan, bahwa membutuhkan waktu 24 hingga 72 jam sampai domain aktif setelah di update konfigurasinya.

"Name server Modifications completed succesfully,You will need to allow 24-72 hour propagation time for the DNS service to begin working."

Pesan saya, harus bersabar dulu ya?,,, :D


4.Masih di bagian DNS Nanagement ->Manage DNS->CNAME RECORDS

5.Pada Host Name isikan dengan www,value tandai ceklist yang dibawah kemudian isikan dengan ghs.google.com. TTL biarkan dalam keadaan default->klik add records.

Perlu digaris bawahi bahwa aturan custom domain blogspot kini telah menggunakan protokol baru.Kalau aturan yang dulu,kita hanya cukup menggunakan satu kali Add cname records seperti yang diatas.
Pada intinya pada aturan penerapan protokol baru tersebut kamu harus Add Cname records yang kedua dengan menggunakan kode acak khusus untuk blog kamu.

Menambahkan CNAME record yang kedua:
Lihatlah code acak second CNAME Records khusus blog kamu,caranya login kedalam dasboard blogger.Masuk Setelan->Penerbitan->pilih tambahkan domain khusus->setelan lanjut->petunjuk setelan->pilih one top level domain->Ikuti instruksi cara menggunakan Cname records,->Tambahkan second CNAMe records menggunakan code seperti yang diinstruksikan pada petunjuk setelan tersebut.Cara menambahkannya sama seperti diatas yaitu hanya mengisi pada hostname, menandai ceklist yang bawah dan mengisi codenya.Bedanya hanya pada code yang harus diisikannya saja .Jika sudah selesai  Klik Add Records.

Contoh gambar 2 Cname records seperti ini:

6.Sekarang klik A Records -> Add A Reords.

 7.Host Name biarkan saja kosong,lemudian pada Destination IPv4 Address isikan dengan IP nomor 216.239.32.21 ,TTL biarkan default saja,kemudian  klik tombol Add Record.
Gambar:

Lakukan langkah Add A record seperti diatas sampai sebanyak tiga kali lagi.Namun ketiga  IP yang kamu masukkan berurutan yaitu: 216.239.34.21 , 216.239.36.21 , 216.239.38.21 . Jadi nantinya kamu akan membuat empat record record seoerti gambar berikut:

8.Langkah 1 - 6 diatas adalah cara setting DNS domain kamu,sekarang sampai disini sudah selesai.
Kemudian kamu lanjutkan setting blog blogger kamu,silahkan login kedalam dashboard -> Setelan->Dasar->Penerbitan->Klik link Tambahkan domain khusus.

11.Lanjutkan kemudian dengan klik masuk ke "Alihkan kesetelan Lanjut"

12.Masukkan domain kamu tersebut dengan disertai www,sehingga menjadi seperti www.domain.com.Kemudian lanjutkan dengan klik "Simpan."

13.Jika domain kamu belum terupdate,maka blogger tidak akan menemukan nameserver domain kamu.Sehingga akan muncul peringatan seperti berikut:

Namun jangan khawatir,lakukan lagi beberapa saat nanti jika domain kamu sudah aktif.Lihat pada langkah ketiga (3).


Setelah kemudian kamu coba untuk mengulangi langkah ke 13 dan ternyata berhasil,silahkan melanjutkan kepada langkah terakhir (langkah 14) berikut.

14.Kembali lagi pada setelan penerbitan.Kasih tanda centang pada "Alihkan domain.com ke www.domain.com"-> Simpan.Agar jika domain kamu diakses tanpa www akan teredirect ke domain menggunakan www.Jika tidak kamu lakukan, maka domain kamu akan menampilkan halaman error apabila diakses tanpa menggunakan www.

Setelah semuanya sudah selesai,ternyata kamu masih harus nunggu lagi selama 2x24 jam sampai domain kamu tersebut berlaku(resolve).
Kelihatannya memang sedikit ribet,namun sebenarnya mudah jika sudah terbiasa.Selamat Mencoba!!

Cara mengedit template blogspot

Desain dari sebuah situs bisa menjadi sebuah identitas tersendiri yang unik.Karena itu untuk mendesain desain template yang berbeda dari semua situs yang ada akan membuat kesan sebagai satu ciri khas.

Desain template situs tidak kalah penting untuk diperhatikan,karena hal ini akan berpengaruh terhadap mood dari pengunjung.Desain harus sesuai dengan jenis dan tujuan dari sebuah situs jika ingin lebih optimal dalam segala hal.Baca:Memilih warna yang cocok untuk situs/blog.

Masih banyak alasan lagi kenapa seorang bloger harus menggunakan warna /desain template hasil sentuhan tangan sendiri.Padahal sebenarnya banyak template yang beredar dan bisa digunakan secara gratis bagus bagsu.
Misalnya saja si pemilik blog merasa lebih puas, jika template yang ia gunakan adalah hasil sentuhan tangan sendiri.

Jika anda ingin memiliki desain warna dan tataletak sendiri,anda hanya cukup merubah (mengedit) template yang sudah ada.Hanya menambahkan parameter tertentu saja,mengganti warna background sendiri misalnya.
Baca: Cara mengganti background blog dengan gambar

Untuk merubah tampilan blog (mengedit template) ,khususnya template blogger, anda bisa mencoba tips ini.
Sebelum mulai mengedit template blogspot,kita harus mengetahui struktur sebuah dokumen HTML terlebih dahulu.

Pada dasarnya seluruh template HTML situs itu sama,terdiri dari susunan:

<HTML>
<HEAD>
<TITLE>Web title</TITLE>
Isi yang tidak terlihat di web browser
</HEAD>
<BODY>
Isi dari dokumen sesungguhnya yang terlihat di web browser
</BODY>
</HTML>

<HTML>
</HTML>
Code Seperti diatas disebut sebagai tag html, yang berfungsi untuk memarkup text ASCII menjadi dokumen html.
Tag html Diawali dengan tag pembuka <HTML> dan diakhiri dengan tag penutup </HTML>.Tag penutup ditandai dengan tanda slash "/",yaitu untuk menghentikan proses render.Jika lupa diberi slash maka text diantara kedua tag tersebut tidak akan diproses oleh browser.Karena tag tersebut dianggap sebagai texts biasa oleh browser.

Penjelasan tentang HTML Baca: Pengertian HTML

Berikut ini contoh susunan template XML blogger yang wajib dikenal sebelum memulai mengedit sebuah template.

Catatan: Hanya sebagai contoh,bukan untuk diterapkan secara langsung karena tidak lengkap.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 
<HEAD>

  <META content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
  <META content='blogger' name='generator'/>
  <LINK href='/atom.xml' rel='alternate' title='Your Title - Atom' type='application/atom+xml'/>
  <LINK href='/rss.xml' rel='alternate' title='Your Title - RSS' type='application/rss+xml'/>

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

    <b:skin><![CDATA[

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a img {
  border-width:0;
  }

/** Header **/
#header-wrapper {
  width: 940px;
  margin:10px auto;
  padding:30px 0;
  }


/** Outer-Wrapper **/
#outer-wrapper {
  text-align:$startSide;
  font: $bodyfont;
  }

#content-wrapper {
  width: 940px;
  margin:20px auto;
  }

#main-wrapper {
  width: 600px;
  }

#sidebar-wrapper {
  width: 280px;
  padding: 10px;
  border:1px solid #ccc;
  }


]]></b:skin>

  </HEAD>
 
  <BODY>

 <DIV id='outer-wrapper'>


  <DIV id='header-wrapper'>
     
  </DIV>

  <DIV id='content-wrapper'>
 
 <DIV class='post-footer'>
   
  </DIV>


 <DIV id='sidebar-wrapper'>

 </DIV>

<DIV id='siteinfo'>

</DIV>

</DIV><!-- end content-wrapper -->
</DIV> <!-- end outer-wrapper -->

</BODY>
</HTML>

Hal pertamakali yang harus diketahui dalam mengedit sebuah template (blogger), adalah mengetahui struktur dasar dokumen HTML dan kegunaanya.

Dari contoh atruktur template blogger, diatas mari kita bahas satu persatu code yang ada:

Diantara tag pembuka <head> dan tag penutup </head> adalah area yang tidak terlihat dihalaman blog.Area tersebut tempat meletakkan beberapa tag dan fungsi sbb:


#Berisi tag title,ditandai dengan tag pembuka <title> dan tag penutup </title>.
Ini adalah tag yang menampilkan title / judul halaman blog.Title ini Hanya dapat dilihat jika dokumen HTML diakses menggunakan browser.Namun hanya bisa dilihat pada tab browser (diluar dari isi halaman blog).

#Ditempatkan juga tag "Meta",(meta tag),meta tag adalah perintah yang hanya untuk dibaca oleh crawl (robot).
Ada beberapa perintah yang dimasukkan pada meta tag , tergantung kebutuhan dari sebuah blog.

Jika blog memerlukan deskripsi untuk dibaca oleh crawl mesin pencari, maka dibuat meta deskripsi:
eg:<meta content='berikut ini adalah cara mengedit template blog anda' name='DESCRIPTION'/>

#Biasanya juga diletakkan code pemanggilan kode sumber yang berada di folder lain atau di server situs yang lain.
Sumber kode yang dipanggil biasanya berupa file CSS dan file Javascript:
eg: <script type='text/javascript' src='hxxp://alamatsumbercode.com/folder/file.js'/>
<link rel='stylesheet' type='text/css' href='hxxp://alamatsumbercode.com/folder/style.css' media='screen'/>

Diantara tag pembuka <b:skin><![CDATA[ dan tag penutup ]]></b:skin>

Pada area ini diletakkan code CSS ,yaitu rangkaian code yang mengatur tataletak,warna background,font dari elemen HTML yang akan ditampilkan pada halaman blog.Masih banyak sekali fungsi untuk memanipulasi tampilan yang bisa diatur dengan CSS.
CSS ditandai dengan selector dari masing masing ID HTML yang ingin kita atur tampilannya.CSS sangat menentukan terhadap desain pada sebuah blog.
Melalui CSS inilah anda bisa merubah warna latar blog ,menambah garis pembatas,merubah ukuran elemen dan lain lain.
Untuk mengenal CSS,Anda bisa mempelajarinya pada kategori artikel: CSS

Di area tersebut berisi tag pembuka <body> dan tag penutup </body>

Pada area inilah isi dokiumen yang sesungguhnya yang terlihat pada sebuah halaman dari dokumen HTML.
Disini diletakkan elemen elemen yang menyususun bagian bagian dari isi halaman blog.

Elemen elemen tersebut ditandai dengan adanya ID HTML.ID html dibuat oleh seorang webmaster sebagai selector dan untuk mempermudahkan mengenali bagian dari sebuah elemen.Selector adalah identitas suatu komponen /elemen yang akan kita atur dengan CSS.

Susunan ID elemen template html Contoh:
Tag DIV pembuka <DIV id='outer-wrapper'> dan tag div penutup</DIV>

Contoh ID elemen yang umum pada template blogger pada contoh:

<DIV id='outer-wrapper'>Isi Elemen keseluruhan</DIV>

<DIV id='header-wrapper'>Isi Elemen Header</DIV>

<DIV id='content-wrapper'>Isi Elemen Content</DIV>

<DIV class='footer'>Isi Elemen footer</DIV>

<DIV id='sidebar-wrapper'>Isi Elemen Sidebar</DIV>

<DIV id='siteinfo'>Isi elemen Info blog</DIV>

Berapapun jumlah elemen yang ditandai dengan DIV dan ID html bisa dimasukkan,tergantung dari kebutuhan webmaster dalam mendesain sebuah template.Selain ID ada juga CLASS.
Didalam area body inilah anda bisa menambah ataupun mengurangi elemen halaman.Anda juga bisa memindah tataletak dari elemen yang sudah ada.

Lebih jelasnya Baca:ID dan CLASS HTML

Jadi mutlak diperlukan pengetahuan dasar dasar HTML dan dasar dasar CSS agar mengerti betul bagian mana yang perlu untuk di edit.Jika belum paham sama sekali,disarankan jangan langsung melakukan edit template.Agar tidak bingung dalam mengedit template blogger, pelajari dulu dasar dasar HTML dan CSS pada artikel sebelumnya yang sudah ada blog ini.

Membuat label Breadcrumb yang cepat terindex

Label Breadcrumb sebenarnya sudah banyak yang menerapkan sejak jaman dahulu kala.Namun breadcrumb versi terbaru ini berbeda dengan model breadcrumb versi dulu.Breadcrumb yang lama itu bisa tampil di hasil pencarian google namun entah kapan itu yang belum pasti.Bahkan dulu ada yang bilang,breadcrumb akan ditampilkan jika blog sudah dapat penghargaan PageRank 3.

Namun sebenarnya nggak demikian,paling tidak untuk sekarang ini.Karena label breadcrumb kali ini sudah menerapkan code yang bisa dibaca oleh mesin.Karena itulah breadcrumb yang akan kita bahas kali ini bisa tampil di hasil pencarian bahkan blog masih baru sehari dibuat.

Bagaimana sih code khusus yang bisa dibaca oleh mesin itu?..

Seperti inilah kira kira code/tagnya:
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>..</span>
Nah dengan demikian,mesin akan bisa menterjemahkan bahwa area tersebut adalah breadcrumb.Sekaligus sang mesin mengindex halaman blog anda,seketika itulah dia akan mencatat dan menyimpan konfigurasi bredacrumb anda.Jadi nggak perlu nunggu PR 3 untuk mempunyai label breadcrumb yang ikut  terindex di hasil pencarian.

Cara menerapkan Code Breadcrumb kedalam template blogger:

1.Seperti biasanya,dashboard -> template -> Edit HTML -> Ceklist "Expand Template Widget" -> Temukan tag berikut menggunakan ctrl +F seperti biasanya.

<b:includable id='main' var='top'>

Kemudian anda hanya tinggal paste code berikut tepat diatasnya:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url' rel='tag'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#8250;
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' href='' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a></span>
</b:if>
</b:loop>
<b:else/>
&#8250; Unlabelled
</b:if>
&#8250; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Home</span></a></span> &#8250; Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Home</span></a></span> &#8250; All posts
<b:else/>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl'><span itemprop='title'>Home</span></a></span> &#8250; Posts filed under <data:blog.pageName/>
</b:if>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>


2.Sekarang Anda cari tag berikut:
<b:include data='top' name='status-message'/>
dan
 <data:defaultAdStart/>

Jika sudah dapat,paste tag berikut diantara (ditengah) dari kedua tag diatas:
<b:include data='posts' name='breadcrumb'/>

3.Memasang Style:Cari tag ]]></b:skin> ,kemudian paste code CSS dibawah ini diatasnya:

.breadcrumbs{text-align: left;font-size:93%;padding:0px 0px 10px 0px;margin:0px 0px;color:#666;border-bottom:1px solid #e7e7e7}

Anda bisa mengkustomisasi Style sesuai dengan selera.

4.Kalau sudah yakin tidak ada kesalahan dan sesuai dengan step step,sekarang simpan template.

5.Mulai sekarang setiap anda posting,maka akan terindex atau tampil dihasil pencarian google sudah lengkap dengan breadcrumb.Untuk postingan sebelumnya,breadcrumb akan tampil mungkin harus nunggu dulu sampai mesin pencari menyambanginya lagi.

Jika anda ingin segera mengetahui apakah breadcrumb yang baru anda buat tadi berhasil,bisa melakukan pengecekan salah satu URL di:

http://www.google.com/webmasters/tools/richsnippets

Dan lihat hasilnya,jika memang semua sudah benar maka breadcrumb akan tampil dalam pengujian.Seperti gambar berikut:

Selamat Mencoba!

Cara mengganti Backgound blog dengan gambar

Sebelum memasang Background gambar atau background IMG, sebaiknya kamu pikirkan terlebih dahulu.Karena penggunaan background gambar yang kurang tepat pada blog bisa menambah loading blog dan mengganggu penampilan.

Saya bilang begitu bukan tanpa alasan,sebab saya sering kali menemukan blog dengan background gambar yang berlebihan.Ketidaknyamanan yang saya rasakan terutama loading yang berat dan warna tulisan yang tersamarkan oleh background.

Pada umumnya seorang desainer template menambahkan gambar sebagai background hanyalah untuk bagian elemen yang kecil saja.Dimaksudkan karena hal tersebut tidak bisa dilakukan dengan hanya menggunakan CSS saja.


Sebelum kita bahas bagaimana cara menambahkan background gambar untuk template blog,saya akan berbagi tips terlebih dahulu agar nantinya background sesuai dan tidak mengganggu pembaca.

1.Pilih Gambar

Gambar yang akan dipakai sebagai background akan lebih tepat jika menunjukkan nice-blog kamu.Misalnya blog kamu tentang pertanian,maka background yang cocok adalah gambar seperti sayuran atau buah buahan.

Pilih gambar yang berukuran file kecil.Biasanya gambar berekstensi .jpg memiliki ukuran file yang lebih kecil karena bisa diatur kualitasnya.

jangan menggunakan gambar yang dominasi warnanya terlalu kuat dan kontras.

2.Metode pemasangan

Ada beberapa metode  dalam memasang gambar background,gambar diulang secara horizontal,gambar diulang secara vertikal,gambar tidak diulang dan gambar diulang secara horizontal maupun vertikal.

Menurut saya agar loading tidak terlalu bertambah berat dan tidak mengganggu visualisasi,hindari menggunakan metode gambar diulang secara horizontal maupun vertikal.Kamu bisa menggunakan metode gambar diulang horizontal hanya dibagian atas (top) atau background gambar dibagian bawah (bottom).

3.Elemen Template

Elemen dari template blog yang lebih cocok di berikan background gambar adalah elemen body dan elemen header.Karena kedua elemen tersebut bukanlah area konten (dalam hal ini artikel).Sebaiknya untuk elemen post body (content) tidak menggunakan background gambar,apalagi yang terlalu berlebihan.

Cara pemasangan background gambar

Berikut beberapa metode penggunaan CSS untuk pemanggilan gambar sebagai background:

Gambar diulang horizontal dan vertikal (penuh)
body{background: url(/image/style/background.jpg);}


Gambar hanya diulang horizontal dari kiri posisi atas (top)
body{background: url(/image/style/background.jpg) repeat-x top left;}


Gambar hanya diulang horizontal dari kiri posisi bawah (bottom)
body{background: url(/image/style/background.jpg) repeat-x bottom left;}


Gambar hanya diulang vertikal dari kiri posisi atas (top)
body{background: url(/image/style/background.jpg) repeat-y top left;}


Gambar hanya diulang vertical dari kiri posisi bawah (bottom)
body{background: url(/image/style/background.jpg) repeat-y bottom left;}


Gambar tidak diulang , posisi berada ditengah
body{background: url(/image/style/background.jpg) no-repeat center;}


Gambar tidak diulang,  posisi berada ditengah dan tidak bergerak ketika di scroll (fixed)
body{background: url(/image/style/background.jpg) no-repeat fixed center;}


Posisi gambar dengan persen
body{background: url(/image/style/background.jpg) repeat-y 40% left;}

Cara menggunakan background gambar sekaligus dengan menggunakan code warna.

Hal ini biasanya dipakai jika background gambar tidak menyeluruh menutupi elemen.Sehingga sebagian area dari elemen yang tidak tertutupi gambar bisa diberi background warna yang sesuai.
Contoh code CSS:
body{background: #cccfff url(/image/style/background.jpg) repeat-y top left;}
Yang berwarna merah adalah code hex dari warna background yang diinginkan.

Cara penempatan code:
Kamu bisa menempatkan background pada semua elemen template pada CSS.Penempatan code CSS pada template blogspot terletak dibawah tag ]]<b:skin>,cari selector dari elemen yang akan disisipkan background gambar,misalnya body{}, atau #header {}.

Catatan:
/image/style/background.jpg adalah alamat folder gambar dalam satu directory domain situs.Namun jika kamu memanggil gambar dari situs lain harus diketik dengan url gambar lengkap , contoh: http://www.situsgambarku.com/folder/gambar/background.jpg.
Jika blog kamu adalah blog bukan domain sendiri,maka kamu perlu menyimpan gambar yang sudah dipersiapkan kedalam situs hosting gambar.Banyak situs hosting gambar yang bisa kamu manfaatkan,misalnya tinypic.com.


Nilai seperti left atau center itu sama dengan bahasa inggris, artinya kanan atau kiri.Bisa kamu ribah sesuai dengan keinginan kamu memberikan posisi tampilannya.

Membuat NavBar dropdown menu dengan CSS

Navigasi blog yang akan kita buat berikut adalah navigasi horizontal menu dropdown dengan hanya menggunakan CSS.
Karena hanya dengan menggunakan CSS,cara memasangnya pun menjadi cukup simpel.Disamping itu menu dropdown horizontal ini tidak akan memberatkan loading blog kamu.

Jika kamu membutuhkan navigasi lebih banyak untuk beberapa halaman,menu dropdown adalah solusi yang tepat untuk menghemat tempat.

Apa keistimewaan NavBar dropdown berikut?..

• Desain yang bagus
• Mudah memasangnya untuk blogger
• Bekerja baik pada sebagian besar browser
• Mudah dicustomisasi
• Menampung banyak link untuk navigasi

Cara memasang NavBar dropdown menu dengan CSS untuk blogger:

1.Buka dashboard blog -> template -> Edit HTML -> temukan tag ]]</:b skin>
Kemudian pastekan code CSS berikut diatasnya:

/* Start Code Dropdown Menu*/
#pad {height:100px;}
#hmenu {padding:0; margin:0; list-style:none; height:30px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#hmenu li {float:left; margin-right:1px;}
#hmenu li a {display:block; float:left; height:30px; line-height:30px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold;

padding:0 25px 0 10px;}


#hmenu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#hmenu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;}
#hmenu li:hover {position:relative; z-index:200;}

#hmenu li:hover > a {
color:#fff;/* Menu Font Color */
background:#840; /* Menu mouse over Color */
}

#hmenu li:hover > a.sub {
color:#fff; /* Drop down item mouse over font Color */
background-color:#840; /* Drop down item mouse over background Color */
}
*/
#hmenu li.current a {color:#fff; background:#840;}


#hmenu li a.sub {
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrmKWpq2cUWJJ1aX1cBKCA_6aAkv3qfeJqbd-4HxVBzwEgBTSGGhcqoeS-ZO08GJbmXgAUnjwxJKRzzUJKqqbedQNe6cww9woLAv_Ad8PwhVCEvKKtbDS7xea7NEPI84WWRGrgO7Hzq4E/) /* Down arrow image */
no-repeat right center;
}

#hmenu :hover ul {left:0; top:30px; width:120px; background:#444;}

/* keep the 'next' level invisible by placing it off screen. */
#hmenu ul,
#hmenu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#hmenu :hover ul :hover ul
{left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}

#hmenu :hover ul li {margin:0; border-top:1px solid #666;}
#hmenu :hover ul li a {
width:120px; /* Width of sub menu item */
padding:0; text-indent:10px;
background:#333; /* Drop down background color */
color:#ccc; /* Drop down item font Color */
height:30px; line-height:30px;}
#hmenu :hover ul li a.fly {background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9z2OKAN3grCWmLscxsASCJGTm0IXFInCmmJ-6Q2Mh5KsCMp8_9ihtDQrzz0jtedyhOrbOAXVcQWx_fhOc872hIlo9BMN7k694poAtzvp4nvujIpvRPIHwRGlCvyb-LintN8kne0xS9J0/) no-repeat right
center;}

#hmenu :hover ul :hover {background-color:#c60; color:#fff;}
#hmenu :hover ul :hover a.fly {background-color:#c60; color:#fff;}

#hmenu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#333; /* Dropdown Sub Menu background color */
color:#ccc; /* Dropdown Sub Menu font color */
}
#hmenu :hover ul :hover ul :hover {
background-color:#c60; /* Dropdown Sub Menu mouse over color */
color:#fff;/* Dropdown Sub Menu mouse over font color */
}

/* End code dropdown menu */

2.Memasang kerangka navbar dorpdown bisa diletakkan di bawah header melalui EDIT TEMPLATE ,atau secara langsung dari dalam template.Bisa juga dipasang melalui widget dibawah header (jika ada preferensinya),yaitu Add new widget ->  HTML/Javascript dan tambahkan code kerangka dari navbar dropdown berikut:

<ul id="hmenu">
<li class="current"><a href=""><b>Home</b></a></li>
<li><a href="About Us"><b>About Us</b></a></li>

<li><a class="sub" href="#"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 1.1</a></li>
<li><a href="#url">Dropdown 1.2</a></li>
<li><a href="#url">Dropdown 1.3</a></li>
<li><a href="#url">Dropdown 1.4</a></li>
<li><a href="#url">Dropdown 1.5</a></li>
<li><a href="#url">Dropdown 1.6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="sub"><a class="fly" href="#url">Dropdown two<!--[if gte IE

7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 2.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 2.3</a></li>
<li><a href="#url">Dropdown 2.4</a></li>
<li><a href="#url">Dropdown 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 5.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="#"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown one</a></li>
<li><a href="#url">Dropdown two</a></li>
<li><a href="#url">Dropdown three</a></li>
<li><a href="#url">Dropdown four</a></li>
<li><a href="#url">Dropdown five</a></li>
<li><a href="#url">Dropdown six</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li id="support"><a href="#"><b>Menu</b></a></li>
</ul>


Silahkan menambahkan link link navigasi milik kamu dengan cara mengganti link/URL pada kerangka diatas sesuai dengan keinginan.

3.Simpan template - Selesai.

Membuat multitab Sidebar dengan JQuery

Kamu ingin menambah navigasi diblog kamu agar pengunjung tidak kesulitan menjelajahi fitur yang ada.Namun masalahnya kamu juga ingin menghemat tempat di sidebar agar tidak terlalu memanjang kebawah.Kalau begitu yang kamu pikirkan maka  multitab Sidebar ini adalah sebuah solusinya.

Jika kamu ingin menghemat tempat untuk widget di sidebar kamu,silahkan ikuti instruksi berikut untuk mendapatkannya.

Hal ini sebenarnya cukup sederhana dan tidak terlalu ribet memasangnya karena menggunakan jQuery.
Silahkan kamu coba untuk diterapkan kedalam blog kamu jika masih mementingkan navigasi sekaligus menghemat ruang.

Sebelumnya lihat dulu screenshoot berikut supaya lebih jelas apa itu multi tab sidebar:

Cara Memasang sidebar multi tab untuk blogger:
Pertama seperti biasa,login dashboard blogger -> Template -> Edit HTML -> Centeng Expand Template Widget.
Cari tag ]]</b:skin> kemudian pastekan code CSS berikut diatasnya:

/*--------Start Tabber CSS-------------------------*/
.tabber
{}
.tab_container {
border: 1px solid #0080FF;/*--Set Border Color  Tab Container--*/
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff; /*--Set The BackGround Color Tab Container--*/
}
.tab_content {
padding: 10px;
font-size: 1.1em;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height tabs--*/
border-bottom: 1px solid #0080FF;/*Bottom Border Color Tab Menu */
width: 100%;
}
ul.tabs li {
float: left;
margin-right:5px;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-bottom:1px solid #0080FF;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0; /*Set Background color Tab menu*/
}
ul.tabs li a {
text-decoration: none;
color: #000; /*Set tab warna link*/
display: block;
font-size: 1.1em;
padding: 0 5px;
border: 1px solid #fff; /*--Berikan warna dan bordr sesuai selera--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;/* Set Tab Mousehover Background Color */
}
ul.tabs li.active{
background: #fff;/* Set Active Tab Background Color */
color:#0080FF;
border:1px solid #0080FF;
border-bottom: 1px solid #fff; /*--Tab aktife yang terlihat--*/
}
ul.tabs li.active a:hover /*--Set the active tab mouse hover properties--*/
{
background: #fff; /* Set active Tab Mouse over Background Color */
}
/*----------Tabber CSS Code End--------------*/

Kamu bisa merubah style atau warna background sesuai dengan warna template kamu dengan mengedit CSS diatas.Isi deklarasi dari .tabber jika ingin membuat background yang berbeda,atau style yang kamu inginkan.

2.Paste code jQuery berikut sebelum tag </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
/*----------Start Tabber Script--------------*/
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
/*----------End Tabber Script--------------*/

Catatan: Jika template Kamu sudah ada script jQuery Library <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js' type='text/javascript'/> ,maka yang ada didalam code diatas dihapus saja.Mungkin hanya versinya yang berbeda,dan itu boleh diganti dengan versi yang lebih baru.

3.Sekarang carilah ID elemen <div id='sidebar-wrapper'> atau mungkin <div id='sidebar'> ,code diatas adalah ID elemen dan mungkin saja webmaster perancang template kamu tidak menggunakan nama ID seperti diatas.Akan tetapi kebanyakan perancang menggunakan nama seperti <div id='sidebar'> atau yang mirip.

Jika kamu sudah memastikan menemukan ID seperti diatas,pastekan code berikut setelahnya:

<div id='tabber'>
<ul class='tabs'>
<li><a href='#tab1'>Recent Post</a></li>
<li><a href='#tab2'>Statistic</a></li>
<li><a href='#tab3'>Subscribe</a></li>
</ul>

<div class='tab_container'>
<div class='tab_content' id='tab1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tab_content' id='tab2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tab_content' id='tab3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
</div>

Diatas adalah kerangka dari tabber sidebar.Edit nama widget sesuai dengan kebutuhan kamu,lihat yang warna merah.

4.Simpan template blog kamu,sekarang beralihlah kedalam -> penyetelan -> Tata letak.
Tambahkan widget baru kedalam tabber sidebar berikut,atau kamu juga bisa menyeret widget yang sudah ada.Lihat Gambar berikut.

5.Selesai.

Smooth Scrolling Dengan JQuery

Fitur ini merupakan bagian dari fitur navigasi blog,dimana berguna bagi pengunjung untuk memudahkan dalam menjelajahi artikel di blog kita.
Jika dalam sebuah artikel didalam blog kita terlalu panjang kebawah,dengan Smoth Scrolling ini pengunjung akan dengan mudah terbantu untuk kembali ke top page dengan cara klik tombol.
Namanya Smooth Scrolling atau lebih tepat diartikan memutar dengan halus ke atas,efek "smooth" ini karena fungsi animasi yang dibuat dengan jQuery.

Fungsi scrolling ini sebenarnya sudah tidak asing lagi,namun jika ingin menggunakan efek scroll yang halus berikut caranya.

Langkah pertama tentu saja kamu harus login kedalam dashboard blogger -> Template -> Edit HTML.
Carilah Tag ]]</b:skin> dan pastekan code CSS berikut ini diatas Tag ]]</b:skin>:

#go-to-top {
padding:1px;
position:fixed;
bottom:0px;right:0px;
cursor:pointer;
}
#go-to-top img
{
height:40px;
width:35px;
border:none;
padding-right:5px;
}

Langkah ke 2 ,temukan tag </head> dan pastekan code berikut sebelum/diatas tag </head>
Catatan: Jika Code <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> sudah terdapat didalam template Blog Kamu,maka tidak perlu dipasang lagi.Jadi kamu hapus saja yang terdapat didalam code berikut.

/*----------Start Smooth Scrolling Script--------------*/
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script language='javascript' type='text/javascript'>
$(document).ready(function(){

    // hide
    $(&quot;#go-to-top&quot;).hide();
  
    // fade in
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() &gt; 100) {
                $(&#39;#go-to-top&#39;).fadeIn();
            } else {
                $(&#39;#go-to-top&#39;).fadeOut();
            }
        });

        // scroll to top
        $(&#39;#go-to-top img&#39;).click(function () {
            $(&#39;body,html&#39;).animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});

</script>

Masih dihalaman EDIT HTML, sekarang langkah ke 3 temukan tag </body>,pastekan code berikut sebelum atau diatas tag </body>

 <a href='#' id='go-to-top'><img alt='Back to Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaDVZ0EMSlDibRQlBUkW0-loi-CICRMb8PS6ufOa3FhVQU6FQoMUjpWL-rYj4JkFIF6ad_w-aMivcqwgURV1bv3VYU0x0biLZxoG_pRismtj5SOtNHr2mjyknI5GYFOqOP8EP5M-0d04iJ/'/></a>



Terakhir simpan template Kamu,dan lihatlah hasilnya.


Happy Blogging!

Cara membuat FB Like Box melayang dengan tombol close

Kreasi FB Like Box melayang ini dapat anda coba untuk semakin mempercantik blog kamu.Selain itu pengunjung blog kamu akan selalu melihat Likebox ,sehingga mereka tidak akan lupa memberikan like sebelum meninggalkan halaman blog kamu.Dan Kamu pasti senang kan jika likes fanpage kamu semakin cepat bertambah.


Keistimewaan dari like box melayng ini adalah muncul disebelah kiri dari kontent(untuk wide screen),sehingga tidak akan menghalangi artikel dan navigasi.Selain itu juga  adanya tombol Close,sehingga bisa di sembunyikan oleh pengunjung jika mereka anggap mengganggu.

Cara bekerjanya: jika pengunjung melakukan scrooling kebawah atau keatas,FB like box tersebut tetap berada pada posisinya (mengambang) dengan halus.

Kamu bisa memasangnya di blogspot ataupun blog wordpress hosting sendiri.

Code dan cara pemasangan FB Like Box melayang dengan tombol Close.
Kreasi ini hanya menambahkan sedikit code Javascript ,ikuti langkah langkah berikut.

1.Persiapkan dulu code dari plugin likeboxnya terlebih dahulu dengan memakai ukuran : width 140px dan height 270 px.Kamu bisa menyesuaikan ukurannya dengan template blog kamu nanti.Ukuran yang dipakai memang tidak terlalu lebar agar tidak menghalangi kontent.

2.Buat New widget HTML/Javascript (blogspot), kemudian copypaste code berikut:

<style type="text/css">
#fixed{
position:absolute;
margin-top:140px;
background-color: #fff;
width: 140px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 40 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.dobumentElement : document.body
}
function get_cookie(Name) {
var$20search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("fixed").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("fixed").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var20pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("fixed");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="fixed">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="http://demandware.edgesuite.net/aaca_prd/on/demandware.static/Sites-ninewest-Site/-/default/v1340878667943/images/productDetail/b_close_wText.gif" /></a></div>

Masukkan disini Code dari LikeBox FB Kamu

</div>

Kamu bisa melakukan penyetelan atau penyesuaian dengan merubah nilai pada code yang diberi warna merah.

3.Ganti tulisan yang berwarna biru pada script diatas, dengan Code dari plugin FB LikeBox yang sudah kamu buat dan sediakan tadi.

4.Simpan Widget

5.Selesai dan coba.

Nah kan,lebih keren karena munculannya tidak mengganggu kontent blog kamu,dan bisa di close lagi...Enjoy...

Cara mendaftarkan blog ke google Addurl

Mendaftarkan blog yang baru dibuat kedalam index Google search engine diperlukan agar mesin perayap mereka segera menemukan blog yang baru saja anda buat.Untuk kemudian mereka akan memasukkan kedalam database dan akan memunculkan pada hasil pencarian.Nantinya pengguna akan menemukan blog anda dari google search engine dengan katakunci yang sesuai dengan tujuan blog anda.
Ini adalah langkah pokok setelah sebuah blog selesai dibuat,jika anda menginginkan blog agar segera dirayapi  mesin telusur dan memperoleh pengunjung dari google.

Caranya anda cukup mengirimkan URL lengkap dari domain tingkat atas dari blog anda saja yang perlu dikirimkan di google add url.Dengan sendirinya googleboot nanti akan menemukan  URL yang menuju dokumen HTML/halaman lain dari blog anda pada saat merayapi index blog.Jadi anda tidak perlu mengirimkan semua URL yang meliputi masing masing dari halaman yang ada pada domain anda.Kirimkan domain utama/halaman index blog lengkap dengan http:// ,contohnya http://www.spiderbeat.com/ melalui form yang disediakan serta boleh mengisi tanggapan yang berisi materi atau katakunci dari blog anda.

Add Url blog baru anda pada Google di http://www.google.co.id/add_url.html

Cara Meringankan Loading blogspot

Untuk membuat loading blog mesin blogspot agar lebih ringan  memang gampang gampang sulit.Gampangnya,mudah saja membuat loading blog menjadi cepat,namun blog akan menjadi nyaris tanpa desain dan minim fitur.Sulitnya adalah, bagaimana kita menyelaraskan desain yang ideal sebagaimana web pada umumnya namun loading harus seringan mungkin.Jadi Bisakah selaras antara desain yang unik cukup fitur namun blog tetap ringan loadingnya?..
Disini kita harus dituntut untuk bijaksana dalam mengambil keputusan,cieee,,,,,,serius amat sih,,, he he,,,,

Begini solusi agar template blogspot menjadi ringan:

Dari segi fitur
Sepertinya nyaris dan mau nggak mau kita harus untuk memakai javascript untuk menambah sedikit fitur (widget),contohnya paling tidak menggunakan related post atau recent post.Kedua fitur tersebut adalah fitur standard sebuah blog,dan penting memang untuk kebutuhan navigasi.
Sebenarnya kedua fitur tersebut cukup lumayan untuk  membebani loading,karena rendering code yang harus mencari dan menampilkan kontent dari FEED.
Apalagi jika recent post ataupun related post tersebut juga menampilkan thumbnail,tentu saja akan menjadi berat lagi dong.Jadi kebijaksanaannya harus mau menentukan mana yang lebih ringan,yaitu tanpa thumbnail.Karena banyak yang share code code tersebut,maka cari yang tidak menggunakan terlalu banyak karakter pemrogramannya.Karena terlalu banyak karakter juga akan menambah ukuran file dari template blog.Kalau mau menguji coba apakah takaran template blog sudah emberikan kecepatan loading yang disarankan atau belum,coba gunakan tool ini gtmetrix.com
Kalau saya menggunakan recent post yang diberdayakan oleh feedburner saja,karena saya anggap lebih simple dan ringan.
Fitur lainnya yang membutuhkan kebijaksanaan atau butuh solusi lain misalnya adalah,"apakah perlu memasang widget friend connect?"..Widget ini lumayan berat juga,dan ini juga harus dipertimbangkan antara kegunaan dan kerugiannya.

Dari segi HTML
Perlukah kita menambah elemen baru lagi?,,,,,jika sebuah elemen ditambahkan namun sedikit keuntungannya lebih baik diremove saja.Contohnya,perlukah menambah 3 kolom widget diatas dan dibawah?.....Jika keduanya kurang dipergunakan atau tak banyak keuntungannya,kenapa dipasang?...Apalagi elemen elemen widget tersebut kosong,nggak kepakai maka lebih baik dibuang saja.Sekedar tahu saja jika belum,widget 3 kolom itu minimal menggunakan 3 buah ID HTML.

Javascript
Maksimalkan penggunaan javascript untuk membangun template.Misalnya,Perlukah kita menggunakan Jquery padahal kita hanya butuh 1 plugin saja yaitu dipakai untuk smooth navbar dropdown.Padahal jQuery adalah perpustakaan,artinya kita membawa gedung perpustakaan kerumah padahal  hanya butuh 1 buku saja.Membuat menu navigasi bertingkat bisa hanya menggunakan Css saja tanpa javascript /Jquery.Kalau hanya perlu untuk itu saja sih,kenapa harus membawa perpustakaan kerumah?...

CSS
Maksimalkan juga penggunaan CSS,buang jika ada baris baris code yang tidak kepakai,atau tidak ada ID atau Class HTMLnya.Kompress CSS nya jika tidak akan diedit lagi,atau desain sudah final.Gunakan tool ini "CSS commpresor" ,selain kamu bisa mengkompress CSS sekaligus bisa juga untuk mengembalikannya lagi (uncommpressed).
Persingkat penulisan CSS,contohnya:

div#elemen1{padding-top: 5px;

                     padding-right: 8px;

                     padding-bottom: 5px;

                     padding-left: 8px;

                     }

div#elemen2{padding-top: 5px;

                     padding-right: 8px;

                     padding-bottom: 5px;

                     padding-left: 8px;

                     }

Maka bisa disingkat penulisannya menjadi:

div#elemen1, div#elemen2{padding: 5px 8px 8px 5px}

 Penggunaan IMG (gambar)
Jika menggunakan IMG atau background img  dalam mendesain template,pertimbangkan apakah memang sangat dibutuhkan atau tidak.Jika bagian elemen tersebut tidak terlalu penting pakai IMG ya lebih baik nggak usah  memakai IMG.Apalagi jika IMG tersebut mengganggu atau menghalangi konten sehingga sulit untuk dibaca.
Kalau memang terpaksa menggunakan IMG,kompres ukuran IMGnya.Disarankan menggunakan IMG berekstensi JPEG/JPEG,sebab GIF dan PNG relatif lebih besar ukurannya.
Tadi yang pertama,yang kedua jangan memperkecil gambar dengan CSS/HTML,misalnya:
Gambar /IMG tersebut berukuran asli 400X 300 dan diperkecil dengan code HTML menjadi <img src="/gambar.jpg width='100' height='50'/> .Hal itu hanya memperkecil ukuran yang tampak oleh mata saja,namun ukuran file masih tetap sama besarnya.Kalau kasusnya seperti  itu, lebih baik IMG diperkecil ukurannya menggunakan editor gambar.Namun untuk postingan blogspot saya kira tidak perlu memikirkan ini karena mesin blogger sudah punya solusi otomatis untuk itu.

Validasi CSS/HTML
Kalau yang ini option saja deh,karena sulit bagi template blogspot benar benar valid HTML 100%.Kalau menurut saya sendiri sih yang ini nggak terlalu diperhitungkan,asal jangan terlalu kebangetan saja hasil ketidak valid-annya.

Template yang terlalu polos juga cepat membosankan,terlalu heboh juga bisa  terlalu memberatkan dan menghambat hasil optimasi SEO.
Bagaimana kebijakan kamu dalam menyikapi hal ini?....

Cara agar template blog menjadi SEO friendly

Ini adalah tips yang mungkin dibutuhkan oleh blogger yang ingin kunjungan organik dari mesin pencari.Tips membuat template menjadi SEO friendly ini setidaknya sudah saya terapkan sendiri untuk template blog blog milik saya.Jika Kamu tidak sependapat dengan tips yang saya sampaikan ini,silahkan diskip saja tutorial ini.Namun jika Kamu merasa perlu dan setuju,maka silahkan mengikuti dengan apa yang akan saya uraikan berikut.

Berikut Tips agar template blog menjadi SEO friendly

Mengurangi beban loading halaman blog.

Hal seperti ini memang banyak disarankan oleh para master SEO,bahkan Google sendiri menyediakan tool untuk menganalisa kecepatan loading,di https://developers.google.com/speed/pagespeed/.
Banyak cara yang bisa kamu lakukan untuk membuat template menjadi ringan,diantaranya:
Pergunakan ID dan Class HTML dengan efektif,artinya tidak menambah elemen elemen yang sebetulnya tidak perlu.Semakin banyak karakter yang membangun suatu code,otomatis akan bertambah ukuran file template.Disamping itu,browser akan merender satu persatu ID dan Class HTML yang ada sampai tuntas.
Hapus CSS ,baik keseluruhan maupun deklarasi yang tidak dipergunakan .Kalau perlu kompress CSS menggunakan tool CSS compressor,jika malas mengkompress secara manual.
Jika menginginkan model efeks efeks untuk fitur tertentu,kalau masih bisa dibuat dengan CSS maka jangan menggunakan javascript.Contohnya, menu dropdown yang saya pakai ini saya pilih yang menggunakan CSS.Saya tidak tertarik walau jika  menggunakan Javascript hasilnya akan lebih bagus.
Buang widget widget yang tidak terlalu penting,apalagi menyumbang untuk  menambah beban loading.Cukup mempergunakan navigasi standar saja,seperti recent post,navbar dan label widget.Terutama yang monetize,karena belum lagi membaginya dengan script PPC atau banner misalnya.
Pengunjung hanya perlu untuk membaca artikel blog,bukan untuk melihat salju berguguran yang ada diblog kamu.Nggak perlu lebay kalau hanya merugikan loading blog.Jadi efeks efeks javascript yang tidak dibutuhkan oleh visitor,baiknya diremove saja.
Mempergunakan background image yang proporsional(sesuai kebutuhan),jangan lebay dengan memakai background gambar donal bebek satu halaman body penuh.Apalagi background gambar tersebut mengganggu tulisan menjadi tidak jelas.Hal ini bukannya visitor akan kerasan membaca dan menjelajah,bahkan bisa kabur bahkan belum kelar membaca.

Desain dan Tampilan

Dengan mengurangi ID/CLASS Html,atau CSS bukan berarti template boleh terlihat asal asalan.Ini sebenarnya pilihan,jika blog ingin terkesan dikelola dengan baik maka tampilan harus diperhatikan.Walaupun domain gratisan,kalau desain template punya kesan profesional kan lebih mantap.
Dengan tetap memperhatikan aspek typhografi yang bagus,paling tidak sudah cukup.
Pada intinya bagaimana agar visitor merasa nyaman melihat blog,dan membaca artikel sampai habis tanpa merasa matanya lelah.Karena merasa nyaman baik loading dan saat membaca,maka kemungkinan besar visitor  untuk  menjelajahi artikel yang lain semakin tinggi.
Memang tidak gampang mendesain template yang sederhana,namun memiliki desain yang berkarakter.Cobalah untuk mencari model yang bisa dicontoh jika merasa kesulitan untuk membuatnya.

Heading yang baik
Heading adalah penggunaan  tag HTML seperti <h1><h2><h3>.Katanya banyak orang sih,heading yang baik itu disukai oleh mesin pencari.
Jadi template blog harus bisa membedakan ini,misalnya h1 adalah judul blog yang akan mewakili topik yang dibahas.Dan h2 adalah sub dari h1 yang merupakan bagian dari topik yang dibahas.h1 mutlak harus terdapat dalam struktur template blog dan hanya boleh ada 1 saja dalam setiap halaman.Dan h2 boleh lebih dari 1,atau berapapun selama masih mungkin.h3 sepertinya boleh ada ataupun tidak.

Dalam penerapan heading untuk blog,bisa menggunakan trik tag dinamis h1 h2,Tag didamis h1 h2 artinya bisa menyesuaikan sendiri struktur (h1,h2) secara otomatis untuk setiap halaman blog seperti page,item dan index.Ini penting jika blog mengandalkan katakunci untuk setiap artikel yang ada.Hal ini bisa dikerjakan baik untuk blog Wordpress (self hosting) maupun blogger,yang membedakan hanya cara yang digunakan saja.

Contoh kerja dinamic h1: Pertama,h1 adalah judul blog jika halaman index ataupun page,sedangkan h2 adalah subtitle dari setiap judul postingan yang ada didalam index blog/page.Yang kedua,h1 adalah judul postingan ketika didalam item,sedangkan h2 bisa dibuat sendiri dengan menambahkan heading untuk setiap subtitle saat posting.
Untuk merubah template menjadi seperti itu,perlu untuk menambah code tetentu pada template.Artinya hal ini tidak dilakukan oleh semua template yang ada terutama yang standard.Pada template standard biasanya h1 adalah title blog walaupun dihalaman,index ataupun item.Dan judul postingan dihalaman item biasanya diberi h2 atau h3.

Untuk merubah template menjadi dinamic h1, nantinya akan saya buat tutorial dalam artikel tersendiri,biar tidak campur campur.

Saya tidak bisa menjamin jika trik dinamic h1 bisa lebih unggul dari yang standar,akan tetapi  saya sendiri sudah menerapkan cara ini.

Saya kira hanya itu saja yang biasa saya lakukan,semoga berguna.....

Menciptakan style berbeda untuk tiap halaman blogspot

Sangat memungkinkan sekali untuk menciptakan style(tampilan) yang berbeda dihalaman blog blogger dengan memanfaatkan tag kondisional yang ada.Halaman halaman tersebut meliputi:

• Halaman Posting
• Halaman Index
• Halaman search label
• Halaman statis

Pada umumnya tag kondisional ini dipakai untuk menciptakan suatu kondisi tertentu pada halaman blog ketika diakses.Trik semacam ini banyak ditemui pada template blogspot model magazine.

Kita contohkan penjelentrehannya tag kondisional ini yang dipakai pada tag title seperti ini:

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

Artinya jika pada halaman item (postingan) yang tampil(dipakai) menjadi title adalah "title postingan | title blog" jika pada halaman selain halaman item,title yang tampil hanyalah title blog saja.
JIka tag kondisional tersebut ditulis demikian ,apa yang terjadi?

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Jika kamu menulis tag seperti diatas maka yang terjadi adalah title hanya tampil (dipakai) hanya untuk halaman item saja.Dan yang terjadi pada halaman selain halaman item adalah tidak memakai  title. Namun demikian yang begini ini tidak dianjurkan untuk diterapkan,hanya sebagai contoh saja.

Ternyata tag tag kondisional tersebut bisa kita manfaatkan untuk membuat tampilan berbeda beda antara jenis halaman blog .Bisa juga dimanfaatkan untuk menampilkan atau menyembunyikan widget  tertentu atau elemen dihalaman tertentu pula.

Contoh penerapan tag kondisional blogger untuk membuat style berbeda di setiap postingan.

<b:skin><![CDATA[/*
body {background: white ;font: normal 12px 'Open Sans', Trebuchet MS, Sans-serif; color: #333333;}
#sidebar{width:300px;padding:0px 0px 0px 0px;float:right;display:inline; margin-top:5px;margin-right:0px;overflow: hidden}
#footer {clear: both;overflow: hidden;font-size: 12px;}
================code css berikutnya=========================
================code css berikutnya=========================
]]</b:skin>

<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
body {background: red ;}
</b:if>
</style>
<style type='text/css'>
<b:if cond='data:blog.searchLabel'>
body {background:blue ;}
#sidebar{diplay:none}
</b:if>
</style>

</head>

Contoh diatas yang diatur misalnya hanya untuk background pada body saja,dimana warna background adalah putih pada halaman item,merah pada hompage dan biru pada label.
Kita bisa juga memasukkan selector lainnya,contoh style "selector" lainnya diatas adalah sidebar yang dimana tidak ditampilkan dihalaman label.
Kamu bisa mencoba bereksperimen untuk membuat berbeda style tiap jenis halaman  untuk elemen lainnya.

Hanya menambahkan style tambahan yang disisipkan kedalam tag kondisional dibawah ]]</b:skin>.
Tag kondisional yang berwarna merah diatas adalah tag kondisional yang berfungsi untuk menciptakan kondisi tertentu pada halaman index.Dan yang berwarna biru berfungsi untuk menciptakan kondisi tertentu pada halaman label.

Semoga bisa memahami maksud saya,dan silahkan berexperimen untuk menciptakan template yang unik milik kamu sendiri.
Contohnya saya juga menerapkan untuk blog ini,yaitu elemen postingan (post-body) pada homepage menggunakan border sedangkan pada halaman item(posting) border tidak ada.
Recent post yang saya pakai disini tidak ditampilkan dihalaman homepage.