cara membuat related post per label valid html5

Widget related post per label memiliki tampilan yg menarik, cara membuat menganut sistem penulisan tag valid html 5 dan seo friendly. Widget related post perlabel ini menampilkan artikel per label pada kategori postingan halaman blog anda. Dengan tampilan yang menarik dan lebih elegan serta tidak memakan tempat yang begitu banyak ruang sehingga widget relate post per label ini menjai pilihan para bloger mania, dengan alasan bahwa script yang dipakai lebih ringan sehingga tidak memberatkan loading blog kesayangan anda. Pada postingan tutorial kali ini saya terinspirasi oleh seorang sahabat ( bang Saut ), semoga beliau senang atas tampilan dan kinerja oleh script wiget related post perlabel ini. Oke langsung saja menuju TKP dan simak tutorial dibawah ini, Untuk melihat tampilannya silahkan klik demo dibawah ini, lihat bagian artikel dibawah widget share yang berada pada halaman demo.

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : widget related post per label
By : Rivai Silaban | Blog Design
Update : Kamis 5 September 2013
******************************************/
#bdrel-posts {
float : left;
width : 100%;
margin:10px;
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 12px;
font-style: italic;
margin-bottom:5px;
} #bdrel-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
} #bdrel-posts a { text-decoration : none; }
#bdrel-posts a:hover { text-decoration : none; }
#bdrel-posts ul {
border : medium none;
margin : 10px;
padding : 0;
} #bdrel-posts ul li {
display : block;
background : url(&quot;&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 1px;
border-bottom:1px dotted #cccccc;
} #bdrel-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxb4TG2VGaoiXHfdbbKS9UBIPkDz7o-xYrDojIuyZuqCUgAVgP2PNayyteeaPYUDi0iwmMH9cWCnafhEfpo-OExDSu4aDav5Lkpj-DON_qKBjInm1g4wFxvckhchl6QVwbmn32PpKmdM/s1600/ico-rss.jpg) no-repeat 0 3px;
display:block;
list-style-type:none;
margin-bottom: 1px;
padding-left: 20px;
padding-top:0px;
color: #0000FF;
} #bdrel-posts ul li a {block;
color: #0000FF;
font : 11px Verdana;
}#bdrel-posts ul li a:hover {block;
color: #990000;
}/*** Blog Design CSS and ***/

Install Script

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Cari code
  
  <div class='post-footer-line post-footer-line-2'/>
  
  atau Kode
  
  <div class='post-footer-line post-footer-line-3'/>
  
  
• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
• Copy Code HTML dibawah ini, paste di bawah code
  <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda atau seperti related post diatas sosial share yang ada dibawah postingan ini.
• Save template anda dan lihat hasilnya, selamat berkreative.

<!-- Rivai Silaban | BLOG DESIGN script related post start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top: 10px;'>
<div style='background-color: #EEFDFB;margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='related-posts'>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 20; maxNumberOfPostsPerLabel = 11; maxNumberOfLabels = 4; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;ardi33&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script>
</div>
<script type='text/javascript'>
RelPost();</script>
</div>
</div>
</b:if>
<div style='clear: both;'/>
<!-- Rivai Silaban | BLOG DESIGN script related post End -->

Keterangan Code

• Tulisan kode warna MERAH adalah jumlah tampilan link related post yang akan ditampilkan.
• Tulisan warna BIRU adalah kode html warna latar belakang.
• Tulisan warna HIJAU adalah tinggi dari widget
• Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan related post ini dengan thems template anda.

Kesimpulan

Widget Related Post per label ini sangat bagus anda pasang di halaman blog anda selain untuk mempercantik tampilan akan meningkatkan trafik pengunjung halaman blog anda. Widget Related Post ini valid html 5 dan CSS 3.

Bila teman teman mengalami masalah dalam pemasangan wiget ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini.

Widget Relate Post per label valid html 5
Kamis, 05 September 2013
By : Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 5:10 PM