Cara membuat Artikel Terbaru Judul Saja

Farhan Share - selamat sore sobat farhan, selamat beraktivitas, semoga sobat farhan sehat-sehat semua. Langsung saja sobat kita mulai Topik pembicaraan kita, sobat farhan pernah lihat tidak di blog sahabat ada yang mempunyai widget artikel terbaru hanya judul saja, seperti gambar di atas ini, mungkin sobat farhan ingin tahu tentang pengertian artikel terbaru hanya judul saja? ya, maksudnya adalah widget yang menampilkan postingan-postingan terbaru dari website/blog sobat dengan hanya menampilkan judulnya saja, widget ini lumayan banyak di pakai para blogger/webmaster karena tidak memakan space yang besar, di bandingkan artikel terbaru dengan Thumbnail / Gambar.

Sesuai topik pembicaraan kita di atas sobat, sekarang farhan akan nge-share cara membuat widget artikel terbaru hanya judul saja, mungkin sobat ingin lebih tahu tentang kelebihan widget ini, sebenarnya menurut saya widget ini lebih efisien dan simple karena memiliki beban loading yang rendah karena tidak ada cuplikan thumbnail, dibandingkan artikel terbaru dengan thumbnail, memakan loading blog yang besar. Pastinya sobat farhan sudah penasaran kan, well, kita mulai ini dia langkah-langkahnya.

1. Login Ke Blogger.

2. Masuk Dashboard.

3. Pilih Tata Letak.

4. Klik "Add Gadget".

5. Pilih "HTML/JavaScript".

6. Lalu sobat letakkan kode script di bawah ini ke dalam box "konten".

<style type="text/css">
/* FEEDBLITZ WIDGET */
.postnew li a:hover {
display:block;
text-decoration:none;
background:#efefef;
}
.postnew li a:visited {
text-decoration:none;
}
.postnew {
float:left;
width:380px;
}
.postnew ul {
width:90%;
list-style-type:none;
}
.postnew li a {
text-decoration:none;
border-top:1px solid rgb(204,204,204);
line-height:1.6em;
font-size:12px;
display:block;
padding:3px 0px 3px 0;
}
.feedburnerFeedBlock div, .date, .feedItemAuthor, .feedTitle, .fbsubscribelink, .creditfooter {
display:none;
padding:2px 3px;
margin-left:95px;
margin-bottom:12px;
width:162px
}
.feedburnerFeedBlock  li:hover .date {
font-size:13px;
font-weight:bold;
text-align:left;
display:block;
position:absolute;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2lOnVvUqG99QIMZJk-z4C2XitewWyveZj0GzKtzwiY7X46GO-_q4pEcR3uq_tF4Ct-itsFufzkSDcboWAqqS6SBMY_SpKGWWYj4p4ZVH0srKUPtbnQTaTAbw2MiIVreCDW79nNDUTGRk/s400/tooltips-date.gif) no-repeat scroll 10px 0px; color:#333; padding:0px 35px; margin-right:10px;
width:114px
}
.feedburnerFeedBlock  li:hover div {
line-height:1.2em;
border-radius:8px 8px;
-moz-border-radius:0 0 8px 8px;
-khtml-border-radius:0 0 8px 8px;
-webkit-border-radius:0 0 8px 8px;
border-radius:0 0 8px 8px;
font-size:90%;
display:block;
position:absolute;
border:1px solid #D8D8D8;
background:#E5E5E5  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnv1sJtZ-fJf15id4QunNdpuSkBq32xago73UJjnNBMsyzHgdr0qKP3oUCi8Ai55Wemy2H0r6tOZI0oeIRP-Tj4TEks5vP-xRaqrNBckoM6A4W51oRDS8hr5SAmZBUpXSsG9luqtJqJ7k/s1600/tooltips-background.png) repeat-x;
color:#333;
padding:35px 10px 10px 10px;
}
</style>

<script src="http://feeds.feedburner.com/farhanshare?format=sigpro&nItems=15&format=openLinks=new
&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below" type="text/javascript" ></script>
<div style="text-align:center;font-size:80%;"></div></div>

Catatan : Ganti kode script yang berwarna merah dengan username feedburner sobat.
Catatan : Script yang berwarna biru adalah jumlah posting yang ingin di tampilkan.


7. Beri judul

8. Klik "Save" dan Selesai.

Selamat Mencoba sobat farhan, bila ada pertanyaan comment di bawah.

Share this

Author : Admin

Related Posts