Cara Membuat Text Area di postingan berbasis blockquote

	Dengan SEGALA HORMAT ,Kami mohon dukungan dan Partisipasinya dalam membebaskan Indonesia dari reputasi BURUK oleh Search Engine Google,Yahoo & Bing sebagai Negara Penghasil SPAM dan SPAMMER terbanyak ke-3 (tiga) didunia, Kami minta waktu anda sejenak untuk bergabung pada komunitas SEO Indonesia tanpa SPAM dan SPAMMER,terima kasih atas partisipasinya.

Jika blog anda berisi HTML Sharing,tentu dengan menggunakan text area akan lebih memudahkan bagi para pengunjung blog untuk melakukan Copy,disamping itu pula akan lebih memperindah tampilan postingan anda,yang akan saya uraikan mengenai Cara Membuat Text Area di postingan berbasis blockquote berikut adalah pada level basic,maksudnya kode-kode tersebut dibawah bisa anda modifikasi kembali agar sesuai dengan style anda.

Untuk penerapannya dengan mengikuti langkah-langkah sebagi berikut,

1. masuk ke Template
2. edit HTML
3. tekan Ctrl+F
4. cari kode ]]></b:skin>
5. lalu paste-kan kode HTML Text Area pilihan anda di atas ]]></b:skin>
6. save

• Kemudian jika saat hendak menggunakan atau memunculkannya pada postingan anda cukup klik new post

• Masukkan kode HTML/CSS/Jquery yang hendak anda tampilkan pada kolom text area

• Select kode HTML/CSS/Jquery anda

• Setelah kode tersebut anda select,kemudian klik Quote sekali,(lihat gambar)

• Selesai,publikasikan postingan anda

Berikut beberapa contoh text area mengunakan <blackquote>

1. Text Area blockquote 001

Kode yang anda paste-kan diatas ]]></b:skin>

 .post blockquote {
background: #C8EFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOAezYkXd7WbCFkVffjDLqzy3tYX-AL5fq5K3G3PzOrH5OT1CEAayef0mtRqofG4PrQ149SY5Z4OEqj7AayvyE8InBhmjR8CN2BpSOwO01w7gyroLrNythMI1sqg1jhC1bYORlglWasfRY/s1600/ta1.png);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

2. Text Area Blockquote 002

Kode yang anda paste-kan diatas ]]></b:skin>

 .post blockquote {
background: #E9E9E9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9edyiG_9aywMrRERRNuC_z6br_9BHWz93uoi2WLa8qWL4EMSDQWvPy0Yzx2_ccljx6Cum8_mhTDjjcnLxnJ6PP2F2Y8ugi13cQSIWCyQYcsGfLQo2KJdEpz6uqL6itRJMYOFG0Aly8OJ/s1600/ta.png);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

3. Text Area Blockquote 003

Kode yang anda paste-kan diatas ]]></b:skin>

 .post blockquote {
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEjBE-eCcroq65Xo6QIwi4oXzJpqnDAVCKuGcTpHJwMd7-YaCZ3FyUZ2xsvoNeJjaenkSwsRM2cGHcMc4OI3kVkmU_z1zKfz0B63-nMadXjDJhkUTpofZqqvp8MDvJqzGRiAI3fJlAaAZX/s1600/ta2.png);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

3. Text Area Blockquote 004

Kode yang anda paste-kan diatas ]]></b:skin>

 .post blockquote {
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw8_cUBX3ZBm7MGh5VfEy6KhYkdA0jXlsFiJp5swxsoEnVkLEOoJdqDDyh8wu2PTA9UykxXZ5CEb0MlGGXZsKbr7wTGWfTuVJAt5Az7kUaKCa-YJJxHSOTM2sD5N9cdLUN39njtwO6IwvU/s1600/ta3.png);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

jika masih ada kendala dalam penerapannya silahkan anda tanyakan melalui kolom komentar,atau jika anda mengingnkan style yang berbeda dengan background yang berbeda pula,contohnya background keinginan anda,insyaallah saya bisa membantu.hubungi saya melalui komentar dan email.

terima kasih atas partisipasi anda pada blog ini,saya sangat menghargainya

baca juga artikel saya tentang cara membuat breadcrumbs stylish navigator pada link berikut

http://seoptimasi.blogspot.com/2014/11/cara-membuat-google-breadcrumbs-stylish.html

Jika Video Dapat Gangguan Klik Button >>