Random Post Slider With Tooltip Untuk Blogger

Syahrul

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



Tutorial kali ini hampir mirip atau bisa saya bilang hasil update dari versi artikel yang sebelumnya saya buat yaitu Random Post Slider untuk blogger, bedanya cuma bagian tooltip & jumlah postnya saja, ok kita mulai saja tutorialnya dengan mengikuti langkah-langkah berikut ini.


Random Post Slider With Tooltip Untuk Blogger

  1. Pertama, buka Blogger > Tema > Edit HTML, lalu tambahkan CSS & Js berikut ke atas </head>
  2. <link href='https://cdn.rawgit.com/Arleth98/blog-orang/171548a8/flickity.css' rel='stylesheet' type='text/css'/>
    <script src='https://cdn.rawgit.com/Arleth98/blog-orang/171548a8/flickity.pkgd.min.js' type='text/javascript'/>
    <script src='https://cdn.rawgit.com/Arleth98/blog-orang/12b4fe1e/random-post-with-tooltip.js' type='text/javascript'/>

  3. Kedua, Tambahkan CSS ini diatas </style>, Jika sudah Save Tema.
  4. /* 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;}

  5. Ketiga, Buka Tata Letak > Tambahkan Widget > HTML/Javascript, setelah itu letakkan HTML & JS berikut kedalam widget
  6. <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 menggunakan fitur ini dengan fitur Random Post Slider untuk blogger sekaligus, karena css dan javascript kedua fitur ini sama, jadi jika 2 fitur ini digunakan secara bersamaan akan berantakan hasilnya.
Related Posts
Disqus Comments