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
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
hihihi ..
