Popular Posts
-
Jika anda punya tanggapan, pertanyaan, saran, atau kritik, permintaan review aplikasi, terutama produk anak negeri, jangan ragu untuk menghu...
-
Blog atau website merupakan salah satu cara bagi kita untuk share pengalaman berbagai hal dengan orang lain, termasuk untuk urusan usaha. Me... -
Software Duplicate Commander merupakan sebuah aplikasi freeware yang memungkinkan Anda untuk menemukan dan mengelola file duplikat atau file... -
Bersentuhan dengan komputer setiap hari membuat saya sering menemukan kerusakan-kerusakan yang tidak biasa terjadi, salah satunya kerusakan ... -
Aplikasi Animal ABC merupakan salah satu free apps yang cukup menghibur. Namun selain menghibur, aplikasi ini juga memiliki nilai edukasi b... -
Kali ini software Gratis datang untuk membantu putra-putri anda belajar mengenal huruf, angka, gambar dan lain-lain melalui sebuah permaina...
Cara Menambahkan Kolom Widget Pada Blog
Kamis, 02 Februari 2012
Widget yang kita pasang melalui fasilitas atau fitur yang disediakan template blog kita, umumnya default sesuai dengan karaktersitik templatenya. Namun terkadang kita memiliki kreasi tersendiri untuk mengubah atau mempercantik blog kita, sehingga template dasar yang kita pakai memerlukan sedikit modifikasi atau perubahan dan penambahan pariasi.Begitu pula dengan tampilan widget pada blog kita, terkadang kita memerlukan tambahan kolom widget untuk meng-efisien-kan area kosong yang ada pada template kita. Biasanya pemanfaatan area kosong ini dilakukan dengan penambahan dua atau tiga kolom widget baru pada template kita.
Penambahan kolom widget dapat diletakan di bawah atau diatas kolom artikel utama. Jika anda ingin menambahkan beberapa kolom widget pada bagian bawah blog anda coba simak langkah-langkah berikut:
Pertama; silahkan log in ke area dashbord anda, Kemudian pilih "template" dan pilih "edit HTML"
Keempat; Lalu letakkan kode CSS berikut di atas kode ]]></b:skin>
/* ----- LOWER SECTION ----- */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333434;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#0084ce;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333434;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#0084ce;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}
Kode background:#333434; merupakan kode warna background dasar widget keseluruhan.
Kode width: 960px; merupakan lebar kolom widget.ebar blog Anda.
Kode background:#ffffff; merupakan warna background masing-masing widget
Kode width: 32%; merupakan lebar tiga kolom masing-masing widget yang ditambahkan.
Kode color:#0084ce; merupakan warna Title Heading
Kode font: bold 14px Arial, Tahoma, Verdana; merupakan keterangan huruf yang digunakan.
Kode border-bottom: 3px solid # 0084ce; merupakan keterangan border di bagian bawah Title Heading.
Kode border-bottom: 1px dotted # ccc; merupakan warna border yang muncul di bawah link.
Kelima; Cari kode </body> dan letakkan kode HTML berikut sebelum kode </body>
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
Untuk menambahkan atau mengurangi kolom anda bisa menambahkan atau menghapus kode berikut.
Dengan langkah-langkah tersebut, anda telah menambahkan tiga buah kolom widget baru pada template blog yang anda gunakan. Widget tersebut bisa anda rubah atau edit pada bagian tata letak atau layout. (cakra)
Comments[ 0 ]
Posting Komentar