Untuk lebih jelasnya andat bisa melihat contoh dibawah ini :
Contoh Tulisan :
Postingan kali ini adalah Cara Membuat Kolom Scroll Pada Postingan Blog. Mungkin sebagian blogger ada yang masih kurang paham dengan Scroll Pada Postingan. Fungsi Kolom Scroll dalam Postingan diblog adalah untuk meringkas atau membuat simple tulisan atau scrip yang tentunya panjang yang anda posting di blog, sehingga tulisan atau postingan ruangnya bisa menjadi lebih pendek dengan menggunakan Scroll Pada Postingan Blog.
Contoh Kode Script :
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvKBbw-OpsR5kr53X_IEwWWnUin956l7ezVApS_af8XaJ47v1q4M1YpUFafMItdzU7ynl8LbWIDTUxOpqrjEW0-QpQwdA_pv1PCavfMT-xWOMldnSX-2pgKQFvdmN184VeCMLXu8UCAoU/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:30px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI4pgbBGkkrb9To5ZU8T5pGbrvsT7DmZVtIoYSrDztig8SnG8h9XVAlNHQhwxHX9CEdrqCD1ytWhaPfl9K_m2RMK9Pqim3xmL5IdQe1RoU3OjQ79y4t8PGsXo6doufL3hdxZHPSkLrZXs/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvKBbw-OpsR5kr53X_IEwWWnUin956l7ezVApS_af8XaJ47v1q4M1YpUFafMItdzU7ynl8LbWIDTUxOpqrjEW0-QpQwdA_pv1PCavfMT-xWOMldnSX-2pgKQFvdmN184VeCMLXu8UCAoU/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:30px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI4pgbBGkkrb9To5ZU8T5pGbrvsT7DmZVtIoYSrDztig8SnG8h9XVAlNHQhwxHX9CEdrqCD1ytWhaPfl9K_m2RMK9Pqim3xmL5IdQe1RoU3OjQ79y4t8PGsXo6doufL3hdxZHPSkLrZXs/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
Apabila Anda tertarik untuk Membuat Scroll Pada Tulisan di postingan silahkan Anda Copy kode script dibawah ini :
<div style="background-color: white; border: 1px solid rgb(191, 189, 189); height: 100px; overflow: auto; padding: 5px; text-align: justify; width: 400px;">Masukkan Tulisan atau teks sobat disini</div>
Keterangan !!!!
100px : Untuk mengatur tinggi kolom scroll
400px : Untuk mengatur lebar kolom scroll
Masukkan Tulisan atau teks sobat disini : Silahkan Anda ganti dengan tulisan atau kode script yang anda inginkan.
Nah gimana, Mudah bukan,!!! Cara Membuat Kolom Scroll Pada Postingan Blog, Semoga bermanfaat.
No comments:
Post a Comment