jika anda anda ingin menampilkan posting terbaru pada halaman selain home widget posting terbaru dengan tooltips mungkin sangat cocok bagi anda karena dengan efek tooltips ketika mouse diarahkan dapat membuat bog anda lebih menarik

Widget Posting Terbaru dengan Tooltips - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

jika anda anda ingin menampilkan posting terbaru pada halaman selain home widget posting terbaru dengan tooltips mungkin sangat cocok bagi anda karena dengan efek tooltips ketika mouse diarahkan dapat membuat bog anda lebih menarik

Widget Posting Terbaru dengan Tooltips

Widget Posting Terbaru dengan Tooltips

Bagi Pengguna blogger Widget Recent Post/ Posting Terbaru bukan merupakan hal yang baru. Biasanya widget seperti ini yang diletakkan di sidebar agar pada saat membuka postingan pengunjung bisa melihat artikel apa yang baru dari blog kita. Tidak seperti widget recent post yang biasa kali ini yaitu Widget Posting Terbaru dengan Tooltips dalam bentuk gambar thumbnail. Scriptnya dibuat oleh mas Taufik ~ DTE. Nah langsung saja itu langkah di bawah untuk cara pemasangan.

PEMASANGAN PADA BLOGSPOT

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:


Tata letak Blogger
Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#mini-gallery {
  width:380px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
  margin:0px auto;
  font:normal 11px Verdana,Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#7E7E7E;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

#mini-gallery h2 {
  font:normal 14px Impact,Arial,Sans-Serif;
  color:#1CAA01;
  text-shadow:0px 1px 0px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#292929;
}

#mini-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}

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

#mini-gallery .rp-item .rp-child {
  position:absolute;
  top:95%;
  left:95%;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:4px solid #00C200;
  -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
}

#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#09AC0F;
}

#mini-gallery .rp-item:hover .hidden {display:block;}
</style>
<script type="text/javascript">
var rpTitle     = "Artikel Terbaru", // Tentukan judul widget
    numposts    = 20,                // Tentukan jumlah thumbnail/posting
    numchar     = 300,               // Tentukan jumlah karakter pada deskripsi tooltip
    rcFadeSpeed = 600,               // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
    pBlank      = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
    blogURL     = "http://mkr-site.blogspot.com"; // Alamat blogmu
</script>
<script src="https://ivyth.googlecode.com/svn/js/rp-m-gallery-dte.js" type="text/javascript"></script>

Ganti URL http://mkr-site.blogspot.com dengan alamat blog Anda.
rpTitle untuk judul dari widget,
Tentukan jumlah posting yang ditampilkan (gambar mini) pada variabel numposts, tentukan juga jumlah karakter/ringkasan artikel yang akan muncul pada variabel numchar.
Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, buang kode itu dari widget.
Klik Simpan dan lihat hasilnya.

Sumber Script : DTE ~ Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan Tooltip
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

7 comments:

  1. keren gan 8-)
    thank's infonya

    BalasHapus
  2. Kereeen gan artikel nya..mantaap.. :))

    BalasHapus
  3. hi admin. saya mencoba mengubah besar thumbnail.
    semakin saya besarkan kenapa gambar semakin blur?
    ada cara supaya thumbnail tidak blur ga?
    terima kasih.

    BalasHapus
    Balasan
    1. wah ko script yang sekarang belum bisa..
      karena gambar yang dimuat tidak diberikan opsi untuk merubah ukuran gambar..
      nanti klo ada waktu saya ganti JSnya dengan menambahkan opsi memperbesar ukuran gambar..

      Hapus
  4. jumlah postnya bisa dirubah tidak pak ?

    BalasHapus
  5. nais info om
    http://nyzhar.blospot.com/

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP