Monday, March 15, 2010

Cara Menambahkan Widget / Tambah Target di blogger

Contoh :



langsung saja yach!!!



Langkah-langkahnya sebagai berikut :


1. Masuk ke "Dasbor"

2. Klik "Tata Letak"

3. Klik "Edit HTML"

4. Beri Centang pada kotak kecil "Expand Template Widget"

5. Silahkan cari di dalam template anda kode ]]></b:skin>

6. Persis sebelum kode tersebut, copypastekan script berikut ini :


Untuk 1 Widget yang Berada Diatas dan Dibawah


    /* Untuk 1 Widget yang Berada Diatas dan Dibawah */



    #widget-atasbawah {

    margin: 0px 0px 0px 0px;

    padding: 0px 0px 0px 0px;

    width: 980px;

    position: relative;

    text-align: center;

    }



    #atasbawah, #widget-atasbawah2 {

    margin: 0px 0px 0px 0px;

    padding: 0px 0px 0px 0px;

    /* background: #FFFFFF;

    border-top: 1px solid none;

    border-left: 1px solid none;

    border-right: 1px solid none; */

    }



    #atasbawah .widget, #widget-atasbawah2 .widget {

    margin: 0;

    padding: 10px 0;

    }


Kalau sudah kamu Copy Paste script yang diatas tadi, sekarang kamu Copy Paste juga script yang ada dibawah ini dan letakkan di <head> = untuk posisi widget diatas + </head>  = untuk posisi widget dibawah :


Ni scriptnya ^_^


    <div id='widget-atasbawah'>

    <b:section class='atasbawah' id='atasbawah' preferred='yes'/>

    </div>


Jangan lupa di Save yach!!!



    * Untuk 3 Widget

    /* -- Untuk 3 Widget -- */



    #3-Widget {

    width:960px;

    clear:both;

    margin:7px 0px 7px 0px;

    float:left;

    padding:4px 0px 0px 0px;

    color:#333;

    background:#eeeeee;

    border-top:#ffffff;

    border-bottom:#ffffff;

    }



    #3-Widget a:link {

    color:#006699;

    text-decoration:none;

    }



    #3-Widget a:hover {

    color:#c06000;

    text-decoration:underline;

    }



    #3-Widget a:visited {

    color:#808080;

    text-decoration:none;

    }



    #3-Widget 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;

    }



    #3-Widget ul {

    margin: 0px 0px 0px 0px;

    padding: 0px 0px 0px 0px;

    color:#333;

    }



    #3-Widget ul li {

    line-height: 1.8em;

    list-style-type:none;

    border-bottom:0px solid none;

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3rfL33IQr8ITIvw8GLrxH7EPe32Stw_UmynXZA7lEKzFc9-ZkJoR2w_P-bNXSeB1BtSGusoAUsG7TZGOqF1QeVUfmWQ7w-aOihSTCz2fR2qINN1bmMG9kaak1X1tmG0MtKsauMn_txSc/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;

    margin-top:2px;

    }



    #3-Widget1 {

    width:299px;

    float:left;

    padding:0 20px 0 20px;

    }



    #3-Widget2 {

    width:299px;

    float:left;

    padding-right:15px;



    #3-Widget3 {

    width:299px;

    float:right;

    padding-right:15px;

    }


Keterangan :

Width : 960 => Bisa kamu ubah sesuai dengan ukuran Template anda.

Width : 299 => 'Panjang Widget' bisa kamu ubah sesuai dengan keinginan anda.


Biasa!!! kalau sudah di Copy Paste, jangan lupa Copy Paste juga script di bawah ini dan letakkan di <head> = untuk posisi 3 widget berada di atas dan </head> = posisi 3 widget di bawah.


    <div id='3-widget'>

    <b:section class='3-widget' id='3-widget1' preferred='yes'/>

    <b:section class='3-widget' id='3-widget2' preferred='yes'/>

    <b:section class='3-widget' id='3-widget3' preferred='yes'/>

    </div>


Lanjutkan!!!


Untuk membuat widget menjadi 2 caranya sangat mudah ko!!!


1. Untuk membuat 2 widget :


Kamu hapus aja Scriptnya yang seperti ini


     #3-Widget2 {

    width:299px;

    float:left;

    padding-right:15px;


tapi jangan lupa, hapus juga Script yang menyerupai di bawah ini


    <b:section class='3-widget' id='3-widget2' preferred='yes'/>



Simpan
Selasai

***Selamat Mencoba***


COMMENTS :




Don't Spam Here

0 komentar to “ Cara Menambahkan Widget / Tambah Target di blogger ”

Post a Comment

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda dan Saya follow juga. Blog 7ASK adalah Blog Do Follow, Terimakasih atas kunjungan Anda..!

 

Copyright © 2008-2011 All Rights Reserved. Mobile View Powered by 7ASK / WAWAN ADIE and Distributed by Template

Facebook Twitter Mykaskus