Widget Recent Post Dengan Thumbnail Tooltips

Widget
Jika blog Anda memiliki posting yang banyak dan Anda ingin membantu pengunjung Anda untuk menemukan posting terbaru Anda dengan cepat maka recent post sangat membantu. Seperti yang telah Anda lihat di beberapa blog milik blogger lain. biasanya widget ini ditempatkan dalam sidebar blog. Widget recents post ini dapat menampilkan posting terbaru dengan Thumbnail dan garis sebagai tooltip dengan gaya moueover pada thumbnail dengan efek memudar. langsung saja berikut ini cara memasangnya.



Demo Widget


Ikuti langkah-langkah yang sangat sederhana ini untuk menambahkan "Widget Recent Post Dengan Thumbnail Tooltips Untuk Blogger" di blog Anda.

Langkah 1: Login ke Blogger> tata letak> Elemen Halaman
Langkah 2: Klik "Tambah Gadget"
Langkah 3: Dari jendela pop-up, pilih HTML / JavaScript
Langkah 4: Copy dan paste kode di bawah ini

<style type="text/css">
#post-gallery {
  width:300px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:##000000
;
  padding:8px;
  background-color:#1BA1E2
;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#000000;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7riQLWFJpAgpjJqtN0JkkPhPDfs07WTvRNgD0sb3gVEsXD553P53bfoBJv-yifflAGTkxHBYuXMKJ1ANag8saQZXGsOuHZjleve3HHCXTR1M_PRDoB9DUp9Q8jLxihTVWiRfc0v5R6DV/s48/Bloggerheroe.comloading.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #1BA1E2;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#1BA1E2;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Latest Post",       // Widget Title
    numposts    = 20,      // jumlah post yang tampil
    numchar     = 200,      // karakter deskripsi dalam tooltip
    rcFadeSpeed = 600,      // kecepatan efek pudar
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeqvfb5Ywmslr6KI4PzpeHHavl8Gbr0xy8AegKybZGUHy7CqPVVTbYLlPJm7KGpov82b7tBvNL7Lqd_UQuQFaGuBqDAaATURkKYOguiOM_-xiUVLTaGYeqyvMqzCGc__5NFfWdF5r3Xxue/s100/no-img.png",      // gambar untuk posting tanpa gambar
    blogURL     = "http://defandaky.blogspot.com/";       // alamat blog
</script>
<script src="http://dl.dropbox.com/u/81212926/Recent%20Post%20Thumbnail-blogger-heroe.js" type="text/javascript"></script>

kustomisasi

Ganti http://defandaky.blogspot.com/ dengan url blog Anda.
numposts adalah jumlah thumbnail / posting yang ingin ditampilkan.
numchar adalah jumlah karakter dalam tooltip deskripsi.
rcFadeSpeed ​​adalah kecepatan efek memudar.

Sekarang simpan widget dan periksa blog Anda. Jika Anda menghadapi masalah atau kesulitan memasang widget ini, kirimkan kesulitan Anda dalam komentar.

2 komentar

  1. Ane gunakan widget ini dari Blogger Heroes.

    Tapi gimana caranya untuk membuka postingan ke "New Tab"?

    Mohon petunjuknya gan. Thanks sebelumnya.

    Oya widget ini ane gunakan di web ane di http://www.BloggerSalesCashCode.com

    BalasHapus
    Balasan
    1. Silahkan buka widgetnya dan ganti js



      <script src="http://dl.dropbox.com/u/81212926/Recent%20Post%20Thumbnail-blogger-heroe.js" type="text/javascript"></script>



      dengan kode

      <script type="text/javascript">
      $(function() {
      $('div.rp-item img').hide();
      $('div.rp-child').removeClass('hidden');

      var winWidth = $(window).width(),
      winHeight = $(window).height(),
      ttWidth = $('div.rp-child').outerWidth(),
      ttHeight = $('div.rp-child').outerHeight(),
      thumbWidth = $('div.rp-item').outerWidth(),
      thumbHeight = $('div.rp-item').outerHeight();


      $('div.rp-item').css('position', 'static').mouseenter(function() {
      $('div.rp-child', this).filter(':not(:animated)').fadeIn(rcFadeSpeed);
      }).mousemove(function(e) {
      var top = e.pageY+20,
      left = e.pageX+20;

      if (top + ttHeight > winHeight) {
      top = winHeight - ttHeight - 40;
      }
      if (left + ttWidth > winWidth) {
      left = winWidth - ttWidth - 40;
      }

      $('div.rp-child', this).css({top:top, left:left});

      }).mouseleave(function() {
      $('div.rp-child', this).hide();
      });
      });

      function showrecentposts(json) {
      var entry = json.feed.entry;
      for (var i = 0; i < numposts; i++) {
      var posturl;
      for (var j=0; j < entry[i].link.length; j++) {
      if (entry[i].link[j].rel == 'alternate') {
      posturl = entry[i].link[j].href;
      break;
      }
      }

      if ("content" in entry[i]) {
      var postcontent = entry[i].content.$t;
      } else if ("summary" in entry[i]) {
      var postcontent = entry[i].summary.$t;
      } else {
      var postcontent = "";
      }

      var re = /<\S[^>]*>/g;
      postcontent = postcontent.replace(re, "");
      if (postcontent.length > numchar) {
      postcontent = postcontent.substring(0,numchar) + '...';
      }

      var poststitle = entry[i].title.$t;

      if ("media$thumbnail" in entry[i]) {
      postimg = entry[i].media$thumbnail.url
      } else {
      postimg = pBlank
      }

      document.write('<div class="rp-item"><a href="' + posturl + '" target="new"><img src="' + postimg + '" alt="thumb" /></a>');
      document.write('<div class="rp-child hidden"><h4>' + poststitle + '</h4>');
      document.write(postcontent + '</div>');
      document.write('</div>');
      }
      }
      document.write('<div id="post-gallery"><h2>' + rpTitle + '</h2><sc' + 'ript src="' + blogURL + '/feeds/posts/default?max-results=' + numposts + '&orderby=published&alt=json-in-script&callback=showrecentposts"></sc' + 'ript><div style="clear:both;"></div></div>');

      var i = 0, int=0;
      $(window).bind("load", function() {
      var int = setInterval("doThis(i)",400);
      });

      function doThis() {
      var imgs = $('div.rp-item img').length;
      if (i >= imgs) {clearInterval(int);}
      $('div.rp-item img:hidden').eq(0).fadeIn(400);
      i++;
      }
      </script>


      Semoga berhasil...

      Hapus

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...