Cara Memasang Multi Recent Posts Dengan label - Recent post dengan label sering kali kita jumpai pada template blog berita, blog yang kaya akan informasi dan juga seputar informasi, mungkin sebagian anda juga termasuk sebagai penggelola blog situs berita. Untuk itu, dalam artikel kali ini kita akan membahas bagaimana cara menciptakan recent post gaya gosip sesuai label.
Wigdet recent post ini ialah tampilan dari template Evo Magz punya mas sugeng, bila sebelumnya anda mencari bagaimana menciptakan recent post dengan label menyerupai evo magz, maka dalam artikel saya kali ini akan terjawab dengan pertanyaan anda tadi. Karena wigdet recent post ini, ialah salah satu ciri khas dari template evo magz punya mas sugeng, yang sebagian dari anda semua sudah mengetahui nya.
Sebelum anda menerapkan cara ini, harap untuk menerapkan fontawesome, sebab bila dalam template blogger anda belum terpasang fontawosome maka untuk tampilan nya akan sedikit berbeda dari yang orisinil nya.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>Salin aba-aba diatas dan tempel pada pecahan template anda sebelum aba-aba </head>
Sebelum anda melaksanakan tutorial ini, alangkah baik nya anda back up dulu template anda sebelumnya, untuk jaga-jaga bila cara ini gagal anda lakukan.
Pertama anda harus menyalin aba-aba CSS yang ada di bawah ini.
/* 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; }Selanjutnya silahkan anda copy lagi aba-aba dibawah ini semua nya.
<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="Cara Memasang Multi Recent Posts Dengan label Seperti Template Evo Magz v Cara Memasang Multi Recent Posts Dengan label Seperti Template Evo Magz v4.7" src="' + thumburl + '"/></div></a>'); document.write('<span class="rp_title"><a href="' + posturl + '" sasaran ="_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 + '" sasaran ="_top">' + commenttext + '</a></span>'; towrite = towrite + commenttext; } if (displaymore == true) { towrite = towrite + '<span class="rp_meta_more"><a href="' + posturl + '" class="url" sasaran ="_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="Cara Memasang Multi Recent Posts Dengan label Seperti Template Evo Magz v Cara Memasang Multi Recent Posts Dengan label Seperti Template Evo Magz v4.7" src="' + thumburl2 + '"/></div></a>'); document.write('<li>'); document.write('<span class="rp_title rp_title2"><a href="' + posturl + '" sasaran ="_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 + '" sasaran ="_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" sasaran ="_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/AVvXsEjOkPZ2RiWq3WEiXmpjJN4heBSZ3zAZiyQv88wPoUCLApJMh_ggDVQt-9Qiz6yVCjN9E9oM1qrdQTKhPhSRuhKes5hyzDMa2LUaSlFXTnLtbMpzrmwUuFHWqV7S1kDvhkI3myUFt05OFa4A/w300-c-h140/no-image.png' var no_thumb2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYzyJsQKv7UFY0BIxuwRyASWA8XArMV5HDM6y8TDmE_NIvsNtEZPz4CHw4VAiCydLdkNb-BIkl9Kaja2Q3IEtX-pX5u6t-IbwRfear3NkHAkIGVPWYaZhq8Zeawljmnxzrt_gIZpIQ-nRI/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="Cara Memasang Multi Recent Posts Dengan label Seperti Template Evo Magz v Cara Memasang Multi Recent Posts Dengan label Seperti Template Evo Magz v4.7"/g,"")+'" title="Cara Memasang Multi Recent Posts Dengan label Seperti Template Evo Magz v4.7"/g,"")+'"/>'; if(post_title!="") return image_tag; else return ""; } //]]> </script> - 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
Paste aba-aba di atas sempurna di pecahan atas kode </head>
Langkah berikut nya iyalah pemasangan aba-aba HMT, di pecahan pemasangan aba-aba ini letak nya tergantung kalian masing-masing. bila anda paham perihal banyak sekali macam aba-aba HMTL anda sanggup sesuka hati meletakan wigdet ini di pecahan mana yang anda inginkan, namun bila anda masih kurang paham anda sanggup menggikuti langkah yang saya berikan di bawah ini.
Salin lagi aba-aba HMTL dibawah ini semua nya.
Langkah berikut nya iyalah pemasangan aba-aba HMT, di pecahan pemasangan aba-aba ini letak nya tergantung kalian masing-masing. bila anda paham perihal banyak sekali macam aba-aba HMTL anda sanggup sesuka hati meletakan wigdet ini di pecahan mana yang anda inginkan, namun bila anda masih kurang paham anda sanggup menggikuti langkah yang saya berikan di bawah ini.
Salin lagi aba-aba HMTL dibawah ini semua nya.
<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>paste aba-aba yang sudah di salin di atas tadi sempurna di pecahan bawah aba-aba final dari <div id='backlinks-container'> </div> dan mungkin sebagian template berbeda-beda untuk pecahan tersebut, untuk lebih jelasnya cari aba-aba HMTL pecahan .blog-pager atau semacam nya.
Simpan template
Langkah terakhir ialah mengatur pecahan label apa yang anda ingin tampilan pada pecahan Recent post label tersebut. Anda hanya perlu menggatur di pecahan tata letak menyerupai referensi gambar dibawah ini sesuai dengan nama lebel yang ada di dalam blog anda.
