CSS3 Animated Image Enlarge CSS3 Animated Image Enlarge

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Membuat Read More Di Atas Postingan Membuat Read More Di Atas Postingan

Yang bisa berada di posisi atas tidak hanya blog title, header image atau para petinggi negeri dan mereka yang berkantong tebal semata. Atau bukan pula hanya para lelaki atau perempuan dewasa saja. Read more..., barang secuil yang biasanya hanya dengan pasrah menerima takdir di buatkan gubhug di bawah posting, dia bisa saja diletakkan di atas posting. Ibarat putaran roda nasib, jika dipindah ke atas mungkin dia akan merasa lebih senang karena sedikit bisa "memamerkan betapa pentingnya dia". Ya ...! Mengapa tidak?! Membuat read more di atas posting aku kira belum banyak dilakukan blogger. Berbeda dalam tampilan blog tentu akan menarik, apalagi bila yang kita lakukan sama sekali tidak akan membuat penampilan bertambah buruk. Sampeyan bisa menghilangkan/membuang read more yang sudah sekian lama bernasib mengenaskan di bawah posting, atau bisa juga tetap mempertahankannya. Jika itu yang dilakukan maka dalam blog sampeyan akan mempunyai dua buah read more. Yang satu "nangkring di atas posting" (sambil plempas-plempus mengepulkan asap rokok!) dan yang satunya tetap dengan setia akan menunggu datangnya kentut di bawah posting! He .... he .... Pasti asyik, antik, menarik dan pokoknya .... ehmmmm coba dulu saja, dah!

Ehh ... eh .... kelupaan lagi! Uh...! Dasar otak klo sudah "terjangkit virus kepikunan". Ah ... apapun pasti ada yang terlewat. Ini, lhoh ... Di depan read more yang di atas posting itu masih ada embel-embelnya! Sebuah tampilan menarik berupa nama author/blogger. Jadi pada intinya di atas posting (artikel) yang kta buat, di sebelah kiri ditampilkan nama author dan disebelah kanan akan bertengger si read more dengan penuh keanggunan! Heh ... heh ... heh ... pasti cantik, ya?! Mo coba, nggak? Pasti penasaran, khan?! Heh ... heh.... heh .... padahal kali ini nggak ada demo, nih! Biar saja, dah! Biar sampeyan pada penasaran sekalian! Heh ... heh ... heh ...! Tuh ... biar nggak ada demo tapi sudah aku siapkan sebuah screenshot. Yah .... daripada nggak ada sama sekali.

O... ya ..., kali ini kita nggak akan buat pakai kode CSS segala. Kita buat yang simple-simple saja. Kita hanya akan pakai sederet xHTML yang bisa langsung di simpan di bagian body. Sederhana, cepat, gampang dan hasilnya...  Hmmmmm. Tapi tidak menutup kemungkinan, lhoh ... Jika sampeyan mau, buat saja menggunakan kode CSS, kemudian padukan dengan CSS3. Pasti akan jauh lebih josh!

Buat Read More di atas Posting plus read more lama tetap dipakai

• Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi). Setelah semua tertulis dengan benar, klik "Login".
• Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".
• Design/Rancangan : Cari dan klik "Edit HTML".
• Edit HTML-1 : KLIK "Download Template Lengkap" untuk melakukan "back-up" templates. Tunggu beberapa saat kemudian simpan file template di folder PC.
• KLIK "Expand Widget Templates".
• Tetap di Edit HTMl, kemudian Cari kode <div class='post-body entry-content'>. Gunakan Ctrl+F untuk memudahkan pencarian kode!
• Copy-Paste : Copy dan ganti kode di atas dengan kode HTMl di bawah.
• SAVE Templates/Simpan Template : KLIK SAVE Templates dan lanjutkan dengan membuat posting menggunakan read more.
• Buka hasilnya di halaman utama untuk mengetahui tampilan read more baru sampeyan!

Kode Read More

<div class='post-body entry-content'>
<div style='border-bottom:1px dotted #444;margin-bottom:10px;padding:1px 0;height:25px;text-shadow:1px 1px 1px #000;'>
<span style='font-style:italic;color:yellow;'>posted by: <span style='color:blue;'>gubhug reyot</span></span>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link' style='float:right;'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title' style='text-decoration:none;'>
<span style='font-family:Cataneo BT;font-weight:normal;font-size:16px;padding-right:20px; background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/blueloop.gif) right center no-repeat;'>Read More ....</span>
<!-- <data:post.jumpText/> -->
                </a>
      </div>
    </b:if>
</div>
<div style='clear:both;'/>

Buat Read More di atas Posting - Read More Lama di hilangkan

Caranya sama dengan cara di atas. Kode HTML dan penempatan kode juga sama, tetapi tolong cari dan hapus kode HTML yang seperti terlihat di bawah ini! Kode di bawah adalah kode read more lama yang selama ini di gunakan.

<b:if cond='data:post.hasJumpLink'>      <div class='jump-link'>          <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>              <data:post.jumpText/>          </a>      </div> </b:if>

Untuk memudahkan dalam mencari kode di atas, cari dulu satu kode misalnya :

<data:post.jumpText/>

Setelah ditemukan maka di atas dan di bawahnya akan terlihat seluruh kode yang dimaksud di atas.

CSS Accordion Menu CSS Accordion Menu

Meskipun hingga detik ini beberapa kode css3 belum mampu tersuport oleh Internet Explorer, tapi tampaknya perkembangan pesat yang kian hari terasakan tak mungkin akan di abaikan begitu saja. Banyaknya kemungkinan penciptaan fungsi baru dengan hanya menggunakan kode css ini membuat pengguna internet mempunyai banyak pilihan selain javascript. Tentu saja dengan hanya menggunakan kode css akan membuat beban yang ditanggung blog menjadi banyak terkurangi, dus ... akhirnya banyak kemungkinan penggunaan css-3 menjadi sebuah pilihan terfavorit. Mengenai Internet Explorer (IE) dan kompatibilitasnya, besar kemungkinan browser keras kepala ini akhirnya mau tak mau akan merobmak segala kebijakan yang selama ini membuatnya banyak ditinggalkan pengguna. Sykur-syukur kebijakan baru yang lebih akomodatif terhadap kepentingan pengguna ini akan secepatnya direalisasikan. Ya ... bukankan hal yang terjadi seperti selama ini akhirnya membuat mereka sendiri yang paling dirugikan?!

CSS-3 Accordion Menu selain irit kode dan yang jelas tanpa sedikitpun javascript, namun jangan sekali-kali menyepelekan fungsi, kinerja dan tampilannya. Desain yang minim penggunaan background image ini selain cantik dan menarik juga andal untuk digunakan sebagai wadah menu blog dan segala tetek bengek yang mungkin butuh tempat sebagai wadah tanpa perlu banyak makan tempat. Sampeyan dapat menggunakan setiap bagian dari accordion ini sebagai tempat meletakkan dan menyimpan seluruh daftar posting blog atau menggabungkannya dengan image, teks atau yang lain. Cukup gunakan kode yang sesuai di tiap box yang tersedia dan semua dengan indahnya akan tertampilkan.

Meskipun pada kode yang disertakan membuat css-3 accordion menu serbaguna ini hanya mempunyai lebar 200px, namun dengan amat mudah pula sampeyan merubahnya menjadi sesuai kenutuhan hanya dengan mengganti 2 kode saja yang berkaitan dengan width. Simple dan amat mudah dilakukan siapapun. O .., ya tentu saja semua yang tersajikan ini sudah melalui uji tampil di blogspot dan pastinya kompatible untuk semua browser (fungsi accordion-nya). Jangan kecewa apabila di awal posting ini kita katakan masih terkendala dengan IE karena sekalipun beberapa tidak mampu disuguhkan dengan baik dan sempurna di IE, namun setelah sampeyan melihatnya pasti tak akan kecewa. Ya ... karena si accordion ini masih mampu memperlihatkan kecantikannya di IE.

Kode CSS "CSS-3 Accordion Menu Serbaguna

Kode CSS:Accordion Menu Serba Guna

<style type="text/css">
#bgsGR_Accord { 
      background:#FFFFFF; 
      width:205px;
      padding:2px;
      border:1px solid #666;
      margin-top: 20px;
      border-radius:5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      margin-bottom: 2px;
      box-shadow:0 0 12px #888;
      -moz-box-shadow:0 0 12px #888;
      -webkit-box-shadow:0 0 12px #888; 
}
#bgsGR_Accord .bag {
      width: 200px; /*original code by: http://gubhugreyot.blogspot.com */
      height: 28px;
      overflow: hidden;
      transition: height ease-in-out 500ms;
      -o-transition: height ease-in-out 500ms;
      -moz-transition: height ease-in-out 500ms;
      -webkit-transition: height ease-in-out 500ms;
      border: 1px solid #999;padding:2px;padding-bottom:0;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      margin-bottom: 2px;
      box-shadow:0 0 12px #999;
      -moz-box-shadow:0 0 12px #999;
      -webkit-box-shadow:0 0 12px #999;
      background:#b0cfe9  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTP7O08BC6vmnmsP8tv1WShhaQA-1YzoAW9PQfzpHXcixuZYpJQFlb8HvGYrPdkCCpByC_tFMhkSDE4fSwWDNMVhFSGpTdb1Zj4lrCeMvXdpA4Pa2byaoGuEQ1-F3gjE1Y2AjgTfQzG4/s320/bgGradBlueV339H1.gif) top left repeat-x;   
      background:-moz-linear-gradient(bottom, #b5dcfb, #fff);
      background: -webkit-gradient(linear, center bottom, center top, from(#b5dcfb), to(#fff)); 
}
#bgsGR_Accord .bag a {
      display: block;
      height: 18px; /*original code by: http://gubhugreyot.blogspot.com */
      line-height: 20px;
      background: #9999FF url(http://4.bp.blogspot.com/_550XeJhg_o8/TQzXGeeUzVI/AAAAAAAAAyg/pDpL-rfQuZM/s1600/AnimaBlueLoop.gif) left top no-repeat;
      background-position:4px 6px;
      padding: 5px;
      color:#1e1e1e;
      text-decoration: none;
      padding-left:30px;
      font-family:Droid Serif;
      font-weight:bold;
      text-shadow:1px 2px 1px #fff;
}
#bgsGR_Accord .bag a:hover{
      color:red;
      text-shadow:1px 2px 1px #000;
} #bgsGR_Accord p {
      height:auto;
      min-height:height: 150px; 
      padding: 5px;
      font-size:11px; 
      font-family:helvetica;
      color:#330033;
}
#bgsGR_Accord .bag p img {
      width:60px;
      float:left;
      margin:0 10px 0 0;
      padding:3px;
      border:3px solid #222;
      border-radius:10px;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      box-shadow:4px 4px 4px #888;
      -moz-box-shadow:4px 4px 4px #888;
      -webkit-box-shadow:4px 4px 4px #888;
}  #bgsGR_Accord div:hover { 
      height:auto;
      min-height: 180px;
}
#bgsGR_Accord div:hover a {
      background:lightblue url(http://2.bp.blogspot.com/_550XeJhg_o8/TQzWUXTpFgI/AAAAAAAAAyc/7UG4n7ebhkw/s1600/ArrowDownAnimaBlue.gif) left top no-repeat;
      background-position:4px 6px; 
      border-bottom: 1px solid #666666;
      font-weight: bold;
}
#bgsGR_Accord ul.acur{
      background:#ccc;
      border:1px solid #444444;
      list-style:none;
      margin:0;
      padding:10px 2px; }
#bgsGR_Accord ul.acur li{
      border:1px solid #333333;
      border-radius:5px;
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
      margin-bottom:2px;
      background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8J3YWUeTMeU7KU1lgKdL9hjPgVfJxUKQPnDnwVrR03ZZ5kVm0X1kYKxctp1nX1XcmVdW0pjn3AKp_U9vVHvM1iw5ONLDMeo7w300TFVsHRR-OoKXxdMF9zJJ_huXbNxIPnyjpGn_H2i4/s1600/bgFadeBlue.png
http://i31.tinypic.com/ojkw9i/bgsGR/images/bgFadeBlue.jpg) top left repeat-x;
      background-position:0 2px;
      padding:1px 2px;
      box-shadow:1px 2px 1px #fff;
      -moz-box-shadow:1px 2px 1px #fff;
      -webkit-box-shadow:1px 2px 1px #fff;
}
#bgsGR_Accord ul.acur li:hover{ 
      background:#eee;
} #bgsGR_Accord ul.acur li a{
      background-position:-16px 8px;
      font:11px Droid Serif; 
      font-weight:600;
      color: #000099;
      text-shadow:0px 1px 1px #fff;
      padding:8px 0 2px 15px;
      background: -moz-linear-gradient(bottom, #00abeb, #fff);
      background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff)); 
}
#bgsGR_Accord ul.acur li a:hover{text-shadow:0px 1px 1px #000;
      color:#FF0000;
      background: red url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZTbym1tmWrywPD2NNeL6URepK5I8yRZDwz2WM4LCjMZyen0YHQog3nQ5cvz9Y8Gp71Zdg_ly2ODIOSwgBD5coPmX7CDJkIQI2rsNdSCBIEe7UqCEVHO7g8uzbk3KbzS0zkqCMRUA5UH8/s1600/bgBlackBlueLineV40H5.gif) bottom repeat-x;
} </style>

Kode CSS-2

<!--[if IE]>
<style type="text/css">
#bgsGR_Accord {filter:progid:DXImageTransform.Microsoft.Shadow(color='#888888',Direction=135,Strength=6);}
</style>
<![if endif]-->

Box Serba Guna Sidebar Widget Box Serba Guna Sidebar Widget

Box serbaguna untuk sidebar widget ini dibuat dengan memanfaatkan kode CSS3 yang saat ini menjadi satu pilihan terbaik desain HTML, seperti border-radius, box-shadow atau drop-shadow serta sedikit CSS3 transition untuk membuat animasi. Box bisa secara langsung digunakan sebagai box (wadah) untuk semua widget yang ada di sidebar, termasuk setiap judul widget akan terwadahi di dalamnya. Meskipun demikian, bila diinginkan, dengan sedikit merubah kode maka box ini bisa berfungsi hanya sebagai box untuk isi widgetnya saja (judul widget di luar box). Pada pengembangan selanjutnya, jika sampeyan hanya akan menggunakan box ini untuk salah satu widget saja, maka tinggal lakukan perubahan satu kode maka box hanya akan menjadi wadah bagi 1 (satu) buah widget. Apabila sampeyan ingin merubahnya sebagai scroll box, maka tinggal tambahkan height: ...px; dan overflow: auto;. Jadilah sebuah box serbaguna yang siapapun dengan mudah mampu melakukannya. Ya ... karena semua hanya perlu dilakukan tanpa mengadakan perubahan pada kode-kode yang ada di template. O ..., ya, kali ini kita tidak menggunakan bentuk demo karena dengan mudah dan cepat akan dapat sampeyan lakukan sendiri dengan hasil yang secara cepat pula dapat sampeyan lihat.

Kode CSS Box Serbaguna Sidebar Widget

#sidebar .widget{ margin: 20px 4px; border: 1px solid #999; padding: 10px 6px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3333FF; -moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3333FF; -webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3333FF; -o-transition: 1s ease-out; -moz-transition: 1s ease-out; -webkit-transition: 1s ease-out; } #sidebar .widget:hover { border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #0066FF; -moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #0066FF; -webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #0066FF; }

Langkah untuk menggunakan Box Serbaguna

• Login ke Blogger
• Ketika halaman dasbor sudah terbuka, KLIK link "Design" atau "Rancangan".
• Akan terlihat "Elemen Laman". Lanjutkan dengan KLIK link "Edit HTML".
Halaman Edit HTML : Di sinilah kode CSS akan di simpan. Silahkan cari kode ]]></b:skin>. Kode ini terletak di atas <body>. Supaya mudah mencarinya gunakan Ctrl+F. Tekan bersamaan (pada keyboard), baru kemudian tuliskan ]]></b:skin> dan kemudian KLIK untuk pencarian. Bila belum berhasil, silahkan buka di Special Tutorials di menu sebelah kiri. Disana tersedia beberapa tutorial dasar yang teramat penting termasuk cara cepat mencari kode HTML di template.
• Copy kode CSS di atas dan pastekan di atas ]]></b:skin>.
• KLIK "SAVE Templates" atau "Simpan Template".
• Buka blog untuk melihat hasilnya.

Catatan

Kode di atas berfungsi sebagai box untuk seluruh widget di sidebar (termasuk judulnya). Contoh widget di sidebar : widget archive, label atau categories, search box, follower/pengikut dan widget yang lain.

Judul widget di luar box

Dengan merubah sedkit kode CSS tersebut, maka yang terwadahi hanya isi widgetnya saja. Judul akan tertampilkan di luar box. Buat kodenya seperti ini :

1. #sidebar .widget di rubah menjadi : #sidebar .widget-content
2. #sidebar .widget:hover di rubah menjadi : #sidebar .widget-content:hover

Kode yang lain tidak dilakukan perubahan. Hanya pada kode di atas!!!

Box hanya untuk 1 (satu) widget

Misalnya yang akan di beri box adalah widget Label atau Categories.

Rubah kode menjadi seperti berikut:

Judul dalam box

1. #sidebar .widget di rubah menjadi : #Label1
2. #sidebar .widget:hover di rubah menjadi : #Label1:hover

Judul di luar box

1. #sidebar .widget di rubah menjadi : #sidebar #Label1 .widget-content
2. #sidebar .widget:hover di rubah menjadi : #sidebar #Label1 .widget-content:hover

Perubahan seperti di atas berlaku juga untuk seluruh widget di sidebar.

Bagaimana mencari kode baru yang di tambahkan ?

Di template sampeyan di bawah <body> terdapat kode untuk widget termasuk yang ada di sidebar. Tarik cursor ke bawah atau gunakan "Ctrl+F" dan temukan kode seperti di bawah ini :

<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Label1' locked='false' title='Categories' type='Label'/> <b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/> <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/> <b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/> <b:widget id='HTML9' locked='false' title='Flag Counter' type='HTML'/> </b:section> </div>

Kode-kode berwarna oranye inilah yang digunakan untuk menambah kode sehingga hanya widget tertentu yang terwadahi dalam box. Silahkan sampeyan pilih widget mana yang akan di kasih box! Tentu saja kode tersebut tidak akan sama persis dengan kode yang ada di template sampeyan, akan tetapi pada posisi kode berwarna oranye itulah yang digunakan.

Menambah scroller di box

Untuk membuatnya menjadi sebuah box dengan tingi tertentu, maka sebuah scroller diperlukan hingga seluruh isi dalam box bisa di buka. Setelah sampeyan tentukan model penggunaan box seperti yang telah tersampaikan di atas, maka untuk membuatnya menjadi scroll box, buat kode seperti berikut:

#sidebar .widget{
height: 300px;
overflow: auto;
overflow-x: hidden;
margin: 20px 4px;
border: 1px solid #999;
padding: 10px 6px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3333FF;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3333FF;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3333FF;
-o-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-webkit-transition: 1s ease-out;
}
#sidebar .widget:hover {
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #0066FF;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #0066FF;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #0066FF;
}

Catatan

• Kode berwarna oranye disesuakan dengan perubahan yang diinginkan (box seluruh widget atau widget tertentu - Judul dalam box atau di luar box)
• height: 300px; dapat dirubah dengan ukuran yang diinginkan.
• overflow: auto; untuk memunculkan scroller, sedang overflow-x: hidden; untuk menghilangkan scroller dalam arah horizontal.

Box Posting Kode HTML Dg Animasi Box Posting Kode HTML Dg Animasi

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 ... !!!

Cara Membuat Box Beranimasi untuk Posting Kode HTML

• 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".
• Dasboard (Dasbor) : Setelah masuk di halaman ini, cari dan KLIK link "Design (Rancangan)".
• Beberapa saat kemudian kita akan melihat halaman baru yaitu "Page Element (Element Laman)". KLIK "Edit HTML".
• Kita akan melihat kode HTML penyusun blog. Disinilah kode CSS baru akan kita tambahkan. Cari kode ]]></b:skin>.
• 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://lh3.googleusercontent.com/-oLIxGQgklUk/T5FKG7syDII/AAAAAAAACcc/czzlczQ-5hk/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://lh3.googleusercontent.com/-oLIxGQgklUk/T5FKG7syDII/AAAAAAAACcc/czzlczQ-5hk/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://lh3.googleusercontent.com/-_52VxV7myjQ/T5FKHpDDR_I/AAAAAAAACcg/2sbfDUzGxUI/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 :

• Lakukan pengaturan width pada syntax pre.loreng dan pre.doreng untuk penyesuaian dengan lebar box posting (width:300px;).
• 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;)

Blockquote CSS3 Blockquote CSS3

Blockquote yang lain daripada yang lain ini dibangun dengan melibatkan CSS3 transition, CSS3 transformation, CSS3 border radius, CSS3 text shadow dan 3 (tiga) buah background image untuk background blockquote dan dua tag span yang kita manfaatkan. Bagaimana cara membuat blockquote yang benar-benar lain dari pada yang lain ini? Cocokkah untuk blog sampeyan? Adakah manfaatnya?

Blockquote bukanlah "gadis yang jelek" atau "gadis kaya raya" yang tak layak dipinang untuk melengkapi blog. Aku juga heran kenapa jarang sekali blogger yang memanfaatkan tag spesial yang sebenarnya amat pantas dipakai ini, ya? Oho ... atau barangkali tak begitu kenal dengan blockquote? Atau kalian merasa antipati terlebih dahulu? Ataukah sampeyan ketularan blogger lain yang jarang menggunakan blockquote? Heh... heh.... Coba rasakan betapa mudah dan pentingnya memanfaatkan "si gadis jelita ini". Dia bisa digunakan untuk wadah teks-teks tertentu yang perlu ditonjolkan di posting, lhoh! Sampeyan tak perlu membuat tag baru untuk melakukan itu. Cukup blockquote! Dan tampilannya? Hoooohoooo coba lihat saja yang ini!

Cara Membuat Blockquote dg CSS3

Kode Blockquote CSS3

blockquote {
         padding: 10px;
         margin: 10px 0 10px 20px;
         background-image: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgBloquoteV236H2.png);
         font: 13px/17px Serif, Times, Helvetica;
         font-style: italic;
         color: #FFCC99;  /* original code: gubhugreyot.blogspot.com */
         text-shadow: 1px 1px 1px #000;
         border: 1px ridge  #0099FF;
         border-radius: 20px 10px 20px 10px;
        -moz-border-radius: 20px 10px 20px 10px;
        -webkit-border-radius: 20px 10px 20px 10px;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in; }
blockquote:hover {
         color: #eee;
        -o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
         float: left;
         margin-right: 5px;
         height: 17px;
         width: 22px;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
         float: right;
         margin-left: 5px;
         margin-right: 0;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
        -o-transform: rotate(1090deg) scale(1.1);
        -moz-transform: rotate(1090deg) scale(1.1);
        -webkit-transform: rotate(1090deg) scale(1.1);
}

Cara Menyimpan Kode CSS

• Login : Login kee Blogger.
  • Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".
  • Tuliskan "Password (Sandi)".
  • KLIK "Login".
• Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)". KLIK link "Design (Rancangan)"..
• Design/Rancangan : Cari dan klik link Edit HTML.
• Cari kode ]]></b:skin>. Letakkan dan simpan semua kode CSS tepat di atasnya.
• KLIK SAVE Templates/Simpan Template.
• KLIK link Posting.
• KLIK Entri Baru/New Entry.
• Gunakan blockquote untuk melakukan posting. Sampeyan bisa menggunakan contoh di bawah ini.
• Buka hasil posting di halaman blog untuk melihat hasilnya.

Contoh bentuk kode untuk posting

Silahkan di copy untuk percobaan!

<blockquote> Keindahan Hembus Sembayu
Tak Sehangat Telapak Tanganmu
Yang Membelai Hatiku Dengan Kasih Sayangmu
Selat Yang Memisahkan Kita
Sunyi Tampa Bintang Kejora
Ku Serahkan Ketulusan Cinta Suci
Asmara Yang Kita Idamkan Ini
Dibayangi Suasana Sunyi
Mahligai Indah Yang Yang Kau Bina
Tak Tercapai Oleh Tanganku
Antara Kilauan Di Air Biru
Wajahmu Sayut Tersiksa
Oh.. Tuhanku
Satukanlah Hati Yang Setia
Sampai Bila Aku Harus Menanti
Percintaan Yang Menghukumku
Karena Tiada Lagi Duanya
Ku Serahkan Kepadamu Tuhan...!! !</blockquote>

Catatan

• Bila dalam template sampeyan sebelumnya sudah ada tag blockquote bawaan template asli, sebaiknya dihapus saja. Cari menggunakan Ctrl+F.
• Jika merasa ada kesulitan untuk mencari kode atau yang lain, coba buka Special Tutorials (menu di kiri). Di dalamnya terdapat beberapa tutorial penting berkaitan dengan modifikasi template termasuk cara cepat cari kode HTML.
• Untuk menggunakan blockquote, sampeyan harus memasukkan kodenya melalui posting mode "Edit HTML" (ada dua mode: mode Compose dan Edit HTML).

Hasik Dari Blockquote CSS3

Keindahan Hembus Sembayu
Tak Sehangat Telapak Tanganmu
Yang Membelai Hatiku Dengan Kasih Sayangmu
Selat Yang Memisahkan Kita
Sunyi Tampa Bintang Kejora
Ku Serahkan Ketulusan Cinta Suci
Asmara Yang Kita Idamkan Ini
Dibayangi Suasana Sunyi
Mahligai Indah Yang Yang Kau Bina
Tak Tercapai Oleh Tanganku
Antara Kilauan Di Air Biru
Wajahmu Sayut Tersiksa
Oh.. Tuhanku
Satukanlah Hati Yang Setia
Sampai Bila Aku Harus Menanti
Percintaan Yang Menghukumku
Karena Tiada Lagi Duanya
Ku Serahkan Kepadamu Tuhan...!! !

Semoga berhasil dan bermanfaat dalam memperindah blog Sampean!