Tema Vanilla Untuk Blog

Vanilla For Blogger
Malam All
Setelah share Menu Bubbles Jquery & Css3 , kali ini akan berbagi cara mempercantik postingan dengan Tema Vanilla Untuk Blog disaat kita memuat artikel dengan tag HTML , CSS , Javascript , Jquery , PHP , dan XMl . Tema vanilla ini reShare dari OtoWebsite.


Kostumisasi
  • Login ke akun blog sobat
  • Pada dashboard pilih Template > Edit HTML
  • Cari Kode ]]></b:skin>
  • Masukan kode dibawah ini tepat diatas kode ]]></b:skin>
/*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; } - See more at: http://www.otowebsite.blogspot.com/2013/04/tema-vanila-untuk-postingan-blogger.html#sthash.AtaGPb6J.dpuf

Sekarang Simpan

Jika langkah diatas tidak terjadi eror dan berjalan baik sekarang saatnya kita lakukan pemanggilan pada Tema Vanilla dengan menggunakan Tag pre. Berikut adalah tag yang digunakan.

  • Letakan tag berikut dalam postingan sobat. 
<pre data-codetype="HTML">Disini Tag XML</pre>
<pre data-codetype="CSS">Disini Tag CSS</pre>
<pre data-codetype="JQuery">Disini Tag Jquery</pre> 
<pre data-codetype="PHP">Disini Tag PHP</pre> 
<pre data-codetype="JavaScript">Disini Tag JAVASCRIPT</pre>

NB : Ganti text bold dengan tag yang ingin dimasukan

6 komentar

Kalo sy pesen yg rasa mocca ada ndak kang :)

rasa jambu saja mas Budi biar segerrrr

tos nu enggal deui wae ti cianjur para mitra sadayana,mangga dicobian bilih panasaran hehehe

hmm, lg males utak atik template nih, ijin aku save aja ya..
:)

maksudnya ini gimana yah ....saya kok ndak mudeng. uhhh...susah amat

sama neh belum ngerti maslah-masalah ttg tutor