Senin, 11 September 2017

Cara Membuat Related Post Seo Friendly Ala Kang Ismet

Tags

Cara Membuat Related Post Seo Friendly Ala Kang Ismet - Selamat pagi sobat, kali ini saya mau share cara Membuat Related Post Seo Friendly Ala Kang Ismet. Pasti semua ada yang sudah tau dan ada yang belum tau ya bagaiamna sih bentuk dan model related post yang akan di share. Okey, berikut ini penampakan related postnya sobat.

Preview:
Cara Membuat Related Post Seo Friendly Ala Kang Ismet

Bagaimana, keren dan pastinya dapat membuat blog kamu menjadi lebih indah kan? 

Cara Membuat Related Post Seo Friendly Ala Kang Ismet

Masukkan kode dibawah ini sebelum ]]></b:skin>


/* ==== Related Post Widget Start ==== */

.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;
}
/* ==== Related Post Widget End ==== */


Jika sudah tambahkan kode berikut ini tepat setelah kode <div class='post-footer-line post-footer-line-1'>
<!-- 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 -->

Tambahan! 
Jika sobat ingin menampilkan icon font awesome, sobat bisa tambahkan script berikut ini diatas kode </head>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet"></link>

Selesai :)

loading...


EmoticonEmoticon