Terkadang jika kita mengunjungi sebuah blog atau web, kita dihadapkan pada tulisan blog yang menurut kita terlalu kecil sehingga kita susah untuk membacanya. Nah, untuk menyikapi hal itu, diperlukan sebuah fasilitas untuk memperbesar ukuran huruf tersebut, benar kan? Kali ini saya akan membahas mengenai cara membuat tombol text resizer itu. Dengan adanya tombol resizer itu, otomatis tulisan teks pada blog akan membesar atau memperkecil.
Untuk contoh soalnya, temen-temen bisa lihat disini, klik tulisan berwarna biru dengan background ungu tersebut anda akan melihat huruf yang akan semakin membesar. Nah, sudah mengerti kan? Jika anda tertarik berikut ini akan saya jelaskan langkah pembuatannya :
Login ke blogger dengan akun anda
Selanjutnya klik Rancangan >> pilih Edit html
Jangan lupa centang Expand Template Widget
Saya sarankan untuk membackup template anda dengan cara klik download template lengkap
Langkah selanjutnya copy CSS di bawah ini, lalu paste persis di atas kode ]]></b:skin>
Selanjutnya cari kode <data:post.body/> lalu letakkan kode dibawah ini diatasnya
<div class='textsizersmall' onclick='if (this.className=="textsizersmall") { this.className="textsizernorm" } else if (this.className=="textsizernorm") { this.className="textsizerbig" } else if (this.className=="textsizerbig") { this.className="textsizerbigger" } else if (this.className=="textsizerbigger") { this.className="textsizersmall" } else { this.className="textsizersnall" }'><span class='sizer'>Text Resizer: Click for Resizer</span>
<div class="clr20"/>
Kemudian letakkan kode </div> setelah kode <data:post.body/> tersebut untuk lebih lengkapnya silahkan sobat lihat contoh dibawah ini.
<div class='textsizersmall' onclick='if (this.className=="textsizersmall") { this.className="textsizernorm" } else if (this.className=="textsizernorm") { this.className="textsizerbig" } else if (this.className=="textsizerbig") { this.className="textsizerbigger" } else if (this.className=="textsizerbigger") { this.className="textsizersmall" } else { this.className="textsizersnall" }'><span class='sizer'>Text Resizer: Click for Resizer</span>
<div class="clr20"/>
<data:post.body/>
</div>
Yang terakhir Save Template anda, kemudian lihat hasilnya.
Jika temen-temen ingin tampilan hurufnya lebih besar lagi, anda bisa menggantinya dengan cara mengganti font-size diatas. Sudah dulu ya penjelasannya, waktunya tidur selamat mencoba dan semoga bermanfaat.
Satu lagi fasilitas untuk berinkteraksi dengan pengunjung anda, chatbox namanya. Sebenarnya fungsinya sama dengan buku tamu dari shoutmix tapi kali ini agak dimodifikasi sedikit sehingga tempatnya tersembunyi. Jika kita ingin menampilkan menu ini, kita harus meng-klik tombol chatbox yang ada di sebelah kiri blog . Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap di bawah. Gambar di bawah adalah contoh chatbox slide vertikal yang ada di demo blog saya, jika anda belum jelas gambar itu ada disini. Klik tombol chatbox yang ada di sebelah kiri, anda akan melihat tampilannya.
Oke, tidak pakai lama, langsung saja ke langkah-langkah pembuatannya :
Login ke Blogger dengan akun anda.
Kemudian pilih Rancangan >> Edit HTML
Seperti biasa klik Download Template Lengkap biar aman
Jangan lupa centang Expand Template Widget
Selanjutnya cari kode ]]></b:skin>, jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:
Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya
<div class="panel">
</div> <a class="trigger" href="">ChatBox</a>
Dan yang terakhir Save Template anda.
Anda bisa ganti tulisan warna kuning berkedip dengan kode shoutmix yang sudah anda buat sebelumnya. Untuk cara membuat shoutmix di blog sudah pernah saya jelaskan sebelumnya. Nah, sampai disini dulu tutorialnya ya, selamat berkreasi dan semoga bermanfaat.
Satu hal yang mungkin teman-teman kadang lupa dalam membuat sebuah blog, yaitu mengenai RSS Reader. Apa sih sebenarnya RSS Reader itu? RSS reader adalah aplikasi yang digunakan untuk membaca RSS dari sebuah website. Cara membaca RSS suatu website adalah, anda masukkan alamat feed website tersebut, lalu RSS akan mengambil RSS dari feed website tersebut. Setiap kali web tersebut di update, versi RSSnya akan disediakan oleh feed, dan akan diambil oleh RSS reader anda.
Nah, yang menjadi permasalahan sekarang adalah kenapa jumlah pembaca pada Feedburner-Count kadang terlalu sedikit. Perlu diketahui bahwa tidak semua pembaca RSS Feed selalu menggunakan alamat Feedburner untuk berlangganan posting dan komentar pada blog. Hal ini terjadi ketika pembaca melakukan akses ke alamat blog maka secara otomaris web browser akan membaca alamat default Rss Feed pada blogger kita.
Disini nanti saya akan jelaskan bagaimana cara untuk meningkatkan RSS reader kita. Tapi yang perlu anda perhatian bahwa cara ini nantinya tidak akan meningkatkan nilai Feedburner-Count secara otomatis, semua tergantung banyaknya pembaca yang berlangganan postingan kita. Artinya kita hanya mengarahkan pembaca selalu mengakses ke alamat feedburner, jadi pembaca kita tidak terbagi dengan alamat default RSS Feed blog kita. Jika temen-temen ingin tahu caranya ikuti langkah berikut ini :
Login ke Blogger dengan akun anda
Pilih Rancangan >> Edit HTML (Jangan lupa lakukan backup template)
Kemudian cari kode dibawah ini:
<b:include data='blog' name='all-head-content'/>
Jika sudah ketemu ganti kode diatas dengan code dibawah ini.
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='true' name='MSSmartTagsPreventParsing'/> <meta content='blogger' name='generator'/> <link rel="alternate" type="application/atom+xml" title="Title Blog Anda - Atom" href="Namablog.blogspot.com/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="Title Blog Anda - RSS" href="Namablog.blogspot.com/feeds/posts/default?alt=rss" /> <link rel="service.post" type="application/atom+xml" title="Title Blog Anda - Atom" href="http://www.blogger.com/feeds/IDBLOGANDA/posts/default" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www2.blogger.com/rsd.g?blogID=IDBLOGANDA" />
Ganti Tulisan berwarna diatas sesuai keterangannya
Cari kode dibawah ini :
.feed-links {
Kemudian tambahkan code dibawah ini, tepatnya dibawah kode diatas
display: none;
jadi hasilnya seperti ini:
.feed-links { display:none;
Masih pada Template -> Edit HTML -> beri tanda centang pada Expand Template Widget
Ganti tulisan yang berwarna kuning dengan url feed anda.
Kemudian Save Template anda, selesai.
Kode-kode diatas berfungsi untuk mengubah alamat link ke Feedburner, biasanya pada blogger ditandai dengan : Berlangganan: Posting (Atom) atau Subscribe to: Posts (Atom). Nah, gimana mau dicoba? Jika temen-temen sudah dicoba cara diatas tapi tetep masih minim pembaca. Ya, mesti rajin nulis artikel yang banyak.
Daftar isi sangat penting bagi keberadaaan sebuah blog atau web. Karena daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog. Setelah sebelumnya saya sudah membahas tentang cara membuat daftar isi manual dan otomatis, kali ini saya akan berikan satu lagi cara membuat daftar isi, tapi kali ini beda karena menggunakan jQuery dan hasilnya nanti akan lebih keren.
Selain itu daftar isi yang saya bahas disini juga menggunakan efek animasi accordion, hal ini dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang disusun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Nah, untuk contoh soalnya temen-temen bisa lihat gambar di bawah atau langsung klik disini.
Baiklah, saya akan langsung saja pada langkah-langkah pembuatannya :
Langkah Pertama
Login dulu ke blogger anda
Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
Setelah itu cari kode berikut ini]]></b:skin>
Kemudian copas kode dibawah ini dan taruh diatasnya
Itu tadi tutorial kali ini, jika ada di antara temen-temen yang bingung, isi saja kotak komentar yang ada di bawah. Karena komentar temen-temen semua sangat berarti bagi blog ini. Selamat mencoba dan semoga bermanfaat.
0 komentar:
Posting Komentar