Membuat Elemen Halaman Tiga Kolom

Membuat Elemen Halaman Tiga Kolom

Artikel kali ini saya akan coba sharing kepada anda cara design template yaitu membuat elemen halaman tiga kolom pada blogspot. Setiap template pastinya memiliki elemen halaman yang berbeda jumlah dan letaknya. Elemen halaman cukup penting untuk sebuah template dan akan lebih bagus lagi jika lebih banyak, tetapi apabila terlalu banyak elemen halaman juga bisa membuat loading blog menjadi lama karena terdapat banyak kode css didalamnya, jadi sesuaikanlah elemen halaman tersebut sesuai kebutuhan.

Bagi anda yang ingin membuat elemen halaman tiga kolom pada template blogspot, caranya adalah sebagai berikut :

1. Login pada account blogger anda

2. Pada halaman dasbor pilih Tata Letak kemudian Edit Html

3. Carilah kode ]]></b:skin> (gunakanlah Ctrl + F untuk mempercepat pencarian) kemudian letakkan kode dibawah ini diatas kode tersebut.

/* -- bottom -- */

#bottom {
width:1000px;
clear:both;
margin:0 auto;
float:left;
padding:10px 0;
color:#333;
background:#ffffff;
border-top:#ffffff;
border-bottom:#ffffff;
}

#bottom a:link {
color:#006699;
text-decoration:none;
}

#bottom a:hover {
color:#c06000;
text-decoration:underline;
}

#bottom a:visited {
color:#808080;
text-decoration:none;
}

#bottom h2 {
color:#000000;
padding:10px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #333;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}

#bottom ul {
padding:0;
margin:0;
color:#333;
}

#bottom ul li {
list-style-type:none;
border-bottom:1px dotted #333;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmhdgjJTVWhnkAgcNzr1hkE9av83xwpruNCq1Ug-OkDhtJbUjZ5RmTpWEB9rNfsfoxw4uP8HFloibhk5s0QHUXHm3eZ3XECFfC7lmuxQU3k4pobTlLUAGdP6gkNdkGKVQSCjZvV8SOsw/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;
margin-top:2px;
}

#bottom1 {
width:300px;
float:left;
padding-left:15px;
}

#bottom2 {
width:300px;
float:left;
padding:0 20px 0 20px;
}

#bottom3 {
width:300px;
float:right;
padding-right:15px;
}

Catatan :
Kode diatas bisa di edit sesuai dengan template dan keinginan anda seperti lebar footer, lebar header, lebar elemen halaman setiap kolom, warna latarbelakang, jenis tulisan dll.

4. Masih dihalaman Edit Html, langkah selanjutnya carilah kode seperti dibawah ini :

<div id='footer-wrapper'> (untuk membuat elemen halaman tiga kolom diatas footer)

<div id='main-wrapper'> (untuk membuat elemen halaman tiga kolom dibawah header)

5. Selanjutnya Letakkan kode dibawah ini persis diatas kode tersebut

<div id='bottom'>
<b:section class='bottom' id='bottom1' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
<b:section class='bottom' id='bottom2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Buku Tamu' type='HTML'/>
</b:section>
<b:section class='bottom' id='bottom3' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Traffic Blog' type='HTML'/>
</b:section>
</div>

6. Simpan Template

Setelah mengikuti langkah-langkah diatas untuk membuat elemen halaman tiga kolom pada template blogspot dengan benar, klik tata letak untuk melihat apakah template anda sudah terdapat elemen halaman tiga kolom pada header dan footer (sesuai pilihan anda) seperti gambar dibawah ini :

Jika sudah muncul elemen halaman tiga kolom, pergunakanlah elemen halaman tersebut untuk memasukkan widget dan sebagainya agar blog anda terlihat lebih menarik.

»»  READMORE...

Cara Membuat READMORE Otomatis

Cara Membuat READMORE Otomatis

Postingan kali ini akan memberikan tutorial Cara Membuat Readmore atau Baca Selengkapnya pada postingan blog secara otomatis. Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik. Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial berikut ini.

PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; 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'/>

KEDUA, cari kode html berikut ini :

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

ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image

==> Summar img 430 = tinggi artikel terpenggal dengan image

==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

KETIGA, klik save template

Selanjutnya anda bisa melakukan postingan dan lihat hasilnya, Readmore atau baca selengkapnya akan secara otomatis terpasang setelah anda publish postingannya.

»»  READMORE...