How to Created Random Post by Label - MANTANKODE

How to Created Random Post by Label

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


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

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


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.

Share with your friends

Add your opinion
Disqus comments
Notification

Donasi yang anda berikan akan saya gunakan untuk mengembangkan blog ini.

BANK BNI: 0431705794 a/n Muhammad Rahmadi

Pulsa/DANA/OVO: +6285822266832

Done