Cara Mempercantik Tampilan Postingan Blog

Cara Mempercantik Tampilan Postingan Blog - Mempercantik tampilan postingan blog sebenarnya penting gak penting sih menurut saya, tapi kalau sobat ingin lebih memberikan tampilan yang berbeda pada halaman blog nya mungkin cara ini bisa juga dipakai. Dengan menggunakan tips ini, tampilan blog sobat jadi terlihat semakin rapi, karena sobat bisa memasukan kata-kata atau kalimat yang dianggap paling penting dalam postingan tersebut.

Tips mempercantik tampilan postingan blog ini  oleh sang pembuat diberi nama Tema Vanilla untuk postingan blogger.  Tema Vanilla ini adalah tema atau background yang berguna untuk mempercantik artikel, seperti memberi tema pada tag HTML, CSS, JavaScript, JQuery, PHP, dan XML. Tema Vanila ini di sebut juga dengan Tag PRE karna penggunaanya kita harus menyisipkan Tag PRE di antara Tag yang ingin kita bungkus dengan Tema Vanila. Untuk lebih jelasnya silahkan sobat lihat live demonya :

Cara Menginstall Tema Vanilla :

Untuk menginstall Tema Vanila ini, cara nya sangatlah mudah, kita hanya perlu menanamkan tag CSS pada template dan memanggil tema ini dengan tag pre sesuai dengan jenisnya.
Langsung saja silahkan ikuti langkah berikut ini :

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 blog sobat, maka langkah selanjutnya adalah  memanggil Tema Vanila 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!

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

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

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

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

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

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

NB : Ganti teks yang di BLOCK KUNING dengan tag yang ingin di masukkan sesuai temanya.

Okey, cukup sekian sob artikel kali ini Cara Mempercantik Tampilan Postingan Blog.
Semoga bermanfaat, kalau ada yang ingin ditanyakan silahkan tinggalkan komentar.
Trims.

Source

Share this post