Cara Membuat Pre-TAG Vanilla di Blogger

Baiklah , Hari ini saya baru saja menambahkan sesuatu yang baru di CyberSchool Indonesia .
yaitu Pre Tag Vanilla , Apaan sih Pre Tag Vanilla ??
Pre Tag Vanilla itu semacam Costum BlockQuote , biar lebih jelasnya nih ane kasih contoh :)

Sudah lihat contoh Pre-Tag Vanilla diatas ??
Nah Penasaran dengan Cara Membuatnya ??
Yuk Simak :)

Cara Membuat Pre-Tag Vanilla di Blogger

1. Login ke Blogger anda
2. Pilih Dasbor > Edit HTML
3. Click F3 atau CTRL + F dan search ]]></b:skin>
4. Jika sudah ketemu , Pastekan Script berikut ini diatas ]]></b:skin>

/*Tema Vanila untuk Postingan Blogger Powered by CyberSchool Indonesia */
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. Sudah Tertanam Script CSS nya ?? Jika sudah click Save Template Sekarang Gmna Cara pakainya ??

<pre data-codetype="HTML"> ### </ pre>
<pre data-codetype="CSS"> ### </ pre>
<pre data-codetype="JavaScript"> ### </ pre>
<pre data-codetype="JQuery"> ### </ pre>
<pre data-codetype="PHP"> ### </ pre>
<pre data-codetype="XML"> ### </ pre>


NB* : Hapus Spasi diantara Tag </ Pre>
Dan Ganti tanda ### Dengan Script / Tulisan yang Anda Inginkan :)

Judul: Cara Membuat Pre-TAG Vanilla di Blogger
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh Unknown

Terimakasih telah membaca artikel Cara Membuat Pre-TAG Vanilla di Blogger. Anda bisa bookmark halaman ini dengan URL http://cyberschool-id.blogspot.com/2013/05/cara-membuat-pre-tag-vanilla-di-blogger_4.html. Jika ingin copy paste artikel ini, jangan lupa untuk mencantumkan link sumber.

Cara Membuat Pre-TAG Vanilla di Blogger

4comments :