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

Atau

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

Atau

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

Atau

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

Atau

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

Atau

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


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  </head>

<link href='https://code-otowebsite.googlecode.com/svn/trunk/Tema Vanila.css' rel='stylesheet'type='text/css'/>

2. Simpan.

NB:Untuk pemanggilan Teman Vanila adalah sama dengan tag pemanggil di atas.


Dari Meja Editor

Sekian untuk tutorial kali ini yang membahas Tema Vanila untuk Postingan Blogger, jika ada pertanyaan atau masalah dalam penginstalan silahkan ajukan pertanyaan Anda melalui form komentar!

Posting Komentar Blogger Disqus

  1. Malam gan, tips yang keren banget gan dan pengen sy pakai di blog sy. Cuma agak bingung, untuk pemanggilan di dalam postingan caranya gimana ya ? kode pemanggilnya di taruk diatas,bawah, atau dmn ??

    tq gan.

    BalasHapus
  2. @Nurul HidayatMaksud Anda gimana ya? @@,
    Padahal cara menggunakan kode pemanggil sudah cukup jelas.

    Gunakan kode pemanggil itu pada postingan Anda.
    Bawah atas sama saja, yang penting tempat postingan.

    BalasHapus
  3. makasih ....
    gan . berguna banget nih ..
    izin sedot gan ..
    http://masjawika.blogspot.com/

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top