Monster Zila

√ Home → Posts Filed Under Blog

Showing posts with label Blog. Show all posts

Cara Mudah Mendapatkan Uang di Internet

Banyak orang yang saat ini tengah mencari cara bagaimana dengan mudah mendapatkan uang di internet, padahal cara mudah bisa dikatakan tidak ada. sebagai orang yang ingin sukses tentu sebaiknya jangan pernah mencari cara mudah, karena hal tersebut hanya akan menghambat proses perkembangan saja. Maka dari itu sebaiknya anda belajar dengan cara yang tepat agar bisa mendapatkan sesuatu yang tepat pula.

ketika anda bekerja keras mencari uang di internet itu merupakan langkah yang sangat baik, karena selain akan banyak sekali menuai kegagalan juga akan ada pembelajaran yang sangat bermanfaat. jadi sebaiknya pakailah cara yang baik untuk menghasilkan uang di internet.

Untuk bisa menghasilkan uang di internet saat ini bisa melalui berbagai media, seperti sosial network (facebook, twitter,dll) serta bisa juga melalui blog yang sekarang anda baca. dengan memasang iklan atau menjual produk milik sendiri juga bisa produk milik orang laian.

Inilah salah satu keuntungan yang bisa kita peroleh ketika memulai bisnis online, dengan segala macam kemudahan tentu kita akan di permudah terutama dari segi fasilitas. anda tidak perlu khawatir apabila di awal banyak menemui kendala, karna itu adalah proses pembelajara. yang perlu di tekankan adalah tidak ada yang instant untuk menjadi orang sukses.

Cara Meningkatkan Visitor di Blog Baru

Kali ini saya mencoba untuk menyempatkan melakukan pembahasan tentang bagaimana cara meningkatkan visitor di blog baru, tantangannya adalah kita melakukan pertempuran optimasi di blog baru, oleh sebab itu di butuhkan energi yang lebih agar bisa memperoleh kunjungan blog meskipun usianya masih seumur jagung. Cara meningkatkan visitor blog baru ini saya peroleh berdasarkan pengalaman pribadi saja. untuk meningkatkan visitor bolog anda haris tau apa yang menjadi elemen penting.

Pertama, backlink (umpan balik sebuah link)
Kedua, isi Kontent (berkualitas atau tidak)
Ketiga,Situs Sosial Bookmark (lintas.me, infogue.com dan masih banyak yang lainnya)

Ok, kita mulai saja. Setiap anda melakuakan posting di blog anda yang baru, carilah berita ter-update yang kemungkinan banyak di cari orang, anda juga bisa browsing ke situs-situs terkenal untuk mendapatkan pencerahan berita ter-update. setelah itu coba pilih topik yang tengah Hot, misalnya saat ini yang menjadi trend adalah Kapolri vs KPK, nah artikel ini bisa anda tulis di blog, setelah itu rewrite atau tulis ulang. jika sudah posting di blog. dan kemudian jangan lupa untuk melakukan submit ke sosial bookmark agar tulisan anda cepat di lihat oleh orang banyak. Sekian saja, untuk selanjutnya saya share lagi, tapi cara sederhana untuk meningkatkan visitor blog baru ini juga sangat efektif coba saja. Terima kasih sudah berkunjug, jangan lupa beri masukan ya, supaya penulisan artikel yang saya buat lebih berbobot.

Cara Membuat Artikel untuk Blog

Mungkin kebanyakan para blogger kebingungan ketika ingin menulis di blog mereka, bahkan terkadang masih banyak yang belum tahu bagaimana cara membuat artikel untuk blog agar enak di baca oleh pengunjung. Kali ini saya ingin berbagi sedikit tentang bagaimana cara menulis yang enak di baca dan pastinya original kontent.

karena pada saat anda menulis sebuah tulisan yang berbobot tentu saja akan semakin banyak memberikan manfaat pada orang banyak, terutama bagi mereka yang tengah ingin memulai sebuah pembelajaran tentang penulisan. menulis artikel memang memiliki banyak sekali kendala apabila anda tidak terbiasa. Dalam hal ini tentu saja ketika anda ingin membuat sebuah tulisan yang menarik dibutuhkan keahlian khusus. Lalu bagaimana jika saya benar-benar pemula, apa lebih baik saya Copy Paste ya? Saya sarankan, lebih baik anda memulainya dengan sederhana yaitu menuliskan tentang hobby, kebiasaan sehari-hari atau diary jadi menulis tidak menjadi hal yang membosankan.

Baiklah, kita akan ulas langsung ke intinya. Cara membuat artikel untuk blog dengan kualitas baik atau standar adalah :

Pertama, penguasaan terhadap materi yang akan di sampaikan. Hal ini menjadi penting, karena apabila kita memiliki keterbatasan pengetahuan tentang hal yang akan di bahas maka hasil tulisan tidak akan maksimal.

Kedua, Siapkan literatur. baik itu buku, website orang lain untuk kita baca dan menambah khasanah susunan kata agar kita menjadi lebih mudah ketika menuliskan sesuatu.

Keempat, perbanyak komunikasi dengan sesama blogger agar anda bisa mendapatkan wawasan baru sebagai cara untuk mengatasi keterbatasan ilmu.

Dan yang terakhir tentunya berlatih dan berlatih hingga menulis menjadi hal yang menyenangkan. Saya rasa itu saja share dari saya semoga saja teman-teman bisa mencoba dan bermanfaat. Happy Blogging ya...

Membuat Menu Horizontal Navigasi

Membuat Menu Horizontal Navigasi - Membuat Menu Horizontal Navigasi
Baik Sobat Kali Ini Saya Mau Posting Cara Membuat Menu Horizontal Navigasi, Baiklah, Membuat Menu Horizontal Navigasi Ini Sangat Penting Untuk Blog Kenapa ? Karena Dengan Adanya Menu Horizontal Navigasi Akan Memudahkan Pengunjung Blog Untuk Mencari Sesuatu Di Blog Kita Serta Blog Kita Akan Terasa Lebih Indah Dimata Pengunjung

Demo

Berikut Tutorialnya :

Login Blogger
Klik Template
Edit HTML
Centang Expand Template Widget
Cari Kode ]]></b:skin>
Copy Kode Dibawah, Lalu Paste Diatas Kode ]]></b:skin>

/* Menu Navigasi By Monster Zila */

#menus {

border-bottom:1px solid #ddd;

border-top:1px solid #ddd;

border-right:1px solid #ddd;

border-left:1px solid #ddd;

height:31px;

}

#menus li {

display:inline;

list-style-image:none;

list-style-position:outside;

list-style-type:none;

}

#menus li a {

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMKZve-ihAYu5xsecXKAiF0SvoaHOxjv7O93irRp6tBG-ms0nnMwFZfFkJQo1Zpd1iAFgkZhz9iU-EAA_GJAz4y4lQ2Ef-_RQKAZNrEsthF7lScm25JQRtLGgwwTk_Onvyx5Hh0K686Au/s1600/menu.gif) no-repeat scroll 0 0;

color:#382E1F;

display:block;

float:left;

font-size:12px;font-weight:normal;font-family:comic sans ms;

height:31px;

line-height:31px;

margin-left:-10px;

padding:0 20px;

text-decoration:none;

z-index:1;

}

#menus li a:hover, #menus li a.current {

background-position:0 -31px;color:#cccccc;font-weight:normal;

}

#menus li.current_page_item a, #menus li.current-cat a {

background-position:0 -62px;

}

#menus li a.home {

background-position:0 -93px;

margin-left:0;

padding:0;

text-indent:-999em;

width:45px;

}

#menus li a.home:hover {

background-position:0 -124px;

}

#menus li.current_page_item a.home {

background-position:0 -155px;

margin-left:-40px;

}

#menus li a.lastmenu:hover {

background-position:0 0;

cursor:default;

}

Lalu Cari Kode <div id='header-inner'>
Kalau Tidak Ketemu Cari Kode Yang Sejenis, Karena Setiap Template Berbeda-Beda
Copy Kode Dibawah Lalu Paste Dibawah Kode <div id='header-inner'>

</ul>

Keterangan : Kode Diatas Juga Bisa Diletakkan Di HTML/JavaScript
Klik Pratinjau, Jika Berhasil Maka Klik Simpan Template

Sobat Bisa Mengeditnya Sendiri
Semoga Bermanfaat, Jika Dirasa Tulisan Saya Menarik Silahkan Sobat Sebar Luaskan Artikel Ini , Dan Jangan Lupa Beri Link Ini Sebagai Sumbernya

CSS3 Buttons For Blogger

CSS3 Buttons For Blogger - CSS3 Buttons For Blogger, Oke Sobat Kali Ini Saya Mau Share Beberapa Tombol Menarik Dengan CSS3, Mau Lihat Demonya ? Demo
Gimana ? Menarikkan, Tombol Ini Ada Beberapa Macam, Ada Download, Play, Like, dll
CSS3 Buttons For Blogger Bisa Digunakan Untuk Tombol Download Dan Lain-Lain

Berikut Tutorialnya :

Login Blogger
Klik Template
Edit HTML
Centang Expand Template Widget
Cari Kode Ini ]]></b:skin>
Copy Kode Dibawah, Lalu Paste Diatas ]]></b:skin>

.button
{       display: inline-block;
 white-space: nowrap;
 background-color: #ccc;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -ms-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
 border: 1px solid #777;
 padding: 0 1.5em;
 margin: 0.5em;
 font: bold 1em/2em Arial, Helvetica;
 text-decoration: none;
 color: #333;
 text-shadow: 0 1px 0 rgba(255,255,255,.8);
 -moz-border-radius: .2em;
 -webkit-border-radius: .2em;
 border-radius: .2em;
 -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
 -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
 box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
.button:hover
{
 background-color: #ddd;        
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
 background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
 background-image: -moz-linear-gradient(top, #fafafa, #ddd);
 background-image: -ms-linear-gradient(top, #fafafa, #ddd);
 background-image: -o-linear-gradient(top, #fafafa, #ddd);
 background-image: linear-gradient(top, #fafafa, #ddd);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');        
}
.button:active
{       -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
 -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
 box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
 position: relative;
 top: 1px;
}
.button:focus
{
 outline: 0;
 background: #fafafa;
}    
.button:before
{
 background: #ccc;
 background: rgba(0,0,0,.1);
 float: left;        
 width: 1em;
 text-align: center;
 font-size: 1.5em;
 margin: 0 1em 0 -1em;
 padding: 0 .2em;
 -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
 -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
 box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
 -moz-border-radius: .15em 0 0 .15em;
 -webkit-border-radius: .15em 0 0 .15em;
 border-radius: .15em 0 0 .15em;
        pointer-events: none;        
}

/* Hexadecimal entities for the icons */

.add:before
{ content: "\271A";
}
.edit:before
{ content: "\270E";        
}
.delete:before
{ content: "\2718";        
}
.save:before
{ content: "\2714";        
}
.email:before
{ content: "\2709";        
}
.like:before
{ content: "\2764";        
}
.next:before
{ content: "\279C";
}
.star:before
{ content: "\2605";
}
.spark:before
{ content: "\2737";
}
.play:before
{ content: "\25B6";
}

Simpan Template

Sekarang Kode HTML Pemanggilnya (Pilih Salah Satu)

<a class="button add" href="#">Add</a> <a class="button delete"href="#">Delete</a> <a class="button edit" href="#">Edit</a> <a class="button save" href="#">Save</a> <a class="button email" href="#">Email</a> <a class="button like" href="#">Like</a> <a class="button next" href="#">Next</a> <a class="button spark" href="#">Spark</a> <a class="button play" href="#">Play</a>

Kode Itu Silahkan Ditaruh Di HTML, Baik Itu Postingan / Gadget

Keterangan HTML Pemanggil

<a class="button add" href="#">Add</a> : Tombol Add
<a class="button delete"href="#">Delete</a> : Tombol Delete
<a class="button edit" href="#">Edit</a> : Tombol Edit
<a class="button save" href="#">Save</a> : Tombol Save
<a class="button email" href="#">Email</a> : Tombol Email
<a class="button like" href="#">Like</a> : Tombol Like
<a class="button next" href="#">Next</a> : Tombol Next
<a class="button spark" href="#">Spark</a> : Tombol Spark
<a class="button play" href="#">Play</a> : Tombol Play

Contoh :
Juka Sobat Ingin Menggunakan Tombol Download Maka Begini Pemanglannya HTML

<a class="button save" href="URL Tujuan">Download</a>

Demo :

Add Delete Edit Save Email Like Next Spark Play
Semoga Bermanfaat

√ Read More → CSS3 Buttons For Blogger

Merubah Tampilan Cloud Label V.2

Merubah Tampilan Cloud Label V.2 - Merubah Tampilan Cloud Label V.2, Baik Kali Ini Saya Akan Buat Tutorial Cara Merubah Tampilan Cloud Label V.2, Setelah Sebelumnya Saya Posting 'Cara Merubah Tampilan Label Cloud' Beberapa Hari Lalu Sekarang Saatnya Posting Tentang 'Merubah Tampilan Cloud Label V.2'
Screen Shot :

Peringatan !!! :

Jika Sobat Sudah Pernah Merubah Tampilan Cloud Label, Seperti Posting Yang Sebelumnya, Maka Hapus Dulu Kodenya Biar Tidak Bentrok

Baiklah Tutorialnya :

Login Blogger
Edit HTML
Centang Expand Template Widget
Backup Template
Cari Kode Ini ]]></b:skin>
Copy Kode Dibawah, Lalu Paste Tepat Diatas Kode ]]></b:skin>

/* Custom Cloud Label By Monster Zila */
.label-size {
float: left;
margin: 0 0 7px 20px;
position: relative;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.75em;
font-weight: bold;
text-decoration: none;
color: #996633;
text-shadow: 0px 1px 0px rgba(255,255,255,.4);
padding: 0.417em 0.417em 0.417em 0.917em;
border-top: 1px solid #d99d38;
border-right: 1px solid #d99d38;
border-bottom: 1px solid #d99d38;
-webkit-border-radius: 0 0.25em 0.25em 0;
-moz-border-radius: 0 0.25em 0.25em 0;
border-radius: 0 0.25em 0.25em 0;
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
-webkit-box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
z-index: 1;
}
.label-size:before {
content: '';
width: 1.30em;
height: 1.39em;
background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
position: absolute;
left: -0.69em;
top: .2em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-left: 1px solid #d99d38;
border-bottom: 1px solid #d99d38;
-webkit-border-radius: 0 0 0 0.25em;
-moz-border-radius: 0 0 0 0.25em;
border-radius: 0 0 0 0.25em;
z-index: 1;
}
.label-size:after {
content: '';
width: 0.5em;
height: 0.5em;
background: #fff;
-webkit-border-radius: 4.167em;
-moz-border-radius: 4.167em;
border-radius: 4.167em;
border: 1px solid #d99d38;
-webkit-box-shadow: 0 1px 0 #faeaba;
-moz-box-shadow: 0 1px 0 #faeaba;
box-shadow: 0 1px 0 #faeaba;
position: absolute;
top: 0.667em;
left: -0.083em;
z-index: 9999;
}
.label-size:hover {
background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color: #e1b160;
}
.label-size:hover:before {
background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color: #e1b160;
}

Simpan Template

Bagi Yang Belum Pasang Gadget Label :

Tambah Gadget
Pilih 'Labels'
Klik Pada 'Cloud'
Cheklist / Unchek Untuk Menampilkan Jumlah Post / Artikel
Simpan Gadget

Mudah Bukan ?
Semoga Bermanfaat

CSS Threaded Comment Spinning Avatar Icon

CSS Threaded Comment Spinning Avatar Icon - Kali Ini Saya Akan Share Cara Memasang CSS Threaded Comment Spinning Avatar Icon, CSS Threaded Comment Spinning Avatar Icon Ini Merupakan CSS Yang Saya Terapkan Di Kotak Komentar Blog Ini, Untuk Demonya Silahkan Lihat Style Kotak Komentar Dibawah Atau Komentar Posting Sebelumnya

Berikut Tutorialnya :

Login Blogger
Klik Template
Edit HTML
Centang Expand Template Widget
Cari Kode ]]></b:skin>
Copy Kode Dibawah Lalu Paste Diatas Kode ]]></b:skin>

/* Comments */

/* Style Threaded Comment by Monster Zila */
/* URL : http://monster-zila.blogspot.com/ */
/* Please Don't Edit This Credit Link */

#comments h4{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgormXmxsFnyZR-ddXnIvKRO0AfHaulrZ9NZO6uxHgQsejzsaYxP3X7u_ogslzaMpDmQk-9qvMYdxkncToUc-Bmpli5TR7VIvcnn7d2UW-7nheH0yjz7GEkf7GeaSMppC0Lrne5BAU7piTg/s400/icon_comments.png) no-repeat 3px .3em;width:528px;font-size:16pxt;text-transform:sentence case;font-weight:400;line-height:1.5em;letter-spacing:0;color:#111;padding-left:27px;padding-top:0;margin:0}#comment-form {width:560px;}.comment-form {width:560px;}#comments-block{border:0 solid #ccc;width:510px;line-height:1.6em;margin:1.3em 0 1.5em}#comments-block .comment-author{background:#f6f6f6;border-top:1px solid #ccc;padding-left:10px;color:#111;margin:.5em 0}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-footer{padding-left:0;line-height:1.5em;font-size:9px;border-top:1px solid #ccc;margin:.25em 0 2em}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:left;padding-left:10px;border-left:3px solid #f0f0f0;margin:0 0 .75em}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic;color:gray}.owner-Body p{text-align:left;color:#000;padding-left:10px;background:#FFFFD7;border-left:3px solid #F90;margin:0 0 .75em}
#comments-block .avatar-image-container img {background-color: transparent;background-image: url(http://img1.blogblog.com/img/anon36.png);background-repeat: no-repeat;background-attachment: scroll;background-position: center top;width: 35px;height: 35px;position:absolute}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAC30lEQVQ4ja1UTUiiURRtI9MirJ1JEJIlmBDaONCYRQvRoLKwf6yIyp8sI4ZgQFHaFC0iC2YrRITjYlathqAWMW1atdGBwTLNLm1apdau7vn4lCalmYERHu9779177r3nnmvF09NTxf9abz7KZDJpXV3deWNjI6nVauzSfwJjAHVtba0E38PDw00qlYosFgv19/fTyspKk2gjgd2bYHK5/HNDQwNpNJoIZ1Hp8/net7S00Pj4OM3NzVE4HNbyubK+vh7v1Nzc/KksGEcyKpVK6urqot7eXjKZTId6vf6X0WikqakpcjqdAI11dHQc6nQ6MpvN1NPTQwaDQVcClkwmP05MTFwAyO120/T0NI2OjpLdbieHw0Fer1cAHBsbK95vbGwkUqmUtlyZ7+7v77/Mzs4mAbSwsED8DYCbYDCYxI4z7hEMd/l8PgS/spytr69Xt7e3X42MjAhAm5ubiWw2e8JvYQ50srq6mpicnCSPx0OLi4tXe3t71SWcFdrPhFJbW5tA+Pz8fObu7m6b36tE46rb29ttq9V6g2Yg2ODgoGDPfudFMACBUHCByDD2+/2X/PZaV1KbzXYJO5TrcrkE+4GBASqCcUfS0BFAQDaXAF7SfX19Na80WKPVatPICJnBFmt5eTn9krMDXj8eHh5OZ2ZmrtE1GHMGEZaBtDANCoUCZ4GGpaWl68fHx1P4if6/N2Bra6uaDROFMlBCd3d3igG+8zhhJ86WOCAFAoHE/v5+aQPEyFD2Ny5D4A7tR9dQOs5DQ0NCRgAqyIb5+8r2khIw7ogJc8iZEItX0BE7ZQAGZ3HP4B5ACAThMvn6cjr7sLa29hNlsN4umL/dTCZzzMMuZAmi+XfMQt3lTl8gYCQSibOfuhwYlicWi53lcrkdKDsUCrWyiIXZBBhz1Ip7FvJOPB4/42/Hn/7PmgojEo1GlZ2dnWnmRmj/0dGRsjB6ot3f/zmK6j940f6qt+yfAdOYXbY4BoePAAAAAElFTkSuQmCC);
}
.comments .comments-content .loadmore a {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.comments .continue {
border-top: 2px solid #cccccc;
}
.comments .comments-content .datetime a{
float: right;
color: #00000;
}
.comment-block .comment-footer a:link, a:visited {
color:#000000;
}
.comments .avatar-image-container {
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.comments .continue a{
color:#000000;
}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#fafafa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEginqpZJDvGQLjW198aeCk5UkDi7ohucrjMvjA3YAGFwtouCwMUbVTPNEaTAkmKtjf3ncqKTZTK1nDwiXCfOoVC9pM17CrVm4e9otfBH7dCgu_pRty8BSROPI9xyfLO_8WS_sdP1Umfqp0B/s0/header-shadow.png) top repeat-x;margin:10px auto 0;
margin:10px 0;
padding:10px 10px;
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-webkit-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
}
.comment-actions a { background: #c1c1c1; background: -moz-linear-gradient(top, #c1c1c1 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1c1c1), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -o-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -ms-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: linear-gradient(top, #c1c1c1 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#dedede',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:2px 5px !important; margin-right:10px; border:1px solid #c1c1c1; color:#666666; -webkit-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); }
.comment-actions a:hover { background: #c9c9c9; background: -moz-linear-gradient(top, #c9c9c9 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9c9c9), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -o-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -ms-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: linear-gradient(top, #c9c9c9 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dedede',GradientType=0 ); text-decoration:none !important; }
.avatar-image-container {
-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);
}
.avatar-image-container:hover {
-moz-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
}

/* Delete Comment */
.item-control {display: inline;}

Klik Simpan Template

Sekarang Coba Lihat Kotak Komentar Kalian

Semoga Bermanfaat

Kalu Kurang Jelas Bisa Hubungi Saya Via Facebook

Widget Popular Post Warna V.2

Widget Popular Post Warna V.2 - Setelah Sebelumnya Saya Share 'Membuat Widget Popular Post Warna' , Sekarang Saya Akan Share 'Widget Popular Post Warna V.2' Widget Ini Tidak Jauh Berbeda Dengan Widget Sebelumnya

Screen Shot :

Keterangan :

Jika Sobat Sebelumnya Telah Memasang Kode Popular Post Yang Kemarin / Hapus Dulu Kode Tersebut

Berikut Tutorialnya :

Login Blogger
Klik Tata Letak
Klik Tambah Gadget
Pilih Entri Populer / Popular Posts (Silahkan Disesuaikan Sendiri)
Simpan Gadget

Untuk Membuat Popular Post Seperti Diatas Sobat Tinggal Memasukkan Kode CSS Di Template Sobat, Berikut Tutorialnya :

Login Blogger
Template
Edit HTML, Jangan Lupa Centang 'Expand Template Widget'
Cari Kode ]]></b:skin>
Copy Kode Dibawah, Lalu Paste Tepat Diatas Kode ]]></b:skin>

/* Popular Post Style V.2 by Monster Zila */

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}

#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}

#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

#PopularPosts3 img {

-moz-border-radius: 130px;

-webkit-border-radius: 130px;

border-radius: 130px;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

transition: all 0.3s ease;

padding:4px;

border:1px solid #fff !important;

background: #F2F2F2;}#PopularPosts1 img:hover {

-moz-transform: scale(1.2) rotate(-560deg) ;

-webkit-transform: scale(1.2) rotate(-560deg) ;

-o-transform: scale(1.2) rotate(-560deg) ;

-ms-transform: scale(1.2) rotate(-560deg) ;

transform: scale(1.2) rotate(-560deg) ;

}

Simpan Template

Catatan :
Kode Yang Saya Kasih Warna Biru Adalah Ukuran Font, Sobat Bisa mengeditnya Sendiri
Semoga Bermanfaat

Widget Share Spinning

Widget Share Spinning Dengan CSS - Kali Ini Saya Akan Posting Tentang Widget Share Spinning, Sebenernya Sudah Ribuan Widget Share Social Yang Ada, Tapi Kebanyakan Pakai JavaScript, Tapi Sekarang Sobat Tidak Usah Bingung Lagi Karena Share Tutorialnya

Widget Share Spinning Ini Ringan Dan Fast Loading Karena Hanya Menggunakan CSS, Images Dan HTML

Demo

Bagaimana ?, Menarik Kan ?
Berikut Tutorialnya :

Login Blogger
Klik Template
Edit HTML
Cari Kode <data:post.body/>
Copy Kode Dibawah, Kemudian Taruh Dibawah Kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>

<style>

p#socialicons img {

-moz-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;}

p#socialicons img:hover {

-moz-transform: rotate(360deg);

-webkit-transform: rotate(-360deg);

-o-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

transform: rotate(-360deg);}

</style>

</center>

</b:if>

Keterangan :
Bagi Yang Menggunakan Readmore Otomatis Ada 2 Kode <data:post.body/> , Maka Pilihlah Kode <data:post.body/> Di Template Sobat Yang Terakhir / Ke-2

Simpan Template

Silahkan Cek / Buka Salah Satu Posting Sobat, Kalau Belum Muncul Coba Kodenya Ditaruh Di <data:post.body/> Yang Pertama / Terakhir

√ Read More → Widget Share Spinning

Membuat Widget Popular Post Warna

Membuat Widget Popular Post Warna - Kali Ini Saya Akan Posting Tentang Membuat Widget Popular Post Warna, Widget Popular Post / Entri Populer Memang Banyak Dipakai Oleh Seorang Blogger Untuk Melihat Artikel Yang Popluler Di Blognya

Screen Shot :

Berikut Tutorialnya :

Login Blogger
Klik Tata Letak
Klik Tambah Gadget
Pilih Entri Populer / Popular Posts (Silahkan Disesuaikan Sendiri)
Simpan Gadget

Untuk Membuat Popular Post Seperti Diatas Sobat Tinggal Memasukkan Kode CSS Di Template Sobat, Berikut Tutorialnya :

Login Blogger
Template
Edit HTML, Jangan Lupa Centang 'Expand Tenplate Widget'
Cari Kode ]]></b:skin>
Copy Kode Dibawah, Lalu Paste Tepat Diatas Kode ]]></b:skin>

/* Popular Post Style by Monster Zila */

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Simpan Template

Selesai Deh, Mudah Bukan ?
Sekian Tutorial Blog Dari Saya Semoga Bermanfaat, Jika Sobat Mau Menyebarluaskan Artikel Ini, Tolong Cantumkan Link Ini Sebagai Sumbernya, Terimakasih

Membuat Social Icon Dengan Gambar Berputar

Membuat Social Icon Dengan Gambar Berputar - Kali Ini Saya Mau Posting Tutorial Blog Lagi, Bagi Sobat Yang Belum Tahu Cara Membuat Social Icon Dengan Gambar Berputar Saya Akan Jelaskan Tutorialnya, Sebelum Ke Pembahasan Mari Kita Lihat Dulu Demonya Dibawah Ini ( Arahkan Pointer Mouse Sobat Ke Gambar Dibawah ) :

Gimana Sobat ?, Keren Kan ?
Gambar Itu Bisa Berputar Karna Efek Rotate Dari CSS

Berikut Tutorailnya :

Login Blogger
Tata Letak
Tambah Gadget
HTML/JavaScript
Copy Kode Dibawah, Lalu Paste Di Form HTML/JavaScript

<style type='text/css'>
/* 3D Social Icon by Monster Zila */
#social a:hover {background-color: transparent;opacity:0.7;}
#social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>
<center>

<div id="social">

<a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/rss-feed-icon.png" alt="Icon"/></a>


<a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/facebook-icon.png" alt="Icon"/></a>


<a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/twitter-icon.png" alt="Icon"/></a>


<a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/google-icon.png"/></a>

</center>

Keterangan !!! :
Ganti Kode Dibawah :
YOUR-FEED-URL-HERE Dengan URL Feed Blog Sobat
YOUR-FACEBOOK-PAGE-URL-HERE Dengan URL Facebook Sobat
YOUR-TWITTER-URL-HERE Dengan URL Twitter Sobat
YOUR-GOOGLE-PLUS-URL-HERE Dengan URL G+ Sobat

Simpan Gadget

Semoga Bermanfaat

Kalau Sobat Mau Share Artikel Ini Tolong Cantumkan Link Ini Sebagai Sumbernya

Cara Merubah Tampilan Label Cloud

Cara Merubah Tampilan Label Cloud - Halo Sobat, Gimana Kabarnya?
Kali Ini Saya Akan Share Cara Merubah Tampilan Label Cloud di Blog Seperti Di Blog Saya Ini
Cara Merubah Tampilan Cloud Label Tinggal Memasukkan Kode CSS di Template Sobat

Screen Shot :

Berikut Tutorialnya :

Login Blogger
Edit HTML
Centang Expand Template Widget
Backup Template
Cari Kode Ini ]]></b:skin>
Copy Kode Dibawah, Lalu Paste Tepat Diatas Kode ]]></b:skin>

/* Custom Labels Cloud by Monster Zila */

.label-size{

margin:0 2px 6px 0;

padding: 3px;

text-transform: uppercase;

border: solid 1px #C6C6C6;

border-radius: 3px;

float:left;

text-decoration:none;

font-size:10px;

color:#666;

}

.label-size:hover {

border:1px solid #6BB5FF;

text-decoration: none;

-moz-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

-moz-transform: rotate(7deg);

-o-transform: rotate(7deg);

-webkit-transform: rotate(7deg);

-ms-transform: rotate(7deg);

transform: rotate(7deg);

filter: progid:DXImageTransform.Microsoft.Matrix(

M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');

zoom: 1;

}

.label-size a {

text-transform: uppercase;

float:left;

text-decoration: none;

}

.label-size a:hover {

text-decoration: none;

}

Klik Pratinjau, Jika Tidak Terjadi Error Klik 'Simpan Template'

Bagi Yang Belum Pasang Gadget Label :

Tambah Gadget
Pilih 'Labels'
Klik Pada 'Cloud'
Cheklist / Unchek Untuk Menampilkan Jumlah Post / Artikel
Simpan Gadget

Mudah Bukan ?
Semoga Bermanfaat

Cara Membuat Kotak Pesan Dengan Efek jQuery

Cara Membuat Kotak Pesan Dengan Efek jQuery - Halo Sobat, Gimana Kabarnya ?
Kali Ini Saya Mau Posting Tentang Tutorial Blog Yaitu : 'Cara Membuat Kotak Pesan Dengan Efek jQuery'
Efek jQuerynya Adalah Ketika Kotak Pesan Itu Muncul Maka Background / Latar Belakangnya menjadi Gelap, Dan Setelah KOtak Pesan Itu Di Close / Tutup Maka Akan Terang Kembali..

Demo

Berikut Turtorialnya :

1. Login Blogger
2. Tata Letak
3. Tambah Gadget
4. HTML/JavaScript
5. Copy Kode Dibawah, Paste Di Form HTML/JavaScript

<style type='text/css'>
/* Message Box by Monster Zila */
#box-message{
position:fixed;
left: 35%;
padding: 10px;
background:
white;
box-shadow: 0px 1px 3px
rgba(0, 0, 0, 0.4);
right: 30%;
width: 300px;
top: 35%;
z-index: 9999;
}

#box-message:after {background: rgba(0, 0, 0, 0.77);content: '';position: absolute;top: -500%;bottom: 0;right: 0;left: -500%;z-index: -1;width: 1000%;height: 1000%;}
#box-message a.close{
position:absolute;
top: 0;
right: 0;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
border-radius:22px;
cursor:pointer;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'></script>

<script type='text/javascript'>
$(window).bind("load", function() {
// Animasikan Nilai Top Saat Halaman Telah Selesai Dimuat
$('#box-message').animate({top:"190px"}, 1000, "easeOutBounce");
// Hilangkan Message Box Saat Tombol (x) Diklik
$('a.close').click(function() {
$(this).parent().slideUp(800, "easeOutBounce");
return false;
});
});
</script>

<div id='box-message'>

<a class='close' href='#'>×</a>
</div>

Keterangan !!! :

Ganti Kode  Dengan Kode Yang Mau Di Tampilkan Di Kotak Pesan Tersebut
Jika Sudah Ada Kode Yang Bergaris Bawah, Maka Tidah Usah Memakai Kode jQuery Tersebut

6. Simpan Gadget

Jika Sobat Mau Mencopy / Menyebarluaskan Artikel Ini Harap Cantumkan Link Sumber Dari BLog Ini !!

Semoga Bermanfaat

Membuat Jam Klasik Di Blog

Cara Membuat Jam Klasik Di Blog

Tutorial Blog Kali Ini, Saya Akan Memberikan Tutorial Cara Membuat Jam Klasik Di Blog

Demo

Baiklah Ini Tutorialnya :

Login Blogger
Tata Letak
Tambah Gadget
HTML/JavaScript
Copy Kode Di Bawah Lalu Paste Di Form HTML/JavaScript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function () {
setInterval(function () {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = 'rotate(' + sdegree + 'deg)';
$('#sec').css({
'-moz-transform': srotate,
'-webkit-transform': srotate
});
}, 1000);
setInterval(function () {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = 'rotate(' + hdegree + 'deg)';
$('#hour').css({
'-moz-transform': hrotate,
'-webkit-transform': hrotate
});
}, 1000);
setInterval(function () {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = 'rotate(' + mdegree + 'deg)';
$('#min').css({
'-moz-transform': mrotate,
'-webkit-transform': mrotate
});
}, 1000);
});
</script>
<style type="text/css">
#clock {
position: relative;
width: 80px;
height: 120px;
margin: 20px auto 0 auto;
background: url(//2.bp.blogspot.com/-UdqmlpkAA0g/UEHKQio0fZI/AAAAAAAAALA/riSFcock2zg/s1600/clockface.png)no-repeat;
list-style: none
}
#sec, #min, #hour {
position: absolute;
width: 6px;
height: 120px;
top: 2px;
left: 57px
}
#sec {
background: url(//1.bp.blogspot.com/-Vws3DL1OEWU/UEHKRhSAnSI/AAAAAAAAALI/MUoRRytTslI/s1600/sechand.png);
z-index: 3
}
#min {
background: url(//1.bp.blogspot.com/-89cd22Bga2c/UEHKSfPf8SI/AAAAAAAAALQ/UAX6CRIHpzY/s1600/minhand.png);
z-index: 2
}
#hour {
background: url(//3.bp.blogspot.com/-YL00l0N2sbo/UEHKQiiWUyI/AAAAAAAAAK8/pIUrc-01U0g/s1600/hourhand.png);
z-index: 1
}
</style>
<ul id="clock">
<li id="sec"></li>
<li id="hour"></li>
<li id="min"></li>
</ul>

Perhatian !!! :
Jika Di Template Sobat Sudah Ada Kode Yang Bergaris Bawah, Maka Kode Itu Tidah Usah Dipasang Kembali

Simpan Gadget, Sekarang Lihat Hasilnya

Merubah Gambar Pada Auto Readmore Lebih Bagus

Merubah Gambar Pada Auto Readmore Lebih Bagus
Sesuai Judulnya, Kali Ini Saya Akan Memberukan Tutorial Bagi Sobat Yang Memakai Autoreadmore
Untuk Dapat Merubah Gaya/Style Readmorenya Menjadi Lebih Bagus Tampilannya
Bagi Sobat Yg Belum Memakai Auto Readmore Segera Pasang Dulu Untuk Bisa Merubah Stylenya
Oke, Langsung Saja ke Tutorialnya

1. Login Blogger
2. Template
3. Edit HTML
4. Centang "Expand Template Widget"
5. Cari Kode ]]></b:skin>
6. Copy Kode Dibawah Lalu Paste Diatas Kode ]]></b:skin>
*Keterangan :
*Pilih Salah Satu Kode Berikut/Dibawah

* Style Pertama :

/* Style Thumb Post By Monster Zila */
.thumb-post img{padding:4px;margin:0 0 0 15px;width:75px;height:75px;background:#fff;border:3px solid #008ABD;border-radius:50px 0 50px 50px;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out}
.post:hover:hover .thumb-post img{-webkit-transform:rotate(-720deg);-moz-transform:rotate(-720deg);-ms-transform:rotate(-720deg);-o-transform:rotate(-720deg);transform:rotate(-720deg)}

*Style Kedua :

/* Style Thumb Post By Monster Zila */
.thumb-post img {padding: 4px; margin:0 0 0 15px; width: 72px; height:72px; background: #fff;
border: 3px solid #008ABD; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
.post:hover:hover .thumb-post img { border: 3px solid #cccccc; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);}

7. Kemudian Cari Kode </head>
8. Copy Kode Dibawah Lalu Paste Tepat Diatas Kode </head>

*Keterangan :
*Pilih Salah Satu Kode Berikut/Dibawah

No Thumbalnails Blue

<script type='text/javascript' src='http://free-files.googlecode.com/files/Post-Thumb-Blue.js'/>

No Thumbalnails White

<script type='text/javascript' src='http://free-files.googlecode.com/files/Post-Thumb-White.js'/>

Preview No Thumbalnails :

No Thumbalnails Blue

No Thumbalnails White

9. Simpan/Save Template

NB :
*Bagi Yang Kurang Jelas Bisa berkomentar DIbawah Ini/Kontak Saya Via Fb
*Sobat Bisa merubah Warna Border Sesuai Keinginan Sobat Dengan Merubah Kode Hex Color (#bla..bla..)
Semoga Bermanfaat

Widget Share Keren Website Informer

Widget Share Sosial Keren dari Website Informer

Berikut Langkah-langkahnya :

Cara Pertama : Memasang Di Gadget HTML/JavaScript

1. Login Blogger
2. Tata Letak
3. Tambah Gadget
4. HTML/JavaScript
5. Copy Kode Dibawah Ini :

<a href="http://website.informer.com/button/providers/list"><img id="Webinformer_FavoritesButton_Button" src="http://s.web.informer.com/images/b2.gif" alt="Web Informer Button" style="border: 0" /></a><script src="http://s.web.informer.com/favorites-button.js?glass," type="text/javascript" charset="UTF-8"></script>

6. Paste
7. Simpan/Save Gadget

Cara Kedua : Memasang Di Edit HTML/Template

1. Login Blogger
2. Template
Edit HTML
3. Centang Expand template Widget
4. Cari Kode </head>
5. Copy Kode Dibawah, Paste Tepat Diatas Kode </head>

<a href="http://website.informer.com/button/providers/list"><img id="Webinformer_FavoritesButton_Button" src="http://s.web.informer.com/images/b2.gif" alt="Web Informer Button" style="border: 0" /></a><script src="http://s.web.informer.com/favorites-button.js?glass," type="text/javascript" charset="UTF-8"></script>

6. Pratinjau, Jika Tidah terjadi Error
7. Simpan/Save Template

Keterangan :

Pilih Salah Satu Dari Cara Diatas

Widget Share Egg Keren

Widget Share Keren Berbentuk Telur Dari ShareThis
Widget yang baru Saja Saya pasang Di Blog ini, Keren kan ???
Bagi Sobat Yang mau Pasang Nggak Usah Bingung-Bingung, Ikuti Aja Tutorialnya

Login Blogger
Klik Template
Edit HTML
Centang "Expand Template Widget"
Cari Kode </head>
Copy Kode Di Bawah ini, Lalu Paste Diatas Kode </head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Lalu Cari Kode </body>
Copy Kode Dibawah ini, lalu Paste Diatas Kode </body>

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script>

Simpan/Save Template Sobat

Keterangan :
Kode Yang Berwarna Merah Adalah Posisi Widget Tersebut, Sobat Boleh Mengeditnya Sendiri
Semoga Bermanfaat

√ Read More → Widget Share Egg Keren

Membuat Breadcrumbs Di Blog Cepat Terindeks

Untuk membuat menu navigasi breadcrumbs terindeks, anda cukup menggunakan kode breadcrumbs yang telah di edit. Berikut tutorial dan kode breadcrumbs terindeks :

Masuk ke halaman kode template anda.
Cari kode

<b:includable id='main' var='top'>

Hapus kode tersebut dan ganti dengan kode berikut :

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "static_page"'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == "item"'>  <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> » <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:if> </b:loop> » <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'>  <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives For <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All Posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts Filed Under <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable><b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>

Selanjutnya Cari kode ]]></b:skin>

Letakkan kode CSS berikut ini di atas kode tersebut :

.breadcrumbs{padding:8px 5px 5px 0;margin:10px 0 0px;font:normal 11px georgia; border-bottom:1px dashed #ccc;font-weight:normal}

Save Template

Cara Membuat Arsip Blog Dengan Scroll

Arsip blog dengan menggunaka scroll memang menjadi pilihan untuk menghemat ruang di blog. selain itu arsip blog dengan scrolll akan memudahkan pengunjung melihat-lihat daftar isi artikel kita. membut arsip blog sangat mudah, kalo sobat pengen membuatnya silahkan ikuti langkah-langkah berikut :

Cara Membuat Arsip Blog Dengan Scroll:

Berikut Langkah- langkahnya Cara Memasang Meta Tag Super Seo Friendly Di Blog :
- Login ke Dasbor Blogger

- Lalu silahkan pilih Rancangan

- Kemudian Edit HTML

- Centang Expand Template Widget

- Lalu cari kode berikut

Monster Zila

Cara Mudah Mendapatkan Uang di Internet

Cara Meningkatkan Visitor di Blog Baru

Cara Membuat Artikel untuk Blog

Membuat Menu Horizontal Navigasi

CSS3 Buttons For Blogger

Merubah Tampilan Cloud Label V.2

CSS Threaded Comment Spinning Avatar Icon

Widget Popular Post Warna V.2

Widget Share Spinning

Membuat Widget Popular Post Warna

Membuat Social Icon Dengan Gambar Berputar

Cara Merubah Tampilan Label Cloud

Cara Membuat Kotak Pesan Dengan Efek jQuery

Membuat Jam Klasik Di Blog

Merubah Gambar Pada Auto Readmore Lebih Bagus

Widget Share Keren Website Informer

Widget Share Egg Keren

Membuat Breadcrumbs Di Blog Cepat Terindeks

Cara Membuat Arsip Blog Dengan Scroll

Cara Memasang Meta Tag Super Seo Friendly Di Blog

Ads

Search

Tag Cloud

Popular Posts

Partner Blog

Follow Us