Memberi Warna Pada Teks (Hi-Lite) Atau Memberi Warna Pada Background Posting

Kode untuk memberi warna pada teks (hi-lite) atau background (latar belakang) posting ini aku dapatkan dari BlogBulk, Blogger templates and Blog help.

Kodenya singkat aja, dan diletakan pada HTML posting yang diinginkan untuk diberi warna, jadi bisa bikin warna latar belakang setiap posting berbeda satu sama lain.

Cara memberi warna pada teks (hi-lite) atau background (latar belakang) posting adalah sebagai berikut:

Ketika telah selesai menulis posting, masuklah ke mode Edit HTML, dan pada bagian yang ingin diberi warna, masukan baris kode berikut dibagian atasnya:

<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">

Ini adalah bagian posting yang diberi warna. Pada akhir bagian yang ingin diberi warna, masukan kode berikut:

</div>

 
Lalu kembali ke mode Tulis untuk melihat hasilnya.
__________________________________

Catatan:

Baris kode warna hijau adalah kode warna yang dipakai sebagai background posting, dapat diganti sesuai dengan warna yang dinginkan, misalkan biru (#0000ff), kuning (#ffff00), merah(#ff0000), hijau (#008080), hitam (#000000), atau putih (#ffffff).

Untuk mengetahui kode warna lebih lanjut bisa lihat disini.

Jarak/padding antara tulisan dengan tepi warna (border) dapat disesuaikan dengan yang diinginkan. Angka pertama menunjukan jarak bagian atas, angka kedua menunjukan jarak bagian kanan, angka ketiga menunjukan jarak bagian bawah, dan angka keempat menunjukan jarak bagian kiri.

Kode akan mengalami sedikit perubahan setelah diletakan pada Edit HTML, tidak menjadi masalah karena tetap kode yang sama hanya saja dengan tampilan yang sedikit berbeda.

Lakukan pemberian kode ini setelah penulisan posting selesai.

Selamat mencoba.

Membuat Kotak Dalam Posting

Kode ini aku dapatkan dari halaman FAQ situs FLAG counter ketika aku mengkopi paste contoh kodenya. Sepertinya kode ini bisa berguna banget untuk mempercantik penampilan posting ya. Misalkan dalam suatu posting ada suatu kalimat yang ingin ditaruh dalam kotak seperti dibawah ini:

Contoh tulisan yang diletakkan dalam kotak.

Maka cara membuatnya adalah sebagai berikut: pada mode Edit HTML, letakan tulisan yang ingin diberi kotak diantara baris kode yang berwarna biru seperti contoh dibawah ini :

<p style="border-right: #6c7a7d 1px inset; padding-right: 30px; border-top: #6c7a7d 1px inset; padding-left: 30px; margin-left: 20px; border-left: #6c7a7d 1px inset; margin-right: 70px; border-bottom: #6c7a7d 1px inset"><font color="#ff0000">Contoh tulisan yang diletakkan dalam kotak.</font></p>

*****

Catatan:

Pada waktu kode diletakan pada Edit HTML Posting blogspot, kode akan mengalami perubahan sedikit. Hal itu tidak jadi masalah, kodenya tetap sama hanya saja ditulis dalam bentuk yang sedikit berbeda.

border-right = garis pinggir kotak sebelah kanan

border-left = garis pinggir kotak sebelah kiri

border-top = garis pinggir kotak sebelah atas

border-bottom = garis pinggir kotak sebelah bawah

#6c7a7d; #ff0000 = kode warna, rubah sesuai keinginan

1px inset = ketebalan garis pinggir kotak, rubah sesuai keinginan

padding-right = jarak tulisan dengan garis pinggir kotak sebelah kanan

padding-left = jarak tulisan dengan garis pinggir kotak sebelah kiri

margin-right = jarak kotak dengan pinggir posting sebelah kanan

margin-left = jarak kotak dengan pinggir posting sebelah kiri

20px; 30px; 70px = satuan jarak, rubah sesuai keinginan

font color = warna teks, hapuskan kode ini jika ingin teksnya berwarna seperti warna teks pada posting

Selamat mencoba.

Menampilkan Avatar Disebelah Komentar

Avatar adalah ikon yang tampil disebelah komentar. Avatar ini bisa berupa foto, gambar atau tulisan/huruf. Pada profil di Blogger kita bisa mengisi dan menampilkan avatar kita pada kolom komentar di blog-blog lain yang ada di Blogger juga. Tetapi sayangnya kalau kita berkomentar di blog atau situs yang bukan ada di blogger, maka avatar tersebut tidak akan muncul. Tapi dengan mendaftar di situs Gravatar maka kita akan dapat menampilkan avatar kita tersebut (tetapi tidak semua blog atau situs mendukung Gravatar ya, jadi untuk komentar pada blog atau situs tersebut maka avatar tetap tidak akan muncul).

Avatar pada profile di Blogger 

Komentar tanpa avatar di blog atau situs lain yang bukan berada di Blogger 

Untuk menampilkan avatar disebelah komentar caranya adalah sebagai berikut:

1. Klik link berikut dan masuk ke situs Gravatar.

2. Klik Sign up dan masukan alamat email. Setelah itu cek email dan klik link yang diberikan lewat email.

3. Setelah itu masukan data yang diminta, username dan password dan klik Signup.

4. Setelah itu ikuti petunjuknya untuk meng-upload foto atau gambar yang diinginkan untuk avatar.

 

5. Setelah foto atau gambar selesai di upload, tunggu beberapa saat. Setelah itu avatar kita akan muncul di sebelah komentar-komentar kita yang ada di blog atau situs lain yang tidak berflatform di Blogger (dengan catatan flatform tempat blog atau situs itu berada mendukung Gravatar ya) .

Selamat mencoba :-)

Membuat Horisontal Menu Bar di blogger

Hal pertama yang harus dilakukan sebelum membuat horisontal menu bar adalah melihat apakah template yang dipakai sudah memiliki kolom Tambah Gadget dibawah kolom Header. Jika belum berarti harus dilakukan sedikit modifikasi pada HTML template untuk bisa menampilkan link Tambah Gadget dibawah Header. Jika sudah ada kolom tersendiri di bawah Header, silahkan langsung ke no.2.

Untuk membuat Horisontal Menu Bar di Blogger caranya adalah sebagai berikut:

1. Membuat link Tambah Gadget di bawah Header. Cara ini aku dapatkan dari Blog Kang Rohman

• Login ke Blogspot--> Rancangan---> Edit HTML
• Untuk berjaga-jaga bila nanti ada hasil yang tidak seperti yang diinginkan, maka download dan simpanlah kopi dari template yang dipakai saat ini.
• Tekan kontrol "Ctrl + F" untuk menampilkan kolom pencarian yang nanti letaknya ada di bawah. Ketikan atau kopi baris kode berikut ke dalam kolom pencari:
  ]]></b:skin>  agar letaknya dapat segera diketahui.
  
  Copy kode berikut, lalu paste di atas kode ]]></b:skin>
  
  #under_header{
  margin:10px 0;
  padding:1%;
  width:98%;
  }
• Cari lagi kode yang mirip dengan kode di bawah ini :
  
  <div id='header-wrapper'> 
  <b:section class='header' id='header' maxwidget="1" showaddelement="no">
  <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
  </b:section>
      </div>
  
  Copy kode berikut lalu paste persis di bawah kode tadi :
  
  <div id="under_header">
  <b:section class='header' id='underheader' preferred='yes'/>
  </div>
• Simpan template.

2. Buatlah posting baru untuk halaman yang ingin di link ke menu bar.  Menunya misalnya Home, About, Halaman, Tips. Link yang nanti akan digunakan adalah URL setiap posting itu. Cara dibawah ini (no. 2 dan 3) aku dapatkan dari Real Life.

• untuk menu Home, link yang gunakan adalah URL alamat blog.
• untuk About, link yang digunakan URL Aboutbox.
• bila link-nya akan menuju ke halaman tersendiri, untuk dapatkan linknya bisa klik kanan pada judul dan klik "copy link location".
• bila link-nya menuju pada halaman yang mempunyai label yang sama, untuk dapatkan link-nya bisa klik kanan pada label yang ada dibawah posting dan klik "copy link location".

3. Login ke Blogspot--> Rancangan—>Tambah gadget (di tempat yang kita ingin menu bar ditampilkan), pilih HTML/JavaScript gadget dan masukan kode berikut:
 <a
href=http://alamatblog.blogspot.com>HOME</a><a> | </a><a href=http://alamataboutpageURL>ABOUT</a><a> | </a><a href=http://alamathalamanURL>HALAMAN</a><a> | </a><a href=http://alamattipsURL>TIPS</a>

Klik tombol preview untuk melihat hasilnya, lalu simpan.

Catatan: 
* Ganti kata yang berwarna hijau dengan nama menu yang dinginkan.
* Ganti kata yang berwarna merah dengan alamat URL sesungguhnya. 

Selamat mencoba :-)

Membuat Judul Posting jadi Kata Kunci Blog

Judul blog merupakan hal pertama yang dilihat search engine ketika mengindek suatu situs atau blog, baru setelah itu judul posting.

 
Dengan struktur Judul Blog - Judul Posting ini, maka judul blog sebaiknya mengandung kata kunci utama yang bisa menjelaskan tentang isi situs atau blog tersebut secara menyeluruh, dan judul posting mengandung kata kunci yang bisa menjelaskan tentang isi posting yang ada.

Tetapi bagaimana kalau ternyata judul blog yang digunakan tidak SEO friendly seperti judul blog ini, BangNian, yang tidak mengambarkan apa-apa tentang isi blog ini. Untunglah ternyata hal tersebut bisa diatasi dengan sedikit kode HTML yang aku dapatkan dari Blogger Indonesia, A Fatih Syuhud.

Dengan kode tersebut, maka judul posting akan bisa ditempatkan di depan judul blog, sehingga struktur yang ditampilkan adalah Judul Posting - Judul Blog. Dengan demikian maka setiap judul posting akan menjadi kata kunci utama buat blog.

Cara untuk membuat judul posting jadi kata kunci blog adalah sebagai berikut:

1. Login ke Blogspot -> Tata Letak --> Edit HTML.

 
2. Cari baris kode berikut yang letaknya dibawah baris kode <head> (letaknya hanya beberapa baris dari atas):

<title><data:blog.title/></title>

3. Hapus dan gantilah dengan baris kode dibawah ini:

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

4. Klik tombol Simpan Template. Sekarang judul posting sudah beralih peranan menjadi kata kunci untuk blog.

*****
Selain cara diatas, bisa juga mengunakan cara dibawah ini. Caranya hampir sama, hanya saja baris kode yang diberikan akan membuat strukturnya menjadi hanya Judul Posting saja. Judul Blognya tidak ditampilkan lagi, sudah digantikan dengan judul posting. Ini yang diterapkan pada blog ini ya.

 
Caranya adalah kode pada poin 3 diatas diganti dengan baris kode dibawah ini:

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

_________________________________

Catatan: SEO adalah singkatan dari Search Engine Optimization, istilah yang digunakan untuk mendapatkan hasil yang baik pada pencarian search engine (SERP = search engine result page) agar postingan mudah ditemukan sehingga arus lalu lintas (traffic) blog menjadi baik.