OPTIMASI KONTEN

Kumpulan Koding Gratis Buat Blog/Web & Desain
Written by: Ahmad Khoirul Azmi
Thanksfor reading!Sukadenganartikel ini? Please linkbackartikel ini dengan codedi bawah atau share
dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber
seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa
pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.
<a href="http://buka-rahasia.blogspot.com/2011/11/situs-download-gambar-gratis-blogweb.html">10
SitusDownloadGambarGratis Buat Blog/Web&Desain</a>
Cara -Trik CSS: Membuat Scroll Text Area di Blog/Website
dan Style-nya
Scroll text adalah text yang berada di dalam kotak yang luas dan tingginya di batasi dalam
ukuran tertentu sehingga untuk melihatnya hingga ke bawah dibutuhkan mouse scrolling. Trik
ini lazim digunakan untuk menghemat ruang di dalam post body maupun sidebar, sehingga
keseluruhan halaman yang dimuat oleh browser menjadi tidak terlalu panjang.
Ini adalah contoh text yang menggunakan efek manual scrolling text. Secara normal, text ini
akan terlihat sebagai paragraf di dalam post body seperti text di atas, dimana batas kiri, kanan,
atas, dan bawah dibatasi oleh margin atau alignment yang telah diberi pengaturan default di
dalam template HTML.
Style diatas dibentuk dengan menggunakan div styling, dengan menambahkan atribut
pembatasan lebar (width) dan tinggi (height) pada area text, dimana area text tersebut sebenarnya
lebih tinggi dan atau lebih lebar dari batasan yang diberikan. Lalu, untuk memberikan notifikasi
pada browser bahwa elemen text harus dapat dilihat tetapi dalam luas area yang telah ditentukan
tersebut, digunakanlah atribut overflow: scroll untuk memberikan efek scroll, ataupun overflow:
autoyang secara otomatis akan memberikan efek scroll jika area text disempitkan. Logikanya, hal
ini sama dengan area suatu halaman blog /website atau dokumen-dokumen lain di PC. Jika
halaman tersebut lebih panjang dari area browser (juga berdasarkan resolusi layar monitor),
maka akan muncul scroller di sebelah kanan browser, dan jika lebih lebar, maka akan muncul
scroller di bagian bawah browser.
So, kita bisa menggunakan dasar tag <div style="....">text yang hendak diberi style</div>sama
seperti text styling yang lainnya, dengan menambahkan tiga atribut penting: height,
overflow:scroll/auto, dan weight:
<div style="height xx; overflow: auto; weight: xx">text yang hendak diberi efek scroll
text</div>
Sebagai contoh hasil dasarnya seperti ini:

text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak
diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll
text text yang hendak diberi efek scroll text
Dan ini tag serta atribut yang digunakan untuk contoh di atas:
<div style="height: 70px; overflow: auto; width: 200px;">text yang hendak diberi efek scroll
text text yang hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang
hendak diberi efek scroll text text yang hendak diberi efek scroll text text yang hendak diberi
efek scroll text</div>
Nah, kemudian agar scroll text tersebut menjadi bagus atau indah dan muncul pada posisi sesuai
dengan keinginan, tambahkan atribut-atribut styling yang lain, misalnya: border, margin,
padding, text-align, atau background. Sebagai contoh:
Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan
berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenis justify(rata
kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas
sebesar 300px.
Ini tag dan atribut yang digunakan:
<div style="border: 2px solid lightblue; height: 80px; margin-left: 30px; overflow: auto;
padding: 3px; text-align: justify; width: 300px;">
Ini adalah contoh Scroll Text dengan tinggi 80px, border berukuran 2px berjenis solid dan
berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenisjustify (rata
kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas
sebesar 300px.</div>
Untuk praktisnya, anda dapat meng-copy yang di bawah ini:
<div style="border: 2px solid #000000; height: 100px; margin-left: 20px; overflow: auto;
padding: 3px; text-align: left; width: 320px;">Text anda disini</div>
Yang berwarna biru adalah value atau ukuran border, tinggi, margin, padding, dan luas area.
Anda dapat mengubahnya sesuai keinginan.
Yang berwarna merah adalah nilai warna border, anda dapat pula mengubahnya. Untuk panduan
code warna hex, bisa dilihat disini.
Text-align memiliki 4 value: left, center, justify, dan right.
Anda dapat mengutak-atik atribut-atribut di atas; bahkan menambah atau menghapus atribut
yang tidak diperlukan, kecuali 3 atribut inti: height, overflow, dan width untuk mendapatkan
bentuk scroll text blog yg diinginkan.
Untuk bagian posting gunakan edit HTML, untuk sidebar pilih gadget HML/JavaScript.
Have a nice experiment and be creative.

Cara Buat/Pasang Fitur Emoticon/Smiley di Comment
Blogger
Emoticon/smiley dapat mewakili ekspresi komentator blog. Selain itu, emoticon/smiley dapat lebih
mempercantik tampilanbagiankomentarblog.Denganmenggunakanjavascript, kita dapat melakukan
hack untuk menambahkan fitur emoticon pada blog berplatform Blogger. Emoticon ini menggunakan
basis perintah emoticon Yahoo! yg telah kondang itu. Misalnya, ketika ingin menampilkan gambar
emoticonsenyum, digunakanperintah/menuliskan karakter :), dst. Di blogger, perintah tersebut dapat
diadaptasi guna memunculkan tampilan gambar smiley/emoticon tertentu. Pada fitur emoticon
komentar Blogger ini,saya menggunakan gambar-gambar berformat gif milik Yahoo! yg memiliki efek
animatif (bergerak).
Cara Pasang/Buat Fitur Emoticon Pada Komentar Blogger
Jika sobat Blogger tertarik memasang fitur emoticon pada blog sobat, ikuti beberapa langkah
pemasangannya. Pada intinya ada 3 poin langkah penting:
a. Memasang CSS yg mengatur tampilan emoticon.
b. Memasangkode HTML guna menampilkanpreview emoticon/smiley di bagian atas kotak komentar.
Fungsinya sebagai panduan pengunjung ketika hendak membuat emoticon pada komentar.
c. Memasang kode javascript, yg berfungsi mengconvert perintah menjadi gambar emoticon.
Berikut cara pemasangannya:
1. Masuk ke Design/Template > Edit HTML

2. Centang "Expand Widget Templates"
3. Copy paste kode CSS berikut di ATAS ]]></b:skin>(cari dg Ctrl + F):
.bukarahasiasmiley{background:none repeatscroll 00 #EFF5FB !important;font-size:small
!important;padding:5px !important;margin:auto!important;text-align:left!important;font-weight:bold
!important;width:100%!important;-moz-background-clip:-moz-initial;-moz-background-origin:-moz-
initial;-moz-background-inline-policy:-moz-initial;}
.bukarahasiasmiley span{padding-right:3px !important;}
img.brbsmly{height:auto!important;vertical-align:middle !important;width:auto
!important;border:0px!important;}
Jikainginganti warnabackground,ganti #EFF5FB dengankode warnalain.
4. Cari <b:if cond='data:post.embedCommentForm'>.Biasanyaadaduatag xml seperti itu,cari & pilihyg
kedua, yaitu yg berpasangan dengan <b:include data='post' name='comment-form'/>.
<b:if cond='data:post.embedCommentForm'>
<b:include data='post'name='comment-form'/>
5. Copy kode HTML berikut (klik select all& copy), letakkan di BAWAH/SETELAH
<b:if cond='data:post.embedCommentForm'>.
<div
class='bukarahasiasmiley'> <im
src='http://l.yimg.com/us.yimg.co
<span><img class='brbsmly'
6. Copy kode berikut&letakkandi atas </body>:
<script src='
https://sites.google.com/site/bukarahasiahost/blogger-comment-smileys/bukarahasiablogspot-
ysmileys-bloggercomments.txt'type='text/javascript'></script>
7. Save template.
8. You are done!

Cara Hapus Google Search Image Frame (Frame Breaker)
Google search image frame? Ya, tampilan gambar yg terindeks Google biasanya ditampilkan di
lapisan/bagianatassebuahhalamanblog/web.Gambarygditampilkandibalutdalamtampilankerangka
(frame) Google ygberisi beberapainformasi mengenai gambar dan sama sekali tidak berkaitan dengan
isi halamanblog/webygmemuatgambartersebut.Bisajadi hal ini cukupmengganggukarenablog/web
dimana gambar tersebut dimuat sebenarnya bukan yg dioptimasikan. Tentunya ini agak merugikan
karena traffic yg datang tidak seperti traffic yg biasanya. Gambar-gambar yg dimunculkan ini biasanya
merupakan ilustrasi dari sebuah artikel atau yg tidak ingin dimunculkan sebagai konten utama. Bagi
blog-blogygdemikian,tentunyagambarygditampilkandalamiframegoogle samasekalitidakseperti yg
diharapkan, terutama dalam kaitannya dengan konten.
Kita dapat menggunakan fungsi script (javascript) sbg respon atas kasus ini. Cara tersebut sebenarnya
sejak dulu sudah begitu lazim digunakan oleh para webmaster untuk mengoptimasikan traffic dan
memaksimalkan conversion rate. Sobat bisa mendapatlan scriptnya dengan mudah karena script ini
termasuk salah satu script paling umum digunakan oleh para webmasters untuk mengoptimalkan
website. Salah satu hal yg membuat kasus foto framing terjadi sebenarnya adalah blog/website itu
sendiri jugamendukungstrukturframe.Demikianhalnyadi kebanyakanblogseperti Blogger,Wordpress
dll.
Atas permintaan sobat pian uhuy di komentar posting widget Google+, saya share script tersebut.
Pertama, kegunaan script ini adalah untuk memanggil fungsi redirect. Tampilan Google Frame, yg
memuatgambar di bagian depan halaman blog/web setelah pengunjung meng-klik thumbnail di hasil
pencarian, secara otomatis akan di-redirect menuju ke halaman asli yg memuat gambar tersebut.
Sehingga frame tersebut akan dipecah (broken) dan halaman yg muncul adalah halaman yg
sesungguhnya. WordPress (yg kaya akan plugin itu) telah memiliki plugin yg disebut Frame Breaker,
sama seperti nama javascript yg memiliki fungsi sama persis.

Bagaimana dengan script untuk menghapus Google Search Image Frame?
Sangat sederhana sekali. Seperti biasanya fungsi javascript redirect, kita menggunakan dua bagian
perintah,yaitu: if dan replace. Kemudian tampilkan dua bagian sumber awal dan tujuan, dalam hal ini:
top (bagian atas/awal frame) dan lokasi yg sesungguhnya (self). Hmm,,,, yah sebagai intro saja, siapa
tahu nanti sobat tertarik untuk belajar javascript.
Enough for the theory!! :P
Bagaimana cara memasang script Frame Breaker di Blogger/Blogspot?
1. Buka Dashboard > Design > Edit HTML.
2. Cari (Ctrl + F) </head>
3. Letakkan script berikut tepat di ATAS nya:
<script language='JavaScript'type='text/javascript'>if (top.location!=self.location)
top.location.replace(self.location);</script>
4. Save template.
5. Done.
Jika ingin melihat hasilnya, cek dengan salah satu gambar yg termuat di posting blog. Kira-kira gambar
dengankeywordapayg seringmuncul di dalam Google Image Frame. Cari dengan keyword tersebut di
image search Google, kemudian klik. Silahkan buktikan hasil dari salah satu cara hilangkan Google
search image frame tersebut.
Yup, itulah sedikit mengenai bagaimana cara kita mengakali agar traffic yg datang di blog benar-benar
berkualitas dan bukan sekedar hasil Google Image Frame saja.
Have Fun!

Cara Membuat & Memasang Tanda Tangan di Blog
Cara Memasang Tanda Tangan di Bawah Posting Blog
1. Pastikan terlebih dahulu gambar tandatangan tadi telah di upload. Kemudian simpan direct url dari
gambar tersebut.
2. Untuk menampilkan gambar di bawah posting kita bisa menggunakan dua cara:
a. Dengan memasukkan html gambar di fitur blogger untuk menyisipkan widget di posting:
Dari Setting> Formatting> Lihatke bagiankosongdi sebelahkananPosttemplate di bagianbawah
halaman.
Isikanscriptimage ke dalamnya:
< imgborder="0"src="urlgambartandatangan.jpg" />
Ganti urlgambartandatangan.jpgdenganurl gambartandatangansobat.
Kelemahan dari cara ini adalah susunan struktur pada badan post kadang-kadang bisa kacau, dan
membutuhkan waktu load yang lebih lama
b. Dengan memasukkan gambar di bagian template HTML melalui Edit HTML Blogger:
Melalui Edit HTML, sobat dapat memasukkan script secara lebih leluasa dan juga dapat menambahkan
aturan-aturan tertentu agar struktur tampilan lebih sempurna.
- Di beberapa tutorial, saya melihat script yang dimasukkan hanya dalam bentuk HTML gambar seperti
ini:
< imgborder="0"src="urlgambartandatangan.jpg"/>
Namun, jika hanya dengan HTML gambar, struktur gambar menjadi tidak independen karena dia
mengikuti aturan(div) padatulisandi atasnya(tulisanpostingdi bagianakhir/bawah).Sehingga kadang-
kadang gambar betubrukan dengan tulisan atau bergeser.
- Untuk membuat gambar berstruktur independen maka tambahkan struktur sendiri pada tag gambar:
<div>< imgborder='0' src='urlgambartandatangan.jpg'/></div>
Dengan cara ini, gambar dapat berada di baris selanjutnya di bawah tulisan posting.
- Agar gambar bisa diatur posisinya, akhirnya gunakan aturan berikut:
<divstyle='padding:5px;float:right'><imgborder="0"src='urlgambartandatangan.jpg'/></div>
- right akan menampilkan gambar di sisi kanan, ganti dengan left jika ingin gambar berada di sebelah
kiri.Ganti urlgambartandatangan.jpg dengan url gambar tandatangan yg telah di-upload.

Cara Membuat Auto Read more (Thumbnails) Blogspot V2
Script auto readmore blogger/blogspot dengan thumbnails (gambar preview) ini adalah
penyempurnaan dari script auto readmore V1, di mana ditemukan adanya masalah pada halaman
statis. Ketika halaman statis ditampilkan, auto readmore ikut muncul, sehingga harus diberi
pengecualian (b if cond & b else) untuk static pages pada scriptnya. Selain itu, javascript dlm
auto readmore ini juga bersifat internal jadi tidak perlu lagi memuat file .js eksternal yang
diupload ke hosting lain. Meskipun file template menjadi sedikit lebih besar, namun loading
page menjadi lebih cepat daripada auto readmore sebelumnya.
Langkah-langkahnya:
1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand
Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa
mengembalikan seperti semula jika ada kesalahan.
2. Jika dulu sudah diisi script auto readmore yang pertama, hapus terlebih dahulu, gunakan
panduan dari posting auto readmore V1 untuk mengetahui mana saja yang harus dihapus.
3. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}

chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'"
width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter
tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkan img_thumb_height dan
img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.
3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>

Kostumisasi:
Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan
gambar, ganti tulisan berwarna merah tersebut dengan:
<img border='0' src='url (direct link) gambar readmore'/>
Ganti url (direct link) gambar readmore dengan alamat url dimana anda mengupload dan
menghosting gambar.
----------------
Update (12102011):
Di komentar sobat Ari di bawah ditanyakan: bagaimana cara agar tampilan teks di post
summary - auto readmore bisa rata kiri kanan (justified)?
Lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl +
F:
<div expr:id='"summary" + data:post.id'>
Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam
tag: style='text-align:justify;'
Jadinya:
<div style='text-align:justify;' expr:id='"summary" + data:post.id'>
----------------
4. Preview terlebih dahulu, jika sudah beres, kemudian save.
Gunakan kotak komentar untuk menyampaikan pertanyaan, permasalahan, atau apapun tentang
script ini.

Cara Membuat Daftar Isi (Sitemap) di Blogger/Blogspot
Daftar Isi (Table of Contents) sering pula di sebut sebagai sitemap (peta situs) karena isinya
digenerasikan (generated) dari url sitemap feed. Jika sitemap blog di search engine berfungsi
sebagai alat untuk mempermudah pemetaan isi blog/website oleh search engine, maka sitemap
yang ini berfungsi sebagai alat navigasi dan pemetaan bagi pengunjung/visitor untuk melihat
seluruh isi konten atau artikel blog/website dalam satu halaman khusus. Tentunya ini sangat
menguntungkan pengunjung dan juga pemilik blog/website dalam usaha meningkatkan jumlah
pageview.
Daftar isi kali ini dibuat dengan aturan javascript yang file-nya sudah saya upload dan dapat
langsung digunakan. Isi yang ditampilkan dibagi berdasarkan label, sehingga perlu digarisbawahi
bahwa setiap posting harus memiliki label. Tanpa label, posting tidak akan termuat di daftar isi.
Simak cara membuat label blogger bagi yg belum mengetahui cara buat label..
Cara membuat daftar isi/sitemap blog di blogger/blogspot:
1. Buat sebuah halaman posting baru, sebaiknya halaman statis (static page).
Dashboard > New Post/Edit Post > Edit Pages > Create New Page
2. Beri judul sesuka anda, misalnya: "Daftar Isi", "Table of Content", "Sitemap Blog", dan lain
lain.
3. Pada bagian kanan kotak posting klik "Edit HTML".
4. Masukkan script berikut:
<script src="http://yourjavascript.com/18113981113/bukarahasiablog-toc.js">
</script>
<script src="http://buka-rahasia.blogspot.com/feeds/posts/default?max-
results=9999&alt=json-in-script&callback=loadtoc">
</script>
Ganti http://buka-rahasia.blogspot.com dengan url blog/website anda.
5. Jika ingin melihat hasilnya klik "preview/pratinjau".
6. Publish post.
7. Pasang link halaman tersebut ke link list blog, menu, atau di tempat yang diinginkan.
8. Done!
---------------------------------------------------------------
Update:
Buat @Idnay yg komentar dibawah minta tulisan "new" berwarna putih, saya sudah buatkan
scriptnya:
ganti: http://yourjavascript.com/18113981113/bukarahasiablog-toc.js
dengan: http://yourjavascript.com/111006011142/bukarahasiablog-toc-putih.js
You now already got a sitemap/table of content page for your blog visitors!

Cara Membuat Efek Bayangan Pada Gambar (CSS3 Box
Shadow)
Tips-Tricks Blogger: Browsers compatible with CSS3 Box Shadow
Memperindah blog/website kini menjadi hal yang semakin mudah dan merupakan kebutuhan
bagi setiap web designer dan developer. Keberadaan CSS3 memungkinkan kita untuk membuat
berbagai macam efek tampilan dan fungsi. Sedangkan saat ini hampir seluruh browser telah
compatible dengan CSS3.
Pada awal posting tentang CSS3 ini, saya akan mempresentasikan penggunaan CSS3 Box
Shadow pada gambar untuk memunculkan efek bayangan (image shadow). Basic penggunaan
CSS3 Box shadow adalah dengan menggunakan syntax:
box-shadow: h-shadow v-shadow blur spread color inset;
h shadow: posisi dan besar bayangan horizontal
v shadow: posisi dan besar bayangan vertical
blur: besaran dan jarak blur (opsional)
spread: ukuran bayangan (opsional)
inset: aturan yang ditambahkan untuk mengubah bayangan jatuh ke bagian dalam objek
(opsional)
Contoh:
(Biasanya aturan yang lazim digunakan tidak menggunakan spread dan inset)
box-shadow: 5px 5px 3px #666666;
Aturan di atas sangat lah sederhana, pada prakteknya kita harus menambahkan property lain agar
compatible dengan browser-browser lainnya (yang berplatform webkit dan moz). Maka property
lengkapnya adalah:
-webkit-box-shadow: 5px 5px 3px #666666;
-moz-box-shadow: 5px 5px 3px #666666;
box-shadow: 5px 5px 3px #666666;
Efek bayangan Box Shadow ini sebenarnya dapat diterapkan pada berbagai objek blog/web yang
berbentuk kotak dan bahkan juga pada objek yang berlekuk, yang dalam hal ini adalah rounded
corners. Untuk mengaplikasikan ke gambar, kita dapat memasukkannya langsung ke dalam
dengan menggunakan atribut style atau memberikan atribut class dan meletakkan aturan CSS-
nya di bagian lain, baik di bagian HTML posting, widget, atau meletakkannya langsung sebagai
aturan umum untuk semua objek yang diberi class/id yang sama di bagian head (antara <head>
dan </head>).

Contoh pengaplikasiannya:
Salah satu cara yang digunakan untuk memasukkan kode CSS3 Box Shadow-nya:
Tambahkan class pada tag html gambar dan beri aturan CSS3 Box shadow yang sesuai dengan
classnya. Contoh:
<img class="boxshadow" border="0" class="bayang2" src="http://1.bp.blogspot.com/-
16LfUz0Nkso/TfyGoinAMnI/AAAAAAAAAiY/eSm1uq11meA/s1600/anti_copycats-
pencuri+konten.jpg" />
Untuk membuat efek bayangan box shadow pada blog anda:
Masuk ke dashboard > design/rancangan > Edit HTML (untuk Blogger), kemudian masukkan
kode CSS ini di bagian head, lebih tepatnya di ATAS </head>, dan save template.
<style type="text/css">
.boxshadow {-webkit-box-shadow: 5px 5px 3px 0px #666666;-moz-box-shadow: 5px 5px 3px
0px #666666;box-shadow: 5px 5px 3px 0px #666666;}</style>
Kemudian setiap anda ingin memberikan efek bayangan (image shadow) pada gambar di
posting, sidebar widget yang bergambar, tinggal tambahkan class="bloxshadow" pada tag
HTML image-nya:
<img class="boxshadow" border="0" src="http://urlgambar.com/gambar.jpg" />
Kostumisasi efek bayangan:
a. Anda dapat mengubah nilai h shadow, v shadow, dan blur (dalam px) serta kode warna sesuai
dengan keinginan. Untuk mengetahui koleksi kode warna silahkan lihat Hex Color Code
Generator.
b. Untuk mengubah efek bayangan jatuh ke kiri, gunakan nilai negatif (-) pada h shadow dan v
shadow, contoh:
-webkit-box-shadow: -5px -5px 3px #666666;
-moz-box-shadow: -5px -5px 3px #666666;
box-shadow: -5px -5px 3px #666666;

Cara Membuat Efek Transparan Pada Gambar Blog (CSS
Image Opacity)
Efektransparanpada gambar (image transparency/opacity)seringdigunakandi Blog/websebagaiefek
hover(mouse over) yaitutampilantransparansi gambar(atausebaliknya) ketikamousediarahkandi
atas gambar. Transparansi gambarmerupakansalahsatuefekyangdapat dibuatdenganCSSdan
dimodifikasi sedemikianrupa,samahalnyadenganefek-efekyanglain,misalnyaefek bayangangambar
(CSS3 Box Shadow).
Dasar CSS Transparansi Gambar (CSS Image Transparency/Opacity)
Properti CSS yang digunakan sebagai perintah efek transparansi gambar adalah opacity:x. Properti ini
digunakanolehMozillaFirefox danbeberapabrowserlain.SedangpadaIE(InternetExplorer) digunakan
properti filter:alpha(opacity=x). Xadalahnilai transparansi, pada Mozilla Firefox dan beberapa browser
lain, nilai defaultnya adalah 1.0, sedangkan pada IE adalah 100. Untuk memberikan besaran efek
transparan, kecilkan nilai x-nya. Pengurangan dengan value yang sama antara browser lain dengan IE
adalah 1/10, jadi kurangi 0.1 pada opacity dan kurang 10 pada filter untuk mendapatkan efek
transparansi yang sama. Semakin kecil nilai x semakin besar transparansinya.
Contoh:
img{opacity:0.5;filter:alpha(opacity=50;}
Penggunaan Transparansi Gambar sebagai Efek Hover (Mouse Over)
Seperti yang telah dijelaskan di atas, efek ini sering digunakan dan dipadukan sebagai hover effect.
Maka, posting kali ini akan berfokus pada penggunaan transparansi gambar sebagai efek hover.
Sebagaimana pada link (a) dan hover link (a:hover), kita pun dapat menerapkannya pada gambar.
img:hover{opacity:0.5;filter:alpha(opacity=50;}

Contoh (arahkan mouse ke atas gambar):
Atau sebaliknya, jika ingin gambar berubah jadi terang (tidak transparan) ketika mouse diarahkan
diatasnya, tukar nilai transparansinya:
img:hover{opacity:1.0;filter:alpha(opacity=100;}
Contoh(arahkanmouse ke atas gambar):
Membuat Efek Hover Transparan Pada Gambar Secara Individual (tanpa link)
Jika ingin membuat efek transparan gambar yang ingin diberi efek tanpa mengandung link (diapit tag
<a> dan </a>):
1. Masukkan scriptberikutdi atas ]]></b:skin>
.brl-transparan{opacity:1.0;filter:alpha(opacity=100);}
.brl-transparan:hover{opacity: 0.5;filter:alpha(opacity=50);}
atau sebaliknya,
.brl-transparan{opacity:0.5;filter:alpha(opacity=50);}
.brl-transparan:hover{opacity:1.0;filter:alpha(opacity=100);}
2. Save template.

3. Pada tag gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan class="brl-
transparan"
Contoh:
<img class="brl-transparan"border="0"src="http://urlgambar.com/image.jpg"/>
Membuat Efek Hover Transparan Pada Gambar yang Mengandung Link
Jika yang ingin diberi efek hover transparan adalah gambar yang mengandung link, maka dibutuhkan
deklarator link (a) dan image (img) pada CSSnya:
1. Masukkan script berikut di atas ]]></b:skin>
a.brl-transparanimg{opacity:1.0;filter:alpha(opacity=100);}
a.brl-transparan:hoverimg{opacity:0.5;filter:alpha(opacity=50);}
atau sebaliknya,
a.brl-transparanimg{opacity:0.5;filter:alpha(opacity=50);}
a.brl-transparan:hoverimg{opacity:1.0;filter:alpha(opacity=100);}
2. Save template.
3. Pada tag link gambar, baik di edit HTML post editor atau di edit HTML template, tambahkan
class="brl-transparan"
Contoh:.
<a class="brl-transparan"href="http://buka-rahasia.blogspot.com"><img border="0"
src="http://urlgambar.com/image.jpg"/></a>
Berikut contoh gambar yang mengandung link beserta efek transparansi gambar-nya:
Klik untukMemperbesarGambar

Cara Membuat Facebook Comment Box & Like Box
Responsif
Halo sobatsemua,rasanyaseperti sudahbertahun-tahuntidakupdate buka-rahasia.blogspot.com. Yah,
memangalasannyacukupklise,kesibukanduniaoffline, tapi memangitukenyataannya.:) Bahkanuntuk
approve dan menjawab ribuan komentar baru pun belum bisa dilakukan sepenuhnya. Jadi buat anda
yang komentarnyabelumditerbitkandandijawab - khususnyakomentarpentingyangberisipertanyaan
seputar Blogger, Adsense, dan SEO - saya mohon maaf. Beberapa sobat blogger lain biasanya
"mengakali" dengan menyambangi akun facebook saya, dan menanyakan beberapa hal. :)
Dalam kesempatan ini saya juga sekaligus ingin mengucapkan selamat menjalankan ibadah puasa
Ramadhan. Barakallaahu Lakum!
Baik, mari langsungmenujutopik yang sedang hangat-hangatnya saat ini,"RESPONSIVENESS".
Sekaranglagi musimnyasegalasesuatuyangberbau desainresponsif:template, theme, layout widget,
gambar,bahkan hinggaiklanpunkini harusresponsif,yagak?(ke depanakansaya bahas tentang layout
responsif pada iklan Google Adsense, baik yang synchronous maupun asynchronous). Untuk blog ini,
saya membiarkannya ala kadarnya saja lah :). Hehe. Saya mengandalkan mobile template yang masih
cukupefektif.Tapi bagi sobat blogger yang menggunakan responsive template, maka mobile template
tidakpenting,tidakperlu,dansebaiknyadimatikan,sebabtemplate responsif andatidakakan berfungsi
dengan baik jika mobile template tetap aktif. Konsep responsif adalah satu untuk semua, artinya satu
theme atau template untuk semua device, tidak terpisah-pisah.

Namun demikian, ada satu elemen yang cukup luput dari perhatian. Pernahkah melihat widget
Facebookcommentbox padatemplate responsif tampakanehkarenalebardantingginyatetaplantaran
tidak ikut responsive? Pernahkah melihat widget facebook like box yang lebarnya melebihi sidebar
karenatidakikutberubahukuransetelah browser di-resize? Tentu tampak aneh bukan? Karena secara
default CSS kedua plugin Facebook tersebut belum menggunakan konsep responsif, maka perlu kita
lakukan override atau hack agar keduanya mengikuti aturan responsif sesuai template.
Biasanyauntuk mencapai derajat responsiveness, kita dapat menggunakan CSS media queries. Namun
dalam hal ini, tidak diperlukan, karena yang dibutuhkan hanyalah membuat lebar (width) Facebook
commentbox dan like box mengikuti lebarwrapperdimanakeduanyadisisipkan(embed). Jadi daripada
membuat definisi lebar, tinggi, dan margin dalam bentuk fixed, cukup gunakan persentase saja, agar
widget mengikuti semua aturan wrappernya.
Setelah kuncinya ditemukan, yang perlu dicari adalah class-class yang digunakan oleh facebook
comment box dan like box untuk mengatur tampilan plugin.
Di atas adalah contoh-contoh class yang bisa diambil dari comment box. Ada beberapa class lain yang
juga perlu dilihat dan diubah.
Berikut adalah 4 yang pokok dari styling comment box dan like box:
 fb-comments
 fb-commentsiframe[style]
 fb-like-box
 fb-like-box iframe[style]
Setelah mendapatkan class-class yang dibutuhkan, langkah selanjutnya adalah menambahkan aturan
width yang otomatis mengikuti perubahan lebar wrapper dimana widget/plugin disisipkan. Caranya?
Cukup berikan aturan width: 100%, beres. Tambahkan !important jika diperlukan untuk memaksa
browser mematuhi aturan tersebut.
Jadi kita dapatkan:
.fb-comments,.fb-commentsiframe[style],.fb-like-box,.fb-like-boxiframe[style]{width:100%
!important;}
Jika anda pengguna Blogger, letakkan kode di atas diantara tag b:skin di dalam template. Untuk
pengguna WordPress yang ingin membuat facebook comment box dan like box responsive, cukup

tambahkan kode CSS tersebut ke dalam file style.css, atau lokasi custom CSS sesuai yang telah
disediakan oleh theme atau plugin anda.
Jika ingin menggunakannya secara terpisah dari CSS lain, baik pada Blogger maupun WordPress,
gunakan tag style pada CSS. Cari </head> di dalam template, dan letakkan kode berikut di atasnya.
.fb-comments,.fb-commentsiframe[style],.fb-like-box,.fb-like-boxiframe[style]{width:100%
!important;}
</style>
Note:
- Blogger: Dashboard > Template > Edit HTML > Ctrl+F, cari </head>
- WordPress: Dashboard > Appearance > Editor > Header.php > Ctrl+F, cari </head>
Jikadalamsuatu kasuskode di atas tidakberhasil membuatkeduanyaresponsif,adakemungkinan kode
CSS pada FB Comment dan Like Box anda dilingkupi oleh elemen span, ini biasanya karena modifikasi
oleh plugin. Ganti dengan class-class berikut:
.fb-commentsspan,.fb-commentsiframe span[style],.fb-like-box span,.fb-like-box iframe span[style]
{width:100% !important;}
Tentunya efekresponsif pada commentbox dan likebox mengikutitemplateatau themeyang responsif,
jadiini tidakberlaku pada templateatau themenon-responsive.Bagianda yang menggunakan template
atau theme non-responsive seperti blog ini, tidak perlu dan tidak ada efeknya.
AndabisamelihatdemoResponsiveCommentBox di salah satu halaman di syaircinta.com. Coba resize
browser dan lihat perubahan pada Facebook Comment Box (resize berarti mengubah ukuran browser,
bukan zoom in dan zoom out).
That's it andhave a nice blogging.

Cara Membuat Fitur Reply Comment (Balas Komentar) di
Blogger
FiturReplytoComment(BalasKomentar) seringkitatemui di blog-blogWordpressmaupunBlogger.
Perbedaannya,WordPress telahmenyediakannyasebagai fiturbawaan.Selainitu,fiturreplycomment
WordPressmengandungthreadsyangindependen.Masing-masingkomentardapatmemiliki
kesinambunganurutanseperti threadforumatauboard.Di Blogger,fiturreplytocommentpundapat
ditambahkan,namunsifatnyamasihsangatsederhana.Hasil balasankomentarnyapunberupa
komentarterbarudanbukan thread.Tapi,tidakada salahnyamenambahkanfiturini sebagai bagiandari
tampilandesainblogyangtentunyaakanmemberikankesanprofesionalpadablogBloggeranda.
Cara MembuatReply To Comment(Balas Komentar)di Blogger/Blogger
Hack ini digunakanuntukmenambahkanlinkfiturbalaskomentarBlogger.Ketikalinktersebutdi klik,
maka akan muncul popupwindowkomentarbaru,samadengan jikaanda melakukansettingkotak
komentaragar muncul sebagai windowbarudanbukanmenyatudenganbagianposting(beradadi
bawahposting).
Langkah-langkahmenambahfiturreplytocomment:
1. Copy kode berikutke notepadatautexteditoryanglain:
<span><a expr:href='"https://www.blogger.com/comment.g?blogID=ID-BLOG-
MU&postID="+data:post.id+
"&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23"+
data:comment.anchorName +"%22%3E"+ data:comment.author+
"%3C%2F%61%3E#form"'onclick='javascript:window.open(this.href,
"bloggerPopup",
"toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450");
returnfalse;'>Reply</a></span>

2. Cari ID bloganda. Dari dashboard,bukahalamandesign,comment,post,atauyanglainnya.Lihatke
kotakurl di bagianatas browser.Lihatbagianbelakangurl.Di bagianituakan terlihatIDblog.
Contoh:
http://www.blogger.com/post-create.g?blogID=3293775847481849705
Di bagianberwarnamerahitulahIDbloganda. Copyangka ID blogtersebut.Jangansampai ada
kekeliruandalammeng-copy.
3. Ganti ID-BLOG-MU denganangka ID blogyangtelahdi copy tadi.
4. Ganti Replydengantextlainyangdiinginkan.
5. Masuk ke editHTML/Template.
6. Centang/klik'ExpandWidgetTemplates'(niyg sering bangetkelupaan,bistu komen marah2bilang
kodeyang harusdicari ga ada meskipun berulang2dicaripe jenggotnya tambah panjang 5meter)
7. Cari kode berikut:
<data:commentPostedByMsg/>
8. Masukkan seluruhkode yangtelahdiganti ID-nyatadi tepatDIBAWAH / SETELAH-nya.
9. Save Template.
Mengganti Text 'Reply' Comment denganGambar/ImageButton
Jikainginmengganti text'Reply'dengangambar,cukupganti texttersebutdenganscriptgambar.
<img src='http://urlgambar.com/gambar.jpg'/>
Selengkapnya,copykode berikut:
<span><a expr:href='"https://www.blogger.com/comment.g?blogID=ID-BLOG-
MU&postID="+data:post.id+
"&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23"+
data:comment.anchorName +"%22%3E"+ data:comment.author+
"%3C%2F%61%3E#form"'onclick='javascript:window.open(this.href,
"bloggerPopup",
"toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450");
returnfalse;'><imgborder="0"src='http://urlgambar.com/gambar.jpg'style='float:right;padding:4px;'
title="BalasKomentarIni"/></a></span>
Ganti denganurl gambar tombol/iconreplyuntukblog.
Kostumisasi Posisi Tombol/GambarReplyButton

Ganti http://urlgambar.com/gambar.jpg dengamurl gambarreplybutton.Ganti rightdenganleftjika
ingingambarberadadi sebelahkiri (tepatdi sebelahnamakomentator).Aturnilaipadding 4px untuk
memberi besaranruangkosongdi sekelilinggambar.Ganti BalasKomentarIni dengankalimatatau
perintahlain.Atau,tinggalkanbegitusaja.
GambarTombol/ButtonCommentReply
Untuk mendapatkangambarreplybuttonyangsesuai,andadapatdenganmudahmencarinyadi Google
atau gunakangambar berikutsebagai tombol replykomentar:
Penting!Uploaddan hostsendiri gambar-gambartersebutkarenasewaktu-waktugambar-gambar
tersebut dapatdihapus.Klikkanan,pilih'saveas'.Uploadgambarke Blogger(Picasa) ataulainnya.
Catatan:Beberapa problemyang munculbiasanya bersumberpadapencantuman IDblog yang keliru
dan kesalahan dalammencarikodeyang sama persis.Pastikan benarmencentang 'Expand Widget
Templates', jika tidakketemu,cari tanpa tanda < dan >.

Cara Membuat Fitur/Tombol Back To Top di Blogger-
Blogspot
Back to Top Button atau Tombol Kembali ke Atas adalah fitur blog yang mempermudah
pengunjung/visitor blog kembali ke bagian atas halaman dengan sekali klik tanpa melakukan mouse
scrolling. Efeknya sangat besar sekali terutama bagi blog yang memiliki halaman panjang. Letak dari
tombol fitur back to top kali ini ada di bagian footer sebelah kanan.
Cara menambahkan fitur 'Back To Top' untuk Blogger-Blogspot:
1. Masuk ke edit HTML.
2. Cari kode tag </body> (Ctrl+F)
3. Masukkan kode berikut di atas </body>:
<a href='#' style='position:fixed;right:15px;bottom:15px; outline:mediumnone;border:0px none;'
title='Backto Top'><imgalt='Back to Top' border='0'src='alamaturl gambar Back to Top-mu'/></a>
Ganti title Backto Top dengankata-katayangdisuka,misalnya'returntotop','kembali ke atas', 'balik ke
atas', 'meluncur ke atas', 'balikan nyook', atau 'kembali ke laptop'... terserahlah, suka-suka elo... ^_^
Fungsinya untuk notifikasi ke pengunjung tentang kegunaan tombol tersebut.
AltBack to TOP lebihbaikditinggalkanbegitusajakalo-kalogambargagal dimuatbrowserjadi tulisanitu
masih nongol sebagai pengganti.
Gunakangambar berikut,klikkanancopy(save as),trus upload dan host sendiri ya gambarnya, biar gak
lelet and pengunjung gak melet-melet!

Atau Googling (cari juga di photobucket.com) gambar 'back to top/kembali ke atas' sendiri yang lebih
keren dan sesuai dengan warna dan ukuran footer blog-mu, gunakan keyword "back to top button
image", kemudian upload dan host gambar itu.
Ambil/copy direct link gambar dan ganti alamat url gambar Back to Top-mu dengan alamat url/link
tersebut. Contoh:
<a href='#' style='position:fixed;right:15px;bottom:15px; outline:mediumnone;border:0px none;'
title='Backto Top'><imgalt='Back to Top' border='0'src='http://4.bp.blogspot.com/-
1nZ4LliLzoQ/TaPbb2zX10I/AAAAAAAAAaw/MuAwSt41YAQ/s1600/bttp-4.png'/></a>
Oke, udah? Belum? Buruan lah!
4. Kalau sudah dimasukkan semuanya dan pastikan tidak ada yang terlewat, save template HTML-nya.
5. Done! Fitur/Button Back To Top siap digunakan.

Cara Membuat Kotak Permalink di Bawah Posting Blog
Halo sobat! Setelah agak lama tidak share tips-trik blogger di blog ini karena persentase fokus lebih
besar untuk mengembangkan tautweb.com, di posting ini saya membagi lagi satu widget/elemen
fungsional untuk posting blog.
Sudah pernah melihat kotak permalink, bukan? Salah satu elemen blog yang berfungsi untuk
memberikan kemudahan bagi blog/web lain membuat tautan/linkback ke salah satu halaman posting
blog;seperti yangsayasediakandi bawahposting-postingblog ini. Adanya kotak atau kolom permalink
sangat membantusobatdalam meningkatkanvisibilitas dan traffic blog karena apabila ada blogger lain
menyukai dan menganggap posting atau artikel blog sobat penting, maka dia dapat dengan mudah
menemukan tag permalink di bawah artikel, meng-copy-nya, dan memasang/membaginya di blog;
sehinggadiatidakperlurepot-repotmembuattagpermalinksendiri. Jikasobatbelummemilikidaningin
membuat, silahkan ikuti tutorial menambahkan kotak permalink di bawah posting berikut.
Konsep danKodeKotakPermalink
Konsep yang saya gunakan adalah kotak permalink otomatis dengan memanfaatkan dua tag XML
Blogger, yaitu <data:post.url/> untuk memanggil url posting yang sedang ditampilkan,
dan <data:post.title/> untuk memanggil judul posting yang sedang ditampilkan, very easy! Permalink
juga dilengkapi dengan tag link </a>. Kemudian permalink tersebut diletakkan pada textarea dengan
memanfaatkanbeberapafungsi javascriptsederhana.Dengancaraini,semuaisi kotakpermalink tampil
secara otomatis tanpa harus membuat isi secara manual dan dapat langsung digunakan.

Berikut kode-nya:
<divstyle='line-height:1.4em;padding:1px;margin:2px;background-color:#ffffff;font-size:11px;text-
align:justify'>
<span>Ganti teksini denganinformasi mengenai permalinkatauapapundi sini.</span><br/>
<textareacols='60' id='bloglinking'name='bloglinking'onclick='this.focus();this.select()'
onfocus='this.select()'onmouseover='this.focus()'readonly='readonly'rows='2'style='margin-
top:3px;width:auto;'><a
href="<data:post.url/>"><data:post.title/></a></textarea><br/>
</div><br/>
Kostumisasi CSS:
Secara default saya menggunakan:
- background-color:#ffffff (putih),ganti #ffffff dengankode warnalainsesuai denganwarna background
posting blog.
- padding:1px dan margin: 2px, ganti 1px dan 2px dengan nilai lain untuk menambah atau mengurangi
padding dan margin.
- font-size:11px,ganti dengannilai lain untuk menambah/mengurangi ukuran huruf (pada text di atas
kotak permalink).
Cara Memasang Kotak Permalink di Bawah Posting Blog
1. Copy kode di atas setelahmelakukankostumisasi,jika belum tahu apa yang harus dikostumisasi agar
kotak permalink sesuai dengan desain blog, copy dulu saja.
2. Buka HTML editor blog, Dashboard > Template > Edit HTML.
3. Jangan lupa centang "Expand Widgets Template"
4. Cari <data:post.body/>. Bagi yang menggunakan readmore otomatis, akan ada lebih dari satu tag
tersebut. Pada kebanyakan template, tag yang ditampilkan secara penuh adalah tag kedua. Jika tidak
yakin, pilih dan coba dulu yang pertama, jika tidak bisa pilih tag sama yang kedua.
5. Letakkan kode kotak permalink tepat di bawah <data:post.body/>.
6. Save template.
Jika dipasang dengan benar, maka hasilnya akan tampak seperti ini:
<a href="http://buka-rahasia.blogspot.com/2012/06/membuat-kotak-permalink-posting-
blog.html">MembuatKotakPermalinkdi BawahPostingBlog</a>

Cara Membuat List HTML & Menu Sederhana (Basic of
Unordered List)
Pada dasarnya, hampir semua menu menggunakan struktur
HTML list, dalam hal ini adalah unordered list (tag ul) atau daftar tak berurutan yang
merangkum keseluruhan list (tag li). Segala bentuk navigasi yang berupa menu menggunakan
struktur dari tag-tag tersebut dan kemudian ditambahi dengan aturan-aturan yang membentuk
tampilan, fungsi, serta efek yang menarik (CSS dan Javascript).
Unordered list digunakan untuk membentuk susunan list/daftar yang tidak disusun berdasarkan
urutan angka. Sedangkan untuk struktur list yang berurutan (ordered list <ol>) disusun
berdasarkan urutan angka; dari 1, 2, 3, dan seterusnya. Tentang ini, akan saya bahas pada
kesempatan posting selanjutnya.
Dengan sedikit styling, list tersebut akan muncul dengan diawali titik, gambar, ataupun simbol
lain sesuai dengan aturan list styling yang dibawa oleh template. Secara advanced, dengan
ditambahi styling, fungsi, dan efek, list akan menjadi menu horizontal, vertical, atau menu-menu
lain yang sangat menarik dan eye-catching.
Struktur dasar dari unordered list diawali dengan tag <ul> dan ditutup dengan closing tag <ul>.
Di dalamnya terdapat susunan list-list yang masing-masing berada dalam tag <li> dan </li>.
<ul>
<li>text/item disini</li>
</ul>
Tanpa aturan luas dan tinggi, baik dengan HTML maupun CSS, tampilan list akan muncul dalam
urutan per baris:
 text/item disini

Ide penggunaan list sederhana ini akan mempermudah dalam membuat list secara manual, baik
untuk kepentingan membuat list di dalam posting maupun membuat menu yang akan
ditampilkan di sidebar. Hampir seluruh navigasi menu di bagian sidebar blog ini saya buat
dengan menu list manual. Mengapa? Ada beberapa alasan kuat mengapa saya membuat menu
list secara manual:
1. Kostumisasi isi lebih mudah daripada harus menggunakan widget khusus, misalnya label.
Kita dapat dengan mudah melakukan perubahan tanpa harus mengedit Template HTML.
Misalnya ketika harus mengubah anchor text, mengaplikasikan atribut (misalnya atribut
nofollow) pada label, dan bebas melakukan CSS styling.
2. Tahukah bahwa sebagian besar widget yang memuat automatic generated list seperti
popular post, recent post, dan widget-widget navigasi lain yang kebanyakan
menggunakan feed links atau redirect links? Link-link semacam itu tidak di-indeks oleh
search engine, sebagaimana yang telah dijelaskan Google dalam Panduan dan Kriteria
Google Quality Content. Untuk memperkuat page structure, sebaiknya perbanyak link
list yang langsung mengarah ke link/halaman yang dituju.
3. Dapat dengan sesuka hati mengatur isi menu, tanpa hasil generating dari widget yang
kadang tidak sesuai dengan keinginan. Misalnya, untuk popular post, anda dapat dengan
mudah memanipulasi isinya untuk memaksimalkan posting yag jarang terjamah
pengunjung. :P
4. Dapat membuat list non menu (yang bukan digunakan sebagai navigasi) dengan mudah di
bagian sidebar. Misalnya untuk membuat list tertentu yang berfungsi sebagai informasi
(anda dapat melihat contohnya di bagian sidebar kanan bawah, tepatnya di bawah logo
copyscape ^_^).
Untuk membuat list menu yang berisi link, cukup tambahkan tag a beserta anchor text-nya di
dalam tag li:
<ul>
<li><a href="#">anchor text</a></li>
</ul>
Contoh hasilnya:
 Tips Meningkatkan Jumlah Pageview Blog
 Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot
 Memahami Karakteristik dan Cara Optimalkan Label Blogger
 Fitur Baru: Blogger Custom Favicon dan Cara Membuatnya
 HTML Link, Link Gambar, dan Atribut-atribut Penting

Anda dapat dengan mudah membuatnya di sidebar sebagai pengganti widget menu yang isinya
dapat diatur secara manual, sehingga dapat di-handle secara penuh. Untuk membuat list menu
semacam ini di sidebar, masuk ke Dashboard > Design/Rancangan > klik add a gadget/tambah
gadget > pilih HTML/Javascript. Beri judul sesuai isi menu dan susun list sesuai keinginan.
Tampilan list menu akan mengikuti aturan yang telah dibawa oleh template blog (inherited).
Itulah dasar dari unordered HTML list dan menu list. Selanjutnya ke depan saya akan
presentasikan beberapa konsep lain dari berbagai macam elemen dan struktur list web/blog
beserta styling-nya dan juga akan ada beberapa menu horizontal dan vertical yang akan saya
persembahkan (Insya Allah).
<a href="http://buka-rahasia.blogspot.com/2012/06/membuat-kotak-permalink-posting-
blog.html">MembuatKotakPermalinkdi Baw
Cara Membuat Menu Horizontal Tabs Sederhana di
Blogger
Tips Trik Blogger: Buka Rahasia Blogspot kembali lagi dengan persembahan Menu Horizontal untuk
Blogger/Blogspot. Seperti menu-menu horizontal sebelumnya, menu horizontal ini masih berkutat
dengan CSS dan HTML tanpa Javascript/Jquery, bahkan tanpa menggunakan gambar, berbasis tab
individual, dan tidak menggunakan list (HTML unordered list). Posting menu horizontal ini juga dibuat
untuk memenuhi permintaan pada komentar sobat Klik Menarik di posting Cara Membuat Menu
Horizontal CSS 3D Button Blogger/Blogspot untuk dibuatkan menu horizontal yg sama dengan menu
horizontal sebuah blog lain. Tentu saja menu ini telah mengalami beberapa modifikasi agar sesuai
sebagai widgettambahan.Namunsekiranyaadakemiripanlah.Hope youenjoyandlike it!

Kode CSS:
/* Navigasi tabsSederhanabuka-rahasia.blogsot.comStarts*/
a.burastabs,a.burastabs:link,a.burastabs:visited{display:block;width:102px;height:30px;
background:#444444; border:1px solid#ebebeb;margin-top:2px;text-align:center;text-
decoration:none;font-family:arial,sans-serif;font-size:12px;font-weight:bold;color:#FFFFFF;line-
height:25px;overflow:hidden;float:left;}
a.burastabs:hover{color:#FFFFFF;background:#666666;}
#burasbar {width:auto;margin:0auto;}
/* Navigasi tabsSederhanaEnds*/
Kode HTML:

<divid='burasbar'>
<a href="#"class="burastabs">Home</a>
<a href="#"class="burastabs">About</a>
<a href="#"class="burastabs">BlogTips</a>
<a href="#"class="burastabs">SEOTips</a>
<a href="#"class="burastabs">Contact</a>
<a href="#"class="burastabs">Sitemap</a>
<a href="#"class="burastabs">Advertise</a>
</div>

Sebelumnya copy & edit terlebih dahulu kode HTML di atas. Ganti # dengan URL yg dikehendaki. Ganti
juga Home, Blog Tips, SEO Tips, dan seterusnya dengan anchor text yg diinginkan. Untuk menambah
atau mengurangi tab, copy/tambahkan atau hapus bagian <a href="#" class="burastabs">Anchor
Text</a> di atas </div>.
Cara Membuat Menu Horizontal Tabs Sederhana di Blogger/Blogspot:
1. Masuk ke Dashboard> Design/Rancannga > Edit HTML.
2. Copy kode CSS di atas,
4. Cari ]]></b:skin> (cari denganCtrl + F) & letakkan/paste Kode CSStepatdi atasnya.
5. Save Template.
6. Masuk ke Page Elements>KlikAdda Gadget

7. Setelah pop up window muncul, pilih opsi HTML/Javascript
8. Masukkan Kode HTML yg telah diedit tadi pada kolom seperti contoh berikut:
9. Klik save.
10. Drag/geserwidgetmenuhorizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan
save lagi. DOnE!
ah PostingBlog</a>

Cara Membuat Recent Posts Blogger (Auto Scroll &
Thumbnails)
Widget Recent Posts atau Posting terbaru merupakan widget penting karena berfungsi sebagai
penunjang navigasi blog. Dengan adanya daftar posting terbaru, pengunjung yg masuk tidak dari
halaman utama (homepage) dapat langsung mengetahui beberapa posting terbaru dari sebuah blog.
Selainitu,widgetrecentpostsdapatmenjadi sebuahtawaran bagi pengunjung blog untuk mengetahui
isi posting-posting lain dari blog tersebut.
Widgetrecentpostyg sayashare kali ini memilikifiturdantampilanygcukupmenarik. Kombinasi script
recentposts,autoscroll / spy listmenghasilkan widgetrecentpostsBloggeryg memiliki efek hebat dan
dapat mengundang ketertarikan pengunjung. Alhasil, tampilan/desain blog pun dapat bertambah
nilainya dengan ditambahnya widget recent posts ini. Sudah lama saya menggunakan widget ini dan
perannya dalam menambah jumlah pageview blog pun tidak diragukan lagi.

Cara MembuatBlogger Auto ScrollingRecent Posts
Ikuti langkah-langkahberikutdanpastikan tidakadabagianyg terlewatkan:
1. Copy Scriptberikut:
Buat>>
]]]
Note: Host sendiri gambar
http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg dan gantidengan url

gambaryg telah sobatupload.
2. Ganti http://buka-rahasia.blogspot.com/ denganurl blogsobat.Pastikanadatandaslash( / ) di
belakangurl blog.
3. Buka dashboard> Design/Layout>Adda Gadget/ Tambahkan Gadget.
4. PilihHTML/Javascript.
5. Paste semuakode ke dalamkotak HTML/Javascript.
6. Save.
Kostumisasi TampilanWidgetRecent PostBlogger
Untuk menyesuaikantampilan recent post dengan template blog, perhatikan dan ganti beberapa poin
dasar berikut sebelum memasukkan script:
 boxwidth=300 adalahlebarwidgetdalampixel(px),ganti nilainyasesuai denganlebarsidebar
blog.
 text= "Reply(s)"adalahteksdi belakangjumlahkomentar,ganti Reply(s)sesuai keinginan,
misalnya:komentar,comment(s),dll.
 numposts= 10; adalahjumlahpostingterbaruygakan di-crawl,ganti nilainyasesuai keinginan.
 limitspy=5adalahjumlahpostingterbarudalamsekali tampilan,ganti nilainyasesuai keinginan.
 intervalspy=6000adalahkecepatanscroll /spy dalammilisecond(ms),ganti nilainyauntuk
mengaturkecepatannya.

Cara Membuat Screensaver (Energy Saving Mode)
Blog/Website
Energysavingmode/screensaverdi blog/web adalahkondisi standbydimanaseluruhprocessdihentikan
sementara.Proses-proses yang berjalan misalnya adalah gambar grafik bergerak (misalnya: .gif), flash
video,autoscrollingwidget,danmasihbanyaklagi.Denganadanyapluginscreensavertersebut,proses-
prosesdalamsuatuhalamanweb dihentikan (paused) dan muncul sebuah tampilan baru sederhana di
atas halaman. Jadi, energy dan proses yang digunakan oleh komputer dapat diminimalisir. Itulah
mengapa,seringkaliaplikasi ini dikaitkan dengan gerakan hemat energy dan save green environment.
Aplikasi screensaverakandihentikankinerjanyaolehbrowser(dikembalikanke tampilansemula)ketika
pengunjung/visitor menggerakkan mouse (mouse over)
Aplikasi sejenisyangpalingmudahdigunakanadalahaplikasiscreensaver (energy saving mode) buatan
onlineleaf.com.Sebelumnyasayapernahmereview kelemahanOnlineLeaf screensaver ini, yaitu waktu
browsermelakukanrequestke serverOnlineLeaf sangatlama karena menunggu respon, sehingga ikut
memperlambat waktu loading blog/web. Namun, saat ini (sampai saat artikel ini ditulis), load-time
sudah dalam keadaan normal. Salah satu resiko menggunakan eksternal javascript adalah kasus
semacam itu. Jadi, bagi anda yang ingin memasang aplikasi screensaver ini, pertimbangkan matang-
matang sebelum menggunakannya.
Cara memasang energy saving mode (screensaver) pada blog (blogger)/web:
1. Masuk ke edit HTML/Edit Template, cari (CTRL + F) tag </head>.
2. Copy dan paste script screensaver berikut tepat di atas/sebelum</head>.
<script language='javascript'src='http://www.onlineleaf.com/savetheenvironment.js'
type='text/javascript'/>

Script di atas menggunakan Jquery JS library, jika web anda menggunakan javascript library yang lain,
gunakan script berikut untuk menghindari crash/conflict dengan jquery dan gagalnya aplikasi:
<script language='javascript'src='http://www.onlineleaf.com/savetheenvironment.js'
<script>jQuery.noConflict();</script>
KOSTUMISASISCREENSAVER BLOG
Kostumisasi waktu screensaversebelumstandbymode:
Trik ini sangatseringdigunakanpadaurl javascriptuntukmeng-overridewaktudefault.Untuk
memberikanwaktu/jedasebelumaplikasi screensavermuncul danbekerja,tambahkan ?time=x di
belakangurl script.X adalahjumlahdetik.
<script language='javascript'src='http://www.onlineleaf.com/savetheenvironment.js?time=80'
Dengan script seperti contoh di atas, energy saving mode akan bekerja setelah 80 detik
Kostumisasi bahasa dalam tampilan screensaver:
Jika ingin mengganti kata-kata dalam tampilan screesaver yang secara default menggunakan bahasa
inggris, tambahkan ?lang=kodebahasa. Berikut support bahasa yang dapat digunakan dan kodenya:
ak - Akan gr - Greek sl - Slovenian
da - Danish id- Indonesian se - Swedish
de - German jp - Japanese sk - Slovak
en- English it - Italian sw - Swahili
es- Spanish nl - Dutch tr - Turkish
fr - French pl - Polish vi - Vietnamese
fi - Filipino pt - Portuguese hr - Croatian
Table Cell bpt - Brazilian Portuguese ro - Romanian
JikainginsetdalamBahasa Indonesia,makatambahkan ?lang=idseperti contohberikut:

Cara Membuat Super Vertical CSS Menu Blogger/Blogspot
Vertical menu(menuyangberupalistdalamposisivertikal)bisamenjadialternatif navigasi blog Blogger
anda. Menu ini biasa diletakkan di bagian sidebar, baik di atas maupun dibawah.
Dalampostingini, saya persembahkan dua vertical menu dengan CSS murni dan image (gambar), yang
setting dan pemasangannya di blog Blogger/Blogspot sangat mudah.
Kode CSS:
#menu4 {width:200px;margin:10px;border-style:solidsolidnonesolid;border-color:#000;border-size:
1px;border-width:1px;}
#menu4 ul {list-style:none;margin:0;padding:0;}
#menu4 li a {font-family:Verdana,Arial,Helvetica,sans-serif;font-size:80%;font-weight:bold;height:
32px;voice-family:""}"";voice-family:inherit;height:24px;text-decoration:none;}

#menu4 li a:link,#menu4li a:visited{color:#CCC;display:block;background:
url(http://2.bp.blogspot.com/-
BYKS1ojCcO4/ThT_Ke_Xx7I/AAAAAAAAAr0/mCOdKVLwxa4/s1600/menu4.gif);padding:8px 0 0 10px;}
#menu4 li a:hover,#menu4li #current{color:#FFF;background: url(http://2.bp.blogspot.com/-
BYKS1ojCcO4/ThT_Ke_Xx7I/AAAAAAAAAr0/mCOdKVLwxa4/s1600/menu4.gif)0-32px;padding:8px 0 0
10px;}
</style>
Note:Uploaddan hostgambar http://2.bp.blogspot.com/-
BYKS1ojCcO4/ThT_Ke_Xx7I/AAAAAAAAAr0/mCOdKVLwxa4/s1600/menu4.gif sendiri.
Kode HTML:
<divid="menu4">
<ul>
<li><a href="#"id="current">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Kode CSS:
#menu2 {width:200px;border-style:solidsolidnone solid;border-color:#677D92;border-size:
1px;border-width:1px;margin:10px;}

#menu2 ul {list-style:none;margin:0;padding:0;}
#menu2 li a {font-size:80%;font-weight:bold;font-family:Verdana,Arial,Helvetica,sans-serif;height:
32px;voice-family:""}"";voice-family:inherit;height:24px;text-decoration:none;}
#menu2 li a:link,#menu2li a:visited{color:#fff;display:block;background:
url(http://2.bp.blogspot.com/-we2zI02oBxg/ThT7LIOtesI/AAAAAAAAArs/ULAlQpV-
dBY/s1600/menu2.gif);padding:8px 00 10px;}
#menu2 li a:hover,#menu2li #current{color: #283A50;background: url(http://2.bp.blogspot.com/-
we2zI02oBxg/ThT7LIOtesI/AAAAAAAAArs/ULAlQpV-dBY/s1600/menu2.gif) 0-32px;padding:8px 0 0
10px;}
#menu2 li a:active {color:#283A50;background: url(http://2.bp.blogspot.com/-
we2zI02oBxg/ThT7LIOtesI/AAAAAAAAArs/ULAlQpV-dBY/s1600/menu2.gif) 0-64px;padding:8px 0 0
10px;}
</style>
Note:Uploaddan hostgambar http://2.bp.blogspot.com/-
we2zI02oBxg/ThT7LIOtesI/AAAAAAAAArs/ULAlQpV-dBY/s1600/menu2.gif sendiri.
Kode HTML:
<divid="menu2">
<ul>
<li><a href="#"id="current">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#>Order</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Cara Membuat danMemasang Vertical MenuCSS:
1. Masuk ke dashboard > Design/Rancangan > edit HTML
2. Masukkan kode CSS tepat di ATAS </head>(gunakan Ctrl+ F untukmencari)
3. Save template.

4. Copy Kode HTML, ganti # denganurl-url blogatauurl apapunyang ingindipasang.Ganti kata-kata
Home,Products,danlain-laindengananchortextyangdiinginkan.Tambahkan/hapusbarisantara<li>
dan <li> sebelum</ul>untukmenambah/menghapusmenu.
5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget
6. Setelah pop up window muncul, pilih opsi HTML/Javascript dan masukkan kode HTML.
7. Klik save.
8. Drag/geser widget menu vertical tersebut ke posisi yang diinginkan.
9. Save lagi.
10. Done!

Cara Membuat Tabel HTML via MS Word &
Memindahkan ke Posting Blog
Membuat tabel dalam format HTML memang gampang-gampang susah. Selain dibutuhkan ketelitian
saat membuatnya secara manual, juga perlu perhatian lebih terhadap desainnya. Dulu, lebih dari 2
tahunyang lalu,sayapernahmenyajikan tipsmembuattabel HTML mudahdi blog menggunakan online
tool untuk mempermudah proses penyusunan tabel. Tapi dalam hal desain (layout, CSS), butuh usaha
ekstrakerasjuga karenatidaksemuatool pembuattabel memiliki template dengandesainyangvariatif.
Apalagi bagi andayang belumbegituakrabdengan HTML dan CSS, tentu pekerjaan ini menjadi sesuatu
yang cukup berat.
Sedikitflashback, tabel di dalam posting atau artikel blog menjadi sangat penting karena apabila anda
perlumenampilkankontenberupadaftar,chart,atau tabel itu sendiri, diperlukan layout halaman yang
mendukung.Dengandemikian, isi konten lebih tertata rapi, mudah diikuti dan dirunut oleh pembaca,
sekaligus bisa menjadi penambah daya tarik konten.
Saya punyatrikkhusus membuat tabel menggunakan Microsoft Word dan memindahkannya ke dalam
postingblog hanya dengan beberapa langkah sederhana. Kelebihan tabel MS Word adalah anda dapat
mendesain terlebih dahulu tampilan dan isi tabel sesuai dengan keinginan, bahkan anda bisa
menggunakan berbagai desain template tabel yang sudah disediakan; tinggal menyesuaikannya
sedemikian rupa dengan desain konten atau blog. Cukup dengan mengedit beberapa kode kecil saja
agar sesuai denganformatpostblog,tabel yang anda buat akan memuaskan. Bagaimana caranya? Let's
go!
CaraMembuatTabel HTMLdenganMicrosoftWord
Note:Saya menggunakan Microsoft Office 2007 sebagai peraga dan contoh dalam gambar.

1. Buat tabel seperti biasanya saat anda membuat tabel di MS Word.Saya sarankantidakmembuatnya
secara manual (membuat satu persatu) tapi gunakan fitur insert>Table, klik lalu buat susunan tabel
sesuai dengan jumlah kolom yang diinginkan.
2. Sebenarnyaandabisasaja mengisi kontenke dalamtabel nanti saattabel sudahdimasukkanke dalam
post, tapi menurut saya akan terlalu ribet. Oleh karena itu, sebaiknya konten dimasukkan saat masih
dalam MS Word, sehinggalebihmudahuntukmengedit,mengatur,danmendesaintampilantulisannya.
3. Buat desain tabel dengan menggunakan fitur "Design", yang akan muncul di sisi kiri menu teratas
setelah anda memasukkan tabel ke dalam lembar editor MS Word. Anda bisa memilih berbagai pre-
made templates (built-in) yang sudah disediakan, sesuaikan dengan kebutuhan layout tabel serta
desain/layout blog.

4. Terakhir, setelah table dibuat dan didesain sedemikian rupa, simpan. Yang perlu diperhatikan
adalah: jangan simpan sebagai file MS Word (doc maupun docx), tapi simpan sebagai
WebPage,Filtered > "Save As" dan pilih WebPage,Filtered (*.htm/*html).
Setelah itu, masih ada proses lagi, cuma sedikit kok.
CaraMemindahkanTabel MS WordKePostingBlog
Setelah disimpan, maka file akan memiliki ekstensi .htm. Berikut langkah-langkah mengedit dan
memasukkannya ke dalam posting blog.
1. Buka file tersebut dengan notepad.
2. Di dalamnyaanda akan melihatberbagai taghtml lengkapseperti milikhalaman web sesungguhnya.
Yang perlu diperhatikan adalah tidak semuanya dibutuhkan. Yang perlu ditambahkan adalah elemen
yang biasa berada di dalam tag div dan juga style-nya (CSS) yang diapit oleh tag style. Hapus tag html,
meta,head,danbody.Janganlupahapustag penutupnyajuga, contoh: </head>. Hanya sisakan dua tag
yang sayasebutkantadi.Jikamasihbelumjelas,perhatikangambar-gambarberikut,yang saya highlight
adalah yang harus dihapus:

4. Setelah dihapus copy semua kode dan paste/masukkan ke dalam post editor. Pastikan sudah klik
mode "HTML" di bagiankiri atas(Blogger) atau di bagian kanan atas (WordPress) post editor, tepatnya
di sebelah di sebelah mode "Compose".
Setelahmemastikan semuakode dieditdandimasukkandengan benar, serahkan semua proses parsing
dan koreksi padaengine Blogger.Prosesini terjadi saatandamengembalikan ke mode "Compose". Jadi
langkah selanjutnya adalah mengembalikan ke mode "Compose", lalu lihat hasilnya.
Berikut contoh tabel yang saya buat via Microsoft Word:
nge-test test 1 test 2 test 3 test 4
a 1 2 3 4
b 5 6 7 8
c 9 10 11 12
d 13 14 15 16
© copyrightAhmad KhoirulAzmi,published only forbuka-rahasia.blogspot.com.

Cara Membuat Widget Twitter Follow Us Melayang di
Blogger/Blogspot
TutorialCara Membuat Widget Twitter Follow Me Melayang (Floating) di Blogger/Blogspot
Konsepwidgetini sama dengan tombol back to top melayang Blogger beberapa waktu yang lalu, yaitu
denganmemberikanstylingCSS: fixed position danscrolling display padalinkgambar untuk memberikan
efek melayang.
Cara membuat/memasang:
1. . Masuk ke dashboard> Design/Rancangan>KlikAdda Gadget
2. Setelah pop up window muncul, pilih opsi HTML/Javascript
3. Kemudiancopykode berikut:

<br/><a style="display:scroll;position:fixed;bottom:200px;right:1px;"
href="http://twitter.com/azmisurvivortarget="_blank"><imgstyle="border:0;"
src="http://1.bp.blogspot.com/-Hh4gBzsXHmo/TdIR-
U8WOQI/AAAAAAAAAfQ/RnrqpPW62xU/s1600/floatingtwitter.png"/></a>
Ganti azmisurvivordengan namaaccount Twitteranda.Jikaandainginwidgetberadadi sebelahkiri
browser,ganti rightdenganleft.
4. Paste kode yang sudahdi editke kolomconfigure HTML/Javascript.
5. Klik save.
6. Refreshblogdanlihathasilnya.
Done and cheers!

Cara Membuat/Memasang Favicon & Animated Favicon di
Blog
Favicon adalah logo yang ditampilkan di sebelah kiri domain url maupun di tab browser. Pengguna
blogspottentusajamemiliki favicondefault bawaan dari blogger. Hal ini tidak sama dengan wordpress
dimana favicon secara otomatis dapat digenerasikandi ubahsuaikan. Favicon menjadi identitas dari
suatu blog karena merupakan ciri khas dan bisa dibilang sebagai brand.
Gambar yang digunakansebagai favicon berformat .ico seperti halnya format icon-icon yang biasa kita
temui sebagai iconfile ataupunfolderdi dalam PC. Format ini unik karena dimanapun dia ditampilkan,
gambar aslinyaakanlangsungterlihattanpamembukafilenya (dan ini bukan preview seperti yang kita
lihat di format lain misalnya jpg, tif, dan lain-lain ketika ditampilkan di dalam folder).
Untuk animated favicon anda dapat menggunakan file gambar berformat gif.
Berikut langkah-langkah pembuatannya:
1. Siapkan gambar yang hendak anda jadikan favicon, atau anda dapat mencarinya di situs-situs yang
menyediakan gambar icon gratis. Anda dapat pula mencari gambar favicon maupun animated favicon
gratis. Gunakan keyword "free favicon/animated favicon image" di Google.
2. Untuk membuat file ico, anda dapat menggunakan photoshop atau gunakan jasa situs generator ico
gratisseperti:www.favicon.cc, www.favicongenerator.com, atau www.favicon.co.uk. Untuk animated
faviconanda(gif) andadapat membuatanimasinyadi situs www.animatedfavicon.com.Uploadfile anda
ke situs-situs tersebut, ikuti beberapa langkahnya, dan download file hasilnya.
3. Upload file favicon anda ke situs hosting gambar yang mensupport gambar ico karena Blogger tidak
mensupport upload gambar berformat ico. Lihat list situs terbaik untuk hosting gambar ico dan gif ini
untuk mengupload favicon anda.
4. Copy terlebih dahulu direct link dari gambar yang telah diupload.

5. Kemudian masukkan url-nya ke script tag berikut ke bagian antara <head> dan </head> di template
HTML anda. Saya sarankanuntukdimasukkansetelahmetatag agar cepat termuatolehbrowser namun
tidak mengganggu meta.
Untuk favicon file ico:
<linkhref='url gambar.ico anda' rel='shortcuticon'type='image/vnd.microsoft.icon'/>
Untuk animated favicon file gif:
<linkhref='url gambargif anda' rel='icon'type='image/gif'/>
Untuk menggunakan kedua-duanya dan berjaga apabila file gif gagal dimuat oleh koneksi yang sangat
lambat, gunakan kedua file ico dan gif anda. Masukkan kedua tag dengan urutan sebagai berikut:
<linkhref='url gambar.ico anda' rel='shortcuticon'type='image/vnd.microsoft.icon'/>
<linkhref='url gambargif anda' rel='icon'type='image/gif'/>
6. Preview dan save.
7. Done!
Update:
Bloggerkini telah memiliki fitur BloggerCustomFavicon yg dapatmenambahkan Faviconsecara
otomatisdengan cara yg lebih mudah.Silahkan coba.

Cara Membuat/Memasang Tombol Google +1 di
Blogger/Blogspot
Seperti yangtelahramai diberitakan di dunia internet, Google telah membuat satu fitur baru:" Official
Google +1 Button" yang merupakan tool bagi pengunjung blog/web serta search engine untuk
memberikan"voting"bagi sebuahhalaman blog/web yang menurutnya memiliki nilai (value) manfaat
yang besar.MenurutGoogle,+1 Buttonjuga memberikanreferensi danrekomendasi bagi Google dalam
menentukanperingkatsuatuhalamanwebdi searchengine (SERPs).Olehkarenaitu,memasangtombol
+1 Google bisamenjadi salahsatualternatif bagi pemilik blog/web untuk meningkatkan SEO blog/web
tersebut. Meskipun saat ini fitur Google +1 baru muncul di domain google.com, namun memasangnya
mulai sekarangtidakadasalahnya, karena di domain tersebut pun semua website di berbagai belahan
dunia juga diperhitungkan, apalagi jika nanti fitur ini juga muncul di domain google.co.id, pasti lebih
bermanfaat dan berkali lipat efeknya terhadap SEO dan SERPs.
Cara memasang Tombol +1 Google di Blogger/Blogspot:
Untuk template blogger yang default atau secara official merupakan bawaan blogger, fitur ini dapat
dibuatdenganmudahmelalui halamanpage elements/edit gadget, karena fitur ini sudah secara resmi
ditambahkan ke Blogger. Perhatikan gambar berikut:

Tombol +1 Google dapatdenganmudahditampilkandengan mencentang "Show Share Button". Masuk
ke dashboard> design/rancangan>kemudianklik"editpost"di bagianbadan template danakantampil
pop up window seperti gambar di atas.
Namun, bagi template yang sudah dimodifikasi dan bukan default template, fitur "share button"
biasanya telah dihapus. Oleh karena itu diperlukan editing template HTML untuk menambahkan
fitur/tombol +1 Google tersebut.
Secara official, ada 3 jenis button atau tombol Google +1:
standard
medium
small
1. Masuk ke dashboard > design/rancangan > edit HTML >"expand widget templates"
2. Copy kode berikut dan paste tepat SEBELUM </head>
<script type="text/javascript"src="http://apis.google.com/js/plusone.js"></script>
3. Copy kode berikut:

<b:if cond='data:blog.pageType =="item"'>
<divclass='post-share-buttons'style='float:right;padding:4px;'>
<g:plusone size="standard"></g:plusone>
</div>
</b:if>

Kostumisasi Tombol Google +1:
a. Ganti standard dengan medium atau small jika ingin mengubah ukuran tampilan button/tombol
seperti contoh di atas.
b. Ganti right dengan left jika ingin button/tombol berada di sisi kiri.
c. Kode berwarna biru akan menampilkan tombol hanya ketika halaman posting dibuka. Jika anda
menggunakan auto readmore, maka tombol tersebut tidak akan muncul di post summary, sehingga
tampilan post summary tidak akan rusak. Jika anda tidak menggunakan auto readmore atau
menggunakanreadmore tapi tetapinginmenampilkannya di post summary, hapus kode biru tersebut.
Cara Memasang Google +1 Button:
(Update: Ini sekaligus untuk menjawab beberapa permasalahan yang disampaikan dalam beberapa
komentar di bawah):
>> Karena banyaknya permasalahan ketika memasang tombol Google +1, kode yang harus dicari saya
ubah untukmemudahkan pemasangan (meskipun sebenarnya sama saja, hanya untuk memudahkan
pencarian)
4. Jika inginmemasangbuttondi bagian bawah posting, cari <div class='post-header-line-1'/>(gunakan
Ctrl+F) dan paste kode tersebuttepatdi BAWAH-nya.Jikakode tersebuttidakketemu, letakkan kode di
ATAS <data:post.body/>.
5. Jika ingin memasang button di bagian bawah posting, cari <data:post.body/>(gunakan Ctrl+F) dan
paste kode tersebut tepat di BAWAH-nya.
6. Save template.

Cara Menambahkan Icon/Gambar di Depan Judul Posting
Blogger
Icon/Gambar di depan judul posting blog dapat menambah daya tarik. Icon tersebut juga dapat
memberikan kesan tampilan judul posting yang indah dan dapat memberikan perwakilan akan arti
pentingjudul postingtersebut.Di Blogger,kemungkinan untuk menambah dan memodifikasi berbagai
macam pernak-perniksangatlahmungkin.Seperti pernahsayasinggungdi posting CaraMengganti "Post
a Comment" Blogger Dengan Teks Lain/Gambar, dengan sedikit memahami tag-tag xml template
Blogger, kita dapat memodifikasi atau menambahkan tag-tag HTML sesuai dengan selera kita.
So, bagaimana cara memasang icon/gambar di depan posting Blogger/Blogspot?
1. Masukke dashboard >Design>Edit HTML/template.
2. Klik/centang "Expand Widget Templates".
3. Cari kode/tag berikut:
<b:if cond='data:post.url'>
4. Kemudianlihatselengkapnyahinggabagiantag-tagberikut:
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
Tag-tag diatas adalah yang mengatur bagian judul posting, baik url maupun isi judul (title) posting.

5. Copy kode HTML-gambar di bawah ini:
<img src="URL-GAMBAR/ICON"/>
6. Letakkan/sisipkan kode di antara <a expr:href='data:post.url'> dan <data:post.title/>.
Note:
a) Setiaptemplate memiliki aturanCSSposisi dantampilangambardi dalampostingyangberbeda-beda;
pada umumnyadalamhal border, margin dan padding. Hasilnya, bisa saja gambar tidak sejajar dengan
judul. So, saya akan masukkan styling berikut agar gambar memiliki aturan khusus dan tidak
menggunakan aturan umum yang dibawa oleh template dan selanjutnya lebih baik copy dan gunakan
kode berikut:
<img src="URL-GAMBAR/ICON"style="border:0;padding:0;margin-right:10px"/>
Andadapat mengubah nilai 10 pada margin-right untuk menentukan jarak antara gambar/icon dengan
judul posting. Tambahkan pula styling yang lain jika dibutuhkan.
b) Sebelum memasukkan url gambar dan seluruh tag gambar di dalam template, sesuaikan dahulu
ukuran gambar dengan judul posting, baik dalam hal pemilihan warna icon maupun tinggi dan lebar
icon.Edit gambarterlebihdahulusebelumdiupload.Hal ini ditujukan agar gambar memiliki kesesuaian
dengan judul posting dan. Jangan sampai gambar terlalu besar/kecil.
7. Setelah semua beres, masukkan tag HTML gambar seperti cara yang telah ditunjukkan di atas.
Contoh:
<a expr:href='data:post.url'><imgsrc="URL-GAMBAR/ICON"style="border:0;padding:0;margin-
right:10px"/><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
8. Previewterlebihdahulu,jikasudahberes,save template.
Have a nice blogging!

Cara Menampilkan Judul Posting Saja Pada Label dan
Arsip Blog
Trik Menampilkan Judul Artikel/Posting Saja Pada Halaman Label dan Archive Blogger.
Tips-tricks Blogger kembali lagi dengan urusan coding.nih, bermain-main lagi dengan b if cond, b else
dan b include.
Terkadangakan sangatlama dan menjemukanapabilakitamembukahalaman label atauarsipblogyang
jumlahpostingnya sudah banyak. Bahkan, semakin tidak efisien lagi jikamembuka halaman lain untuk
melihat daftar/list posting yang lebih lama. So, menampilkan judul posting saja pada bagian label dan
arsip dapat membuat loading halaman lebih cepat dan visitor dapat lebih cepat melihat daftar semua
judul posting yang ingin dibaca. Contohnya kaya gini:
Siap mengubah tampilan halaman label dan arsip blog anda dengan cara tersebut?
Oke, kalo begitu lanjuuut ke cara menampilkan judul posting saja di label dan arsip Blogspot:
1. Masuk ke dashboard > Design/Rancangan > Klik 'expand widget template'.
2. Cari kode:<b:include data='post' name='post'/> (Ctrl+F)

3. Ganti denganscriptini:

<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><aexpr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType =="archive"'>
<b:else/>
<b:include data='post'name='post'/>
</b:if>
</b:if>

4. Save template HTML.
5. Done!(done ituartinyaYang terjadi makaTerjadilah!olret..)
6. Coba dicekhasilnyapadahalamanlabel danarchive blog.
Update(04-05-11):
Kemarin ada yang bertanya lewatContactForm:"Gimana cara menampilkan juduldilabel saja atau di
arsip saja?Thanks."
Oke,sayajawab sekaligusupdatedisini sekalian:
*Jika ingin menampilkanjudul postingsaja khususdi label,ambil perintahpadab if cond label danb
include posting saja:

<b:if cond='data:blog.searchLabel'>
<b:else/>
</b:if>
*Jika ingin menampilkanjudul postingsaja khususdi arsip, ambil perintahpadab if cond archivedan b
include posting saja:

<b:if cond='data:blog.pageType =="archive"'>
<b:else/>

</b:if>
-Cara memasukkanscriptnyasamadengancarayang telahdisebutkandi atas.
Demikiantipsmenampilkan judulpostsaja dibagian labeldan archive.Harap maklum.
Jikaada permasalahanatauada hal yang inginditanyakantentang"merias"tampilanjudultersebut(CSS
styling),bapakibusekalianbisasampaikanmelalui komentar,karenasetiaptemplateblogtidaksama
aturan dasar pada tampilan,font,link,margin,danlain-lain.Feelfree touse the commentform, Iwill be
readyto helpanddo the bestI can.
Cheers!
Jangan LUPA di Like yaa… my Facebook
http://www.facebook.com/ssyairil

OPTIMASI KONTEN

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à OPTIMASI KONTEN

Similaire à OPTIMASI KONTEN (20)

OPTIMASI KONTEN