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 dapat membaca artikel lainnya yang masih bekerjasama dan tentunya menciptakan pengunjung dapat betah untuk membaca artikel yang bermanfaat lainnya. Untuk DEMO dapat lihat pada bab bawah postingan :)

Untuk yang ingin memakai ikuti tutorial dibawah ini:

1. Masuk ke akun Blogger
2. Pilih Template dan Edit HTML
3. Silahkan simpan arahan CSS dibawah ini di atas arahan ]]></b:skin> atau arahan </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 arahan berikut diatas arahan </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 arahan HTML berikut sempurna dibawahnya.

Biasanya ada 3 atau 4 arahan tersebut silahkan letakkan pada arahan nomor 2 atau yang sudah ada  tinggal mengganti arahan 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 goresan pena Artikel Terkait anda dapat menggantinya dengan cita-cita 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.

Bagikan Artikel ini