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 > [ Hapus tanda Sepasi nya ]
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 > [Hapus Tanda Sepasinya]

Atau

< pre data - codetype = "CSS " > Disini Tag CSS </ pre > [Hapus Tanda Sepasinya]

Atau

                 < pre data - codetype = " JavaScript " >Disini Tag JavaScrip t< / pre > [Hapus Tanda Sepasinya]

Atau

< pre  data - codetype = " JQuery " > Disini Tag JQuery < / pre > [Hapus Tanda Sepasinya]

Atau

< pre  data - codetype = " PHP " > Disini Tag PHP < / pre >[Hapus Tanda Sepasinya]

Atau

< pre data - codetype = " XML " > Disini Tag XML < / pre > [Hapus Tanda Sepasinya]

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

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

2. Simpan.

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

POSTINGAN INI DIBUAT OLEH : 

- Otowebsite

Thank's To :

- Dek Rif

- Jrswirogas