Featured Post Random Dengan Label

 

Featured Post Random Dengan Label

Tutorial kali ini saya akan membahas tentang cara membuat Featured Post Random Dengan Label diblogger, postingan kali ini mungkin akan berguna untuk kalian yang mempunyai blog dengan niche fansub atau fanshare anime.


Featured Post Random Dengan Label

Tutorial kali ini berbeda dengan yang sebelumnya saya buat yaitu cara membuat Ongoing List Anime Auto Index, pada post kali ini saya akan membuat Featured Post Random Dengan Label dengan text atau tag seperti screenshoot diatas. sebelum kita mulai silahkan cek pratinjau yang sudah jadi dibawah ini.



Cara Membuat Featured Post Random Dengan Label

  1. Buka Blogger > Tema > Edit HTML, lalu cek javascript berikut diatas </head> sudah ada atau belum?, jika sudah ada abaikan
    2. <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>

  2. Simpan javascript berikut diatas </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
    3. <b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
<script type="text/javascript">
$('#rdm_arleth98 img').each(function(){$(this).attr('src',$(this).attr('src').replace(/\/s[0-9]+(\-c)?\//,'/w150-h195-c/'))});
</script>
</b:if>

  3. Carilah </style> lalu simpan CSS berikut diatasnya
    4. /* CSS Random Post With Text Status by Arlethdesign
   ================================================ */
.cover #rdm_arleth98 img{margin:0;padding:0;width:150px;height: 195px;overflow:hidden}
.cover ul#rdm_arleth98 h2{color: #fff;bottom: -10px;background: rgba(17,17,17,0.6);width: 140px;font-weight: 500;padding: 3px 5px;font-size: 13px;line-height: 20px;position: absolute;height: 25px;transition: .3s linear;text-align: center;}
.cover ul#rdm_arleth98 h2:hover {height:65px;transition:.3s linear}
.cover .rdminc p{display:none;}
.cover ul#rdm_arleth98{list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none}.inf-link {font-size: 11px;padding: 0px 5px;border-radius: 2px;position: absolute;bottom: 10px;right: -5px;}
.cover #rdm_arleth98 a{color:#64707a;transition:all .3s;display:block}
.cover .rdm_sum{font-size:13px;color:999}
.cover .rdminc{position:absolute;top:0;right:0;margin:5px;border-radius:5px;padding:5px;background:rgba(17,17,17,0.6);color:#FFF;font-size:12px;font-family:arial,sans-serif}
.cover #rdm_arleth98 li{margin:5px;padding:0;position:relative;display:inline-block;transition:all .3s;overflow:hidden}
@media screen and (max-width: 640px){.cover #rdm_arleth98 li{float:left;width:46%;}.cover #rdm_arleth98 img{width:auto;height:auto;}}

  4. Jika sudah save Tema.
  5. Buka Tata Letak > Tambahkan Widget > HTML/Javascript, simpan javascript berikut diwidget tersebut
    6. <div class='cover'><ul id='rdm_arleth98'>
<script type='text/javaScript'>
var randomarleth_number=4;var randomarleth_chars=0;var randomarleth_details="yes";var randomarleth_comments="Comment";var randomarleth_commentsd="no";var randomarleth_current=[];var total_randomarleth=0;var randomarleth_current=new Array(randomarleth_number);function randomarleth(a){total_randomarleth=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default/-/Anime?alt=json-in-script&max-results=0&callback=randomarleth"><\/script>');function getvalue(){for(var e=0;e<randomarleth_number;e++){var g=false;var h=get_random();for(var f=0;f<randomarleth_current.length;f++){if(randomarleth_current[f]==h){g=true;break}}if(g){e--}else{randomarleth_current[e]=h}}}function get_random(){var b=1+Math.round(Math.random()*(total_randomarleth-1));return b};
</script>
<script type='text/javaScript'>
function rdm_arleth(j){for(var p=0;p<randomarleth_number;p++){var n=j.feed.entry[p];var s=n.title.$t;if("content" in n){var m=n.content.$t}else{if("summary" in n){var m=n.summary.$t}else{var m=""}}for(var q=0;q<n.link.length;q++){if("thr$total" in n){var l=n.thr$total.$t+" "+randomarleth_comments}else{l=randomarleth_commentsd}if(n.link[q].rel=="alternate"){var o=n.link[q].href;if("media$thumbnail" in n){var r=n.media$thumbnail.url}else{r="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugVdoWLTT_0_SrgsGxwkaEoKmoSMiB0MtuNwTHFryF5BG___hShjzSGPT0O2efQf2IUDK7QXm9K_A6sFswjTzUN1JG8KqzNAknjUhepYWRF13StWPWhYVAR3fxj8aDc5KHDA5ffcb/s1600/no-image.png"}}}document.write("<li>");document.write('<a href="'+o+'" rel="nofollow"><img alt="'+s+'" src="'+r+'" width="'+145+'" height="'+185+'"/><h2>'+s+"</h2></a>");if(randomarleth_details=="yes"){document.write('<div  class="rdminc">Tv Series <p> '+l)+'</p></div><div style="clear:both"></div></li>'}}}getvalue();for(var i=0;i<randomarleth_number;i++){document.write('<script type="text/javascript" src="/feeds/posts/default/-/Anime?alt=json-in-script&start-index='+randomarleth_current[i]+'&max-results=1&callback=rdm_arleth"><\/script>')};
</script>
</ul></div>

TagKeterangan
var randomarleth_number=4Silahkan Ganti No 4 untuk menampilkan Jumlah postnya
/feeds/posts/default/-/AnimeGanti Anime Dengan Label
Tv SeriesGanti Dengan Text Yang diinginkan

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Safelink Di Blogger [Video]

Image
  Cara Membuat Safelink Di Blogger [Video] Cara Membuat Safelink Di Blogger [Video]  - Tutorial Cara Membuat Safelink blogger ini saya sudah menyiapkan video bagi yang kurang mengerti jadi silahkan didownload juga. Tutorial sebelumnya saya sudah membagikan Template gratis yaitu  Edna Template Blogger v2  dan tutorial  Cara membuat tombol back to top dengan gambar , untuk hari ini saya akan membagikan tutorial yang sedikit berbeda dari sebelumnya, ok kita mulai saja tutorial kali ini. Cara Membuat Safelink Di Blogger Buka Blogger > Buat Blog Baru Untuk Safelink Jika Sudah, Buat  Halaman  diblog baru tersebut Kemudian Tambahkan Script berikut kedalam page tersebut & beri judul  GO <script src=" LINK-JAVASCRIPT " type="text/javascript"></script> Kemudian buka Notepad, lalu simpan menjadi javascript berikut kebentuk file  Safelink.Js , Dan jangan lupa ganti  http://link-tujuan.blogspot.com/p/go.html  dengan Url Blog s...
Read more

Popular Post Samehada untuk Blogger

Image
  Popular Post Samehada untuk Blogger Tutorial kali ini yaitu Cara membuat Popular Post seperti Samehada untuk Blogger, diartikel ini saya akan membagikannya dengan singkat dan jelas, dan sangat mudah dipahami untuk pemula sekalipun. Untuk pratinjau atau preview tampilannya kalian bisa dipostingan sebelumnya yaitu  Bt-Samehada Clone 2020 Template Blogger . Popular Post Samehada untuk Blogger Pertama Buka Blogger > Tata letak > Add Widget Popular Post  (Jika sudah ada tidak perlu). Kemudian, Buka Tema > Edit HTML Simpan CSS berikut kedalam  <style> ... </style>  atau  <b:skin> ... </b:skin> /* Popular post blogger new style - arlethdesign */ #PopularPosts1 .widget-content.popular-posts{margin:auto} #PopularPosts1 ul li:nth-child(1n+2) .item-meta{font-size:11px;padding:6px 0 0;opacity:.7} #PopularPosts1 ul{padding:0;list-style:none;margin:auto;overflow:hidden} #PopularPosts1 ul li{margin:auto;padding:10px 0} #PopularPosts1 ul ...
Read more