Cara membuat Blockquote atau Kotak Khusus di Postingan

Blockquote atau kotak khusu dalam postingan berfungsi sebagai kotak yang di dalamnya akan diisikan HTML / Javascript, ataupun tulisan biasa pun bisa.

Untuk cara-cara nya slahkan ikuti langkah-langkah dibawah ini.

D E M O

Cara Membuat Blockquote dg CSS3

Kode CSS

blockquote {
         padding: 10px;
         margin: 10px 0 10px 20px;
         background-image: url(https://sites.google.com/site/mitrabarayaprojec/lebaran/images/bg-blockquote/bg-mitrabaraya-Bloquote2x236.png);
         font: 13px/17px Serif, Times, Helvetica;
         font-style: italic;
         color: #FFCC99;  /* original code: mitrabarayaonline.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.bnutup {
         float: left;
         margin-right: 5px;
         height: 17px;
         width: 22px;
         background: url(https://sites.google.com/site/mitrabarayaprojec/lebaran/images/bg-blockquote/bg-mitrabaraya-BloquotL.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.bbnutup {
         float: right;
         margin-left: 5px;
         margin-right: 0;
         background: url(https://sites.google.com/site/mitrabarayaprojec/lebaran/images/bg-blockquote/bg-mitrabaraya-BloquotR.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.bnutup {
        -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!

Papatah Basa Sunda Kolot Baheula,Papatah Basa Sunda Kolot Baheula,Papatah Basa Sunda Kolot Baheula.<blockquote><span class="bbuka"></span>Ngeduk cikur kedah mihatur nyokel jahe kedah micarek,Trust ngak boleh korupsi, maling, nilep, dlsb… kalo mo ngambil sesuatu harus seijin yg punya.
Ulah lunca linci luncat mulang udar tina tali gadang, omat ulah lali tina purwadaksina,integrity harus mengikuti etika yang ada!<span class="bnutup"></span><blockquote>Kudu hade gogod hade tagog,Appearance harus dijaga agar punya performance yg okeh dan harus consitent dengan perilakunya.

Kudu nepi memeh indit,Kudu nepi memeh indit,Kudu nepi memeh indit,harus tiba sebelum berangkat, make sure semuanya di prepare dulu.

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

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

• 


• 

» Happy Blogging - mitrabaraya «