Yosh!,Kali ini kita akan membahas suatu tutorial yang sangat mudah.tutorial ini adalah
"Cara Membuat Recent Post per Label".Trik ini saya ambil dari template fastest magz.oke deh mas langsung aja.
Tutorialnya:
- Login ke Blogger
- Masuk ke Menu template
- Lalu cari kode </style> atau ]]></b:skin> dan letakan kode dibawah ini tepat diatas kode tadi
/* RECENT POSTS LABEL */
img.label_thumb{position:absolute;top:6px;left:0;float:left;height:50px;width:58px;}ul.label_with_thumbs{float:left;width:100%;margin: 0 0 0;padding:0;}ul.label_with_thumbs li{padding:6px 0px 6px 66px;position:relative;min-height:53px;margin:0 0 0 0;border-bottom:1px solid #eee;}ul.label_with_thumbs li:last-child{border-bottom:none !important;}.label_with_thumbs li{list-style:none;font-size:11px;color:#ccc;}.label_with_thumbs .title-label a{float:left;display:inline-block;font-weight:bold;font-size:13px;margin:0 0 3px;padding:0;color:#555;width:100%;}.label_with_thumbs a:hover{color:#0099cc;}.label_with_thumbs strong{padding-left:0px;}a.comment-label{font-size:11px;color:#999;}a.more-label{font-size:11px;color:#999;}
.related-post{margin:1em auto 0;font-size:13px;background:#fff;border-radius:4px;border: 1px solid #eee;}.related-post h4{font-size:14px;margin:0 0 .5em;background:#1BC7A5;color:#fff;padding:14px;font-weight:normal;border-radius:4px 4px 0 0;position:relative;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase;border-bottom: none;}ul.related-post-style-1{list-style: none;
margin-left: 40px;
padding-left: 0!important;
margin-top: -12px;}.related-post-style-1 ul li{list-style:none;border-top:1px solid #eceef5}.related-post-style-1 li a{color:#79798d;text-decoration:none;font-size: 16px;display: block;padding: 15px 20px;}.related-post-style-1 li a:hover{color: #FFFFFF;text-decoration: none;background: #e74c3c;}ul#relpost li .relatedpost_description{font:normal 11px Electrolize,sans-serif}
- Untuk HTMLnya silahkan pergi ke menu tata letak >> Add Widget >> HTML/Javascript letakan kode dibawah ini dikotak tersedia
<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = false;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Tutorial Blogger?published&alt=json-in-script&callback=labelthumbs"></script>
NB:untuk tulisan warna merah silahkan ganti dengan label kamu
- Simpan
Nah, Sekarang dah jadi bukan ? Cukup mudah kan.
Sekian dan semoga bermanfaat