Total Tayang
Selasa, 18 Maret 2014
Cara Membuat Artikel Terkait di Bawah Postingan
Membuat atau
Memasang Artikel Terkait (Related Post) di blog valid HTML5 dan CSS3 fungsinya untuk membuat
pengunjung membaca artikel kita yang lainnya dan tentunya yang masih
berhubungan dengan berita yang mereka baca sebelumnya, ini sangat membantu
visitor/pengunjung untuk lebih leluasa membaca artikel lain yang mungkin
bermanfaat untuk diketahui. Cara membuat artikel terkait di bawah postingan
ini bisa dibilang adalah Sebuah Link atau Url yang di kelompokan dan saling
berkaitan atau berhubungan dan bahkan bisa satu topik, makanya di dalam script artikel
terkait tidak akan bisa bekerja jika 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 adalah cara membuat artikel terkait (Related
Posts) seperti pada bagian bawah artikel ini :
1. Masuk ke
blogger
2. Pilih
Template > Click Edit Template.
3. Lalu cari
kode <data:post.body/>..!! jika Anda menemukan banyak kode
tersebut, gunakan kode yang kedua.
Note : Biasanya pada
pemasangan inilah trik ini tidak berhasil, jadi hati-hatilah dan teliti dalam
meletakkannya.
4. Copy-paste kode berikut ini tepat 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 kode ]]></b:skin>
atau </style>
6. Copy-paste code CSS berikut ini tepat diatasnya :
6. Copy-paste code CSS berikut ini tepat 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/AVvXsEjKw1Se4-NCDjx2aHWe-CoxsCxYP3EDrO0r0lRKDvpPRtdYLx9lTfetA7MtgJPbFKRXbuosynviNw4ZKhx0l2pz4RFUsvr-zvcyiAbEW4Zouy4QPNfHTttyLSFTgvGpD1mqIROsCGZBGS47/s1600/Artikel-Terkait.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/AVvXsEjKw1Se4-NCDjx2aHWe-CoxsCxYP3EDrO0r0lRKDvpPRtdYLx9lTfetA7MtgJPbFKRXbuosynviNw4ZKhx0l2pz4RFUsvr-zvcyiAbEW4Zouy4QPNfHTttyLSFTgvGpD1mqIROsCGZBGS47/s1600/Artikel-Terkait.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
dapat menggantinya dengan tulisan yang Anda sukai.
2. background:#fff : adalah warna backgroundnya,
Anda bisa menggantinya sesuai dengan keinginan sobat, silahkan lihat disini : Daftar kode warna HTML
3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKw1Se4-NCDjx2aHWe-CoxsCxYP3EDrO0r0lRKDvpPRtdYLx9lTfetA7MtgJPbFKRXbuosynviNw4ZKhx0l2pz4RFUsvr-zvcyiAbEW4Zouy4QPNfHTttyLSFTgvGpD1mqIROsCGZBGS47/s1600/Artikel-Terkait.png, Anda juga dapat merubah gambar ini
dengan memasukkan link url gambar Anda sendiri.
7. Simpan Template Anda.kutipan dari web : http://www.tugasku4u.com
Selamat mencoba semoga berhasil
Langganan:
Posting Komentar
(Atom)
Entri Populer
- 001. Koleksi Door (Door Collection)_AndiCang_01 Keterangan : Pintu 600, Pintu 650, Pintu 700, Pintu 800, Pintu 900, Pintu 1000. P...
- 01. CRYPTO Actions PlugIn For Autoplay Media Sudio Klik Show untuk ScreenShoot Klik Show untuk Detail "This plugin expands th...
- Legacy Family Tree Deluxe 7Introduction: Legacy Family Tree Deluxe 7.5.0.278 Legacy Family Tree Deluxe 7 Legacy Family Tree Deluxe 7.5.0....
- EPUB Converter is a tool that offers an easy, efficient and quick way to help you convert EPUB files to other formats, and vice versa. EPUB...
Google Follower
0 komentar:
Posting Komentar