Membuat Related Post Bergambar di Blog

Related post widget atau artikel terkait diakhir setiap postingan merupakan salah satu elemen yang sangat penting di blog. Kenapa demikian? karena related artikel bisa memudahkan pembaca untuk melihat artikel terkait lainnya di blog. Sehingga dengan sendirinya pembaca akan berlama-lama di blog kita, dan ini pun secara langsung dapat meningkatkan page view blog.

Bagaimana membuat related artikel yang bagus? Pada kesempatan ini saya akan memberikan sebuah tutorial singkat tentang cara membuat related post bergambar di blogspot. Berikut contoh tampilan artikel terkait yang akan kita buat:

Cara Buat Related Artikel dibawah Postingan Blog

*Masuk blogger > Edit template

1. Salin kode dibawah ini dan letakkan diatas kode ]]></b:skin>

/* css related posts */ .related-post {margin:30px 0 0;position:relative;padding:0 0 10px;} .related-post h4 {color:#333;text-transform:capitalize;font-size:140%;text-align:center;letter-spacing:1px;font-weight:400;position:relative;padding:15px 20px 12px;margin:0 0 20px} .related-post h4:after {content: "";position: absolute;width: 4px;height: 4px;background: #4588f3;border-radius: 50%;bottom: 0;left: 46%;box-shadow: 1em 0px 0px 0px #4588f3,2em 0px 0px 0px #4588f3} .related-post-style-3,.related-post-style-3 li {margin:0 auto;padding:0;list-style:none;word-wrap:break-word} .related-post-style-3 li a{ color: #4285f4; font-weight:400 !important;font-size:15px;line-height:1.4em;} .related-post-style-3 li a:hover{color:#444} .related-post-style-3 .related-post-item {display:inline-block;float:left;width:29.2%;height:192px;padding:0;margin-left:3%;margin-bottom:15px;position:relative;overflow:hidden} .related-post-style-3 .related-post-item:focus{outline:none;border:none} .related-post-style-3 .related-post-item-thumbnail {display:block;margin:0 0 10px;width:100%;height:95px;text-align:center;border-radius:5px} .related-post-style-3 .related-post-item-thumbnail img{width:100%;height:auto !important;transition:all 1s ease-out} /* Related Post di dalam postingan */ .post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc} .post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important} .post-terkait ul {margin:0;padding:0} .post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important} .post-terkait ul li:last-child{border:none !important} .post-terkait a {color:#1b71bc;font-size:13px !important} .post-terkait a:hover {text-decoration:underline} @media screen and (max-width:600px){.related-post{margin:30px 20px 0;}.related-post-style-3 .related-post-item-summary,.related-post-style-3 .related-post-item-thumbnail{display:none!important}.related-post-style-3 li a{font-size:16px;font-weight:bold!important;display:block}.related-post-style-3 .related-post-item{width:100%;margin:6px 0;height:auto;display:block;}}

2. Salin kode dibawah ini letakkan diatas kode </body>

<b:if cond='data:blog.pageType == "item"'><script type='text/javascript'>//<![CDATA[ !function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="http://yourjavascript.com/1983091225/dte-related-post.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}(); //]]></script>

3. Terakhir salin kode dibawah ini dan letakkan biasanya dibawah penutup </div> dari tombol share atau di sebagian template diletakkan dibawah kode <div class='post-footer-line post-footer-line-1'>

<div class='related-post' id='related-post'/> <script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: "<data:blog.homepageUrl/>", widgetTitle: "<h4> Artikel Terkait</h4> ", numPosts:6, summaryLength:0, titleLength: "auto", thumbnailSize: 150, noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqIa6sjnoZmbUCuZqZ-owNAoJ_oX2pBtzSPTWlqE7gy7jhAKMHsBVhg5i-PSYB-kJJaQyJmZQileNJ8_Phd4gIG5cQpJOUyvYaHkZqlvSJprm31XbpoQcquD0cypLfHK4sDLE-6z-UsF0/s1600/no_images.png", containerId: "related-post", newTabLink: false, moreText: "Read More", widgetStyle: 3, callBack: function() {} }; </script>

Itulah sedikit tutorial dari saya tentang membuat postingan terkait bergambar di bawah postingan blog. Semoga artikel ini mudah dimengerti dan dapat diterapkan oleh yang memerlukan. Jika ada yang kebingungan dalam penerapan kode-kode diatas pada template blog Anda, silahkan bertanya di kolom komentar. Admin akan berusaha menjawab semampunya, Terimakasih.

Advertiser