21 Jul 2012

Change Text Selection ColorChange Text Selection Color

Change Text Selection Color
Jika anda mencoba untuk mengcopy text pada sebuah blog/web, maka bagian teks yang anda pilih akan berubah background dan warnanya. Dengan memanfaatkan kode css, background dan warna default text selector ini dapat dirubah sesuai selera. Anda bisa merubah warnanya saja atau sekaligus background-nya. Kode css simpan di atas kode ]]></b:skin> yang letaknya sedikit di atas tag penutup head (</head>).

17 Jul 2012

Menambah Navigasi Angka u lengkapi Newer-Older BloggerMenambah Navigasi Angka u lengkapi Newer-Older Blogger

Menambah Navigasi Angka u lengkapi Newer-Older Blogger
Membuat sebuah navigasi halaman blogger baru yang dengan mudah bisa menampilkan beberapa posting sekaligus, seperti yang ada di homepage sangat penting karena akan membuat pengunjung lebih mudah menelusuri data posting yang ada di blog. Kemampuannya untuk diatur dalam menampilkan jumlah posting juga membuat widget ini sangat menarik dan mempunyai nilai lebih. Anda bisa mengatur jumlah posting yang ditampilkan dalam jumlah yang diinginkan, sekaligus juga bisa mengatur berapa banyak angka navigasi yang akan digunakan. Menggunakan navigasi angka ini juga sangat baik untuk melengkapi navigasi blogger default yang hanya ditampilkan di halaman posting yang berfungsi untuk mengakses posting yang lebih baru dan lebih lama (newer & older post). Agar beban loading tidak terlalu berat ketika pengunjung memanfaatkan fasilitas navigasi yang baru ini, sebaiknya anda mengatur jumlah tampilan posting disetiap halaman dalam jumlah yang tidak terlalu banyak. Menggunakan readmore menjadi sebuah keharusan agar tidak semua materi posting ditampilkan secara utuh yang pada akhirnya hanya akan menjadi beban lebih bagi loading blog.

Menampilkan Label Posting di atas Post Title (Breadcrumb)Menampilkan Label Posting di atas Post Title (Breadcrumb)

Menampilkan Label Posting di atas Post Title (Breadcrumb)
Navigasi Breadcrumb adalah sebuah hiearchy label posting yang diawali dari homepage. Link homepage berada diujung paling kiri baru kemudian diikuti induk label hingga yang terakhir adalah anak terkecil label. Sebuah hal yang sementara ini masih mustahil untuk ditampilkan secara sempurna karena blogger masih belum menggunakan hiearchy label seperti halnya yang digunakan di widget arsip. Sekalipun demikian, menampilkan label posting di atas setiap judul posting (hanya di post page) tetaplah sangat berguna. Selain membuat blog menjadi lebih menarik, menampilkan label posting di atas judul posting akan lebih mempermudah pembaca untuk mengakses posting berdasar label.

D E M O

Anda bisa melihatnya di atas judul posting.

Cara membuat

  1. Login ke Blogger
  2. Dasbor (Dasboard)
  3. Template
  4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
  5. Edit HTML
  6. Template › Edit HTML
    • Procced (Lanjutkan)
    • Expand Widget Template
    • Cari Kode : <b:includable id='post' var='post'>
    • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
    • Ganti kode tersebut dengan xHTML yang tersedia di bagian bawah.
    • Simpan Template/Save Template
  7. Selesai...
  8. Buka blog halaman Posting untuk melihat hasilnya.

xHTML

<b:includable id='post' var='post'>
<div style='padding:5px 10px 5px 10px;margin: 0 0 10px 0;font-size:90%;line-height:1.2em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiObOUtoyc75QTDpT9svVftM9a86VNnx4T5kFhww9ZNvp4K9ZSHjMarJooE4j20HZ1a6u5VyIJqNEaDvmeZPYeyrQZ2U4W3WKOF_sCrCK-fTYlJ56c858fynzrBXU01lH0IXycwBfBC494N/s1600/gradient-transparent-WG.png) top left repeat-y;border-top:1px dotted #888;border-bottom:1px dotted #888;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a expr:href='data:blog.homepageUrl' rel='tag'> Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
<br/><i><data:post.title/></i>
</b:if>
</div>

Membuat 5 Elemen Baru di atas Footer BloggerMembuat 5 Elemen Baru di atas Footer Blogger

Membuat 5 Elemen Baru di atas Footer Blogger
Klik untuk memperbesar gambar!Tak ada elemen blogger yang berukuran kecil karena jumlah maksimal elemen yang telah disediakan blogger melalui pilihan yang tersedia di "Perancang Template Blogger - Tata letak hanya berjumlah 3 elemen di bagian footer. Anda bisa melihatnya melalui Dasbor - Templpate - Ubahsuaian - Tata Letak (perancang Template Blogger).
Membuat elemen baru yang lebih kecil memungkinkan kita membuat 5 atau lebih elemen dalam deret horizontal. Anda bisa menggunakan elemen baru ini untuk memuat widget/gadget baru dalam ukuran yang relatif kecil sehingga dalam satu deret horizontal akan bisa ditampilkan beberapa widget sekaligus. Ukuran yang lebih kecil seperti ini bisa dimanfaatkan untuk box adsense/iklan, misalnya, atau anda bisa manfaatkan juga sebagai box widget bagi kode2 css, javascript.

Menghilangkan Overflow pada Body (Halaman Blog)Menghilangkan Overflow pada Body (Halaman Blog)

Menghilangkan Overflow pada Body (Halaman Blog)
Meniadakan atau menghilangkan overflow body (yang terlihat di halaman blog bagian bawah) bertujuan untuk membuat blog terlihat lebih rapi sekaligus membuat seluruh bagian blog selalu terlihat tanpa perlu menarik2 scrollbar pada bagian horizontal. Ada beberapa cara untuk membuat kondisi seperti ini. Tentu saja cara yang pertama dengan memanfaatkan fitur pengaturan yang telah disediakan blogger. Cara yang lain adalah dengan menambahkan kode css di atas kode ]]></b:skin> yang letaknya sedikit di atas tag penutup head (</head>).