Showing posts with label CSS3. Show all posts
Showing posts with label CSS3. Show all posts

Saturday, August 2, 2014

Cara Menghapus Komentar Spam Secara Otomatis

Stop Spam

Spam, Spam, Spam adalah salah satu masalah yang sering dihadapi oleh para blogger. Spam biasanya dilakukan dengan banyak cara, dan salah satunya adalah dengan terus-terusan berkomentar dengan menaruh link didalamnya ( Anchor Text ). 

Spam bisa dicegah dengan cara memoderasi komentar, artinya saat pengunjung blog kita menaruh komentarnya, kita bisa dengan mudah memutuskan apakah komentar tersebut ditampilkan atau tidak. Tetapi tetap saja, ada pengunjung-pengunjung yang sengaja menaruh link linknya ( Anchor Text ) didalam komentar. Oleh karena itulah ditutorial kali ini saya akan memberikan Cara Menghapus Komentar Spam Secara Otomatis. Cara ini tidak hanya akan menghapus komentar-komentar spam yang sudah terlanjur kamu tampilkan, tapi tentu saja akan menghapus komentar-komentar spam nantinya.

Untuk melakukannya, kita memiliki 2 cara mudah yakni :

1. Menggunakan CSS : CSS ini akan digunakan untuk menghapus semua komentar yang mengandung Anchor Text. Anchor Text  ini adalah sebuah kata atau kalimat yang didalamnya sudah ditaruh link, yang apabila diklik akan mengarahkan ke alamat URL sebuah website. CSS ini akan menghapus link serta anchor text yang ada

2. Menggunakan jQuery : Cara ini akan mengubah Anchor Text tadi menjadi sebuah kata / kalimat biasa sehingga tidak bisa diklik.

Keren bukan ? saya sendiri sudah menerapkannnya agar membuat spammer jera, terlebih saat saya kembali mengaktifkan blog ini, saya telah menghapus lebih dari 500 Komentar Spam :s

Berikut tutorialnya :

A. Cara CSS

1. Masuk ke akun Blogger -> pilih Template --> didalam menu Template, kalian pilih Sesuaikan ( Customize ) --> lalu kalian pilih Tingkat Lanjut ( Advanced ) --> Sekarang sorot kebawah dan kalian nantinya akan menemukan pilihan Tambahkan CSS ( Add CSS ).

2. Setelah itu kalian masukkan kode CSS dibawah ini dan jika sudah kalian simpan.

.comment-content a {
display: none;
}

B. Cara jQuery

1. Masuk ke akun Blogger -> pilih Template --> setelah itu kalian pilih Edit HTML.

2. Didalam template HTML, kalian tekan ctrl + f untuk mempercepat pencarian, dan masukkan kode </body> didalam kotak pencarian. Setelah itu kalian salin kode jQuery dibawah ini :

<!--Stop Blog Comments http://www.spiceupyourblog.com -->
<!--Repost by http://www.heyblogger.net -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script> 
$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());}); 
</script> 
<!--Repost by http://www.heyblogger.net -->

3. Letakkan kode yang sudah disalin tadi diatas / sebelum kode </body>. Dan jika sudah klik Simpan.

4. Selesai deh ! bagaimana ? sangat mudah bukan ? sekarang kalian akan dengan tenang meninggalkan blog kalian baik memakai moderasi atau tidak. Karena spammer tidak bisa bermain nakal lagi :D

Monday, August 27, 2012

Cara Membuat Breadcrumbs yang Terindeks Google


Breadcrumbs ? apa itu ? breadcrumbs itu semacam navigasi pada blog. Tujuannya tidak lain untuk memudahkan pengunjung blog kita. Pada blogger, breadcrumbs akan ditampilkan sesuai dengan label yang ada. Dan navigasi breadcrumbs ini akan segera terindeks oleh si Google hanya dalam waktu 2 atau 3 hari (sesuai pengalaman saya) dan lebih ramah terhadap SEO tentunya. Nih bukti jika blog saya yang sudah memakai breadcrumbs terindeks oleh om Google.


Nah jika kalian tertarik untuk membuatnya, silakan lihat caranya di bawah ini, perhatikan dengan seksama oke :)

1. Login ke Blogger seperti biasa

2. Klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini 
3. Masih di bagian Template, sekarang kamu klik Edit HTML --> Pilih Lanjutkan --> Sekarang kamu cari kode ]]></b:skin> gunakan CTRL + F untuk memudahkan pencarian.

4. Salin kode di bawah ini dan letakkan diatas kode ]]></b:skin>

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

5.  Cari kode <b:includable id='main' var='top'> kemudian kamu hapus kode <b:includable id='main' var='top'> dan ganti kode yang tadi sudah dihapus dengan kode di bawah ini.

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<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'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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'/>
 
6. Klik Simpan dan nantinya breadcrumbs yang kamu buat akan segera terindeks oleh Google.

Tuesday, August 21, 2012

Membuat Widget Recent Post Dengan Thumbnail yang Bisa Berputar

Membuat Widget Recent Post Dengan Thumbnail yang Bisa Berputar


Jika beberapa hari yang lalu saya membagikan random post dengan thumbnail yang bisa berputar, kali ini saya akan membagikan sebuah widget yang di buat oleh Abu Farhan dan Mungkin sebagian dari kalian sudah mengetahui tentang widget ini. Yup inilah widget artikel terbaru atau yang biasa kita sebut dengan recent post.

Widget ini akan menampilkan artikel terbaru dari blog kamu beserta thumbnail. Widget ini juga bisa di ubah sesuai keinginan kamu loh. Oh iyah, efek yang ditimbulkan dari widget ini adalah turun kebawah otomatis serta akan berputar saat kamu menyorot thumbnail-nya. Oke langsung saja kita lihat cara pembuatannya di bawah ini :

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript setelah itu kamu salin dan masukkan kode di bawah ini kedalam kotak HTML/Javascript tersebut.


<style type="text/css">
#spylist-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
    font-family:calibri;
}

#spylist-widget ul {
    width: autopx;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#spylist-widget li {
    width: autopx;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrNY5_80LJTuEzeAKLvNenEoKmReIQV3tTE8_QA_Obe92HsaeqYxBzuXi2ROewIsWwnhYhujk6xoyRV22UBUNjrVkcSn5EGfRFHD5F49b9y81YHMicyE1X7fSp_m_E3JxPEintWVDE6Xs/s320/latesthack.com-.jpg) repeat-x;
    border: 1px solid #ddd;
}

#spylist-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#spylist-widget img {
    float: left;
    margin-top: 5px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#spylist-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

</style>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;fntsize = 9;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";numposts = 10;
home_page = "http://www.hzndi.blogspot.com/";
limitspy=5;
intervalspy=4000;
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><br />
<div id="spylist-widget">
<script src="http://hzndi.googlecode.com/files/hzndi.blogspot.com-scrollpost.js" type="text/javascript"></script>
</div>

Note :
  • Ubah jumlah postingan yang ditampilkan dengan mengubah kode numposts = 10
  • Ubah http://www.hzndi.blogspot.com dengan alamat URL blog kamu, untuk mengganti URLnya harus menggunakan http://www.namablogkamu.com/ ingat pake garis miring '/' dibelakang domain kamu, kalau tidak widget ini tidak akan berjalan !
  • Ubah showPostDate = true; ke false jika tidak ingin menamplkan tanggal postingan 
4. Simpan dan kamu lihat hasilnya dan untuk demo livenya mungkin kamu bisa melihatnya di bawah ini.

Monday, August 20, 2012

Cara Membuat Menu Horizontal Lavalamp Dengan CSS dan Jquery

Cara Membuat Menu Horizontal Lavalamp Dengan CSS dan Jquery


Sebelumnya Taqobalallahu Minna Waminkum. Selamat lebaran 1433 H bagi kawan2ku semuanya. setelah beberapa hari vakum dikarenakan kegiatan offline, akhirnya bisa update postingan juga nih gan. Di tanggal 2 Syawal ini saya akan membagikan sebuah Horizontal menu keren dengan pilihan warna yang beragam. Selain itu terdapat pilihan warna 6 buah yang bisa disesuaikan dengan warna template blog kamu.

Drop down menu juga sangat dibutuhkan untuk sebuah blog, selain untuk mempercantik tampilan blog, dengan menggunakan fitur ini, blog kamu akan lebih terlihat fresh dan memperlebar space blog kamu karena akan ada beberapa link yang bisa ditaruh di horizontal menu ini. Oh iya, sebelumnya terima kasih kepada insicdesigns yang sudah mendesain drop down menu ini serta kepada helperblogger yang sudah membuatnya bekerja lebih baik untuk platform blogger. Langsung saja kamu lihat cara membuatnya di bawah ini :

1. Login ke Blogger.com

2. Klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini :
3. Masih di bagian Template, Kamu klik Edit HTML --> Pilih Lanjutkan --> Cari kode  </head>, kamu bisa gunakan CTRL + F untuk pencarian lebih mudah. Salin kode di bawah ini dan letakkan di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hzndi.googlecode.com/files/lavalamp-menu.js" type="text/javascript"></script>

Note : jika kamu sudah ada kode Jquery yang berwarna biru di blog kamu, kamu tinggal menambahkan kode yang ada di bawah kode warna biru saja.

4. Sekarang kamu cari kode ]]></b:skin> dan kamu salin kode di bawah ini kemudian kamu letakkan diatas kode ]]></b:skin>

/*lava lamp menu http://www.hzndi.blogspot.com/ start*/
.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;
 
}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;
 
}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;
 
}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;
 
}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
 
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
 
}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}
/*lava lamp menu http://www.hzndi.blogspot.com/ end*/

5. Klik Simpan template.

6. Sekarang kamu klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin kode di bawah ini dan kamu masukkan kedalam kotak HTML/Javasript tadi.

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="">Home</a></li> 
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li>
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li> 
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li>
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li> 
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li> 
<li><a href="MASUKKAN URL YANG INGIN KAMU TUJU DISINI">GANTI DENGAN KATA2 SESUKA KAMU</a></li> 
 </ul>
 <div class="floatr"></div>
</div>

Note : Untuk kode yang berwarna biru diatas adalah warna background dari menu horizontal. Kamu bisa pilih salah satu warna backgroundnya dengan mengganti kode tersebut dengan salah satu kode di bawah ini.

A. Warna default


Kode warna Default : <div class="lavalamp">

B. Warna magenta

Kode warna Magenta : <div class="lavalamp magenta">

C. Warna Cyan

Kode warna Cyan : <div class="lavalamp cyan">
 
D. Warna Hitam

Kode warna Hitam : <div class="lavalamp dark">

E. Warna Oranye
 
Kode warna Oranye : <div class="lavalamp orange">

F. Warna Kuning
Kode warna Kuning : <div class="lavalamp yellow"> 

7. Klik Simpan Template dan kamu bisa melihat demo onlinenya dari helperblogger disini

Saturday, August 18, 2012

Cara Membuat Widget Popular Post Warna Warni V.2


Kemarin saya sudah membagikan cara bagaimana menambahkan widget popular post warna-warni versi ke 3. Nah kalau yang ini sama saja dengan widget yang kemarin, namun yang saya bagikan ini adalha versi yang ke-2 nya. Tentunya dengan menambahkan widget ini akan semakin terlihat cantik dan menarik. Bedanya, kalau kemarin tidak ada efek hover atau gambar yang bisa berputar, kalau versi yang kedua ini bisa menampilkan gambar yang bisa berputar loh!

Saya sendiri sudah merasakan dan mencoba widget ini. Dan menurut saya widget ini tidak terlalu berat, masih standar hehe. Untuk screenshotsnya lihat gambar diatas, itu sudah saya coba sendiri kok :). Oke bagi kamu yang mau mencoba widget ini, silakan lihat caranya yah.

1. Login ke Blogger.com.

2. Klik Tata Letak --> Tambah Gadget --> Entri Populer --> Tampilkan Entri Populer hanya Judulnya saja, boleh memakai GAMBAR tapi saya menyarankan untuk tidak memakai cuplikan agar terlihat lebih rapi. Atur jumlah popular post yang ingin ditampilkan, boleh 3 ,5 ,7 atau 10, jumlahnya Terserah kamu saja. 

3. Klik Simpan.

4. Kemudian kamu klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini
5. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Cari kode  ]]></b:skin>. Lalu kamu salin kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>.

/* Rainbow Popular repost by http://hzndi.blogspot.com*/
#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) ;
}
/* Rainbow Popular repost by http://hzndi.blogspot.com*/

6. klik Simpan dan kamu lihat hasilnya. Cantik bukan ? warna warni gitu hehehe

Friday, August 17, 2012

Cara Membuat Widget Popular Post Warna Warni V.3

Cara Membuat Widget Popular Post Warna Warni

Yowman kembali hadir lagi di Tutorial Blog dan SEO. Di tutorial kali ini saya akan menjelaskan bagaimana caranya membuat widget popular post atau artikel terpopuler menjadi lebih atraktif, cantik dan menarik. Hanya dengan menyalin beberapa kode CSS, dan Wushhh.... Widget Popular post kamu akan terlihat sangat menarik dan cantik seperti gambar diatas.

Widget ini suda saya coba sendiri dan hasilnya pun sudah saya screenshot. Gambar diatas adalah hasilnya, cara membuatnya pun cukup mudah. Dan bagi kamu yang tertarik memakai widget ini, silakan lihat caranya di bawah ini. Di perhatikan yah !

1. Login ke Blogger.com dengan Akun kamu.

2. Klik Tata Letak --> Tambah Gadget --> Entri Populer --> Tampilkan Entri Populer hanya Judulnya saja, jangan memakai gambar dan cuplikan. Atur jumlah popular post yang ingin ditampilkan, boleh 3 ,5 ,7 atau 10, jumlahnya Terserah kamu saja.

3. Klik Simpan.

4. Kemudian kamu klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini
5. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Cari kode  ]]></b:skin>. Lalu kamu salin kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>.

/* Rainbow Popular Post by http://hzndi.blogspot.com*/
#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}
/* Rainbow Popular Post by http://hzndi.blogspot.com*/

6. Simpa dan kamu lihat hasilnya, pasti cantik sekali sob :D

Wednesday, August 15, 2012

Cara Membuat Widget Slidenote / Pesan Notifikasi Untuk Blogger

Cara Membuat Widget Slidenote / Pesan Notifikasi Untuk Blogger

Di postingan kali ini saya akan membagikan sebuah widget menarik berbentuk SlideNote. ya hampir mirip sama recommended Slied Post, namun kalau widget SlideNote ini hanya digunakan untuk menampilkan pesan saja, bukan untuk menampilkan postingan (walaupun bisa untuk menampilkan postingan namun hanya berupa pesan). Untuk Demo-nya bisa kalian lihat gambar diatas.

Widget ini akan muncul ketika kamu menyorot ke bagian bawah blog dan akan menghilang dengan sendirinya saat kamu naik kebagian atas blog. Saya sudah mencoba Plugin dari Jquery ini, dan bisa loh, jadi buat kalian yang tertarik bisa mencobanya.

1. Login ke Blogger.com

2. Klik Template --> Klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini
3. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Centang "Expand Template Widget" --> Cari kode </head>, gunakan CTRL + F untuk memudahkan Pencarian.

4. Salin kode di bawah ini dan letakkan di atas kode </head>
 <style type="text/css">
.slidenote { width: 540px; height: 140px; background: #FBEC78; padding: 1em;
-moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #333;}
.slidenote img { float: left; margin-left: -2em; margin-top: -2em; }
.slidenote img:hover { margin-top: -1.95em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hzndi.googlecode.com/files/hzndi.blogspot.com-jquery.slidenote.min.js" type="text/javascript"></script>

5. Sekarang cari lagi kode </body> dan gunakan CTRL + F untuk memudahkan Pencarian.

6. Salin kode di bawah ini dan letakkan diatas kode </body>

<div class='slidenote' id='note'>
<div id='container'>
<h2>MASUKKAN JUDUL YANG KAMU SUKA</h2>
<span><em>MASUKKAN KATA-KATA YANG KAMU SUKA </em></span>
<p>MASUKKAN KATA-KATA YANG KAMU SUKA <a href='MASUKKAN URL YANG INGIN KAMU ALIHKAN'>MASUKKAN JUDUL URL-NYA</a></p>
</div>
</div>
<script type='text/javascript'>
$(&#39;#note&#39;).slideNote({
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8oDFGSkjbqHEWzO-NR0DPFWDa6qBP3ncuUnvXUvA5Xo3JMeZ3pCYlkmNVGQtVI6ILnKNFqHV7uUlRYEPg-msK7wexqb34Z6QaZG3LbgX6nCLLHNWYFOYgft8tW-0QIm1ZAOtazDL1X5g/s320/slidenote.close.png&#39;
});
</script>

NOTE : 
Untuk memasukkan kata-kata baru, bisa dengan memasukkan kata-kata diantara kode  
<p>masukkan kata-kata disini</p>

7. Jika sudah, kamu simpan deh :)

Wednesday, August 1, 2012

Cara Membuat Horizontal Menu Dengan CSS


Banyak yang membayangkan membuat atau menaruh horizontal adalah hal yang sulit bahkan teramat sulit sekali. Padahal caranya mudah jika kita mengikuti langkah-langkahnya satu persatu. Terlebih lagi horizontal menu memiliki fungsi yang sangat penting, Tntunya selain dapat menghemat space  blog kita, dengan menggunakan horizontal menu akan semakin membuat tampilan blog kita semakin menarik.

Dan di tutorial kali ini saya akan membagikan sebuah tutorial tentang cara menaruh horizontal menu di dalam blog. Di beberapa postingan sebelumnya saya pernah membagikan cara ini, kamu bisa lihat lebih lengkapnya di daftar isi blog. 

Oh iya, horizontal menu ini di buat oleh dynamicdrive. Oke langsung saja jika kamu tertarik untuk membuat bisa kamu lihat caranya di bawah ini.

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin kode CSS di bawah ini.

<style type="text/css">

/* Horizontal Menu untuk Blogger By http://www.hzndi.blogspot.com/ */

div.topbar {
 height: 16px;
 background: #e16031;
}

ul.claybricks {
 font-weight: bold;
 width: 100%;
 background: #e3e490;
 padding: 6px 0 6px 0;
 margin: 0;
 text-align: left;
        font-family: calibri;
}

ul.claybricks li {
 display: inline;
}

ul.claybricks li a {
 color: black;
 padding: 6px 8px 4px 8px;
 margin-right: 20px;
 text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected {
 color: white;
 background: #5d4137;
 background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
 background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
 -moz-box-shadow: 0 0 5px #595959;
 -webkit-box-shadow: 0 0 5px #595959;
 box-shadow: 0 0 5px #595959;
 padding-top: 17px;
 padding-bottom: 6px;
}

/* http://hzndi.blogspot.com */

</style>
<div class="topbar">
</div>
<ul class="claybricks">
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
 <li><a href="masukkan-url-yang-inginkan">masukkan-kata2-yang-inginkan</a></li>
</ul>

3. Letakkan Widget di bawah header blog.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm5P09uCtucnGz3Nj8DO5Kk8DpmVx5Cjw8qhUcknvbkUtPl6nXHR2J1oJw_3P3A-RaC0YyUaOXcmEz8wGvEeZiQydc680Vvh7RzEN5sH9xs28ViBbPPzf6mYQ-1LuaLTnK4Oyhq6r7z_M/s1600/add-a-gadget.png

4. Simpan template dan lihat hasilnya.

Tuesday, July 31, 2012

Menambahkan Kotak Pada Label Blog Berbentuk Cloud Bagian 2



Di postingan sebelumnya saya juga sudah membagikan trik CSS3 untuk mempercantik desain label blog kamu. Sebua widget yang di buat oleh http://www.stylifyyourblog.com/ ini terlihat cantik dan elegan. Mungkin kamu bisa lihat demo langsungnya di blog tersebut, atau seperti gambar di atas.

Dan jika kamu tertarik untuk membuatnya, kamu bisa mencobanya dengan mengikuti langkah di bawah ini. Sangat mudah kok :)

1. Login ke Blogger.com


2. Klik Tata Letak --> Tambah Gadget --> Label. Untuk pengaturan labelnya bisa kamu pilih sesuka kamu. iya, pilihnya yang cloud yah jangan yang daftar. Kemudian klik simpan.



3. Klik Template --> Edit HTML --> Klik Lanjutkan --> Cari kode ]]></b:skin>, gunakan ctrl + f untuk memudahkan pencarian. Oh iya jangan lupa di back up dahulu templatenya yah.

4. Salin kode CSS di bawah ini dan letakkan diatas/sebelum kode ]]></b:skin>.

.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;
}

#Label1 {
    height: 210px;
}

.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;
}

5. Simpan template dan kamu lihat hasilnya :)

Sunday, July 29, 2012

Menambahkan Kotak Pada Label Blog Berbentuk Cloud dengan CSS3


Di tutorial kali ini saya akan membagikan sebuah trik lagi untuk mempercantik label blog kamu. Jika biasanya label blog terlihat standar dan kurang menarik, dengan menggunakan trik ini label akan terbagi ke dalam kotak-kotak dan terlihat cantik tentunya.

Cara membuatnya pun mudah, kita hanya perlu menambahkan sedikit kode CSS dan widget label kita pun akan terlihat "Wah". Dan jika kamu benar-benar tertarik untuk membuatnya, bisa kamu lihat tutorialnya di bawah ini. Untuk hasilnya seperti gambar di atas yah :)

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> Label. Untuk pengaturan labelnya bisa kamu pilih sesuka kamu. iya, pilihnya yang cloud yah jangan yang daftar. Kemudian klik simpan.



3. Setelah itu, kamu klik Template --> Edit HTML --> Klik Lanjutkan --> Centang Expand Widget Template. Jangan lupa juga untuk mem-backup template kamu terlebih dahulu.

4. Cari kode ]]></b:skin>, dan salin kode di bawah ini dan letakkan di bawah kode ]]></b:skin>.

/*CSS3 Bricks Style Labels By http://www.hzndi.blogspot.com/ */
#textwidget {
    color: #666;
    font-size: 0.925em;
    font-style: italic;
    line-height: 1.6em
}

a.tag {
    color: #777;
    font: 9px verdana;
    text-transform: uppercase;
    transition: border-color .218s;
    background: #f4f4f4;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    border: solid 1px #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin: 0 4px 4px 0;
    padding: 3px 5px;
    text-decoration: none
}

a.tag:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}

a.tag:active {
    color: #000;
    border-color: #444
}

.slides {
    font-size: 85%;
    line-height: 130%;
    overflow: hidden;
    padding: 0;
    margin: 30px 0 10px;
    border-bottom: 1px solid #000
}
/*CSS3 Bricks Style Labels By http://www.hzndi.blogspot.com/ */

5. Cari kode yang kira-kira tampilannya seperti ini,

<b:widget id='Label1' locked='false'

.... (hingga)

</b:widget>

Kamu hapus semua kode dari


<b:widget id='Label1' locked='false'

.... (hingga)

</b:widget>

dan kamu ganti dengan kode di bawah ini.

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
    <b:includable id='main'>
        <b:if cond='data:title'>
            <h2>
                <data:title/>
            </h2>
        </b:if>
        <div class='textwidget'>
            <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
                <b:if cond='data:display == &quot;list&quot;'>
                    <ul>
                        <b:loop values='data:labels' var='label'>
                            <li>
                                <b:if cond='data:blog.url == data:label.url'>
                                    <span expr:dir='data:blog.languageDirection'>
                                        <data:label.name/>
                                    </span>
                                    <b:else/>
                                    <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                                </b:if>
                                <b:if cond='data:showFreqNumbers'>
                                    <span dir='ltr'>(
                                        <data:label.count/>)</span>
                                </b:if>
                            </li>
                        </b:loop>
                    </ul>
                    <b:else/>
                    <b:loop values='data:labels' var='label'>
                        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
                            <b:if cond='data:blog.url == data:label.url'>
                                <span expr:dir='data:blog.languageDirection'>
                                    <data:label.name/>
                                </span>
                                <b:else/>
                                <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                            </b:if>
                            <b:if cond='data:showFreqNumbers'>
                                <span class='label-count' dir='ltr'>(
                                    <data:label.count/>)</span>
                            </b:if>
                        </span>
                    </b:loop>
                </b:if>
                <b:include name='quickedit' />
            </div>
        </div>
    </b:includable>
</b:widget>

6. Simpan template dan lihat hasilnya, jangan takut untuk mencoba :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More