Random Post Slider With Tooltip Untuk Blogger

Random Post Slider With Tooltip Untuk Blogger - Blog download anime atau biasa disebut fanshare/fansub di indonesia mempunyai beberapa fitur menyerupai tooltip, recent post atau random post, nah ditutorial kali ini aku akan menggabungkan fitur slider & tooltip kedalam random post, mau tau cara buatnya? yuk kita simak sama-sama artikel ini.

Tutorial kali ini hampir menyerupai atau dapat aku bilang hasil update dari versi artikel yang sebelumnya aku buat ialah Random Post Slider untuk blogger, bedanya cuma belahan tooltip & jumlah postnya saja, ok kita mulai saja tutorialnya dengan mengikuti langkah-langkah berikut ini.

Random Post Slider With Tooltip Untuk Blogger

1. Buka Blogger > Tema > Edit HTML, kemudian tambahkan CSS & Javascript berikut ke atas </head>

<link href='https://cdn.staticaly.com/gh/Arleth98/blog-orang/171548a8/flickity.css' rel='stylesheet' type='text/css'/> <script src='https://cdn.staticaly.com/gh/Arleth98/blog-orang/171548a8/flickity.pkgd.min.js' type='text/javascript'/> <script src='https://cdn.staticaly.com/gh/Arleth98/blog-orang/12b4fe1e/random-post-with-tooltip.js' type='text/javascript'/>



2. Langkah berikutnya Simpan CSS berikut diatas </style>, kalau sudah Save Template

/* Slider Random Post - Arleth98   ======================================= */ #random-post-container{overflow:hidden;height:225px;padding:10px;} #random-post-container ul{margin:auto;list-style:none} #random-post-container .carousel-cell{width:27%;height:180px;margin-right:10px;background:#444;counter-increment:carousel-cell} #random-post-container img {width:280px;height:180px;} @media screen and (max-width:640px){#slider .widget-content{display:none}} #random-post-container .tooltip{position:relative;cursor:pointer;line-height:normal} #random-post-container .tooltip:before,#random-post-container .tooltip:after{display:block;position:absolute;visibility:hidden;opacity:0;transition:opacity .2s;left:50%;margin-bottom:-15px;transition:margin .2s;line-height:1.3} #random-post-container .tooltip:before{overflow:hidden;white-space:normal;text-overflow:ellipsis;width:190px;padding:10px;box-sizing:border-box;bottom:-70px;border-radius:5px;font-size:12px;text-align:center;margin-left:-37%;background:rgba(0,0,0,.85);content:attr(data-title);color:#fff} #random-post-container .tooltip:after{content:"";border-top:7px solid rgba(0,0,0,.85);border-left:7px solid transparent;border-right:7px solid transparent;bottom:-77px;margin-left:-3%} #random-post-container .tooltip:hover:before,#random-post-container .tooltip:hover:after{visibility:visible;opacity:1;margin-bottom:0;z-index:99;}



3. Buka Tata Letak > Tambahkan Widget > HTML/Javascript, sehabis itu letakkan HTML & JavaScript berikut kedalam widget

<script src='/feeds/posts/default?alt=json-in-script&callback=relpostimgcuplik&max-results=50' type='text/javascript'></script> <div id='random-post-container'> <ul class='carousel' data-flickity="{&quot;autoPlay&quot;:1500,&quot;wrapAround&quot;:true}"> <script type='text/javascript'>/*//<![CDATA[*/ artikelterkait(); $('li.carousel-cell img').each(function(){$(this).attr('src',$(this).attr('src').replace(/\/s[0-9]+(\-c)?\//,'/w280-h180-c/'))}); /*//]]>*/</script> </ul> </div>

Jangan memakai fitur ini dengan fitur Random Post Slider untuk blogger sekaligus, sebab css dan javascript kedua fitur ini sama, jadi kalau 2 fitur ini dipakai secara bersamaan akan berserakan hasilnya.

Bagikan Artikel ini