-->

How to Created Random Post by Label

Daftar Isi [Tutup]
    Cara membuat random post untuk blogger ini saya terinspirasi dari blog tetangga arlethdesign diblog tersebut dijelaskan bagaimana untuk membuat random post dengan gambar berdasarkan post diblog anda. nah disini saya akan membagikan kembali dengan cara random post dengan label bukan berdasarkan postingan. saya juga berterimakasih kepada pihak arlethdesign atas inspirasi kreatifnya.


    cara random post dengan label

    Edit Template

    mungkin langsung disimak saja cara pembuatannya. masuk ke Blogger - Edit Template.

    Letakkan diatas </head>

    Simpan kode JavaScript dibawah ini diatas </head>
     <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'/> 

    Letakkan diatas </b:skin> atau </style>

    Setelah itu simpan kode css dibawah ini diatas </b:skin> atau </style>
     /* 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;} 


    Setelah itu simpan template anda dan silahkan ada letakkan kode html pemanggil untuk random post dibawag ini sesuka hati anda baik itu didalam template atau widget

    Untuk Random Berdasarkan Post

     <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> 


    Untuk random berdasarkan Label

     <script src='/feeds/posts/default/-/Manga?orderby=published&amp;alt=json-in-script&amp;callback=relpostimgcuplik&max-results=5' 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)?\//,'/w130-h180-c/'))});
    /*//]]>*/</script>
    </ul>
    </div> 

    Sumber: https://arlethdesign.blogspot.co.id/2017/09/random-post-slider-with-tooltip-untuk.html

    Semoga artikel ini bermanfaat, fitur ini cocok untuk anda yang membuat blog download.

    Terus membaca

    Show comments
    Hide comments

    Notification

    Yuk bantu mantankode dengan berbagi artikel nya ke sosial media agar lebih dikenal. Atau sobat juga bisa membantu dengan Mentraktir mantankode di:

    Done
    Night Mode