Modifikasi Recent Posts Style sliding Tooltip

Modifikasi Recent Posts Style sliding Tooltip

Assalamualaikum warahmatullahi wabarakatuh.

Pada kesempatan yang baik ini kembali saya beusaha berbagi sedikit pengetahuan seputar dunia blogging. Kemarin baru saja saya share :  Related Post Dengan Effects Tooltip Sederhana   Naaah,,, pada posts sekarang ini masih membahas seputar tutorial blogging. Ada salah satu Sahabat Blogging saya  Mangs Aduls  kebetulan yang mereques tutorial ini. Karena saya bingung untuk memberi nama widget ini. Maka saya beri nama judul artikel ini, Modifikasi Recent Posts Style sliding Tooltip, Sesuai dengan hasilnya nanti. Scripts pada posts berikut ini saya dapati dari beberapa rekan blogger, dan sedikit saya poles dan di utak atik agar penampilanya sedikit nyentrik dan cantik. Bagi semua sobat yang melirik atau tertarik silahkan dengan senang hati di persilahkan simak dengan baik.

Baca juga posts Lainya :  Semua Label Widget

Widget Artikel Terbaru :

Banyak sekali jenis dan style dari widget recent posts atau widget artikel terbaru, Seperti yang akan saya share pada kesempatan ini. Tanpa di rekayasa sebetulnya widget recent posts ini sudah tersedia dari blogger nya namun dengan tampilan yang standar saja. Naaah dengan yang saya publikasikan ini sudah saya Modifikasi widget tersebut dengan di berinya sentuhan Effects sliding plus tampilan tooltip yang akan menampilkan gambar postingan juga diskripsi artikel pada paragraf awal. Seperti DEMO di bawah ini kira kira contoh penampilan pada halaman blog nantinya :

DEMO

Gimana sobat sudah lihat Demo nya..? nah di bawah ini jika anda semua berminat memasang Recent Posts pada blog anda silahkan simak dengan teliti. Namun saran saya Pilih satu saja widget Recent Posts di blog anda. Jika anda tertarik dengan style yang saya bagikan ini alangkah baiknya, widget Recent posts yang lamanya di hapus saja. Dan jangan lupa back up Template dulu untuk menjaga jaga ada kesalahan dalam penerapan code dalam edit Template nya. Silahkan baca selengkapnya cara penerapanya :

Cara Pemasangan :

1. Masuk Dashboard jangan lupapa sign in
2. Pilih template lalu pilih edite template
3. Tekan CTRL + F Untuk memudahkan pencarian
4. Cari kode :  ]]></b:skin>  atau kode :  </style>
5. Setelah ketemu copy kode dibawah ini dan paste tepat di atas
6. Pada kode :  ]]></b:skin>  atau kode :  </style>

/* Recent posts */
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghIsc-sj2p79H6h51bVA7hhOHBfftHTDkV2zyhdJ55NPZgEPF2wGRwRNVoUl-rBTEAxnWfjThDU82Hw_b-RcGds2I4K9W2JcZ8hK9gzfZnhbo-NTpgxxZV0q8VfuLW9Pf16HWKpK1Lxzx8/s1600/loading-karrysta.gif') no-repeat 50% 50%;  width:79px;  height:73px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:mediumaquamarine;  border-bottom: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:#ff8c00;}
#post-gallery .rp-item:hover .hidden {display:block;}

Silahkan sesuaikan dengan desain template anda, Baik lebar dan tinggi nya ataupun tampilan warna nya. Jika anda memerlukan kode warna yang simpel dan instan klik saja :  KODE WARNA

Pemasangan code Java scripts :

Pada titik ini sengaja saya terapkan code javascripts nya di luar edite template, Maksudnya agar anda lebih mudah dan leluasa dimana saja menaruh widget Recent posts ini penempatanya nya nanti. Maka copy code di bawah ini dan paste kan pada page elements atau pada halaman tata letak/layout, dengan cara add widget baru, lalu pilih Html dan paste kan code javascript di bawah ini di add widget pada colom HTML :

<script type="text/javascript">
var rpTitle     = "Recent Posts",       // Widget Title
    numposts    = 6,      // Number of Posts to show
    numchar     = 200,      // Number of Characters to be displayed
    rcFadeSpeed = 600,      // Speed
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKmO_wwdVxwUQSRPnZDanJvPm_QYEIosmCasMdYI0BGV7Uh9TbxG0Tep_4M-SJymTBAIXxi2BGRrTfiAXAEoJvfWNrq6F44UxwgaI2j0DN-b61NrOm6JIFuzLckA1XaaiPwoAD7TJqZMg_/s1600/no-image-karrysta.jpg",      // If No Image
    blogURL     = "http://karristaent.blogspot.com";       // Your Blog URL
</script>
<script src="https://googledrive.com/host/0B084yB0qfQg-YzVxVkROUF9aM1k" type="text/javascript"></script>

Keterangan :

Ganti Url : (http://karristaent.blogspot.com) dengan Url blog anda. sesuaikan juga numposts dengan keinginan yang akan anda tampilkan contohnya saya gunakan 6 tayangan artikel. Sesuaikan juga yang lainya seperti numchar, contoh 200. artinya 200 post baru bisa bergantian tampilnya, atau rcFadeSpeed = 600, kecepatan loading dalam membuka tampilan posts pada widget ini. Silahkan anda berexpresi sendiri mendesain widget Recent Posts Style sliding Tooltip ini agar lebih unik cantik dan campernik. Save widget yang anda buat baru tadi dan jangan lupa setiap penambahan widget baru pada elements blog anda selalu menghapus kode penyumbang error itu, di bawah inikode yang harus anda hapus :

<b:include name='quickedit'/>

Akhirnya sekian yang saya haturkan ini, semoga walau kemasan yang sederhana semoga saja bisa bermanfaat buat anda semua dalam menghias dan mendesain perlengkapan blog anda. Mohon maaf jika terdapat kesalahan baik dari isi atau tulisan yang saya publikasikan ini. Terima kasih atas kunjungan dan komentarnya. Tetap semangat dan salam Blogging :)