Cara Membuat Artikel Terkait valid HTML5 dan CSS3 » bertemu lagi dengan saya pada artikel kali ini saya ingin berbagi trik Cara Membuat Artikel Terkait valid HTML5 dan CSS3 bagi anda yang ingin mencobanya bisa mengikuti langkah2 di bawah ini.
1. Masuk ke akun Blogger
2. Pilih Template dan Edit HTML
3. Silahkan simpan kode CSS dibawah ini di atas kode ]]></b:skin> atau kode </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;
}
Letakkan kode berikut diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
5. Cari kode <data:post.body/> Dan letakan kode HTML berikut tepat dibawahnya.
<!-- 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. Simpan Template
semoga artikel tentang Cara Membuat Artikel Terkait valid HTML5 dan CSS3 bisa membuat blog anda lebih SEO.
0 komentar:
Post a Comment