Membuat Mini Post atau Mini Artikel diBlogger

Sudah lama juga ya gak nulis tutorial, abis bingung mo nulis apalagi karena hampir semua tutorial blogger sudah saya bahas semua di blog ini. Nah tadi barusan ingat kalo beberapa waktu lalu banyak yang nanyain saya gimana cara menampilkan posting berbeda untuk setiap label tertentu? mungkin rekan yang sering berkunjung ke zoomtemplate.com sudah mengerti maksud saya ya, kalo belum silahkan lihat contohnya dengan mengklik link Older Posts sampai ketemu perbedaannya. Atau bisa lihat contohnya di http://tweets.o-om.com

Mini Post atau Mini Artikel ini sebenarnya cara lain menampilkan berita singkat dimana style post yang ditampilkan akan berbeda dengan posting sebenarnya. Minipost ini akan tampil sesuai dengan label atau kategori khusus..jadi untuk menampilkan setiap Mini post kita hanya cukup menentukan labelnya saja. Sebenarnya cara membuat mini post ini saya temukan dari salah satu blogger quiterandom.com silahkan dipelajari disana bila ingin lebih jelasnya :)


1. Masukan kode dibawah ini dalam deretan kode CSS


.minipost.home {background: #fff; font: normal 12px 'Arial', sans-serif; padding: 5px;border:1px solid #c0c0c0}
.minipost.home .date {color: #000; font-size: 10px; font-weight: bold; text-transform: uppercase;}
.minipost.home .body {padding: 5px 0;}
.minipost.home .meta a {color: #990000; font-size: 10px; font-weight: bold; text-transform: uppercase;}
.minipost.item {background: transparent;}
.minipost.item .date {margin:1.5em 0 .75em; font:normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:#999999;}
.minipost.item .title {margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:#cc6600;}


2. Kemudian cari kode lanjutkan lagi dengan memasukan kode warna pink yang pertama. Kalo sudah masukan lagi kode warna pink yang kedua dibawah kode

3. Langkah ke tiga cari kode berikut Kemudian sisipkan semua kode dibawah ini dibawah kode diatas

Read More |
comments

 
4. Buat satu postingan dengan label "minipost", silahkan dicoba aja dulu :)

READ MORE - Membuat Mini Post atau Mini Artikel diBlogger

Pasang Avatar Mybloglog pada kolom komentar

Sebenarnya memasang avatar Mybloglog di kolom komentar bukanlah hal yang baru, namun dari beberapa blog yang pernah saya kunjungi ternyata sedikit sekali mengaplikasikannya. Entah kenapa tutorial yang pernah dipopulerkan oleh si blogger cantik Amanda ini ternyata tidak begitu banyak peminatnya, padahal menurut saya  widget ini ternyata lebih bagus dibandingkan tutorial yang dulu pernah saya ulas disini, memang ada bedanya sih, tutorial lama yang pernah saya tulis memang tidak menggunakan pemanggilan avatar melalui widget Mybloglog, tapi langsung menggambilnya melalui Profile Blogger.

Nah, ditengah kesibukan saya saat ini dan kemaren nyempetin waktu sebentar nyobain avatar yang sudah terbilang basi ini, eh hasilnya sungguh diluar dugaan.. ternyata sampai saat ini sudah ada sekitar ratusan ribu blogger yang ngantri dan tertarik ingin juga memasangnya (waks* ketahuan bener ngibulinnya wkwkwwk). Huh..berhubung terus menerus di desak dan malah ada yang berani bayar tutorial ini dengan harga tinggi yah mau gak mau saya tulis saja langsung tutorialnya. Halah ngalur ngidul gak jelas...(biasa lagi error mode on hihihi)

Ya sudah, lupakan tulisan dodol diatas, langsung aja ya..

1. Pastikan rekan sudah terdaftar di Mybloglog

2. Kalo sudah, sekarang kembali ke Blogger, lalu tuju langsung kehalaman Edit HTML. Cari tag kemudian copy-paste saja semua script dibawah ini dan letakan diatasnya. (jangan lupa di save dulu)



3. Masih pada halaman Edit HTML, beri tanda centang pada Expand Widget Templates. Kemudian cari kode dibawah:



Sudah ketemu? kalo sudah, silahkan copas semua kode dibawah ini dan letakan kembali dibawah kode diatas.

4. Simpan dan lihat hasilnya..met nyoba aja dah :)
http://www.o-om.com

READ MORE - Pasang Avatar Mybloglog pada kolom komentar

Cara pasang Auto Read More terbaru (Part 2)

(Revisi: Solusi tanpa hosting file .JS) Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama (part 1). Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi

..

atau .. dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.

Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw  Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

Readmore

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode kemudian letakan script dibawah ini di atas kode Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:






Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah



Kalo sudah, ganti kode dengan semua kode dibawah ini

READ MORE -


  silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba..happy tutorial with o-om.com :)

READ MORE - Cara pasang Auto Read More terbaru (Part 2)