Walaupun sudah banyak diulas oleh blogger-blogger lain, tidak apalah kalau tutorial ini saya tulis lagi. Yah, daripada hari ini nggak posting, soalnya lagi banyak kerjaan. Nah, tutorial yang saya maksud diatas adalah cara menghilangkan tampilan entri lawas atau orang Inggris bilang Show Older Post. Tampilan entri lawas atau Show Older Post akan muncul apabila Anda mengklik link dari label atau kategori yang terdapat di blogger. Gambar di bawah adalah contoh dari show older post, jika kurang jelas anda klik salah satu label yang terdapat di navigasi menu blog ini.
Untuk menghilangkan agar tulisan itu tidak muncul lagi, berikut ini saya akan berikan caranya :
Temen-temen bosan dengan tampilan huruf standar pada template yang dipakai? Nah, setelah sebelumnya saya menulis tentang cara memperbesar atau memperkecil huruf di blog, kini saya akan berikan satu lagi tutorial yang masih ada hubungannya dengan huruf, yaitu memasang change font di blog. Fungsi dari menu ini adalah untuk mengganti tampilan huruf yang ada di blog kita. Misalnya jika huruf yang kita pakai adalah Arial dengan memasang widget ini pengunjung dapat merubahnya dengan pilihan huruf yang ada di widget tersebut.
Untuk membuatnya sangat gampang, kita tidak perlu edit HTML, tinggal menambahkan kode javascript ini ke dalam widget. Oke, langsung saja pada cara-cara pembuatannya :
Pertama yang mesti dilakukan adalah login ke blogger.
Kemudian menuju Rancangan >> Tambah Gadget
Pilih HTML/Java Script
Lalu masukkan kode berikut ini ke dalam widget anda
<div class='widget-content'> <center><script> function go1(){ if (document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value != "none") { document.getElementById('main').style.fontSize =document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value } }
function go2(){ if (document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value != "none") { document.getElementById('main').style.fontFamily =document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value } } </script> <form id="forma" name="selecter2" method="POST">
<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1"> <option value="Times New Roman" />Times New Roman <option value="Arial" />Arial <option selected value="Book Antiqua" />Book Antiqua <option value="Bookman Old Style" />Bookman Old Style <option value="Century Gothic" />Century Gothic <option value="Comic Sans Ms" />Comic Sans Ms <option value="Tahoma" />Tahoma
Saya yakin temen-temen tidak ada yang kesulitan dalam membuatnya. Jika ada di antara temen-temen yang mempunyai cara yang lebih baru saya siap berbagi ilmu dengan anda. Selamat mencoba dan semoga bermanfaat.
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
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH31QUX5_LNrhb_9XZP8dZtSWL2nO9uH_Yh69S_O7UCRj8s0GG_0YF11zGHvwYsDctQ_BPWJNWVtf6IBNxgUCrgWGSmihiBKuqItv20kj_j9rimzkYzXfNR0XWso61vMQZdJtvc5gDrpY/d/bg5.gif) repeat-y scroll left center #E7F7FB;
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.
Seperti temen-temen ketahui, banyak sekali cara untuk memodifikasi gambar yang terdapat di dalam postingan kita agar lebih kelihatan menarik. Setelah sebelumnya saya menulis tentang membuat efek blur pada gambar, kali ini saya akan berikan satu lagi tips modifikasi gambar di postingan, yaitu membuat efek image zoom. Cara kerja dari efek image zoom ini adalah ketika seorang pengunjung melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.
Untuk lebih jelasnya anda bisa lihat disini, klik salah satu gambar yang ada disitu, maka gambar tersebut akan membesar. Nah, jika temen-temen tertarik di bawah ini akan saya berikan langkah-langkah pembuatannya :
Login dulu ke blogger anda
Kemudian klik Rancangan
Setelah itu klik Edit HTML
Lalu anda cari kode berikut ]]></b:skin>
Setelah ketemu masukkan kode CSS dibawah ini sebelum kode diatas
Catatan : Sekedar catatan, sebaiknya anda simpan kode HTML imagezoom pada file penyimpanan anda sendiri agar script ini bisa berjalan dengan baik. Berhubung kemarin ada teman yang nyoba ternyata nggak bisa jalan scriptnya. Download scriptnya. Untuk mengetahui bagaimana cara menyimpan file di penyimpanan online (google code) silahkan baca.
Setelah semua proses diatas sudah anda lakukan dengan benar, sekarang coba klik salah satu gambar di dalam postingan, pasti gambarnya akan membesar. Nah, itu tadi tutorial membuat efek zoom pada gambar dengan sentuhan jQuery. Selamat mencoba dan semoga bermanfaat.
