Cara Memasang Related Post atau Artikel terkait seo frienly Valid HTML 5 - Assalamualikum wr.wb hai sobat semua selamat malam apa kabar !! oke nih sobat semua pada postingan kali ini Admin Cyber 88 akan share nih buat kalian semua yaitu Cara Membuat Artikel Terkait Ala Kang Ismet , Tau enggak related post / Artikel Terkait ?? .
Artikel Terkait merupakan sebuah postingan postingan yang dibawah artikel yang biasanya seperti link dan gambar yang berfungsi mencantumkan semua postingan yang berlabel dan merupakan agar mengurangi bounce rate pada blogspot.
Dengan kalian memasang related post ini kalian bisa mendapatkan juga visitor / pageview yang ingin membaca artikel artikel yang lain , memasang artikel terkait juga merupakan optimasi seo, oleh karena itu memasang artikel terkait harus dilakaukan oleh para blogger .
nah karena memasang artikel terkait ini sangat penting bagi para pengguna blogger kalian bisa membaca cara membuat Artikel terkait ( konten ) dibawah ini .
Cara Membuat Artikel Terkait Ala Kang Ismet
- Pastinya anda harus login di blogger dulu > Dashboard
- Klik Pada menu disamping "Template" > Edit Template
- Pada bagian isi template kalian klik dulu "CTRL+F" lalu cari kode "]]></b:skin>" atau "</style>" jika sudah ketemu masukkan CSS Dibawah ini diatas kode berikut .
<! --Artikel Terkait Start - Cyber 88 -->
.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}
<! --Artikel Terkait Finish - Cyber 88 -->
- dan jika kalian sudah memasang CSS diatas kemudian cari kode "<data:post.body>" ( Jika ada 3 kode "<data:post.body>" pilih yang terakhir saja , lalu jika anda sudah menemukan kode tersebut Pasang kode HTML dibawah kode tersebut .
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == "item"'>
<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'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Artikel Terkait:</h4>",
numPosts: 5,
titleLength: "auto",
containerId: "related-post",
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 -->
- Nah jika anda sudah memasang kode HTML Diatas ,, ingat jangan disimpan dulu templatenya , soal ada satu lagi nih kode yang harus dipasang yaitu Script Kode FontAwesome ,, karena font awesome merupakan diperlukan kalian cari dulu kode </head> jika sudah menemukan kode tsb pasang kode dibawah ini tepat diatas kode tersebut .
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
- nah jika sudah masang script diatas kemudian klik "simpan template"
Nah itulah Cara Membuat Artikel Terkait Ala Kang Ismet dan Demikanlah artikel tentang Cara Membuat Artikel Terkait Ala Kang Ismet dan semoga bermanfaat bagi kita semua wassalamualikum wr.wb
izin praktek dlo sob, soalnya ini masih sedikit yg pkek ok :D
ReplyDeletewah mantep related postnya,
ReplyDeleteizin coba dulu gan buat blog ane
wahhhh ..
ReplyDeleteane juga mau ahh tapi bakal tubrukan gak iya ??
sama template bawaan , apa harus di hapus dulu :3
http://bukan-cyber4rt.blogspot.com/
mantap sob artikelnya.. tutorial ini akan saya terapkan di blog baru saya deh..
ReplyDeletemkasi banyak
artikel terkait ala kang ismet ini juga butuh font awesome bro :)
ReplyDeletewah ternyata kyak gini ya buat artikel terkait kyak kang ismet .....
ReplyDeleteijin nyoba ya gan (y)
wah keren benar-benar mirip, izin praktekin dulu gan, lumayan buat nambah tampilan blog saya :D
ReplyDelete