Cara Menciptakan Artikel Terkait Di Bawah Postingan 2014
Membuat atau Memasang Artikel Terkait (Related Post) di blog valid HTML5 dan CSS3 fungsinya untuk menciptakan pengunjung membaca artikel kita yang lainnya dan tentunya yang masih berafiliasi dengan isu yang mereka baca sebelumnya, ini sangat membantu visitor/pengunjung untuk lebih leluasa membaca artikel lain yang mungkin bermanfaat untuk diketahui. Cara menciptakan artikel terkait di bawah postingan ini sanggup dibilang ialah Sebuah Link atau Url yang di kelompokan dan saling berkaitan atau berafiliasi dan bahkan sanggup satu topik, makanya di dalam script artikel terkait tidak akan sanggup bekerja kalau postingan Anda belum Anda kasih Label. dan tentunya artikel terkait yang akan di buat ini sudah valid HTML5 dan CSS3.
Yang sudah ingin mencoba, berikut ialah cara menciptakan artikel terkait (Related Posts) ibarat pada bab bawah artikel ini :
Yang sudah ingin mencoba, berikut ialah cara menciptakan artikel terkait (Related Posts) ibarat pada bab bawah artikel ini :
1. Masuk ke blogger
2. Pilih Template > Click Edit Template.
3. Lalu cari arahan <data:post.body/>..!! kalau Anda menemukan banyak arahan tersebut, gunakan arahan yang kedua.
Note : Biasanya pada pemasangan inilah trik ini tidak berhasil, jadi hati-hatilah dan teliti dalam meletakkannya.
4. Copy-paste arahan berikut ini sempurna di bawahnya:
<b:if cond='data:blog.pageType == "item"'>
<div class='related-post' id='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 src='https://googledrive.com/host/0Bx1vcPxhxPAgSVFiVlpWdTZyelU/Related-post-Valid-HTML5.js' type='text/javascript'/></b:if>
<div class='related-post' id='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 src='https://googledrive.com/host/0Bx1vcPxhxPAgSVFiVlpWdTZyelU/Related-post-Valid-HTML5.js' type='text/javascript'/></b:if>
5. Kemudian cari arahan ]]></b:skin> atau </style>
6. Copy-paste code CSS berikut ini sempurna diatasnya :
7. Simpan Template Anda.
6. Copy-paste code CSS berikut ini sempurna diatasnya :
.related-post { margin:0 auto; font-size:13px; background:#fff; border-radius:4px}
.related-post h4 {margin:0 0 10px;border-bottom:4px solid #999;color:#333;padding:6px 20px 6px 5px;font-weight:normal;position:relative;font-family:Oswald,Arial, Sans-Serif;text-transform:uppercase}
ul.related-post-style-1 {padding-left:0 !important; margin-top:-12px}
.related-post-style-1 li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHj4s6o3pUbWho-zgbXmLVhpX5r8d5zCLVmYQYTSd1cK0y3m_oPIAqwMpP3m-zLa-0sJvvrWniilDI-Do-D_JOMR0-x-iHWhksLWnJT0E1NhB0jxLQbNJXjUny1IZKrTPuNsaqNYmi7LI/s1600/Art-tugasku4u.png) no-repeat 8px 14px;list-style:none; padding:10px 20px 8px 30px; border-top:1px solid #eceef5}
.related-post-style-1 li a{ color:#555; text-decoration:none}
.related-post-style-1 li a:hover{ color:#39a6f3; text-decoration:none}
.related-post h4 {margin:0 0 10px;border-bottom:4px solid #999;color:#333;padding:6px 20px 6px 5px;font-weight:normal;position:relative;font-family:Oswald,Arial, Sans-Serif;text-transform:uppercase}
ul.related-post-style-1 {padding-left:0 !important; margin-top:-12px}
.related-post-style-1 li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHj4s6o3pUbWho-zgbXmLVhpX5r8d5zCLVmYQYTSd1cK0y3m_oPIAqwMpP3m-zLa-0sJvvrWniilDI-Do-D_JOMR0-x-iHWhksLWnJT0E1NhB0jxLQbNJXjUny1IZKrTPuNsaqNYmi7LI/s1600/Art-tugasku4u.png) no-repeat 8px 14px;list-style:none; padding:10px 20px 8px 30px; border-top:1px solid #eceef5}
.related-post-style-1 li a{ color:#555; text-decoration:none}
.related-post-style-1 li a:hover{ color:#39a6f3; text-decoration:none}
Keterangan :
1. Artikel Terkait : Anda juga sanggup menggantinya dengan goresan pena yang Anda sukai.
2. background:#fff : ialah warna backgroundnya, Anda sanggup menggantinya sesuai dengan harapan sobat, silahkan lihat disini : Daftar arahan warna HTML
3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHj4s6o3pUbWho-zgbXmLVhpX5r8d5zCLVmYQYTSd1cK0y3m_oPIAqwMpP3m-zLa-0sJvvrWniilDI-Do-D_JOMR0-x-iHWhksLWnJT0E1NhB0jxLQbNJXjUny1IZKrTPuNsaqNYmi7LI/s1600/Art-tugasku4u.png, Anda juga sanggup merubah gambar ini dengan memasukkan link url gambar Anda sendiri.
7. Simpan Template Anda.
Semoga cara menciptakan artikel terkait di bawah postingan blog ini sanggup bermanfaat buat blogger yang lainnya....
Baca juga Cara Memasang iklan kliksaya di blog. Gunanya untuk mendapat penghasilan uang dari blog atau website anda. Cara kerjanya yaitu sistem PPC (Pay Per Click), Anda akan dibayar setiap pengunjung mengklik iklannya...
0 Response to "Cara Menciptakan Artikel Terkait Di Bawah Postingan 2014"
Posting Komentar