Tema Vanila untuk Postingan Blogger

Mempercantik postingan atau artikel sebuah web dengan background merupakan salah satu trik untuk mempercantik web Anda. Di tutorial kali ini Oto Website akan berbagi cara tentang mempercantik blog dengan Tema Vanila untuk Postingan Blogger.
Tema Vanila adalah tema atau background yang berguna untuk mempercantik artikel Anda, seperti memberi tema pada tag HTML, CSS, JavaScript, JQuery, PHP, dan XML.
Tema Vanila biasa juga di sebut dengan Tag PRE karna penggunaanya kita harus menyisipkan Tag PRE di antara Tag yang ingin kita bungkus dengan Tema Vanila.

Fitur Tema Vanila untuk Postingan Blogger:

• Memiliki Header atau title yang berbeda-beda.
• Tema Vanila memiliki enam background standar yang berbeda.

Lihat Demo

Lihat Demo

Cara Membuat Tema Vanila untuk Postingan Blogger

Untuk cara penginstalan Tema Vanila untuk Postingan Blogger dan cara menggunakannya sangatlah mudah, kita hanya perlu menanamkan tag CSS pada template dan memanggil tema ini dengan tag pre sesuai dengan jenisnya.
Disini Saya akan menjelaskan tentang cara menginstalnya pada blogger. Untuk blogger silahkan ikuti langkah berikut:

---

Cara Menginstal Tema Vanila untuk Postingan Blogger

---

1. Login ke Akun blogger Anda.
2. Pada Dasbord pilih Template > Edit HTML.
3. Lalu temukan tag ]]></b:skin>
4. Setelah ketemu sekarang letakkan CSS berikut di atasnya.

/*Tema Vanila untuk Postingan Blogger by: Oto Website */
pre {
background-color:white;
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color:#333;
border:2px solid #666;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
position:relative;
padding:0 7px;
margin:10px 5px;
overflow:auto;
word-wrap:normal;
white-space:pre;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
}
pre[data-codetype] {
padding:29px 1em 7px 1em;
}
pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
position:absolute;
top:0;
right:0;
left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}
pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}
pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#FF0C39;
}

5. Simpan template.

Jika CSS di atas sudah tertanam pada template blogger Anda, maka langkah selanjutnya untuk memanggil Tema Vanila adalah dengan menggunakan Tag Pre seperti yang Saya sebutkan di atas. Berikut adalah tag yang di gunakan untug memanggil Tema Vanila untuk Postingan Blogger.

---

Kode pemanggil Tema Vanila untuk Postingan Blogger

---

Letakkan tag berikut di dalam postingan Anda, dan ketika Anda ingin menggunakan Tema Vanila!

<pre data-codetype="HTML">Disini Tag XML</pre>

Atau

<pre data-codetype="CSS">Disini Tag CSS</pre>

Atau

<pre data-codetype="JavaScript">Disini Tag JavaScript</pre>

Atau

<pre data-codetype="JQuery">Disini Tag JQuery</pre>

Atau

<pre data-codetype="PHP">Disini Tag PHP</pre>

Atau

<pre data-codetype="XML">Disini Tag XML</pre>

NB: Ganti teks yang di BLOCK KUNING dengan tang yang ingin di masukkan sesuai temanya.

Trik Menginstal Tema Vanila untuk Postingan Blogger Part 2

Disini Saya juga menyediakan Trik Menginstal Tema Vanila untuk Postingan Blogger Part 2, sebenarnya cara ini sama saja, hanya saja Saya telah membungkus dan mengkompres tag tersebut dan menjadikan JavaScript, jadi Anda dapat memilih salah satu saja.
Ingin menggunakan tag CSS standart atau menggunakan JavaScript?
Jika Anda memilih menggunakan JavaScript maka Anda harus menghapus tag CSS di atas selanjutnya:

1. Lalu letakkan JavaScript berikut di atas tag  </head>

<link href='https://code-otowebsite.googlecode.com/svn/trunk/Tema Vanila.css' rel='stylesheet'type='text/css'/>

2. Simpan.

NB:Untuk pemanggilan Teman Vanila adalah sama dengan tag pemanggil di atas.

Dari Meja Editor

Sekian untuk tutorial kali ini yang membahas Tema Vanila untuk Postingan Blogger, jika ada pertanyaan atau masalah dalam penginstalan silahkan ajukan pertanyaan Anda melalui form komentar!