Cara Membuat Featured Post Di Blogger

Rabu, Oktober 13, 2010

 Sering kita melihat blog dengan template magazine style yang menampilkan featured post. Widget ini berguna untuk menampilkan headline artikel atau artikel yang dianggap menarik untuk disimak. Pada tutorial kali ini, kita akan membahas cara membuat dan memasang freatured post di blogger.

Tidak seperti wordpress yang dengan mudahnya membuat featured post, tinggal pasang plugin saja sudah beres. Di blogger, kita sedikit memerlukan langkah-langkah yang panjang. Berikut langkah-langkah membuat dan memasang featured post di blogger.

Yuk mulai….

I. Buat space atau tempat di template blog.

Biasanya, featured post hanya akan kelihatan di homepage saja. Maka kita membutuhkan tag khusus untuk menampilkan featured post tersebut agar tidak mungcul di halaman konten.

Berikut ini tag untuk menempatkan featured post :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='tabs' id='crosscol-homepage' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='FEATURED POST' type='HTML'/>
</b:section>
</b:if>

Letakkan kode tersebut pada tempat yang diinginkan. Cara menempatkannya, masuk ke dashboard > Layout > HTML. Cek expand widget template. Agar aman, backup dulu template blog anda.

II. Persiapkan Script Featured Post-nya.

Copy dan paste kode berikut ini tepat sebelum tag </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[/* ------------------------------------------------------------------------s3SliderDevelopped By: Boban Karišik -> http://www.serie3.info/CSS Help: Mészáros Róbert -> http://www.perspectived.com/Version: 1.0Copyright: Feel free to redistribute the script/modify it, as     long as you leave my infos at the top.-------------------------------------------------------------------------- */(function($){$.fn.s3Slider = function(vars) {var element     = this;var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;var current     = null;var timeOutFn   = null;var faderStat   = true;var mOver       = false;var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");items.each(function(i) {   $(items[i]).mouseover(function() {      mOver = true;   });   $(items[i]).mouseout(function() {       mOver   = false;       fadeElement(true);   });});var fadeElement = function(isMouseOut) {   var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;   thisTimeOut = (faderStat) ? 10 : thisTimeOut;   if(items.length > 0) {       timeOutFn = setTimeout(makeSlider, thisTimeOut);   } else {       console.log("Poof..");   }}var makeSlider = function() {   current = (current != null) ? current : items[(items.length-1)];   var currNo      = jQuery.inArray(current, items) + 1   currNo = (currNo == items.length) ? 0 : (currNo - 1);   var newMargin   = $(element).width() * currNo;   if(faderStat == true) {       if(!mOver) {           $(items[currNo]).fadeIn((timeOut/6), function() {               if($(itemsSpan[currNo]).css('bottom') == 0) {                   $(itemsSpan[currNo]).slideUp((timeOut/6), function() {                       faderStat = false;                       current = items[currNo];                       if(!mOver) {                           fadeElement(false);                       }                   });               } else {                   $(itemsSpan[currNo]).slideDown((timeOut/6), function() {                       faderStat = false;                       current = items[currNo];                       if(!mOver) {                           fadeElement(false);                       }                   });               }           });       }   } else {       if(!mOver) {           if($(itemsSpan[currNo]).css('bottom') == 0) {               $(itemsSpan[currNo]).slideDown((timeOut/6), function() {                   $(items[currNo]).fadeOut((timeOut/6), function() {                       faderStat = true;                       current = items[(currNo+1)];                       if(!mOver) {                           fadeElement(false);                       }                   });               });           } else {               $(itemsSpan[currNo]).slideUp((timeOut/6), function() {               $(items[currNo]).fadeOut((timeOut/6), function() {                       faderStat = true;                       current = items[(currNo+1)];                       if(!mOver) {                           fadeElement(false);                       }                   });               });           }       }   }}makeSlider();};})(jQuery);//]]></script><script type='text/javascript'>$(document).ready(function() {$(&#39;#s3slider&#39;).s3Slider({timeOut: 4000});});</script><style type='text/css'>#s3slider {background:#000000;border:1px solid #818e8f;width: 550px;height: 200px;position: relative;overflow: hidden;}#s3sliderContent {width: 550px;position: absolute;top:-14px;padding: 0px;margin-left: 0;}.s3sliderImage {float: left;position: relative;display: none;}.s3sliderImage span {position: absolute;left: 0;font: 20px Trebuchet MS, sans-serif;padding: 10px 0px;width: 550px;background-color: #000;filter: alpha(opacity=80);-moz-opacity: 0.8;-khtml-opacity: 0.8;opacity: 0.8;color: #fff;display: none;bottom: 0;text-align:center;}.clear {clear: both;}</style>

Lalu simpan template anda.

III. Pasang Script featuret post di template blog.

Sekarang pasang tag featured post di elemen atau tempat yang telah dibuat pada langkah I. Masuk ke Layout > Page Element

Copy dan paste kode berikut di elemen yang telah dibuat pada langkah I diatas.

<div id="s3slider"><ul id="s3sliderContent"><li class="s3sliderImage"><a href="LINK-ARTIKEL-ANDA"><img style="width:550px;height:200px;" src="LINK-GAMBAR-PERTAMA" /><span>JUDUL-ARTIKEL</span></a></li><li class="s3sliderImage"><a href="LINK-ARTIKEL-ANDA"><img style="width:550px;height:200px;" src="LINK_GAMBAR" /><span>JUDUL-ARTIKEL</span></a></li><li class="s3sliderImage"><a href="LINK-ARTIKEL-ANDA"><img style="width:550px;height:200px;" src="LINK-GAMBAR" /><span>JUDUL-ARTIKEL</span></a></li><li class="s3sliderImage"><a href="LINK-ARTIKEL-ANDA"><img style="width:550px;height:200px;" src="LINK-GAMBAR" /><span>JUDUL-ARTIKEL</span></a></li></ul></div><div class='clears3sliderImage'></div>

Jika anda pusing atau merasa ribet dengan langkah II dan III, ada solusi lain. Jika langkah I sudah selesai, buka Layout > Page Element. Lalu pada elemen Featured Post yang baru dibuat tersebut, tempatkan kode berikut ini :

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;    float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js"></script><script style="text/javascript">var numposts = 5;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script>
<script src="http://NAMABLOG.blogspot.com/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Ganti NAMABLOG dengan nama blog anda, kemudian save. Untuk menampilkan artikel yang akan ditampilkan sebagai featured post, buatlah kategori baru bernama “featured” dan masukan posting yang akan ditampilkan didalam kategori “featured”.

Selamat mencoba.

Credit : Terimakasih untuk : Lasantha dan Suhas untuk berbagi scriptnya.