Widget Posting Terbaru/Recent Post Dengan Gambar Thumbnail Dan Tooltip - Dewa Blogger

Halaman

    Social Items

Buy Now
/ / / / / Widget Posting Terbaru/Recent Post Dengan Gambar Thumbnail Dan Tooltip
Recent Post Widget with Mini Thumbnail and Tooltip Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan Tooltip

Widget recent post dengan gambar mini mungkin sudah biasa Anda temukan. Tapi mungkin Anda mau mencoba yang satu ini. Widget recent post dengan thumbnail dan tooltip:

Lihat Demo

Untuk membuatnya, pertama-tama masuk ke halaman tata letak dengan mengeklik sajian Tata Letak:

Recent Post Widget with Mini Thumbnail and Tooltip Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan Tooltip
Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, lalu salin semua instruksi ini dan letakkan di dalam formulirnya:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><style scoped="scoped"> #mini-gallery {   width:380px; /* Tentukan lebar yang sempurna sesuka hati atau buang saja deklarasi ini */   margin:0 auto;   font:normal normal 11px/normal Verdana,Arial,Sans-Serif;   color:#666;   padding:8px;   background-color:#222;   -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);   -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);   box-shadow:0 1px 3px rgba(0,0,0,.4);   -webkit-border-radius:4px;   -moz-border-radius:4px;   border-radius:4px; }  #mini-gallery h2 {   font:normal normal 14px/normal Impact,"Arial Narrow",Arial,Sans-Serif;   color:#999;   text-shadow:0 1px 0 black;   text-transform:uppercase;   margin:2px;   padding:7px 14px;   background-color:#3c3c3c; }  #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;   top:95%;   left:95%;   z-index:1000;   width:200px;   background-color:white;   border-top:4px solid #3399ff;   -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);   padding:10px 15px;   overflow:hidden;   word-wrap:break-word;   display:none; }  #mini-gallery .rp-item .rp-child h4 {   font-size:12px;   margin:0 0 5px;   color:#2473A8; }  #mini-gallery .rp-item:hover .hidden {display:block} </style> <script> var widgetTitle = "Artikel Terbaru", // Tentukan judul widget     numPosts = 20, // Tentukan jumlah thumbnail/posting     numChars = 300, // Tentukan jumlah abjad pada deskripsi tooltip     tooltipFadeSpeed = 200, // Tentukan kecepatan pengaruh .fadeIn() ketika tooltip tampil     pictureBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // Thumbnail cadangan kalau posting yang tampil tidak mempunyai gambar     blogUrl = "http://nama_blog.blogspot.com"; // Alamat blogmu </script> <script src="//cdn.rawgit.com/tovic/dte-project/123eba4c603413fa3e6a8446da21fcc545df0ee0/rp-mini-gallery.js"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda. Tentukan judul widget pada variabel widgetTitle, tentukan jumlah posting yang ditampilkan (gambar mini) pada variabel numPosts, tentukan juga jumlah karakter/ringkasan artikel yang akan muncul pada variabel numChars.

Kode yang Saya beri garis bawah yaitu jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, buang instruksi itu dari widget.

Klik Simpan dan lihat hasilnya.


Sumber https://www.dte.web.id/

Widget Posting Terbaru/Recent Post Dengan Gambar Thumbnail Dan Tooltip

Recent Post Widget with Mini Thumbnail and Tooltip Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan Tooltip

Widget recent post dengan gambar mini mungkin sudah biasa Anda temukan. Tapi mungkin Anda mau mencoba yang satu ini. Widget recent post dengan thumbnail dan tooltip:

Lihat Demo

Untuk membuatnya, pertama-tama masuk ke halaman tata letak dengan mengeklik sajian Tata Letak:

Recent Post Widget with Mini Thumbnail and Tooltip Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan Tooltip
Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, lalu salin semua instruksi ini dan letakkan di dalam formulirnya:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><style scoped="scoped"> #mini-gallery {   width:380px; /* Tentukan lebar yang sempurna sesuka hati atau buang saja deklarasi ini */   margin:0 auto;   font:normal normal 11px/normal Verdana,Arial,Sans-Serif;   color:#666;   padding:8px;   background-color:#222;   -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);   -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);   box-shadow:0 1px 3px rgba(0,0,0,.4);   -webkit-border-radius:4px;   -moz-border-radius:4px;   border-radius:4px; }  #mini-gallery h2 {   font:normal normal 14px/normal Impact,"Arial Narrow",Arial,Sans-Serif;   color:#999;   text-shadow:0 1px 0 black;   text-transform:uppercase;   margin:2px;   padding:7px 14px;   background-color:#3c3c3c; }  #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;   top:95%;   left:95%;   z-index:1000;   width:200px;   background-color:white;   border-top:4px solid #3399ff;   -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);   padding:10px 15px;   overflow:hidden;   word-wrap:break-word;   display:none; }  #mini-gallery .rp-item .rp-child h4 {   font-size:12px;   margin:0 0 5px;   color:#2473A8; }  #mini-gallery .rp-item:hover .hidden {display:block} </style> <script> var widgetTitle = "Artikel Terbaru", // Tentukan judul widget     numPosts = 20, // Tentukan jumlah thumbnail/posting     numChars = 300, // Tentukan jumlah abjad pada deskripsi tooltip     tooltipFadeSpeed = 200, // Tentukan kecepatan pengaruh .fadeIn() ketika tooltip tampil     pictureBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // Thumbnail cadangan kalau posting yang tampil tidak mempunyai gambar     blogUrl = "http://nama_blog.blogspot.com"; // Alamat blogmu </script> <script src="//cdn.rawgit.com/tovic/dte-project/123eba4c603413fa3e6a8446da21fcc545df0ee0/rp-mini-gallery.js"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda. Tentukan judul widget pada variabel widgetTitle, tentukan jumlah posting yang ditampilkan (gambar mini) pada variabel numPosts, tentukan juga jumlah karakter/ringkasan artikel yang akan muncul pada variabel numChars.

Kode yang Saya beri garis bawah yaitu jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, buang instruksi itu dari widget.

Klik Simpan dan lihat hasilnya.


Sumber https://www.dte.web.id/
Blogger Javascript jQuery Widget
Langganan: Posting Komentar (Atom)