Cara Mudah Membuat Kotak Mode Scrool pada Artikel / Blog

http://www.ambyaberbagi.com/2015/01/cara-mudah-membuat-kotak-mode-scrool.html

Membuat Kotak / text area pada artikel atau blog, namun kali ini di lengkapi fitur scrool, ternyata cukup mudah dan cepat gaes,, hehe hal ini bertujuan untuk meringkas suatu materi, bisa juga untuk menaruh kode html/java script yang lumayan panjang dan lebar, karena biasanya seperti itu, agar tulisan kita terkesan lebih rapi dan cantik, sehingga lebih enak di pandang mata,, atau bagi yang pengen berbagi beberapa kode script banyak sekaligus,, untu pilihan misalnya, kan jadi lebih seger artikel kita kelihatanya,, hehe

Nagh kira kira seperti di bawah ini contohnya, asik kan bisa lebih menghemat tempat dan menambah daya keren tulisan kita hehe,, naagh monggo di simak

PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}

.PopularPosts ul {
margin:.5em 0;
list-style:none;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
}

.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}

.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:120%;
color:inherit;
text-decoration:none;
}

.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
top:50%;
right:-10px;
margin-top:-15px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}

/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

Nagh gimana? di atas tadi adalah kode widget poppular post warna warni yang lumayan keren,, monggo kalao mau di pake,, ya contohnya kayak yang di blog ini , atau simak tutorialnya

iklan dikit siapa tahu ada yang naksir juga hehe.,,

Oke daripada makin penasaran kita simak cara pembuatanya hehe,,

1. Persiapkan Tulisan

Seperti biasa pertama bikin artiklenya dulu bla bla bla,

trus kalau mau masukin kotak mode scrool ini kita ubah mode Compose ke mode HTML, seperti gambar di bawah ini

lihat di pojok kanan atas, kita klik yang HTML, kemudian di tulisan kita di posisi yang akan di buat kotak mode scrool ini kita masukan kode berikut

<div style="background-color: #6d6d6d; border: 2px solid #232323; height: 200px; overflow: auto; padding: 5px; width: auto;">

GANTI TULISAN ANDA DISINI

</div>

atau bisa langsung saja copas kode di atas ini lhow,,

2. Edit

Setelah itu ganti tulisan "GANTI TULISAN ANDA DISINI" dengan kode atau materi yang akan sobat masukan ke kotak text area mode scrool ini, gantinya bisa di blok kemudian langsung aja pastekan kode / materi yang sobat akan masukan ke kotak scrool ini.,, ohya gantinya terserah, bisa di mode Compose, atau bisa juga di mode HTML, bebas,

3. Keterangan :

* height:200px; adalah ukuran lebar atas bawah kotak scroll, nilainya boleh diganti.

* width: auto; adalah ukuran otomatis lebar samping kotak scroll.

* border:2px solid adalah ukuran tebal garis kotak scroll.

* #232323 adalah kode warna untuk garis pinggir.

* #6d6d6d adalah kode warna pada background kotak scroll.

4. Save dan selesai,

Simpan, atau sobat bisa lihat pratinjau terlebih dahulu, dan selesai,,

oke sobat begitu lah kira2 salah satu cara membuat agar artikel kita indah dan rapi, agar mudah di bacac oleh temen2 kita yang lain,, terimakasih telah membaca artikel Cara Mudah Membuat Kotak Mode Scrool pada Artikel / Blog dan semoga bermanfaat