Kasarongan

Efek Hover Pada Popular Post

Oleh Unknown
Kali ini saya akan Memberikan cara membuat efek hover pada popular post….dengan adanya hover ini maka tampilan popular post akan lebih menarik dan bisa menjadi daya tarik pengunjung untuk menjelajahi blog kita…
Ok, cara pembuatannya seperti ini:


  • Login 
  • Pilih Template > Edit Template 
  • Cari kode ]]></b:skin> 
  • Letakan kode di bawah tepat di atas kode ]]></b:skin>.
.post h2 {
margin:.1em 0 0;
padding:0 0 4px;
font-size:1.0em;
font-weight:normal;
line-height:2.5em;
color:#444;
font-family: Oswald, Serif;
}
.post h2 a, .post h2 a:visited, .post h2 strong {
display:block;
text-decoration:none;
color:#444;
font-size:2.0em;
font-weight:normal;
font-family: Oswald, Serif;
}
.post h2 strong, .post h2 a:hover {
color:#0274be;
background: url("http://i1256.photobucket.com/albums/ii499/imanuel5/kasaronganpanah_zps0bc600df.png") no-repeat 4px center transparent;
padding: 3px 10px 3px 50px;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}

  • Kemudian simpan hasil pekerjaan nya…


Selamat menikmati tampilan popular post yang baru,,,,salam blogger…


Membuat Scroll Pada Blockquote

Oleh Unknown


Dalam artikel saya kali ini saya akan membagikan cara membuat blockquote dengan scroll,,, yang mana sebelumnya saya sudah menjelaskan cara membuat blockquote pada blog….
Pembuatan dasar blockquote bisa dilihat Disini

Langkah pembuatan blockquote dengan scroll:
  • Login ke Blog sobat
  • Masuk ke menu template - Edit Template
  • Langkah 2
  • Cari kode ]]></b:skin>
  • Letakkan kode dibawah tepat diatas ]]></b:skin>
.post blockquote {background:#f9f9f9;border: 1px solid #e9e9e9;padding: 20px;margin:5px 0;border-left:10px solid #FF1493;max-height:250px;overflow:auto;}
  • Ganti ukuran sesuai dengan selera sobat semua.
  • Terakhir jangan lupa save hasil pekerjaannya.
Semoga artikel ini bisa bermanfaat buat sobat semua....Silahkan nikmati artikel lainnya di blog ini..



Variasi Popular Post

Oleh Unknown
Kali ini saya akan membagikan cara merubah tampilan popular post, mungkin sobat semua bosan dengan tampilan yang begitu2 aja ato menoton,,,,,dengan adanya sedikit variasi yang saya bagikan ini semoga bisa member warna baru buat blog sobat semua…..Daripada penasaran, langsung aja ikuti langkahnya berikut ini:

Langkah pembuatan:
  • Login ke blog sobat
  • Masuk ke bagian Template > HTML
  • Cari kode ]]></b:skin> dan letakan kode di bawah tepat di atasnya.
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://i1256.photobucket.com/albums/ii499/imanuel5/gambarpanah_zps6504d711.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:2px solid #6BB5FF;
background:#000000;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
color:#FFF8DC;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Tahap terakhir adalah save hasil pekerjaannya….lihat hasilnya…
Demikian artikel yang bisa saya sampaikan semoga bisa bermanfaat buat sobat semua….
Nikmati berbagai artikel lainnya dalam blog ini…
Catatan: untuk artikel menarik lainnya, sobat semua bisa mengunjungi situs berikut ini…Langsung klik aja Disini

Button Effect CSS3

Oleh Unknown
Pada kesempatan ini saya akan memberikan tutorial tentang variasi pada button,,,, dan hasilnya sangat bisa mempercantik tampilan blog sobat semua …..variasi ini sudah saya gunakan dan hasilnya pun maksimal dan membuat blog menjadi lebih hidup….

Hasil yang saya buat bisa dilihat pada gambar di bawah, atau langsung klik link untuk melihat hasil yang sebenarnya….

Klik link ini untuk melihat hasil aslinya: Disini

Ikuti langkah pembuatannya seperti dibawah ini:

  • Download dulu Kode Scriptnya Here
  • Pilih menu Template > Edit HTML
  • Cari kode ]]></b:skin> 
  • Letakan script download di atas kode ]]></b:skin>
  • Selanjutnya sobat  Kembali ke menu dan pilih Tata Letak 
  • Add Gadget > HTML/Javascript
  • Letakan kode di bawah pada bagian kolom konten
<div class="pbt_share-links">
  <ul>
    <li>
      <span class="share-link gplus" title="LABSTRIKE on Google Plus">
        <span>
          GOOGLE +
          <g:plusone size="small" annotation="none"
          href="Web URL">
          </g:plusone>
        </span>
      </span>
    </li>
    <li>
      <a class="share-link twitter"
      href="http://twitter.com/Username"
      title="LABSTRIKE on Twitter">
        <span>
          TWITTER
        </span>
      </a>
    </li>
    <li>
      <a class="share-link facebook"
      href="http://www.facebook.com/Username"
      title="LABSTRIKE on Facebook">
        <span>
          FACEBOOK
        </span>
      </a>
    </li>
    <li>
      <a class="share-link email"
      href="ID email" title="Receive LABSTRIKE Updates via Email">
        <span>
          EMAIL
        </span>
      </a>
    </li>
  </ul>
</div>
<!-- .pbt_share-links -->
<script type="text/javascript">
  var po = document.createElement('script');
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'http://yourjavascript.com/1541101421/kasarongan.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
</script>


Keterangan:

Ubah setiap kode yang diberi warna sesuai selera masing-masing….
Semoga artikel ini bisa bermanfaat....salam blogger...

Back to top