Cara Modifikasi/ Menyesuaikan Tampilan Template Blogger Dengan Perancang Template

Mengutak-atik tampilan blogger memang memiliki daya tarik tersendiri. Di dalam blogger dalam konsep blogger, untuk mempermudah keperluan itu maka telah di siapkan perangkat dan tool-tool para menguna blogger untuk memodifikasi sendiri tampilan templatenya.

Oke..langsung aja meluncur ke tutorial berikut.

Pertama-tama masuk ke akun blogger Anda.
Kemudian KLIK Nama Blog Anda --- KLIK Template --- KLIK Ubahsuaikan. seperti pada gambar berikut.

 1. Memilih Template

• Sebelumnya pilih dulu Template kesukaan Anda pada panel sebelah kanan, template-template yang telah di siapkan oleh blogger.
• Jika sudah yakin dengan Template yang diinginkan, klik tombol Terapkan ke Blog untuk menerapkannya di blog.
• Selesai

2. Mengatur Background

• Background atau latar belakang bisa di rubah sesuai keinginan Anda. Di sini ada dua pengaturan yaitu Background image fungsinya untuk menambahkan gambar pada background dan Main color theme berfungsi untuk merubah warna tampilan background template Anda.
• Background Image, Cara merubah background Image Anda klik pada None. Maka akan muncul Select Background image, nah silahkan di pilih background yang telah di sediakan seperti Abstrak, Seni, Bisnis, Perayaan, hiburan dan lain-lain.
• Atau Anda juga bisa memasukkan gambar milik Anda sendiri di Upload image dari komputer Anda. Format bisa JPEG, GIF atau PNG Ukuran maksimal 300k. dan untuh hasil terbaik sebaiknya upload ukuran gambar sebesar 1800x1600 pixel.
• Jika sudah yakin dengan Background Image yang diinginkan, klik tombol Terapkan ke Blog untuk menerapkannya di blog.
• Selesai

3. Sesuaikan Lebar Kolom Blog

• Klik menu Sesuaikan lebar untuk merubah lebar kolom, lihat gambar sebagai ilustrasinya.
• Geser Slider ke kiri atau ke kanan dan atau masukkan lebar dalam bentuk angka (setting yang berada di sebelah kanan)
• Lihat pada bagian Online View atau dibawah menu --> mantab bozzz karena perubahan dapat dilihat secara langsung loh....
• Jika sudah yakin dengan lebar kolom yang diinginkan, klik tombol Terapkan ke Blog untuk menerapkannya di blog.
• Selesai

4. Pilih Tata Letak Kolom Blog

• Klik menu Tata letak untuk memilih tata letak kolom blog, banyak blogger yang memilih letak kolom didasarkan kebutuhan ngeblognya. Anda pun dapat mengikutinya sesuai kebutuhan.
• Lihat pada bagian Online View atau dibawah menu
• Jika sudah yakin dengan tata letak kolom yang diinginkan, klik tombol Terapkan ke Blog untuk menerapkannya di blog.
• Selesai

5. Setting Tingkat Lanjut

• Klik menu Tingkat lanjut untuk mensetting jenis huruf dan warna seperti judul posting, link, latar, deskripsi blog dan lain sebagainya.
• Misal klik Teks Laman dengan ukuran Font 13px jenis Impact dan warna #666666
• Langsung lihat perubahan dibagian Online View
• Lakukan langkah yang serupa pada bagian yang lain dan lihat perubahan secara langsung
• Jika sudah yakin dengan setting yang diinginkan, klik tombol Terapkan ke Blog untuk menerapkannya di blog.
• Selesai

Melalui cara ini kita dapat secara langsung merubah template sesuai dengan yang telah kita pilih.

Dapat digunakan sebagai catatan bahwa kita dapat merubah secara parsial tampilan blog dengan menggunakan CSS (Cascading Style Sheet) tentunya melalui Edit HTML.

Demikian saja tutorial Cara Modifikasi/ Menyesuaikan Tampilan Template Blogger Dengan Perancang Template ini, semoga bermanfaat..

Cara Menaikkan Halaman dibawah Header Blogspot

Kode ini untuk menaikkan halaman dibawah header, yaitu widget posting dan sidebar kiri dan kanan. Kode ini khusus untuk template bawaan blogger, yang setelah dieditpun masih bisa disesuaikan pada halaman dasbor Blogger anda, berikut gambarnya...

Oke.. langsung saja silahkan ikuti petunjuknya

Login di Blogger

Langsung menuju edit HTML

Kemudian centang Expand Template Widget dan cari kode berikut.

<Variable name="content.margin" description="Content Margin Top" type="length" default="20px" value="20px"/>

ubah angka yang berwarna merah sesuai kemauan anda, atau langsung saja dengan angka 0. Sehingga hasilnya seperti ini.

<Variable name="content.margin" description="Content Margin Top" type="length" default="0px" value="0px"/>

Save template, dan lihat hasilnya..

Cukup itu saja tutorial singkat Cara Menaikkan Halaman dibawah header ini.. semoga bermanfaat.

Cara Membuat Tampilan Tanggal Hari Ini di Blog

Menampilkan tanggal hari ini di blog, maksudnya suatu cara untuk menampilkan tanggal secara otomatis di halaman blog. Dengan kode javascript, accesories blog ini akan tampil secara otomatis sesuai dengan tanggal dan harinya. 

Nah..buat anda yang pengen pasang tampilan tanggal pada blog, silahkan ikuti petunjuknya.

Login di Blogger

Langsung menuju edit HTML

Kemudian centang Expand Template Widget

Copy paste kode dibawah, dan simpan diantara kode ]]></b:skin> dan </head> :

<script type='text/javascript' src='http://mizwar.blog.googlepages.com/tampil_tanggal.js'></script>

Sehingga hasilnya seperti ini :

]]></b:skin>

<script type='text/javascript' src='http://mizwar.blog.googlepages.com/tampil_tanggal.js'></script> 

</head>

Save Template

Nah..untuk langkah awal sudah selesai. Sekarang langkah berikutnya yaitu memilih penempatan untuk tampilan tanggalnya. Anda bisa menempatkan accesories ini di semua tempat di blog anda. Baik itu postingan, sidebar, atau footer. Yang perlu anda lakukan adalah menuliskan kode berikut :

<script>tampiltanggal();</script>

Nah...selesai deh. 

Catatan : 

Accesories tersebut hanya menampilkan hari, tanggal, bulan dan tahun dalam bahasa indonesia. Jika blog anda memakai bahasa inggris, ganti kode yang no.3 dengan kode berikut 

<script type='text/javascript' src='http://mizwar.blog.googlepages.com/current-date.js'></script>

dan untuk kode yang terakhir (sebelum catatan ini) ganti dengan kode ini

<script>showCurrentDate();</script>

Tambahan

atau bisa juga menggunakan script dibawah ini, yang dipaste dibawah ]]></b:skin>

<script type='text/javascript'>//<![CDATA[var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December");function getthedate(){var a=new Date();var g=a.getYear();if(g<1000){g+=1900}var h=a.getDay();var e=a.getMonth();var b=a.getDate();if(b<10){b="0"+b}var i=a.getHours();var c=a.getMinutes();var j=a.getSeconds();var d="AM";if(i>=12){d="PM"}if(i>12){i=i-12}if(i==0){i=12}if(c<=9){c="0"+c}if(j<=9){j="0"+j}var f="<font color='DDDDDD' face='Arial'>"+dayarray[h]+", "+montharray[e]+" "+b+", "+g+" "+i+":"+c+":"+j+" "+d+"</font>";if(document.all){document.all.clock.innerHTML=f}else{if(document.getElementById){document.getElementById("clock").innerHTML=f}else{document.write(f)}}}if(!document.all&&!document.getElementById){getthedate()}function goforit(){if(document.all||document.getElementById){setInterval("getthedate()",1000)}};//]]></script>

lalu kode ini dipaste dimana saja sesuai selera Anda

<span id='clock'/>

Ok.. selamat mencoba

Cara Mudah Membuat Read More Otomatis Pada Blogspot Blogger

Bagi anda yang baru saja menekuni dunia blog, tidak perlu khawatir mengenai cara membuat read more pada blog, karena ternyata sangat mudah. Langkahnya cukup praktis dan sederhana, tinggal copykan script code yang ada ke template blogspot anda.

Untuk anda para blogger yang menggunakan cara membuat read more pada blog yang lama yaitu dengan menambahkan tag <span id="fullpost"> dan </span> dalam setiap postingan dianggap terlalu ribet dengan segala keterbatasannya. Nah, pada kesempatan kali ini admin mencoba untuk membagikan cara mudah membuat read more otomatis pada blog.

Sebelum anda mulai untuk mengikuti langkah cara membuat read more pada blog, berikut beberapa hal yang harus anda lakukan:

1. Terlebih dahulu anda harus login dan masuk ke akun blog anda.
2. Langkah kedua mengenai cara membuat read more pada blog yaitu dengan klik rancangan dan klik edit HTML.
3. Kemudian centang Expand Template Widget
4. Untuk memudahkan mencari kode HTML, silahkan tekan CTRL+F.
5. Anda harus mencari kode </head> dan jika sudah ketemu kemudian tambahkan kode di bawah ini tepatnya di atas kode </head>.

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

 

Dalam beberapa langkah cara membuat read more pada blog, jika anda ingin mengubah ukuran read more, anda dapat lakukan dengan mengubah angka-angka pada kode di bawah ini sesuai dengan kebutuhan anda.

summary_noimg = 430; merupakan tinggi potongan artikel tanpa gambar
summary_img = 340; merupakan tinggi potongan artikel dengan gambar
img_thumb_height =100; merupakan ukuran tinggi thumbnail
img_thumb_width = 120; merupakan ukuran lebar thumbnail

Setelah itu dalam langkah cara membuat read more pada blog yang harus anda lakukan adalah mencari kode <div class='post-header-line-1'/> yang pertama. Untuk memudahkan pencarian, fokuskan pencarian pada kode post-header-line-1, lalu ganti semua kode dibawahnya sampai diatas kode <div class='post-footer'> dengan kode dibawah ini (yang ber-background abu abu)..

 

<div class='post-header-line-1'/>

<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:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<div class='post-footer'>

Perlu anda ketahui, kata READ MORE juga dapat anda ubah sesuai dengan keinginan anda. Nah, setelah itu langkah terakhir mengenai cara membuat read more pada blog adalah dengan menyimpan template dan lihat hasilnya. 

Disekitar atas dan dibawah kode inilah kelak kita bisa menaruh kode kode lainnya seperti, tombol like dibawah judul,  share dibawah posting, comment facebook dan lainnya sesuai yang kita inginkan.

Selamat mencoba...

Cara Menghilangkan Link Posting Lama, Posting Baru dan Home

Sebagaiman anda ketahui bahwa saat sekarang ini blogger.com masih menggunakan template dengan dua versi, yaitu versi Template Klasik serta versi Template baru. Salah satu perbedaan antara keduanya adalah versi klasik tidak mempunyai fasilitas link “Posting Lama” atau “Older Posts”, dengan di tambahkannya fasilitas tersebut pada template versi baru maka akan lebih mempermudah para pembaca untuk menemukan artikel yang sudah tidak tampil di halaman depan.

Ternyata memang “lain orang lain juga keinginan”. Di kala orang lain senang dengan kehadiran fasilitas tersebut, ternyata ada juga yang ingin menghilangkannya, apakah itu anda? pertanyaan selanjutnya apakah fasilitas tersebut bisa di hilangkan atau tidak? jawaban singkat “Bisa”, dan caranya pun terbilang sangat mudah.

Sebelumnya perlu di ketahui bahwa fasilitas link tersebut ada 3 yaitu “Posting baru” atau “Newer Posts”, “Home” atau “Halaman Muka”, serta “Posting Lama” atau “Older Posts”. Mana yang mau anda hilangkan, atau mau semuanya? tentu saja bisa. Untuk menghilangkannya anda hanya menambahkan sedikit kode pada CSS template anda.

Cari kode yang mirip seperti ini yang biasanya terdapat diatas kode ]]></b:skin>

    #blog-pager {

    ..

    ..

    .. (kode lengkap)

    ..

    .. }

lalu setelah karakter #blog-pager { ditambahkan kode

display:none;

sehingga menjadi

  #blog-pager { display:none;

    ..

    ..

    .. (kode lengkap)

    ..

    .. }

lalu Save Template...

Tips dan Keterangan:

#blog-pager adalah kode link footer dariuntuk urutan link halaman posting pada blog
pilih Template >> Edit HTML >> Lanjutkan dan centang Expand Template Widget
untuk memudahkan pencarian kode pada browser Mozilla Firefox = Edit >> Find dan pada Google Chroome = Edit Control Google Chrome  >> Find

Oke.. mudahkan?  Selamat mencoba..

Cara Membuat Tool Tambah Gadget Dibawah Halaman Posting Blog

Tool Tambah Gadget (Add gadget) blog merupakan sarana utama untuk menambah gadget-gadget seperti gadget HTML/JavaScript, gadget entri popular, gadget feed dan gadget-gadget lainnya. Umumnya tools tambah gadget ini biasanya hanya terlihat pada sidebar dan footer blog.

Salah satu manfaat membuat tools add gadget di bawah halaman posting blog adalah untuk memudahkan jika sewaktu-waktu ingin menempatkan gadget pada bagian bawah halaman posting. Dengan memanfatkan tools add gadget yang sudah terpasang di bawah posting, gadget yang ditambahkan akan langsung berada di bawah posting.

Tool Add gadget/tambah gadget pada bagian atas halaman posting blog

Cara menambah gadget pada bagian bawah halaman posting blog dapat dilakukan dengan langkah-langkah sebagai berikut, yaitu:

1. Sign in di blog

2. Klick Template

3. Cari kode berikut ini dalam kode template blog anda. Untuk menemukan dengan cepat gunakan CTRL F

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>

</b:section>

4. Copy lallu paste kode di bawah ini dan tempatkan tepat di bawah kode di bawah kode di atas

 <b:section class='main' id='mainunderpost' showaddelement='yes'/> 

5. Klick Simpan Template untuk menyimpan perubahan

6. Klick Tutup untuk kembali

7. Klick Tata Letak untuk melihat hasilnya.