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.

Artikel Terkait

  • Widget Popular Posts Style Sliding Galeri
    Banyak Blogger menyediakan tutorial untuk menyesuaikan widget Populer post standar Blogger dengan CSS. Menurut pendapat saya, widget Popular post dapat membantu pembaca untuk memilih artikel yang paling tren di blog tertentu. Selain itu, widget Populer post juga dapat disesuaikan agar lebih menarik perhatian dari para pengunjung. Jadi, di sin…
  • Trik untuk memotong Snippet Popular Post
    Kebanyakan snippet atau deskripsi populer default blogger terlalu panjang, sehingga membuat widget di sidebar tampak tidak rapi untuk tampilan dan memakan ruang yang begitu lebih. trik ini juga bisa digunakan untuk mempercantik widget populer post hasil dari kreasi sobat sendiri sebagai tambahan css agar widget populer post sobat tambah keren da…
  • Membuat Floating bar dengan jquery dan CSS
    Salah satu teman berkomentar di blog saya menanyakan bagaimana menerapkan sebuah floating bar di blog. Apakah Anda tahu apa floating bar di blog dan bagaimana membuat yang seperti itu? . Demo Lihat live demo sebagai Beberapa contoh yang baik lainnya untuk floating bar dapat ditemukan di Meebo dan Wibiya, saya pikir banyak dari Anda yang t…
  • Widget Recent Post Thumbnail untuk blogger
    Recent Posts dengan miniatur gambar - widget ini memudahkan pengunjung blog anda untuk menemukan postingan baru/terupdate di blog anda. membuatnya juga mudah seperti memasang Random Post yang pernah saya posting. Demo caranya adalah sebagai berikut: Langkah 1: Tambahkan kode berikut sebelum tag ]]></b:skin> dalam template …
  • Widget popular post readmore
    Popular posts pasti selalu terpasang dalam blog, sebab dengan widget popular post inilah kita bisa menunjukkan pada pengujung untuk membaca artikel yang banyak di baca. Dari itu kita bisa memanfaatkan PopularPost Widget biasa berkode PopularPosts1 dalam template blogger untuk dimodifikasi dengan baik dan menarik. Salah satu yang bisa dilakukan…
  • Floating Social Bookmark Berefek Easing
    Pagi sobat blogger, bangun pagi semangat lagi. beberapa hari ini saya terus memposting ulang artikel di blog ini untuk memperbaiki artikel lama yang kurang greget. pagi ini saya akan memposting trik dan cara membuat sosial bookmark melayang untuk blogger, untuk demo dann penampakannya bisa sobat lihat di screnshoot berikut ini: Demo Beri…

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
Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

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...