Senin, 06 Oktober 2014

Tampilan Baru Dashboard Blogger dan Cara Menggunakan-nya

Tampilan Baru Dashboard Blogger dan Cara Menggunakan-nya




Blogger sudah mulai mengaktifkan tampilan dashboard yang baru (new user interface [UI]). Tampilan Blogger Dashboard baru ini bisa diakses dengan klik "Try the updated Blogger interface", baik melalui halaman Home, maupun halaman-halaman lain (new post, design, comments, dll). Seperti informasi yang telah saya sampaikan di Fitur-Fitur Terbaru Blogger/Blogspot 2011, tampilan ini terlihat lebih elegan, powerful, handy, dan lengkap.

User akan disambut dengan tampilan dashboard Blogger baru seperti ini:
















Akses ke semua fitur/halaman di dalam control panel/dashboard blogger dengan meng-klik option di sebelah kanan gambar "home". Akan muncul pilihan-pilihan seperti posts, comments, stats dll. Untuk langsung masuk ke bagian design template/page elements, klik "Layout" (dulunya design).
















Di halaman Layout, user bisa menambah atau mengedit gadget seperti biasanya. Salah satu fitur baru di halaman tersebut adalah Blogger Custom Favicon dimana user dapat dengan mudah mengganti favicon (icon) blog. Tidak seperti dulu, dimana kita harus mengupload file .ico di hosting lain dan memasang script favicon melalui "Edit HTML".

Salah satu halaman tampilan yang juga baru adalah overview, dimana kita dapat melihat summary dari statistik blog secara lengkap dalam satu halaman, misalnya: jumlah pageview, jumlah posting, jumlah comment, reffering site terbanyak, blogger news, dan masih banyak lagi. Klik panel "Overview" di sebelah kiri atas untuk mengaksesnya. Tampilan ini mengingatkan saya akan control panel/dashboard admin WordPress, tentu saja tidak sama persis.
















Fitur penting lain yang telah ada sebelumnya namun sempat membuat bingung user ketika mencarinya adalah "Edit HTML". Dalam tampilan lama Blogger, Edit HTML diakses setelah masuk ke design/rancangan > klik Edit HTML. Kini fitur ini diakses dan terintegrasi dalam menu/opsi "Template" dengan nama "Edit Template".

















Di dalam menu itu, user dapat melihat tampilan live template yang digunakan oleh blog, melakukan kostumisasi template, serta memilih dan mengganti template. Tentu saja ini untuk template blogger yang official/bawaan Blogger. Untuk melakukan editing HTML secara manual, scroll mouse hingga bagian terbawah halaman. Terdapat tiga sub menu, pilih/klik "Edit Template" dan tampilan HTML editor akan langsung muncul. Backup dan restore file XML template dapat dengan mudah dilakukan di dalam halaman itu pula.

Salah satu fitur lama yang terpenting adalah "Post Editor". Dalam tampilan Blogger baru ini, layout Post Editor tampak lebih elegan dan mantap. Namun, tidak ada perubahan berarti pada fitur-fitur editing-nya.
















Pastinya, butuh waktu yang cukup bagi pengguna Dashboard blogger lama untuk beradaptasi dengan tampilan dan fitur dashboard Blogger baru. However, it feels worth enough to try this Blogger Dashboard's new look and features, ain't it? :D

Mengenal Elemen-elemen Wrapper CSS di Blogger/Blogspot

Mengenal Elemen-elemen Wrapper CSS di Blogger/Blogspot




Blogger/blogspot memungkinkan penggunanya melakukan styling melalui edit html. Dengan demikian ini memberi peluang bagi anda, pemilik blog di blogger, untuk memodifikasi tampilan blog anda. Salah satunya adalah memberikan sentuhan CSS styling pada wrapper elements. Elemen dasar dari wrapper tersebut digambarkan sebagai berikut:
 

1. #outer-wrapper atau #outer-wrap atau #outer
2. #header-wrapper atau #header-wrap atau #header
3. #content wrapper atau #content-wrap atau #content
4. #main-wrapper atau main-wrap atau #main
5. #sidebar-wrapper atau #sidebar-wrap atau #sidebar, ada juga #lsidebar (l=left) dan #rsidebar (r=right)
(nama-nama tersebut relatif sifatnya)

Anda akan menemui declaration dibelakangnya, misalnya:
#outer-wraper {width: 960px;margin: 0 10px 0;border:3px solid #666666, dst....}
Di declaration itulah anda bisa memodifikasi/menambah/mengatur banyak hal. diantaranya adalah:
background (warna atau gambar/image), margin, padding, border, width, height (untuk header)

Memperindah Kotak Comment Blogger/Blogspot Dengan CSS

Memperindah Kotak Comment Blogger/Blogspot Dengan CSS




menghias kotak komentar blog
Cara ini saya dapat setelah sedikit belajar otak-atik CSS dengan teman karena pengen banget membuat kotak comment (yang sebelumnya terkesan "biasa" di dalam template Blogger ini) terlihat lebih "berwarna" dan "senada" dengan warna template blog ini.
Akhirnya kita menggunakan konsep frame untuk menghias sekeliling kotak comment tersebut. Caranya pun sangat sederhana dan mudah. Berikut langkah-langkah dan kodenya:

1. Masuk ke dashboard Blogger  => Design => Edit HTML/Edit Template

2. Jangan lupa backup dulu template yang lama untuk berjaga-jaga apabila ada kesalahan dalam editing.

3. Centang expand widget template di sebelah kanan.

4. Cari kode => ]]></b:skin> (Gunakan Ctrl+F untuk mencari)

5.Copy kode CSS dibawah ini dan letakkan tepat sebelum/diatas tag tersebut.
#comment-form iframe{
background:#7f9db9;
border:7px solid #eeeeee;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000000;
width:95%;
height:250px;
}
#comment-form iframe:hover{
background:#7f9db9;
border:7px solid #bababa;
}
6. Setelah itu save dan coba dilihat hasilnya.

Ganti width dan height sesuai dengan ukuran yang anda inginkan. Begitu pula dengan warna, ganti kode background sesuai dengan keinginan. Untuk kode-kode warna, silakan lihat Hex Color Code Chart Generator.

Membuat Warna Berbeda Pada Text Selection (Bagian Teks yang di-Blok)

Membuat Warna Berbeda Pada Text Selection (Bagian Teks yang di-Blok)




text selection color
Sobat, today we will talk about making different color of  text selection. Text selection adalah bagian yang kita blok dengan menggunakan klik kiri mouse dan menariknya hingga pada bagian teks tertentu yang kita pilih atau semuanya. Secara default semua browser menggunakan warna biru pada background dan warna putih pada teks. Untuk mengetahuinya silakan sobat pilih bagian tulisan apa pun pada posting ini (seperti ketika mau co-pas tulisan, tapi jangan suka co-pas tanpa ijin loh ya :P) dan lihatlah perbedaannya. Saya menggunakan warna merah sebagai background dan putih pada tulisan yang di-blok oleh mouse selection.

Untuk meng-hack browser dan melakukan override fungsi tersebut pada blog/website saat ini sangatlah memungkinkan. Kehadiran CSS3 telah banyak memberikan perkembangan dan perubahan pada dunia desain web. Untuk membuat hasil seperti di atas, digunakan selector ::selection. Tipe ini didukung oleh semua browser kecuali Internet Explorer. Untuk Mozilla Firefox perlu ditambahkan -moz- sebagai notifikasi agar dikenali oleh browser tersebut:
selection::{color:#ff0000;}
::-moz-selection{color:#ff0000;}
untuk memberikan pre-selection (pre selection adalah warna setelah anda memblok suatu bagian text, kemudian anda klik/pindah ke bagian lain di komputer anda di luar browser. Misalnya setelah memblok bagian text pada posting ini, silahkan klik area kosong di toolbar komputer anda):
pre::selection {color:#f5f5f5;}
pre::-moz-selection {color:#f5f5f5;}
Untuk menambah background text, tambahkan descriptor background, misalnya:
selection::{background:#000000;color:ff0000}
So, untuk membuatnya secara lengkap dan melakukan generalisasi, masukkan script berikut ini sebelum/di atas </head> (use Ctrl+F) di editor HTML anda:
<style type='text/css'>
::selection {background:#cc0000;color:#ffffff;}
::-moz-selection{background:#cc0000;color:#ffffff;}
code::selection {background: #333333;color:#ffffff;}
code::-moz-selection {background: #333333;color:#ffffff;}
pre::selection {background: #44ceff;color:#ffffff;}
pre::-moz-selection {background: #44ceff;color:#ffffff;}
</style>
Ganti kode warna background dan color sesuai dengan selera anda. Lihat kode-kode warna di Hex Color Code Chart Generator. Gunakan mix warna yang proporsional dan kontrastif pada ::selection dan ::-moz-selection. Kemudian simpan dan coba hasilnya.

Membuat Textarea 3D Cantik di Blogger/Blogspot: (Light-Yellow)

Membuat Textarea 3D Cantik di Blogger/Blogspot: (Light-Yellow)




Textarea adalah bagian dari form yang berfungsi sebagai space/ruang bagi teks/konten khusus yang ingin diberi posisi/penempatan tertentu. Ada banyak jenis textarea berdasarkan fungsi form, yaitu untuk mengisi data, submission/pendaftaran, polling, search, dan lain-lain. Namun pada posting kali ini akan dikhususkan pada texarea yang berfungsi sebagai space bagi konten tertentu untuk digunakan olh pengunjung dan bersifat read-only, baik pada posting blog/website maupun pada widget/sidebar.

Pada posting terdahulu, saya pernah berbagi tentang textarea sederhana dengan menggunakan tag div dan beberapa aturan CSS yang sederhana pula. Di posting ini, saya share textarea dengan tag originalnya (textarea tag) dan beberapa sentuhan style CSS3. Posting ini akan dilanjutkan dengan posting-posting selanjutnya tentang textarea dengan berbagai macam styling yang nantinya dapat dipilih dan disesuaikan dengan warna dan template blog sehingga akan tampak lebih indah.

Dasar tag textarea adalah:
<textarea>teks/konten disini</textarea>
Nah, dengan memasukkan beberapa atribut dan style CSS, kita dapat mempercantik tampilan textarea tersebut. Contoh
<textarea style="width: 300px;height:60px; border:1px solid red;" readonly="readonly">teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini</textarea>
Hasilnya: 


Itu adalah sebagian contoh sederhana styling pada text area. Selanjutnya berikut adalah textarea dengan menggunakan styling CSS3 yang sedikit agak rumit. Anda dapat meenggunakan script/kodenya di blog anda dan melakukan beberapa kostumisasi sesuai kebutuhan.





Cara membuatnya:
1. Copy kode CSS berikut:
<style type="text/css">
.bukarahasia-textarea1 {padding:3px;margin:0;width:400px;height:60px;color:#FFCC00;font:12px arial;background:#000;border:2px outset #FFCC00;-moz-box-shadow: 7px 7px 3px #888;-webkit-box-shadow: 7px 7px 3px #888; box-shadow: 7px 7px 3px #888;}
.bukarahasia-textarea1:hover {color:#FFFF00;border:3px double #FFB200;-moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0;"}
</style>
Kostumisasi: atur nilai width (lebar) dan height (tinggi) sesuai dengan keinginan.
2. Jika ingin menggunakan textarea yang sama pada semua posting/widget, paste kode CSS tersebut tepat di atas </head> pada edit HTML template kemudian save.
3. Jika ingin memakainya pada satu posting saja, masukkan kode CSS di bagian bawah posting melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) atau HTML/Javascript pada widget.
4. Kopi kode HTML berikut:
<textarea class="bukarahasia-textarea1" readonly="readonly">teks/konten textarea disini</textarea>
5. Ganti teks/konten textarea disini dengan konten anda. 
6. Masukkan ke editor posting melalui melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) HTML/Javascript pada widget dimana anda sebelumnya telah memasukkan kode CSS.
7. Done. Anda dapat mempreviewnya langsung melalui "compose".

Membuat Textarea 3D Cantik di Blogger/Blogspot: (Light-Yellow)

Membuat Textarea 3D Cantik di Blogger/Blogspot: (Light-Yellow)




Textarea adalah bagian dari form yang berfungsi sebagai space/ruang bagi teks/konten khusus yang ingin diberi posisi/penempatan tertentu. Ada banyak jenis textarea berdasarkan fungsi form, yaitu untuk mengisi data, submission/pendaftaran, polling, search, dan lain-lain. Namun pada posting kali ini akan dikhususkan pada texarea yang berfungsi sebagai space bagi konten tertentu untuk digunakan olh pengunjung dan bersifat read-only, baik pada posting blog/website maupun pada widget/sidebar.

Pada posting terdahulu, saya pernah berbagi tentang textarea sederhana dengan menggunakan tag div dan beberapa aturan CSS yang sederhana pula. Di posting ini, saya share textarea dengan tag originalnya (textarea tag) dan beberapa sentuhan style CSS3. Posting ini akan dilanjutkan dengan posting-posting selanjutnya tentang textarea dengan berbagai macam styling yang nantinya dapat dipilih dan disesuaikan dengan warna dan template blog sehingga akan tampak lebih indah.

Dasar tag textarea adalah:
<textarea>teks/konten disini</textarea>
Nah, dengan memasukkan beberapa atribut dan style CSS, kita dapat mempercantik tampilan textarea tersebut. Contoh
<textarea style="width: 300px;height:60px; border:1px solid red;" readonly="readonly">teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini teks/konten textarea disini</textarea>
Hasilnya: 


Itu adalah sebagian contoh sederhana styling pada text area. Selanjutnya berikut adalah textarea dengan menggunakan styling CSS3 yang sedikit agak rumit. Anda dapat meenggunakan script/kodenya di blog anda dan melakukan beberapa kostumisasi sesuai kebutuhan.





Cara membuatnya:
1. Copy kode CSS berikut:
<style type="text/css">
.bukarahasia-textarea1 {padding:3px;margin:0;width:400px;height:60px;color:#FFCC00;font:12px arial;background:#000;border:2px outset #FFCC00;-moz-box-shadow: 7px 7px 3px #888;-webkit-box-shadow: 7px 7px 3px #888; box-shadow: 7px 7px 3px #888;}
.bukarahasia-textarea1:hover {color:#FFFF00;border:3px double #FFB200;-moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0;"}
</style>
Kostumisasi: atur nilai width (lebar) dan height (tinggi) sesuai dengan keinginan.
2. Jika ingin menggunakan textarea yang sama pada semua posting/widget, paste kode CSS tersebut tepat di atas </head> pada edit HTML template kemudian save.
3. Jika ingin memakainya pada satu posting saja, masukkan kode CSS di bagian bawah posting melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) atau HTML/Javascript pada widget.
4. Kopi kode HTML berikut:
<textarea class="bukarahasia-textarea1" readonly="readonly">teks/konten textarea disini</textarea>
5. Ganti teks/konten textarea disini dengan konten anda. 
6. Masukkan ke editor posting melalui melalui menu Edit HTML posting (letaknya di pojok kanan atas kotak editor posting) HTML/Javascript pada widget dimana anda sebelumnya telah memasukkan kode CSS.
7. Done. Anda dapat mempreviewnya langsung melalui "compose".

Membuat Tampilan Iklan Google Adsense Responsif (CSS Media Queries)

Membuat Tampilan Iklan Google Adsense Responsif (CSS Media Queries)




google adsense responsive buka-rahasia.blogspot.com
Masih bicara masalah responsive nih, ceritanya. Karena sekarang sudah jamannya responsif, maka Google akhirnya secara resmi mengeluarkan satu fitur baru lagi sebagai salah satu opsi/pilihan kode yang bisa di set di dashboard Google Adsense. Beberapa waktu lalu, Google meluncurkan asynchronous code untuk memperbaiki performa website yang menampilkan iklan Adsense, iklan tampil lebih cepat dan muncul setelah semua elemen web termuat oleh browser. Responsivitas unit iklan juga memastikan iklan yang tampil dapat dilihat dengan baik oleh pengguna media lain (non desktop user) sehingga potensi klik dan optimalisasi pendapatan Adsense tidak berkurang. 
Sebelum unit iklan responsive dirilis, kode iklan masih dalam bentuk synchronous (kode unit iklan lama), sehingga saya harus mengakali tampilan responsifnya dengan javascript. Ada beberapa slot iklan yang digunakan sekaligus dalam satu area iklan agar nantinya bisa dipanggil sesuai dengan lebar screen. Misalnya di header saya membuat 3 slot sekaligus, 728x90, 468x60, dan 320x50, yang nanti masing-masing akan dimuat sesuai dengan lebar device. Pastinya ini ribet, karena kita mesti membuat banyak slot, apalagi jika punya 3 area di satu halaman, maka bisa dipastikan banyak sekali jumlah slot yang harus dibuat. Belum lagi eksekusi menggunakan javascript yang tentu akan memakan waktu lebih panjang.


Beberapa waktu kemudian, kehadiran asynchronous code membuat pekerjaan lebih ringan, karena kita tidak perlu membuat banyak slot, cukup satu slot saja dan sisanya bisa diatur dengan CSS media queries. Contoh:
<style type="text/css">
.adsbygoogle {display:inline-block;width:468px;height:60px;}
@media screen and (max-width: 467px)  { .adsbygoogle {display:inline-block;width:300px;height:250px;} }
@media screen and (max-width: 299px)  { .adsbygoogle {display:inline-block;width:200px;height:200px;} }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Kode di atas adalah hasil modifikasi menggunakan CSS media queries yang menggunakan class adsbygoogle. Berikut kode aslinya.
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:468px;height:60px;"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Style di dalam tag ins kemudian diangkat dan dipisahkan ke dalam tag style sendiri, dengan menggunakan class adsbygoogle. Dan hasilnya seperti pada contoh pertama. Proses pembacaan CSS media screen/queries nya seperti ini: 
Tampilan default iklan yang akan dimunculkan adalah 468x60, namun jika lebar screen kurang dari sama dengan 467px maka tampilkan iklan dalam ukuran 300x250, namun jika lebar screen kurang dari sama dengan 299px, maka tampilkan iklan dalam ukuran 200x200.

Rilis Unit Iklan Adsense Responsif (Beta)

Sebelum unit iklan responsif dirilis, saya masih merasa was-was, karena cara yang terakhir ini belum benar-benar dirilis secara resmi sebagai cara yang diperbolehkan, meskipun dalam help center, Google mengijinkan penggunaan CSS media queries, namun bukan pada asynchronous.

Nah, kabar baiknya, kemarin (baru saja, jam 10an malem, 31 Juli 2013) Google Adsense menyampaikan bahwa kini ada satu fitur lagi (masih dalam versi beta) yang disebut sebagai "responsive ad unit".

Berikut langkah membuat Ad Unit responsive dan modifikasi CSS-nya sebelum bisa digunakan pada website/blog responsive anda:

1. Buat slot baru, dan, lihat pada pilihan dropdown di bagian "ad size". Pilih "responsive ad unit". Tidak ada ukuran yang perlu diset pada tahap ini. Kode yang perlu dicopy pun harus dimodifikasi lagi karena itu hanyalah contoh. 
2. Copy kode yang dihasilkan dan paste pada notepad atau editor teks sederhana lainnya.
Berikut contoh kodenya:
<style>
.classsesuainamaslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .classsesuainamaslot  { width: 468px; height: 60px; } }
@media(min-width: 800px) { .classsesuainamaslot  { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- namaslot -->
<ins class="adsbygoogle classsesuainamaslot"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>



3. Lakukan modifikasi pada bagian tag style, karena disitulah kunci responsivitasnya.
Default contoh di atas (biru) menggunakan default unit iklan terkecil 320x50 (mobile unit). Kemudian diikuti dengan media min-with (lebar minimal). Jadi asumsinya gini, jika lebar screen minimal 500px, maka tampilkan ukuran 468x90px, jika lebar screen minimal adalah 800px, maka tampilkan unit iklan 728x90. Anda bisa menampilkan beberapa baris sekaligus jika ingin membuatnya lebih spesifik, menentukan syarat minimal atau maksimal screen, dan mengubah ukuran default pada bagian paling atas. Contoh:

<style>
.classsesuainamaslot { width: 200px; height: 200px; }
@media(min-width: 350px) { .classsesuainamaslot { width: 300px; height: 250px; } }
@media(min-width: 400px) { .classsesuainamaslot { width: 336px; height: 280px; } }
@media(min-width: 500px) { .classsesuainamaslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .classsesuainamaslot { width: 728px; height: 90px; } }
@media(min-width: 900px) { .classsesuainamaslot { width: 900px; height: 90px; } }
</style>

CSS media query di atas menggunakan konsep minimal width, sehingga unit iklan default adalah yang terkecil. Jika ingin menggunakan unit iklan default terbesar menuju ukuran yang lebih kecil, misalnya default 728x90 kemudian menuju unit lebih kecil 468x90 dan seterusnya, maka media query yang harus digunakan adalah max-width.
4. Jika anda masih tidak puas dan bingung, atau ingin menggunakan aturan ukuran media screen yang lebih fix, gunakan contoh pertama dimana saya terapkan pada kode asynchronous di awal artikel (@media screen and (max-width)).
Contoh:

<style type="text/css">
.classsesuainamaslot{display:inline-block;width:728px;height:90px;}
@media screen and (max-width: 727px)  { .classsesuainamaslot {display:inline-block;width:468px;height:250px;} }
@media screen and (max-width: 467px)  { .classsesuainamaslot {display:inline-block;width:336px;height:280px;} }
@media screen and (max-width: 335px)  { .classsesuainamaslot {display:inline-block;width:300px;height:250px;} }
dan seterusnya tergantung keinginan anda...
</style>

5. Setelah selesai melakukan editing, masukkan kode iklan ke dalam space dimana anda memasang iklan dan lihat hasilnya.

Beberapa poin yang perlu diperhatikan pada penggunaan iklan Google Adsense versi responsive:

  1. Pastikan ukuran yang digunakan pada masing-masing media query benar-benar fix.
  2. Pastikan ukuran yang digunakan sesuai dengan ad unit Google Adsense yang tersedia (728x90, 468x90, 970x90, 336x280, 320x50, 300x250, dan seterusnya). Ukuran yang tidak sesuai dengan ad unit yang tersedia tidak akan tampil.
  3. Karena merupakan media query, maka penyesuaian unit iklan yang ditampilkan mengikuti lebar screen pada saat load pertama kali. Jadi ketika melakukan test, pastikan anda telah mengatur lebar browser terlebih dahulu baru load halaman. Anda tidak bisa melihat resposivitasnya hanya dengan mengubah-ubah lebar browser tanpa proses load terlebih dahulu.
  4. Jangan lupa mengatur ukuran unit iklan default apabila sewaktu-waktu media query tidak bisa dieksekusi.
  5. Terakhir, tentu saja ini hanya baik digunakan pada template.theme responsive. Pada template/theme non responsif masih bisa sih, tapi pastikan iklan float/berada di samping kiri. :)
  6. Demo menyusul :)
Catatan penting:
Karena menggunakan kode asynchronous dan hanya perlu satu kali eksekusi javascript setiap load halaman dan iklan, maka script ini sebaiknya hanya disisipkan sekali:
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Letakkan pada space iklan di bagian teratas dan hapus pada bagian unit iklan lainnya. Unit iklan di space lain secara otomatis akan tereksekusi mengikutinya. Cara ini sudah diakui Google tidak melanggar kebijakan dan justru dianjurkan, karena eksekusi script yang sama justru akan memperlambat load halaman dan sama sekali tidak penting.
That's it. Good luck, drop a comment jika ada problem, and have a nice blogging :)

Memberi Warna Berbeda pada Link yang Dikunjungi/Di-klik (Visited Link)

Memberi Warna Berbeda pada Link yang Dikunjungi/Di-klik (Visited Link)




visited-link
Trik CSS ini digunakan untuk memberikan warna khusus pada visited link & berlaku untuk semua link yang ada di halaman blog/website kecuali untuk link yang menggunakan external script, misalnya widget-widget tambahan. Cara ini unik dan cukup berpengaruh karena sangat berguna bagi pengunjung agar tidak bingung ketika melakukan browsing, terutama pada website/blog yang memiliki link-link navigasi pada halaman-halaman yang hampir sejenis. Selain itu, pengunjung juga dapat mengetahui link mana yang telah ia klik sebelumnya jika ia ingin melihat kembali halaman tersebut karena ada sesuatu yang tadinya terlewatkan.

Cara ini merupakan override pada aturan link yang telah ada sebelumnya di template HTML. Jadi anda tidak perlu lagi mencari urutan aturan link di dalamnya. Cukup tambahkan aturan CSS berikut sebelum </head> di template HTML:
<style type='text/css'>
a:visited {color:#808080;text-decoration:none;}
</style>
Ganti #808080 dengan kode warna yang diinginkan. Ganti none dengan jenis properti text-decoration yang lain, misalnya underline (garis bawah) atau overline (garis atas), atau properti yang lain. But just remember, make it natural 'cuz kadang-kadang yang terlalu berlebihan malah tidak asyik .^_^
pewarnaan visited link Done!

Mau Ganti Template Blog? Perhatikan Ulasan dan Tips ini Dulu!

Mau Ganti Template Blog? Perhatikan Ulasan dan Tips ini Dulu!






Background

Masing-masing platform blog/website memiliki karakteristik tersendiri. Demikian pula template Blogger. Ada beberapa karakteristik khusus yang menentukan bagaimana tampilan dan struktur dibangun. Memahami karakteristik tersebut merupakan salah satu persyaratan dan menjadi pertimbangan penting supaya keputusan untuk mengganti template tepat, dan proses yang dilakukan berjalan mulus sesuai harapan. Di dalam artikel ini saya akan memaparkan beberapa di antaranya sekaligus bagian dari tips blog untuk mengganti template Blogger yang tepat dan efisien.

Artikel ini saya bagi menjadi 2 Bagian:
  1. Karakteristik & Struktur Template Blogger serta Kaitannya Dengan SEO (you're here)
  2. Tips Mengganti Template Blog Secara Efisien dan Aman (coming soon...)

Karakteristik Template Blogger

Sebagaimana yang dulu telah saya sampaikan di dalam tips edit template Blogger, template blogger memiliki elemen-elemen pembangun seperti tag-tag HTML, CSS, Javascript, dan tag-tag XML Blogger. Semua elemen tersebut dimuat dalam satu file berformat XML. Jadi, semua fungsi pembangun sekaligus fungsi desain berada di dalam file yang sama. Itulah mengapa ketika anda mengganti template secara langsung, maka berubah pula semua struktur dan style tampilannya. Inilah yang disebut sebagai template. Sedangkan yang disebut sebagai theme (misalnya WordPress theme) terdiri dari beberapa file template, masing-masing berdiri sendiri (independen), namun saling mempengaruhi ketika dipanggil dalam sebuah tampilan halaman tertentu.

File-file khusus seperti isi post, isi widget, dan beberapa tampilan tertentu lainnya disimpan langsung dalam database di server Blogger. Perintah penampilannya menggunakan tag-tag XML khusus milik Blogger. Ada beberapa tampilan yang tidak bisa anda atur, karena merupakan setting default oleh Blogger dan kita tidak memiliki akses ke server untuk mengeditnya. Sebagai contoh adalah pesan status (status message) yang muncul di atas halaman label dan search, kita hanya mampu melakukan hack tampilan pesan status, namun tidak bisa mengubah isinya.

Itulah sebagian karakteristik penting dari template Blogger, yang nantinya cukup berpengaruh ketika anda mengganti template blog.

Struktur Template Blogger dan SEO

Telah banyak wacana mengenai mana template yang SEO friendly dan mana yang tidak SEO friendly; kebanyakan didasarkan pada ada tidaknya meta tags (meta description, meta keyword, meta author, dll). Benarkah demikian? Pernah saya melihat ada template yang dikatakan SEO friendly, setelah saya cek, di dalamnya hanya diisi oleh template meta tags yang siap diganti isinya. Cuma itu? Tidak. Tidak ada yang bisa mengukur kekuatan SEO sebuah template hanya lantaran penggunaan meta tags dan perubahan susunan title tag saja, namun yang jauh lebih penting adalah: STRUKTUR-nya.

Google search engine, melalui GoogleBot dan penerjemahannya ke dalam indeks, melihat sebuah struktur website dalam hasil akhirnya, tanpa styling, tidak seperti browser yang kemudian membaca dan menerjemahkan CSS sehingga struktur HTML kemudian "dihias" dan "disusun" berdasarkan aturan CSS. Apapun platform web/blognya, secanggih apapun itu, hasil akhirnya adalah dalam bentuk HTML. Susunan HTML dimulai dari atas dan menuju ke bawah, tidak ada samping kanan dan kiri meskipun bisa ditulis demikian (untuk menghindari white space dan memperkecil ukuran file). Demikian pulalah Google membacanya. Search engine mengabaikan javascript, CSS, frame, flash, dan sejenisnya.
<HTML>
<HEAD>
</HEAD>
<BODY>
[beberapa tag division, span, paragraph, dll yang membangun struktur dan isi halaman]
</BODY>
</HTML>
Semua informasi meta ada di dalam elemen head, dan ini sudah cukup jelas penggunaannya. Yang perlu diperhatikan adalah bagian yang ditampilkan sebagai halaman (tag body). Di dalam elemen body, terdapat berbagai tag HTML pembangun, misalnya division (div), span, dan paragraf (p). Logika membacanya adalah dari atas ke bawah. Semakin ke bawah, semakin kecil nilai penting dan relevansi konten di dalam elemen tersebut. Urut-urutan elemen-elemen inilah yang menentukan nilai penting masing-masing elemen tersebut.

Tips Memilih dan Menggunakan Template Blog Pendukung SEO

Dari pembahasan ringkas di atas, dapat saya ambil beberapa poin sekaligus tips penting mengenai memilih struktur template yang mendukung SEO:
1. Search engine mengukur nilai penting suatu konten berdasarkan posisi tag HTML-nya; semakin awal semakin besar nilainya. Hindari penggunaan template yang meletakkan sidebar di posisi paling awal sebelum kontainer post, karena yang terbaca terlebih dahulu adalah bagian tersebut. Perhatikan gambar berikut:
Struktur Template Blogger
Secara sederhana, urutan tag HTML template A dan B pada sidebar dan post adalah:
Template A
Template B
<div class='sidebar'>
beberapa elemen widget
</div>
<div class='post-body'>
<data:post.body/>
</div>
<div class='sidebar1'>
beberapa elemen widget
</div>
<div class='post-body'>
<data:post.body/>
</div>
<div class='sidebar2'>
beberapa elemen widget
</div>


Telah jelas bahwa elemen sidebar pada kedua template tersebut (sidebar dan sidebar1) akan dibaca lebih dahulu oleh search engine sebelum elemen yang sebenarnya jauh lebih penting: Post. Jadi kesimpulannya sidebar di sebelah kanan jauh lebih baik karena akan terbaca belakangan setelah bagian/elemen post.
2. Sebagai alat navigasi, menu adalah elemen yang biasanya dibangun dan diletakkan di atas atau di bawah elemen header (biasanya dalam div), ini berarti menu memiliki nilai penting yang cukup signifikan. Bagi pengunjung, menu merupakan alat navigasi dan eksplorasi. Bagi search engine, menu merupakan alat rujukan menuju halaman terdalam lainnya, fungsinya untuk memperkuat deep linking. Apabila menu tersebut dibangun dengan menggunakan javascript murni atau flash, maka sudah barang tentu tidak akan terbaca oleh search engine.
Lihat apakah menu yang disisipkan ke dalam template berupa HTML atau javascript/flash, dan pertimbangkan penggunaan template tersebut. Jika perlu ganti dengan Menu HTML dan andalkan CSS untuk memberikan desain dan efek. Menu yang memiliki struktur baik juga akan memberikan kesempatan blog/web anda mendapatkan Google Sitelinks.
3. Selain menu, lihat apakah sebagian besar widget dan elemen tambahan lain yang menjadi satu paket dengan template di-generate menggunakan javascript. Apabila widget dan elemen tambahan lain merupakan bagian penting yang bersifat navigasional (seperti menu), hindari.
4. Meskipun footer links memiliki nilai dan relevansi paling rendah, karena posisinya paling bawah, namun dapat berefek buruk pada SEO apabila memuat link-link yang berbahaya dan spammy. Ada banyak template premium gratis yang mencantumkan link di footer. Apabila memuat link website pembuat template sih tidak masalah, itu atribusi penting dan wajib. Tapi apabila ada link-link lain sebagai link sponsor, dan biasanya merujuk ke website-website tidak relevan, affilasi, dan website yang diragukan kualitasnya, maka ini berbahaya. Jangan coba-coba menghapusnya, karena anda akan melanggar ketentuan pembuat template dan creative commons (attribution) yang digunakan. Lebih baik, jangan pakai templatenya.

Pikir Dua Kali Sebelum Ganti Template Blog

Kemajuan teknologi, khususnya dalam web design, telah memudahkan kita mengganti-ganti skin, theme, atau template web/blog; semudah membalik telapak tangan! Upload, save, dan voila! Blog telah berganti rupa (kalo widgetnya gak hancur, haha). Tetapi pernahkah terpikir bahwa ada efek besar, baik maupun buruknya? perhatikan beberapa poin faktual berikut:
1. Masih berkaitan dengan struktur dan SEO, Google telah mengenali struktur blog anda dan kemudian berpatokan pada susunan struktur tersebut, baik navigasi, susunan konten, widget dan lain sebagainya. Apabila anda mengganti template, maka Google harus mencoba mengenali lagi struktur baru blog anda, dan kemudian menentukan kembali bagian-bagian terpentingnya. Ini proses yang tidak cepat.
2. Apabila template blog baru tidak memiliki kriteria struktur yang lebih baik dari template lama, maka efeknya tentu buruk bagi SEO. Blog bisa mengalami penurunan ranking dan konsekuensi lainnya. Perubahan susunan navigasi, perubahan font, widget, dll juga dapat berpengaruh pada pengunjung yang telah cukup akrab dengan struktur dan tampilan blog sebelumnya.
3. Apabila tujuan penggantian template blog adalah untuk memperbaiki desain dan struktur template lama,  meningkatkan user experience, memperbaiki SEO, bersifat mendesak, dan hanya untuk satu atau dua kali saja; lanjutkan. Tapi apabila hanya sebagai bagian dari hobi berganti-ganti template blog karena tidak tahan melihat berbagai template baru, atau melihat template si A lebih menarik karena blog si A terkenal, pikirkan dua kali, atau bahkan 10 kali! Popularitas dan nilai penting blog anda tidak ditentukan oleh sekedar template, melainkan konten. Berganti-ganti template blog juga mengganggu proses membuat dan membangun blog yang efektif.
4. Berganti-ganti template terus menerus membuat struktur blog berubah-ubah sehingga search engine "bingung" menentukan struktur dan elemen penting blog anda. (further reading: baca artikel saya mengenai Konsistensi Struktur Web dan SEO).
5. Template blog termasuk bagian branding, apabila sering berubah, maka blog anda tidak akan memiliki brand atau identitas yang melekat. Tentukan template yang paling tepat, and stick to the template for a long time!
Sebagai garis bawah dari post mengenai template blog bagian pertama ini, yakinlah bahwa tidak ada template Blog yang benar-benar bisa dikatakan sebagai SEO friendly, sebab ada banyak faktor yang menentukan SEO friendly-nya sebuah template. Yang luput dari kita selama ini adalah, bahwa suatu blog beserta template-nya akan menjadi SEO friendly apabila didukung oleh konten. Ini yang menjadi poin nomer satu. Oleh karena itu, yang dibutuhkan bukanlah template yang katanya SEO friendly (padahal tidak), tapi kemampuan anda untuk membuat template tersebut menjadi SEO friendly.
Pernah ada beberapa yang menanyakan tentang template yang saya gunakan, karena mendengar bahwa template ini SEO friendly. Hmmm... gossip darimana itu? Ini template tahun 2008 awal, tidak ada fitur-fitur, sisipan tag, atau script yang sudah disiapkan untuk SEO. Desain awalnya pun benar-benar mentah sehingga harus melakukan berbagai kostumisasi. Ada yang bertanya juga bagaimana membuat template ini SEO friendly, apakah ada trik-trik khusus? Tidak ada, dan semua proses sudah saya geber di halaman tips SEO.
That's it for today. To be continued...

Letakkan Judul Posting di Depan Nama Blog untuk SEO

Agar judul posting ini lebih jelas maksudnya, silahkan lihat pada tab browser anda di atas. Judul posting ini berada di depan kemudian disusul nama blog di belakangnya. Begitu pula nantinya tampilan dalam query search engine. Apabila judul blog berada di depan, maka prioritasnya akan berbeda serta pengunjung yang sedang melakukan pencarian tidak dapat melihat judul posting secara lengkap, karena biasanya bagian belakang akan terpotong apabila baris judul panjang. Hal ini tentu tidak baik bagi SEO
Biasanya, template eksternal yang telah dikostumisasi serta disisipi hack SEO memiliki fitur ini. Namun ada pula template yang benar-benar pure dan belum di ubah sama sekali, terutama template-template official bawaan Blogger. Oleh karena itu, bagi anda yang masih memiliki baris judul yang menempatkan nama blog/website di depan judul posting, ubahlah melalui cara berikut:
1. Masuk ke dashboard > Design > Edit HTML.
2. Cari (Ctrl+F) baris tag seperti berikut ini, letaknya ada di bagian atas setelah <head> dan sebelum <b:skin> di template HTML anda:
<title><data:blog.pageTitle/></title>
Saya tunggu deh.
Oke, sudah ketemu? Sudah sama dengan yang di atas?
3. Sekarang silahkan GANTI dengan script tag berikut:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
Perhatikan tanda "~'. Itu adalah tanda yang saya pakai untuk memberi batas antara judul posting dan nama blog ini. Anda dapat menggantinya dengan tanda yang anda suka, misalnya ">>" atau "|".
4. Simpan/save template HTML. Buka salah satu artikel/posting blog anda. Lihat bagian atas browser dan perhatikan perubahan yang terjadi pada urutan judul posting dan nama blog.

Fitur Baru: Blogger Custom Favicon dan Cara Membuat-nya

Fitur Baru: Blogger Custom Favicon dan Cara Membuat-nya





Blogger baru saja memperkenalkan fitur baru "Blogger Custom Favicon" yang akhirnya memberi kemudahan baru bagi anda pengguna Blogger/Blogspot untuk membuat favicon pribadi blog. Kita tidak perlu repot-repot lagi mengupload file .ico ke hosting lain dan memasang script-nya melalui edit HTML. Cukup siapkan file ico sebagai favicon yang telah dibuat dan dipersiapkan untuk favicon blog blogger anda, dan upload melalui fitur "edit favicon".

Cara mengakses dan membuat "Blogger Custom Favicon":
Note:
Jika belum memiliki gambar favicon berformat .ico, convert terlebih dahulu file gambar (jpg/png) secara online dengan menggunakan ICO converter. Download file ico yang telah terbuat di komputer.
1. (update: fitur ini sekarang sudah dapat diakses langsung melalui dashboard Blogger)
2. Klik Design/Rancangan.
3. Di halaman page elements, di bagian atas editor akan ditemui fitur Edit favicon seperti gambar berikut, dengan default favicon bergambar logo Blogger di sebelah kiri:
4. Klik "edit" di sebelah kanan tulisan "Favicon".
5. Kemudian akan muncul pop-up window:
6. Klik Browse dan cari folder dimana anda menyimpan file .ico yang telah dipersiapkan, klik open. Tunggu sampai favicon terupload dengan hasil gambar seperti di bawah ini:
7. Setelah favicon terupload, klik save.
8. Di bagian design/page elements, favicon akan muncul menggantikan favicon berlogo Blogger:
9. Custom Favicon telah tampil di Blog anda.
10. Done!

Note:
Paling tidak butuh waktu 1 hari untuk Blogger melakukan generating favicon. Jadi, sobat akan melihat hasil tampilan favicon baru di browser setelah proses itu.

Download Gambar Header Blog Gratis Berkualitas Tinggi

Download Gambar Header Blog Gratis Berkualitas Tinggi




gambar header blog gratis
Menggunakan gambar background pada header blog tentu saja akan memberikan kekuatan dan kesempurnaan tampilan blog secara keseluruhan. Gambar header dapat memberi gambaran dan menegaskan tema yang diusung blog, merupakan bentuk personalisasi blog yang tidak dapat dilihat di blog lain, atau setidaknya dapat "meramaikan" tampilan header yang sebelumnya kosong.
Tentunya, tidak semua gambar header dapat dipakai secara serampangan. Memilih gambar background header blog yang pas, sesuai dengan paduan warna blog serta tema blog, dan berbagai macam pertimbangan lain harus dilakukan agar didapatkan tampilan blog sesuai keinginan. Bagi yang sudah ahli design grafis, membuat dan mengkostumisasi gambar sesuai keinginan bukanlah hal yang sulit, tapi, bagi yang belum pernah atau jarang bersentuhan dengan dunia desain grafis, tentunya membuat gambar header sesuai keinginan akan memakan waktu lama dan hasilnya bisa jadi kurang memuaskan.
Untuk mendapatkan gambar header blog yang paling pas, dibutuhkan koleksi pilihan yang banyak dan bervariasi, sehingga hasilnya memuaskan. Berikut adalah 4 situs penyedia gambar header blog gratis dengan pilihan yang banyak dan variatif serta berkualitas tinggi yang khusus saya pilih diantara puluhan situs lain:
header blog gratis 2
Situs yang menyediakan banyak koleksi header blog dengan berbagai macam design, tema, ukuran dan warna. Terdapat tema-tema dasar yang dapat membantu membangun konteks yang dibawa dalam blog. Setelah masuk ke situs, anda akan disambut slideshow yang menampilkan beberapa contoh gambar header berkualitas tinggi. Klik "Gallery" pada menu horizontal untuk melihat an browse seluruh koleksi.
header blog gratis 3
Hampir sama dengan themeheaders, situs ini juga memiliki beragam koleksi header blog buatan para desainer grafis yang membaginya secara gratis. Tampilan awal berupa slideshow gambar header yang sangat menarik. Kategori terdiri dari dua jenis utama, abstract dan non-abstract. Terdapat pula gambar background blog yang juga gratis. Klik "browse gallery" di bagian bawah halaman homepage untuk melihat koleksi-koleksinya.
header blog gratis 4
Sebuah blog yang menyediakan banyak koleksi header blog dengan tema warna berbeda-beda. Kategori berada di sidebar kanan sehingga anda dapat dengan mudah melakukan browsing berdasarkan kategori yang diinginkan. Ada banyak header blog yang terlihat "girly" bagi anda Blogger cewek yang ingin memberikan sentuhan warna "wanita" pada blog. Ada pula gambar background yang satu paket dengan gambar header sehingga dapat menjadi satu kesatuan tema untuk blog.
header blog gratis 5
Blog berplatform WordPress ini menawarkan banyak blog resources bagi freebies berupa gambar/graphic dan template. Salah satu design yang dibagikan scara gratis adalah 20 gambar header dengan kualitas tinggi dan tampak dibuat oleh tangan yang sangat terampil. 20 gambar tersebut terdiri dari beberapa tema dan warna. Mayoritas adalah gambar-gambar abstrak yang tampak elegan dan classy. Lihat pula koleksi-koleksi lain melalui tab "Blog Resources" dan browse pada submenu-nya (dropdown menu).
Cara download/mendapatkan gambar header blog gratis:
1. Buka halaman gambar dengan meng-klik gambar atau klik kanan dan 'open in new tab'.
2. Setelah gambar terbuka secara penuh (biasanya pada halaman baru atau pop-up window), klik 'save image as'.
Tips menyesuaikan gambar dengan tampilan blog dan mengoptimalkan performa:
1. Edit ukuran gambar sesuai ukuran bagian header blog. Luas header biasanya mengikuti outer-wrapper atau content-wrapper, cari kode CSS: #outer-wrapper atau #content-wrapper, lihat width: --px. Edit gambar dengan menambah atau mengurangi width-nya (samakan dengan width yang sudah ditemukan tadi).
2. Agar ukuran file gambar tidak terlalu berat lakukan kompresi gambar (untuk PNG, namun JPG juga bisa dengan output PNG).
3. Tips selengkapnya memasang gambar background header dengan benar, lihat: Cara Mengubah/Memasang Gambar Background Header di Blogger/Blogspot.

Cara Pasang Widget Sharing Is Caring/Sexy di Blogger

Cara Pasang Widget Sharing Is Caring/Sexy di Blogger




sharing is caring blogger widget
Share posting ke beberapa social bookmark maupun social media lain merupakan hal penting untuk promosi blog dan artikel blog. Menyediakan tool untuk pengunjung agar lebih mudah melakukan sharing membuat mereka mudah melakukannya. Salah satu bookmarking widget yang cukup menjadi favorit adalah "Sharing is caring/sexy bookmarking widget", karena tampak atraktif dan animatif sehingga dapat menjadi nilai plus juga untuk desain blog.
Widget ini banyak ditemui dan dishare oleh banyak blog. Sebagian menggunakan javascript/jquery library, yang memang tampak lebih animatif. Namun kekurangannya, waktu load yang dibutuhkan lebih lama. Sehingga bagi blog yang sudah terlalu banyak menggunakan javascript, widget ini dapat menambah beban/berat blog dan membuat waktu load lebih panjang. Untuk versi widget sharing is caring ini, saya melakukan beberapa modifikasi pada jenis button bookmark apa saja yang digunakan dan juga menggunakan CSS sprite (image sprite) garapan CSSReflex tanpa javascript/jquery.
  • Demo 1 (Sharing is caring): lihat di bawah
  • Demo 2 (Sharing is sexy): Click here

Cara Memasang Widget Sharing is Caring/Sexy di Blogger

Widget bookmark sharing blogger ini akan ditampilkan di bawah posting blog.
1. Masuk ke dashboard > template > Edit HTML
2. Centang 'Expand Widget Templates'. Jika perlu, backup template terlebih dahulu.
3. Cari </head> (Ctrl+F), letakkan kode CSS berikut tepat di atasnya.

<!--sharing-sexy-buka-rahasia.blogspot.com-starts-->
<style type='text/css'>
div.beauty-bookmarks {height:54px;background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiadEBTi-S-HK3Vlerxk3spUpVwM7LYrB3ON-l94NrOAq_DCl0_ZpSBdUZa017291O0DQzLYxPnxLjiMv-i88NGKU6F07R68m0DoqI0DhHywTDedThR-gOV0e8XfNql7Efpj2JZxPP2qLw-/s1600/buka-rahasia-sharing-background.png&#39;) no-repeat left top;position:relative;width:540px;}
div.beauty-bookmarks span.beauty-rightside {width:17px;height:54px;background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiadEBTi-S-HK3Vlerxk3spUpVwM7LYrB3ON-l94NrOAq_DCl0_ZpSBdUZa017291O0DQzLYxPnxLjiMv-i88NGKU6F07R68m0DoqI0DhHywTDedThR-gOV0e8XfNql7Efpj2JZxPP2qLw-/s1600/buka-rahasia-sharing-background.png&#39;) no-repeat right top;position:absolute;right:-17px;}
div.beauty-bookmarks ul.socials {margin:0 !important;padding:0 !important;position:absolute;bottom:0;left:10px;}
div.beauty-bookmarks ul.socials li {display:inline-block !important;float:left !important;list-style-type:none !important;margin:0 !important;height:29px !important;width:48px !important;cursor:pointer !important;padding:0 !important;}
div.beauty-bookmarks ul.socials a {display:block !important;width:48px !important;height:29px !important;font-size:0 !important;color:transparent !important;}
.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCBiRoCxeiHJViGsL6vE-MkVEKYkk_lLP5u3JsHCgrj4kdO5XaQ2tlP9u4vEqdNIgH9-kCQssxsqXcSDBxUldBad_ktvJ4dOO8KHhZE4105HkssEq5Zw5COQsndXrOBh8NFZeSGcs0zH_x/s1600/bukarahasia-sexysprite.png&#39;) no-repeat !important;}
.beauty-furl {background-position:-300px top !important;}
.beauty-furl:hover {background-position:-300px bottom !important;}
.beauty-digg {background-position:-500px top !important;}
.beauty-digg:hover {background-position:-500px bottom !important;}
.beauty-reddit {background-position:-100px top !important;}
.beauty-reddit:hover {background-position:-100px bottom !important;}
.beauty-stumble {background-position:-50px top !important;}
.beauty-stumble:hover {background-position:-50px bottom !important;}
.beauty-delicious {background-position:left top !important;}
.beauty-delicious:hover {background-position:left bottom !important;}
.beauty-yahoo {background-position:-650px top !important;}
.beauty-yahoo:hover {background-position:-650px bottom !important;}
.beauty-blinklist {background-position:-600px top !important;}
.beauty-blinklist:hover {background-position:-600px bottom !important;}
.beauty-technorati {background-position:-700px top !important;}
.beauty-technorati:hover {background-position:-700px bottom !important;}
.beauty-myspace {background-position:-200px top !important;}
.beauty-myspace:hover {background-position:-200px bottom !important;}
.beauty-twitter {background-position:-350px top !important;}
.beauty-twitter:hover {background-position:-350px bottom !important;}
.beauty-facebook {background-position:-450px top !important;}
.beauty-facebook:hover {background-position:-450px bottom !important;}
.beauty-mixx {background-position:-250px top !important;}
.beauty-mixx:hover {background-position:-250px bottom !important;}
.beauty-script-style {background-position:-400px top !important;}
.beauty-script-style:hover {background-position:-400px bottom !important;}
.beauty-designfloat {background-position:-550px top !important;}
.beauty-designfloat:hover {background-position:-550px bottom !important;}
.beauty-syndicate {background-position:-150px top !important;}
.beauty-syndicate:hover {background-position:-150px bottom !important;}
.beauty-email {background-position:-753px top !important;}
.beauty-email:hover {background-position:-753px bottom !important;}
</style>
<!--sharing-sexy-buka-rahasia.blogspot.com-ends--> 
Kostumisasi CSS:
Secara default, CSS di atas saya set untuk menampilkan quote "sharing is caring". Untuk mengubah menjadi "sharing is sexy", perhatikan pada bagian CSS background positioning di atas yang saya tandai dengan warna biru: ganti left top dengan left bottom, dan right top dengan right bottom.
4. Cari <data:post.body/> (Ctrl+F), paste kode berikut TEPAT setelah/dibawahnya:

<!--sharing-widget-buka-rahasia.blogspot.com-starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/blogspot/bukarahasia' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div></center>
</b:if>
<!--sharing-widget-buka-rahasia.blogspot.com-ends-->

Ganti http://feeds.feedburner.com/blogspot/bukarahasia dengan url feedburner blogmu.
5. Save templates.
Done, sekarang tinggal ajak pengunjung untuk memanfaatkan bookmark sharing widget tersebut.