Pengunjung Ke :

Diberdayakan oleh Blogger.

Label

Kalender

Follow us

    

Loading

Cara membuat scroll di posting blogger

01.17 |
Hay semuanya , sekarang aku mau kasih tau nih gimana caranya membuat scroll dalam posting.Kalian tepat banget udah mampir ke blog ini. Scroll dalam posting berguna buat memfleksibelkan tampilan posting agar gak berantakan guys. Langsung Ke TKP aja deh !

1. Masuk ke blogger.com
2.Buat entri baru / artikel


3. Pilihlah bagian yang ingin di beri efek scroll. Seperti contoh

/* -- POPULAR POST -- */<br />
.PopularPosts .widget-content ul{margin:0;padding:7px !important;list-style-type:none;}<br />
.PopularPosts .widget-content ul li{position:relative;padding:10px !important;}<br />
.PopularPosts .widget-content ul li:first-child {background:#815540;width:93%}<br />
.PopularPosts .widget-content ul li:first-child:after{content:"01";}<br />
.PopularPosts .widget-content ul li:first-child + li{background:#E11E28;width:90%}<br />
.PopularPosts .widget-content ul li:first-child + li:after{content:"02";}<br />
.PopularPosts .widget-content ul li:first-child + li + li{background:#FD3C03;width:85%}<br />
.PopularPosts .widget-content ul li:first-child + li + li:after{content:"03";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li{background:#FECB09;width:80%;}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"04";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#6EBE27;width:75%;}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"05";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#149A48;width:70%}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li:after{content:"06";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#5BBFF1;width:65%}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li +li:after{content:"07";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li{background:#61469C;width:60%}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li{background:#863E86;width:55%}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li +li{background:#863E62;width:50%}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}<br />
.PopularPosts .widget-content ul li:first-child:after,<br />
.PopularPosts .widget-content ul li:first-child + li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li +li:after<br />
{position:absolute;top:1px;right:1px;background:#333;width:20px;line-height:1em;text-align:center;color:#fff; font-size:12px !important; font-weight:bold}<br />
.PopularPosts .widget-content ul li .item-thumbnail{float:left;border:none;margin-right:10px;padding:0;width:30px;height:90px}<br />
.PopularPosts .widget-content ul li a{color:white;text-decoration:none}

4. Copy pastekan kode berikut ini di atas posting yang ingin di beri efek scroll

<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;">
5. Tutup Dengan kode html </div>
6 . Dan hasilnya pun akan menjadi seperti ini 
/* -- POPULAR POST -- */<br />
.PopularPosts .widget-content ul{margin:0;padding:7px !important;list-style-type:none;}<br />
.PopularPosts .widget-content ul li{position:relative;padding:10px !important;}<br />
.PopularPosts .widget-content ul li:first-child {background:#815540;width:93%}<br />
.PopularPosts .widget-content ul li:first-child:after{content:"01";}<br />
.PopularPosts .widget-content ul li:first-child + li{background:#E11E28;width:90%}<br />
.PopularPosts .widget-content ul li:first-child + li:after{content:"02";}<br />
.PopularPosts .widget-content ul li:first-child + li + li{background:#FD3C03;width:85%}<br />
.PopularPosts .widget-content ul li:first-child + li + li:after{content:"03";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li{background:#FECB09;width:80%;}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"04";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#6EBE27;width:75%;}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"05";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#149A48;width:70%}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li:after{content:"06";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#5BBFF1;width:65%}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li +li:after{content:"07";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li{background:#61469C;width:60%}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li{background:#863E86;width:55%}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li +li{background:#863E62;width:50%}<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}<br />
.PopularPosts .widget-content ul li:first-child:after,<br />
.PopularPosts .widget-content ul li:first-child + li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li:after,<br />
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li +li:after<br />
{position:absolute;top:1px;right:1px;background:#333;width:20px;line-height:1em;text-align:center;color:#fff; font-size:12px !important; font-weight:bold}<br />
.PopularPosts .widget-content ul li .item-thumbnail{float:left;border:none;margin-right:10px;padding:0;width:30px;height:90px}<br />
.PopularPosts .widget-content ul li a{color:white;text-decoration:none}


 Thank you :)

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Clock

Popular Post

  • Cara membuat tombol Back to top
    Hai Kali ini saya akan memberi tau cara membuat tombol Back to top yang memberi efek lembut.... Ayo ikuti tutorialnya semoga bermanfaat yah...
  • Cara memasang cctv pada blog
    Kamera CCTV di gunakan untuk memantau setiap kegiatan di suatu tempat seperti di Mall , Toko , Rumah Dll supaya aman dan bisa melihat denga...



Blogger Template created with Artisteer by .