CARA EDIT TEMPLATE BAWAAN BLOGGER

Cara Edit Template Bawaan Blogger pokok bahasan kita kali ini.Setelah selesai penyetingan blog maka selanjutnya tahap awal yang perlu dilakukan adalah bagaimana dengan template anda sekarang ini ? Apakah template anda yang merupakan bawaan dari blogger cukup memuaskan atau tidak ? Jika pilihan anda kurang memuaskan, maka ada beberapa cara yang dapat anda lakukan untuk edit template bawaan Blogger di Blog anda.

Anda bisa saja mengunduh template dari berbagai sumber di internet atau memesan template siap pakai yang telah banyak di tawarkan, atau salah satunya yang akan saya informasikan berikut ini. Yaitu cara mengedit template bawaan dari blogger atau dengan bahasa lainnya template hasil modifikasi.Kenapa harus modifikasi? Karena untuk membuat template original buatan kita sendiri akan sagat susah bagi yang awam bahasa HTML, hal ini hanya dapat dilakukan oleh para master saja.

Dengan cara mengedit template anda bisa mempertahankan sebahagian, membuang atau menambahkan elemen baru yang anda inginkan sehingga template akan memberikan kesan tampilan yang unik. Untuk mengedit template standar blogspot sangatlah mudah dan sederhana cara kerjanya. Login ke akun blogger anda, di dassboard blog anda pilih Template <> Edit HTML, akan muncul kode-kode html di dalamnya. Maka akan dimulailah proses pengeditan template blog anda.
1. Langkah pertama yang harus anda lakukan adalah mengedit tampilan halaman utama dengan menghilangkan posting artikel sehingga nantinya di halaman utama/home page yang tampil hanya judul postingan saja.
a. Cara kerjanya anda masuk ke pengaturan Template <> Edit HTML
b. Kemudian cari kode <b:include data=’post’name=’post/>, kemudian anda hapus kode tersebut dan masukkan kode berikut :

<b:if cond=’data:blog.homepageUrl !=data;blog.url’>
<b:if cond=’data:blog.PageType !=&quot;item&quot,’>
<a expr:href=’data:post.url’>
<div style=’padding:6px 0 6px 5px;marginbottom:
2px;background:eeeeee;color:#000000;>
<img alt=’&gt;&gt;&gt;’ border=’0’ src=’https://1h5.googleusercontent.com/-
HP5Xyc1Rqic/TXMMAKm1g5I/AAAAAAAAAQk/wrCGFu9jzmg/s1600/sidebaricon.
Png’/>
<data:post.title/></div></a>
<b:else/>
<b:include data=’post’ name=’post’/>
</b:if>
<b:else/>
<b:include data=’post’ name=’post’/>
</b:if>

Kemudian simpan template, lihat dulu hasilnya melalui pratinjau template.jika sudah berhasil silahkan lanjutkan ke langkah selanjutnya.
2.Menambahkan kolom widget di atas/bawah postingan.

Masih di laman edit HTML, cari kode ]]></b:skin>,kemudian masukkan kode berikut ini dengan cara copas di atas kode ]]></b:skin>

/*--bawah posting--*/
#underpost h2{
font-size:13px{
font-weight:bold;
color:#B8002E;
border-bottom:2px solid#000000;
padding-left:5px;
}
#underpost{
Width;560px;
}
#underleft{
Width:270px;/*lebar kolom kiri*/
float:left;
margin;5px;
}
#underrigth{
Width:270px; /*lebar kolom kanan*/
Float:right;
Margin:5px;
}

Perhatikan kode ini[ Width;560px;], adalah merupakan kode dari lebar kolom posting. Sesuaikan dengan lebar di template blog anda. Dan untuk mencari atau mengetahui lebar/width kolom posting cari kode seperti ini :

#main-wrapper {widht: 560px;

Jika lebar/width kolom posting seperti contoh di atas, maka bagi lebar tersebut menjadi dua. Karena akan dibuat dua kolom bahagian kiri dan kanan. Sisakan nilainya untuk margin dan padding untuk memberi jarak antara gadget. Maka dari itu buat lebar kolom kiri dan kanan berukuran 270px.Setelah selesaikemudian cari kode seperti di bawah :

<div id=’main-wrapper’><b:section class=’main id=’main’ showaddelement=’no’><b:widget id=’blog1’ locked=’true’ title=’blog posts’ type=’Blog’/></b:section></div>

Jika telah menemukan kode tersebut, untuk menambahkan dua kolom di atas posting pasang kode di bawah tepat di bawah kode tadi.

<div id=’underpost’>
<b:section class=’underleft id=’underleft’/>
<b:section class=’underright id=’underright’/>
</div>

          Dan jika anda ingin menambahkan dua kolom posting di atas posting anda tinggal membalikkan saja cara kerjanya. Kalau untuk di bawah anda letakkan di bawah kodenya dan kalau hendak di atas posting tinggal anda letakkan di atas kodenya berikut ini :

<div id=’main-wrapper’>

Kemudian simpan template.

3.Selanjutnya, jika anda ingin menambahkan 2 atau 4 atau lebih kolom widget di atas footer yang berguna membuat tampilan homepage blog seperti blog model Magazine.Langkahnya, cari kode <div id=’lower-wrapper’>, kemudian letakkan kode di bawah tepat di bawah kode <div id=’lower-wrapper’>.

<div id=’footer-column-divide’><div id=’footer1’ style=’width: 25%; float:left;Margin:0; text-align:left;’><b:section class=’footer-column’ id=’co11’Preferred=’yes’ style=’float:left;’/></div><div d=’footer2’ style=’width: 25%; float; left;Margin:0; text-align; left;’><b:section class=’footer—column’ id=co12’Preferred=’yes’ style=’float:left;’/></div><div id=’footer3’ style=’width; 25%; float:right;Margin:0; text-align: left;’><b:section class=’footer-column’ id=’co13’Preferred=’yes’ style=’float:right;’/></div><div id=’footer4’ style=’width: 25%; float: right;Margin:0; text-align: left;’><b:section class=’footer-column’ id=’co14’Preferred=’yes’ style=’float:right;’/></div><div style=’clear:both;’/></div>
Kode di atas adalah contoh membuat 4 kolom di atas footer. Kalau anda menginginkan hanya 3 kolom di atas footer silahkan anda masukkan saja kodenya sebanyak 3 baris saja dan seterusnya
div id=’footer1’ style=’width: 25%; float:left;Margin:0; text-align:left;’><b:section class=’footer-column’ id=’co11’Preferred=’yes’ style=’float:left;’/></div>

          Jika semua kode telah anda masukkan dengan benar kemudian simpan template dan lihat hasilnya.Cek pada page element nantinya akan ada kolom-kolom untuk menampilkan widget.
Tambahkan widget-widget yang menurut anda yang terbaik dan gunakan tampilan thumbnail gambar untuk mempercantik tampilan blog anda. Misalnya anda ingin menampilkan artikel terbaru dengan tampilan thumbnail yang cantik.Silahkan anda ikuti caranya :
Dari halaman page elements tambahkah widget HTML/Javascript silahkan anda masukkan kode di bawah ke dalam widget :

<script type=’text/javascript’>var numposts= 3;var showpostthumbnails =true;var
displaymore=false;var displayseparator=false;var showcommentnum=false;var
showpostdate=false;var showpostsummary=false;var numchars=10;</script>
<script type=”text/javascript” src=”/feeds/posts/default/-/label anda?orderby=update&alt=jsonin- script&callback=labelthumbs”></script>

Atau jika anda ingin menampilkan artikel dengan label terpilih saja silahkan anda ganti tulisan ( label anda ) dengan label anda.Selesai sudah Cara Edit Template Bawaan Blogger.semoga sukses dan bermanfaat.

Judul: CARA EDIT TEMPLATE BAWAAN BLOGGER ; Ditulis oleh Unknown ; Rating Blog: 5 dari 5

Posted in: Tips Blog