Popular Posts
-
Memang cukup banyak permasalahan, trouble, atau kerusakan yang mungkin dialami komputer kita. Dari mulai kerusakan aksesoris seperti keyboar... -
Bagi anda yang memiliki ide-ide kreatif atau menarik, berbagi bersama orang lain secara online merupakan langkah bijak yang bisa ditempuh. B... -
Bersentuhan dengan komputer setiap hari membuat saya sering menemukan kerusakan-kerusakan yang tidak biasa terjadi, salah satunya kerusakan ... -
Ingin mencoba Windows 10 secara gratis dan legal?, anda bisa menggunakan Windows 10 Technical Preview. Pada dasarnya versi ini merupakan tam... -
Jika anda punya tanggapan, pertanyaan, saran, atau kritik, permintaan review aplikasi, terutama produk anak negeri, jangan ragu untuk menghu...
-
Universal Media Server merupakan DLNA-compliant UPnP Media Server, yaitu sebuah aplikasi yang memungkinkan kita untuk meng-sinkronisasi bany... -
Software Video Cache View merupakan sebuah aplikasi yang memungkinkan kita untuk menonton kembali video yang telah kita buka melalui browser...
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