Membuat Artikel Terkait ala Kang Ismet Valid HTML 5

Membuat Artikel Terkait ala Kang Ismet Valid HTML 5 - Memasang Artikel Terkait atau Related Post sangatlah penting dimana pengunjung bisa me...

Membuat Artikel Terkait ala Kang Ismet Valid HTML 5 - Memasang Artikel Terkait atau Related Post sangatlah penting dimana pengunjung bisa membaca artikel lainnya yang masih berhubungan dan tentunya membuat pengunjung bisa betah untuk membaca artikel yang bermanfaat lainnya. Untuk DEMO bisa lihat pada bagian bawah postingan :)

at
Untuk yang ingin menggunakan ikuti tutorial dibawah ini:
1. Masuk ke akun Blogger
2. Pilih Template dan Edit HTML
3. Silahkan simpan kode CSS dibawah ini di atas kode ]]></b:skin> atau kode </style>
.related-post {
 margin:2em auto 0;
 font-size:13px;
 background:#fff;
 border-radius:4px;
}
.related-post h4 {
 font-size:14px;
 margin:0 0 .5em;
 background:#9dcb63;
 color:#fff;
 padding:14px 20px 14px 75px;
 font-weight:normal;
 border-radius:4px 4px 0 0;
 position:relative;
    font-family:Oswald,Arial, Sans-Serif;
    text-transform:uppercase;
}
.related-post h4:before {
 content: "\f074";
 font-family:fontAwesome;
 font-size:22px;
 font-style: normal;
 background-color:#8db857;
 color:#fff;
 border-radius:4px 0 0 0;
 top:0;
 left:0;
 padding:13px 20px;
 position:absolute;
}
ul.related-post-style-1 {
padding-left:0 !important;
    margin-top:-12px;
}
.related-post-style-1 li {
 list-style:none;
 padding:15px 20px;
 border-top:1px solid #eceef5;
}
.related-post-style-1 li a{
 color:#79798d;
 text-decoration:none;
}
.related-post-style-1 li a:hover{
 color:#33aea5;
 text-decoration:none;
}
.related-post-style-1 li:before {
 content: "\f08e";
 font-family:fontAwesome;
 color:#c7cbd4;
 font-style: normal;
 top:0;
 left:0;
 margin-right:13px;
}
4. Letakkan kode berikut diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
5. Cari kode <data:post.body/> Dan letakan kode HTML berikut tepat dibawahnya.
Biasanya ada 3 atau 4 kode tersebut silahkan letakkan pada kode nomor 2 atau yang sudah ada  tinggal mengganti kode HTML dibawah ini 
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-post' class='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;,
      numPosts: 5,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->
Pada tulisan Artikel Terkait anda bisa menggantinya dengan keinginan anda dan numPosts: 5 adalah jumlah yang akan ditampilan.
6. Simpan Template

Semoga Postingan tentang Membuat Artikel Terkait ala Kang Ismet Valid HTML 5 bisa bermanfaat.

COMMENTS

BLOGGER: 87
Loading...
Name

Adsense,5,CSS,8,Font,1,HTML,5,Javascript,5,Jquery,1,Lain-lain,5,PHP,1,SEO,3,Template,45,Tips,2,Tutorial,50,Widget,1,
ltr
item
HBT Blog: Membuat Artikel Terkait ala Kang Ismet Valid HTML 5
Membuat Artikel Terkait ala Kang Ismet Valid HTML 5
http://3.bp.blogspot.com/-lAdHcudtJKo/UxjOR1iwvQI/AAAAAAAABZ4/42AjPeYNz2E/s1600/AT+ala+kang+ismet.jpg
http://3.bp.blogspot.com/-lAdHcudtJKo/UxjOR1iwvQI/AAAAAAAABZ4/42AjPeYNz2E/s72-c/AT+ala+kang+ismet.jpg
HBT Blog
http://hollabacktexas.blogspot.com/2014/03/membuat-artikel-terkait-ala-kang-ismet.html
http://hollabacktexas.blogspot.com/
http://hollabacktexas.blogspot.com/
http://hollabacktexas.blogspot.com/2014/03/membuat-artikel-terkait-ala-kang-ismet.html
true
4727374246882403435
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy