Cara Membuat Racent Post Dengan Tooltip Blog

Halo sobat blogger, kali ini saya update post lagi, post kali ini saya update tampilannya, simple dan minim javascript jadi kalian tidak perlu lagi bingung jika ingin mengeditnya. Fitur ini mungkin berguna buat kalian yang punya blog Fanshare atau Fansub, ok langsung saja kita mulai saja tutorialnya.

Cara Membuat Widget Recent Post Dengan Tooltip

1. Buka Blogger > Template > Edit HTML, lalu Simpan CSS berikut ini di atas </style> jika sudah silahkan save Template.

/* Widget Recent Post With Tooltip - Arleth98 */
#posting .konten a{font-size:13px;color:#111;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}
.konten{position:relative;border-bottom:1px solid #DDD;margin:0;padding:5px 0}
.konten:before{content:'\f054';float:left;color:#222;font-weight:bold;padding:0;margin:0 5px;font-family:fontawesome;font-size:15px}.konten:nth-child(odd){background:#F0F0F0}
.tooltip{display:none;position:absolute;top:0!important;right:103%!important;z-index:1000;width:450px;background-color:rgba(0,0,0,0.85);box-shadow:0 0 0.5rem rgba(83,78,76,0.5);padding:35px 10px 10px 10px;overflow:hidden;word-wrap:break-word;color:#b6b6b6;font-size: 12px;font-weight:700}
.tooltip img{float:left;padding:2px;margin-right:10px;display: block!important;width:130px;height:180px}
#posting .konten .tooltip h4{position:absolute;top:0;left:0;font-size:14px;width:98%;margin:0 0 5px 0;padding:5px;float:right;border-bottom:2px solid #1b1b1b;background:rgba(0,0,0,0.6);border-left:none}
#posting .konten .tooltip h4 a{color:#eee}

2. Langkah berikutnya Cari Tata Letak, lalu Tambahkan Widget HTML/Javascript pada sidebar kalian, kemudian simpan Markup Javascript ini diwidget tersebut

<script type="text/javascript">
numposts = 10,
numchar = 370,
rcFadeSpeed = 610,
pBlank = "https://1.bp.blogspot.com/-RWvwQaPZCl4/WJo2qDGr-AI/AAAAAAAAA0E/fzYL0X6yeQs6WluNEx9cbjkfegbTjnlVgCLcB/s1600/no-images.png", 
blogURL = "https://arleth-desz.blogspot.co.id/";
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/Arleth98/Js/3953a81b/recent_post_tooltip.js"></script>

Demo

Tag	Keterangan
https://arleth-desz.blogspot.co.id/	Ganti Dengan link homepage blog kalian
numposts = 10,	Ganti Dengan Jumlah post

Sekian dulu tutorial Cara Membuat Widget Recent Post With Tooltip, sampai jumpa pada tutorial berikutnya.