Box Posting Kode HTML dg Animasi: Animated Box for HTML Post

Bagi beberapa sobat blogger yang demen ngelayap cari info baru tentang kode html dan segala bentuk desainnya pasti pernah menjumpai box posting kode html yang dibuat dalam bentuk animasi. Yang teramat sering terlihat adalah box yang ketika tersentuh cursor ukurannya bertambah lebar. (he ... he ... nggak bertambah panjang kaya punya sampeyan, broer! Asal tersentuh sedikit saja sudah molor sepanjang tiang listrik, he ...). Jika mungkin diantara sampeyan ada yang membatin tentang kode html seperti apa yang digunakan, mungkin melalui posting ini semua akan terjawab. Kita nggak akan terlalu merumitkan diri dengan javascript yang sering menjadi penambah lemotnya loading blog. Cara terpraktis dan termudah aku kira akan jadi solusi yang paling tepat untuk mendapatkan box serupa dengan fungsi yang setara. Ya ... kita manfaatkan saja CSS3. Asyik, lho hasil box yang berhasil kita buat. Nggak kalah dah sama yang biasa terlihat. Ada dua bentuk box, malah. Silahkan sampeyan pilih yang mana yang akan digunakan. Oye ... silahkan lihat saja demonya. KLIK yang di bawah ini:

D E M O

Cara Membuat Box Beranimasi untuk Posting Kode HTML

1. Login : Login to BloGGeR (login ke BloGGeR) dengan cara menuliskan User Name (Nama Pengguna) atau bisa juga sampeyan gunakan Email Address. Jangan lupa untuk menuliskan Password (Sandi) baru lakukan KLIK "Login".
2. Dasboard (Dasbor) : Setelah masuk di halaman ini, cari dan KLIK link "Design (Rancangan)".
3. Beberapa saat kemudian kita akan melihat halaman baru yaitu "Page Element (Element Laman)". KLIK "Edit HTML".
4. Kita akan melihat kode HTML penyusun blog. Disinilah kode CSS baru akan kita tambahkan. Cari kode ]]></b:skin>.
5. Copy dan pastekan kode CSS Box Posting Kode HTML dg Animasi-1 tepat di atas kode tersebut seperti yang terlihat di bawah ini:

Kode CSS Box Posting Kode HTML dg Animasi-1

pre.loreng{
      display:block;
      position:relative;
      margin:20px 0;
      font-family:Georgia;
      font-size:12px;
      color:#fff;
      line-height:18px;
      padding:17px 10px;
      border:2px solid #333;
      border-right:none;
      background:#888;
      width:300px;
      max-height:400px;
      opacity:0.9;
      filter: alpha(opacity=90);
      transition:all 1s ease-out;
      -o-transition:all 1s ease-out;
      -moz-transition:all 1s ease-out;
      -webkit-transition:all 1s ease-out;
      -ms-transition:all 1s ease-out;
      overflow: hidden;      
}
pre.loreng span{
      color:#aaa;
} 
pre.loreng:hover{
      width:555px;
      opacity:1.0;
      overflow:auto;
      color:#660000;
      background:#0099FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKtPrCgCOb8Lq8UwryCv9cSUce37pkrzHhyMKpPanNtxPO0FLVjjHOSRji9Mm45cPwx5JDn9lFiPO7rpN84U8dP-Qc_nUFpIUCmHFEhG1-XCpBvgi7AfquKrJYRY9TeXetYtE4F5e_Ir4/h120/bgPreBlueWhiteV36H1.gif);
      filter:alpha(opacity=100); 
      border-left:15px solid #666;
      border-right:3px solid #666;
      z-index:999;
}

]]></b:skin>

6. Lanjutkan dengan KLIK Simpan (SAVE) Template.

Kode yang digunakan untuk posting

Untuk posting kode HTML caranya sangat sederhana sekali. Tuliskan seperti contoh di bawah ini.

<pre class="loreng">&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;style type="text/css"&gt;
<span> /* span digunakan untuk menuliskan keterangan tentang kode html */ </span>
.box{
      width:400px; <span> /* lebar boks */ </span>
      height:300px; <span> /* tinggi boks */ </span>
      margin:20px auto;
      padding:20px;
      border:2px solid #000;
      background:lightblue;
      border-radius;10px;
}
&lt;/style&gt;</pre>

Anda dapat juga menggunakan bentuk yang ke-2 dengan menggunakan kode CSS Box Posting Kode HTML dg Animasi-2. Apabila menggunakan yang ini, untuk posting gunakan kode seperti contoh berikut:

<pre class="doreng">&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;style type="text/css"&gt;
<span> /* span digunakan untuk menuliskan keterangan tentang kode html */ </span>
.box{
      width:400px; <span> /* lebar boks */ </span>
      height:300px; <span> /* tinggi boks */ </span>
      margin:20px auto;
      padding:20px;
      border:2px solid #000;
      background:lightblue;
      border-radius;10px;
}
&lt;/style&gt;</pre>

Kode CSS Box Posting Kode HTML dg Animasi-2

pre.doreng{
      position:relative;
      display:block;
      font-family:Tahoma;
      font-size:12px;
      color:#993300;
      line-height:18px;
      padding:17px 10px;
      border-top:2px solid #222;
      border-bottom:2px solid #222;
      border-left:10px solid #222;
      background:blue url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKtPrCgCOb8Lq8UwryCv9cSUce37pkrzHhyMKpPanNtxPO0FLVjjHOSRji9Mm45cPwx5JDn9lFiPO7rpN84U8dP-Qc_nUFpIUCmHFEhG1-XCpBvgi7AfquKrJYRY9TeXetYtE4F5e_Ir4/h120/bgPreBlueWhiteV36H1.gif);
      width:300px;
      max-height:400px;
      border-right:20px solid #000;
      opacity:0.7;
      filter:alpha(opacity=70);
      transition:all 0.2s ease-out;
      -o-transition:all 0.2s ease-out;
      -moz-transition:all 0.2s ease-out;
      -webkit-transition:all 0.2s ease-out;
      -ms-transition:all 0.2s ease-out;
      overflow:hidden;      
}
pre.doreng span{
      color:#999;
} 
pre.doreng:hover{
      color:#eee;
      border-top: 2px solid #666;
      border-bottom:2px solid #666;
      border-left:20px solid #555;
      border-right:4px solid #555;
      background:red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBe-HUcmGf4tOQZW3AGcGhyrFqupPuQtGb85XgMyRYJPGcF_5hxGIRyPwUpFYYPMvJF2W9o4A5rlLhYVk3pLd5hZ-ri2RqfHMGU0w4Z8FeX8XphhpLdsLimbO55Hf7LzK_2xUJtyQcgBk/h120/bgPreGHrayH1V36.png);
      width:555px;
      opacity:1.0;
      overflow:auto;
      filter:alpha(opacity=100);
      z-index:999;
}
pre.doreng:hover span{
      color: #888;
}

]]></b:skin>

Catatan/Keterangan :

1. Lakukan pengaturan width pada syntax pre.loreng dan pre.doreng untuk penyesuaian dengan lebar box posting (width:300px;).
2. Lakukan pengaturan width pada syntax pre.loreng:hover dan pre.doreng:hover (lebar saat cursor di atas box) agar sesuai dengan ukuran lebar halaman blog (width:555px;)

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Jemuah WAGE, April, 20, 2012

» Happy Blogging - gubhugreyot «