Cara Mempercantik Tampilan Postingan Blog

343 views

alhadi.org – Cara Mempercantik Tampilan Postingan Blog, Cara Mempercantik Tampilan Postingan Blog

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

Disini Tag XML

CSS

Disini Tag CSS

Javascript

Disini Tag JavaScript

Jquery

Disini Tag JQuery

PHP

Disini Tag PHP

XML

Disini Tag XML

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
Terima Kasih Atas kunjungan anda di halaman  Cara Mempercantik Tampilan Postingan Blog, Jangan lupa untuk Membookmars Halaman ini jika  Cara Mempercantik Tampilan Postingan Blog berguna untuk anda.