Artikel Terbaru Dengan Tooltip & Thumbnail

Artikel Terbaru Dengan Tooltip & Thumbnail

Sudah banyak sekali widget artikel terbaru yang beredar di kalangan blogger. Namun kali ini kita akan membuatnya beda. Dengan penambahan Tooltip disertai dengan Thumbnail postingan yang imut imut akan membuat widget ini semakin keren.

• Demo

Variasi dalam membangun blog itu penting! Sekali lagi, PENTING! Jika blog anda hanya memiliki sedikit "hiasan" maka tidak menutup kemungkinan pengunjung akan bosan singgah di blog anda. Maka daripada itu sudah saatnya anda mengobrak abrik blog untuk mempercantik tampilannya :) Saya sarankan gunakan template yang SEO serta desain yang elegan DISINI


Baiklah ini dia  Cara Membuat Artikel Terbaru Dengan Tooltip & Thumbnail
1. Pastikan anda sudah login ke blog anda
2. Tata Letak
3. Add Gadget
4. HTML/Javascript
5. Salin kode berikut

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style scoped="scoped">
#mini-gallery {
  width:380px; /* Tentukan lebar yang tepat 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,R0lGODlhMAAwAPcBAPm2AP///7Ozs/v7+9bW1uHh4fLy8rq6uoGBgTQ0NAEBARsbG8TExJeXl/39/VRUVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBQABACwAAAAAMAAwAAAI/wAdCBxIsKDBgwgTKlzIsKHDhxAjSpxIsaLFixgzatzIkQECBhwjIhhZsICBkAIJHCg4EgFBAjBRGhgpgGDLgQZgEkDpoOVOgTdTwizA88DIBgODFtDJU2CDkSt7knSgk2hTAgienhz5wMHSmAO/Wo1IoEEDkAMFQDW4FKdOAmMhMjBr9idWtAnfgp1Il27cvG//Sizbt6HYjXMb/GQoGGOBqE1R6oV58iEBBgcya4Y4eW9DzaAhN9TJoCpnzKEj82zs2OFhja8X6q1cMedbh5Mr5lbYVuDXoRN/wx04vCTTsMAlxqYK/LhO2jKdg/0d2TTzxdZDUhe6eHvI7Me58xwMf70k64sG/pJXfXDpefbw48ufT7++/fv4BQYEACH5BAUFAAEALAgACAAYABIAAAiAAAMIHEiwYAACBhMqbBCAIcEDDBRGVDiwAQIECRtoLOhQIIOLGA1q7JgQ5IGEDDYS7HgAJMWGDSYSLABSZsaGBQRabOhSYIEDBxBWVFmwZU6BBIACPVqggdCXSJVCNAA14U+pVRUmPZlVoYGnXcN6JUC2LNiqZs2KLVCWQVmxAQEAIfkEBQUAAQAsCQAIAB0ADgAACIkAAwgcSHAggQYFEypcKBBhQgIMBxaASLCBRYICIhI8cIBiwwAOA1AMyZDjgQIDLYYkqZGAyZQKWTJkwHHkRQMgRRbEqbCASZwIER74OPAAAgRDCRBAOZCmAI9NCTI4evSkUqU8DQyNeJDqUYNXCzDV6BUBVJFXzy40iiBjT6VjNTaIm1CsRo0BAQAh+QQFBQABACwPAAgAGQARAAAIgQADCBwYoMABgggTKgzA4AADhA8XGiiA8IBFgg0yLiRAoOLFgRo3cjQw0OJBkA0iJizAsaNAkwIZhFwYoCXFADALNAiwk6ZAmzg/zkTo8ifHmwQJ9Ky5NCEBpAqR7hTgk2bPplUhxszq8wBJrmDDJkRAtiwClWDNmhUbgOwDswwCAgAh+QQFBQABACwWAAgAEgAYAAAIggADMCgQoKDBgwgJMEAYgABBhgIZLDTI4MABiBEnBihg8SJEiRo7EsAIsiCBjhgzBjDQ8eFHiQ0FHNAosEGDlAcMHLTZgCZGmwGApgwa9ObQnUaPHnSptGnTpClvSnWKwGCDkU6bHmB69AACBAKofv3qEyKBBmMRQMWZ1qNSAWQDBAQAIfkEBQUAAQAsFgAIABIAHgAACJkAAxAwEKCgwYMIBRJIyLAggYcHCTBg0PDhQoMTLya0aFAixYoQC078yJBjgJENHYbMGPHAgQIMC2gs4NKlxoYMah4g2VDny5QdbQJFOHCoUaMNkioVCLRBAKdQnaZcmvSo1YMErX48cNVgg5sNCwg4OJbhAQQwBVZt2ACB24MHnIINUMAtAp5Az761apfrUQJ2r9rNetQlw4AAIfkEBQUAAQAsFwAJABEAHwAACIwAAwgcGKCAAYIIExIgkLChgYUNIy4sEJFggYUMKwq8CFHjxo4DOXoUiJEAxYocMWosmVEjx5MjC8AcSRPhgZs4GWjEyfNAxZ4HdNYcSpNAgwZCPR49WnPp0oY6Wwo8mlSgT6YDdTYQiKBrgIMkI3ZFQBBrwrEDt1ZES5PtVLVnETxQ2NCtRwYIqmoMCAAh+QQFBQABACwQABYAGAASAAAIfQADCBxIsGAAAggTEjBgsOFAhQodOkzIIGEBiRgzYiSgMeOBAxw7GvxI8qLIgQYYkDzAQCSBBiYLrAx5EMGBhg0MEvhoMkADBAhyEizQoChGBkARmBQagAFTh0lvOizacmRSgk99GjWYtCrGrAKvYkVQ0GtZqQNzgj1Js2NAACH5BAUFAAEALAoAGgAdAA4AAAiJAAMIHEiwoMEABQ4SLNBAocECBAgkPHgAAYIDDglG3GhAo8WPGTVujCiwwUcEDQhkLIBx4EiWJ1smZGCQwIEDNAdCVFkRgQCCPwNgbEA0gIGbByY+LKgyQEOnUAPYvBly4FOCRQUyuNm0alSoV1lSDVm0K9GrAba2rIoWrUulDrtiDeqV7dqMAQEAIfkEBQUAAQAsCAAXABkAEQAACIAAGSAYSBBBgIMIEyo8WLDgwocJBRJ8MBCixYsYMRo4kLEjg44PG4CEKCChgAIYCUBs0EDlwZYLCxCYmdAlR4QsRQY4wDOAzJkGEgZVyBIhz5s/XVpk+XFnz4MzCaB8yKCo0adQaS5NeLSm1oVWr95EOBViU4QMDpwdqfBA2YQBAQAh+QQFBQABACwJABAAEQAYAAAIdwAJIEBwIIDBgwgPHhg4kEHChwEYDmxAACJCBhIRWEwoYGDBjRxBihxJsqTJkyg3MmjQoCRLliBfvgS5siVCAx8fsnR4kMGBAxUJCDVYIGGBnwcMBBBaESLSpkwhEkB6MOpDpEUNWk34s6nWoQ8LeP06FqTYAAEBACH5BAUFAAEALAgACgAOAB0AAAiKAAMIHBiAwQGCCAciQNAgIcKFCAg4HCgA4kSFCw9eZGCRYEOCED96lBigAAIBBFGKLDCRwEeRExkIlHkxgAGNNVs22MkTpsCePRO63BmAZ86jCEleJHDggFKEBZpKdWhQKgMDQq0OLEAAq8CoTgkSGMtSoNeBBsYSKOtQLduEXMfWVJtTbk4DbwMCADs=') 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 karakter pada deskripsi tooltip
    tooltipFadeSpeed = 200, // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
    pictureBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
    blogUrl = "http://nama_blog.blogspot.com"; // Alamat blogmu
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/rp-mini-gallery.js"></script>

CATATAN :
Yang saya garis bawahi adalah jQuery, jika sudah memiliki jQuery di template. Buang kode yang saya garis bawahi tersebut!
Lalu? Modifikasi sesuai selera anda :)


Sumber : http://www.dte.web.id/2012/02/recent-post-widget-with-mini-thumbnail.html

Tweet