Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Modifikasi Widget Recent Post Efek Tooltip Pada Blog

Widget Recent Post Tooltip Blogger Modifikasi Widget Recent Post Efek Tooltip Pada Blog – pada tutorial kali ini kita akan kembali membahas kaitannya mengenai efek tooltip pada widget blog seperti halnya efek yang nampak pada widget popular post tooltip yang sudah pernah saya share pada tutorial sebelumnya. Widget recent post atau artikel terbaru ini secara default hanya menampilkan thumbnail image yang berukuran kecil dan akan menampilkan ringkasan atau cuplikan dari isi artikel terbaru tersebut saat tersentuh kursor atau hover. Kaitannya dengan desain blog, terdapat banyak sekali widget recent post atau artikel terbaru dengan berbagai style efek, dan salah satunya pada widget recent post pada tutorial dibawah. Untuk membuat blog agar semenarik mungkin memang banyak kode yang perlu di gunakan dan dengan manipulasi kode script itulah bisa dihasilkan desain blog yang maksimal. Dari pada terlalu lama membayangkan atau hanya melihat gambar di atas, berikut tutorial untuk Modifikasi Widget Recent Post Efek Tooltip Pada Blog agar lebih tahu hasilnya secara jelas.

1. Login ke akun blogger.
2. Selanjutnya pada template pilih Edit HTML.
3. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>
#post-gallery { width:304px; margin:0px auto; font:11px verdana; color:#494848; padding:8px; background-color:darkgreen; }
#post-gallery h2 { font:20px Arial; font-weight: bold; color:darkgreen; border:1px solid #00ff00; text-transform:uppercase; margin:2px 2px 2px; padding:7px 14px; background-color:#52e052; text-align: center; }
#post-gallery .rp-item { float:left; display:inline; position:relative; margin:2px; padding:0px; background:#fff url('https://lh4.googleusercontent.com/-50TxD3dJlDM/UhmKjruw42I/AAAAAAAAGBw/dvfc_c_jVds/h120/loading.gif') no-repeat 50% 50%; width:72px; height:72px; }
#post-gallery .rp-item img { width:72px; height:72px; margin:0px !important; padding:0px !important; background:transparent !important; display:none; }
#post-gallery .rp-item .rp-child { position:relative; top:10%!important; left:10%!important; z-index:1000; width:200px; background-color:#222; border:2px solid #555; box-shadow:5px 5px 5px #52e052; color:#fff; 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:#52e052; }
#post-gallery .rp-item:hover .hidden {display:block;}
4. Copy kode berikut ini lalu pasang ke widget HTML/Javascript.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/recent-post-gallery.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Recent Post",       // Judul Widget
numposts    = 8,      // Post yang di tampilkan
numchar     = 200,      // Karakter pada deskripsi tooltip
rcFadeSpeed = 600,
pBlank      = "https://lh3.googleusercontent.com/-bX9QkKivPsU/UhmMCRTYNjI/AAAAAAAAGB8/mzEdEXFtVPk/h120/no-image.png",
blogURL     = "http://mas-andes.blogspot.com";       // URL Blog anda
</script>
Keterangan:
Ganti http://mas-andes.blogspot.com dengan URL blog anda.

5. Terakhir tinggal klik Simpan dan lihat hasilnya.

Demikian mengenai tata cara untuk Modifikasi Widget Recent Post Efek Tooltip Pada Blog dengan sederhana.

Berlangganan artikel via email

58 Response to "Modifikasi Widget Recent Post Efek Tooltip Pada Blog"

avatar
Anonymous

udah keluar posting baru lagi nih mas Andes mengenai modifikasi widget recent post efek tooltip, bikin tampilan recent postnya lebih hidup dan menarik, keren mas :)

Balas

Ilmu baru lagi buat saya nih Mas Andes, bagus dan menarik
di praktekin lagi nih Mas, Recent Posts nya, kalau script dari
Mas Andes, saya sudah yakin ke valid danya

oot: Cuma yang saya, masih dalam problem tentang popular posts
Yang pakai gambar posts itu lho Mas, di cek di W3C Sudah
Lolos valid nya, eeeh pas di cek di CHKME, Ngabaranang weh..!!
Error melulu minta solusi dan pendapat nya Mas..?
Hatur nuhun.

Balas
avatar
Anonymous

Mas Anthonie duh punten gak keliatan, sampe gk di senggol hh
Gara-gara makan Semangka kebanyakan jadi weh Liur..hhh
Coba Mas Minta Ramuan yang manjur nya khkhkhk

Balas

hehe ada2 aja nih @Kang Karrysta, coba saya pengen liat kasih screenshotnya kang biar saya tau errornya dimana...

Mas Anthoni@iya nih mas ga tau tiba2 nongol sendiri hehehe..

Balas
avatar
Anonymous

wew mantap sob..

Balas
avatar
Anonymous

ikutan akh...

Balas

keren banget mas, waktu disentuh kursor langsung muncul deskripsi snipset, memang wow deh :D

Balas
avatar
Anonymous

wihhh Kerennn Nihh Gan Ilmunyaa Tapi kira" Klo Pake ini Bakal Memberatkan Loading Blogg kagak gan?? hehe

Balas
avatar
Anonymous

assik nih modifikasi lagi. ^^

Balas

wah inovasinya tiada henti ni mas andes :D salut

Balas

yang kemarin aja belum saya praktekkan sudah ada lagi yang baru ya ... wah nggak boleh lengah sedikit nih :D

Balas

Always new pokoknya tips2nya... btw sy masih nunggu yg warna warni itu, wkwkwkwk

Balas

mantap nih triknya.akan saya coba pasang ke blog,thanks

Balas

tenang saja bang udah jadi kok, nih screenshotnya..

https://lh6.googleusercontent.com/-Vi7988mfNtQ/Uk-jHDJ-IjI/AAAAAAAAGQg/83dfSDzThJ4/h768/menu-full-color.gif

Balas

Kalau bahas modifikasi widget memang paling top pokoknya mas andes. Salut, apalgi tooltip. Saya malah baru dengar istilah tersebut hehehe katrok banget saya hikz :D

Balas

Biar nggak ketinggalan, mending kang ucup nginep aja di rumah nya mas andes. Kan rumah nya deket tuh hehehe :D

Balas

Iya mas disini pokoknya serba ada kata si nya, modifikasi, hipertensi, animasi, kalkulasi, konspirasi dll hehe :)

Balas

Keren pisan ..pasti widgetnya ya mas :)
Sayangnya...kompi sy lagi masuk angin
Jd blm bisa nyobain nih...

Balas

Hehe...mbak Rin...okem jg ya ternyata :)

Balas

Hehe...mbak Rin komen nya lucu :)

Balas

wah makin keren nih kalau pakai effek tooltip seperti ini mas.. makin jelas tulisannya hehehehe

Balas

Lama tak jumpa gara-gara makin banyak kerjaan sob ...
tapi sempatkan diri tuk hadir nyapa hihi

Balas

jadi lebih keren ya mas, dengan tambahan toltip pada widget recen post nya

Balas

takut digrebek hansip mbak :D

Balas

Makin konsis ng'blognya seep lah jadi ada temen hehe

Balas

asal jangan vickynisasi aja mbak hehe...

Balas

hansipnya dikasih semangka dulu kang biar aman hehe...

Balas

sama mas saya juga okem nih, soalnya baru tahu juga kata tooltip hehe...

Balas

coba dikerokin mas kompinya biar anginnya keluar :)

Balas

enak yah mas bisa nongol sendiri hehe...

Balas

saya malah ga tau mas, emang okem tu apa :)

Balas

siplah kang, yang penting sama2 lancar hehe..

Balas

selagi entri posting masih bisa di pake kang, hehe.. keep blogging

Balas

nambah variasi aja mas.. hehe

Balas

lumayanlah kang buat diary blogging :)

Balas

lumayan dikit mas :)

Balas

Wah saya telat mas..OK dah mantab terus modif widgetnya

Balas

okem itu kayak bapau mas hehe...

Balas

mas andes ini benar-benar hebat.....tips dan triknya selalu saja ada yang terbaru...luarbiasa :-)

Balas

Berarti saya bakpao ya mas? wkwkwkwk :D

kata mas budi, saya okem wkwkwk :D

Balas

Kompi mas budi termasuk kompi bejo atau kompi pinter? Soalnya obatnya beda lho hehe :)

Balas

hansip nya di mel kang, pasti nggak macem-macem dech hehe :D

Balas

Wah mantep nie mastahnya blog dah ngeluarin lagi postingan terbarunya, sekarang saya dah ada beberapa referensi nie buat menuntut ilmu seputar dunia blogging salah satunya mas andes dan mbak wahyu eka prasetyarini yg harus sering saya kunjungi blognya...

Balas

Widget nya sudah saya hapus Mas, karena saya
gak ketemu mengatasi error pada Chkme, mengurangi
Nilai Seo, tapi secript nya masih ada di postingan blog
Saya cek - http://karristaent.blogspot.com/2013/10/trik-membuat-popular-posts-effects-spin.html

Balas

Biar Lengkap akh saya, masuk kolom ini
biar jadi sebutan sendiri, Pandawa lima blogging sama
Mas Admin nya yang suka Kerapihan, tt3tt3tt3

Balas

emang maksudnya widget yang saya posting di:
http://mas-andes.blogspot.com/2013/09/modifikasi-efek-tooltip-widget-popular_29.html
apa yang kang saud posting di:
http://karristaent.blogspot.com/2013/10/trik-membuat-popular-posts-effects-spin.html
yang harus saya cek yang mana? hehehe bingung saya maksudnya kang..

Balas

keren neh,,,,top banget

Balas
avatar
Anonymous

jadi semakin keren :D

Balas
avatar
Anonymous

izin praktek saja dehh

Balas

yang ada di blog saya Mas Maksudnya di
http://karristaent.blogspot.com/2013/10/trik-membuat-popular-posts-effects-spin.html

Balas

Siapa yang mau nginep 1X24 Jam harap Lapor sama saya
Atau langsung sama Bapak KUA. tt3tt3tt3tt3

Balas

Datang lagi Mas Andes, sekarang sekalian di borong
Comments nya 1 bulaneun sekaligus biar rada awet yah Mas. hhhhh

Balas

ikut belajar ya Mas Andas ... akan sering bolak-balik nih mas.

http://info-gedepangrango.blogspot.com/

Balas
avatar
Anonymous

wenak!
tapi masalahnya template gue gak valid html 5 ya ! ( kalo blog mas-andeas ini valid html 5 ya)
www.eko48.blogspot.com

Balas

Mantap nih template sama Tutor nya...

Balas

keren han
www.venom-ku.com

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Modifikasi Widget Recent Post Efek Tooltip Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode