Cara Menampilkan Related Post Di Bawah Postingan di Blogspot

<div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Salah satu keuntungan dalam menggunakan <a href="http://www.tulisanbloggerindonesia.com/2015/06/langkah-membuat-blog-di-wordpress.html" target="_blank">wordpress</a> <a href="http://www.tulisanbloggerindonesia.com/2015/06/tip-blogging-self-dan-free-hosted-blog.html" target="_blank">self-hosted</a> adalah kemudahan menambahkan plugin sesuai keinginan kita. Dengan jumlah plugin tak terbatas, termasuk salah satunya adalah plugin related post. Sedangkan untuk menampilkan related post di bawah postingan di blogspot itu gak semudah itu. Kita harus memasukkan script pada blog kita. </span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><h3 style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Cara Menampilkan Related Post di Bawah Postingan di Blogspot</span></h3><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Seperti yang TBI tuliskan di atas, menggunakan script yang perlu dimasukkan dalam template blog kita, cara menampilkan related post di blogspot adalah sebagai berikut: </span><br /><span style="font-family: "verdana" , sans-serif;"></span><br /><a name="more"></a><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"></div><span style="font-family: "verdana" , sans-serif;"></span><br /><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">1. Login ke Blogspot, masuk ke dalam dashboard blog kita.</span></div><span style="font-family: "verdana" , sans-serif;"></span><span style="font-family: "verdana" , sans-serif;"><div style="text-align: justify;">2. Pilih Template dan kemudian pilih Edit HTML.</div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcViEVJiw06MOK_iPIROEg5gJnQScW533qMk6sGhAeeiqi0dN2DqkEn8b8RP8KZzMIb0Ccdye5H1sxI__rACO4VOwtRimS9ZycjU5-unGc4txrNewxqhRniDyo6reWuKJliPECjTTZ144/s1600/edit+html+template.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="menampilkan related post di bawah postingan di blogspot" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcViEVJiw06MOK_iPIROEg5gJnQScW533qMk6sGhAeeiqi0dN2DqkEn8b8RP8KZzMIb0Ccdye5H1sxI__rACO4VOwtRimS9ZycjU5-unGc4txrNewxqhRniDyo6reWuKJliPECjTTZ144/s400/edit+html+template.JPG" title="cara mudah menampilkan related post di blogspot tanpa script" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Edit HTML Template untuk menampilkan related post di blogspot</td></tr></tbody></table><div style="text-align: justify;"><br /></div></span><span style="font-family: "verdana" , sans-serif;"><div style="text-align: justify;">3. Cari </head> di dalam html tersebut. Caranya dengan Ctrl + F dan ketikkan "</head>" </div></span><span style="font-family: "verdana" , sans-serif;"><div style="text-align: justify;">4. Copy paste kan kode berikut ini tepat di atas </head></div></span><br /><div><blockquote class="tr_bq" style="text-align: justify;"><span style="background-color: #eeeeee; color: #333333; font-family: "arial" , serif; font-size: 14px; line-height: 22.4px;"><style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvA1vdHlcQnl1RM2T989-T27NkcaGARBq-___I1mofH75IfNFGxMM-bwDt5D4cabLnW_UtocrOiw_Hz1WcywFuwu9Yw-sgk5U14Hi2PgSnF_ONcIqoz_RXhnigIpnP779VPelMAa6haII/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/11631137121/related_post_pelajaran_blog.js' type='text/javascript'/></span></blockquote><span style="font-family: "verdana" , sans-serif;"></span><br /><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">5. Kemudian cari kembali <data:post.body/></span></div><span style="font-family: "verdana" , sans-serif;"></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">6. Copy dan paste script berikut tepat di bawah kode tersebut</span></div><blockquote class="tr_bq"><div style="text-align: justify;"><span style="background-color: #eeeeee; color: #333333; font-family: "arial" , serif; font-size: 14px; line-height: 22.4px;"><br/><br/><b:if cond='data:blog.pageType == "item"'></span></div><span style="background-color: #eeeeee; color: #333333; font-family: "arial" , serif; font-size: 14px; line-height: 22.4px;"></span><br /><div style="text-align: justify;"><span style="background-color: #eeeeee; color: #333333; font-family: "arial" , serif; font-size: 14px; line-height: 22.4px;"><span style="line-height: 22.4px;"><div id="related-posts"></span></span></div><span style="background-color: #eeeeee; color: #333333; font-family: "arial" , serif; font-size: 14px; line-height: 22.4px;"></span><span style="background-color: #eeeeee; color: #333333; font-family: "arial" , serif; font-size: 14px; line-height: 22.4px;"><div style="text-align: justify;"><span style="line-height: 22.4px;"><font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'></span></div></span><span style="background-color: #eeeeee; color: #333333; font-family: "arial" , serif; font-size: 14px; line-height: 22.4px;"><div style="text-align: justify;"><span style="line-height: 22.4px;"><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font></span></div></span><span style="background-color: #eeeeee; color: #333333; font-family: "arial" , serif; font-size: 14px; line-height: 22.4px;"><div style="text-align: justify;"><span style="line-height: 22.4px;"><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</span></div></span><span style="background-color: #eeeeee; color: #333333; font-family: "arial" , serif; font-size: 14px; line-height: 22.4px;"><div style="text-align: justify;"><span style="line-height: 22.4px;"></script></span></div></span><span style="background-color: #eeeeee; color: #333333; font-family: "arial" , serif; font-size: 14px; line-height: 22.4px;"><div style="text-align: justify;"><span style="line-height: 22.4px;"></div></b:if></span></div></span></blockquote><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Sudah? TBI anjurkan untuk <b>pratinjau template </b>sebelum menyimpannya ya. Kalau tidak ada error dalam pratinjau, simpan dan cek seperti apa tampilan postingan blog kamu. Muncul? </span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Kalau TBI mencobanya di blog yang memang khusus untuk cek settingan :D Dan muncul seperti ini. </span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVfN3LoMPme849MPDN0nH_JXm6bKoU4ZAtJS5hSD5NrR93lmZJz0B4Xum8lMcVCDDpzm_-Ym9M5o7_MwBG8-tPS7Op2EZlvdQBcy575y1_6Hv0nBKctrMoB6suXpr_qEtEbYElN3zCKI/s1600/tampilan+setelah+script+related.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="menampilkan related post di bawah postingan di blogspot" border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVfN3LoMPme849MPDN0nH_JXm6bKoU4ZAtJS5hSD5NrR93lmZJz0B4Xum8lMcVCDDpzm_-Ym9M5o7_MwBG8-tPS7Op2EZlvdQBcy575y1_6Hv0nBKctrMoB6suXpr_qEtEbYElN3zCKI/s400/tampilan+setelah+script+related.JPG" title="cara mudah menampilkan related post di blogspot" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Menampilkan related post di bawah postingan di blogspot dengan script</td></tr></tbody></table><br /><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Cara Mudah Menampilkan Related Post di Blogspot</span></h3><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Kekurangan cara di atas adalah kalau salah copy paste template pada saat edit HTML itu, yang ada template blog kalian akan hilang begitu saja. Sayang kan kalau demikian. Blog yang kita buat, apapun <a href="http://www.tulisanbloggerindonesia.com/2015/06/mengapa-harus-menulis-blog.html" target="_blank">tujuan membuat blog</a> itu, jadi rusak. Jadi sangat tidak dianjurkan kalau tidak paham cara edit HTML ataupun takut mengedit. </span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Eh tapi jangan sedih, TBI menemukan cara mudah menampilkan related post di blogspot lainnya nih. Caranya hampir mirip dengan menggunakan plugin di wordpressorg. Namanya adalah Linkwithin. </span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Cara membuat related post dengan linkwithin ini bisa dilakukan dengan beberapa langkah mudah saja: </span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">1. Buka website linkwithin</span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">2. Isi data yang diminta seperti email, blog link, platform blog dan berapa jumlah related post yang ingin ditampilkan. </span></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3QPv4CfO-Vq8l00bzCdqUzir2zVEu3CPbeEmE1wgC1ssQYIR_Z4T9YJvfFIWHMmzz13b9reOm62aPkVKoJRaR9ZLYdnuujrfqPYjpLIi0JwdCF908uk7NLyU1x4Y80ZWwgGaTNw_pHN8/s1600/linkwithin.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="menampilkan related post di bawah postingan di blogspot" border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3QPv4CfO-Vq8l00bzCdqUzir2zVEu3CPbeEmE1wgC1ssQYIR_Z4T9YJvfFIWHMmzz13b9reOm62aPkVKoJRaR9ZLYdnuujrfqPYjpLIi0JwdCF908uk7NLyU1x4Y80ZWwgGaTNw_pHN8/s320/linkwithin.JPG" title="cara mudah menampilkan related post di blogspot" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Isi data aja... </td></tr></tbody></table><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">3. Get Widget.</span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">4. Install widget</span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">5. Pilih blog yang ingin dipasangkan widget</span></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbe_2gKFR-pjtGEQ616CjjHz5_xB3rTkgsJtXI6nxDHM9ylqnR_C690Irz5WbTyHm4CBLCwfRYlODoBwc8SvGxOXqgQRkAH2PSaHtg8ER8kKvh2kTIzyudBUkIpeL3-SDLHtc9OIu1t48/s1600/add+widget+linkwithin+ke+blog+yang+diinginkan.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="menampilkan related post di bawah postingan di blogspot" border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbe_2gKFR-pjtGEQ616CjjHz5_xB3rTkgsJtXI6nxDHM9ylqnR_C690Irz5WbTyHm4CBLCwfRYlODoBwc8SvGxOXqgQRkAH2PSaHtg8ER8kKvh2kTIzyudBUkIpeL3-SDLHtc9OIu1t48/s400/add+widget+linkwithin+ke+blog+yang+diinginkan.JPG" title="cara mudah menampilkan related post di blogspot" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Pilih Blog yang diinginkan</td></tr></tbody></table><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">6. Atur lokasi widget</span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Pada saat kita klik get widget, sebenarnya akan muncul halaman petunjuk yang lengkap dan mudah diikuti. Setelah install widget dan mengatur penempatannya, related post akan segera muncul deh. </span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><h3 style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Kesimpulan Membuat Related Post Di Blogspot</span></h3><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Blogspot memang terkenal dengan kemudahan kustom blog dengan keinginan kita sendiri. Jika kamu termasuk yang mau belajar edit HTML - walau hanya sedikit, cara menampilkan related post di bawah postingan di blogspot yang pertama, cocok untuk kamu. </span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Kekurangan cara pertama itu adalah<b> kalau salah edit, bisa mengakibatkan tampilan blog kita berantakan.</b> Dan biasanya blogger yang mengalami ini bisa jadi panik. </span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Cara mudah menampilkan related post di blogspot dengan Linkwithin itu jauh lebih mudah untuk diterapkan. Apalagi jika kamu takut edit html. Tapi ada kekurangannya juga, yaitu<b> tidak bisa menampilkan lebih dari 5 related post. </b>Sedangkan dengan script, kekuasaan di tangan kita. </span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;"><br /></span></div><div style="text-align: justify;"><span style="font-family: "verdana" , sans-serif;">Kalau kalian, termasuk yang mana? Menampilkan related post di bawah postingan di blogspot kalian dengan cara pertama atau cara kedua? </span></div><br /><div style="text-align: justify;"><br /></div></div>

Posted by Hii Sekai