CARA MEMBUAT RELATED POST BLOG
Sabtu, Juni 06, 2015
Tambah Komentar
Ini artikel hanya iseng-iseng aja sobh soalnya udah kehabisan ide nih,
hehe. Oh iya siapa yang tidak kenal dengan blogger yang paling Top di
Indonesia yaitu Kang ismet ( Blog.kangismet.net
) dengan tampilan template dari blog kang ismet itu, banyak juga
blogger-blogger yang mengclone template kang ismet itu, mengapa? Ya
jelas, orang template kang ismet itu keren hehe.
Ya sudah gak usah ngomongin orang lagi ah! lebih baik kita langsung saja menuju pembahasan, yaitu cara membuat related post ala kang ismet , seperti yang saya bilang tadi , tampilan blog kang ismet kan keren tuh, yang jelas related post dari kang ismet ini pasti keren banget dong, Sampai-sampai saya juga memakai related post dari kang ismet hehe.
Baiklah
tidak usah banyak cincong lagi mari kita hajar, yang pertama tama yang
harus kita lakukan adalah logging ke akun blogger masing-masing yang
jelas hehe itu pasti wajib dong.
1. Yang pertama adalah , Pilih langsung Template
Edit HTML.
dan tambahkan kode ini, tepat di atas kode </head>
Ya sudah gak usah ngomongin orang lagi ah! lebih baik kita langsung saja menuju pembahasan, yaitu cara membuat related post ala kang ismet , seperti yang saya bilang tadi , tampilan blog kang ismet kan keren tuh, yang jelas related post dari kang ismet ini pasti keren banget dong, Sampai-sampai saya juga memakai related post dari kang ismet hehe.
.png)
1. Yang pertama adalah , Pilih langsung Template
dan tambahkan kode ini, tepat di atas kode </head>
<link href='https://kang-is.googlecode.com/svn/trunk/css/font-awesome.min.css' rel='stylesheet'/>2. Kemudian Letakkan Kode dibawah ini, tepat Di atas kode <data:post.body/> Biasanya kode ini ada 3 bagian, cari kode yang paling bawah.
<!-- Related Post Widget Start -->3. Nah, apabila kode di atas sudah anda masukkan kemudian kita akan memasukkan CSS nya lagi, agar kelihatan lebih keren dan menarik hehe. Silahkan anda masukkan CSS nya tepat di atas kode </style> atau ]]></b:skin>.
<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://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js' type='text/javascript'/>
</b:if>
<!-- Related Post Widget End -->
/* RELATED POST PUNYE KANG ISMET */4. Semua nya sudah selesai, yang terakhir adalah Simpan Template.
.related-post {margin:2em auto 0;font-size:15px;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;}
Belum ada Komentar untuk "CARA MEMBUAT RELATED POST BLOG"
Posting Komentar
"BAGAIMANA PENDAPAT ANDA"