Cara Mempercantik Tampilan Postingan Blog

Cara Mempercantik Tampilan Postingan Blog - Mempercantik tampilan postingan blog sebenarnya penting gak penting sih berdasarkan saya, tapi jikalau sobat ingin lebih memperlihatkan tampilan yang berbeda pada halaman blog nya mungkin cara ini dapat juga dipakai. Dengan memakai tips ini, tampilan blog sobat jadi terlihat semakin rapi, sebab sobat dapat 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 ialah tema atau background yang berkhasiat untuk mempercantik artikel, menyerupai 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 kini 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 memakai Tag Pre menyerupai yang Saya sebutkan di atas. Berikut ialah 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 dikala Anda ingin memakai 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, jikalau ada yang ingin ditanyakan silahkan tinggalkan komentar.
Trims.

Source

Share this post