Cara Membuat Recent Post Dari Feedburner
Cara Membuat Recent Post Dari Feedburner
Recent posts adalah widget yang menampilkan deretan postingan terbaru dari suatu blog. Dengan recent posts kita bisa menampilkan beberapa postingan kita kepada si pengunjung. Dan imbasnya adalah si pengunjung bisa berlama-lama di blog kita dan akan menelusuri postingan kita secara satu persatu dan tentunya akan menambah pageview blog kita.
Banyak wdget yang menyediakan widget recent posts, bloggerpun sudah menyediakan widget recent posts. Tetapi kali ini saya akan membahas cara membuat recent posts dari feedburner. Menurut saya keuntungan dari recent posts dari feedburner ini adalah tidak membuat loading page blog kita menjadi berat.
Recent posts yang ada di blog saya juga dari fasilitas dari feedburner, karena saya merasa terpuaskan dengan widget yang disediakan oleh feedburner ini, maka dari itu saya akan berbagi untuk sobat agar mengetahui Cara membuat Recent Post Dari feedburner. Dan kita akan memodifikasinya sedikit, biar agak sreg lah tampilannya hhe..
1.Log in ke blogger dengan akun yang anda miliki.
2.Kemudian sobat buka situs feedburner.google.com. Bagi yang belum punya akun feedburner, anda bisa membaca artikel berikut ini : Cara Mudah Mendaftar Ke Feedburner.
3.Klik tab publicize » Lalu klik menu BuzzBoost.
4.Silahkan anda menyetting recent posts nya sesuai ke inginan sobat, disarankan untuk menghilangkan semua tanda centang nya agar tampilannya maksimal.
5.Kalau sudah sobat klik active.
6.Ambil script yang sudah di sediakan.
7.Kalau sudah anda pergi ke rancangan » tambah gadget » HTML/Javascript.
8.Pastekan kode yang anda dapatkan. Jangan di save dulu sobat harus mengedit kodenya dengan cara ambil bagian pertama scriptnya saja, kira-kira seperti ini.
9.Kalau sudah sobat edit kodenya hingga menjadi seperti ini.
Keterangan : Ingat ini harus dengan script yang di berikan feedburner ke pada anda.
10.Save widget anda dengan judul recent posts.
Setelah langkah-langkah di atas sudah selesai, sobat pergi ke edit Html.
1.Centang kotak expand template widget.
3.Kemudian anda tekan tombol control+f, dengan tulisan "recent posts".
4.Nanti akan muncul kode yang kira-kira seperti ini.
Kalau sudah muncul, tinggal sobat ganti dengan kode yang di bawah ini.
Keterangan : Tulisan HTML Blog anda silahkan anda ganti dengan kode Html anda sebelum anda mengganti kodenya tadi.
5.Cari menggunakan control+f kode </head> dan pastekan script di bawah ini di atas kode </head>.
6.Save template anda dan lihat hasilnya.
Saran saya agar sobat mendownload template anda dulu sebelum melakukan pengeditan. Hal ini berguna jika anda mengalami kesalahan saat melakukan pengeditan. Jadi kalau sobat mengalami kesalahan dalam melakukan pengeditan, anda bisa mengebalikan template anda semula.
Sekian tutorial blog dari saya tentang Cara membuat Recent Post Dari feedburner semoga postingan saya kali ini bisa memberikan manfaat bagi anda.
Recent posts adalah widget yang menampilkan deretan postingan terbaru dari suatu blog. Dengan recent posts kita bisa menampilkan beberapa postingan kita kepada si pengunjung. Dan imbasnya adalah si pengunjung bisa berlama-lama di blog kita dan akan menelusuri postingan kita secara satu persatu dan tentunya akan menambah pageview blog kita.
Banyak wdget yang menyediakan widget recent posts, bloggerpun sudah menyediakan widget recent posts. Tetapi kali ini saya akan membahas cara membuat recent posts dari feedburner. Menurut saya keuntungan dari recent posts dari feedburner ini adalah tidak membuat loading page blog kita menjadi berat.
Recent posts yang ada di blog saya juga dari fasilitas dari feedburner, karena saya merasa terpuaskan dengan widget yang disediakan oleh feedburner ini, maka dari itu saya akan berbagi untuk sobat agar mengetahui Cara membuat Recent Post Dari feedburner. Dan kita akan memodifikasinya sedikit, biar agak sreg lah tampilannya hhe..
1.Log in ke blogger dengan akun yang anda miliki.
2.Kemudian sobat buka situs feedburner.google.com. Bagi yang belum punya akun feedburner, anda bisa membaca artikel berikut ini : Cara Mudah Mendaftar Ke Feedburner.
3.Klik tab publicize » Lalu klik menu BuzzBoost.
4.Silahkan anda menyetting recent posts nya sesuai ke inginan sobat, disarankan untuk menghilangkan semua tanda centang nya agar tampilannya maksimal.
5.Kalau sudah sobat klik active.
6.Ambil script yang sudah di sediakan.
7.Kalau sudah anda pergi ke rancangan » tambah gadget » HTML/Javascript.
8.Pastekan kode yang anda dapatkan. Jangan di save dulu sobat harus mengedit kodenya dengan cara ambil bagian pertama scriptnya saja, kira-kira seperti ini.
<script src="http://feeds.feedburner.com/CoretanDiko?format=sigpro" type="text/javascript" ></script>
9.Kalau sudah sobat edit kodenya hingga menjadi seperti ini.
<script src="http://feeds.feedburner.com/CoretanDiko?format=sigpro&nItems=8&format=openLinks=new&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below" type="text/javascript" ></script>
Keterangan : Ingat ini harus dengan script yang di berikan feedburner ke pada anda.
10.Save widget anda dengan judul recent posts.
Setelah langkah-langkah di atas sudah selesai, sobat pergi ke edit Html.
1.Centang kotak expand template widget.
3.Kemudian anda tekan tombol control+f, dengan tulisan "recent posts".
4.Nanti akan muncul kode yang kira-kira seperti ini.
<b:widget id='HTML Blog anda' locked='false' title='Recent posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Kalau sudah muncul, tinggal sobat ganti dengan kode yang di bawah ini.
<b:widget id='HTMLBlog anda' locked='false' title='Recent posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='postnew'><div class='widget-content'>
<data:content/>
</div></div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='postnew'><div class='widget-content'>
<data:content/>
</div></div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Keterangan : Tulisan HTML Blog anda silahkan anda ganti dengan kode Html anda sebelum anda mengganti kodenya tadi.
5.Cari menggunakan control+f kode </head> dan pastekan script di bawah ini di atas kode </head>.
<style>
.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:13px;
display:block;
padding:3px 0px 3px 0;
}
.feedburnerFeedBlock div, .date, .feedItemAuthor, .feedTitle, .fbsubscribelink, .creditfooter {
display:none;
padding:2px 3px;
margin-left:126px;
margin-bottom:12px;
width:162px
}
.feedburnerFeedBlock li:hover .date {
font-size:11px;
font-weight:bold;
text-align:left;
display:block;
position:absolute;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiowfMS2HekZaJoc9wlalNB0KTTddafuRLMFo3R2rHCBZApyYWGFa9W2wrxvGU1nceX5f5xBkaMHJf23aO9w6q8RZE79EEmCYzY9see3KuZbrXSSrTN_KEhrDbaByOqHt_A5O0fillutd8/s400/tooltips-date.gif) no-repeat scroll 10px 5px; color:#333; padding:6px 35px; margin-right:10px;
width:114px
}
.feedburnerFeedBlock li:hover div {
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:11px;
display:block;
position:absolute;
border:1px solid #ccc;
background:#E5E5E5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBbqAcdujTIFqj0XMNtvS7lHqJpA-TmQxkZMNqyzbpPwK_Nan3V4zIUPpbfFH3WLfhEDd1KAIwpYQZR_i6LH7u1kLZwVvya4rwQI8Mh9xNyJ4jXNDiN0ZN_VrUFUoFIx_0e1PDJz6l3zY/s1600/tooltips-background.png) repeat-x;
color:#333;
padding:35px 10px 10px 10px
}
</style>
.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:13px;
display:block;
padding:3px 0px 3px 0;
}
.feedburnerFeedBlock div, .date, .feedItemAuthor, .feedTitle, .fbsubscribelink, .creditfooter {
display:none;
padding:2px 3px;
margin-left:126px;
margin-bottom:12px;
width:162px
}
.feedburnerFeedBlock li:hover .date {
font-size:11px;
font-weight:bold;
text-align:left;
display:block;
position:absolute;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiowfMS2HekZaJoc9wlalNB0KTTddafuRLMFo3R2rHCBZApyYWGFa9W2wrxvGU1nceX5f5xBkaMHJf23aO9w6q8RZE79EEmCYzY9see3KuZbrXSSrTN_KEhrDbaByOqHt_A5O0fillutd8/s400/tooltips-date.gif) no-repeat scroll 10px 5px; color:#333; padding:6px 35px; margin-right:10px;
width:114px
}
.feedburnerFeedBlock li:hover div {
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:11px;
display:block;
position:absolute;
border:1px solid #ccc;
background:#E5E5E5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBbqAcdujTIFqj0XMNtvS7lHqJpA-TmQxkZMNqyzbpPwK_Nan3V4zIUPpbfFH3WLfhEDd1KAIwpYQZR_i6LH7u1kLZwVvya4rwQI8Mh9xNyJ4jXNDiN0ZN_VrUFUoFIx_0e1PDJz6l3zY/s1600/tooltips-background.png) repeat-x;
color:#333;
padding:35px 10px 10px 10px
}
</style>
6.Save template anda dan lihat hasilnya.
Saran saya agar sobat mendownload template anda dulu sebelum melakukan pengeditan. Hal ini berguna jika anda mengalami kesalahan saat melakukan pengeditan. Jadi kalau sobat mengalami kesalahan dalam melakukan pengeditan, anda bisa mengebalikan template anda semula.
Sekian tutorial blog dari saya tentang Cara membuat Recent Post Dari feedburner semoga postingan saya kali ini bisa memberikan manfaat bagi anda.
Categories:
