10.6.14
17
Membuat Artikel Terbaru Desain Gallery Dan Tooltip - Layaknya semua blog yang pada umumnya sudah pasti akan terdapat widget Artikel Terbaru (Popular Post) pada sidebar. Widget Artikel Terbaru atau yang kita kenal sebagai POPULAR POST merupakan sebuah daftar sekumpulan menu blog yang menampilkan link artikel yang telah lampau maupun artikel terbaru, sehingga saat pengunjung berada pada artikel anda yang sebelumnya, mereka akan lebih mudah menemukan artikel anda yang lain dalam widget ini.

Tampilan default sudah cukup untuk melengkapi widget kosong pada sidebar blog Anda dengan title Popular Post, maka pada sidebar blog Anda akan menampilkan 10 daftar Artikel yang terdapat pada blog Anda. Untuk postingan kali ini SAHABAT BLOGGER 77 akan memberikan cara termudah membuat artikel terbaru dengan desain gallery dan tooltip seperti ilustrasi gambar dibawah ini

Post Thumbanail gallery image


Cari Artikel.? baca - Desain Tampilan Daftar Isi Model Tab


Widget popular post kali ini, bisa terbilang masih baru karena belum begitu banyak rekan-rekan blogger yang menampilkan widget seperti ini, namun desain dan fungsinya sama, dan agar lebih menarik dan terlihat keren, tampilan widget ini sudah saya modifikasi secara total, sehingga daftar artikel terbaru pada sidebar blog Anda akan bergaya Desain Gallery dengan tampilan tooltip seperti ini




DEMO SHOW



Untuk menempatkan desain tampilan widget artikel terbaru ini pada blog Anda, cukup ke-tata letak, pilih HTML/JavaScript lalu copy kode dibawah ini, namun sebelumnya perhatikan kode yang saya beri warna Merah, jika pada template Anda sudah mempunyai jQuery yang sama, maka hapus saja kode tersebut, selanjutnya pastekan pada area halaman gadget


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style popPost="mini-gallery">
/*Desain Artikel Terbaru (Popular Post) dengan gambar dan tooltip
css design: miniImage="popPost-thumbanail","sahabat blogger 77"
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani*/
#mini-gallery {
  width:300px;margin:0 auto;
  font:normal normal 11px/normal Verdana,Arial,Sans-Serif;
  color:#666;padding:8px;
  background:#222;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;}

#mini-gallery h2 {
  font:normal normal 14px/14px Impact;
  color:#fff;
  text-transform:uppercase;
  margin:2px;padding:7px 14px;
  background-color:#080;}

#mini-gallery .rp-item {
  float:left;display:inline;
  position:relative;
  margin:2px;padding:0;
  background:white url('data:image/gif;base64,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') no-repeat 50% 50%;
  width:72px;height:72px;}

#mini-gallery .rp-item img {
  width:72px;height:72px;
  border:none !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;display:none;}

#mini-gallery .rp-item .rp-child {
  position:absolute;margin:0 0 0 10px;
  top:95%;left:95%;z-index:1000;
  width:200px;background:#333;
  border-left:7px solid #080;
  border-top:3px double #333;
  padding:10px 15px;overflow:hidden;
  word-wrap:break-word;
  display:none;color:#fff;}

#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  border-bottom:3.5px dotted #ccc;
  padding-bottom:2.5px;text-align:center;
  margin:0 0 5px;color:orange;}
#mini-gallery .rp-item:hover .hidden {display:block}
</style>


Sampai tahap ini, pekerjaan Anda belum selesai. Sebagai tambahan saya sudah meringkas beberapa perintah CSS dan menggantikan fungsinya dengan perintah script variable seperti berikut

<script>
var widgetTitle = "Daftar Artikel",
numPosts = 20,
numChars = 300,
tooltipFadeSpeed = 200,
    pictureBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    blogUrl = "http://sahabatblogger77.blogspot.com";</script>


KETERANGAN
  1. var widgetTitle - Untuk menentukan judul widget
  2. numPosts - Tentukan berapa jumlah artikel yang akan Anda tampilkan
  3. numChars - Untuk menentukan jumlah kata descripsi pada tooltip
  4. tooltipFadeSpeed - Atur kecepatan saat tooltip akan tampil
  5. pictureBlank - Untuk menggantikan jika postingan Anda tidak memiliki gambar
  6. blogUrl - Hapus lalu ganti dengan URL-blog Anda


Hmmmm...!! saatnya cuci tangan karena semua pekerjaan Anda sudah selesai. Dan mudah-mudahan Artikel Terbaru Desain Gallery Dan Tooltip kali ini dapat diterima oleh mas +Aldino Sya, karena atas reques beliau yang ingin dibuatkan widget popular post yang berbeda, maaf ya permintaannya membuat mas aldino lama menunggu, hehe..!!
Dan akhir kata saya ucapkan Terimakasih...

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Artikel Terbaru Desain Gallery Dan Tooltip
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

17 komentar

  1. jadi tambah keren ya artikel terbaru nya kalau di desain dengan tooltip, lumayan banyak juga nih kode nya, jadi penasaran pengen cobain ;)

    BalasHapus
  2. lihat demonya benar-benar berbeda dengan yang lain, sangat menarik buat saya praktekan... ijin kopi kodenya yia bos...

    BalasHapus
    Balasan
    1. cuma menghilangkan descripsinya saja kok bos, lalu thumbanail gambar saya buat seperti desain gallery foto

      Hapus
  3. jadi lebih mantap nih desain widget artikel terbarunya yambak

    BalasHapus
  4. makasi sbelumnya Ya Mba Dev..!, jd ngrepotin..! :))
    skrip tambahnnya disimpan di mana Mba..yg pendek.. td sy gabung di tata letak tdk muncul..sy pisah jg tdk muncul..mohon panduannya

    BalasHapus
    Balasan
    1. sama-sama mas,
      benar mas, kode script diatas digabung aja, letakkan dibawah kode </style>

      kalau belum berhasil coba gunakan script ini

      <script>
      var widgetTitle = "Daftar Artikel",
      numPosts = 20,
      numChars = 300,
      tooltipFadeSpeed = 200,
      pictureBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
      blogUrl = "URL-blog Anda";</script>
      <script src="http://dte-project.googlecode.com/svn/trunk/rp-mini-gallery.js"></script>

      Hapus
    2. model judulnya sj yg muncul Mba..!, apa yg salah ya?..artikel POPnya tdk kliatan..apa mesti ditambahkan widget POP ya Mba..!,,

      Hapus
    3. jQuery ganda, mungkin ditemplate mas sudah menggunakan jquery yang sama, jadi jquery diats dihapus saja

      Hapus
    4. sdh diapus tp ttp cuma judul yg kliatan..Mba Dev..!, jgn bosan2 ya.. ;(

      Hapus
  5. wahh tutornya bagus banget mbakk

    BalasHapus
  6. jadi hemat tempat yah sob

    BalasHapus
  7. saya juga pernah membuat jenis artikel terbaru yang seperti ini mbak, cuma tampilan serta beban kapasitasnya berat bauangeeet, tapi kalau yang mbak beri sepertinya bisa dicoba karena ringan ketika saya lihat (h)

    BalasHapus
    Balasan
    1. jangan menggunakan script pengaturan label-label pada artikel, singkirkan perintah label agar setiap artikel yang terbit langsung didata dalam kotak,

      karena kalau menggunakan label, maka akan terjadi mis,karena artikel kita tidak selalu menggunakan satu label satu artikel

      Hapus
  8. Waah, kerennya. Namun blog saya masih belum diisi widget artikel terbaru karena ada Rss. hmm :)

    BalasHapus
    Balasan
    1. yidak masalah mas,karena script diatas mengunakan perhitungan artikel terbaru yang sudah dipublikasikan,
      blog saya juga pakai RSS kok

      Hapus
  9. Boleh tuh dicoba kodenya...neng Devy pancen maknyuss...hihihi

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK