Cara Membuat Multi Recent Post Seperti Blog Rian SEO
www.azid45.web.id - Cara Membuat Multi Recent Post Seperti Blog Rian SEO. Assalamualaikum, Wr.Wb. Pada kesemptan kali ini saya akan share cara membuat recent post by label yang tentunya sangat mudah. Hanya dengan menu layout dan mengetik nama label maka blog sobat pada menu home akan tampil label yang sudah diketik dan pastinya elegen seperti blog berita atau magazine.
Sebenarnya saya sudah pernah share sebelumnya tentang cara membuat recent post by label, namun masih menggunakan script HTML dan pastinya sedikit kurang keren jika ditampilkan pada menu home page, karena menurut saya recent post yang sudah saya bagikan ke sobat bentuknya seperti postingan jadi cocok ditampilkan pada menu satatic page atau halaman static dengan lebar postingan 100%. Saya mendapatkan tutorial tersebut dari kak Arlina Design dan recent post tersebut juga dipakai oleh kak Arlina Design.
Baca Juga: Cara membuat recent post by label seperti milik blog arlina design
Untuk kali ini, berbeda dengan sebelumnya. Meskipun sama-sama recent post namun tampilannya berbeda dan menurut saya jika blog sobat ingin lebih menarik terutama di home page maka solusi yang pas adalah menggunakan recent post seperti yang akan saya bagikan. Sebenarnya recent post ini mirip pada template EvoMagz buatan mas Sugeng dan template Sevida, serta template Ijonk. Namun template tersebut telah dimodifikasi oleh kang Rian SEO dan dijadikan icon template pada blog milik pribadi kang Rian SEO. Jadi jika sobat penasaran, bisa melihat blog kang Rian SEO langsung, atau lihat gambar diberikut ini;
Ok, sobat. Latar belakangnya sudah selesai. Saatnya kita membuat recent post by label mirip blog Rian SEO yang mengadopsi recent post dari template EvoMagz. Berikut tutorial cara membuat recent psot by labelnya;
Pertama, kerana recent post ini memakai font awesome maka langkah awal yang harus sobat lakukan adalah mengecek template sobat, apakah sudah memiliki script css font awesome atau belum. Jika sudah memiliki maka tinggalkan saja langkah ini, namun jika template sobat belum terdapat script css font awesome maka sobat bisa copas script dibawah ini dan pastekan tepat diatas kode </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
jika sobat belum tahu caranya untuk masuk ke script dan menemukan kode </head>, maka yang sobat lakukan adalah menuju pada menu theme/ template - edit HTML - Ctrl+F - </head>.
Kedua, salin kode berikut ini, dan letakkan kode tersebut diatas kode </b:skin> atau </style>.
/* Recent Post */
.recent-post-title {
background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAaCAYAAACzdqxAAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAABiwAAAYsB4dDSvAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAATySURBVEiJbZV9jFRnFYef887szrpi2qXazUp3mfe9Y20xIaHYhETj8iVGaKCBUC0tVoQoGvwgITRKiGCU+hGxwaCGRE0gUtLSFlCIQHddmsa0icSmJhuWzL13d9yATSMbTAu7Ozv3+MeeC8PH/DVvTs7z/s457z0/UVUBFCCO450i8iOmf4NZli2sVCrvASRJ8mngNeAeYBx4LITQBzA0NPSRYrF4RkQWWO7PRVWxxGeBn1pgSER6vffvAlSr1XnOuT6gA5hwzq0ql8unAQYHB2e0tbX9FfiM5T4fQthaNOjWJmi1paVlcXd397sAaZrOdc69ZtBJYE0OvXz5cnupVPpLE3R/CGErgEvTdAuwF0BEkizLFnV3d18ypZ9S1T5gJlDPsuyJEMJJgNHR0Q9dv379zyLSa7kHQgjftguQOI4zQIARK38EYGRk5OFGozEA3A9MiciT3vujdmHJOXcCWGacP4YQNjbN6jvOoKOFQmFRDk2S5MFGo9Fn0Iaqrs+hg4ODrc65V3Koqh4KIWzKoUmSfFNEfuVU9ZKqLpo9e3ZqaiKgH+gCMhHZEEXREYDz58+3lEqll4DlpvRIFEUbgMzmsQnYD9Sdc25xFEVVK9875/4GzDIFm7z3hwAGBgaKHR0dR0RkpUGP1mq19UDDyv+qqh7IO9D83HqA14HZ0xXq5iiKDhikEMfxYRF5wgZ1/MqVK2vnz59ft9yngIOAs7Z+TlSVarX6QKFQOKeqwRK3eO/3G9QlSXIIWGfnk+Pj46vnzJkzaUq/JCJ/AgqqegnojaKoKrVa7eP1en0A+IQlbg0hPJ9D0zT9g6o+Y4M6raqrKpXKhCldAxwBisB/RGSh934IwNXr9f4cqqrbm6CSJMmBHAr0FQqFx3NotVpdBbxg0PeyLFuSQy9evDirCHzSyt8RQvhFE/Q3wEa78Fx7e/vKrq6ucVO6wjn3ItAiIv9V1SWVSmXQHkBXsVjsLxpol/d+j/0njuN9IrLZjm/MmDFjRWdn5zWA4eHhLwAvA63AmIgs9d7/CyBN005V7Qe8U9U9IYTdOTRJkr0issWUvlmv15d3dnZ+YLElWZYdA0rAVWBZuVx+21rzMfv8HwKyG8/NEn8GbLfjP4ClIYSrprQ3y7JTQDvwP+fcsnK5/BbAhQsX7mttbe0H5uZtzVtBHMc/FpHtFvhnoVBY1tPTc9Uu/Cxw0qDvq+oXc2itVusolUpnVXWuoXZ77/c4S/yhiOywwDsTExOf7+npGTOlC4BTwIeBayKyIoqiv1vePVNTU6dVdZ7lPhdC2JVP/weq+hML3O4ajwJnmXaN66r6WBRF/XCna6jqL6Mo2pZ3QOI4zpt8u2s8Yq5xLzAhIiu992fgTtcQkX3e++82tXVn3uO7ucZZg04Cq3PoXVzjd83QJEm+LyK7iiKSNBqNW1zDlM4E6iKy1nt/CqZdY3Jy8oZrAL8PIXwrh6Zpug3YA0wUgcWVSmXUBvWQQT8KTAFf9t6fsAtLzrljwGIr/6D3/uvcXPDfA/Ivd7h5bT4IDDC94Bsiss57/6L1tLWtre1Vbi74F0IIT3NzwW9R1V/nwlW115maW1wD+EoOvYtrHA0hrM+hcRx/Q1X3WaxmxvFvNzw8XHbO9TPtGpmqfi2EcBjudA0ROT42NrYOc400TTeKyG8x12g0GovK5fIwwP8B3DF1BfTENDEAAAAASUVORK5CYII=) repeat-x;
margin:0 0 15px;
padding:0;
position:relative;
}
.recent-post-title h2 {
font:normal bold 14px Arial, sans-serif;
height:26px;
line-height:26px;
margin:0 0;
padding:0 10px;
background:#FF4F4F;
color:#ffffff;
display:inline-block;
border-right:5px solid #fff;
}
.recent-post-title h2 a {
color:#ffffff;
}
.recent-post-title h2 a:after {
content: "\f18e";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-left:6px;
}
.recent-post-one-thumb {
float:left;
width:50%;
margin:0 0;
}
.recent-post-one-thumb .widget {
padding:0 15px 15px 0;
}
.recent-post-one-thumb .widget-content {
background:#ffffff;
border:1px solid #f0f0f0;
padding:15px;
}
.recent-post-one-thumb ul {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
/* Recent Post */
ul.rp_thumbs {
margin:0 0 0 0;
}
ul.rp_thumbs li {
font-size:12px;
min-height:68px;
margin:0 0 8px;
padding:0 0 8px;
border-bottom:1px dotted #e5e5e5;
}
ul.rp_thumbs .rp_thumb {
position:relative;
background:#fbfbfb;
margin:3px 0 10px 0;
width:100%;
height:0;
padding-bottom:46%;
overflow:hidden;
}
ul.rp_thumbs .rp_thumb img {
height:auto;
width:100%;
}
ul.rp_thumbs2 {
font-size:13px;
}
ul.rp_thumbs2 li {
padding:0 0;
min-height:66px;
font-size:11px;
margin: 0 0 8px;
padding: 0 0 8px;
border-bottom:1px dotted #e5e5e5;
}
ul.rp_thumbs2 .rp_thumb2 {
background:#fbfbfb;
float:left;
margin:3px 8px 0 0;
height:60px;
width:60px;
}
ul.rp_thumbs2 .rp_thumb2 img {
height:60px;
width:60px;
}
span.rp_title {
font:normal normal 18px Open Sans Condensed, Helvetica, Arial, sans-serif;
display:block;
margin:0 0 5px;
line-height:1.4em;
}
span.rp_title2 {
font-size:14px;
}
span.rp_summary {
display:block;
margin:6px 0 0;
}
span.rp_meta {
background:transparent;
display:block;
font-size:11px;
font-weight:bold;
color:#8D8D8D;
text-transform:uppercase;
}
span.rp_meta a {
color:#8D8D8D !important;
display:inline-block;
}
span.rp_meta_date, span.rp_meta_comment, span.rp_meta_more {
display:inline-block;
margin-right:8px;
}
span.rp_meta_date:before {
content: "\f073";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right:4px;
}
span.rp_meta_comment:before {
content: "\f086";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right:4px;
}
span.rp_meta_more:before {
content: "\f0a9";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right:4px;
}
ul.rp_thumbs2 li a:hover, ul.rp_thumbs li a:hover {
color:#0072C6;
}
Ketiga, setelah meletakkan kode css diatas, maka langkah selanjutnya adalah copy kode berikut keumidan paste dan letakkan kode berikut tepat diatas kode </head>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commenttext = entry.link[k].title;
var commenturl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url;
thumburl = thumburl.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/");
} catch (error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d;
} else thumburl = no_thumb;
}
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
document.write('<ul class="rp_thumbs">');
document.write('<li>');
if (showpostthumbnails == true)
document.write('<a href="' + posturl + '"><div class="rp_thumb"><span class="rollover"></span><img width="' + thumb_width + '" height="' + thumb_height + '" alt="' + posttitle + '" src="' + thumburl + '"/></div></a>');
document.write('<span class="rp_title"><a href="' + posturl + '" target ="_top">' + posttitle + '</a></span>');
var towrite = '';
document.write('<span class="rp_meta">');
if (showpostdate == true) {
towrite = towrite + '<span class="rp_meta_date">' + cdday + '/' + cdmonth + '/' + cdyear + '</span>';
}
if (showcommentnum == true) {
if (commenttext == '1 Comments') commenttext = '1 Comment';
if (commenttext == '0 Comments') commenttext = 'No Comments';
commenttext = '<span class="rp_meta_comment"><a href="' + commenturl + '" target ="_top">' + commenttext + '</a></span>';
towrite = towrite + commenttext;
}
if (displaymore == true) {
towrite = towrite + '<span class="rp_meta_more"><a href="' + posturl + '" class="url" target ="_top">Read More...</a></span>';
}
document.write(towrite);
document.write('</span>');
document.write('<span class="rp_summary">');
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('');
document.write(postcontent);
document.write('');
} else {
document.write('');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('');
}
}
document.write('</span>');
document.write('</li>');
document.write('</ul>');
}
document.write('<ul class="rp_thumbs2">');
for (var i = 1; i < numposts2; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 1; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commenttext = entry.link[k].title;
var commenturl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var thumburl2;
try {
thumburl2 = entry.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/");
} catch (error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl2 = d;
} else thumburl2 = no_thumb2;
}
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
if (showpostthumbnails2 == true)
document.write('<a href="' + posturl + '"><div class="rp_thumb2"><img width="' + thumb_width2 + '" height="' + thumb_height2 + '" alt="' + posttitle + '" src="' + thumburl2 + '"/></div></a>');
document.write('<li>');
document.write('<span class="rp_title rp_title2"><a href="' + posturl + '" target ="_top">' + posttitle + '</a></span>');
var towrite = '';
document.write('<span class="rp_meta rp_meta2">');
if (showpostdate2 == true) {
towrite = towrite + '<span class="rp_meta_date rp_meta_date2">' + cdday + '/' + cdmonth + '/' + cdyear + '</span>';
}
if (showcommentnum2 == true) {
if (commenttext == '1 Comments') commenttext = '1 Comment';
if (commenttext == '0 Comments') commenttext = 'No Comments';
commenttext = '<span class="rp_meta_comment rp_meta_comment2"><a href="' + commenturl + '" target ="_top">' + commenttext + '</a></span>';
towrite = towrite + commenttext;
}
if (displaymore2 == true) {
towrite = towrite + '<span class="rp_meta_more rp_meta_more2"><a href="' + posturl + '" class="url" target ="_top">Read More...</a></span>';
}
document.write(towrite);
document.write('</span>');
document.write('</li>');
}
document.write("</ul>")
}
//]]>
</script>
<script type='text/javascript'>
var numposts = 1;
var numposts2 = 4;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = true;
var displaymore2 = false;
var showcommentnum = true;
var showcommentnum2 = true;
var showpostdate = true;
var showpostdate2 = true;
var showpostsummary = true;
var numchars = 100;
var thumb_width = 300;
var thumb_height = 140;
var thumb_width2 = 60;
var thumb_height2 = 60;
var no_thumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGDpV5lldefn9mUborCfK0VCNmAhbCnCcErRpIm5mY8FQlxi21KMnf9Ug9FGN6GVsftd75AP2__TThY0ro7xZ87t6LaeDWlJOErbzlEglHP2qYIY_HamSxs61ykJaURE1pd6z5_s-nNS7D/w300-c-h140/no-image.png'
var no_thumb2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwu5iHQ-1cqrzBZs5WsOZe5kAMP99ZXGicEuQhcc7RIMjxIhnJmCfXGrPGj93XHM99WXy6Ei6yYiHlNPPMJ9V2vzNAM6ZTcuQrsvd716Gd6osH_hLmh2pcxlEleRBmDK6GdIj7HcypHOb0/s60-c/no-image.png'
</script>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_width=200;
var image_height=150;
image_tag='<img width="'+image_width+'" height="'+image_height+'" src="'+image_url.replace('/s72-c/','/w'+image_width+'-h'+image_height+'-c/')+'" alt="'+post_title.replace(/"/g,"")+'" title="'+post_title.replace(/"/g,"")+'"/>';
if(post_title!="") return image_tag; else return "";
}
//]]>
</script>
Keterangan:
var numposts2 = : Ganti sesuai jumlah yang akan di tampilan kan
var thumb_width = : Ukuran lebar gambar thumbanil awal
var thumb_height = : Ukuran tinggi gambar thumbanil awal
var thumb_width2 = : Ukuran lebar gambar thumbanil ke dua
var thumb_height2 = : Ukuran tinggi gambar thumbanil ke dua
Keempat, langkah selanjutnya yang perlu sobat lakukan mencari kode <div id='backlinks-container'> dan copy serta letakkan kode berikut tepat diatas kode </div> diantara <div id='backlinks-container'>. Contoh : <div id='backlinks-container'> ......... scritp disini</div>.
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchLabel'><b:else/>
<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-1' maxwidgets='1' preferred='yes' showaddelement='no'>
<b:widget id='HTML80' locked='false' mobile='yes' title='Label 1' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<div class='widget-content recent-posts'>
<script>
document.write('<div class="recent-post-title"><h2><a href="/search/label/<data:content/>?max-results=10"><data:title/></a></h2></div>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-2' maxwidgets='1' preferred='yes' showaddelement='no'>
<b:widget id='HTML81' locked='false' mobile='yes' title='Art' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<div class='widget-content recent-posts'>
<script>
document.write('<div class="recent-post-title"><h2><a href="/search/label/<data:content/>?max-results=10"><data:title/></a></h2></div>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
<div class='clear'/>
<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-3' maxwidgets='1' preferred='yes' showaddelement='no'>
<b:widget id='HTML82' locked='false' mobile='yes' title='Vektor' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<div class='widget-content recent-posts'>
<script>
document.write('<div class="recent-post-title"><h2><a href="/search/label/<data:content/>?max-results=10"><data:title/></a></h2></div>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-4' maxwidgets='1' preferred='yes' showaddelement='no'>
<b:widget id='HTML83' locked='false' mobile='yes' title='Terpopuler' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<div class='widget-content recent-posts'>
<script>
document.write('<div class="recent-post-title"><h2><a href="/search/label/<data:content/>?max-results=10"><data:title/></a></h2></div>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
<div class='clear'/>
<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-5' maxwidgets='1' preferred='yes' showaddelement='no'>
<b:widget id='HTML84' locked='false' mobile='yes' title='Desain' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<div class='widget-content recent-posts'>
<script>
document.write('<div class="recent-post-title"><h2><a href="/search/label/<data:content/>?max-results=10"><data:title/></a></h2></div>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-6' maxwidgets='1' preferred='yes' showaddelement='no'>
<b:widget id='HTML85' locked='false' mobile='yes' title='Label 6' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<div class='widget-content recent-posts'>
<script>
document.write('<div class="recent-post-title"><h2><a href="/search/label/<data:content/>?max-results=10"><data:title/></a></h2></div>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</b:if>
</b:if>
<div class='clear'/>
</div>
Kelima, Jika sudah selesai semua, maka Save Template Sobat. Langkah ini belum selesai, setelah selesai save template sobat pindah pada menu Layout dan klik saja new widget pilih Javascript/HTML dan tuliskan kategori atau label blog sobat. Misalnya saya akan memanggil kategori atau label "pendidikan" maka yang harus saya tulis pada konten widget adalah "pendidikan" titlenya juga pendidikan agar sesuai dengan konten label.
Untuk lebih jelasnya, sobat bisa lihat pada gambar berikut; (gambar ini saya ambil dari blog Rian SEO.
Demikianlah Cara Membuat Multi Recent Post Seperti Blog Rian SEO. Semoga artikel tutorial ini bermanfaat bagi sobat dan teman-teman semua. Amin
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.