Sunday, March 2, 2014

Threaded Comments Berbeda Warna


Threaded comment dengan adanya fasilitas reply atau jawab akan memberikan kenyamanan bagi pemilik blog maupun bagi pengunjung, dengan bentuk desain tampilannya yang menggunakan css, sehingga kita bisa memodifikasi desain tampilan komentar yang sesuai dengan keinginan, untuk fingsinya pun memberikan cara kerja yang baik dalam hal fasilitas reply tersebut, serta dengan tambahan author comment yang berbeda warna.

Untuk sekarang ini fitur threaded comments, blogger sudah menyediakan dan dari segi kinerja lebih baik dari pada yang akan share sekarang ini (menurut saya), walaupun ada kekurangan dan kelebihan dari threaded comments blogger dan threaded comments buatan ArtisTutor, nantinya tergantung kalian akan menggunakan yang mana, threaded comments blogger atau treded comment buatan ArtisTutor.

Ada kelebihan dan kekurangan dari threaded comments blogger, untuk fasilitas reply threaded comments blogger lebih baik, karena kotak komentar langsung tampil sedangkan buatan ArtisTutor melalui popup window, sedangkan kekurangannya untuk reply threaded comments blogger hanya memberikan 1 tingkatan , sedangan buatan aristutor lebih dari 3 tingkatan.

Dengan menggunakan template dari pihak blogger, tentu saja threaded comments sudah langsung teradopsi, tapi jika menggunakan template custom, kalian harus me-revert ke default template blogger melalui menu edit html dan klik revert widget templates to default, tapi jika ingin menggunakan threaded comments buatan ArtisTutor, kalian bisa mengikuti caranya dan melihat preview tampilanya seperti dibawah ini :


threaded comment reply and author background

Masuk pada menu Edit HTML - Ceklist Expand Widget Templates - lakukan backup template untuk menghindari kesalahan, kemudian cari kode ]]></b:skin> dan letakan kode css ini diatasnya.

#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}
.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}
.cm_head {
margin: 0;
width:60px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image:  url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_reply {
padding-top: 5px;
}
.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}
.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.cm_entry {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgygmaOJ7zplvn1sNJHCv4ymeLmMHjDGNB0Tb2T5kByKwnno59D7WkS5Sc80J8dKduBO06KKNDftBeL2FDwei5I_hYntX2droNuiX5RSWY40hf2zBPa53mtwMhBOP_2g-E82cZZBBVA58g/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}
.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
}
.cm_name_a {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-family:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color:  #dff0fa;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}
.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}
.cm_pagenavi a:hover {
text-decoration: underline
}
.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

jika ada masalah dengan avatar, kalian bisa menghapus kode avatar yang ada pada template, contoh kode avatar seperti dibawah ini, mungkin untuk kode avatar cara pengkodeannya berbeda pada tiap template.

.avatar-image-container {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqgZaCWoWsX_L27-r_XivcRHgtl02Hum3tL98UfVg7WcpSm7ndnkwyQLsfYpcLo2BXhANsryT4wlQD-r6NAWKCIDwMQxb4-n4Zj2jm0R3ELN3Heqb_BUGnBIkn6SsKsVzuaigJgz5Fgw/s400/default.gif); 
width:35px;
height:35px; 
}
.avatar-image-container  img {
border:none;
}

kode css yang berwarna kuning merupakan, kode untuk komentar admin, kalian bisa melakukan modifikasi jika setting tampilannya tidak sesuai dengan keinginan.

Selanjutnya cari kode </body> dan letakan kode dibawah ini diatasnya :

&lt;script type="text/javascript"&gt;&lt;!--
var _0x7bf4=["\x32\x20\x78\x3D\x31\x72\x2E\x31\x6E\x2E\x4A\x3B\x32\x20\x46\x3D\x77\x2E\x79\x28\x27\x31\x6D\x27\x29\x3B\x32\x20\x6D\x3D\x46\x2E\x75\x3B\x32\x20\x70\x3D\x5B\x5D\x3B\x32\x20\x37\x3D\x5B\x5D\x3B\x32\x20\x64\x3D\x5B\x5D\x3B\x32\x20\x6E\x3D\x30\x3B\x32\x20\x49\x3D\x27\x27\x3B\x32\x20\x4B\x3D\x27\x27\x3B\x32\x20\x45\x3D\x27\x27\x3B\x32\x20\x69\x3D\x30\x3B\x32\x20\x6A\x3D\x30\x3B\x32\x20\x6B\x3D\x30\x3B\x32\x20\x68\x3D\x30\x3B\x32\x20\x62\x3D\x27\x27\x3B\x32\x20\x42\x3D\x22\x22\x3B\x32\x20\x71\x3D\x22\x22\x3B\x31\x73\x20\x31\x31\x28\x29\x7B\x32\x20\x56\x3D\x2D\x31\x3B\x38\x28\x5A\x2E\x31\x79\x3D\x3D\x27\x31\x7A\x20\x31\x76\x20\x31\x75\x27\x29\x7B\x32\x20\x31\x65\x3D\x5A\x2E\x31\x77\x3B\x32\x20\x31\x30\x3D\x31\x78\x20\x31\x32\x28\x22\x31\x74\x20\x28\x5B\x30\x2D\x39\x5D\x7B\x31\x2C\x7D\x5B\x5C\x2E\x30\x2D\x39\x5D\x7B\x30\x2C\x7D\x29\x22\x29\x3B\x38\x28\x31\x30\x2E\x31\x41\x28\x31\x65\x29\x21\x3D\x31\x70\x29\x56\x3D\x31\x71\x28\x31\x32\x2E\x24\x31\x29\x7D\x31\x6F\x20\x56\x7D\x32\x20\x57\x3D\x31\x31\x28\x29\x3B\x38\x28\x57\x3D\x3D\x2D\x31\x7C\x7C\x57\x3E\x3D\x39\x29\x7B\x31\x34\x28\x6D\x2E\x66\x28\x27\x4C\x3D\x22\x63\x27\x29\x21\x3D\x2D\x31\x29\x7B\x69\x3D\x6D\x2E\x66\x28\x27\x4C\x3D\x22\x63\x27\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x2B\x34\x29\x3B\x69\x3D\x6D\x2E\x66\x28\x27\x22\x27\x29\x3B\x70\x5B\x6E\x5D\x3D\x6D\x2E\x65\x28\x30\x2C\x69\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x29\x3B\x37\x5B\x6E\x5D\x3D\x77\x2E\x79\x28\x70\x5B\x6E\x5D\x29\x2E\x75\x3B\x64\x5B\x6E\x5D\x3D\x30\x3B\x6E\x2B\x2B\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x2D\x31\x3B\x69\x2B\x2B\x29\x7B\x76\x28\x6A\x3D\x69\x2B\x31\x3B\x6A\x3C\x6E\x3B\x6A\x2B\x2B\x29\x7B\x38\x28\x37\x5B\x6A\x5D\x2E\x66\x28\x70\x5B\x69\x5D\x29\x21\x3D\x2D\x31\x29\x7B\x49\x3D\x70\x5B\x6A\x5D\x3B\x4B\x3D\x37\x5B\x6A\x5D\x3B\x64\x5B\x6A\x5D\x3D\x64\x5B\x69\x5D\x2B\x31\x3B\x45\x3D\x64\x5B\x6A\x5D\x3B\x76\x28\x68\x3D\x69\x2B\x31\x3B\x68\x3C\x6A\x3B\x68\x2B\x2B\x29\x7B\x38\x28\x64\x5B\x68\x5D\x3C\x45\x29\x7B\x31\x37\x7D\x7D\x76\x28\x6B\x3D\x6A\x3B\x6B\x3E\x68\x3B\x6B\x3D\x6B\x2D\x31\x29\x7B\x70\x5B\x6B\x5D\x3D\x70\x5B\x6B\x2D\x31\x5D\x3B\x37\x5B\x6B\x5D\x3D\x37\x5B\x6B\x2D\x31\x5D\x3B\x64\x5B\x6B\x5D\x3D\x64\x5B\x6B\x2D\x31\x5D\x7D\x70\x5B\x68\x5D\x3D\x49\x3B\x37\x5B\x68\x5D\x3D\x4B\x3B\x64\x5B\x68\x5D\x3D\x45\x7D\x7D\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x3B\x69\x2B\x2B\x29\x7B\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x40\x3C\x61\x20\x4A\x3D\x22\x23\x63\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x2B\x31\x29\x3B\x6A\x3D\x71\x2E\x66\x28\x27\x3C\x2F\x61\x3E\x27\x29\x3B\x71\x3D\x71\x2E\x65\x28\x6A\x2B\x34\x29\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x71\x7D\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x50\x3D\x22\x59\x22\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x29\x3B\x38\x28\x64\x5B\x69\x5D\x3E\x36\x29\x64\x5B\x69\x5D\x3D\x36\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x27\x74\x3D\x22\x31\x35\x3A\x27\x2B\x28\x31\x39\x2D\x64\x5B\x69\x5D\x2A\x35\x29\x2B\x27\x25\x22\x20\x27\x2B\x71\x7D\x62\x2B\x3D\x37\x5B\x69\x5D\x7D\x62\x2B\x3D\x27\x3C\x67\x20\x50\x3D\x22\x31\x66\x22\x3E\x3C\x2F\x67\x3E\x27\x3B\x46\x2E\x75\x3D\x62\x3B\x46\x2E\x74\x2E\x51\x3D\x27\x31\x62\x27\x3B\x32\x20\x4D\x3D\x77\x2E\x79\x28\x27\x31\x61\x27\x29\x2E\x75\x3B\x32\x20\x6F\x3D\x4F\x28\x4D\x29\x3B\x38\x28\x6F\x3E\x72\x29\x7B\x62\x3D\x27\x3C\x67\x20\x74\x3D\x22\x47\x3A\x31\x63\x22\x3E\x31\x64\x20\x27\x3B\x32\x20\x48\x3D\x28\x6F\x2D\x6F\x25\x72\x29\x2F\x72\x2B\x31\x3B\x32\x20\x73\x3D\x27\x27\x3B\x32\x20\x6C\x3D\x31\x3B\x69\x3D\x78\x2E\x66\x28\x27\x2E\x31\x6C\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x78\x2E\x65\x28\x30\x2C\x69\x2B\x35\x29\x7D\x7A\x7B\x73\x3D\x78\x7D\x69\x3D\x73\x2E\x66\x28\x27\x23\x44\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x73\x2E\x65\x28\x30\x2C\x69\x29\x7D\x69\x3D\x78\x2E\x66\x28\x27\x3F\x53\x3D\x27\x29\x3B\x38\x28\x69\x3D\x3D\x2D\x31\x29\x7B\x6C\x3D\x31\x7D\x7A\x7B\x6C\x3D\x4F\x28\x78\x2E\x65\x28\x69\x2B\x31\x33\x29\x29\x7D\x76\x28\x69\x3D\x31\x3B\x69\x3C\x3D\x48\x3B\x69\x2B\x2B\x29\x7B\x38\x28\x69\x3D\x3D\x6C\x29\x7B\x62\x2B\x3D\x27\x3C\x55\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x55\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x61\x20\x4A\x3D\x22\x27\x2B\x73\x2B\x27\x3F\x53\x3D\x27\x2B\x69\x2B\x27\x23\x44\x22\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x61\x3E\x27\x7D\x7D\x38\x28\x6C\x2A\x72\x3C\x3D\x6F\x29\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x28\x6C\x2A\x72\x29\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x6F\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x32\x20\x43\x3D\x77\x2E\x79\x28\x27\x31\x69\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x43\x3D\x77\x2E\x79\x28\x27\x31\x68\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x38\x28\x6C\x3C\x48\x29\x7B\x62\x3D\x27\x3C\x74\x20\x31\x67\x3D\x22\x31\x6B\x2F\x31\x6A\x22\x3E\x2E\x58\x20\x7B\x51\x3A\x20\x31\x38\x7D\x3C\x2F\x74\x3E\x27\x3B\x32\x20\x4E\x3D\x77\x2E\x79\x28\x27\x31\x36\x27\x29\x3B\x4E\x2E\x75\x3D\x62\x7D\x7D\x7D\x7A\x7B\x31\x34\x28\x6D\x2E\x66\x28\x27\x4C\x3D\x63\x27\x29\x21\x3D\x2D\x31\x29\x7B\x69\x3D\x6D\x2E\x66\x28\x27\x4C\x3D\x63\x27\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x2B\x33\x29\x3B\x69\x3D\x6D\x2E\x66\x28\x27\x3E\x27\x29\x3B\x70\x5B\x6E\x5D\x3D\x6D\x2E\x65\x28\x30\x2C\x69\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x29\x3B\x37\x5B\x6E\x5D\x3D\x77\x2E\x79\x28\x70\x5B\x6E\x5D\x29\x2E\x75\x3B\x64\x5B\x6E\x5D\x3D\x30\x3B\x6E\x2B\x2B\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x2D\x31\x3B\x69\x2B\x2B\x29\x7B\x76\x28\x6A\x3D\x69\x2B\x31\x3B\x6A\x3C\x6E\x3B\x6A\x2B\x2B\x29\x7B\x38\x28\x37\x5B\x6A\x5D\x2E\x66\x28\x70\x5B\x69\x5D\x29\x21\x3D\x2D\x31\x29\x7B\x49\x3D\x70\x5B\x6A\x5D\x3B\x4B\x3D\x37\x5B\x6A\x5D\x3B\x64\x5B\x6A\x5D\x3D\x64\x5B\x69\x5D\x2B\x31\x3B\x45\x3D\x64\x5B\x6A\x5D\x3B\x76\x28\x68\x3D\x69\x2B\x31\x3B\x68\x3C\x6A\x3B\x68\x2B\x2B\x29\x7B\x38\x28\x64\x5B\x68\x5D\x3C\x45\x29\x7B\x31\x37\x7D\x7D\x76\x28\x6B\x3D\x6A\x3B\x6B\x3E\x68\x3B\x6B\x3D\x6B\x2D\x31\x29\x7B\x70\x5B\x6B\x5D\x3D\x70\x5B\x6B\x2D\x31\x5D\x3B\x37\x5B\x6B\x5D\x3D\x37\x5B\x6B\x2D\x31\x5D\x3B\x64\x5B\x6B\x5D\x3D\x64\x5B\x6B\x2D\x31\x5D\x7D\x70\x5B\x68\x5D\x3D\x49\x3B\x37\x5B\x68\x5D\x3D\x4B\x3B\x64\x5B\x68\x5D\x3D\x45\x7D\x7D\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x3B\x69\x2B\x2B\x29\x7B\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x40\x3C\x41\x20\x4A\x3D\x22\x23\x63\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x2B\x31\x29\x3B\x6A\x3D\x71\x2E\x66\x28\x27\x3C\x2F\x41\x3E\x27\x29\x3B\x71\x3D\x71\x2E\x65\x28\x6A\x2B\x34\x29\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x71\x7D\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x50\x3D\x59\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x29\x3B\x38\x28\x64\x5B\x69\x5D\x3E\x36\x29\x64\x5B\x69\x5D\x3D\x36\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x27\x74\x3D\x22\x31\x35\x3A\x27\x2B\x28\x31\x39\x2D\x64\x5B\x69\x5D\x2A\x35\x29\x2B\x27\x25\x22\x20\x27\x2B\x71\x7D\x62\x2B\x3D\x37\x5B\x69\x5D\x7D\x62\x2B\x3D\x27\x3C\x67\x20\x50\x3D\x22\x31\x66\x22\x3E\x3C\x2F\x67\x3E\x27\x3B\x46\x2E\x75\x3D\x62\x3B\x46\x2E\x74\x2E\x51\x3D\x27\x31\x62\x27\x3B\x32\x20\x4D\x3D\x77\x2E\x79\x28\x27\x31\x61\x27\x29\x2E\x75\x3B\x32\x20\x6F\x3D\x4F\x28\x4D\x29\x3B\x38\x28\x6F\x3E\x72\x29\x7B\x62\x3D\x27\x3C\x67\x20\x74\x3D\x22\x47\x3A\x31\x63\x22\x3E\x31\x64\x20\x27\x3B\x32\x20\x48\x3D\x28\x6F\x2D\x6F\x25\x72\x29\x2F\x72\x2B\x31\x3B\x32\x20\x73\x3D\x27\x27\x3B\x32\x20\x6C\x3D\x31\x3B\x69\x3D\x78\x2E\x66\x28\x27\x2E\x31\x6C\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x78\x2E\x65\x28\x30\x2C\x69\x2B\x35\x29\x7D\x7A\x7B\x73\x3D\x78\x7D\x69\x3D\x73\x2E\x66\x28\x27\x23\x44\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x73\x2E\x65\x28\x30\x2C\x69\x29\x7D\x69\x3D\x78\x2E\x66\x28\x27\x3F\x53\x3D\x27\x29\x3B\x38\x28\x69\x3D\x3D\x2D\x31\x29\x7B\x6C\x3D\x31\x7D\x7A\x7B\x6C\x3D\x4F\x28\x78\x2E\x65\x28\x69\x2B\x31\x33\x29\x29\x7D\x76\x28\x69\x3D\x31\x3B\x69\x3C\x3D\x48\x3B\x69\x2B\x2B\x29\x7B\x38\x28\x69\x3D\x3D\x6C\x29\x7B\x62\x2B\x3D\x27\x3C\x55\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x55\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x61\x20\x4A\x3D\x22\x27\x2B\x73\x2B\x27\x3F\x53\x3D\x27\x2B\x69\x2B\x27\x23\x44\x22\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x61\x3E\x27\x7D\x7D\x38\x28\x6C\x2A\x72\x3C\x3D\x6F\x29\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x28\x6C\x2A\x72\x29\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x6F\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x32\x20\x43\x3D\x77\x2E\x79\x28\x27\x31\x69\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x43\x3D\x77\x2E\x79\x28\x27\x31\x68\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x38\x28\x6C\x3C\x48\x29\x7B\x62\x3D\x27\x3C\x74\x20\x31\x67\x3D\x22\x31\x6B\x2F\x31\x6A\x22\x3E\x2E\x58\x20\x7B\x51\x3A\x20\x31\x38\x7D\x3C\x2F\x74\x3E\x27\x3B\x32\x20\x4E\x3D\x77\x2E\x79\x28\x27\x31\x36\x27\x29\x3B\x4E\x2E\x75\x3D\x62\x7D\x7D\x7D","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x76\x61\x72\x7C\x7C\x7C\x7C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x7C\x69\x66\x7C\x7C\x7C\x73\x74\x72\x6F\x75\x74\x7C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x4C\x65\x76\x65\x6C\x7C\x73\x75\x62\x73\x74\x72\x69\x6E\x67\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x64\x69\x76\x7C\x7C\x7C\x7C\x7C\x43\x6D\x5F\x43\x75\x72\x5F\x50\x61\x67\x65\x7C\x43\x6D\x5F\x42\x6C\x6F\x63\x6B\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x7C\x43\x6D\x5F\x4E\x75\x6D\x7C\x43\x6D\x5F\x54\x6F\x74\x61\x6C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x49\x64\x7C\x73\x74\x72\x5F\x74\x32\x7C\x32\x30\x30\x7C\x4F\x72\x67\x5F\x55\x72\x6C\x5F\x54\x68\x72\x65\x61\x64\x43\x4D\x7C\x73\x74\x79\x6C\x65\x7C\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C\x7C\x66\x6F\x72\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x43\x75\x72\x5F\x55\x72\x6C\x5F\x54\x68\x72\x65\x61\x64\x43\x4D\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64\x7C\x65\x6C\x73\x65\x7C\x7C\x73\x74\x72\x5F\x74\x31\x7C\x43\x6D\x5F\x50\x61\x67\x65\x5F\x4F\x62\x6A\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x4C\x65\x76\x65\x6C\x5F\x54\x7C\x43\x6D\x5F\x42\x6C\x6F\x63\x6B\x7C\x66\x6C\x6F\x61\x74\x7C\x43\x6D\x5F\x50\x61\x67\x65\x5F\x4E\x75\x6D\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x49\x64\x5F\x54\x7C\x68\x72\x65\x66\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x5F\x54\x7C\x69\x64\x7C\x43\x6D\x5F\x54\x6F\x74\x61\x6C\x5F\x4F\x62\x6A\x7C\x43\x6D\x5F\x52\x65\x70\x6C\x79\x43\x53\x53\x5F\x4F\x62\x6A\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x63\x6C\x61\x73\x73\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x6F\x66\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x50\x61\x67\x65\x7C\x72\x69\x67\x68\x74\x7C\x73\x70\x61\x6E\x7C\x72\x76\x7C\x49\x45\x5F\x76\x65\x72\x7C\x63\x6D\x5F\x61\x75\x74\x68\x6F\x72\x5F\x72\x65\x70\x6C\x79\x7C\x63\x6D\x5F\x77\x72\x61\x70\x7C\x6E\x61\x76\x69\x67\x61\x74\x6F\x72\x7C\x72\x65\x7C\x67\x65\x74\x49\x6E\x74\x65\x72\x6E\x65\x74\x45\x78\x70\x6C\x6F\x72\x65\x72\x56\x65\x72\x73\x69\x6F\x6E\x7C\x52\x65\x67\x45\x78\x70\x7C\x7C\x77\x68\x69\x6C\x65\x7C\x77\x69\x64\x74\x68\x7C\x63\x6D\x5F\x72\x65\x70\x6C\x79\x5F\x63\x73\x73\x7C\x62\x72\x65\x61\x6B\x7C\x6E\x6F\x6E\x65\x7C\x31\x30\x30\x7C\x63\x6D\x5F\x74\x6F\x74\x61\x6C\x7C\x62\x6C\x6F\x63\x6B\x7C\x6C\x65\x66\x74\x7C\x50\x61\x67\x65\x7C\x75\x61\x7C\x63\x6C\x65\x61\x72\x7C\x74\x79\x70\x65\x7C\x63\x6D\x5F\x70\x61\x67\x65\x5F\x63\x6F\x70\x79\x7C\x63\x6D\x5F\x70\x61\x67\x65\x7C\x63\x73\x73\x7C\x74\x65\x78\x74\x7C\x68\x74\x6D\x6C\x7C\x63\x6D\x5F\x62\x6C\x6F\x63\x6B\x7C\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x7C\x72\x65\x74\x75\x72\x6E\x7C\x6E\x75\x6C\x6C\x7C\x70\x61\x72\x73\x65\x46\x6C\x6F\x61\x74\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x4D\x53\x49\x45\x7C\x45\x78\x70\x6C\x6F\x72\x65\x72\x7C\x49\x6E\x74\x65\x72\x6E\x65\x74\x7C\x75\x73\x65\x72\x41\x67\x65\x6E\x74\x7C\x6E\x65\x77\x7C\x61\x70\x70\x4E\x61\x6D\x65\x7C\x4D\x69\x63\x72\x6F\x73\x6F\x66\x74\x7C\x65\x78\x65\x63","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x4f09x1,_0x4f09x2,_0x4f09x3,_0x4f09x4,_0x4f09x5,_0x4f09x6){_0x4f09x5=function (_0x4f09x3){return (_0x4f09x3&lt;_0x4f09x2?_0x7bf4[4]:_0x4f09x5(parseInt(_0x4f09x3/_0x4f09x2)))+((_0x4f09x3=_0x4f09x3%_0x4f09x2)&gt;35?String[_0x7bf4[5]](_0x4f09x3+29):_0x4f09x3.toString(36));} ;if(!_0x7bf4[4][_0x7bf4[6]](/^/,String)){while(_0x4f09x3--){_0x4f09x6[_0x4f09x5(_0x4f09x3)]=_0x4f09x4[_0x4f09x3]||_0x4f09x5(_0x4f09x3);} ;_0x4f09x4=[function (_0x4f09x5){return _0x4f09x6[_0x4f09x5];} ];_0x4f09x5=function (){return _0x7bf4[7];} ;_0x4f09x3=1;} ;while(_0x4f09x3--){if(_0x4f09x4[_0x4f09x3]){_0x4f09x1=_0x4f09x1[_0x7bf4[6]]( new RegExp(_0x7bf4[8]+_0x4f09x5(_0x4f09x3)+_0x7bf4[8],_0x7bf4[9]),_0x4f09x4[_0x4f09x3]);} ;} ;return _0x4f09x1;} (_0x7bf4[0],62,99,_0x7bf4[3][_0x7bf4[2]](_0x7bf4[1]),0,{}));
--&gt;&lt;/script&gt;

Yang terakhir carilah kode dibawah ini :

<b:includable id='comments' var='post'>

ganti kode ini

</b:includable>

dan letakan kode dibawah ini untuk menggantikan tulisan yang berwarna merah

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments &gt; 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'/>

<div class='cm_pagenavi' id='cm_page'/>

<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>

<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/> 

<b:if cond='data:comment.author == data:post.author'>
<div class='cm_head'>
<div class='cm_avatar_a'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>                        
</div>
<div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=__BlogID__&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
</div>
</div>
<b:else/>

<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>                        
</div>
<div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=__BlogID__&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
</div>
</div>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
<div class='cm_entry_a'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>

<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</b:if>
</div>

<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>

<b:else/>

<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/> 
</b:if>                                   
</div>  
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if> 
</div>


<b:else/>

<div class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>

<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</b:if>
</div>

<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>

<b:else/>

<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/> 
</b:if>                                   
</div>  
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if> 
</div>
</b:if>
</div>
</div>
</b:if>              
</b:loop>
</div>

<div class='cm_pagenavi' id='cm_page_copy'/>

<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</b:if>
</div>

ganti tulisan __BlogID__ dengan blog id kalian, caranya lihat gambar dibawah ini :

Blogger ID

Jika pada template kalian ada kode ini :

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

hapus dan ganti dengan kode ini :

<b:include data='post' name='comments'/>

Save template kalian dan lihat hasilnya.

Membuat Random Image Pada Header Blogspot


Random Image pada Header cara kerjanya sama dengan Random Image Widget, yaitu bergantiannya image yang tampil bila halaman blog bila di-reload, yang membedakan hanya penempatannya yang ini pada Header blog.

Untuk memasang random image pada header agak sedikit berbeda dengan memasang random image widget, gambar yang akan ditampilkan harus sesuai ukuran header, bisa juga lebih kecil atau lebih besar tapi nantinya akan timpang (tidak enak untuk dilihat), untuk itu sebelum memakai script ini sebaiknya pastikan dulu ukuran header blog kalian, lakukanlah edit gambar sesuai ukuran header sebelum diupload, selain itu biasanya setelah memasang script ini tampilan gambar tidak akan langsung pas karena tiap template ukuran jarak antara header berbeda, bila hal itu terjadi ubahlah bagian padding header untuk menyesuaikannya. Untuk scriptnya kalian bisa mengcopynya di bawah ini :







<script type="text/javascript">
var banner= new Array()
banner[0]="Alamat Gambar"
banner[1]="Alamat Gambar"
banner[2]="Alamat Gambar"
banner[3]="Alamat Gambar"
var random=Math.round(3*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

Cara memasangnya dalam blog :
  • Masuk ke akun Blogger
  • Pilih menu Design/Rancangan - Edit HTML
  • Cari kode <body>
  • Letakan script tersebut dibawah kode <body> - Save
Dalam script tersebut hanya menampilkan 4 buah gambar, bila kalian ingin menambah atau mengurangi jumlah gambar gantilah jumlah angka dalam math random, dan gantilah alamat gambar dengan url gambar kalian yang sudah diupload.

Semoga bermanfaat,

Memasang Background Gambar Pada Sidebar


Mengganti background sidebar dengan gambar, template dengan tampilan polos atau yang memakai background gambar mempunyai nilai tersendiri bagi pemiliknya, untuk memakai background gambar atau tidak itu kembali kepada sang pemilik blog.

Ada yang berpendapat memakai background gambar pada template akan berpengaruh pada kecepatan loading blog, pendapat itu menurut saya benar, dengan memakai background gambar pada template akan berpengaruh besar pada loading blog, terutama bila ukuran gambar tersebut besar dan ukuran filenya besar dan didukung dengan koneksi internetnya lambat.

Untuk ukuran file gambar yang besar bisa disiasati dengan mengubah jenis file, yang biasanya file gambar yang dipakai untuk template berformat jpeg, kalian bisa ubah dengan format png, itu akan menghasilkan ukuran file gambar lebih kecil dan ringan untuk dipakai pada template.

Untuk tahap memasang background sidebar dengan gambar, buatlah gambar yang akan dipasang dengan ukuran tinggi kurang lebih 800px(kalian bisa sesuaikan) dan lebar seukuran lebar sidebar plus jarak antara sidebar dan pinggir blog, itu dimaksudkan supaya lebih memaksimalkan gambar yang tampil dan tidak ada gambar yang terbuang.

Masuk pada Design - Edit HTML dan cari kode #side-wrapper2 { kode css tersebut adalah kode yang ada pada template yang saya pakai (Situseo Blog), kemungkinan besar kode css nya akan berbeda dengan yang kalian pakai, sebagai patokan umumnya template memakai kode #sidebar-wrapper {

Dan tambahkan alamat gambar tersebut, sehingga menjadi seperti dibawah ini :

#side-wrapper2 {
background:url(alamat gambar) no-repeat top right;
background-attachment: fixed;
width:320px;
border:1px solid #E6E6E6;
float:left;
word-wrap:break-word;
overflow:hidden;
margin-top:25px;
padding:0;
}

Save template

keterangan :
top right, untuk posisi gambar rata atas kanan
attachment:fixed, untuk gambar tidak mengikuti scroll mouse (diam)

Semoga bermanfaat,

Menambah Icon Gambar Pada Judul Post


Dengan menambah icon gambar pada judul post akan memberikan tambahan tampilan yang menarik pada judul post, untuk menambahkan icon gambar ini tidaklah terlalu sulit, karena kita hanya menambahkan kode background pada kode css judul posting.

Untuk membuatnya siapkan icon atau gambar yang akan di pasang pada sebelah judul post, kemudian masuk pada menu Design - Edit HTML dan cari kode seperti dibawah ini :





.post h3 {
color:#707070;
font-style: none;
font-weight:normal;
font-size: 24px;
font-family: 'Niconne', cursive;
text-decoration:none;
text-align:left;
line-height:1.4em;
border-bottom:1px dotted #ccc;
margin:0 0 20px;
padding:0 0 2px;
}

Jangan berpatokan kode css yang dalam contoh sama dengan kode css yang ada dalam template kalian, yang penting temukan kode .post h3 {, kode .post h3 merupakan kode css standar untuk mengatur judul posting, bisa juga .post h2 atau .post h1. Jika sudah ketemu, tambahkan kode dibawah ini sebelum kode penutup css judul post.

background:url(http://gambar kalian) no-repeat left;

Sehingga keseluruhan kodenya menjadi seperti dibawah ini :

.post h3 {
color:#707070;
font-style: none;
font-weight:normal;
font-size: 24px;
font-family: 'Niconne', cursive;
text-decoration:none;
text-align:left;
line-height:1.4em;
border-bottom:1px dotted #ccc;
margin:0 0 20px;
padding:0 0 2px;
background:url(http://gambar kalian) no-repeat left;
}

Supaya tidak tumpang tindih antara icon gambar dengan judul post, berilah jarak judul post tersebut dengan mengatur bagian paddingnya.

jarak awal adalah padding:0 0 2px; kalian ubah menjadi padding:0 0 2px 60px; (misalnya, kalian bisa atur sendiri).

keterangan :
angka pertama 0 menunjukan jarak bagian atas
angka kedua 0 menunjukan jarak bagian kanan
angka ketiga 2px menunjukan jarak bagian bawah
angka keempat 60px menunjukan jarak bagian kiri

Save template kalian dan lihat hasilnya, semoga dengan menambah icon gambar pada judul post bisa menjadikan blog kalian tampil lebih menarik.

Semoga bermanfaat,

Hover Keterangan Gambar Dengan Css3 Pada Post


Memberi keterangan gambar pada post image akan membantu pembaca untuk mengetahui penjelasan dari gambar yang dimaksud, efek hover yang ditampilkan pada keterangan gambar berbentuk slide dari arah kiri ke arah kanan dan sebagai alternatif pilihan, efek hover ini bisa dari bawah ke atas, dan script yang digunakan menggunakan css level 3.

Menambahkan keterangan gambar pada post, tentu saja akan mempercantik tampilan blog, terutama untuk tampilan post. Script ini sangat cocok digunakan bagi mereka yang mempunyai blog dengan banyak penggunaan gambar sebagai penambah keterangan suatu posting (artikel). Kelebihan script ini karena menggunakan css, tentu saja penggunaannya mudah dan untuk hover keterangan gambar pun akan menyesuaikan ukuran dari gambar yang ditampilkan.

Untuk memperjelas apa yang saya maksudkan, kalian bisa melihat screen shot dibawah ini atau melihat demonya secara langsung.


caption atau keterangan gambar ketika hover

Untuk menerapkannya pada blog kalian, copy script css dibawah ini dan letakan diatas kode ]]></ b: skin>

CSS
#objek {
float: left; 
margin: 10px; 
overflow: hidden;
position: relative;
}
.ket {
width: 80%; 
height: auto; 
text-align: left;
padding: 5px 10px; 
background: #000;
opacity: 0.6;
color: #fff;
line-height: 18px; 
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;  
-webkit-border-radius: 0x 25px 0px 0px;
-moz-border-radius: 0px 25px 0px 0px;
-o-border-radius: 0px 25px 0px 0px; 
border-radius: 0px 25px 0px 0px;
}
#objek .ket {
position: absolute; 
bottom: 0; 
left: 0;
margin-left: -1000px; 
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out; 
}
#objek:hover {
-webkit-box-shadow:0px 0px 25px #000000;
-moz-box-shadow:0px 0px 25px #000000;
-o-box-shadow:0px 0px 25px #000000;
box-shadow:0px 0px 25px #000000;
}
#objek:hover .ket {
margin-left: 0px;
}

HTML
<div id="objek">
<img src="url gambar" />
<div class="ket">
<b>JUDUL GAMBAR</b><br />
keterangan/penjelasan dari gambar
</div>
</div>

Script tersebut diatas merupakan efek hover dari kiri ke-kanan, untuk menghasilkan efek hover dari bawah ke-atas, kalian cukup mengganti menjadi seperti :

#objek .ket {
margin-bottom: -300px;
}
dan

#objek:hover .ket {
margin-bottom: 0px;
}

Semoga keterangan gambar ini bisa membantu pengunjung untuk lebih memahami artikel yang dimaksud dan bisa mempercantik tampilan blog terutama bagian post.

Semoga bermanfaat,

Dynamic buttons CSS3


Dynamic buttons CSS3 - Dynamic buttons CSS3 merupakan style button code tag html dengan memakai CSS 3, pada dasarnya penggunaan metode button pada CSS 2 dan CSS 3 hampir sama hanya saja untuk CSS 3 codenya lebih meningkat atau ada beberapa code dengan kemampuan yang menurut saya luar bisa di lakukan oleh CSS 3. Bila anda penasaran dengan tampilannya silahkan lihat demo Dynamic buttons CSS3 ini melalui link demo dibawah. Bila anda tertarik memasangnya silahkan lihat tutorial Dynamic buttons CSS3 dibawah ini, langsung saja menuju TKP.



Code CSS here..

.tombol {display: inline-block;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibknLcp0N_enDITOTmwwjv4rJvVaVR4ZDDFnApKa5p6eNsNVxSmEKXL6AUrsapjenDnE-iAUYQNWwY04Usicj0-WOl15fg9c_hGrc0HT8pRXUU6emT_iM8JHvsSIuDb9An6mU4I-f5Loh6/s1600/dinamic-button.png") repeat-x 0px 0px;padding:5px 10px 6px 10px;font-weight:bold;text-shadow: 1px 1px 1px rgba(255,255,255,0.5);border:1px solid rgba(0,0,0,0.4);}.tombol:hover {text-shadow: 1px 1px 1px rgba(0,0,0,0.5);cursor:pointer;}/* warna tombol */.warna-biru {background-color: #CCCCCC; color: #141414;}.warna-biru:hover {background-color: #00c0ff; color: #ffffff;}.warna-hijau {background-color: #CCCCCC; color: #141414;}.warna-hijau:hover{background-color: #006600; color: #ffffff;}.warna-merah {background-color: #CCCCCC; color: #141414;}.warna-merah:hover {background-color: #800000; color: #ffffff;}

Code HTML here..

<p><strong> Demo dynamic buttons CSS3</strong></p><div class="tombol warna-merah">click here !</div><div class="tombol warna-hijau">Readmore</div><div class="tombol warna-biru ">Dynamic Buttons CSS3</div> <p>Ukuran font 12px:</p><div style="font-size: 12px;"><div class="tombol warna-merah">click here !</div><div class="tombol warna-hijau">Readmore</div><div class="tombol warna-biru ">Dynamic Buttons CSS3</div></div> <p>Ukuran font 10px:</p><div style="font-size: 10px;"><div class="tombol warna-merah">click here !</div><div class="tombol warna-hijau">Readmore</div><div class="tombol warna-biru ">Dynamic Buttons CSS3</div>
</div>

Horizontal curve shadow


Horizontal curve shadow - cara membuat Horizontal curve shadow, Horizontal curve shadow dengan CSS 3 memiliki tampilan yang menarik dimana sistem bayangan dari objeknya kelihatan lebih bagus. Tampilan Horizontal curve shadow dengan CSS 3 menambah kesan suatu objek itu kelihatan memiliki tampilan 2D. Untuk melihat bagaimana tampilan dari Horizontal curve shadow ini silahkan kunjungi link demo dibawah, bila anda tertarik untuk memasang Horizontal curve shadow pada blog kesayangan anda silahkan simak tutorial dibawah ini , langsung saja menuju TKP.

Code CSS here..

.shadow-style {position:relative;float:left;
width:300px; padding:1em;
margin:2em 10px 4em;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}.shadow-style:before,
.shadow-style:after {
content:"";
position:absolute;
z-index:-2;
}
.shadow-style p {
font-size:16px;
font-weight:bold;
}
.bdcurve:before {
top:10px;
bottom:10px;
left:0;
right:50%;
box-shadow:0 0 25px -2px rgba(0,0,0,0.6);
border-radius:10px / 100px;
}
.rscurve:before {
right:0;
}
.rscurve:before {
top:0;
bottom:0;
left:10px;
right:10px;
border-radius:100px / 10px;
}

Code HTML here..


<div class="shadow-style bdcurve rscurve">
<p>CODE TEXT, IMAGE, DLL </p>
</div>

Subscribe style UNIK


Subscribe style rivai silaban - subscribe style rivai silaban merupakan suatu sebutan untuk subscribe yang unik ini. Tampilan subscribe style rivai silaban dapat menarik perhatian dari pengunjung blog anda. Untuk para blogger mania hal yang unik akan menjadi incaran dimana sebuah tampilan halaman blog kita akan sangat mempengaruhi para pengunjung blog tersebut. Untuk melihat tampilan dari subscribe style rivai silaban ini silahkan kunjungi halaman demo melalui link demo dibawah ini, bila anda tertarik untuk memasangnya silahkan simak tutorial berikut, langsung saja menuju TKP.

Code CSS here..

box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 200px;
position: fixed;
bottom: 203px;
right: 2px;
display: none;
z-index: 9999;
height: 150px;
background-color: #033543;
color: #FFFFFF;
text-shadow: 1px 1px 2px #000;
}
.subscribe_style_rivai_silaban {
height:90px;
width:200px;
margin:0 0 10px 0px;
}
.subscribe_style_rivai_silaban .subscribe{padding:5px 10px}
.subscribe_style_rivai_silaban .subscribe p{font-family:verdana;font-size:12px;color:#333}
.subscribe_style_rivai_silaban .subscribe span{color:#999;font-size:11px}
.subscribe_style_rivai_silaban .subscribe-form{margin:6px 0 3px;height:40px}
.subscribe_style_rivai_silaban .subscribe-form .email{ font-size: 12px;
padding: 5px;
width: 95%;
color: rgb(102, 102, 102);
font-family: georgia;
margin-bottom: 5px;
border: 1px solid rgb(153, 153, 153);
}
.subscribe_style_rivai_silaban .subscribe-form .submit{
background-color:#D1350E;
border:1px solid black;
border-radius:2px;
color:white;
cursor:pointer;
display:inline-block;
font-family:arial;
font-size: 0.9em;
font-weight:bold;
height:28px;
padding:4px 8px;
text-align:center;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
float: right;
}
.subscribe_style_rivai_silaban .subscribe-form .submit:hover{box-shadow:1px 1px 0 #626262 inset;background-color:#990000}
.subscribe_style_rivai_silaban .rivaiRSS{margin:10px 0}
.subscribe_style_rivai_silaban .rivaiRSS a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDG-lX97_kq08Ozxji5AgtAyB9DLHxD5FZopNjwCT26ufo6VWmYfdcHgdR2sp83nvh7rArNfCYaoFxEevCaH3lrhim8DGD-K0XX2W5FB7YYkKwJkyokDsl7p38teFxAyajOYmrpBbVNCLn/s1600/social-icon.png') no-repeat;background-position:0px 0px;display:block;width:33px;height:33px;text-indent:-9999px;float:left;margin:0 3px 20px 0}
.subscribe_style_rivai_silaban .rivaiRSS a:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDG-lX97_kq08Ozxji5AgtAyB9DLHxD5FZopNjwCT26ufo6VWmYfdcHgdR2sp83nvh7rArNfCYaoFxEevCaH3lrhim8DGD-K0XX2W5FB7YYkKwJkyokDsl7p38teFxAyajOYmrpBbVNCLn/s1600/social-icon.png') no-repeat;background-position:-102px 0px}
.subscribe_style_rivai_silaban .rivaiFacebook{margin:0}
.subscribe_style_rivai_silaban .rivaiFacebook a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDG-lX97_kq08Ozxji5AgtAyB9DLHxD5FZopNjwCT26ufo6VWmYfdcHgdR2sp83nvh7rArNfCYaoFxEevCaH3lrhim8DGD-K0XX2W5FB7YYkKwJkyokDsl7p38teFxAyajOYmrpBbVNCLn/s1600/social-icon.png') no-repeat;background-position:-34px 0px;display:block;width:33px;height:33px;text-indent:-9999px;float:left;margin:0 3px 0 0}
.subscribe_style_rivai_silaban .rivaiFacebook a:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDG-lX97_kq08Ozxji5AgtAyB9DLHxD5FZopNjwCT26ufo6VWmYfdcHgdR2sp83nvh7rArNfCYaoFxEevCaH3lrhim8DGD-K0XX2W5FB7YYkKwJkyokDsl7p38teFxAyajOYmrpBbVNCLn/s1600/social-icon.png') no-repeat;background-position:-136px 0px}
.subscribe_style_rivai_silaban .rivaiTwitter{margin:0}
.subscribe_style_rivai_silaban .rivaiTwitter a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDG-lX97_kq08Ozxji5AgtAyB9DLHxD5FZopNjwCT26ufo6VWmYfdcHgdR2sp83nvh7rArNfCYaoFxEevCaH3lrhim8DGD-K0XX2W5FB7YYkKwJkyokDsl7p38teFxAyajOYmrpBbVNCLn/s1600/social-icon.png') no-repeat;background-position:-68px 0px;display:block;width:33px;height:33px;text-indent:-9999px;float:left;margin:0 3px 0 0}
.subscribe_style_rivai_silaban .rivaiTwitter a:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDG-lX97_kq08Ozxji5AgtAyB9DLHxD5FZopNjwCT26ufo6VWmYfdcHgdR2sp83nvh7rArNfCYaoFxEevCaH3lrhim8DGD-K0XX2W5FB7YYkKwJkyokDsl7p38teFxAyajOYmrpBbVNCLn/s1600/social-icon.png') no-repeat;background-position:-170px 0px}
.subscribe_style_rivai_silaban .rivaiGoogle{margin:0}
.subscribe_style_rivai_silaban .rivaiGoogle a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDG-lX97_kq08Ozxji5AgtAyB9DLHxD5FZopNjwCT26ufo6VWmYfdcHgdR2sp83nvh7rArNfCYaoFxEevCaH3lrhim8DGD-K0XX2W5FB7YYkKwJkyokDsl7p38teFxAyajOYmrpBbVNCLn/s1600/social-icon.png') no-repeat;background-position:0px -34px;display:block;width:33px;height:33px;text-indent:-9999px;float:left;margin:0 3px 0 0}
.subscribe_style_rivai_silaban .rivaiGoogle a:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDG-lX97_kq08Ozxji5AgtAyB9DLHxD5FZopNjwCT26ufo6VWmYfdcHgdR2sp83nvh7rArNfCYaoFxEevCaH3lrhim8DGD-K0XX2W5FB7YYkKwJkyokDsl7p38teFxAyajOYmrpBbVNCLn/s1600/social-icon.png') no-repeat;background-position:-102px -34px}
.subscribe_style_rivai_silaban .rivaiPinterest{margin:0}
.subscribe_style_rivai_silaban .rivaiPinterest a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDG-lX97_kq08Ozxji5AgtAyB9DLHxD5FZopNjwCT26ufo6VWmYfdcHgdR2sp83nvh7rArNfCYaoFxEevCaH3lrhim8DGD-K0XX2W5FB7YYkKwJkyokDsl7p38teFxAyajOYmrpBbVNCLn/s1600/social-icon.png') no-repeat;background-position:-34px -34px;display:block;width:33px;height:33px;text-indent:-9999px;float:left;margin:0 3px 0 0}
.subscribe_style_rivai_silaban .rivaiPinterest a:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDG-lX97_kq08Ozxji5AgtAyB9DLHxD5FZopNjwCT26ufo6VWmYfdcHgdR2sp83nvh7rArNfCYaoFxEevCaH3lrhim8DGD-K0XX2W5FB7YYkKwJkyokDsl7p38teFxAyajOYmrpBbVNCLn/s1600/social-icon.png') no-repeat;background-position:-136px -34px}
.subscribe_style_rivai_silaban .email-group input{display:block;float:left;width:65%;margin:0 5px 0 0;padding:12px 10px 11px 10px;border:1px solid #249fea;border-radius:4px;font-size:14px;box-shadow:none;color:#999}

Code HTML here..

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/20)$(".subscribesliders").show("slow");else $(".subscribesliders").hide("slow");});function closesocialslide(){$('.subscribesliders').remove();}</script><div style="display: none;" class="subscribesliders">
Join and Subscribe article here !
<div class="subscribe_style_rivai_silaban"><div class="subscribe">
<div style="margin: -4px 0 20px -1px;">
<div class="rivaiRSS">
<a href="http://feeds.feedburner.com/X" rel="nofollow" target="_blank" title="Subscribe to RSS">Subscribe to RSS</a></div>
<div class="rivaiFacebook">
<a href="https://www.facebook.com/arieadie30" rel="nofollow" target="_blank" title="Like us on Facebook">Like us on Facebook</a></div>
<div class="rivaiTwitter">
<a href="https://twitter.com/lindamarlina40" rel="nofollow" target="_blank" title="Follow us on Twitter">Follow us on Twitter</a></div>
<div class="rivaiGoogle">
<a href="https://www.google.com/+arieadie8" rel="nofollow" target="_blank" title="Follow us on Google+">Follow us on Google+</a></div>
<div class="rivaiPinterest">
<a href="http://mas-arie69.blogspot.com/" rel="nofollow" target="_blank" title="Follow us on Pinterest">Follow us on Pinterest</a></div>
</div></div> <form class="subscribe-form" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=x', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" name="email" value="E-mail here..." onfocus="if (this.value == 'E-mail here...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'E-mail here...';}" />
<input type="hidden" value="rivai-site" name="uri"/>
<input type="hidden" value="rivai-site" name="title"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submit" type="submit" name="submit" value="Subscribe" /></form>
</div></div><div class='clear'>

accordion link style hover


Accordion link style hover - cara membuat accordion link style hover ini sangat mudah, accordion link style hover ini tidak memiliki script jadi lebih ringan. Konstruksi penulisan tag code accordion link style hover ini lebih simple dan mudah di pahami. Dengan efect transition accordion link style hover ini memiliki tampilan yang menarik, jadi sangat cocok untuk blogger mania yang menginginkan link pada halaman blognya memakai fungsi accordion. Untuk melihat tampilan accordion link style hover ini silahkan kunjungi link dimo dibawah ini, dekatkan cursor anda pada link yang berada di halaman demo. Bila anda tertarik untuk memasang tehnik accordion link style hover ini silahkan simak tutorial dibawah ini, langsung saja menuju TKP.


Code CSS here..


.accordion-link-atyle-hover {
width: 300px;
margin: 0 auto;
padding: 5px;
}.accordion-link-atyle-hover a{
list-style-type: decimal;
color: #990000;
text-decoration: none;
font-family: Verdana;
font-size: 12px;
margin: 0;transition: .5s ease-out 0s;
}.accordion-link-atyle-hover a:hover{
color: #0000FF;
margin: 0 0 0px 10px;
transition: .5s ease-out 0s;
}.accordion-link-atyle-hover ul li{
margin: 3px 0 3px -20px;
list-style-type: decimal;
}.accordion-link-atyle-hover li a{
list-style-type: decimal;
color: #990000;
text-decoration: none;
font-family: Verdana;
font-size: 12px;
margin: 0;transition: .5s ease-out 0s;
}.accordion-link-atyle-hover li a:hover{
color: #0000FF;
margin: 0 0 0px 10px;
transition: .5s ease-out 0s;} 

Code HTML here..


<div class="accordion-link-style-hover">
<ul>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="accordion-link-atyle-hover">accordion link atyle hover 1</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="accordion-link-atyle-hover">accordion link atyle hover 2</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="accordion-link-atyle-hover">accordion link atyle hover 3</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="accordion-link-atyle-hover">accordion link atyle hover 4</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="accordion-link-atyle-hover">accordion link atyle hover 5</a></li>
</ul>
</div>

Random post rounded list


Random post rounded list - random post rounded list memiliki tampilan yang menarik, random post rounded list cocok buat para blogger mania yang menginginkan tampilan widget yang menarik dan unik. Widget random post rounded list memakai list style type decimal dengan sistem rounded. Gambar disamping merupakan gambar tampilan random post rounded list buat para blogger mania yang ingin melihat tampilan demo random post rounded list ini silahkan kunjungi link sumber halaman demo dibawah ini. Bila anda tertarik memasang random post rounded list pada halaman blog kesayangan anda, silahkan simak penjelasan tutorial dibawah ini, langsung saja menuju TKP.

Code CSS random post rounded list.


.random-post-rounded-list ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);}
.random-post-rounded-list a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
margin: .5em 0;
background: #ddd;
color: #444;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;}
.random-post-rounded-list a:hover{background: #eee;}
.random-post-rounded-list a:hover:before{ transform: rotate(360deg);}
.random-post-rounded-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
background-color: #000000;
color: #CCCCCC;}

Code HTML random post rounded list.


<div class="random-post-rounded-list"><ol>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write();
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item ="<li>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></li>";
document.write(item);}}
}document.write();}</script>
<script src="http://mas-arie69.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script></ol></div>

cara menyembunyikan sidebar di halaman blogspot


Cara menyembunyikan sidebar di halaman blogspot - postingan cara menyembunyikan sidebar di halaman blogspot ini, merupakan suatu trik para blogger mania untuk menampilkan sebuah halaman ( page ) dengan memiliki tampilan yang menarik dan berkesan profesional. Tehnik cara menyembunyikan sidebar di halaman blogspot ini biasanya di pergunakan blogger pada suatu halaman tertentu yang memang halaman tersebut mendapat prioritas tersendiri dari halaman halaman lainnya . Tampilan halaman forum dibedakan dengan halaman halaman lainnya dimana halaman yang berfungsi sebagai forum tersebut memiliki tampilan tidak seperti pada halaman statistik blogspot, yang memiliki sidebar dan footer halaman. Semoga anda dapat memahami postingan cara menyembunyikan sidebar di halaman blogspot ini dengan melihat langsung demonya, silahkan anda kunjungi link demo dibawah ini, lihat bagian sisi halaman berbeda dengan halaman home page atau halaman statisticnya.


Code CSS here..

<style type='text/css'>
<b:if cond='data:blog.url == &quot;http://www.rivai.org/p/template.html&quot;'>
.sidebar-wrapper { display:none;}
</b:if>
</style>

Saturday, March 1, 2014

cara membuat pop up coding style blogspot


Cara membuat pop up coding style blogspot - postingan cara membuat pop up coding style blogspot ini memiliki tampilan menarik, cara membuat pop up coding style blogspot memakai fungsi jquery. Buat para blogger yang menyediakan berbagai tutorial yang bersangkutan dengan code ada baiknya anda memakai sistem ini, agar halaman blog anda tertata rapi. Untuk melihat tampilan dari cara membuat pop up coding style blogspot ini, silahkan klik link demo dibawah dan tes hasilnya, bila anda tertarik untuk memasangnya di halaman blogspot anda silahkan simak penjelasan dibawah ini, langsung saja menuju TKP.

KODE SCRIPT
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>


<script type="text/javascript" src="http://yourjavascript.com/1041438119/popup-1-0-1.js"></script>
CSS
.up_style { display: none; }
.lightboxcodestyle{display:none;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9999;height:100%;text-align:center;cursor:pointer;}.lightboxcodestyle .lightboxcodestyle-close{
position:absolute;
z-index:9999;
right:0;
top:0;
line-height:25px;
width:25px;
cursor:pointer;
text-decoration:none;
text-align:center;
font:Arial,sans-serif;
color:#FFFFFF;
background-color: #000000;
}.lightboxcodestyle:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em;}.lightboxcodestyle .lightboxcodestyle-content{
text-align:left;
display:inline-block;
vertical-align:middle;
position:relative;
padding:2%;
width:50%;
max-height:95%;
overflow:auto;
cursor:auto;
background-color: #333333;
color: #FFFFFF;
}.lightboxcodestyle .lightboxcodestyle-inner{display:block;}.lightboxcodestyle .titles{
font-size: 14px;
font-family: Verdana;
padding-bottom: 20px;
}.lightboxcodestyle .coding{
font-size: 12px;
font-family: Courier;
padding-bottom: 20px;
color: #FFFFFF;
height: 200px;
overflow: auto;
width: 100%;
word-wrap: break-word;
padding-right:20px;
}
.kuning {color: #FFFF00}
.biru {color: #00FFFF}
.hijau {color: #66FF00}
HTML
 <div>
<a href="#" masarie-styleup="#masarie" title='keterangan gambar' >Lihat code - Click here..!!</a>
</div>
<div class="up_style" id="masarie">
<div class="titles">Judul pup up anda... </div>
<div class="coding"><span class="kuning">KODE ANDA DISINI DENGAN, WARNA CODE KUNING </span><br>
<span class="biru">KODE ANDA DISINI DENGAN, WARNA CODE BIRU </span><br>
ISIKAN DENGAN CODE ANDA, TAPI SEBAIKNYA KONVERSIKAN DULU KODE ANDA AGAR TAMPILAN COE ANDA LEBIH MENARIK DAN ENAK DIPANDANG MATA, BILA ANDA TIDAK MENGKONVERSIKAN CODE ANDA MAKA CODE YANG ANDA PASANG TIAK AKAN BERPUNGSI ALIAS TIDAK MUNCUL<br/>
<p class="hijau">ANDA JUGA DAPAT MEMASANG TEXT DI DALAM CODE INI, SILAHKAN PASANG SENIRI TEXT ANDA. TEXT INI MEMAKAI COE TAG HTML CLASS HIJAU </p>
</div>

cara membuat background blockquote animasi


Cara membuat background blockquote animasi - cara membuat background blockquote animasi ini sangat simpel, tampilan background blockquote animasi ini juga menarik. Blockquote ini sering kita jumpai pada blogspot, jadi hal ini harus di kuasai para blogger mania. Pada tutorial cara membuat background blockquote animasi kali ini, saya hanya memodifikasi tempilannya dengan perintah CSS untuk merubah tampilan devault. Untuk melihat tampilan background blockquote animasi ini silahkan lihat tampilan background blockquote animasi dibawah ini dan tutorial lengkapnya, bila anda tertarik memasang cara membuat background blockquote animasi, silahkan simak tutorial dibawah ini, langsung jasa menuju TKP.


CSS
blockquote {
width: 90%;
margin:10px auto;
border-top: solid 10px #666;border-left: solid 1px #ccc;border-bottom: solid 1px #ccc;border-right: solid 1px #ccc;
box-shadow:100 2px #999;
background-color: #eee;
padding: 10px;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
color: #333333;
line-height: 15px;
word-wrap: break-word;
text-align: left;
}
blockquote:hover {
border-top: solid 10px #3A74C9;
color: #000000;
background-color: #FFFFFF;
box-shadow:0 0 5px #999;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRE7xZHHzLbX114TFJgSKHfVcv6iBvnywNi9dpxcdxJF6n7RPSEyqAQx34sk2xUIPF_6t0A4Vh7lu2-L_olLLUytib2ucUlgHidYj13CTiup8HJQjFa_-D51zD87ywM6GUXzYKTddMVyGZ/s1600/hover-bg.gif") repeat;}

Pada prinsipnya sistem yang dipakai cara membuat background blockquote animasi ini hanyalah fungsi CSS cara membuat background blockquote animasi itu sendiri, tanpa memakai fungsi tag html, untuk tag html cara membuat background blockquote animasi hanya memakai code html standartnya saja <blockquote> ... </blockquote>.

cara membuat widget menu slick blogspot


Cara membuat widget menu slick blogspot - cara membuat widget menu slick blogspot dengan jquery,cara membuat widget menu slick blogspot menu slick blogspot ini memiliki tampilan yang menarik. Pada dasarnya memanfaatkan cara membuat widget menu slick blogspot ini hanya untuk menampilkan suatu menu yang lebih mudah dilihat para pengunjung dan tidak memakan tempat pada halaman blogspot. cara membuat widget menu slick blogspot ini sangat membantu blogger mania untuk menampilkan suatu menu yang unik, untuk melihat tampilan widget menu slick blogspot ini silahkan klik link demo dibawah ini, setelah anda berada di halaman demo widget menu slick blogspot silahkan dekatkan cursor anda pada menu wang berwarna kuning dan bila anda tertarik memasangnya, silahkan simak tutorial dibawah ini, langsung saja menuju TKP.
Pasang code script dibawah ini didalam code CSS template anda.

CSS
 .menu_slick_blogspot{
height:40px;
line-height:40px;
position:fixed;
top:150px;
left:0px;
font-family: arial;
font-size:16px;
text-transform:uppercase;
}.menu_slick_blogspot_main{
color:#f0f0f0;
z-index:10;
border:1px solid #222;
background-color:#000000;
cursor:pointer;
text-align:left;
font-weight:bold;
text-indent:20px;
width:100px;
position:absolute;
top:0px;
left:0px;
text-shadow:1px 1px 1px #000;
}.menu_slick_blogspot_main:hover{color:#fff;}
.menu_slick_blogspot_main_right{
width:40px;
height:40px;
position:absolute;
left:60px;
top:0px;
cursor:pointer;
border:1px solid #000;
background:#0099FF url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9tszE5HOnqEO-dA0AMiIthdRnUPRxZp-tIuL6ZPdtIhnAxOjI-GscvqC7EqTJfR1IecTt8g56f1XN8FeMNyaFiVAPQY1GLmY0TcqtdggGcFBly7kI8ptPQdvnPgNNZEVh0UcDyA1JLsE/s1600/right.png') no-repeat center center;
background-color: #FFFF00;
}.menu_slick_blogspot ul {
position:absolute;
left:202px;
top:0px;
width:1024px;
list-style:none;
padding:0px;
height:30px;
margin:0;
}.menu_slick_blogspot ul li a{
text-decoration:none;
cursor:pointer;
display:block;
float:left;
margin:0px;
text-indent:10px;
padding:0px 10px 0px 3px;
line-height:40px;
height:40px;
text-indent:10px;
letter-spacing:1px;
color:#FFFFFF;
background-color:#800000;
text-shadow:1px 1px 1px #000;
border:1px solid #333;
border-left:none;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}.menu_slick_blogspot ul li a.hover{
color:#FFFFFF;
box-shadow:0px 0px 3px #000 inset;
background-color: #B90000;
text-shadow: none;}

Pasang code script dibawah ini tepat dibawah code <body>
 <div id="ui_element" class="menu_slick_blogspot">
<ul>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="menu" class="hover">Menu Navigasi 0</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 1</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 11</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 111</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 1111</a></li>
<li><a href="http://mas-arie69.blogspot.com/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 11111</a></li>
</ul>
<div class="menu_slick_blogspot_main">Menu</div>
<div class="menu_slick_blogspot_main_right"></div>
</div>
Pasang code script dibawah ini di atas code </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/61616341111/slick.js"></script>

show up code blogspot style


Show up code blogspot style - cara membuat show up code blogspot style sangat menarik, tampilan show up code blogspot style ini juga termasuk unik. show up code blogspot style memakai sistem jquery, buat anda yang menginginkan tampilan yang untuk untuk halaman blog kesayangannya, anda dapat mencoba sistem ini untuk menampilkan suatu code pada halaman anda. Untuk melihat tampilan show up code blogspot style ini silahkan lihat demo melalui link demo dibawah ini, Silahkan klik tulisan "Click to open code" pada halaman demo dan bila anda tertarik untuk memasangnya silahkan ikuti tutorial dibawah ini, langsung saja menuju TKP.
 Pasang code script dibawah ini didalam code CSS template anda.

Code CSS here..

 .show-up-code-blogspot-style {
margin:0 auto;
width:600px;
padding:0;
font-family: Arial;
font-size: 12px;
color: #333333;
}
.show-up-code-blogspot-style p {
margin:10px auto;
height: 300px;
overflow: auto;
}
.birustyle {color:#0000FF}
.merahstyle {color:#FF0000}
.boxshare {
position: relative;
padding: 10px;
overflow: hidden;
}
.hidden-code {
width:100%;
height:35px;
position:absolute;
bottom:0;
left:0;
}
.open-code {
padding:5px;
border-top:4px double #ddd;
background:#fff;
color:#333;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEZwKTmXoqtTclrpz_BP_AsKsIKNyXAUIb1nu-2Ks4A3Uxk5gCkCShZ2XstwVegiNNlcaWh6A_aIXWQNfhA1G6oQkfXkqm3CmcyCLiZs0YeI13-FkF4GQwGePrt4zrVfRU5NV_TM_tgXDC/s1600/BCD.gif" ) no-repeat 100% 50%;
}
.open-code a {
padding-right:22px;
font-weight:bold;
text-decoration:none;
color: #FF0000;
}
.open-code a:hover {color:#000;}


Pasang code script dibawah ini tepat dibawah code <body>

 <div class="show-up-code-blogspot-style">
<div class="boxshare">
<div style="text-align: left;padding:0 10px;margin: 0;line-height: 20px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhveNgtNEX7k81MujQQ5hMEOh3h34V9gp3yuGRTMB62Ek4-Yat2fcyWo8H5YdLmMhheaM98T4xc-6gUE-oP83WJXJ5llH-jvRmH8fB4vmWvOexaOKA8fYPyL88HiU7YNIlem7kbCSu8sW0/s1600/bg.png);"><p>
<span class="merahstyle">&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;</span><br>
<span class="birustyle">&lt;script type=&quot;text/javascript&quot;&gt;</span><br>
$(function(){<br>
var slideHeight = 0; <br>
var defHeight = $('.boxshare').height();<br>
if(defHeight &gt;= slideHeight){<br>
$('.boxshare').css('height' , slideHeight + 'px');<br>
$('.open-code').append('&lt;a href=&quot;#&quot;&gt;Click to Read More&lt;/a&gt;');<br>
$('.open-code a').click(function(){<br>
var curHeight = $('.boxshare').height();<br>
if(curHeight == slideHeight){<br>
$('.boxshare').animate({<br>
height: defHeight<br>
}, &quot;normal&quot;);<br>
$('.open-code a').html('Close');<br>
$('.hidden-code').fadeOut();<br>
}else{<br>
$('.boxshare').animate({<br>
height: slideHeight<br>
}, &quot;normal&quot;);<br>
$('.open-code a').html('Click to Read More');<br>
$('.hidden-code').fadeIn();<br>
}<br>
return false;<br>
}); <br>
}<br>
});<br>
<span class="birustyle">&lt;/script&gt; </span>
</p></div><div class="hidden-code"></div></div>
<div class="open-code"></div></div><br/>


Pasang code script dibawah ini di atas code </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
var slideHeight = 0;
var defHeight = $('.boxshare').height();
if(defHeight >= slideHeight){
$('.boxshare').css('height' , slideHeight + 'px');
$('.open-code').append('<a href="#">Click to open code</a>');
$('.open-code a').click(function(){
var curHeight = $('.boxshare').height();
if(curHeight == slideHeight){
$('.boxshare').animate({
height: defHeight
}, "normal");
$('.open-code a').html('Click to close code');
$('.hidden-code').fadeOut();
}else{
$('.boxshare').animate({
height: slideHeight
}, "normal");
$('.open-code a').html('Click to open code');
$('.hidden-code').fadeIn();
}
return false;
});
}
});
</script>

cara membuat menu blogspot dengan css


Cara membuat menu blogspot - widget menu blogspot atau cara membuat menu blogspot ini sangat simpel, code menu blogspot ini ringan dan memiliki tampilan yang menarik. Widget menu blogspot cocok buat para pemburu menu unik dan memiliki code yang ringan. Untuk melihat bagaimana bentuk dan tampilan widget menu blogspot ini, silahkan klik link demo dibawah ini dan dekatkan cursor anda pada menu blogspotnya. Bila anda merasa tertarik dan ingin memasangnya di halaman blogspot anda, silahkan simak penjelasan tutorial di bawah ini, langsung saja menuju TKP.


Code CSS here..

 ul.menu-blogspot { margin:0; padding:0; list-style-type:none; }ul.menu-blogspot li { position:relative; float:left; border-top:4px solid #fff; margin-right: 15px; padding-right: 20px; padding-top: 5px;}ul.menu-blogspot .select { border-top:4px solid #FFEAEA;}ul.menu-blogspot li:hover { border-top:4px solid #990000;}ul.menu-blogspot li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana; color:#990000;}ul.menu-blogspot li a:hover { color:#FF0000; border:none; }ul.menu-blogspot li span{display:none;position:absolute;top:15px;left:2px;width:160px;font:normal 9px Verdana;line-height: 10px;background-color: #000000;padding: 5px;}ul.menu-blogspot li a:hover span {margin-top: 7px; display:block; color: #CCCCCC;}

 

 

Pasang code html cara membuat menu blogspot ini dibawah ini di dalam postingan atau halaman anda.

html

 <ul class="menu-blogspot">
<li ><a href="http://mas-arie69.blogspot.com/" title="Branda" target="_blank">Branda<span>Halaman awal  yang membidangi berbagai tutorial Blogspot</span></a></li>
<li class="select" ><a href="http://mas-arie69.blogspot.com/" title="About Us" target="_blank">About Us<span>Profil admin dapat anda lihat di halaman ini - kepribadian penulis</span></a></li>
<li><a href="http://mas-arie69.blogspot.com/" title="Contact" target="_blank">Contact<span>Bila anda membutuhkan fasilitas untuk menghubungi kami, silahkan di halaman contact</span></a></li>
<li><a href="http://mas-arie69.blogspot.com/" title="Sitemap" target="_blank">Sitemap<span>Untuk mempermudah melihat semua artikel pada situs ini, kami menyediakan fasilitas sitemap</span></a></li>
<li><a href="http://mas-arie69.blogspot.com/" title="F.A.Q" target="_blank">F.A.Q<span>Anda dapat melihat semua peraturan yang berlaku dihalaman dan situs ini - untuk fasilitas umum</span></a></li>
</ul><div style=" clear:both"/><br/>

cara membuat space iklan blogspot dengan CSS3


Cara membuat space iklan blogspot dengan CSS3 - cara membuat space iklan blogspot dengan CSS3 tanpa jquery, cara membuat space iklan blogspot dengan CSS3 ini hanya mengandalkan fungsi CSS 3 saja sehingga codenya begitu ringan. Buat anda yang membutuhkan tampilan space iklan yang unik dan memiliki tombol contact silahkan memakai code ini, untuk melihat tampilan cara membuat space iklan blogspot dengan CSS3 ini silahkan anda klik demo dibawah ini, dekatkan cursor anda pada gambar yang berada di halaman demo, bila anda tertarik memasang space iklan blogspot dengan CSS3 di halaman blog kesayangan anda, silahkan simak tutorial dibawah ini, langsung saja menuju tutorial cara membuat space iklan blogspot dengan CSS3 dibawah ini...
Pasang code CSS cara membuat space iklan blogspot dengan CSS3 ini didalam CSS blogspot anda.

Code CSS here..



.lihat {width: 300px;height: 200px; margin: 5px;float: left;border: 10px solid #eee;overflow: hidden;position: relative;text-align: center;box-shadow: 1px 1px 2px #999;cursor: default;}
.lihat .masker,.lihat .content {width: 300px;height: 200px;position: absolute;overflow: hidden;top: 0;left: 0;}
.lihat img { display: block;position: relative;}
.lihat h2 {text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 17px;padding: 10px;background: rgba(255, 0, 0, 0.5);margin: 20px 0 0 0;font-family: Verdana;}
.lihat p {font-family: verdana;font-size: 12px;position: relative;color: #fff;padding: 0 20px 0 20px;text-align: center;line-height: 20px;}
.lihat a.informasi {display: inline-block;text-decoration: none;padding: 7px 14px;color: #fff;text-transform: uppercase;box-shadow: 0 0 1px #000;font-family: "Courier New", Courier, monospace;background-color: #2788C2;}
.lihat a.info: hover {box-shadow: 0 0 5px #000;}
.pasang-iklan img {transition: all 0.2s linear;}
.pasang-iklan .masker {opacity: 0;background-color: rgba(0,0,0, 0.7);transition: all 0.4s ease-in-out;}
.pasang-iklan h2 {transform: translateY(-100px);opacity: 0;transition: all 0.2s ease-in-out;}
.pasang-iklan p {transform: translateY(100px);opacity: 0;transition: all 0.2s linear;}
.pasang-iklan:hover img {transform: scale(1.1,1.1);}
.pasang-iklan a.informasi {opacity: 0; transition: all 0.2s ease-in-out;}
.pasang-iklan:hover .masker {opacity: 1;}
.pasang-iklan:hover h2, .pasang-iklan:hover p, .pasang-iklan:hover a.informasi {opacity: 1;transform: translateY(0px);}
.pasang-iklan:hover p {transition-delay: 0.1s;}
.pasang-iklan:hover a.informasi { transition-delay: 0.2s;}

Pasang code html cara membuat space iklan blogspot dengan CSS3 ini dibawah ini di dalam gadget blogspot anda.

Code HTML here..



<div class="lihat pasang-iklan">
<img alt="space iklan blogspot dengan CSS3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFzG9XwT0c-IdMB9IimuQMe8-HridfX5Wicp3m0Jf1NTBwnSd2JxcxLVtUdD7rfvKXGdirS-LxU7UWEq0d9GDV1Fk2z1uRKhHm0LqTdS85CP_wL7AfiJqdCwf1EHReCIuA35b4r_z8oegU/s1600/iklan-1.jpg" title="space iklan blogspot dengan CSS3"/>
<div class="masker">
<h2>Pasang Iklan Anda</h2>
<p>Untuk memasang iklan anda di halaman situs ini, dengan fasilitas premium, silahkan hubungi sales kami...</p>
<a href="http://www.rivai.org/" class="informasi" target="_blank" rel="nofollow" title="Contact">Read More</a>
</div>
</div>