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.

Read more »

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 :

• Untuk Antarmuka Blog yang lama klik disini 
• Untuk Antarmuka Blog yang Baru klik disini 

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

Read more »

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

• Untuk Antarmuka Blog yang lama klik disini
• Untuk Antarmuka Blog yang Baru klik disini

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 :)

Read more »

Cara Menambahkan Efek Goyang Pada Label dan Link Blog

Jika kamu menggunakan widget label yang standar dan biasa-biasa saja, ada baiknya kamu mencoba widget yang satu ini. Yakni menambahkan efek "goyangan" pada setiap link dan tulisan label yang ada di blog kamu. tentunya dengan menambahkan efek ini, widget label kamu akan terlihat lebih atraktif dan menarik tentunya. Lihat caranya di bawah ini oke :

1. Login ke Blogger.com

2. Klik Template --> Backup dahulu tempate kamu.

3. Masih di bagian template, kamu klik Edit HTML --> klik Lanjutkan --> Centang "Expand Widget Template"

4. Cari kode </head>, gunakan ctrl+f untuk memudahkan pencarian. Kemudian kamu salin kode Javscript d bawah ini. Dan letakkan di atas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
    var dur = 400; // Duration Of Animation in Milli Seconds
    $(document).ready(function() {
        $('a.linknudge, .Label ul li a').hover(function() {
            $(this).animate({
                paddingLeft: '25px'
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // end of Jquery Script
</script>

5. Simpan template dan sekarang setiap orang yang klik link kamu akan bergoyang. Yihhaaaa

Read more »