Home » » Cara Mudah Membuat Scroll Box dengan Background

Cara Mudah Membuat Scroll Box dengan Background

Written By Satriyo Arif on Sabtu, 28 Mei 2011 | 01.57

    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]>
  3. Dan Simpan kode berikut diatasnya (Sekaligus Demonya ada dibawah ini):


/* scroll
----------------------------------------------- */
.scrollboxs{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbFP-dOCFp4cURXvzxUBAw9GWCXCRc9DiWySFhnavDaLLDA1czCGAOnzJNMbtu2GNPqIYPJF5C3cvMgm8bogK_-z4Zvd0DNGr_TjT9TYMbyG1X39V5beAHdQ-tL4ZYUam2KTuxMq27TtQ/s1600/papers.jpg) repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc');
color: #940f04;
color:rgba(0,0,0,0.9);
border:1px solid rgba(0,0,0,0.5);
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 3px 3px 5px #000000;
-moz-box-shadow: 3px 3px 5px #000000;
-webkit-border-bottom-left-radius:10px;
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
text-decoration: none;
padding: 3px;
overflow: auto;
width: auto;
height: 150px;
padding-top:3px;
padding-bottom:3px;
}
.scrollboxs a, .scroll:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_npniKYXzF0NHmLPa2hDjDCLI3DCKo5kinfs27_Oxd0kQxlfK29b3VEWMVdFSSNqI7_qU-0u2DnDqlg7orIwqYn9cwYzWtKjQTvnJ4yz_PzmtjU3KS458y60Q2l6jEfNv-v8T8s4_X8p_/s1600/papers.jpg) repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3');
color:#000;
color:rgba(0,0,0,0.9);
border:1px solid rgba(0,0,0,0.5);
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-box-shadow: 3px 3px 5px #2E2E2E;
-moz-box-shadow: 3px 3px 5px #2E2E2E;
-webkit-border-bottom-left-radius:10px;
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
text-decoration: none;
padding: 3px;
overflow: auto;
width: auto;
height: 150px;
padding-top:3px;
padding-bottom:3px;
}
Untuk ukuran Height ,Width dan lainnya silahkan sesuaikan dengan keinginan kawan-kawan,

simpan template...

selanjutnya cara pemanggilannya pada Html atau pada edit html Posting:




Teks Yang ingin disimpan pada scroll box
Kontak Kami:
Jl. pemuda no. 4A (kawasan PKL stempel Kantor Pos Johar Semarang)
Phone : 085641156748
024 40256748
Pin BB : 311DAEE5

0 komentar :

Posting Komentar

Berita Terbaru :

 
Support : Stempel Semarang | Master Trik Blog | Belajar SEO
Copyright © 2013. Blog Tutorial Bojonegoro - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger