Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Memasang Widget Recent Posts dengan Kutipan Bergilir

Para pengunjung setia mungkin selalu ingin mengetahui setiap update artikel terbaru pada blog yang kamu miliki. Salah satu widget yang memiliki fungsi tersebut adalah recent posts. Banyak jenis dan style dari widget tersebut. Namun untuk kali ini saya akan membagikan sebuah widget recent posts yang menampilkan kutipan pendek dari masing-masing artikel secara bergilir.

Bagian atas widget ini menampilkan satu artikel dengan disertai sepenggal kutipan. Sedangkan bagian bawahnya menampilkan daftar artikel terbaru dengan jumlah yang dapat kita tentukan. Kemudian sepenggal kutipan pada setiap artikel yang terdapat pada daftar akan ditampilkan bergiliran di bagian atas widget secara otomatis.

Widget Recent Posts dengan Kutipan Bergilir

Kutipan yang ditampilkan di bagian atas widget adalah nama penulis artikel, tanggal pembuatan artikel, dan sepenggal paragraf pertama yang merupakan bagian dari pembahasan artikel terkait. Kemudian walaupun kutipan ditampilkan bergiliran secara otomatis, kutipan tersebut juga akan berganti saat mouse menyentuh salah satu daftar artikel di bagian bawah widget. Untuk lebih jelaskan silakan lihat live demo pada link berikut.

Memasang Widget Recent Posts dengan Kutipan Bergilir

Untuk memasang widget ini pada dasboard Blogger silakan masuk ke menu Tata Letak. Kemudian klik Tambahkan Gadget di posisi yang kamu inginkan. Pilihlah widget HTML / Javascript. Berilah judul widget misalnya "Recent Posts" dan letakkan script berikut pada kolom widget yang tersedia.
<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
border: 1px solid #DBDBDB;
}
.gfg-title {
display:none;
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
font-weight : bold;
text-transform: capitalize;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
margin-top: 5px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;}</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'http://b-tutorial.com/feeds/posts/default?redirect=false&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<br />
<div id="feedGadget">
Loading...</div>

Silakan ubah url berlatar biru dengan url blog milik kamu, dan kode "width: 100%;" adalah lebar widget yang bisa kamu sesuaikan. Sedangkan kode berlatar merah menunjukkan artikel mana yang akan ditampilkan pertama pada daftar. Secara default, yang pertama di dalam daftar adalah artikel yang paling baru. Namun jika kamu ingin menampilkan artikel lain, silakan ubah nilai dari kode "start-index=1".

Kemudian kode berlatar kuning menunjukkan jumlah artikel terbaru. Kamu bisa menentukan jumlah artikel yang akan ditampilkan pada widget dengan mengubah nilai dari kode "max-results=10". Personalisasi lainnya adalah pada kode "numResults : 10" yang berfungsi seperti kode "max-results=10". Maka tentukanlah nilai yang sama pada kedua kode tersebut. Sedangkan kode "displayTime : 5000" menentukan waktu jeda diantara pergantian kutipan yang ditampilkan, dan kode "hoverTime : 500" adalah waktu minimum untuk menampilkan item di bagian atas widget (milliseconds).

Warna teks link, jenis dan ukuran font akan menyesuaikan dengan template yang kamu gunakan. Sehingga widget ini kemungkinan akan cocok pada semua jenis template. Dan untuk selebihnya silakan menuangkan kreaifitas tersendiri pada script di atas. Dan jika kamu telah selesai melakukan personalisasi, maka langkah terakhir klik Simpan widget dan silakan lihat hasilnya.

Artikel terkait : Memasang Widget Recent Posts dengan Kutipan Bergilir

Artikel B-Tutorial Lainnya :

0 komentar:

Post a Comment

Copyright © 2014-2016 B-Tutorial - All Right Reserved