Untuk sekedar mengingatkan kita sebagai seorang blogger, kapan kita posting atau menulis artikel diperlukan sebuah tanggal posting. Yah itu kira-kira salah satu fungsi dari menu tanggal (date) posting yang terdapat di setiap blog. Menu tanggal kita posting di setiap blog berbeda-beda, ada yang terletak di atas ada juga yang terdapat di bawah postingan. Tampilannya pun tiap blog juga berbeda-beda, tergantung template yang dipakai. Secara default menu tanggal posting di blog hanya berupa tulisan tanggal, bulan dan tahun. Agar lebih menarik kita bisa pasang icon kalender agar tanggal posting lebih kelihatan menarik.
Untuk merubah atau mengganti tanggal posting dengan icon kalender kita hanya sedikit mengganti kode HTML Jika temen-temen tertarik berikut ini langkah-langkah pembuatannya :
Langkah I :
Login ke account blogger anda.
Pilih Pengaturan --> Format
Dalam halaman Format, ganti Format Header Tanggal menjadi seperti ini mm.dd.yyyy (bulan.hari.tahun), ex: 6.02.2009.
Silakan pilih image background untuk icon kalender anda dengan mengganti kode yang berwarna hijau dengan nama file di bawah image berikut.
greencalend3.gif
yellowcalend3.gif
orangecalend3.gif
pinkcalend3.gif
ungucalend3.gif
redcalend3.gif
Kemudian lakukan copas kode di bawah ini dan letakkan di atas kode </head>.
<script type='text/javascript'> //<![CDATA[ function date_replace(date) { var da = date.split('.'); var day = da[1], mon = da[0], year = da[2]; var month = ['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep', 'Oct','Nov','Dec']; document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>"); } //]]> </script>
Catatan Penting : Apabila menggunakan cara ini, tanggal posting (date header) dalam template blog anda harus berada di atas judul posting (post title) atau posting (post).
Jika 1 atau 2 baris paragraf postingan anda ikut masuk menjorok ke dalam, maka perlu penambahan kode pada CSS .post-body. Kode tambahannya adalah padding-top:10px; (ubah nilainya sampai baris paragraf postingan anda berada di bawah icon tanggal).
Demikian tadi tutorial mengenai cara merubah tanggal posting dengan idon kalender, kode-kode HTML diatas saya dapatkan dari Bang Kendhin. Selamat mencoba dan semoga bermanfaat.
Terkadang jika kita membuat atau menulis artikel tentang tutorial blog memakai kode HTML yangterlalu panjang akan membuat pengunjung kita menjadi bosan. Untuk menyikapi hal itu, maka kita harus menyembunyikan sebagian konten postingan tersebut yaitu dengan menggunakan spoiler. Spoiler adalah tehnik untuk menyembunyikan seluruh atau sebagian isi dari Content posting, dengan tujuan untuk menghemat space halaman posting dan mengurangi lamanya waktu loading web/blog, dimana misalnya posting tanpa spoiler loading memakan waktu 45 detik, maka jika dengan Spoiler cukup dengan 30 detik bahkan bisa kurang (tergantung dari isi content).
Fungsi Spoiler adalah selain untuk menyembunyikan content berupa text dan kode juga bisa untuk sembunyikan gambar dalam ukuran besar serta video.Cara Kerja Spoiler adalah, content yang ditaruh di dalam spoiler hanya bisa dilihat seluruhnya oleh pembaca apabila tombol perintahnya diklik. Untuk membuktikannya silahkan Anda klik tombol spoiler di bawah ini:
Judul Spoiler
Tulisan teman-teman yang ingin disembunyikan bisa ditampilkan disini
Cara pasang spoiler pada postingan blog/website bukanlah hal yang sulit, karena kita tinggal memasukan isi content ke dalam kode HTML dan menaruhnya dalam content posting, sedangkan yang sulit itu adalah membuat kode-kode HTML-nya, betul khan? Adapun kode HTML yang untuk membuat spoiler pada posting blog/website adalah sebagai berikut:
Tulisan teman-teman yang ingin disembunyikan bisa ditampilkan disini
</div></div></div></div>
Keterangan:
Teks warna Biru adalah Judul Content dan boleh diganti sesuai selera Anda, namun jika tidak ingin menampilkan judul content pada spoiler, silahkan dihapus saja dan nilai margin saya kasih warna biru silahkan diganti menjadi 0 (nol);
Teks warna Merah adalah kata perintah tombol spoiler dan boleh diganti sesuai selera Anda;
Teks warna Pink adalah tempat menaruh isi content postingan Anda;
Apakah penjelasanya cukup jelas? Saya rasa cukup mudah dimengerti, jadi sampai disini tutorial membuat spoiler di blog ini. Selamat mencoba dan semoga bermanfaat.
Selamat sore temen-temen blogger, tidak terasa postingan saya kali ini adalah postingan saya yang ke-100 untuk kategori Tutorial Blog. Ngomong-omong tentang kategori, artikel kali ini berhubungan dengan kategori, yaitu cara memasang kategori tertentu dengan thumbnail atau gambar. Tips memasang kategori tertentu plus thumbnail ini baru saja saya dapat dari blognya Kang Rohman dan sudah saya praktekkan di blog saya yang lain dan berhasil. Kang Rohman memang hebat ya, bisa nulis artikel sebanyak itu, bisa bikin template lagi.
Biasanya fitur yang muncul disertai thumbnail adalah related post atau recent post dan itu tutorialnya sudah banyak banget beredar di kalangan blogger, tapi kali ini adalah fitur kategori tertentu, misalnya kalau di blog ini kategori tutorial blog, wordpress, joomla, dan lain-lain. Jika temen-temen penasaran, bisa dilihat disini. Baiklah, kita langsung saja pada langkah-langkah pembuatannya :
Login ke blogger dengan ID anda.
Klik Rancangan.
Klik tab Edit HTML.
Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
Carilah kode ]]></b:skin>, copy lalu paste kode berikut persis diatas kode ]]></b:skin>
Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman.
Klik Tambah Gadget untuk menambahkan gadget baru.
Setelah muncul jendela baru, klik tanda plus untuk HTML/JavaScript
Copy script dibawah ini, lalu paste pada kolom yang tersedia. Beri juga judul yang sesuai dengan yang anda inginkan. Namun sebelumnya anda harus mengubah tulisan yang di beri warna merah dengan nama kategori yang di inginkan.
Kode berwarna merah adalah kode yang bisa temen-temen edit, true berarti tampilkan, false berarti jangan di tampilkan, 60 adalah jumlah karakter, dan 6 adalah jumlah thumbnail yang ditampilkan Anda bisa ganti sesuai keinginan.
Terima kasih kepada Kang Rohman yang telah memberikan tutorial gratisnya, semoga Kang Rohman tambah laris manis dan terus menulis untuk blogger pemula seperti saya ini, ya Kang? Selamat mencoba dan semoga bermanfaat.
Sekarang sudah banyak template-template baru dari penyedia template blogger gratisan yang menyediakan kolom iklan (sidebar ads) bagi penggunanya. Tapi bagaimanakah jika template yang kita pakai belum tersedia? Kali ini kembali di tutorial blog, saya akan membahas mengenai cara membuat kolom iklan (sidebar ads) di blog. Bagi temen-temen para blogger yang sudah paham cara menambahkan kolom Iklan ditemplate blogspot tentu tidak asing lagi dengan trik yang satu ini. Dengan bermodalkan teknik coding kode HTML, saya mencoba terapkan di blog saya yang lain, dan ternyata berhasil. Agar lebih bermanfaat saya akan tulis didalam postingan ini, karena trik ini cukup berguna bagi Anda yang ingin memonetize website atau blognya, yaitu menjadi Publisher dari Iklan-iklan yang akan dipasang.
Dengan adanya iklan ini, maka setiap pengunjung yang datang, tentunya merasa penasaran dengan banner iklan yang sudah di buat semenarik mungkin, dan melakukan klik disana, dan bila mereka berminat, maka akan terjadi sebuah transaksi online. Sebagai tambahan, bila rekan-rekan blogger memiliki website atau blog yang sudah memiliki traffic yang cukup tinggi, ini bisa dijadikan tambahan penghasilan tentunya, karena dengan banyaknya kunjungan, maka kemungkinan mereka melakukan klik terhadap iklan yang ada, itu semakin besar. Untuk banner yang nantinya akan tampil di website atau blog kita, adalah seperti gambar dibawah ini :
Dan langkah-langkah yang harus Anda lakukan untuk membuat kolom iklan tersebut adalah sebagai berikut :
Login ke blogspot, lalu masuk ke halaman Layout/Tata letak blog Anda >> Edit Html ( jangan lupa untuk selalu melakukan backup sebelum merubah Kode HTML untuk berjaga-jaga)
Cari kode <div id='sidebar-wrapper'>kemudian copy kode dibawah ini letakkan di bawahnya
Lalu copy juga kode dibawah ini letakkan di atas kode ]]></b:skin>
#sidebar-ads { width:300px; margin-bottom:10px; float:right; background:#fff; padding:10px; } .ads-sidebar{float:left; margin:0pt; padding:0pt } #sidebar-ads ul li ul{ list-style-type:square; margin-left:1.5em; padding:0; border:0; } #sidebar-ads ul li ul li{ border:0; } #sidebar-ads .ads-sidebar ul{ background:transparent none repeat scroll 0% 50%; border:1px solid transparent; float:left; margin:0pt; padding:10px 0pt 10px 2px; width:300px; } #sidebar-ads .ads-sidebar ul li{ display:inline; list-style-type:none; margin:0pt; padding:0pt; } #sidebar-ads .ads-sidebar ul li a:hover{ border-bottom:none; list-style-type:none; } .ads-sidebar ul{margin:0px; padding:0px; } .ads-sidebar ul li a{ float:left; } .ads-sidebar img{ margin:0px 0px 5px 8px; border:1px solid #CCC; padding:2px; } .ads-sidebar img:hover{ border:1px solid #999; }
Klik save/simpan, lihat di bagian sidebar anda apakah ada perubahan.
Temen-temen bisa ganti http://kwangkxz.com/images/banneriklan.png dengan banner iklan yang diinginkan. Itu dulu tutorial hari ini, kalau ada yang mau ditanyakan silahkan isi aja kotak komentar di bawah.
0 komentar:
Posting Komentar