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.

17 komentar:

FingerManga mengatakan... [Jawab]

kunjungi juga blog saya ya di http://kustommanga.blogspot.com

Dodi mengatakan... [Jawab]

Gourmonde

Malaysia

Jurnal Altajdid

Fashionista

Shadra Institute

KPI STAIN

BPI STAIN

Woman Trick

Fashionade

Moslem Fashion

Ruang Para Pencarimu

Travelancer

My Girl Sasha

Horse Ranch

Extreme Hero

Travel Malay

buatblogkangroes mengatakan... [Jawab]

terimakasih artikelnya.. ditunggu kunjungannya

SEO | Computer mengatakan... [Jawab]

Ilmu yg cukup berguna sob.. Keep post!

srulz mengatakan... [Jawab]

akhirnya, dicoba mas... :D

Erika Setyadi mengatakan... [Jawab]

nice share... makasiih ya

http://erikasetyadi.blogspot.com/

Dani mengatakan... [Jawab]

thanks yya infonyA

Terimakasih infonya Gan (y)
Ini yang sedang saya cari-cari

http://grosirobatjellygmat.com/obat-herbal-syaraf-kejepit/

terimakasih infrmasinya

salam semangat

good informasi

good sahre

bermanfaat sekali informasinya

salam semangat

nice sahre

bermanfaat sekali

Ilmu yg cukup berguna sob..

Posting Komentar

Komentarlah sesuai dengan isi artikel. Spam akan saya hapus.

Bagi yang mau bertukar link, silahkan konfirmasi di kolom komentar.

 
 
 

Archives


 
Copyright © SUMBER BELAJAR |