Cara Membuat Tag Pre Bertema Vanilla

Cara Membuat Tag Pre Bertema Vanilla

Assalamualaikuw wr wb - Cara Membuat Tag Pre Bertema Vanilla Halo Para Blogger ,, Apa Kabar :)  Lama ya saya gk post ,, cuma 2 hari yang lalu ,, oke pada postingan kali ini saya akan share tentang Cara Membuat Tag Pre Bertema Vanilla ,, Udah Tau Gk Tag Pre ??

Tag Pre Adalah Suatu Kotak Yang Kayak BLOCKQUOTE Yaitu Untuk Meletakkan Script Atau CSS Di Blog ,, Hayo Kalian suka mana ?? kalo saya sih Blockquote !! okelah langsung aja yuk tutorialnya :D



Cara Membuat Tag Pre Bertema Vanilla


1. Login Di Blooger
2. 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 Tampilan Tag Pre Tersebut Guankan Mode HTML 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">Disini 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 Post Tentang  Cara Membuat Tag Pre Bertema Vanilla Semoga Bermanfaat Bagi Kita Semua :D , Wassalamualaikum Wr Wb.

Cara Membuat Tag Pre Bertema Vanilla

Alternative Link : [ Click Here ... ]

Posted by Ramadhan Ashary | Published at 14.40

28 komentar :

  1. PERTAMAX GAN
    thanks yah udah share sangat bermanfaat buat saya

    BalasHapus
  2. mantep sob.... ijin praktekin langsung ^_^

    BalasHapus
  3. mantaf widget yang ada di footer #out of topic
    [+]http://maz-dicha.blogspot.com/[+]

    BalasHapus
  4. Ini Yang Ane saya cari cari ,, Infonya Bermanfaat Banget gan Makasih ya infonya :)

    BalasHapus
  5. wah keren kak

    jagan lupa mampir ke blogku juga ya
    http://jember-zone.blogspot.com/
    http://kxmadagaskar2.blogspot.com/

    BalasHapus
  6. makasih banyak gan postingnya, bagus nih klo di pake di blog saya biar tambah unyu

    BalasHapus
  7. Nyimak dulu ... visit back gan

    BalasHapus
  8. Wah Saya B aru tau ya kalo ada tag pre ,,Dan juga dimodifikasi lagi Thabk's ya mas infonya

    BalasHapus
  9. wah., ada contohnya gk di blog ini, soalnya saya belum ngerti nh., hehehehe

    coment balik dari, catatankaki06.blogspot.com

    BalasHapus
  10. langsung dipraktekin sob.

    makasih sudah share

    BalasHapus
  11. Mantab sob .. izin coba yahh :D

    BalasHapus
  12. Ini yang dicari, bingung nyarinya pakai kata kunci apa, makasih udah share.

    BalasHapus
  13. wah menarik tu untuk dicoba,coba dulu gan

    BalasHapus
  14. saya liat demonya matep gan.... ijin nyoba pasang di blog ane ga ^_^

    BalasHapus

{ Harap Baca }

1. Harap berkomentar dengan bahasa indonesia yang baku tanpa singkatan.
2. Apabila Anda Komentar Thank's Info ,, Nice Post <-- Akan saya Hapus
3. Dilarang Live Link
4. Dilarang Berkomentar berbau Por** and SARA
5. Berkomentar lah Dengan Sesuai Postingan Diatas
6. Jika Anda Mengomentar Enggak Sesuai Topik Gunakan OOT

{+} Ingat Jangan Sekali Sekali Menaruh Link Hidup Maupun Link Mati

 
 
Copyright © 2014 Blog Mas Rama Template Design By | Pathmo