 |
| Artikel Terkait Ala Kang Ismet |
Sebenarnya sudah banyak cara untuk membuat artikel terkait ala kang ismet di google, disini saya hanya ingin memperluasnya saja, dan untuk berbagi pengetahuan kepada agan-agan semua, artikel terkait ini SEO, keren, dan yang paling penting Valid HTML5, dan CSS ala kang ismet
Langsung saja disimak cara membuatnya :
1. Masuk ke blogger
2. Lalu ke Template > Edit HTML
3. Letakkan kode dibawah ini tepat dibawah kode
<head><link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>*Lewati langkah ini jika di blog agan sudah terpasang font awesome4. Jangan disimpan dulu, Letakkan kode dibawah ini tepat diatas
]]></b:skin> atau </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}5. Langkah terakhir, Letakkan kode dibawah ini tepat dibawah kode
<data:post.body/> (biasanya kode ini lebih dari 2, agan pilih aja yang terakhir atau coba satu persatu)<!-- 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 -->6. Klik Simpan, dan lihat perubahannya di blog agan....
Nah gimana ? mudah aja kan caranya ? hehehe.... Semoga Bermanfaat
No comments:
Post a Comment