Aceh Pliek: Blog Design

Home » Semua post berkategori Blog Design

Tampilkan postingan dengan label Blog Design. Tampilkan semua postingan

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 yang saya sediakan di bawah posting-posting blog ini. Adanya kotak atau kolom permalink sangat membantu sobat dalam meningkatkan visibilitas 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; sehingga dia tidak perlu repot-repot membuat tag permalink sendiri. Jika sobat belum memiliki dan ingin membuat, silahkan ikuti tutorial menambahkan kotak permalink di bawah posting berikut.

Konsep dan Kode Kotak Permalink

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 memanfaatkan beberapa fungsi javascript sederhana. Dengan cara ini, semua isi kotak permalink tampil secara otomatis tanpa harus membuat isi secara manual dan dapat langsung digunakan.

Berikut kode-nya:

<div style='line-height:1.4em;padding: 1px; margin: 2px;background-color: #ffffff;font-size: 11px;text-align: justify'>
<span>Ganti teks ini dengan informasi mengenai permalink atau apapun di sini.</span><br />
<textarea cols='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 dengan kode warna lain sesuai dengan warna 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 dengan nilai 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 setelah melakukan kostumisasi, 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:

Ganti teks ini dengan informasi mengenai permalink atau apapun di sini.

<a href="http://buka-rahasia.blogspot.com/2012/06/membuat-kotak-permalink-posting-blog.html">Membuat Kotak Permalink di Bawah Posting Blog</a>

7. Cek hasilnya pada salah satu halaman posting dan lihat apakah dibutuhkan kostumisasi di bagian CSS seperti di atas.

Okay, itu dia langkah-langkah memasang kotak permalink di bawah posting Blogger. Semoga dulu sobat yang pernah menanyakan mengenai kotak permalink yang saya gunakan terpuaskan. And, have a nice blogging, guys!
© buka-rahasia.blogspot.com

Cara Pasang Widget Sharing Is Caring/Sexy di Blogger

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.

<style type='text/css'>
div.beauty-bookmarks {height:54px;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeyOsBO1d_Vr_elOgp2orUtlUkKtW0_OlfmWJ9fmFHrj_0ogj9-QmCl3tkTv_H_MZASooZeFz6r9LFPee7F0IaoA15d73AQmWKbUuMTneM-YH-CTvvZE_JeRXFiNe4sfpfIRUP5RPI72rM/s1600/buka-rahasia-sharing-background.png') no-repeat left top;position:relative;width:540px;}
div.beauty-bookmarks span.beauty-rightside {width:17px;height:54px;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeyOsBO1d_Vr_elOgp2orUtlUkKtW0_OlfmWJ9fmFHrj_0ogj9-QmCl3tkTv_H_MZASooZeFz6r9LFPee7F0IaoA15d73AQmWKbUuMTneM-YH-CTvvZE_JeRXFiNe4sfpfIRUP5RPI72rM/s1600/buka-rahasia-sharing-background.png') 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-_kmuDBBBtpPwt6YvKi7zGmTxBuuXfmJvZjYhzXWEPqFNACrBg87JREZe3JkrC2DwGepBdxqNELdMSkjZ1L24Cg6RtID04tbjEfgiymKMtQZZKwY2ABTkwZh0SxMAU5DSY6Q2V2Nc8pd/s1600/bukarahasia-sexysprite.png') 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>

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:

<b:if cond='data:blog.pageType == "item"'>
<center><div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + 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='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div></center>
</b:if>

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.

Credits and thanks to CSSReflex for the beautiful CSS Sprite!

3 Template Blogger dengan Desain Unik & Canggih

Posting ini agak special menurut saya, karena untuk pertama kalinya saya me-review dan share beberapa template Blogger unik, menarik, dan sangat modern dalam hal desain blog.

Banyak sekali template Blogger yang dishare secara gratis oleh para pembuatnya. Tentunya ada kekurangan dan kelebihan, tapi saat ini secara umum semua template Blogger memiliki karakteristik yg khas serta telah menggunakan CSS3 dan HTML5. Sebagian berhasil menerapkannya, sebagian lagi gagal karena berhadapan dengan masalah browser, sehingga dibutuhkan hack tambahan agar dapat ditampilkan dengan baik. Tapi adakah yang benar-benar maksimal penggunaannya sehingga menghasilkan desain yg benar-benar otentik, cantik, dan menarik? Ada!

3 Template Blogger yang saya share di bawah adalah sebagian dari template-template Blogger buatan sobat Andre 'Pandet' of urangkurai, yang ngaku "terjebak dalam dunia blogger" sehingga kalo tidur sering mimpiin kode-kode CSS, wkwkwkwk.... Peace! Template buatannya memang unik, karena memiliki desain lain dari yg lain, maksudnya ada banyak kekhasan dan bisa di bilang extraordinary banget. Dan yang jelas, CSS3, HTML5, javascript, dan Web Fonts benar-benar diimplementasikan secara maksimal.

Salah satu contohnya adalah penggunaan CSS Reset untuk menghandle dan menghindari inkonsistensi browser ketika menerjemahkan aturan-aturan CSS tertentu, misalnya line-height, margin, font-size pada judul (heading), dll. Mengapa? Karena masing-masing browser memiliki default presentasi tampilan berbeda-beda, sehingga dibutuhkan penyamaan 'persepsi' agar tampilan suatu halaman sama ketika ditampilkan oleh bermacam browser. Hal ini sangat dibutuhkan, terutama untuk struktur HTML5. Contoh lain lagi adalah pada font-font template, digunakan CSS font-face (@font-face). CSS rounded corner tampaknya menjadi menu utama untuk mengatur dan membagi tampilan excerpt (rangkuman post) di halaman-halaman utama. Yang paling menarik adalah penggunaan CSS Transform pada tampilan header lengkap bersama menu dan search form, sehingga tampilan elemen-elemen header miring beberapa derajat. Ada banyak lagi penggunaan advanced coding lain yg tidak bisa satu per satu saya uraikan di sini.

Ketiga template sebenarnya hampir sama, dibuat untuk memberikan 3 alternatif skin atau theme dengan warna yg berbeda.

Ada sedikit problem ketika Opera digunakan untuk menampilkan halaman ketiga template ini, terutama ketika ditampilkan pada monitor/layar dengan lebar di bawah 1280px, tapi saya rasa tidak begitu masalah karena Opera adalah browser yg rajin update, sehingga akan segera menyelesaikan masalah ini.

Penasaran? Segera saja tengok 'demo' dan download template-template tersebut!

Pass (kalo diminta): buka-rahasia.blogspot.com

Yup, itu dia semua Blogger templates unik dan menarik yang saya review dan share. Silahkan dicoba dan review kembali bagaimana hasil penggunaan template blog tersebut pada blog sobat.

Have a nice Blogging!

Cara Membuat Kotak Space Banner Iklan Di Blog (Updated)

Menampilkan space iklan di blog memberi peluang & informasi pada advertiser bahwa blog tersebut menawarkan space iklan yg dapat disewa. Apalagi jika blog tersebut memiliki kredibilitas, rank, serta traffic tinggi, maka advertiser/pemasang iklan pasti akan berbondong-bondong untuk memasang iklan/banner iklan di blog tersebut. Namun tidak ada salahnya juga bagi blog baru memberikan space/ruang tersendiri sebagai tempat beriklan advertiser. Hitung-hitung sebagai persiapan dan kali saja ada advertiser yg tertarik. Selain itu penggunaan space iklan dapat menjadi daya tarik tersendiri apabila diletakkan dengan benar.

Nah, guna memasang space iklan, kita butuh menyusun template tersendiri agar iklan tersusun rapi dan enak dilihat. Jadi tidak asal pasang gambar dan link karena hasilnya bisa berantakan. Kali ini saya akan share kode template iklan yg saya buat serta gunakan untuk blog buka-rahasia.blogspot.com.

Fitur dari template iklan 125x125 buka-rahasia.blogspot.com:

Fleksibel, susunan yg tampil sesuai dengan lebar widget.
Efek Border radius.
Efek Transparan/Opacity ketika gambar di-hover.
Gampang di edit guna memasang gambar iklan & link.
Update (28-01-2012, 19.03 WIB): Dengan menghilangkan width serta height, template space iklan ini sekarang bisa digunakan untuk berbagai jenis ukuran banner iklan, 125x125, 300x250, 468x60, dst. Gunakan gambar sesuai dengan ukuran yg diinginkan maka widget space iklan akan muncul sesuai dengan ukuran tersebut.

Cara Memasang Kotak Space Banner Iklan di Widget Blog:

1. Masuk ke dashboard > template/design < Edit HTML

2. Copy kode CSS berikut & letakkan di ATAS ]]></b:skin>

#bukarahasiaads {margin:0px;padding:0px;text-align:center}
#bukarahasiaads img {margin:1px 1px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;}
#bukarahasiaads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}

Ganti nilai pada margin:1px 1px untuk mengatur jarak gambar iklan. Nilai pertama jarak atas bawah, nilai kedua jarak kiri kanan.

3. Save Template.

4. Buka layout/design > Add a widget > Pilih HTML/Javascript.

5. Copy kode HTML berikut (edit terlebih dahulu untuk memasukkan link dan url gambar gambar yg ingin digunakan):

<div id="bukarahasiaads">
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title=" TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
</div>

Jika ingin menambahkan/mengurangi kotak space iklan tambahkan/hapus bagian:
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a> di atas </div>.

6. Save. Drag/geser gadget ke posisi yg diinginkan, untuk ukuran yg lebar & besar, letakkan widget di bawah header atau di atas posting. Save lagi.

Anda dapat menggunakan gambar berikut sebagai gambar space iklan (ukuran 125x125), untuk ukuran lain atau ingin yg sesuai selera & desain blog, bisa dicari di Google dengan keywords "ads space banner image (ukuran banner)". Upload gambar, ganti URL GAMBAR dengan url gambar yg sudah di-upload.

Note: Host/upload gambar sendiri. Jangan hanya gunakan url gambar di atas karena sewaktu-waktu gambar dapat hilang/dihapus. Klik kanan di atas gambar, save as ke komputer, lalu upload.

Jika seorang advertiser tertarik, maka dia tinggal mengklik url yg ada pada gambar banner (biasanya link diarahkan ke halaman pasang iklan/advertise atau ke email/contact form).
Have a nice Blogging.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Menggunakan/Memasang Custom Font di Blogger

Custom Fonts adalah, singkatnya, font-font khusus yg ditambahkan secara individual & bukan merupakan font-font default yg telah dikenal browser (database-nya tidak dimiliki browser). Custom fonts saat ini telah berjumlah ratusan, memiliki variasi yg bermacam-macam, unik, memiliki tema yg lebih khas daripada font biasa, serta dapat meningkatkan kualitas tampilan blog/web.

Tulisan di atas memberikan kesan yg berbeda; lebih stylish dibanding font default di sekelilingnya. Pada posting Cara Mengubah/Mengganti jenis font di Blogger, Buka Rahasia Blogspot telah share cara mengganti font dengan menggunakan standar. Sebagai langkah advance, Buka Rahasia Blogspot akan share cara menggunakan & mengganti font Blog dengan Custom Fonts bagi sobat blogger yg tertarik untuk membuat font di blog tampak lebih stylish. Di platform Blogger, ada dua cara yg dapat digunakan untuk menggunakan/menampilkan Custom Fonts:

1. Menggunakan fitur Blogger Web Fonts melalui Template Designer.

2. Memasukkan snippets (kode) secara langsung melalui Edit HTML (manual template editing).

Cara Menggunakan Blogger Custom/Web Fonts Melalui Template Designer

Pada akhir Desember 2010, Blogger memperkenalkan fitur Web Fonts yg dapat diakses melalui Template Designer. Saat ini setidaknya telah ada 77 Web Fonts (dan terus bertambah) yg dapat digunakan untuk kostumisasi font blog Blogger guna memperindah desain blog.

Cara mengakses fitur Web Fonts:

1. Masuk Dashboard Blogger > Template > Customize > Advanced

2. Pada halaman Template Designer, setelah memilih "Advance", sobat dapat memilih bagian mana yg hendak dikostumisasi, misalnya page, header, sidebar header, post title, dan seterusnya. Kemudian pilih Web Fonts yg hendak digunakan.

3. Setelah semua kostumisasi font selesai, klik "Apply to This Blog".

Dengan cara ini, sobat dapat memilih Web Fonts yg telah disediakan oleh Blogger serta mempreviewnya sekaligus (WYSIWYG).
Note: Pengaturan Custom web fonts melalui "template designer" belum tentu dapat diaplikasikan pada custom blogger templates (bukan template bawaan Blogger). Jadi harus menggunakan cara kedua di bawah.

Cara Memasang Custom Fonts Dengan Mengedit Template Blog

Konsep sebenarnya dari memasang custom fonts adalah memasukkan font snippets pada template & merujukkannya pada font family dalam atribut pengaturan CSS elemen blog. Dibanding Blogger Web Fonts pada Template Designer yg jumlahnya masih terbatas, variasi Web Fonts gratis yg tersedia jauh lebih banyak. Kali ini, kita akan menggunakan Web Fonts milik Google (Google Font API), yg sampai saat ini telah memiliki koleksi 397 Font Family (dan terus bertambah), karena memiliki akses yg cepat & stabil.

Tahap 1: Instalasi Font Ke Blog

1. Masuk ke Google Web Fonts

2. Klik "start choosing fonts", cari font yg diinginkan, kemudian klik "quick use".

4. Pada halaman berikutnya, lakukan kostumisasi (jika font memiliki varian), lalu scroll ke bawah hingga kolom kode. Copy code tersebut.

Contoh kode dengan tag link untuk jenis template XML seperti Blogger:

<link href="http://fonts.googleapis.com/css?family=Sail" rel="stylesheet" type="text/css"/>

Contoh kode dengan tag link untuk jenis plain HTML pada template web biasa:

<link href="http://fonts.googleapis.com/css?family=Sail" rel="stylesheet" type="text/css"></link>

5. Buka Edit Template/Edit HTML.

6. Letakkan kode tersebut dalam tag <head>, tepatnya di antara <head> & </head>, atau agar lebih cepat diload, letakkan di bawah/dekat dengan <head>. Boleh juga di atas </head>.

Tahap 2: Aplikasi Custom Font Ke Elemen Blog Melalui CSS

1.Guna mengubah tampilan font pada elemen tertentu (judul posting, nama blog, isi posting, judul sidebar, dsb), yg perlu dicari adalah class atau id CSS yg mengaturnya. Sebagai contoh jika ingin mengganti font link judul posting, maka cari class/id yg mengatur judul posting, misalnya .post h3 a.

2. Cari atribut yg mengatur font. Atribut pengatur font pada CSS biasanya ada dua yg digunakan pada template, font-family atau font saja. Jika sudah ada, cukup tambahkan nama font, setelah font-family atau font. Contoh pengaturan custom font pada font isi posting:

.post-body {font-family:'Custom Font', Times New Roman, Trebuchet, Serif; margin:......dst}

Ada dua poin penting yg mesti diperhatikan:

a. Font default diletakkan di awal serta harus dibubuhkan tanda kutip (boleh single ['] atau pun double ["]).

b. Gunakan font-font pengganti di belakang font default untuk berjaga-jaga apabila Browser gagal merender/memuat font tersebut.

Note: Jika masih kurang jelas, silahkan mempelajari CSS font pada posting Cara Mengubah/Mengganti jenis font di Blogger.

3. Setelah selesai melakukan editing pada CSS, preview terlebih dahulu. Apabila sudah beres sesuai yg diinginkan, Save Template.

Important!:

1. Jangan gunakan/pasang snippet font yg tidak dibutuhkan & jangan menggunakan custom fonts yg terlalu banyak jenisnya. Penggunaan snippet custom font (link tag) menyebabkan terjadinya proses rendering oleh browser sehingga mempengaruhi loading halaman blog (blog lebih berat, loading lebih lama).

2. Apabila Custom Font yg dibutuhkan hanya pada bagian kecil saja, misalnya text logo pada header blog, lebih baik gunakan gambar text. Buat dengan online text logo creator/generator.

Yup, demikian share saya mengenai cara memasang custom fonts di Blogger & sedikit review mengenai penggunaan web fonts pada blog. Have a Nice Blogging * Happy Designing!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Buat/Pasang Fitur Emoticon/Smiley di Comment Blogger

Emoticon/smiley dapat mewakili ekspresi komentator blog. Selain itu, emoticon/smiley dapat lebih mempercantik tampilan bagian komentar blog. Dengan menggunakan javascript, 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 emoticon senyum, digunakan perintah/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. Memasang kode HTML guna menampilkan preview 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 repeat scroll 0 0 #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;}

Jika ingin ganti warna background, ganti #EFF5FB dengan kode warna lain.

4. Cari <b:if cond='data:post.embedCommentForm'>. Biasanya ada dua tag xml seperti itu, cari & pilih yg 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'> <img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)   <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/> /:)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =;</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-|</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-(</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> :-?</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^</span> <span><img class='brbsmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar!</span> <span><a href='http://buka-rahasia.blogspot.com'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz0yIYXJuXKEZkYNzeORzEFbyKkl3FToz6Ro6Xdw_YxonH02ndQ9kfbCqPTGf7T_M4FmSAo7QOe0yHjUoNOV6GytyNBoGrYJxFLkhq_9LV7yF225EAVVB2Lx9Ar8oxjzKGocxE8xoGZq9S/s1600/smileys.gif' /></a></span></div>

6. Copy kode berikut & letakkan di 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!

Kini pengunjung n sobat dapat menggunakan emoticon/smiley di komentar blog sobat.
Have a nice Blogging.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

10 Situs Download Gambar Gratis Buat Blog/Web & Desain

Gambar di dalam posting blog memiliki arti penting. Gambar/image (photo or picture) bukan hanya sebagai penghias semata. Jika dipilih secara matang, gambar dapat menjadi ilustrasi isi posting blog, memperkuat nuansa, serta memberikan kesan dan dramatisasi atas tema yg diusung di dalam artikel. Selain itu, gambar juga dibutuhkan bagi halaman web/blog sebagai petunjuk/indikator navigasi, background, header, dan masih banyak lagi. Oleh karenanya, gambar tidak bisa disepelekan begitu saja oleh blogger.

Memproduksi gambar sendiri sesuai keinginan bagi kebanyakan blogger bukanlah hal mudah. Apalagi bagi blogger yg tidak menekuni bidang desain grafis atau memiliki stock gambar pribadi yg banyak. Solusinya adalah dengan mencari gambar melalui internet. Tapi tahukah bahwa tidak semua gambar dapat secara bebas dipakai? Ada beberapa kasus yg menyebutkan penuntutan/pelanggaran hak cipta atas blog yg memuat gambar tanpa credit atau seijin pemilik asli. Tentu ini bukan hal yg kita kehendaki. Sebagian besar blogger memang lebih sering mencari gambar melalui Google Image Search yg lebih praktis sesuai dengan keyword yg diinginkan. Tapi hal ini berbahaya.

Posting ini sekaligus juga menjadi tanggapan saya dalam komentar di posting pencurian konten yg menyatakan bahwa gambar yg saya gunakan dipertanyakan. Sebenarnya tidak demikian. Saya selalu menggunakan gambar-gambar free license, bahkan gambar-gambar tersebut juga memiliki lisensi gratis untuk diedit ulang bagi keperluan desain blog/web, komersil, dan desain grafis. Apakah benar ada situs download gambar gratis demikian? Ada banyak! Ratusan! Kualitas gambar-gambarnya pun tidak perlu dipertanyakan lagi. Very high quality images for free! Mulai dari photo, vector, ordinary images, icons, sampai very artistic images are ready for free use, sodara-sodara! Dengan menggunakan gambar-gambar demikian, kualitas posting dan originalitasnya pun semakin tinggi. So, lebih baik hentikan pencarian gambar dari Google; gunakan/download gambar sebebas-bebasnya dari situs-situs berikut (short url digunakan semata-mata untuk menghindari link juice):

1. Photobucket

Situs hosting dan penyedia gambar terbesar. Ratusan foto/gambar berkualitas diupload setiap detiknya. Untuk memudahkan pencarian gambar sesuai tema, Photobucket menyediakan fitur search yg punya akurasi tinggi. Jika ingin melakukan hosting sekaligus, buat akun gratis. Bahkan foto yg diupload pun bisa dibuat private, sehingga tidak muncul di pencarian. Tempat favorit saya untuk berburu gambar bertema apapun!

2. IconArchive

Ratusan ribu icon web/blog atau komputer siap digunakan untuk memperindah blog. Icon set dapat memperkuat themes/templates blog karena memiliki keselarasan desain dan warna. Iconarchive juga menghosting gmabar-gambar icon tersebut. Jadi jika malas download dan upload lagi, langsung saja gunakan diret url gambarnya!

3. EveryStockPhoto

Foto-foto berkualitas dan beresolusi tinggi serta memiliki kekuatan artistik disediakan oleh situs ini. Salah satu situs favorit saya untuk mendapatkan gambar sebagai penguat tema artikel. Fngsi search nya dapat digunakan untuk mencari gambar lintas situs penyedia gambar gratis.

4. stock.xhcng

Situs pecinta foto dengan komunitas besar. Menyediakan banyak foto artistik yg siap dipakai untuk background maupun ilustrasi artikel. Situs ini kini di-handle penuh oleh Getty Images, sebuah perusahaan besar yg me-manage banyak situs image/gambar berkualitas.

5. Flickr

Situs gambar gratis milik Yahoo! yg menjadi favorit para blogger dan interneter untuk mencari gambar-gambar gratis berkualitas tinggi. Sebagian memiliki lisensi. khusus. Namun cukup banyak gambar yg dapat dipakai secara bebas tanpa batasan.

6. MorgueFile

Ribuan foto yg dapat digunakan sebagai inspirasi dan referensi desain grafis. Dapat digunakan secara bebas untuk keperluan desain, baik yg pribadi maumpun komersial.

7. FreePixels

Freepixels menawarkan banyak foto beresolusi tinggi baik untuk keperluan personal maupun bisnis (komersial). Memiliki kategori yg sangat banyak untuk memudahkan naviugasi serta terdapat fungsi search untuk langsung mencari foto dengan tema tertentu.

8. Dreamstime

Situs penyedia foto/gambar gratis dengan koleksi yg sangat banyak; sekitar 9 juta gambar/foto siap didownload dan digunakan. Terdapat dua jenis foto sebenarnya, yg gratis dan dijual. Url di atas langsung saya arahkan untuk gambar gratis.

9. DeviantArt

Salah satu situs besar favorit saya. Situs ini adalah tempat berkumpul para artis desain grafis dan fotografer untuk bertukar ide dan gambar karya mereka. Gambar/foto yg menjadi koleksi luar biasa besar jumlah, kualitas, resolusi, serta nilai artistiknya. Download gambar tanpa perlu registratis terlebih dahulu. Link di atas langsung saya arahkan ke bagian resources stock image.

10. Picfndr

Yg terakhir ini sebenarnya buka(n) situs penyedia image gratis. Namun situs untuk mencari gambar gratis yg bebas license, baik untuk keperluan pribadi atau komersil. So, ga perlu lagi Google Image Search yg riskan itu! Pencarian dilakukan berdasarkan setting tertentu; terdapat menu setting di sebelah kiri untuk mendapatkan akurasi pencarian, baik setting keyword, jenis lisensi, pembatasan untuk gambar yg butuh atribusi (credits) atau tidak, dll. Gambar-gambar yg dimunculkan di hasil pencarian berasal dari ratusan situs penyedia gambar gratis yg terjamin lisensi gratisnya. Situs ini yg paling sering saya gunakan untuk mencari gambar ilustrasi posting.

Masih ada banyak lagi situs-situs semacam di atas. Sebagian lain memiliki koleksi yg tidak begitu banyak meskipun tidak kalah kualitas gambarnya. Dalam kesempatan lain, bila memungkinkan, akan ditambah situs-situs lain untuk memperkaya resource kita untuk mendapatkan gambar gratis berkualitas tinggi bagi blog/web, desain, maupun kepentingan lain.

Cara Hapus Google Search Image Frame (Frame Breaker)

Google search image frame? Ya, tampilan gambar yg terindeks Google biasanya ditampilkan di lapisan/bagian atas sebuah halaman blog/web. Gambar yg ditampilkan dibalut dalam tampilan kerangka (frame) Google yg berisi beberapa informasi mengenai gambar dan sama sekali tidak berkaitan dengan isi halaman blog/web yg memuat gambar tersebut. Bisa jadi hal ini cukup mengganggu karena blog/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-blog yg demikian, tentunya gambar yg ditampilkan dalam iframe google sama sekali tidak seperti 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 juga mendukung struktur frame. Demikian halnya di kebanyakan blog seperti 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 memuat gambar 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 dengan keyword apa yg sering muncul 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.

Konsep dan Kode Kotak Permalink

Cara Memasang Kotak Permalink di Bawah Posting Blog

Cara Memasang Widget Sharing is Caring/Sexy di Blogger

X6 Yellow Blogger Template

X7 Blue Black Blogger Template

X8 White Blogger Template