Cara Menambahkan Kotak Scrol di Postingan Blog

Sempat terfikirkan bagi saya ketika saya sedang nulis  diblog yang terdapat source kode yang sangat panjang sekali sehingga bisa membuat tulisan blog panjang kebawah padahal source kode tersebut kebanyakan adalah kode htlm/css/javascript yang cuman dikopikan ke blog anda untuk memperlengap tampilan serta kode-kode html sehinggabisa mempercantik tampilan blog anda dan tidak mengganggu dari tampilan tersebut, oke tidak usah panjang-panjang banget saya perlihatkan contohnya seperti berikut,,..,.,

<style type="text/css">  
<#mode-miring,#mode-depan,#mode-pindah
{  
  width:70px;  
  height:18px;  
  border:1px solid #999;  
  box-shadow: 2px 2px 5px #aaa;  
  padding:5px;  
  font-size:12px;  
  font-weight:bold; 
  background: #faa518;  
  text-align:center;  
  -webkit-transition: all 0.4s ease-in-out;  
  -moz-transition: all 1s ease-in-out;  
  -o-transition: all 1s ease-in-out;
}>
 
#mode-miring a, #mode-depan a, #mode-pindah a
{  
  color:#000;  
  text-decoration:none;
} 

#mode-miring a:hover, #mode-depan a:hover, #mode-pindah a:hover
{  
  color:#0000ff;  
  background-color:#ffff00;  
  text-decoration:none;
} 

#mode-miring:hover
{
    -webkit-transform: rotate(180deg) scale(1);
    -moz-transform: rotate(180deg) scale(1);
    -o-transform: rotate(180deg) scale(1);
    //background:#ffff00;
-moz-transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;

-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}  

ul.menu-semua
{
   list-style:none;
   margin:0;
   padding:0;
} 

ul.menu-semua li
{
   display:inline-block;
   width:85px;
} 

#mode-depan:hover
{
    -webkit-transform: scale(1.3);
    -webkit-transform: translate(20px,-10px) scale(1.3);
    background:#ffff00;
}  

#mode-pindah:hover 
{
    margin-left:20px;
    padding-left:5px;
    background:#ffff00;
} 
</style>


<div id="mode-miring"><p><img src="http://readmore1234.googlecode.com/files/Banner-Blog.gif" /></p></div><br />

jika anda ingin mengganti gambarnya maka anda tinggal merubah code ini

<div id="mode-miring"><p><img src="http://readmore1234.googlecode.com/files/Banner-Blog.gif" /></p></div><br />

menjadi link gambar yang anda punya contohnya seperti ini

<div id="mode-miring"><p><img src="http://desaindigital.com/wp-content/uploads/2010/12/tutorial-ikon-bola-dunia/tutorial-ikon-bola-dunia-5.jpg" /></p></div><br />

diatas adalah contoh dari sebuah code yang sangat panjang sekali apabila tidak dipergunakan atau dimasukan kedalam sebuah postingan pasti ada sebagian yang males bacanya tapi disini saya akan memberikan sebuah kode sehingga sourcode yang panjang akan lebih irit dan tidak menghabiskan page blog silahkan copy code dibawah ini

Silahkan Masukan kode kedalam kotak ini

<div style="background-color: white; border: 1px solid rgb(191, 189, 189); height: 100px; overflow: auto; padding: 5px; text-align: justify; width: 400px;">
<blockquote class="tr_bq">
<span style="font-family: Georgia,&quot;Times New Roman&quot;,serif;"><span style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">Silahkan Masukan kode kedalam kotak ini<br /></span></span></blockquote>
</div>

Okeh kalau sudah maka tinggal simpan editan blog anda dan apabila ingin merubah kata-katanya dengan sourcode yang anda posting maka anda tinggal merubah text yang bertulisan "Silahkan Masukan kode kedalam kotak ini" dengan source code anda, baiklah segitu saja postingan yang saya tulis semoga dapat membantu serta bermanfaat bagi kelancaran blog anda.