Modifikasi BuzzBoost pada Feedburner

Pada Kesempatan yang setengah siang ini, Kang Onk Design akan memerikan tutorial blogger untuk yang sekian kali. Walau pernah dibahas tentang bervariasi pada Recnet Post yang lalu  Kali ini saya akan membagikan Cara Modifikasi BuzzBoost pada Feedburner baik itu berupa postingan terbaru (Recent Posts) ataupun Komentar terbaru (Recent Comments) yang diambil dari javascript pada Feedburner kita masing-masing. Pernah juga saya memodifikasi Cara Mengubah Feedburner Chicklets Pada Blog  pada waktu yang lalu



Demo bisa dilihat disini

Anda haruslah login dulu ke feedburner milik anda, dan selanjutnya buatla recent posts atau recent comment melalui BuzzBoost pada feedburner, seperti yang ditujukkan pada gambar dibawah ini :

Jika sudah, jangan lupa setting seperti gambar berikut :

Lah, sekarang saatnya kita mengambil javascript yang ada di feedburner untuk dimasukan pada widget kita.

Untuk Recent Post biasanya seperti kode berikut :

<script src="http://feeds.feedburner.com/KangOnkDesign?format=sigpro" type="text/javascript" >

Untik Recent Comment, kalau gak slah seperti ini :

<script src="http://feeds2.feedburner.com/KODcomments?format=sigpro" type="text/javascript"></script>

Memdifikasi warna-warnanya

Jika suda di copy paste javascript tersebut ke dalam widget blog kita, jangan disimpan dulu. Selanjutnya copy paste kode CSS berikut diatas kode yang baru diambil dari feedburner.

<style>
div.feedburnerFeedBlock ul li {background: #E2F0FD;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 10px !important;
border: 1px solid #0080ff;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
div.feedburnerFeedBlock ul li:hover {
 background:#ffffff;
}
div.feedburnerFeedBlock ul li a{
color:#0080ff;
text-decoration:none;
}
div.feedburnerFeedBlock ul li a:hover {
text-decoration:none;
}

div  #creditfooter{
display:none;
}
</style>

Silakan ganti huruf-huruf yang bercetak tebal diatas sesuai dengan kemauan anda, jika selesai langsung disimpan dan dilihat hasilnya. Jika kebingungan untuk mencari warna-warna yang cocok dengan blog anda silakan dilihat disini

Selengkapnya...

Bervariasi Dengan Entri Polpular View Pada Blog

Pada awal bulan dan bulan akhir tahun 2011 ini Kang Onk Design menyempatkan waktunya untuk memposting bagaimana bervariasi blog kita dengan popular view (Artkel Populer), Disini saya akan memberikan bermacam-macam cara yang bisa anda lakukan untuk mendesign dan modifikasi blog anda.

1. Membuat Populer View dengan Thumbnail Bergerak

Widget ini sudah umum digunakan oleh semua blogger baik pemula maupun sang master, karena kebanyakan populer view ini salah satu penunjungan untuk meningkatkan trafickrank blog kita. Bagaimana cara membuatnya?


Tutorialnya disini

2. Membuat Entri Populer Dengan Slide

Populer view ini bergerak horizontal seperti slider-slider yang terpasang pada blog dengan template magazine yang keren. Bahkan ini bisa dibilang The Best Widget tahun ini. Bagaimana cara membuatnya?


Tutorialnya disini

3. Menambahkan Slide Pada Entri Populer Default Blogger

Dalam widget ini, kita tidak perlu susah payang untuk memodifikasi HTML dan JavaScript, karena pada tutorial ini kita hanya memasang JavaScript yang tidak terlalu rumit dan ini dipasang dengan menggunkan populer view bawaan blogger (default). Bagaimana cara membuatnya?


Tutorialnya disini

4. Membuat Entri Populer Versi Terbaru

Membuat entri populer atau populer view dengan animasi spy akan menarik perhatian para pengunjung blog. Keistimewaan spy atau animasi yang ditawarkan akan lebih mempercantik blog anda. Bagaimana cara membuatnya?


Tutorialnya disini

5. Membuat Entri Populer Disertai Jumlah Komentar

Membuat entri populer dengan thumbnail sering kita liat dikebayakan blog dan website, tapi kali ini akan sedikit diramu agar tampak berbeda.


Tutorialnya disini

Selamat Mencoba dan semoga sukses selalu menyertai kita semua....!!!!

Selengkapnya...

Membuat Roda Warna Pada Blog

Pada kesempatan yang telah lama gak berjumpa. Pertama-tama saya akan menyapa seluruh pengunjung setia blog Kang Onk Design ini. Gimana kabar anda semua? Semoga baik dan masih dalam lindungan Allah SWT. Amin Allahumma Amin.

Tutorial kali ini akan dibahas tentang cara membuat kode warna (Generator Color) dengan sedikit tampilan yang berbeda yang berbentuk semacam roda yang berputar. Bahkan postingan seperti ini sudah dibahas pada postingan ini akan tetapi ini sedikit dimodifikasi untuk dapatnya tampilan yang menarik juga. Bahkan ini tidak begitu ribet seperti pada tutorial sebelumnya dan jika anda ingin melihat DEMO disini

Caranya , anda hanya men-copy kode dibawah ini kedalam HTML baik pada sidebar ataupun pada postingan blog anda.

<embed src="http://www.2createawebsite.com/build/col.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" quality="High" height="485" width="485">

Selesai dan simpan.
Mudah bukan.....!!!

Selengkapnya...

Membuat Entri Populer Dengan Slide

Wah, gak pernah update artikle diblog ini membuat pagerank blog Kang Onk Design tetap. Ya, mau apalagi wong sibuk dengan aktivitas sehari-hari. Hehe, nglantur ya?

Pada tutorial kali ini saya akan membagikan tetang pemasangan widget pada blog dengan animasi slider. bahkan cara ini hampir sama dengan tutorial sebelumnya. Akan tetapi tutorial kli ini sangan mengesankan dan bisa membuat pengunjung bertanya-tanya, Bagus ya blog ini?

Oke langsung pada topik pembahasannya. Namun, alangkah lebih enaknya silakan anda liat dulu DEMO dari hasil tutorial blogger ini.

Dalam tutorial ini ada 2 langkah yang harus dilalui seperti yang diperlihatkan pada gambar dibawah ini:

Langkah 1

• Login Blogger anda;
• Pilih Rancangan;
• Klik tab Tambahkan Elemen;
• Pilih Entri Populer;
• Lalu Simpan,

Langkah 2

• Tetap pada tan Rancangan;
• Klik tab Tambahkan Elemen;
• Pilih tambahkan JavaScript/HTML;
• Copy Paste kode dibawah ini kedalam elemn HTML yang baru dibuat;
• Lalu Simpan,

<style type="text/css" media="screen">
<!--
#PopularPosts1{
height:263px;
}
.item-content {
height:263px;
position:relative;
width:560px;
}
.slider {
height:263px;
margin-left:25px;
width:560px;
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:263px;
}
.item-snippet {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:5px 5px 10px 5px;
position:absolute;
bottom:0;
text-align:left;
width:560px;
font-size:9px;
font-style:italic;
}
.item-title{
color:#FFFFFF;
font-size:10px;
font-weight:bold;
font-style:normal;
margin-bottom:5px;
}
.item-title a:link,.item-title a:visited{
color:#FFFFFF;
text-decoration:none;
border:none !important;
padding:0 !important;
}
.item-thumbnail img{
padding:0 !important;
}
.item-thumbnail a{
padding:0 !important;
}
.crosscol .widget-content {position:relative;}
.slider ul, .slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
.slider li, #slider2 li{
width:560px;
height:263px;
overflow:hidden;
}
.item-thumbnail img{width:560px;height:263px}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:582px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:100px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
.test{
margin:30px;
}
-->
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
<script src='http://kang-onk.googlecode.com/files/entri_populer_slider.js' type='text/javascript'></script>

Semoga bermanfaat bagi anda semua. Jangan lupa klik Google +1 sebagai rasa terima kasi pada Kang Onk Design

Selengkapnya...