Home  ›  Blogging  ›  Widget

Cara Mudah Merubah Featured Post Viomags Menjadi Tampilan Grid di Blog

Add Comment Edit
Hallo Gengs,
Balik lagi dengan RozorTech.net, yang selalu membahas sesuatu yang menarik. Gimana kabarnya Gengers ?, semoga dalam keadaan baik dan sehat-sehat ya. Pada Kesempatan kali ini RozorTech akan memberikan info yang cukup menarik loh adalah Cara Mudah Merubah Featured Post Viomags Menjadi Tampilan Grid di Blog disimak ya.

 Pembahasan

 Ada banyak tampilan yang disajikan oleh para pembuat template, dari yang mengutamakan design blog yang sedemikian rupa hingga blog yang kecepatannya sangat cepat, ada juga yang memakai dua - duanya semakin lebih bagus. Salah satunya dengan cara memakai Featured Post yang menarik dan elegan.

 Apa itu Featured Post ? Featured post adalah sebuah posting yang dinilai penting bagi pemilik blog atau pengunjung blog bahkan kedua elemen tersebut. Featured post seringkali kita liat pada halaman depan atau homepage blog seseorang dan bergentayangan dibawah header.

 Lalu Viomags adalah template yang di buat oleh suhu Mas Sugeng , dan Grid itu adalah tampilan yang menggunakan banyak postingan dalam 1 widget, nah sebelumnya di template bawaan Viomags tidak ada tampilan gridnya.

 Nah makanya mimin akan kolaborasikan template yang sedang booming sekarang yaitu VioMags dengan Featured Post dengan tampilan Grid agar semakin menarik pengunjung.

 Baca Juga :


Cara Mudah Merubah Featured Post Viomags Menjadi Tampilan Grid di Blog

Cara Mudah Merubah Featured Post Viomags Menjadi Tampilan Grid di Blog

 Dengan cara ini mimin rasa bagus untuk tampilan blog gengers semua, karena dengan tampilan grid memunculkan banyak postingan diatas homepage dan dengan tampilan grid yang semakin mengikuti perkembangan design saat ini.

Yuk langsung saja kita ke topik pembahasan  

Sebelumnya anda harus paham akan struktur kode dibawah ini agar tidak terjadi hal yang tidak diinginkan dimohon untuk backup template terlebih dahulu

Cara Memasang Kode di Template di Blog 


  • Masuk ke akun Blogger.com kamu
  • Pilih Tema lalu Edit HTML
  • Tekan CTRL + F ketik </head> atau &lt;!--</head>--&gt;&lt;/head&gt;
  • Copy kode script dibawah ini :

<script class='java' type='text/javascript'> //<![CDATA[ function labelthumbs(t){document.write('<ul class="'+outerclass+'">');for(var e=0;e<numposts;e++){var r,i=t.feed.entry[e],n=i.title.$t,l=i.category[0].term;if(e==t.feed.entry.length)break;for(var o=0;o<i.link.length;o++)if("alternate"==i.link[o].rel){r=i.link[o].href;break}var u;try{u=i.media$thumbnail.url}catch(m){s=i.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSXnbgxw9UVyVJiA3JbNyK9WWe9KkhUEfoMjR15X3BvxX5wp_eNHZgMgyEBdUWIus6PFRTaYzKMXjkWntu2YM1dNW1mWsRttGpk1RA5ZV38al3ebR87YifoU4JjP0LgZ1rfGRPEtUGm2gc/s500-c/no-image-found.jpg"}var p=i.published.$t,v=p.substring(0,4),h=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December";var A=g[parseInt(h,10)]+" "+f+", "+v;document.write(starttag+"<"+intag+' class="post">'),document.write('<div class="post-media"><div class="image-wrap"><img src="'+u.replace("/s72-c/","/s400-p/")+'" alt="'+n+'"/></div></div><div class="post-body">'),"featured-slider"==outerclass&&document.write('<span class="cat"><a href="/search/label/'+l+'">'+l+'</a></span><div class="post-title"><h4><a href="'+r+'">'+n+'</a></h4></div><div class="post-meta"><span class="post-date">'+A+"</span></div></div>"),"sub-menu"==outerclass&&document.write('<div class="post-title"><h2><a href="'+r+'">'+n+'</a></h2></div><span class="post-date">'+A+"</span></div>"),document.write("</"+intag+">"+endtag)}document.write("</ul>")}; // Featured function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderposts(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="blue">'+l+'</span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="secondary-post col-post" style="margin-right:0"><span class="blue">'+l+'</span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)}j++}}imgr=new Array,imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="5"; //]]> </script>

  • Pastekan diatas </head> atau &lt;!--</head>--&gt;&lt;/head&gt;
  • Cari lagi kode <div id='wrapper'>
  • Copy kode HTML dibawah ini :

    <b:if cond='data:blog.url == data:blog.homepageUrl'><div class='ct-wrapper' id='featured-posts-section'><div class='featured-post padding clearfix'> <script type='text/javaScript'>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+featured_numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderposts\&quot;&gt;&lt;\/script&gt;&quot;);</script> </div></div></b:if>

    • Pastekan dibawah <div id='wrapper'>
    • Cari lagi kode </style> atau ]]><</b:skin>
    • Copy kode CSS dibawah ini :

    /* Featured Post Homepage */ .ct-wrapper {padding: 0px 0px 20px 0px;width: 100%;} #featured-posts-section{max-height:380px;overflow:hidden;} .featured-post a{font-size:1em;color:#fff;font: 700 16px Roboto Slab, Times New Roman, Times, serif;} .featured-post a:hover{color:#fff;} .main-post.featured-post a{margin:0;font-size:17px} .featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 0px 0 0} .featured-post .main-post{background: #D84E1A;width:41.4%;padding:0;transition:all .4s} .featured-post .secondary-post{background: #227B96;width:29%;margin:0 0 2px 2px;transition:all .4s} .featured-post .secondary-post:nth-child(4){background: #7D2DA7;} .featured-post .secondary-post:nth-child(5){background: #28943A} .featured-post .secondary-post:nth-child(7){background: #CA9215;} .featured-post span{background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%); color:#fff;font-weight:bold;position:absolute;transition:all .4s;font-size:12px;line-height:1.2;padding:3px 6px;top:10px;left:10px;z-index:1;border-radius:1px;} .featured-post .main-post:hover span,.featured-post .secondary-post:hover span{background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%); } .featured-post img{margin-bottom:-10px;height:100%;transition:all .5s} .featured-post .main-post img{height:380px;width:100%;object-fit:cover; opacity: 0.5} .featured-post .secondary-post img{height:191.5px;object-fit:cover;width:100%;  opacity: 0.5} .featured-post .main-post:hover img,.featured-post .secondary-post:hover img{backface-visibility:hidden;} .featured-post header{position:absolute;background:rgba(0,0,0,0);bottom:0px;left:0;right:0;padding:10px;z-index:2;transition:all .4s;margin-bottom:0px} .featured-post header:hover{background:none} .featured-post .secondary-post header{padding:0px 10px;margin-bottom:0px} .featured-post header h3{font-size:18px;} .featured-post h4{font-size:18px;} .featured-post .main-post:hover{background-color:rgba(0,0,0,0.5);} .featured-post .secondary-post:hover{background-color:rgba(0,0,0,0.5);} @media only screen and (max-width:1024px){ .ct-wrapper {display:none;} .featured-post .secondary-post{width:197.5%;} .featured-post .main-post{width:97.5%;} } 

    • Pastekan diatas </style> atau ]]><</b:skin>
    • Simpan Template
    • Selesai dan Lihat Hasilnya

    Sudah ada tampilan gridnya ?, terus kenapa gambarnya gak ada ?, nah masih ada satu langkah lagi ketika kamu ingin memunculkan gambarnya simak lagi ya 


    Mengaktifkan Fungsi Featured Post 


    • Buka Setelan Pilih Lainnya 

    • Pada Feed Situs 
    • Ubah Izinkan Feed Situs menjadi Sampai Batas Postingan 

    • Klik Simpan Setelan
    • Selesai

    Nah gimana gengers apakah sudah tampil ?, kalau belum tampil coba kamu lebih teliti lagi atau tuliskan di kolom komentar dibawah atau ada yang kurang jelas bisa ditanyakan.
    Semoga Semakin Banyak Pengunjung Blog Anda :D

    Akhir Kata 

     Demikian itu Cara Mudah Merubah Featured Post Viomags Menjadi Tampilan Grid di Blog Terimakasih semoga bermanfaat kalau ada yang mau ditanyakan silahkan tuliskan comment dibawah , jangan lupa Like Fanspage Kami Dan Share ke media sosialnya lainnya, sekali lagi saya ucapkan,  terimakasih salam RozorTech..... 
    Tampilkan Komentar
    Sembunyikan Komentar

    0 Response to "Cara Mudah Merubah Featured Post Viomags Menjadi Tampilan Grid di Blog"

    Post a Comment

    Subscribe to: Post Comments (Atom)

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel