Cara Membuat Gallery Foto di Blogspot

Tips blog kali ini yang ingin saya share adalah cara membuat gallery foto di blog  blogspot. Cara membuat gallery foto di blogspot tentu sangat berbeda dengan membuat galllery foto di wordpress, kalau di wordpress sobat tinggal upload lewat plugin yang telah disediakan, tapi di blogspot sobat harus menggunakan script yang di edit lewat halaman postingan.Gallery foto ini berguna buat sobat yang ingin menampilkan foto-foto dalam postingan dengan bentuk sejajar. Seperti apa ilustrasi bentuknya ? Lihat contoh hasilnya dibawah ini :

 Cara membuat gallery foto :
  
    1. Upload foto ke hosting (picasa, atau photobucket, atau yang lainnya)
    dapatkan url foto yang telah diupload
    2. Bikin postingan dalam mode HTML (bukan Compose)
    3. Masukkan kode di bawah ini pada postingan
    4. Publish dan lihat hasilnya

<div class="snap_preview">
<div>
<span style="color: #0066ff;font-size: medium;">Seribu Wajah Gayus</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-bnDOBGC0d4tkIlqzJBdvl18mHWO3NmjhFkwsTvRH7QnMOrsMzxVUcuhNcRfg_gdFTOlhXotKcoxRYrmjcEuWeSD_owJQoOodwUvriPRaY55L_HRSn6R8FozU3e8QSNMKoEKqrAFcwQ/s320/atronout.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMU0q0Uy7KDAKE8Y3-MKMj4llR_08Mx1QxQVsFcZViRUkUWeoBgdFAZcrz8Lxy-VwWezfoJ_BYXo-dMgrTip2RiqPfzMr4VGVG2OGwy43pIbBboUWXk1KZO3YfeH8-1rDZrWd-42Qke18/s320/bieeen.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq2W03szeY9Sp8pR6SW3qF9xv2uEaSfYgnUkb6FXl1S1Up2BDRctbcLycKa0i-ZfDdd2439_NSPHtik489Gz0q_aRcPT2iTfF3-vHeUSFwUpA1yqzW55xXGZ5NQZDq7uqNYhTNVt-xgCk/s320/blankon.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCRuGZijbhPcEEG8kmYsDz5U35ceAq_789z36Uo3FEuXaihvI6Hd7SIvvwwsTJQ-b2zVq_YVXitXgj7U_xKXZBaBuukSeHEuPfpdEYVUjTR7B8x0rKV3ytA77NiBVOGCbFPLNckwjfEkk/s320/boxing.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkz6dYMA4Aq0eM5J8yMRK9OhEijfQ8g6-sJlMToMZmayVfEYB1YYX6fONFSAc2csnWmSfsS0xrlsnlc3UBEMai306PChwq47_OQb-BM0HXH3_V1_cj-alEaB-fsxbqB4HQcZkaXNYkdrY/s320/duits.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPAb-gApYK4KaoMFhEsqiDpv0ad5YwdcRBvpn-ibHocXmtFiBNUATCG6XwdB_qPebANfUQKLnxnr9DSoyPuuyqdL2wqfIFy4ynv6-bDkpueA8Ss_AlMVOZri73UkJtQF3CqLNalKX3GKg/s320/goyang.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCDh2CuvWtZfQj_5KAJNdzQ3utVC4NfHxLAxOhtjX7gQe4SeFXCyotbrhpFurnlklFuCovhYsF0ytVuQt9o63xBS8BxwiHJEopV8A2CDgsMXReyQdjXPCohxEfq4yGMoDo5f5LnKQgp6Y/s320/hormat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjulhH4VzmXp5tWOc_iIKO5APV-enJuPJ-zLiwcaQ28AGDdiHW4fIQzPiB2uY0VoKfzMANuJ0bMWv_ZqcPTT5DshQDcWEpr-Hy16tbX_rtayeT1pQqaFgtSQrMm-39vUwt24xpVduY7bU/s320/jendr.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNzm4ks9wBtUwNsCUUzowAtzPgUblUlonWRgpRC3O-E32r8gE8jIbrNzhWugLWBMN_2vIiGPmjm0uXZddezt8txaTMFVeo9DQTGI1XE7tVE8zgUYsKmWTfUaueETwoGCCdRRY4Zm9X49g/s320/koran.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ0Ex50TJHyp-03SXTmGEW0OJx0SUBlcjyi2WNLeE8c0B0tWkop-3tM91wbClGNAggv1FbGQf9F15ckjwOohXOZiddskPlwcwWQdIDNzVRr-bB1Umkii4tYJ6o9Nq1xsGRN_orlXVmIbQ/s320/samar.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUvf8JDL_LERcOqQGDXrNRoN_yZsMusAfktMcdqiOqC8EjM7pwWyku6DjMf-Ano1N45S8ARTbTn-kLTpBJuRQt0PnSBGRErbLLSmE52EbzvRg-NmKTOyxNgUvpNhOCtILGGGBnmxJTgg/s320/seribu.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmZAZHah_jBYLGLIQvfTP9UZPsKUnPyaT6Z8_FTmPh3rXKCPlV_NZgvo9yJwi2CB0BDLmMQqHS4wG80KldLUbuCmw_lEpUtg4Hb4T1dBAlvUGtSlNaTQyjXQLrHXvveHT6N5FgZjCZEFk/s320/silat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmDctUb0FFoCVeSnxjD8LX9s5EOxNX-_OraaqAUvzgDHWQ3Adhoxv76XTF4L_OOBjexIRBrLF2WaQzMzVNIDxZUMZc4dXC779BWPPnH7YrHavy7RxTLGlyE2PYXvys34quH9Wkc5HQ8EQ/s320/wig1.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqWL4upLho0bTBJxSpWHM7IVN-MKopeiAFb6fPdTOfIMMv5pQDslGLpuhbS_3w4y8XM1zrcNL84AoGxDHLDn5qg8mJl3BkhMlFqd0dyhoQWqRDGTb4q9fMQjQEHKYcWKO2bGTFnYZ8jFA/s320/tenis.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuqBgRDg9JWyYEwRohcXRJ-atC-GPJ2GUxz7CovdRTSaMUK61iZUWT3mC4Os8OnQnPgExdseuL8B4YuVdim8odos1An45wmm-vMhHXPXgs7hFmcXCp7O3x79PvBsOQ9jO-9vOJVw9Q89I/s320/santai.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx42o-8p-AULnAqKzEAYJyUOiEX6BUdNKeXjziXDnLQDvjXFhycQVoC70GZ2DJ7pAKKExt5yNMCJKbpZttt3_8KqDNAljvDkbPeGykdadDrUpaaDhKIXOJaXNNXyL89DlEqa8QtPxnAHU/s320/kacamata.jpg" width="200" /></a>
</dt>
</dl>
</div>
</div>

Catatan Penting :

1. Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
2. Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
3. Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%)
4. Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.
5. Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.

Okey, cukup sekian tips blog kali ini cara membuat gallery foto di blogspot.
Semoga Bermanfaat.

SELAMAT DATANG DI SITUS BLAWONG BLACK

Cara Membuat Nivo Slider Di Blog

Tips blog kali ini adalah cara membuat nivo slider di blog. Nivo slider adalah salah satu slider terbaik yang tersedia di web, banyak para blogger yang menggunakan nivo slider ini. Buat sobat blogger yang ingin menambahkan nivo slider kedalam blog nya, jangan ragu lagi untuk mengunakan nivo slider yang satu ini. Nivo slider yang satu ini selain cara membuat nya sangat mudah,sobat tingggal add gadget HTML saja, penampilan nya juga sangat keren. Coba saja lihat demo nya dibawah ini.

DEMO NIVO SLIDER

Bagaimana ? keren gak sob ? Kalau sobat tertarik untuk memasang nya di blog, tinggal masukan kode di bawah ini ke add gadget HTML :

<style>
#slider {
  position:absolute !important;
  top:50%;
  left:50%;
  width:650px;
  height:350px;
  margin-top:-175px;
  margin-left:-325px;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
 }

 .nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
 }

 .nivoSlider a {
  border:0;
  display:block;
 }

 .nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
 }

 .nivo-box {
  display:block;
  position:absolute;
  z-index:5;
 }

 .nivo-caption {
  position:absolute;
  left:75px;
  bottom:29px;
  width:498px;
  padding-top:13px;
  padding-bottom:13px;
  z-index:8;
  border:1px solid #000;
  border-left-color:rgba(0,0,0,.5);
  border-right-color:rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
 }

 .nivo-caption p {
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-shadow:0px -1px 0px #000;
 }

 .nivo-caption a {
  display:inline !important;
  }

 .nivo-html-caption {
  display:none;
 }

 .nivo-directionNav a {
  position:absolute;
  bottom:30px;
  z-index:9;
  cursor:pointer;
  text-indent:-9999px;
  width:45px;
  height:39px;
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4U9FrD4oqUlyCP8KmYmdKfxT9J1nO4AZ7Xy4WwCRpjQObuf4gQvQUo4v9ImUzF6gV6VR0lNdoZUADh64MLhkb1I9ZhuOEqiL-1yDH4697vg0brwXb9GeRVtskp8Maj1FFkmU_4ko4okU/s1600/helperblogger.com-arrows.png);
  background-repeat:no-repeat;
}

 .nivo-prevNav {
  left:75px;
  background-position:0 0;
  box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
 }

 .nivo-nextNav {
  right:77px;
  background-position:-45px 0px;
  box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
 }

</style>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>

<div id="slider" class="nivoSlider">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlszfGVXXHvrTXekpzBnSHuk90mLqQI76ug6gb-SJ5KN6ZM_q0ytJ-8igbM3s9FfR7uBLKhHBcLZkJ4uFk38AhTtSdzdeYFk-1LmLPVF7rzSjFpKKru3dkJ9rUhyphenhyphenz2upyRq8AyJyfXu54/s1600/helperblogger.com-5.png"
    alt="Slider Image 1" title="This Is An Example Of A Caption">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwlsiOzUiQDxBa8_F_28hORQaE_C3-J3wSIFJHgMwNQS0YzxiBWVi0N2yi6KgaDBSNdg2EXfV4TaQAj036YF08iE3jWfDB3YxdTALSv-Y7tKf_IkvIrSY85HXOI5VyxvpYuKhYu8mR3U/s1600/helperblogger.com-4.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNbAP8glHxk5h0tZG3X3eBx5eFILXJLO9imJ5vspPpqFmDxP6Kvzn_-PBbvm58ejCofb26y6cfC7utUObmxZCNw5KNHVU8hdc-WqFEGMBcOg1zOfBMs7Ihlj4xDF08sUKpBfq9ovQI2pw/s1600/helperblogger.com-3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0O_pwGUkx1NyQ5PhjLiDlVIbZ6xEkFmoczAm8ArEwuACWxc1YZs01QPMWXbXkZweSdPfXgmCS30z6XwW-Orevwli_e0dM-s06PO4BuwlgRZwCTxb7Q8nlD6eMj1mhwAXN8gmxzyhKXQ/s1600/helperblogger.com-2.png"
    alt="Slider Image 2" title="Image Info">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Sna3oZeLROwxGsNNaAoWrg6gwXTZp1OqrDu7rSDNnruD67qUqj2UlHGyBSwE_uMmOE9qyPkE3VFRHHg5w0F5SXgBmVhFgizwpcjhyiS4DY7LIlktSZhflVNYw_ILHNV6OW67fW-oB8U/s1600/helperblogger.com-1.png"
    alt="Slider Image 2" title="And Other Things">
</div>

Save dan lihat hasilnya.
Note : Bagian yang saya kasih warna silahkan sobat edit sesuai kebutuhan sobat.

Mudah kan sob Cara Membuat Nivo Slider Di Blog ini ?
Cukup sekian tips blog kali ini..Semoga Bermanfaat..

Tips Blog Cara Edit Label Blog Dengan CSS3

Sobat blogger mau merubah penampilan label blog menjadi lebih keren ? Nah, tips blog kali ini yang ingin saya share adalah Cara Edit Label Blog Dengan CSS3. Kalo sobat blogger memakai tips blog ini, saya jamin penampilan label blog sobat akan terlihat keren. Untuk melihat preview lihat gambar dibawah ini :

Cara membuat Label Blog Dengan CSS3 :
1. Masukkan kode berikut diatas ]]></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;

2. Save template dan lihat hasilnya.

Okey, cukup sekian tips blog kali ini cara edit label blog dengan CSS3.
Semoga bermanfaat

Cara Membuat Tombol Share Social Media CSS3

Selamat pagi sobat blogger,,seperti yang kita social media seperti facebook, twitter dll, adalah tempat yang paling bagus untuk kita melakukan kegiatan promosi. Bagi sobat blogger yang menekuni dunia blogging dan bisnis online rasanya tidak akan terlepas dari social media ini, karena selain penggunaanya yang mudah, social media ini bisa kita gunakan secara gratis. Jadi tunggu apalagi, segera promokan apapun bisnis sobat blogger melalui social media ini. Tips blog kali ini, yang akan saya share adalah cara membuat tombol share social media CSS3. Dengan adanya widget ini, sobat akan lebih mudah untuk melakukan kegiatan promo ke social media, selain widget ini super kereen, cara pembuatanya pun juga cukup mudah. Mau tau bagaimana cara membuatnya ?

Cara Membuat Tombol Share Social Media CSS3 :

1. Seperti biasa, login ke blogspot
2. Masuk ke bagian pengeditan HTML
3. Cari kode ]]></b:skin>
4. Letakan kode dibawah ini, diatas ]]></b:skin> 
 

.social{
    max-width:300px;
}
 
.social li{
    min-height:40px;
    clear:both;
    float:none;
    margin-bottom:10px;
}
 
.social a{
    color:#232323;
    position:relative;
    display:block;
    line-height:40px;
    padding-left:55px;
}
 
.social span{
    display:block;
    width:40px;
    height:40px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjId_7SxliJmglr6fahcQ20RLzcdFgPorsecC6l5nf1zADhFwpJD-GVcwa3sVH5p4vG8lS1wPWG-hxh49qFopPZiId9bpTYQcgJq-55SdoJ6kGbRKYAzpn2dn2vVwxawemuPHvWsodZ/s1600/social.png) no-repeat;
    position:Absolute;
    left:0;
    border-radius:32px;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
 
.social .facebook{
    background-color:#2d309a;
}
 
.social .twitter{
    background-color:#00FFFF;
    background-position:0 -40px;
}
 
.social .pinterest{
    background-color:#FF0000;
    background-position:0 -80px;
}
 
.social .email{
    background-color:#00FF00;
    background-position:0 -120px;
}
 
.social .rss{
    background-color:#ffba16;
    background-position:0 -160px;
}
.social a{
    /*--code trước--*/
    z-index:1;
    -moz-transition:color 0.4s ease;
    -webkit-transition:color 0.4s ease;
    -o-transition:color 0.4s ease;
    transition:color 0.4s ease;
}
 
.social span{
    /*--code trước--*/
    z-index:-1;
    opacity:0.8;
    -moz-transition:opacity 0.4s ease,width 0.4s ease;
    -webkit-transition:opacity 0.4s ease,width 0.4s ease;
    -o-transition:opacity 0.4s ease,width 0.4s ease;
    transition:opacity 0.4s ease,width 0.4s ease;
}
 
.social a:hover{
    color:white;
    text-shadow:0 1px 0 rgba(0,0,0,0.5);
}
 
.social a:hover span{
    width:300px;
    opacity:1;
}

5. Save Template.
6. Masukan kode berikut ke add gadget HTML

<ul class="social">

    <li><a href="#"><span class="facebook icon"></span>Join Us on Facebook</a>

    </li>
    <li><a href="#"><span class="twitter icon"></span>Follow Us on Twitter</a>

    </li>
    <li><a href="#"><span class="pinterest icon"></span>Join Us on Pinterest</a>

    </li>
    <li><a href="#"><span class="email icon"></span>Send Us Email</a>

    </li>
    <li><a href="#"><span class="rss icon"></span>Subscrible RSS Feed</a>

    </li>
</ul>

7. Save dan selesai.

Nah sekarang sobat sudah mempunyai Tombol Share Social Media CSS3 yang akan memudahkan sobat dalam melakukan promo ke social media.

Terima kasih telah membaca tips blog kali ini, cara membuat tombol share social media CSS3.
Semoga bermanfaat.

Cara Membuat Iklan Melayang Disamping Kiri dan Kanan Blog

Buat sobat blogger yang lagi bingung mau naruh iklan di blog dibagian mana, mungkin ini bisa menjadi salah satu alternatifnya, tips blog kali ini adalah Cara Membuat Iklan Melayang Disamping Kiri dan Kanan Blog.

Cara membuat iklan melayang disamping kiri dan kanan blog ini juga sangat mudah, sobat tinggal masukkan sript dibawah ini pada add gadget HTML blog sobat :

<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>

<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

<!--start: floating ads-->
<div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">

<div><a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLd_Ok1tFW6JR7BGdG0ykpiT7q5ow0ZW7PIPTj_jSVE6jR1y7tAATtzM6N3Jr-DmvGbNTbWhvDDQivyH4Q7PdHWnahOgv3CmAh-GIehpNw9MPIWZ6Bvhi56xnH5HHVsss0v9mZp0nf7pe-/s1600/PhoXo2.png'/></center></a></div>
<!--Mulai-->

Masukkan kode Iklan anda disini

<!--Akhir-->
</div>
<!--end: floating ads-->
<!--start: floating ads-->
<div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">

<div><a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLd_Ok1tFW6JR7BGdG0ykpiT7q5ow0ZW7PIPTj_jSVE6jR1y7tAATtzM6N3Jr-DmvGbNTbWhvDDQivyH4Q7PdHWnahOgv3CmAh-GIehpNw9MPIWZ6Bvhi56xnH5HHVsss0v9mZp0nf7pe-/s1600/PhoXo2.png'/></center></a></div>

<!--Mulai-->

Masukkan kode iklan anda disini
<!--Akhir-->

</div>
<!--end: floating ads-->

Okey, cukup sekian sob tips blog Cara Membuat Iklan Melayang Disamping Kiri dan Kanan Blog.

Semoga bermanfaat.

Cara Membuat Slideshow Widget Photo

Tips blog kali ini adalah cara membuat slideshow widget photo. Tips ini adalah hasil utak-atik kang salman ( kucoba.com) silahkan sobat mampir ke situs aslinya www.kucoba.com. Slideshow widget photo ini adalah sebuah widget yang menampilkan image secara random. Dimana akan berganti-ganti tergantung jumlah foto dan informasi yang kita masukan ke dalamnya.

DEMO

http://distro-baju.blogspot.com

Bagaimana cara membuatnya ? Ikuti langkah-langkah berikut ini :

Langkah 1

1. Login ke Blogger
2. Pilih Tata Letak / Rancangan
3. Pilih Tab Edit HTML
4. Centang "Expand Template Widget"
5. Silakan Cari Kode ]]></b:skin> dan Taruh Kode Berikut Di atas kode ]]></b:skin>

/* Image Slideshow */
#s3slider{margin-bottom:5px; width:100%; /* important to be same as image width */height:250px; /* important to be same as image height */position:relative; /* important */word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
#s3sliderContent{width:100%; /* important to be same as image width or wider */position:absolute; /* important */top:0; /* important */margin:0px; padding-left:0px; /* important */}
.s3sliderImage{float:left; /* important */position:relative; /* important */display:none; /* important */}
.s3sliderImage span{position:absolute; /* important */left:0; font:normal 11px 'Arial',Helvetica,sans-serif; padding:10px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); /* here you can set the opacity of box with text */-moz-opacity:0.7; /* here you can set the opacity of box with text */-khtml-opacity:0.7; /* here you can set the opacity of box with text */opacity:0.7; /* here you can set the opacity of box with text */color:#fff; display:none; /* important */top:0; /*if you puttop:0; ->the box with text will be shown at the top of the imageif you putbottom:0; ->the box with text will be shown at the bottom of the image*/}

6. Kemudian Setelah itu coba cari kode </head> dan Taruh Kode berikut, di atas kode </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var cssdropdown={disappeardelay:250,dropdownindicator:'<img src="http://img40.imageshack.us/img40/6613/arrowto.gif" border="0" />',enablereveal:[true,8],enableiframeshim:1,dropmenuobj:null,asscmenuitem:null,domsupport:document.all||document.getElementById,standardbody:null,iframeshimadded:false,revealtimers:{},getposOffset:function(d,c){var b=(c=="left")?d.offsetLeft:d.offsetTop;var a=d.offsetParent;while(a!=null){b=(c=="left")?b+a.offsetLeft:b+a.offsetTop;a=a.offsetParent}return b},css:function(b,a,c){var d=new RegExp("(^|\\s+)"+a+"($|\\s+)","ig");if(c=="check"){return d.test(b.className)}else{if(c=="remove"){b.className=b.className.replace(d,"")}else{if(c=="add"&&!d.test(b.className)){b.className+=" "+a}}}},showmenu:function(b,a){if(this.enablereveal[0]){if(!b._trueheight||b._trueheight<10){b._trueheight=b.offsetHeight}clearTimeout(this.revealtimers[b.id]);b.style.height=b._curheight=0;b.style.overflow="hidden";b.style.visibility="visible";this.revealtimers[b.id]=setInterval(function(){cssdropdown.revealmenu(b)},10)}else{b.style.visibility="visible"}this.css(this.asscmenuitem,"selected","add")},revealmenu:function(f,d){var e=f._curheight,b=f._trueheight,a=this.enablereveal[1];if(e<b){var c=Math.min(e,b);f.style.height=c+"px";f._curheight=c+Math.round((b-c)/a)+1}else{f.style.height="auto";f.style.overflow="hidden";clearInterval(this.revealtimers[f.id])}},clearbrowseredge:function(f,d){var c=0;if(d=="rightedge"){var e=document.all&&!window.opera?this.standardbody.scrollLeft+this.standardbody.clientWidth-15:window.pageXOffset+window.innerWidth-15;var b=this.dropmenuobj.offsetWidth;if(e-this.dropmenuobj.x<b){c=b-f.offsetWidth}}else{var a=document.all&&!window.opera?this.standardbody.scrollTop:window.pageYOffset;var e=document.all&&!window.opera?this.standardbody.scrollTop+this.standardbody.clientHeight-15:window.pageYOffset+window.innerHeight-18;var g=this.dropmenuobj._trueheight;if(e-this.dropmenuobj.y<g){c=g+f.offsetHeight;if((this.dropmenuobj.y-a)<g){c=this.dropmenuobj.y+f.offsetHeight-a}}}return c},dropit:function(c,b,a){if(this.dropmenuobj!=null){this.hidemenu()}this.clearhidemenu();this.dropmenuobj=document.getElementById(a);this.asscmenuitem=c;this.showmenu(this.dropmenuobj,b);this.dropmenuobj.x=this.getposOffset(c,"left");this.dropmenuobj.y=this.getposOffset(c,"top");this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(c,"rightedge")+"px";this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(c,"bottomedge")+c.offsetHeight+1+"px";this.positionshim()},positionshim:function(){if(this.iframeshimadded){if(this.dropmenuobj.style.visibility=="visible"){this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px";this.shimobject.style.height=this.dropmenuobj._trueheight+"px";this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px";this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px";this.shimobject.style.display="block"}}},hideshim:function(){if(this.iframeshimadded){this.shimobject.style.display="none"}},isContained:function(a,b){var b=window.event||b;var d=b.relatedTarget||((b.type=="mouseover")?b.fromElement:b.toElement);while(d&&d!=a){try{d=d.parentNode}catch(b){d=a}}if(d==a){return true}else{return false}},dynamichide:function(a,b){if(!this.isContained(a,b)){this.delayhidemenu()}},delayhidemenu:function(){this.delayhide=setTimeout("cssdropdown.hidemenu()",this.disappeardelay)},hidemenu:function(){this.css(this.asscmenuitem,"selected","remove");this.dropmenuobj.style.visibility="hidden";this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px";this.hideshim()},clearhidemenu:function(){if(this.delayhide!="undefined"){clearTimeout(this.delayhide)}},addEvent:function(b,c,a){if(b.addEventListener){b.addEventListener(a,c,false)}else{if(b.attachEvent){b.attachEvent("on"+a,function(){return c.call(b,window.event)})}}},startchrome:function(){if(!this.domsupport){return}this.standardbody=(document.compatMode=="CSS1Compat")?document.documentElement:document.body;for(var d=0;d<arguments.length;d++){var g=document.getElementById(arguments[d]).getElementsByTagName("a");for(var b=0;b<g.length;b++){if(g[b].getAttribute("rel")){var a=g[b].getAttribute("rel");var c=document.getElementById(a);this.addEvent(c,function(){cssdropdown.clearhidemenu()},"mouseover");this.addEvent(c,function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(c,function(){cssdropdown.delayhidemenu()},"click");try{g[b].innerHTML=g[b].innerHTML+" "+this.dropdownindicator}catch(f){}this.addEvent(g[b],function(i){if(!cssdropdown.isContained(this,i)){var h=window.event||i;cssdropdown.dropit(this,h,this.getAttribute("rel"))}},"mouseover");this.addEvent(g[b],function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(g[b],function(){cssdropdown.delayhidemenu()},"click")}}}if(this.enableiframeshim&&document.all&&!window.XDomainRequest&&!this.iframeshimadded){document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>');this.shimobject=document.getElementById("iframeshim");this.shimobject.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";this.iframeshimadded=true}}};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.s3Slider=function(h){var e=this;var l=(h.timeOut!=undefined)?h.timeOut:4000;var g=null;var d=null;var k=true;var f=false;var i=a("#"+e[0].id+"Content ."+e[0].id+"Image");var b=a("#"+e[0].id+"Content ."+e[0].id+"Image span");i.each(function(m){a(i[m]).mouseover(function(){f=true});a(i[m]).mouseout(function(){f=false;c(true)})});var c=function(m){var n=(m)?(l/2):l;n=(k)?10:n;if(i.length>0){d=setTimeout(j,n)}else{console.log("Poof..")}};var j=function(){g=(g!=null)?g:i[(i.length-1)];var m=jQuery.inArray(g,i)+1;m=(m==i.length)?0:(m-1);var n=a(e).width()*m;if(k==true){if(!f){a(i[m]).fadeIn((l/6),function(){if(a(b[m]).css("bottom")==0){a(b[m]).slideUp((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}else{a(b[m]).slideDown((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}})}}else{if(!f){if(a(b[m]).css("bottom")==0){a(b[m]).slideDown((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}else{a(b[m]).slideUp((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}}}};j()}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
   $(&#39;#s3slider&#39;).s3Slider({
      timeOut: 3000
   });
});
</script> 

7. Save Template

Langkah 2

Untuk Bisa Menikmati widget ini silakan perhatikan instruksi di bawah ini :

1. Login ke Blogger
2. Pilih Tata Letak Atau Rancangan
3. Pilih Tab Edit HTML
4. Jangan Lupa Untuk buat Backupa data anda
5. Centang expand template widget
6. Cari Kode ini <div id='main-wrapper'>
Tekan Ctrl+F untuk mempermudahnya
7. Copy kode di bawah ini dan Paste tepat di bawah kode <div id='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='s3slider'>

<ul id='s3sliderContent'>

<li class='s3sliderImage'>

<a href='http://www.kucoba.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>

<img height='245'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigFbK_tGCW8KLgDrPToN9nxp8py5sD8exDjAs1Ki5gyxiBXYKVQLsM1bt05tI1sEoGc6zlWlPvrel0qi4QeywlCragicc7B-DGZexxJ-nX2udXxIusY35zgAOF2cU6Ha5xPI1XPLRi-DT3/s1600/1.jpg'
width='450'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image akhiri dengan titik.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<li class='s3sliderImage'>

<a href='#'>

<img height='245'
src='#'
width='450'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<div class='clear s3sliderImage'/>

</ul>

</div>

</b:if>

Keterangan :

1. Ganti warna merah dengan alamat link artikel kamu
2. Ganti warna hijau dengan link gambar / foto
3. Arti kode width="468" height="245" adalah ukuran dari widget slideshow view, lebar="468" tinggi="245" (atur sesuai ukuran widget yang kamu inginkan)
4. <span>Isi dengan kalimat yang ingin di tampilkan di atas foto.</span>
5. Jumlah Slide Show bisa anda perbanyak dengan menambahkan kode <li><a href="#"><img height='245' src="#" width='468'/> <span>isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image jangan lupa akhiri dengan titil atau tanda kalimat lainnya .</span></a></li> di atas kode </ul> 

Memang agak panjang sob cara penerapanya, jadi pelan-pelan saja dan cek dengan teliti untuk menghindari kesalahan.

Cukup sekian tips blog Cara Membuat Slideshow Widget Photo. Semoga bermanfaat.

Source

Cara Membuat Receant Post Thumbnail

Tips blog kali ini adalah cara membuat receant post thumbnail di blog. Widget ini berguna untuk menampilkan postingan terbaru kita dengan memiliki thumbnail dan keterangan posting nya, penempatan widget ini biasanya ditaruh di sidebar blog.

Bagaimana cara membuatnya ?  untuk membuat receant post thumbnail di blog ini sangat mudah, sobat tinggal copy kode di bawah ini, lalu paste di add gadget HTML blog :

<right><style> img.recent_thumb
{padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs
{float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;}
ul.recent_posts_with_thumbs li
{padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a
{text-decoration:none;}
.recent_posts_with_thumbs normal
{font-size:13px;}
</style> <script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right>

Bagaimana mudah bukan sob ? semoga Cara Membuat Recent Post Thumbail ini bermanfaat.

Apa Itu Sitemap

Ada salah satu sobat blogger yang bertanya kepada saya, " kang sitemap itu apa ya ? dan pengaruh sitemap untuk SEO bagaimana ?. Langsung saja saya nanya mbah google,dan akhirnya saya membuat post yang saya kasih judul apa itu sitemap. Berikut ulasan singkatnya, kalau kurang jelas infonya, silahkan sobat tambahkan sendiri ya.

Apa Itu Sitemap ?

Sitemap artinya petasitus.Kalau mendengar kata peta, pasti sobat sudah kebayang dong seperti apa. Dengan melihat peta, kita bisa melihat isi dari seluruh dunia ini walaupun hanya dari sebuah kertas atau bola, indonesia sebelah mana, malaysia sebelah mana, dll. Sitemap intinya sama dengan peta, dengan adanya sitemap pengunjung dan search engine bisa melihat isi dari seluruh web/blog sobat. Bentuk dari sitemap berupa navigasi link yang terdiri dari posting , kategori , tag , yang telah sobat publikasikan di web/blog sobat.

Pengaruh sitemap untuk SEO ?

Walaupun saya tidak tahu pasti bagaimana pengaruhnya untuk SEO, tapi coba saya kasih perumpamaan saja. Ada istilah " Tak Kenal Maka Tak Sayang ". Kalau sobat blogger baru ketemu atau baru kenal seseorang, mungkin gak langsung ada perasaan sayang sama orang itu ? pasti enggak kan. Tapi setelah lama kelamaan, karena banyak komunikasi,sering ngobrol,sering ketemu, dll, akhirnya sobat tahu, ternyata sifat asli orang ini begini, kebiasaanya begini,tinggal dsini,dll. Intinya sobat sudah tahu secara detil  informasi mengenai orang itu, nah kalau sudah saling kenal begini barulah muncul perasaan sayang dan saling mempercayai. Mbah google pun juga demikian, gak mungkin langsung sayang bgitu saja dengan web/blog sobat, pasti dia butuh waktu dulu untuk mengenali web/blog sobat, maka dari itu kita harus memberikan informasi yang jelas mengenai web/blog kita dengan membuat sitemap di web/blog kita.

Menurut wikipedia : Sitemap adalah sebuah crawl atau (mesin perayap) yang berfungsi untuk mengambil data dan statistika blog anda dengan Bot (robot) yang dibuat oleh beberapa mesin pencari . Seperti Googlebot , Slurp (yahoo) , dan lainnya. Bot berguna sebagai pemeriksa dari isi atau konten blog anda , jika pengunjung banyak dan konten anda unik dan popularitasnnya tinggi maka Bot dari Search engine akan merayap web anda sehingga mudah dicari pada search enginenya.

Kalau google sudah kenal dan akrab dengan web/blog kita, maka kita akan diberi hadiah dan penghargaan oleh mbah google, yaitu web/blog kita bisa nangkring di posisi halaman pertama google, dan pastinya masih banyak hadiah-hadiah yang lain :)

Cara Membuat Sitemap ?
Untuk membuat sitemap di blogspot, sobat tingal masukkan kode berikut pada halaman/postingan sobat :

<link href="http://sites.google.com/site/congcot/kode-1/CCcss1.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="http://sites.google.com/site/congcot/kode-1/CCjs1.js">

</script> <script src="http://kimzaqi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">

</script> <script type="text/javascript">
 var accToc=true;
</script> <script src="http://sites.google.com/site/congcot/kode-1/CCjs2.js" type="text/javascript">

</script>


Note : Sobat ganti URL alamt blog saya diatas dengan milik sobat sendiri.

Sampai disini sudah habis nih sob postingan mengenai Apa Itu Sitemap. Kalau ada yang kurang, silahkan sobat tambahkan sendiri.

Semoga bermanfaat

Cara Membuat Tombol Share Melayang

Tips blog kali ini adalah cara membuat tombol share melayang di blog. Buat sobat blogger yang ingin memasang widget tombol share ke social media, mungkin alternatifnya bisa memakai tombol share melayang ini. Seperti yang kita ketahui, tombol share sosial media sangat penting untuk blog kita, disamping untuk meningkatkan pengunjung, tombol share akan membantu kepada pembaca untuk membagi artikel kita ke media yang lain, seperti share di facebook, share di twitter dll.

Penampakan tombol share melayang nya seperti dibawah ini  :

Gambar diatas menampilkan banyak kombinasi tombol share di blog, like facebook, share facebook,twitter juga digg. Sudah cukup lengkap kan  sob tombol share melayang diatas?
Lalu bagaimana cara membuatnya ? ikuti tutorial dibawah ini:

Cara membuat tombol share melayang di blog :

•     Masuk ke blogger kamu.
•     Klik Rancangan.
•     Tambah gadget dan pilih HTML/Javascript.
•     Lalu copy dan paste kode dibawah ini.

<!--SideBar Floating Share Buttons Code Start-->
<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 12px;text-align:center;"><a href="http://kimzaqi.blogspot.com" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

• Klik save dan lihat hasilnya

 Cukup sekian tips blog cara membuat tombol share melayang. Semoga bermanfaat

Cara Membuat Menu Dropdown Warna

Satu lagi nih sob tips blog cara membuat menu dropdown di blogspot. Menu ini mempunyai warna yang berbeda di setiap masing-masing sub menu, total terdapat 8 sub menu. untuk demonya saya tidak menyediakan live demo, jadi sobat lihat gambar ini saja.

Cara Membuatnya :

Masukkan kode berikut sebelum ]]></b:skin>

#css-menu {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FF7E00;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqXasrD5VOI7bmF0rg1E7teipZIBXkElfZG_Goq3jiS5gSxUZg2HMOPyv5AhLdWv3bLrvEmdFkalYDBvUn6OUmVUJprOenhQumFad1cdnMpZsbCnbwVN6DhkxVlcxZR7WeVEhlkmOMoak/s26/bg-nav-foot.jpg");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    height: 46px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
.nav {
    float: left;
    height: 26px;
    line-height: 1;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    z-index: 99;
}
.nav a {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    color: #111111;
    display: block;
    position: relative;
    z-index: 100;
}
.nav li {
    float: left;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 5px;
    margin-top: 0;
}
.nav li a {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    -x-system-font: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfqe0Fibr1kqVMsHjtn8YFt4UlP9HslQjLfnJOi4wGnqi5FsvP9MxmrnOiOfGrCcJ4k-P-xDgpqM5uxU05CQVf88MFVdAQ8KiYeaqptgsA0BT3Q5NbNJevwLfYzu4UUqfrjvocy4P1HCA/s48/li-right.jpg");
    background-origin: padding-box;
    background-position: right top;
    background-repeat: no-repeat;
    background-size: auto auto;
    font-family: Arial,serif;
    font-size: 12px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 15px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 0;
    padding-top: 6px;
}
.nav li a span {
    color: #FFFFFF;
    font-weight: bold;
    padding-bottom: 4px;
    padding-left: 0;
    padding-right: 12px;
    padding-top: 5px;
}
.nav li.current-cat a, .nav li.current-cat a, .nav li:hover a, .nav li a:hover {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    -x-system-font: none;
    color: #FFFFFF;
    font-family: Arial,serif;
    font-size: 12px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 15px;
    margin-bottom: 0;
}
.nav li:hover span, .nav li a:hover span {
    font-weight: bold;
}
.nav li.current-cat a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #111111;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigAoPNUCB6le4tnT7bKqQGrMSbXikqH_H-UF96-ONHlRlbSNZqcDMQ_f-ShHf1hqB-dyPP-rtP6tDVJBv5YXc-s-QJiBCRb-92A7Zk2Ns5m6dozKgldIwhfWBYk2PCecPzbAHb5lHwvGY/s101/hnjn.gif");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto auto;
    color: #EEEEEE;
    height: 16px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: -1px;
    padding-left: 10px;
    padding-top: 7px;
    width: 100px;
}
.nav li.current-cat a span {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDEjZQTFQfd_rjlaVjGYWG_F_JPraD9b0ftrg7jU8oj2GKZ-P_XPB82c3pdGWbrV9SB456qPcchQSbyyotlYHsUlTQ2n-DR0GQzCrzfXV4hC5rlr8nS-sneKsMtghcrpmEObLMcsQ36C0/s18/hbhjs.png");
    background-origin: padding-box;
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: auto auto;
    padding-left: 20px;
}
.nav li.news:hover, .nav li.news:hover ul {
    background-color: black;
}
.nav li.news1:hover, .nav li.news1:hover ul {
    background-color: #017CB5;
}
.nav li.news1:hover ul li {
    border-bottom-color: #014F73;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #038BCA;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news2:hover, .nav li.news2:hover ul {
    background-color: #A92267;
}
.nav li.news2:hover ul li {
    border-bottom-color: #701544;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #C72B7B;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news3:hover, .nav li.news3:hover ul {
    background-color: #0F5594;
}
.nav li.news3:hover ul li {
    border-bottom-color: #0A3963;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #166BB7;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news4:hover, .nav li.news4:hover ul {
    background-color: #693770;
}
.nav li.news4:hover ul li {
    border-bottom-color: #45254A;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #9A52A4;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news5:hover, .nav li.news5:hover ul {
    background-color: #3B6A06;
}
.nav li.news5:hover ul li {
    border-bottom-color: #264404;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #4D8909;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news6:hover, .nav li.news6:hover ul {
    background-color: #46505C;
}
.nav li.news6:hover ul li {
    border-bottom-color: #252A30;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #5C6978;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news7:hover, .nav li.news7:hover ul {
    background-color: #1B227D;
}
.nav li.news7:hover ul li {
    border-bottom-color: #10154B;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #212994;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news8:hover, .nav li.news8:hover ul {
    background-color: #9A1313;
}
.nav li.news8:hover ul li {
    border-bottom-color: #650D0D;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #B81919;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news9:hover, .nav li.news9:hover ul {
    background-color: #A92267;
}
.nav li.news9:hover ul li {
    border-bottom-color: #741847;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #C52C7A;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news1:hover ul li.first, .nav li.news2:hover ul li.first, .nav li.news3:hover ul li.first, .nav li.news4:hover ul li.first, .nav li.news5:hover ul li.first, .nav li.news6:hover ul li.first, .nav li.news7:hover ul li.first, .nav li.news8:hover ul li.first, .nav li.news9:hover ul li.first {
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: 0;
}
.nav li.news1:hover ul li.last, .nav li.news2:hover ul li.last, .nav li.news3:hover ul li.last, .nav li.news4:hover ul li.last, .nav li.news5:hover ul li.last, .nav li.news6:hover ul li.last, .nav li.news7:hover ul li.last, .nav li.news8:hover ul li.last, .nav li.news9:hover ul li.last {
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: medium;
}
.nav li a:hover, .nav li a:active {
    color: #B80000;
}
.nav li ul {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    left: -999em;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 1px;
    margin-top: 0;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 0;
    padding-top: 5px;
    position: absolute;
    width: 168px;
    z-index: 999999;
}
.nav .last ul {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    margin-bottom: 0;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 0;
    position: absolute;
    width: 168px;
    z-index: 999;
}
.nav li ul li {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: -moz-use-text-color;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: none;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: medium;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: -moz-use-text-color;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: none;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: medium;
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: medium;
    clear: both;
    margin-left: 0;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 5px;
    width: 160px;
}
.nav li ul li a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #FFFFFF !important;
    font-size: 12px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    text-transform: none;
}
.nav li:hover ul li a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    font-weight: bold;
}
.nav li:hover, .nav li.hover {
    position: static;
}
.nav li:hover ul ul, .nav li:hover ul ul ul, .nav li:hover ul ul ul ul {
}
.nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li li li li:hover ul {
    left: auto;
}

Kemudian save, dan masukkan kode HTML berikut ini :

<div id='css-menu'>
<ul class='nav'>
<li class='current-cat iconhome'><a href='/'><span>Home</span></a></li>
<li class='news1'><a href='#'><span>Css menu 1</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 1.1</a></li>
<li><a href='#'>Submenu 1.2</a></li>
<li><a href='#'>Submenu 1.3</a></li>
<li><a href='#'>Submenu 1.4</a></li>
<li><a href='#'>Submenu 1.5</a></li>
<li class='last'><a href='#'>Submenu 1.6</a></li>
</ul>
</li>
<li class='news2'><a href='#'><span>Css menu 2</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 2.1</a></li>
<li><a href='#'>Submenu 2.2</a></li>
<li><a href='#'>Submenu 2.3</a></li>
<li><a href='#'>Submenu 2.4</a></li>
<li><a href='#'>Submenu 2.5</a></li>
<li class='last'><a href='#'>Submenu 2.6</a></li>
</ul>
</li>
<li class='news3'><a href='#'><span>Css menu 3</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 3.1</a></li>
<li><a href='#'>Submenu 3.2</a></li>
<li><a href='#'>Submenu 3.3</a></li>
<li><a href='#'>Submenu 3.4</a></li>
<li><a href='#'>Submenu 3.5</a></li>
<li class='last'><a href='#'>Submenu 3.6</a></li>
</ul>
</li>
<li class='news4'><a href='#'><span>Css menu 4</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 4.1</a></li>
<li><a href='#'>Submenu 4.2</a></li>
<li><a href='#'>Submenu 4.3</a></li>
<li><a href='#'>Submenu 4.4</a></li>
<li><a href='#'>Submenu 4.5</a></li>
<li class='last'><a href='#'>Submenu 4.6</a></li>
</ul>
</li>
<li class='news5'><a href='#'><span>Tên menu 5 </span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 5.1</a></li>
<li><a href='#'>Submenu 5.2</a></li>
<li><a href='#'>Submenu 5.3</a></li>
<li><a href='#'>Submenu 5.4</a></li>
<li><a href='#'>Submenu 5.5</a></li>
<li class='last'><a href='#'>Submenu 5.6</a></li>
</ul>
</li>
<li class='news6'><a href='#'><span>Css menu 6</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 6.1</a></li>
<li><a href='#'>Submenu 6.2</a></li>
<li><a href='#'>Submenu 6.3</a></li>
<li><a href='#'>Submenu 6.4</a></li>
<li><a href='#'>Submenu 6.5</a></li>
<li class='last'><a href='#'>Submenu 6.6</a></li>
</ul>
</li>
<li class='news7'><a href='#'><span>Css menu 7</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 7.1</a></li>
<li><a href='#'>Submenu 7.2</a></li>
<li><a href='#'>Submenu 7.3</a></li>
<li><a href='#'>Submenu 7.4</a></li>
<li><a href='#'>Submenu 7.5</a></li>
<li class='last'><a href='#'>Submenu 7.6</a></li>
</ul>
</li>
<li class='news8'><a href='#'><span>Css menu 8</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 8.1</a></li>
<li><a href='#'>Submenu 8.2</a></li>
<li><a href='#'>Submenu 8.3</a></li>
<li><a href='#'>Submenu 8.4</a></li>
<li><a href='#'>Submenu 8.5</a></li>
<li class='last'><a href='#'>Submenu 8.6</a></li>
</ul>
</li>
</ul>
<div class='clear'/>
</div>

Oke,,cukup sekian tips blog kali ini, Cara Membuat Menu Dropdown Warna.

Semoga bermanfaat

Cara Membuat Releated Post Dengan Thumbnail

Selamat pagi sobat blogger, satu lagi nih tips blog cara membuat releated post dengan thumbnail. Kalo sobat blogger ingin melihat koleksi saya , bagaimana membuat releated post dengan thumbnail, bisa dilihat di artikel Cara Membuat Related Post Thumbnail di Blog, Cara Membuat Releated Post Bergerak - Carousel Related Post , Cara MengCustom Releated Post dengan Linkwithin. Nah itu adalah beberapa koleksi saya sebelumnya bagaimana membuat releated post dengan thumbnail.

Lalu apa yang membedakan releated post dengan thumbnail kali ini, untuk jelas nya sobat lihat gambar dibawah ini. Penampilan nya hanya thumbnail saja, tapi ketika krusor kita arahkan ke thumbnailnya, akan muncul keterangan judul posting. Kalau mau lihat Live demonya, sobat berkunjung saja ke blogger www.idblogdesign.com, sobat lihat releated post nya, penampilan nya hampir sama seperti itu :

Okey,langsung saja, bagaimana cara membuat releated post dengan thumbnail ini :

• Masuk Pada Blogger
• Jangan lupa backup template agar jika terjadi kesalahan template bisa di restore kembali.
• Backup template pada interface baru Blogger:
  Template >> Cadangkan/Pulihkan >> Unduh Template Lengkap
• Selanjutnya kembali pilih Template >> Edit HTML >> Lanjutkan
  Centang Expand template Widget cari kode : ]]></b:skin> 

Pastekan kode berikut diatas  ]]></b:skin> : 

<!--start related posts css Info : http://www.katakan-hey.com-->
ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
<!--end related posts css.Info : http://www.katakan-hey.com-->

Selanjutnya cari kode:

Pencarian 1 : <div class='post-footer'> jika tidak ketemu ganti pencarian menjadi Pencarian 2
Pencarian 2 : <div class='post-footer-line post-footer-line-1'>

Letakkan kode berikut dibawah kode hasil pencarian 1 atau 2 :

<!--start related posts code Info : http://www.katakan-hey.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL8dbbpSfvKnRcIn5h99WaFZ6ehPGsssswrNWtdGxgumpZIJVwMZqbBeln3OViq5EgS9L_Yzo0MjUnLZ8MtEHSLoxqdq_bWW-RWS9Kh9eRlF0aA3ditss36n5vZfS0yZkDd2RZ_2HUJ-A/s1600/no-image.gif&quot;;
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if><div style='clear:both'/>
<br/>
<!--end related posts code Info : http://www.katakan-hey.com-->

Simpan Template dan Lihat Hasilnya.
Okey, cukup sekian tips blog kali ini  cara membuat releated post dengan thumbnail

Semoga Bermanfaat.