Cara membuat Related Post Bergambar Responsive

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtzdCAH8VqN63iRywbHEdlXMUdwZIosOeSmhknKoAf4z1tcH1tYkdZmsqBBrR3LuShcF_5hkq5_X_M7t6FQftvPU0TsmZH5CFjsvkZW5SVWysEnwz4D_58ao3TTQgvOhfS3wScTYJbu2Q/s1600/88.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtzdCAH8VqN63iRywbHEdlXMUdwZIosOeSmhknKoAf4z1tcH1tYkdZmsqBBrR3LuShcF_5hkq5_X_M7t6FQftvPU0TsmZH5CFjsvkZW5SVWysEnwz4D_58ao3TTQgvOhfS3wScTYJbu2Q/s320/88.jpg" width="320" /></a></div>Membuat Related Post atau yang sering disebut dikalangan blogger yaitu artikel terkait pada sebua blog. Fungsinya adalah untuk meningkatkan interlink pada postingan dan juga dapat meningkat pageview pada blogger. Dengan memasang Related Post, maka secara tidak langsung akan mempermudah para pengunjung blog anda untuk membaca artikel-artikel yang terkait dengan yang anda saat ini baca. Sehingga dapat membuat pengunjung betah bertahan lama di blogger anda. Related Post atau Artikel Terkait banyak digunakan dikalangan para blogger, selain untuk mempermudah pengunjung melihat artikel-artikel yang berhubungan dengan yang dibaca, Related Post dapat memper-ganteng blogger anda^.^.<br /><br />Sebelum melakukan praktekk, silakan anda backup terlebih dahulu Template anda. Karena jika tidak sesuai dengan keinginan anda, maka dengan mudah membalikan seperti semula lagi.<br /><br /><b>Cara Pasang:</b><br /><br />1. Masuk ke Blogger anda.<br />2. Template -> Edit HTML.<br />3. Temukan kode <b></head></b><br />4. Copy-Paste kode berikut ini, tepat diatas kode<b> </head></b><br /><pre data-codetype="CSS" title="CSS"><code class="language-css"><!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' /> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End--></code></pre>5. Jika sudah dipasang diatas <b></head> </b>. Temukan kode <b><div class='post-footer'></b>letakkan kode dibawha ini diatas kode<b> </b><b> </b><br /><br />NB: Kode<b> <span style="color: red;"><div class='post-footer'></span> </b>ada dua, jadi kalian pasang saja keduanya!<b> </b><br /><br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://maycyber-download.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV5fkUoTsT_Xz8987tLOojJoRIM1v0aRPzzV3s7s_LLYc1rxUg1GGx7EruJPKeimYmcON2s6CYWrs5h2z1d82IUOJK0cA1SNMtBLI_esm5hJQkh-B_vAM6ANHSPrbwLfWRyBvh9_wstCsk/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End--></code></pre>NB: <span style="color: red;"><b>Maxresults=5;</b></span> Jumlah postingan di Related Post, bisa diubah<b> 7</b><br />        <b><span style="color: red;">Related Post</span> </b>= Bisa diubah menjadi <b>Artikel Terkait</b><br /><br />6. <b>Save Template!</b><br /><br />Untuk melihat Related Post berbagai macam, Silakan lihat <a href="http://maycyber-download.blogspot.com/" target="_blank">Label Tags Related Post</a><br /><br />Demikianlah Tutorial Blogger kali ini, Sekian dari saya, <b>Semoga Bermanfaat!</b> Selamat Mencoba.</div>

Diposting oleh Mr Xiulung

Cara Membuat Related Post Yang Paling Simple, dan Aman!

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNA9vGToMyQGY8x3hqY6tIgjeT3MYNpMxO4X4cGBV1XawPpU7Vbl-KByO-_PdZlP9PCdy2zpQyO2m-G7NC9pV6AgjwceJIdK4SsqQENB2cWgIE6E7B219ovlx5jvJpoEGJdtB_mKClt6Y/s1600/3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNA9vGToMyQGY8x3hqY6tIgjeT3MYNpMxO4X4cGBV1XawPpU7Vbl-KByO-_PdZlP9PCdy2zpQyO2m-G7NC9pV6AgjwceJIdK4SsqQENB2cWgIE6E7B219ovlx5jvJpoEGJdtB_mKClt6Y/s400/3.png" width="400" /></a></div>Related Post banyak dan berbagai macam bentuk, ada yang beserta dengan gambar ada juga yang bergerak dan ada juga sejajar ke kanan dan lain-lain. Sekarang yang saya postingkan kali ini adalah Related Post yang Simple dan Aman alias hanya dengan Teks dan Link saja. Fungsinya sama yaitu membuat artikel terkait. Jika anda mau seperti Related Post di atas, ikut langkah-langkah berikut ini:<br /><br />NB: Silakan anda backup terlebih dahulu, misalkan Related Post ini tidak sesuai dengan keinginan anda, maka mudah untuk dikembalikan seperti semula!<br /><br /><b>CaraPertama:</b><br /><br />1. Masuk ke <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger </a>anda.<br />2. Template -> Edit HTML<br />3. Copy - Paste kode berikut ini, tepat diatas kode <span style="color: red;"><b>]]></b:skin></b><span style="color: black;"> .</span></span><br /><pre data-codetype="CSS" title="CSS"><code class="language-css">#related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px solid #88daed;margin:5px 0 10px;padding:15px 0 10px}<br />#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0}<br />#related-posts a{color:#0973CF;font:12px Verdana}<br />#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivGyauLv0v-IP6iDarrYU6xw_bJlPOtmpg-I0GZxaTcGOoR8IkRj-Nrd_yj3RLhyzOG5Ys7fZ5LfrkTIo6B4CJmOsMU5vUkD2j_xKDUr_isXPHJ6e1rekTpJEhkgfUNCLPBB4_2ZL_eoQ/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}<br />#related-posts a:hover{color:#c00;text-decoration:none}<br />#related-posts .widget{margin:0;padding:0}<br />#related-posts ul{list-style:none;margin:0;padding:0}</code></pre>4. Jika sudah? Temukan kode <b><span style="color: red;"></head><span style="color: black;"> </span></span></b><br /><span style="color: red;"><span style="color: black;"><span style="color: black;">5. Copy-Paste kode berikut ini, dan letak kan diatas kode <span style="color: red;"><b></head></b></span></span></span></span><br /><pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script type='text/javascript'><br />var relatedpoststitle=&quot;Related Posts&quot;;<br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br />var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};<br />//]]><br /></script></code></pre><br /><span style="color: red;"><span style="color: black;"><span style="color: red;"><span style="color: black;">6. Jika sudah, Temukan lagi kode <b><data:post.body/></b></span></span></span></span><br /><span style="color: red;"><span style="color: black;"><span style="color: red;"><span style="color: black;"><b>7. </b>Copy-paste kode berikut ini, dan letak kan dibawah kode<b> <data:post.body/> </b>Kode ini biasanya lebih dari satu, silakan <b>pilih yang kedua</b>!</span></span></span></span><br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='related-posts'><br /><b:loop values='data:post.labels' var='label'><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop><br /><script type='text/javascript'><br />var maxresults=6;<br />removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);<br /></script><br /></div><div class='clear'/><br /></b:if></code></pre><span style="color: red;"><span style="color: black;"><span style="color: red;"><b><br /></b><span style="color: black;">8. Save Template!</span></span></span></span><br /><br />Demikianlah Tutorial Blogger kali ini, Sekian Dari Saya. Terima kasih telah berkunjung, <b>Semoga Bermanfaat!</b></div>

Diposting oleh Mr Xiulung

Cara memasang Related Post Bergambar dengan Mudah

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIkVWyzugwDbnAlMzPq_p6nW6Y5pUyCg1Z7rmgLM0tSTkE9AB03zT52HtwZSVfD672I_GEUErK52gqVrR-udpnx0nHt2DheELCD5dGIDrLXHBqX6GDaGy0KzqaZgps_7yEH1BgBGpTWyg/s1600/3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIkVWyzugwDbnAlMzPq_p6nW6Y5pUyCg1Z7rmgLM0tSTkE9AB03zT52HtwZSVfD672I_GEUErK52gqVrR-udpnx0nHt2DheELCD5dGIDrLXHBqX6GDaGy0KzqaZgps_7yEH1BgBGpTWyg/s320/3.png" width="295" /></a></div>Related Post adalah sebagai artikel atau postingan yang masih dalam satu kategori atau istilahnya artikel terkait. Misalkan label nya tentang Tutorial Blogger, maka akan muncul semua tentang Tutorial Blogger. Related Post yang saya bisikan tips nya kali ini adalah Related Post Bergambar, "<i> Gambar Disamping Hanya Pemanis</i>" . Related Post yang saya berikan ini sejajar ke kanan, serta bergambar dan hemat ruang postingan anda.  Related Post tidak hanya menambah keren blog anda, tetapi juga membantu pageview bertambah. Postingan terkait ini sangat bermanfaat bagi blogger sendiri ataupun user. Sehingga memudahkan pengunjung menemukan artikel yang terkait, ataupun artikel yang menarik lainnya di blogger anda. Sebelum melakukan Tips ini, sebaiknya Backup terlebih dahulu Template anda, bisa dengan cara copy semua script HTML ke Notepad. Tujuannya adalah misalkan Related Post ini, tidak sesuai dengan keinginan anda maka dengan mudah mengembalikannya.<br /><br />Cara pertama:<br /><br />1. Masuk ke Blogger.<br />2. Template - Edit HTML<br />3. Copy - Paste kode berikut ini, dan letakkan di atas kode <b></head></b><br /><pre data-codetype="CSS" title="CSS"><code class="language-css"><!--Related Posts with thumbnails --><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><style type="text/css"><br />#related-posts {<br />float:center;<br />text-transform:none;<br />height:100%;<br />min-height:100%;<br />padding-top:5px;<br />padding-left:5px;}<br />#related-posts h2{<br />font-size: 1.6em;<br />font-weight: bold;<br />color: black;<br />font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;<br />margin-bottom: 0.75em;<br />margin-top: 0em;<br />padding-top: 0em;}<br />#related-posts a{<br />color:black;}<br />#related-posts a:hover{<br />color:black;}<br />#related-posts a:hover {<br />background-color:#00FF00;}<br /></style><br /><script src='http://kucopas-js.googlecode.com/files/releatedimage.js' type='text/javascript'/><br /></b:if><br /><!--Related Posts With Thumbnails By MayCyber-Download--></code></pre>4. Jika sudah? Copy-Paste lagi kode berikut ini dan letakkan dibawah kode <b> </b><br /><b><div class='post-footer-line post-footer-line-1'></b><br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><!-- Related Posts with Thumbnails --><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='related-posts'><br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.isLast != &quot;true&quot;'><br /></b:if><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><br /><script type='text/javascript'><br />var currentposturl=&quot;<data:post.url/>&quot;;<br />var maxresults=7;<br />var relatedpoststitle="Related Post";<br />removeRelatedDuplicates_thumbs();<br />printRelatedLabels_thumbs();<br /></script><br /></div><div style='clear:both'/><br /></b:if><br /><!-- Related Posts with Thumbnails --></code></pre>5. Simpan Template!<br /><br />Dan, Taraaaaa Related Post telah terpasang di Blogger anda.<br /><br /><b>Screenshoot:</b><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg28expeQzJTzKCTG7snExTSUtzuFEEbsrjguz6s5SlHk6MCHcsLM0aXq3okFfNJYjwrho4w2VMgu8wJUx6nl92Rf5fVrutYG4rgcRHUGQIf0-nwbh7GnSlEIil-Cgf2oxGffHXsM219zM/s1600/related+post+8+pos.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg28expeQzJTzKCTG7snExTSUtzuFEEbsrjguz6s5SlHk6MCHcsLM0aXq3okFfNJYjwrho4w2VMgu8wJUx6nl92Rf5fVrutYG4rgcRHUGQIf0-nwbh7GnSlEIil-Cgf2oxGffHXsM219zM/s1600/related+post+8+pos.jpg" /> </a><br /><br />Demikianlah Tutorial Blogger kali ini. Sekian dari saya, <b>Semoga Bermanfaat!</b></div>

Diposting oleh Mr Xiulung