Scroll box adalah kotak yang berisi tulisan atau gambar atau lainnya yang menggunkan fungsi scroll. Selain gambar dan tulisan, sobat dapat mengisi scroll box tersebut dengan kode script / html. Memasang scroll box sangat bermanfaat sekali untuk kalian yang ingin membuat Linklist / blogroll agar panjang blogroll tersebut tidak membuat loading blog kita lambat. Scroll Box juga berguna untuk meminimalisir script pada blog jika kamu ingin memasang atau tutorial tentang coding pada blog.
Contoh :
Silahkan kamu ubah ukuran lebar dan panjang sesuai dengan ke inginan kamu. Sekian Artikel tentang Cara Membuat Scroll Box Pada Blog Semoga Bermanfaat.
Cara Membuat Scroll Box Pada Blog
<div style="overflow:auto;width:300px;height:100px;padding:10px;border:1px solid #eee">
Isi Scroll Box
</div>Contoh :
pre code {
display: block; padding: 0.5em;
color: #DCCF8F;
background: url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left top #181914;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
color: #586e75;
font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
color: #B64926;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #468966;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #b58900;
}
pre .css .attribute {
color: #b89859;
}
pre .css .number,pre .css .hexcolor{
color: #DCCF8F;
}
pre .css .class {
color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
color: #cb4b16;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #073642;
}
display: block; padding: 0.5em;
color: #DCCF8F;
background: url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left top #181914;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
color: #586e75;
font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
color: #B64926;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #468966;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #b58900;
}
pre .css .attribute {
color: #b89859;
}
pre .css .number,pre .css .hexcolor{
color: #DCCF8F;
}
pre .css .class {
color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
color: #cb4b16;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #073642;
}
Silahkan kamu ubah ukuran lebar dan panjang sesuai dengan ke inginan kamu. Sekian Artikel tentang Cara Membuat Scroll Box Pada Blog Semoga Bermanfaat.
