Cara Membuat Widget Other Post Pada Blog

Berikut ini adalah langkah-langkah dalam membuat Widget Other Post, other post biasanya berisikan semua postingan-postingan yang ada di blog, berupa artikel dan berita-berita penting.

1. Langkah pertama anda harus masuk dulu ke dashboard blog anda.

2. Kemudian Masuk pada "Tata Letak" > "Tambah Gadget" > "HTML/JavaScript". 

3. Setelah langkah tersebut berhasil, kemudian Copy kan Script berikut ini :

<div class='widgetSystem'>
<div class='nama'><a href="URL LINK">Title Link</a></div>
<div class='kulit'>

<marquee align="center" direction="up" height="200" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="100%" >

<a href="URL LINK">Title Link</a> <br />
<a href="URL LINK">Title Link</a> <br />

<a href="URL LINK">Title Link</a> <br />

</marquee>

</div></div>
<style type='text/css'>
.widgetSystem {
    width: 95%;
    padding: 3px;
    background: #262829 url(#) no-repeat;
    margin: 5px auto;
    border: 1px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 1px 1px #fff;
    -moz-box-shadow: 0 0 1px 1px #fff;
    box-shadow: 0 0 1px 1px #fff
    }
.widgetSystem .nama {
    text-align: center;
    font-size: 1.5em;
    background: #00AFFA;
    background: rgba(153, 153, 153, 0.6);
    padding:5px;
    color: #FFF;
    font-family: "Times new roman", Arial, sans serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radits: 5px
    }
.widgetSystem .kulit {
    background: #FFFFFF;
    background: rgba(153, 153, 153, 0.5);
    height: 200px;
    overflow: auto;
    margin-top: 5px;
    border: 1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
    }
.widgetSystem a {
    text-decoration: none;
    margin: 1px;
    background: #00AFFA;
    background: rgba(153, 153, 153, 0.7);
    padding: 5px;
    display: block;
    color: #FFFFFF;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    font-family: "Arial", Arial, sans serif;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s
    }
.widgetSystem a:hover {
    background: #FF7D7D;
    color: #FFFFFF
    }
.widgetSystem li {
    list-style: none;
    color: #CCC;
    margin: 5px
    }
</style>

4. Klik Save, ubah ukuran dan tata letak sesuai kebutuhan anda.

*Keterangan

URL LINK  ganti sesuai dengan URL LINK Saudara.

Title Link  ganti dengan judul post atau label yang ingin ditampilkan.

WARNA HIJAU adalah perintah untuk Marquee berjalan naik turun / Dropdown. jika anda tidak menginginkannya silahkan dihapus script yang warna kuning.

terimakasih sudah mau berkunjung di situs www.podo-kumpulanartikel.tk