Home » » Cara Membuat Widget Dibawah Posting

Cara Membuat Widget Dibawah Posting

Written By Unknown on Kamis, 29 Maret 2012 | 10.49

Kalau Kemaren Belajar Blog berbagi pengalaman Cara Membuat Artikel Terkait Dengan Tumbnail, sekarang saya berbagi pengalaman Cara Membuat Widget Dibawah Posting. widet dibawah posting, menurut saya ini sangat bagus. terlebih buat anda yang udah penuh beranda blognya. Widget ini bisa ditambah sesuai keinginan anda. Buat yang ingin menambahkan widget dibawah postingan, berikut ini Belajar blog ingin berbagi pengalaman Cara Membuat Widget di bawah Posting.
Ikuti langkah-langkahnya seperti ini :
1. Dasbor - Rancangan - edit HTML - centang Expan widget.(jangan lupa di save dulu templatenya)
2. Cari kode ]]></skin> (Gunakan ctr F) dan Pastekan code CSS di bawah ini di ATAS ]]></skin>  :

/*-----   BB MULTI COLUMN FOOTER  -----*/

    #lower {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333333;
    }
    #lower-wrapper {
    background:#333333;
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;
    border:0;
    }
    #lowerbar-wrapper {
    background:#333333;
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 23%;
    text-align: justify;
    color:#ddd;
    font: bold 12px Arial, Tahoma, Verdana;
    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;
    border:0;
    color:#ddd;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    }
    .lowerbar ul {
    color:#fff;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    }
    .lowerbar li {
    display:block;
    color:#fff;
    line-height: 1.6em;
    margin-left: 0 !important;
    padding: 6px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #444;
    list-style-type: none;
    }
    .lowerbar li a {
    text-decoration:none; color: #DBDBDB;
    }
    .lowerbar li a:hover {
    text-decoration:underline;
    }
    .lowerbar li:hover {
    display:block;
    background: #222;
    }

3. Selanjutnya Cari Kode </body> dan pastekan kode ini di ATASnya

<div id='lower'>
    <div id='lower-wrapper'>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar1' preferred='yes'/>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar2' preferred='yes'/>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar3' preferred='yes'/>
    </div>


    <div style='clear: both;'/>
    </div> </div>

4.Save Template dan lihat hasilya.
Catatan :
Widget ini seharusnya terbagi menjadi 3 buah Vertikal
Perhatikan kode warna biru. Silahkan di ganti angkanya jika ini  belum berhasil. Perhatikan juga angka WIDTH pada CSS footer bawaan template anda. Samakan dengan yang disini.
Anda bisa menambahkan kolom widget lagi dengan cara menambahkan kode ini

    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar4' preferred='yes'/>
    </div>
dan Pastekan di ATAS kode

 <div style='clear: both;'/>
    </div> </div>
 Dengan catatn anda harus merubah nilai pada width: 23%;

 Demikian Cara Membuat Widget Dibawah Posting. Semoga bermanfaat.

Share this article :

0 komentar:

Posting Komentar

Berkomentarlah dengan baik dan relevan. No Spam.!!

Deskripsi Iklan
Deskripsi Iklan
Deskripsi Iklan
Deskripsi Iklan
Advertise Now!
 
Support : About Me | Contact Us | Privacy Policy
Copyright © 2013. Belajar Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger