Sumber Bacaan

Computer Tutorials | Infotech | Software | Games | Ebook | Tips & Trick Blogger




Home » » Cara Memasang Widget Recent Posts Dengan Scroll

Cara Memasang Widget Recent Posts Dengan Scroll

widget-recent-posts-tanpa-scroll
Recent Posts Tanpa Scroll
Kali ini kita akan membahas mengenai cara memasang widget recent posts dengan scroll. Widget recent posts kali ini agak berbeda dari yang lainnya, karena menggunakan jQuery dan formatnya mirip rich snippet. Dalam widget yang satu ini ditampilkan judul postingan, thumbnail posting, tanggal waktu posting, dan jumlah komentar yang ada di posting.

Dengan fitur tambahan scroll, ini akan memanjakan para pembaca untuk mengakses lebih posting blog Kamu. Ditambah lagi widget recent posts dengan scroll ini mudah untuk pengaturannya, jadi bisa disesuaikan dengan keinginan.

Cara Memasang Widget Recent Posts Dengan Scroll

Langkah pertama:
Kita akan menambahkan fitur jQuery ke dalam blog Anda. jQuery library ini biasa ditambahkan seperti ketika Kamu menambahkan fitur tweet, like, dan google+ di posting blog. Jika di blog Kamu sudah terlanjur dipasang, silahkan lewati langkah berikut.

  1. Silahkan menuju blogger Dashboard >> Template
  2. Klik Edit HTML
  3. Tekan tombol Lanjutkan
  4. Jangan lupa contreng Expand Template Widget
  5. Cari kode berikut di template Kamu

  </head> 


Kemudian tambahkan kode di bawah ini tepat di atasnya



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> 


Sekarang jQuery Library sudah terpasang di blog Kamu. Silahkan melanjutkan ke tahap berikutnya untuk memasang widget recent posts dengan scroll.

Langkah kedua:
  • Silahkan menuju blogger Dashboard > Tata Letak/Layout
  • Klik Tambah Gadget
  • Pilih HTML/JavaScript
  • Silahkan salin kode berikut di kotak HTML/JavaScript yang tersedia

  <style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

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

#helperblogger-widget li {
    width: 282px;
    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/AVvXsEgT90IZ70ahqnq2qEwwO6H4iPpZ8ua796_9N0hhETxNodqabIv6YtUYgKv0kAPtUdB-hCPjEAQH6rc6kknlBGyhTmUhH0IQb3jAZ-yK-fC9A-w-kyZRMIfw3Djlvg1oCU-lx7BpVjBg2oI/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

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

#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#helperblogger-widget img {
    -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);
}

#helperblogger-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;
}

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

-->
</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDScGWnTNnpa98Dl_qLUJD2PerhLBaK1Ah_lX0vwWzBWe_U24ZVHLDcKhjmWgAa1J5V9jIx9rfiSEnRHu40TB_FXRv18aCNtutqQPVw3sJoPUyrJf9PjHLtvre8e4ejuJ1wKgQlPL9J14/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDScGWnTNnpa98Dl_qLUJD2PerhLBaK1Ah_lX0vwWzBWe_U24ZVHLDcKhjmWgAa1J5V9jIx9rfiSEnRHu40TB_FXRv18aCNtutqQPVw3sJoPUyrJf9PjHLtvre8e4ejuJ1wKgQlPL9J14/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDScGWnTNnpa98Dl_qLUJD2PerhLBaK1Ah_lX0vwWzBWe_U24ZVHLDcKhjmWgAa1J5V9jIx9rfiSEnRHu40TB_FXRv18aCNtutqQPVw3sJoPUyrJf9PjHLtvre8e4ejuJ1wKgQlPL9J14/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDScGWnTNnpa98Dl_qLUJD2PerhLBaK1Ah_lX0vwWzBWe_U24ZVHLDcKhjmWgAa1J5V9jIx9rfiSEnRHu40TB_FXRv18aCNtutqQPVw3sJoPUyrJf9PjHLtvre8e4ejuJ1wKgQlPL9J14/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDScGWnTNnpa98Dl_qLUJD2PerhLBaK1Ah_lX0vwWzBWe_U24ZVHLDcKhjmWgAa1J5V9jIx9rfiSEnRHu40TB_FXRv18aCNtutqQPVw3sJoPUyrJf9PjHLtvre8e4ejuJ1wKgQlPL9J14/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = " http://www.URLblogkamu.com/ ";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

 



Keterangan
  • numposts = 10; Jumlah post yang mau digulirkan di widget ini.
  • http://www.URLblogkamu.com/ Ganti dengan URL blog kamu sendiri.
  • limitspy=4; Jumlah posting yang mau ditampilkan di widget ini.
  • intervalspy=4000; Kecepatan dari scroll, semakin lambat maka akan mempermudah pembaca karena tidak terlalu "ringan" saat men-scroll.
Demikian penjelasan cara memasang widget recent posts dengan scroll. Jika ada yang belum dimengerti, silahkan ajukan pertanyaan di kotak komentar yang telah disediakan. Semoga Bermanfaat :)




Other link :

Share on...

0 comment on Cara Memasang Widget Recent Posts Dengan Scroll :

Post a Comment and Don't Spam!

Subscribe to: Post Comments (RSS)