Tutorial & Make Over Blog

1. Panduan Membuat Blog

Panduan membuat Blog di Blogspot Mungkin ada diantara anda-anda yang belum tahu tentang blog dan bertanya-tanya tentang blog, maka saya akan mengulas sedikit tentang blog menurut versi saya sendiri. 1. Apa itu Blog ? Blog ( singkatan dari Web log) adalah situs yang sifatnya lebih pribadi, yaitu lebih berat kepada penggambaran dari si pembuat blog itu sendiri. Blog dibuat oleh para desainer penyedia blog agar bekerja secara otomatis dan mudah untuk dioperasikan , jadi bagi kita-kita yang masih bingung dengan bahasa pemrograman untuk membuat sebuah website tidak jadi persoalan. Apabila anda sudah bisa membuat sebuah account email di internet, maka dalam membuat blog pun saya yakin anda bisa. 2. Cara membuat blog Seperti halnya e-mail, dalam membuat blog pun kita harus mempunyai sebuah account terlebih dahulu, oleh karena itu silahkan daftarkan diri anda terlebih dahulu di free blog provider (penyedia hosting/domain blog gratis). Free blog provider sangatlah banyak terdapat di internet dan beberapa yang populer saat ini adalah http://www.blogger.com, http://www.wordpress.com serta http://blogsome.com. Dalam kesempatan kali ini saya akan mengulas tentang cara pembuatan blog di http://www.blogger.com. Silahkan anda klik gambar dibawah untuk mendaftar.
Setelah anda berada pada situs blogger.com, anda akan melihat gambar seperti gambar di atas. Silahkan lakukan langkah-langkah berikut ini :

1. Klik tanda anak panah yang bertuliskan " CIPTAKAN BLOG ANDA "
2. Isilah Alamat Email dengan alamat email anda (tentunya yang valid)
3. Isikan kembali alamat email anda tadi pada form Ketik ulang alamat email
4. Tuliskan password yang anda inginkan pada form Masukkan sebuah password
5. Isikan kembali password anda tadi pada form Ketik ulang sandi (password)
6. Isi Nama Tampilan dengan nama yang ingin anda tampilkan
7. Tulis tulisan yang tertera pada form Verifikasi Kata. Beri tanda tik/cek pada kotak di pinggir tulisan Saya menerima Persyaratan dan Layanan.
8. Klik gambar anak panah yang bertuliskan "LANJUTKAN"
9. Tuliskan judul blog yang anda inginkan (nanti bisa di rubah lagi) pada form Judul Blog
10. Tulis nama situs anda pada form Alamat Blog (URL)
11. Tulislah tulisan verifikasi yang ditampilkan pada form Verifikasi kata, jika sudah selesai klik gambar panah yang bertuliskan "LANJUTKAN".
12. Pilihlah gambar (template) yang anda inginkan (nanti bisa di rubah lagi), kemudian klik gambar anak panah yang bertuliskan "LANJUTKAN"
13. Setelah keluar tulisan "Blog Anda telah diciptakan". Klik gambar panah bertuliskan "MULAI POSTING". Silahkan anda tuliskan semau anda, jika sudah selesai klik tombol "MEMPUBLISKAN POSTING".

3. Isi ( Content ) blog Bagi para pemula, biasanya mereka bingung setelah daftar membuat blog apa yang harus di isi ( diposting) dalam sebuah blog. Isi ( content ) dari sebuah blog tentu saja terserah kepadasi pemilik blog itu sendiri, apakah mau di isi puisi, perjalan hidup, teknik, ataupun apa saja. Nah di sini saya menyarankan, isilah blog anda tersebut dengan minat ataupun hoby serta keahlian anda sendiri, karena tentu saja di luar sana banyak sekali orang yang tentunya sama minat dan hoby nya dengan anda, sehingga mereka akan tertarik untuk membaca tulisan-tulisan anda

2. Cara Setting Blog

Cara Setting Blog Bagi para sobat yang baru membuat blog, ada beberapa settingan / pengaturan yang harus di lakukan agar blog kita bisa di kenali mesin pencari semisal Google,yahoo, Msn serta teman-temannya yang lain. Bila belum tahu apa yang harus di setting, silahkan ikuti langkah-langkahnya :

1. Silahkan sobat Login ke blogger.com dengan user name dan password milik sobat
2. Klik judul blog yang mau di setting ( jika sobat sudah mempunyai beberapa blog)
3. Klik Pengaturan, trus klik Dasar. Beberapa form yang harus di isi pada menu Dasar : • Judul ⇒ isi dengan judul blog sobat. Contoh : Blogspot Tutorial • Uraian ⇒ isi dengan deskripsi blog sobat. Contoh : disini kita akan berbagi pengalaman dan pengetahuan seputar Blog • Tambahkan blog Anda ke daftar kami? ⇒ pilih ya agar setiap posting kita selalu masuk di daftar Blogger.com. • Biarkan mesin pencari menemukan blog Anda? ⇒ pilih ya • Tampilkan Editing Cepat di Blog Anda? ⇒ pilih Ya • Tampilkan Link Posting Email? ⇒ Sebaiknya pilih ya, tapi pilih tidak juga tidak apa-apa • Konten Dewasa? ⇒ Pilih tidak. Kalau pilih ya berarti blog anda di anggap blog untuk dewasa (semacam blog porno) • Tampilkan Mode Compose untuk semua blog Anda? ⇒ pilih Ya • Aktifkan transliterasi? ⇒ pilih Tidak, jika anda ingin ada button untuk mengubah biasa ke hurup hindi (India), pilih ya jika sebaliknya) • Klik tombol Simpan Pengaturan . Selesai
4. Klik Publikasi untuk mengatur menu Publikasi : • Alamat Blog*Spot ⇒ isi dengan nama blog sobat. Contoh : kolom-tutorial. Biasanya alamat yang tercantum adalah langsung alamat blog anda, jadi jangan di ubah aja. • Klik tombolSimpan pengaturan. Selesai
5. Klik Format untuk mengatur menu format : • Tampilkan ⇒ pilih angka posting yang ingin anda tampilkan. Missal : Tampilkan : 6 posting, berarti posting yang akan tampil di halaman blog sobat adalah sebanyak enam posting. Pilih posting (jangan hari) pada menu pulldown. • Format Header Tanggal ⇒ pilih model tanggal/bulan yang anda sukai, Format tanggal/bulan ini akan selalu muncul diatas postingan kita. • Format tanggal Index Arsip ⇒ pilih model untuk peng-arsip-an yang anda sukai. • Format Timestamp ⇒ Pilih bentuk waktu yang anda sukai. • Zona Waktu ⇒ Pilih zona waktu yang sesuai. Contoh untuk WIB : [UTC-+7.00]Asia/Jakarta. • Bahasa ⇒ Pilih bahasa yang di inginkan. • Tampilkan Field judul ⇒ Pilih ya atau tidakpun tidak apa-apa • Tampilkan kolom link ⇒ pilih ya, tapi seandainya pilih tidak juga tidak apa-apa. • Aktifkan perataan float ⇒ pilih ya, tapi seandainya mau pilih tidak juga tidak apa-apa • Klik tombol Simpan Pengaturan. Selesai
6. Klik Komentar Untuk mengatur menu komentar : • Komentar ⇒ pilih tampilkan, ini agar artikel anda dapat di komentari oleh pengunjung • Siapa yang Bisa Berkomentar ? ⇒ Pilih Siapa pun - termasuk Pengguna Anonim. Ini di maksudkan agar setiap orang bisa berkomentar tidak terbatas kepada anggota blogspot saja. • Default Komentar untuk Posting ⇒ pilih Posting baru memiliki komentar. • Link balik ⇒ Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada yang memasang link pada artikel kita. • Default Link Balik untuk Posting ⇒ pilih Posting baru Memiliki Link Balik. • Format Timestamp Komentar ⇒ pilih format jam yg singkat. Contoh: 8.00 PM. • Tampilkan komentar dalam sebuah window popup? ⇒ pilih Ya. Supaya ketika di klik oleh pengunjung, halaman blog anda tidak menghilang/tertimpa halaman komntar. • Aktifkan moderasi komentar? ⇒ pilih Tidak (sebaiknya). • Tampilkan verifikasi kata untuk komentar? ⇒ pilih Ya. ini di maksudkan agar terhindar dari software robot dengan tujuan melakukan spam. • Tampilkan gambar profil dalam komentar? ⇒ pilih ya. Supaya gambar komentator yg punya id blogger, dapat menampilkan fotonya. • Email Pemberitahuan Komentar ⇒ isi dg alamat email anda, ini di maksudkan agar setiap ada yang berkomentar pada artikel anda, anda dapat kiriman email dari blogger.com sebagai pemberitahuan. • Klik tombol Simpan Pengaturan. Selesai
7. Klik Arsipkan Untuk mengatur menu Arsipkan : • Frekuensi Arsip ⇒ pilih Bulanan. • Aktifkan Halaman Posting? ⇒ pilih ya. • Klik tombol Simpan Pengaturan . Selesai.
8. Klik Fedd Situs untuk mengatur menu feed situs : • Izinkan Feed Blog ⇒ pilih Penuh. • Posting URL Pengubahan Arah Feed ⇒ di isi dengan alamat feed pengganti semisal alamat feed dari feed burner, jika belum punya, di kosongkan saja. • Footer Feed Posting ⇒ Silahkan di isi dengan kode iklan yang anda punya, misal kode iklan dari Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja. • Klik tombol Simpan Perubahan. Selesai.
   

3. Memilih Template

Memilih Template Bagi sobat yang sudah melakukan beberapa setting-an seperti posting terdahulu, langkah selanjutnya yang perlu sobat lakukan adalah memilih template. Sekilas tentang template Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang sobat lihat sekarang, seperti banner diatas, background warna putih, kolom-kolom di samping kanan, serta semua yang sobat lihat sekarang adalah salah satu bentuk dari desain template. Memilih template yang cantik sangatlah perlu, karena dengan tampilan template yang menarik untuk di lihat maka akan membuat para pengunjung dari blog kita menjadi betah untuk berlama-lama berada di blog kita selain tentunya isi dari blog kita juga sangat menunjang. Hmmm.. kayanya cukup deh pembahasan tentang apa itu template, keburu bosan kalau lama-lama….Sekarang langsung aja ke topik utama, yaitu langkah-langkah pemilihan template di blogger.com :
• Silahkan sobat login terlebih dahulu seperti biasa dengan memakai user name milik anda ( jangan milik saya….emang nya sampeyan mau jadi hacker ya • Klik "Tata Letak" (bila sobat menggunakan blogger baru) atau klik "Template" (bila sobat menggunakan template classic). • Klik "Pick New Template", silahkan sobat pilih template yang sobat suka. Sebelum memutuskan dalam memilih "template" ini, sebaiknya anda lihat terlebih dahulu satu persatu contoh layout yang di sediakan dengan cara meng klik tulisan "preview template". Jika di rasa sudah menemukan yang paling sobat sukai, silahkan klik tulisan "Save template" yang ada di sebelah kanan atas, selesai.

4.Mengatur Huruf dan Warna

Mengatur Huruf dan Warna Untuk para blogger baru, sobat akan menikmati fasilitas baru dari blogger.com, yaitu sobat bisa mengatur jenis font (huruf) serta warna font dengan sangat mudah. Di bawah adalah langkah untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan untuk blogger yang memakai template klasik, menu ini tidak disediakan). Klik menu "Fonts and Colors", maka akan muncul beberapa pengaturan : (ini khusus untuk template "minima")

1. Page Background color --> pengaturan warna background blog. Silahkan klik warna yang ada di sebelah kanan yang di sukai
2. Text Color --> pengaturan warna hurup dari posting-an
3. Link Color --> pengaturan warna hurup yang di link
4. Blog Title Color --> pengaturan warna hurup judul Blog
5. Blog Description Color --> pengaturan warna hurup deskripsi blog
6. Post Title Color --> pengaturan warna hurup judul posting-an
7. Border Color --> pengaturan warna kotak yang mengelilingi judul blog, serta garis pemisah
8. Sidebar Title Color --> pengaturan warna hurup judul yang anda di sidebar (kolom samping)
9. Sidebar Title Color --> pengaturan warna hurup yang ada di sidebar(kolom samping)
10. Visited link Color --> pengaturan warna hurup link ketika pengunjung mengarahkannya ke tulisan yang mengandung link
11. Text Font --> pengaturan jenis hurup,berlaku untuk hurup hasil dari posting-an ataupun hurup yang ada di sidebar
12. Sidebar Title Font --> pengaturan jenis hurup untuk judul yang ada di sidebar serta tanggal postingan
13. Blog Title Font --> pengaturan jenis hurup Judul blog
14. Blog Description Font --> Pengaturan jenis hurup dekripsi blog
15. Post Footer Font --> pengaturan jenis hurup footer (contoh : posted by )
16. Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai    

5.Cara Memposting Artikel

Bagi anda yang mengalami sedikit kendala tentang tata cara memposting suatu artikel kedalam blog, maka kali ini akan di bahas tentang tata cara posting di blogger.com. Di dalam menu posting ada beberapa toolbar yang bisa anda gunakan.Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung. Toolbar yang ada ketika posting : --> Untuk merubah jenis huruf yang di gunakan
--> Untuk merubah ukuran huruf (heading)
--> Untuk Menebalkan huruf
--> Untuk memiringkan huruf
--> Untuk merubah warna huruf
--> Untuk membuat link
--> Untuk membuat artikel menjadi rata kiri
--> Untuk membuat tulisan menjadi di tengah
--> Untuk membuat artikel menjadi rata kanan
--> Untuk membuat artikel menjadi rata kiri dan rata kanan
--> Untuk membuat sub bahasan oleh angka
--> Untuk membuat sub bahasan oleh bullet
--> Untuk mengecek spelling
--> Untuk memasukkan gambar(upload gambar)
--> Untuk membuat artikel dalam kode HTML
--> Untuk membuat artikel dalam mode Compose (biasa)
--> Untuk me review (melihat) artikel
Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang akan di edit, kemudian tekan tombol toolbar yang di inginkan. Langkah-langkah dalam memposting suatu artikel:

1. Sebaiknya klik terlebih dahulu “ Edit HTML”,jika langsung di mode “Compose”, sering terjadi hang pada komputer (pengalaman saya pribadi). Copy artikel yang telah anda buat sebelumnya, kemudian paste di area posting. Edit sesuai dengan kemauan anda.
2. Klik tombol “ compose “ untuk melakukan editing (jika anda masih bingung dengan kode HTML).
3. Klik tombol tool yang berlambang “ panorama” berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi posting-an anda.
4. Klik tombol “ Preview “ untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.
5. Klik tombol “ publish “. Selesai. Tulisan hasil karya anda akan bisa dilihat dan di baca oleh seluruh dunia.

6.Mengganti Header Pada Blogspot

Buat para blogger yang belum tahu cara mengganti Header pada blogspot, silakan ikuti tutorial berikut ini:

1. Login ke blogger.com.
2. Pada halaman dashboard, klik tab Layout (Tata Letak).

3. Pada halaman Tata Letak, pilih edit pada elemen header (bagian yang ada judul blog anda).
4. Akan tampil jendela Mengkonfigurasi Header. Lalu klik pilih berkas dari komputer anda, pilihlah file image header yang telah anda siapkan. Lebih jelasnya lihat gambar di bawah ini:
   Untuk pilihan dari web digunakan apabila kamu telah menyimpan file image header pada file hosting seperti photobucket, google picassa, dsb. kamu tinggal memasukkan alamat url tempat menyimpan image kamu.
   Pada placement (penempatan) terdapat pilihan "Instead of title and description" (selain judul dan keterangan), agar image kamu nanti akan menutupi Title dan Description Blog Kamu, sedangkan "Behind title and description" (di balik judul dan keterangan) Title dan Description Blog Kamu akan tetap nampak, dan jangan lupa centang cek box "Shrink to fit" (susutkan agar sesuai), ini akan menyusutkan gambar kamu sesuai dengan ukuran header. (Catatan: pada contoh kali ini file header Harry Potter telah dibuat dengan ukuran yang sesuai dengan elemen header yaitu 950 x 330 pixel, jadi tidak usah mencentang box Shrink to fit)
   
5. Terakhir, klik Save dan lihat hasil pekerjaan kamu.

7. Membuat Read More untuk Template Klasik

Update : Tutorial ini khusus bagi anda yang masih menggunakan template klasik, jika anda sudah menggunakan template baru (xml/beta), silahkan baca petunjuk membuat read more di sini! Wah judul yang aneh, "membuat Read More" maksudnya apa? Begini sobat, sebenarnya saya kurang setuju dengan judul tersebut, tadinya saya ingin memberi judul "Membuat menu Selengkapnya", tapi berhubung kata "Read More" yang paling di kenal di jagad blog, ya saya pun ikut-ikutan (dasar tukang ngekor). Ya sudahlah kepanjangan ngobrolnya. Kita mulai pembahasannya. Bagi para sobat yang baru mulai membuat blog, mungkin belum mengetahui informasi ini dan mudah-mudahan dengan membaca artikel ini dapat menambah pengetahuan kita tentang yang namanya nge-blog. Sobat mungkin melihat bahwa artikel-artikel saya terlihat hanya berupa judul-judul dengan satu atau dua buah paragrap saja, dan untuk melihat keseluruhan artikel harus meng klik link yang bertuliskan >> Selengkapnya...", ini di sebut pengkaburan atau pengkamuflasean postingan (ribet banget nyebutnya). Bagi sobat yang baru posting artikel hanya satu atau dua artikel saja mungkin menganggap tidak perlu menyingkat artikel sobat, namun jika nanti artikel sobat sudah banyak, maka mungkin saja ada terbersit ingin membuat menu ini. Oke... kelamaan ngawurnya, mending langsung saja. Untuk membuat menu Read more kita harus menambahkan beberapa kode HTML ke dalam template blog kita. Tapi untuk postingan kali ini, saya khususkan untuk blogger yang memakai template klasik saja, untuk yang memakai template baru silahkan tunggu pada postingan yang akan datang. Silahkan ikuti langkah-langkah berikut :

1. Login ke blogger.com dengan id sobat
2. Klik menu bertuliskan Template
3. Klik menu Edit HTML
4. jangan lupa Copy seluruh kode template milik sobat lalu paste pada notepad dan kemudian simpan, untuk membuat back up data. Ini dimaksudkan apabila terjadi kesalahan dalam template setelah kita otak-atik, kita masih punya cadangan data untuk mengembalikannya.
5. Copy kode HTML di bawah, kemudian paste persis di atas kode </style> :
<MainOrArchivePage> div.fullpost {display:none;} </MainOrArchivePage> <ItemPage> div.fullpost {display:inline;} </ItemPage> Untuk mempercepat pencarian kode </style>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis </style> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
6. Langkah selanjutnya adalah, silahkan copy kode berikut lalu paste setelah kode <$BlogItemBody$>: <MainOrArchivePage> <a href="<$BlogItemPermalinkURL$>">Read more!</a> </MainOrArchivePage> Lagi-lagi Untuk mempercepat pencarian kode <$BlogItemBody$>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis <$BlogItemBody$> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
7. Klik tombol yang bertuliskan SAVE SETTINGS
8. Langkah selanjutnya adalah klik menu Setting
9. Klik menu Formatting
10. Dibagian bawah menu tersebut ada kotak di samping tulisan Post Template, nah isi kotak kosong tersebut dengan kode di bawah ini : <div class="fullpost"> </div> Sebenarnya langkah diatas tidak wajib dilakukan,akan tetapi ini di maksudkan agar ketika kita mau posting artikel, kode tersebut akan muncul secara otomatis tanpa harus di tulis dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode tersebut.
11. Kemudian jangan lupa klik tombol Save Settings.
12. Selesai

Cara Posting Artikel Oke, sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting suatu artikel agar ada menu Readmore nya.

1. Klik menu Posting
2. klik menu Edit HTML, nah di sana secara otomatis akan tampak kode yang kita simpan tadi, yakni : <div class="fullpost"> </div> simpan artikel sobat yang ingin di tampilkan sebelum kode <div class="fullpost">, kemudian simpan sisa keseluruhan artikel setelah kode <div class="fullpost"> dan sebelum kode </div> Agar lebih jelas, saya beri contoh, misal artikelnya begini : Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul. <div class="fullpost"> dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengunjung meng klik link yang bertuliskan Read more. </div> Hasilnya yang akan tampak pada blog kita adalah seperti ini : Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul. Read more!

Bagaimana sobat, sudah jelaskan. bila belum jelas silahkan di tanyakan kembali pada komentar. Sedikit clue, kata Read more! sebenarnya bisa kita ganti sesuai dengan keinginan kita, misalkan kita rubah menjadi Baca selengkapnya..., Selengkapnya.., Lanjutannya... atau apa saja yang penting kata tersebut bisa memberi tahu kepada para pengunjung bahwa artikel kita ada kelanjutannya. Kode di atas sebenarnya ada alternatif lain, yakni memakai kode Span, jika berminat, ganti semua kode div menjadi Span. Hasilnya akan sama, cuma bagi para sobat yang suka posting pada menu compose, kode ini sering ada masalah di karenakan bertabrakan dengan perintah lain yang memakai kode Span. Akhirul kata selamat mencoba

8.Membuat Automatic Read More Pada Blog

Beberapa waktu yang lalu, salah satu rekan saya yang menggunakan template bikinan saya, meminta saya agar dibuatkan automatic read more pada template yang dia gunakan. Untuk memuaskan ‘pelanggan’, maka saya pun mencari ‘ilmu’ ke blog tetangga, dan ternyata ‘tetangga’ saya Ade’s Trick membagi ilmunya buat saya. Nah, sekarang saya ingin berbagi dengan anda semua. Semoga bermanfaat.
Pada artikel sebelumnya saya sudah pernah membahas fungsi Read More versi manual, untuk mengingat kembali silakan baca artikel di sini atau di sini. Fungsi Read More kali ini memang agak berbeda dengan Read More yang pernah dibahas sebelumnya. Bila versi terdahulu kita harus mengatur tulisan yang akan di tampilkan dengan yang di minimalisasi tulisan menggunakan cara manual dengan melakukan pemangilan fungsi :
....<span class="fullpost">.............</span> dimana kode ini biasanya kita tanamkan secara manual ke dalam halaman postingan yang ada di template posting. Untuk versi Auto Read More kali ini akan lebih mudah, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode di atas.
Yang hebatnya lagi, fungsi Auto Read More ini mampu menampilkan image pertama dalam posting dan mem-float image tersebut di awal paragraf awal, meskipun gambar yang kita letakkan berada di tengah atau di akhir postingan. Mungkin lebih tepat  disebut fitur image thumbnail.
Tidak hanya itu saja, kita dapat juga mengatur jumlah karakter yang akan ditampilkan. Disini ada 2 opsi untuk jumlah karakter yang akan ditampilkan, yaitu:
1. Jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan
2. Jumlah karakter tanpa image.

Penting! Yang sudah memasang Read More versi lama kodenya dikembalikan dulu ke seperti semula, caranya hapus kode yang berwarna putih di bawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja).
Kode Read More Versi manual tampilannya seperti di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/> <style>.fullpost{display:none;}</style>
<p><data:post.body/></p> <a expr:href='data:post.url'>Read More.. &#187;&#187;</a>
</b:if>

jika sudah ikuti langkah-langkah selanjutnya.
Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakkan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste saja kode dibawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/ function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img
src="'+img[0].src+'" width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Kedua, Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah
<data:post.body/>
Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:left'>
<a expr:href='data:post.url'>Read More... <data:post.title/></a>
</span> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

*) Tulisan yang berwarna biru muda menandakan Read More + judul posting. Jika tidak menghendaki adanya judul, hapus saja kode berwarna biru muda tersebut. 
*) Tulisan left berwarna ungu menandakan posisi tulisan Read More pada posting. 
*) Bila tulisan left diganti dengan right, maka posisi tulisan Read More berada di sebelah kanan.
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)
Semoga Berhasil.

9.Trik Mudah Membuat Read More

Trik Mudah membuat Read more

Lagi-lagi soal membuat fasilitas Read more.. atau Selengkapnya.. pada template baru (XML), topik ini rupanya yang paling banyak di baca dan di minati oleh para blogger baru. Hal ini terlihat dari banyaknya komentar yang masuk pada artikel tersebut, ada yang girang karena sudah merasa berhasil dan ada juga yang sedikit kecewa karena masih menemui kegagalan. Dengan masih adanya kegagalan-kegagalan tersebut, maka dapat di tarik kesimpulan bahwa metode yang saya sampaikan ternyata masih kurang untuk di pahami. Dari itu tentu harus di pikirkan cara yang tepat dalam penyampaian suatu panduan. Beberapa waktu yang lalu ada sebuah komentar yang masuk pada salah satu artikel saya (artikel yang mana saya lupa dan sedikit malas untuk membuka dokumen komentar) bahwa metoda penyampaian tersebut sangatlah mudah untuk di pahami, maka pada kesempatan kali ini saya akan mencoba metoda tersebut pada artikel membuat fungsi Read more.. atau Selengkapnya...

Saran saya, ketika anda melakukan Editting pada kode template, sebaiknya jangan memakai browser Internet Explorer terutama Internet Explorer 6, pakailah browser lain semisal FireFox ataupun Opera. Bagi yang belum mempunyai browser FireFox bisa mendownloadnya secara gratis di sini! dan untuk Opera bisa mendownloadnya di sini!, Kenapa jangan memakai Internet Explorer? ini merupakan pengalaman pribadi saya ketika melakukan editting sering menemukan pesan error ketika memakai IE, dan apabila memakai browser lain pesan Error tersebut tidak muncul (proses edtting sukses), dan saya pernah membaca di blogger forum banyak yang melaporkan isu ini dan pihak blogger sendiri menyarankan untuk sementara memakai browser lain selain IE (maaf lupa catat alamat link nya). Bagi yang belum sukses membuat fungsi read more..., coba ikuti langkah berikut ini : Langkah #1

· Sign in di blogger dengan id anda.

· Klik Pengaturan

· Klik Format

· Pada layar paling bawah, ada text area kosong disamping tulisan Template Posting, isi tesxt area kosong tersebut dengan kode di bawah ini :

<br /> <span class="fullpost"><br /><br /><br /> </span>

· Klik tombol Simpan Pengaturan

Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut. Langkah #2

· Klik menu Dasboard

· Klik Tata Letak

· Klik tab Edit HTML

· Klik tulisan Download Template Lengkap.

· Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula

· Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :

· Tunggu beberapa saat ketika proses sedang berlangsung

· Silahkan anda cari kode berikut pada kode template milik anda :

<br /><br /> <br /> <data:post.body/><br /> <br />

atau kode di bawah ini (sama saja) ;

<br /><br /> <br /> <p><data:post.body/></p> <br /> <br />

· Hapus kode diatas, lalu ganti dengan kode di bawah ini (klik pada tombol untuk menandai):

<b:if cond='data:blog.pageType == "item"'> <br /><style>.fullpost{display:inline;}</style> <br /><p><data:post.body/></p> <br /><b:else/> <br /><style>.fullpost{display:none;}</style> <br /><p><data:post.body/><br /><a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p> <br /></b:if>

· Klik tombol Simpan Template

· Selesai.

Cara Posting Artikel

· Klik menu Posting

· Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :

<br /> <span class="fullpost"><br /><br /><br /> </span>

· Tuliskan artikel yang ingin tampak pada blog sebelum kode :

<br /> <span class="fullpost"><br />

· Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :

<br /><br /> </span>

· Klik tombol bertuliskan MEMPUBLIKASIKAN POSTING

· Klik tulisan Lihat Blog(di jendela baru) untuk melihat hasil dari postingan kita, kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali langkah diatas

Mudah-mudahan dengan adanya postingan ini tidak ada lagi yang mengalami kegagalan dalam membuat menu Read more... Bagi anda yang mengikuti tutorial ini dan mengalami kegagalan, jangan panik ketika blog anda menjadi amburadul (katanya begitu dalam komentar), upload kembali backup templatenya dan nanti akan kembali ke keadaan semula sebelum di edit. Selamat mencoba !

Read More...