Trik Blogger | Mengatur Tataletak Link to This Post

Terkadang kita kurang memperhatikan keberadaan fitur Link to This Post (backlink). Yah, mungkin karena dalam penerapannya kurang diminati oleh sebagian blogger mania. Bahkan tidak jarang dengan mudahnya kita menonaktifkan fitur ini. Link to This Post dimaksudkan agar memudahkan pengunjung blog me-link posting yang dibaca dan diminatinya untuk dijadikan bahan referensi atau rujukan dari posting yang akan dia buat. Cara kerjanya sederhana saja, yaitu kamu cukup meng-klik "Buat sebuah Link", maka secara otomatis blogger akan mengarahkan kamu melalui jendela pop-up langsung ke halaman "Entry baru" (dengan syarat kamu telah login ke akun blogger). Selanjutnya kamu bisa mengedit atau disimpan dulu sebagai draft.

Secara default link fitur ini terletak di post-footer. Namun akan berpindah letak dan bentuknya ke bawah form komentar, setelah kita menampilkan seluruh isi posting. Nah, tataletak disinilah yang akan bersama-sama kita diskusikan. Apabila jaraknya dengan form komentar terlalu jauh, kamu dapat memperpendeknya dengan melakukan trik yang cukup simple. Eh..., ngomong-ngomong kode Link to This Post yang seperti apa yah? Kodenya setelah isi keseluruhan posting terbuka (jika melalui "Edit HTML", terlebih dulu centang "Expand Widget Templates") lebih kurang seperti di bawah ini :

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>

Kembali ke pengaturan tataletak Link to This Post. Adapun step by step pengaturannya adalah sebagai berikut :

• Edit HTML --> Expand Widget Templates.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode seperti di bawah ini :

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='210' id='comment-editor' name='comment-editor' src='' width='100%'/>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser, sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Atur ketinggian pada kode yang ditandai dengan warna merah, kalau OB sendiri diatur dalam kisaran 240 - 260.
• Update : Setelah kamu mengaplikasikan trik ini — untuk komentar yang menggunakan verifikasi — pengunjung tidak bisa melakukan verifikasi. Dengan kata lain “pengunjung tidak akan bisa berkomentar”. So, agar bisa memasukkan kode verifikasi dalam form komentar, maka kita harus menambahkan fungsi ‘scroll’. Tambahkan CSS berikut di atas kode ]]></b:skin> :
  .comment-form {
  overflow:auto;
  }
• Jangan lupa disimpan.

Catatan :
Kamu pun bisa lebih banyak berkreasi dengan melakukan edit atau menambah kode backlinks-container dalam CSS. Contoh kodenya dalam CSS :

#backlinks-container {
margin: 10px auto 0;
padding: 5px 10px 10px;
border: 1px solid #E1D4C0; }

Selamat mengatur tataletak Link to This Post...

[ Baca selengkapnya ]

Rounded Corner | Membuat Sudut menjadi Tumpul

Pernah melihat di sudut-sudut blog kelihatan tumpul? Nah, itu dinamakan "rounded corner". Sebelum melangkah lebih jauh, kita perlu membatasi ruang lingkup kajian trik blogger kali ini. Rounded corner yang akan kita diskusikan bersama adalah membuat sudut menjadi tumpul tanpa gambar (rounded corner no image).

Kemudian bentukkan rounded corner dari kode CSS ini akan nampak, apabila kamu menggunakan browser Firefox, Chrome, dan Safari. Ngomong-ngomong soal tumpul, asal jangan dikaitkan dengan pikiran, lho. Ayo, kita keroyok trik blogger tentang membuat rounded corner :

Full rounded corner :

.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px; }

Rounded corner di kiri atas :

.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-topleft: 10px;
border-top-left-radius: 10px; }

Rounded corner di atas :

.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }

Rounded corner di bawah :

.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }

Catatan :

1. Trik ini merupakan salah satu dari sekian banyak trik lainnya untuk membuat rounded corner.
2. Semakin besar nilai yang kamu masukkan (ex: 10px), maka semakin besar pula ketumpulan/belokan sudut.
3. Kode -moz-border-radius digunakan untuk firefox, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-radius untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.
4. Kode di atas merupakan contoh penerapan rounded corner dalam kode CSS.

Selamat membuat rounded corner...

[ Baca selengkapnya ]

Solusi Submit Sitemap di Webmaster Tools

Kok, feeds blogku ngga valid? Aduh, sitemap blogku ngga ter-indeks semua? Huh, gagal lagi submit sitemapnya? Dan masih banyak pertanyaan senada lainnya yang mungkin menghinggapi blogger mania ketika submit sitemap di Google Webmaster Tools. Terus bagaimana solusi agar sitemap blog kamu dapat maksimal diterima dan ter-indeks oleh Webmaster Tools? Caranya mudah bertanyalah kepada ahlinya. :) Kalau itu sih bukan solusi namanya, tapi salah satu upaya agar tidak “sesat di jalan”.

[ Baca selengkapnya ]

Menghilangkan Icon Pensil serta Obeng dan Kunci

Gegap gempita Piala Dunia AF-SEL 2010 ternyata sedikit banyak mempengaruhi aktivitas para blogger mania. Bagaimana tidak berpengaruh apabila siang disibukkan dengan urusan pekerjaan, sedangkan malamnya nonton bola. Terlepas dari itu semua, mungkin ada yang menyempatkan waktu untuk sekedar memposting di blog walaupun isinya singkat (namun padat, bro...). OB pun termasuk di dalamnya. Dari judul mungkin teman-teman sudah basi mendengarnya. Kok, yang itu-itu lagi sih? Tapi tidak ada salahnya kan, apabila kita kupas kembali.  Anggap saja sebagai penyebaran teknologi (Wih..., kaya MENRISTEK aja). Yuk, buruan kita review trik blogger "menghilangkan icon pensil serta Obeng dan Kunci".

[ Baca selengkapnya ]