-->

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.
    Show comments
    Hide comments


    MANTANKODE.NET Kebijakan Komentar, Silahkan berkomentar sesuai ketentuan perundang-undangan!
    Baca Kebijakan Berkomentar kami sebelum berkomentar.

    Notification

    Donasi yang anda berikan akan digunakan untuk, pengembangan blog ini.

    Kesehatan admin dan lebih semangat berbagi tips dan informasi.

    Yang telah membantu saya ucapkan terima kasih

    Donasi: Trakteer

    Done
    Night Mode