Tutorial menambahkan gadget 3 kolom di footer
BUSINESS POPULARITY - Apakah Anda seorang blogger yang ingin memiliki bagus 3 kolom footer dipasang di blog anda ? Jika demikian Anda tidak sendirian, kami selalu ada untuk berbagi sedikit yang kita tahu itu untuk Anda secara gratis. Jika 3 kolom footer benar-benar Anda butuhkan maka Anda dapat menambahkannya mudah dan sederhana di blog Anda. Kami telah menyediakan kode untuk Anda semua, silakan mendaftar di blog Anda semua dengan proses instalasi yang sangat sederhana.
Namun sebelum kita melompat ke proses instalasi, saya ingin menjelaskan lebih lanjut tentang apa dan mengapa Anda perlu menginstal widget di footer blogger Anda. Pada awalnya dengan 3 widget kolom footer Anda dapat menambahkan banyak gadget yang Anda inginkan, widget footer juga membuat blog Anda terlihat bagus dan profesional. Itulah sebabnya banyak blogger menggunakan widget ini di blog mereka. Nah cukup ikuti langkah-langkah berikut untuk menambahkan widget footer 3 kolom di blog Anda.
Login ke Dashboard blog Anda
Pilih tab Template
Backup template Anda jika perlu
Klik Edit HTML
Kemudian cari kode]]> </ b: skin> (Gunakan Ctrl + F untuk memudahkan pencarian)
Klik Edit HTML
Kemudian cari kode]]> </ b: skin> (Gunakan Ctrl + F untuk memudahkan pencarian)
- Kemudian menempatkan kode berikut tepat di atas kode]]> </ b: skin> lalu
/* ----- 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;
}
Lalu tekan simpan template
- Setelah itu cari kode </body> dan letakkan kode di bawah ini tepat 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>
- Klik Save template kemudian masuk ke tab Layout - Maka gambarnya akan seperti ini :
Pengaturan
Anda dapat dengan mudah menyesuaikan tampilan dan warna dari widget footer ini. Saya telah menandai dan mewarnai bagian-bagian penting dalam kode CSS di atas. Bacalah deskripsi di bawah ini dengan hati-hati untuk menyesuaikan widget 3 kolom ini sesuai keinginan Anda. Untuk mengetahui kode warna, gunakanlah Kode Warna Generator milik kami.
- background:#333434; Gantilah 6 digit kode warna pada bagian ini untuk mengubah warna background widget.
- width: 960px; Ini adalah lebar widget. Jika Anda mau, Anda dapat menyesuaikan nilai ini agar lebarnya sesuai dengan lebar blog Anda.
- background:#fff dan width: 32%; Ini adalah warna background dan lebar tiga kolom widget yang ditambahkan.
- color:#0084ce; Ini adalah warna Title Heading
- font: bold 14px Arial, Tahoma, Verdana; Edit bagian ini untuk mengganti ukuran font dan jenis font.
- border-bottom: 3px solid # 0084ce; Edit bagian ini untuk mengubah ketebalan, style, dan warna border yang muncul di bagian bawah Title Heading.
- border-bottom: 1px dotted # ccc; Edit bagian ini untuk mengubah ukuran, style, dan warna border yang muncul di bawah link.
Selamat Mencoba...!
0 comments:
Post a Comment