Featured Post by Label (Widget Featured Post Homepage Magazine Style). Daftar Post/Artikel pilihan di homepage, di atas blog posts. Gaya majalah akan mempercantik tampilan blog anda seperti contohnya yang saya pasang pada blog saya. Disini saya akan menjelaskan bagaimana cara atau tutorial pemasangannya. Baca juga Cara Pasang Widget Sosial Media Keren !!
Ikuti Tutorial Pembuatan featured by label dibawah ini.
Tutorial :
_______________________________________________________________________________
1. Cari kode </head> pada editor template , Lalu Copy dan pastekan kode CCS + Javascript dibawah ini tepat diatas kode </head>
Sekian dari saya untuk bagaimana cara tutorial memasang featured post by label ( megazine style ),
 |
| Contoh : Tampilan Featured Post By Label ( Megazine Style |
Ikuti Tutorial Pembuatan featured by label dibawah ini.
Tutorial :
_______________________________________________________________________________
1. Cari kode </head> pada editor template , Lalu Copy dan pastekan kode CCS + Javascript dibawah ini tepat diatas kode </head>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/* Recent Post by Label */
.featuredpost ul{list-style:none;margin:0;padding:0}
.featuredpost li{margin:0;padding:0;}
.featuredpost .widget{margin:0;padding:0}
.featuredpost .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}
.featuredpost h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0;background: #fafafc;}
.featuredpost h2:before{content:'\f115';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}
.featuredpost .index{font-size:10px;float:right;font-weight:400;}
.featuredpost .index a{flex;
color: #181818;
padding: 3px 8px;
border-radius: 2px;
font-weight: 400;
font-size: 14px;}
.featuredpost .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.featuredpost .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.new_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}
.new_right{width:250px;width:47.5%;float:right;margin:0;padding:0}
ul.new_thumbs{margin:0;padding:0}
ul.new_thumbs li,ul.new_thumbs2{margin:0;padding:0}
ul.new_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:250px;height:200px}
ul.new_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}
ul.new_thumbs .cat_thumb img:hover{opacity:.9;}
ul.new_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}
ul.new_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.new_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden}
ul.new_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}
ul.new_thumbs2 .cat_thumb2 img:hover{opacity:.9;}
span.new_title{font-family:'Roboto Condensed',sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.new_title2{font-size:14px;line-height:1.4em;margin:0 0 3px}
span.new_title a{color:#666}
span.new_title a:hover{color:#ff675c;text-decoration:none}
span.new_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.new_meta{display:none;font-family:'Roboto Condensed',sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.new_meta a{color:#aaa;display:inline-block}
span.new_meta_date,span.new_meta_comment,span.new_meta_more{display:inline-block;margin-right:10px}
span.new_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.new_meta_comment a:hover{color:#ff675c!important}
span.new_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.new_thumbs2 li a:hover,ul.new_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.featuredpost .widget-content {padding:20px 25px;}
.new_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.new_right {width:46%;float:right;margin:0;padding:0;}
ul.new_thumbs .cat_thumb {width:100%;height:auto;}
ul.new_thumbs .cat_thumb img {width:100%;height:auto;}
ul.new_thumbs li {margin:0;padding:0;}
span.new_title2 {font-size:20px;line-height:1.2em;}
span.new_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.featuredpost .widget-content {padding:10px 20px}
.new_right{width:100%;float:left;margin:0;padding:0}
ul.new_thumbs2 li{border-bottom:0}
span.new_summary,.new_left{display:none}
span.new_title{margin:0 0 5px}
ul.new_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.new_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#featuredpost-wrapper {display:none}}
@media only screen and (max-width:320px){
.featuredpost .widget-content {padding:10px 20px}
.featuredpost h2 {padding:10px 20px 1px 20px}
.new_right{width:100%;float:left;margin:0;padding:0}
ul.new_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.new_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.featuredpost .widget-content {padding:10px}
.featuredpost h2 {padding:10px 10px 1px 10px}
.new_right{width:100%;float:left;margin:0;padding:0}
ul.new_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.new_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.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:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=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",document.write('<span class="new_left">'),document.write('<ul class="new_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="new_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="new_meta">'),1==showpostdate&&(v=v+'<span class="new_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="new_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="new_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="new_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="new_right">'),document.write('<ul class="new_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="new_title new_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="new_meta new_meta2">'),1==showpostdate2&&(v=v+'<span class="new_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="new_meta_comment new_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="new_meta_more new_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=7,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoQ_EopHf20b3J6uK1Kv2ISw3ls5Z1rj5Sq29S7SV8gQeimECGUjJDFibtOFlPzS-UwMjXmQDoNcR7YkB_ITgD04IkmN52RnfsMrd5hfra-7vE2TKhtKgpB7eII1KLsBIHr41oCLZeIHqy/s220-Ic42/noimage.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGHitI2EmxluqVz-ioHnP-u0lbsZGpSVkdvhw0ktYxDgjmzLyuiYJFkzKlG94eZsk_-GnZkpj-aHxPNW5synxfPLUuljm-O6bq5VszxsKnxPMsaNQQc0UGaj38aSGrX0_-bYgeWaG4rB60/s220-Ic42/img_not_available.png";
</script>
</b:if>
</b:if>
_______________________________________________________________________________
2.Tahap Kedua Cari kode <div id='main-wrapper'> pada editor template , biasanya setiap template seorang blog kodenya tidaklah selalu sama !! saya sugestikan carilah teks "Wrapper" pada editor template dan pilihlah kode wrapper setelah menu navigation dan outer-wrapper !!
ngerti ngga ? kalau belum paham silahkan kirimkan komentar atau pesan ke admin :)
Berikut kode yang harus dipastekan dibawah kode <div id='main-wrapper'>
<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='featuredpost-wrapper'>
<b:section class='featuredpost' id='featuredpost' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='Blogging' type='HTML'>
<b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>Index</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<!--YOU CAN ADD CAROUSEL WIDGET HERE-->
</b:if>
_______________________________________________________________________________
3. Lalu klik simpan
_______________________________________________________________________________
4.Pergi ke menu Tata Letak pada blog lalu reload halaman browser anda, maka akan muncul widget baru diatas Main Blog / Blog Post lalu klik edit pada widget .
Ganti isi widget dengan teks sesuai label artikel yang ingin ditampilkan pada featured.
_______________________________________________________________________________
5. Klik Save lalu liat perubahan pada hompage website blog anda.
_______________________________________________________________________________
Sekian dari saya untuk bagaimana cara tutorial memasang featured post by label ( megazine style ),
untuk kurang lebihnya pada cara penyampaian artikelnya mohon maaf.
Terimakasih sampai berkunjung kembali , and jangan lupa komentarnya.
No comments:
Post a Comment