CARA MEMBUAT TAG PRE KEREN DIBLOGGER

Cara Membuat Tag Pre Keren Diblogger,, udah tau gak Tag Pre?

Tag Pre adalah suatu kotak yang kayak BLOCKQUOTE yaitu untuk meletakkan Script atau CSS di blog,, hayo kalian suka yang mana?? kalau saya sich Blockquote !! okelah langsung aja yuk tutorialnya :D

• Demo nya di bawah ini:

MASUKKAN KODE HTML ANDA ATAU SEMBARANG

MASUKKAN KODE CSS ANDA DISNI HERE HERE

MASUKKAN KODE JAVASCRIPT ANDA DISINI WOOY

MASUKKAN KODE JQUERY DISNI SEMBARANG

MASUKKAN KODE PHP DISINI ATAU KODE SEMBARANG BISA

MASUKKAN KODE XML DISINI ATAU KODE SEMBARANG BISA

Simak Langkah-langkahnya dibawah ini :

1. Login di Blogger
2. Masuk di menu Template Edit HTML
3. CTRL+F cari kode ]]></b:skin>
4. Lalu masukkan kode dibawah ini diatas kode tersebut.

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

*Untuk Menampilkan Tag Pre Tersebut Gunakan Mode HTML 

6. Lalu masukkan kode pemanggil-nya dibawah ini simak baik-baik ya :)

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

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

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

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

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

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

7.Simpan Postingan tersebut,,

Good Luck

Demikian postingan tentang Cara Membuat Tag Pre Keren Diblogger Semoga bermanfaat Bagi Kita Semua :D :)

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250