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

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....!!!!

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.....!!!

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

Membuat Widget Feature Dengan Thumbnail.

Terasa lama gak jumpa dengan teman-teman blogger semua... hehehhe, maklum sibuk dan lagi sibuk-sibuknya denagn Program Pemberdaayn Masyarakat Mandiri Perdesaan (PNPM-MPd) ya itung-itung buat sosial kemasyarakatan. Oke kita langsung pada artikel kali ini yang akan membahas tetang pembuatan Widget Feature blogger Dengan Thumbnail.

Jika ingin lebih jelasnya silakan lihat Demo atau hasilnya disini

Pada langka ini ada 2 langkah yang harus anda lalu untuk mengoptimalkan tampilan feature yang akan dibuat.

Langkah Pertama adalah:

• Masuk ke akun Blogger Anda;
• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode ]]></b:skin>
• Jika ketemu copy paste kode berikut sebelum kode ]]></b:skin>

#kodkotak{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:; border:0px solid #333; padding:5px 5px;}
#kodkotak ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 100%; }
#kodkotak ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }
#kodkotak ul li:hover{ border-bottom:1px solid #c5c5c5; }
#kodkotak img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px; margin-top:0px;}
#kodkotak img:hover{border: 1px solid #c5c5c5; }
.kodboxes img{float:left}
.kodboxes{position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.kodboxes h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}
.kodboxes h3 a:link,.mbtbody h3 a:visited{color:#2F97FF;}
.kodboxes h3 a:hover{color:#c5c5c5}
.kodboxes p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}

• Lalu Simpan Template.

Langkah yang Kedua sebagai berikut:

• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget)
• Pilih HTML/JavaScript
• Copy paste kode dibawah kedalam HTML tersebut;
• Lalu Simpan, selesai.

<div id='kodkotak'>
<div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '>

<ul>
<li>
<div class='kodboxes'>
<a class='fadein3' href='URL POST'>
<img height='100' src='URL IMG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='URL POST'>post 1 description</a></h3>
<p>Description Post</p>
</div>
</li>
<li>
<div class='kodboxes'>
<a class='fadein3' href='URL POST'>
<img height='100' src='URL IMG' width='170'/>

</a>
<div class='clear'></div>
<h3><a href='post 2 link'>Judul Post</a></h3>
<p>Description Post</p>
</div>
</li>
<li>
<div class='kodboxes'>
<a class='fadein3' href='URL POST'>
<img height='100' src='URL IMG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='URL POST'>Judul Post</a></h3>
<p>Description Post</p>

</div>
</li>
<li>
<div class='kodboxes'>
<a class='fadein3' href='URL POST' rel='nofollow'>
<img height='100' src='URL IMG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='URL POST' rel='nofollow'>Judul Post</a></h3>
<p>Description Post</p>
</div>
</li>
<li>
<div class='kodboxes'>
<a class='fadein3' href='URL POST'>

<img height='100' src='URL IMG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='URL POST'>Judul Post</a></h3>
<p>Description Post</p>
</div>
</li>
</ul>
</div>
</div>

Catatan: Silakan ganti pada tanda-tanda yang diatas sesuai dengan keinginan anda
Semoga bermanfaat bagi anda semua. Amin

Membuat Efek Zoom Image Versi-2

Hallo semuanya...!!!
Lama gak berjumpa ma temen-temen blogger semua, gimana sehat selalu?
Lah... pada kesempatana ini saya akan memberikan tips cara membuat efek zoom pada foto jika diklik dengan mouse. Pada tutorial sebelumnya juga pernah dibahas tentang pembuatan image zoom, akan tetapi pada hasil yang akan diperoleh dalam tutorial ini sangat menarik. Jika tidak keberatan sialak lihat demonya disini.

Buktikan sendiri serta langkah pembuatannya adalah?

• Masuk ke akun Blogger Anda;
• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode ]]></b:skin>
• Jika ketemu copy paste kode berikut sebelum kode diatas

div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}

• Lalu cari kode </head>
• Copy paste kode berikut sebelum kode </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

<script type="text/javascript" src="http://kang-onk.googlecode.com/files/jQuery.ImageZoom.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>

• Lalu Simpan Template

Selamat mencoba dan semoga berhasil.

Link Gratis Berkualitas Tinggi

Link Berkualitas Tinggi dan Gratis lagi, adalah salah satu cara yang ampuh, mujarab gak pake' bo'ong serta dicari-cari untuk mendapatkan One Way Backlink (Link Satu Arah) ke Blog kita. Bahkan caranyapun sangat gampang segampang membalikkan tangan... hehehhe, tul gak, masih gak percaya? Buktikan sendiri, dijamin...!!!

Ini adalah cara dahsyat untuk tukar link. Karena satu link yang kita pasang akan dibantu dipromosikan oleh 1 juta orang lebih hanya dengan mengajak 2 orang saja. Cukup mudah mengajak 2 orang untuk daftar, karena semua butuh promosi, setiap orang ingin linknya tersebar dengan cepat. Apalagi kalau lebih dari 2 orang… berapa link yang akan kita dapat n gratis lagi..


Oke kayak apa dan gimana caranya.. sobat tinggal daftar saja , tak ada ruginya untuk dicoba , gratis ini, disini link kita bisa nempel terus, link yg dimasukan bisa judul postingan dan URL nya agar tiap page punya pagerank juga.. kan biasanya PR kita hanya di halaman depan saja, sementara di halaman posting gak punya PR.


Kalau berminat cukup Mendaftar. Setelah itu silahkan cek password yang dikirim ke email anda, kemudian langsung login dan pasang judul artikel, keterangan dan URL link yang ingin dipromosikan pada Website ini. Oh ya … kita juga akan mendapatkan web replikanya untuk kita promosikan lho.. Sebagai contoh saya persembahkan postingan tentang Link Gratis Cantik Berkualitas, salah satu Cara mudah meningkatkan Traffic dan Pegerank blog kita.


Selanjutnya tinggal bikin sebuah postingan seperti ini atau silahkan copy paste artikel ini (Yang dicetak miring dan berada dalam bingkai) untuk di blog sobat dan rasakan manfaatnya.


Untuk mendaftar silahkan klik Link Gratis disini , kemudian scroll kebawah lalu klik “ Sign Up Now Free “ atau Klik Untuk Mendaftar.
Selamat mencoba tips Link Gratis Berkualitas Tinggi ini .

Sobat perlu memperhatikan :

• Setelah anda mendaftar,
• Password akan dikirim ke alamat email anda,
• Setelah anda menerima password,
• Login dengan Username dan Password anda,
• Jika anda tidak Login, maka status member anda belum aktif,
• Setelah anda Login, barulah status member anda aktif,
• Dan selanjutnya silahkan promosikan Link anda agar Backlink nya bertambah banyak.

Pingin Dapat Backlink Satu Arah (One Way Backlink),
secara Gratis …. dan Berkualitas Tinggi …?

Silahkan Disini
atau Langsung Klik Banner Dibawah ini dan rasakan Manfaatnya

Membuat Tab Menu Otomatis Sesuai Label Blog

Wah... sudah lama gak posting karena kesibukan di lembaga sosial yang berlabel Komunitas Aspirai Rakyat Situbondo dan program pemberdayaan masyarakat (PNPM-MPd), gimana kabar semuanya..???

Oiya, bagaimana temen blogger udah pada sukses membuat tab menu pada blog? kali ini hampir sama yaitu Membuat Tab Menu Otomatis Sesuai Label Blog. Kita tidak perlu susah payah menambahkan label pada kode tab menu tersebut. hasilnya bisa anda lihat pada gambar dibawah ini.

Jika ingin lebih jelasnya silakan lihat demonya disini. Dan ikuti langkahnya :

• Masuk ke akun Blogger Anda;
• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode ]]></b:skin>
• Copy paste kode berikut sebelum kode diatas :

/* KOD Tabs Menu Otomatis*/
.kod-label-list h2 {
display: none;
}
.kod-label-list a {
color: #333333;
}
.kod-label-list {
background: #E1D4C1;
height: 35px;
border:1px solid #DBC8AD;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
margin: 0 auto;
padding:0px;
text-shadow: 0 1px 0 #E1D4C1;
text-transform: none;
width: 960px;
}
.kod-label-list li {
border-right: 1px solid #666;
color: #333333;
float: left;
font: bold 12px Arial;
margin: 0 2px 5px 0;
padding: 10px 10px;
text-transform: uppercase;
}
.kod-label-list ul {
float: left;
list-style: none outside none;
margin-bottom: 0;
margin-left: 10px;
padding: 0;
width: 920px;
}

Keterangan code CSS diatas

1. Jika ingin merubah warna background menu silakan ubah #E1D4C1
2. Dan untuk merubah warna link adalah #333333

Langkah selanjutnya adalah :

• Cari kode 

<div id='content-wrapper'>

• Jika tidak ada silakan cari kode 

<div class='tabs-outer'>

• Lalu pasang kode dibawah ini sebelum salah satu kode diatas :

<div class='mbt-label-list'> <b:section class='mbt-label-list' id='mbt-label-list' preferred='yes' showaddelement='no'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
<div class='clear'>&#160;</div>

• Simpan Template.
• Pilih Tab Rancangan;
• Pilih Label yang baru dibuat dan pastikan seperti gambar berikut :

• Lalu Simpan, selesai.

Selamat mencoba semoga berhasil Please clik google +1

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. Meskipun tutorial yang sebelumnya dan hari ini. Bedanya kali ini adalah postingan yang banyak diminati pengunjung akan tampak beserta komen-nya. Anda bisa lihat gambar ini.

Langkahnya adalah:

• Masuk Blogger anda;
• Klik tab Racangan;
• Tambahkan Gadget, lalu pilih JavaScript/HTML;
• Copy paste kode berikut kedalamnya.

<script language='javascript'>
aBold = true;
numposts=200;
maxshowresult=10;
home_page = "http://kang-onk.blogspot.com/";
</script>
<script src='http://kang-onk.googlecode.com/files/popularpostblogger2.txt' type='text/javascript'></script>

• Simpan dan lihat hasilnya..

Catatan : pada teks yang berwana iru adalah :
200 = Banyaknya entri blog yang ditelusuri;
10 = Banyaknya entri terbaru yagn akan dibagikan.
Ganti URL http://kang-onk.blogspot.com/ dengan URL blog anda

Semoga artikel yang sedikit ini menjadikan kemanfaatan bagi kita semua.

Membuat Subscription Form 'Kotak Berlangganan' Ala Wordpress

Patut kiranya seorang blogger berbagga ria atas tips kali ini. Pasalnya, pada tutorial kali ini akan dibahas tentang topik membuat kotak berlanggan artikel terbaru (Subscription Form Feed Burner kata orang madura) seperti wordpress. Karena banyaknya fans yang menginginkan berlangganan artikel yang diposting blog kita, sebaiknya pemilik blog membaut gadget seperti ini.

Tanpa panjang lebar karena tutorial lainnya sudah dibahas disini. dan jika ingin llihat contohnya disini.
Langsung apada langkahnya :

• Login Blogger;
• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget)
• Pilih HTML/JavaScript
• Copy paste kode dibawah kedalam HTML tersebut;
• Lalu Simpan, selesai.

<style>
.kodbar{width: 100%; float: left;}
.kodbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.kodbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.kodbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.kodbar .subicons a{text-decoration: none; color:#333333;}
.kodbar .subicons a:hover{text-decoration: underline; color:#333333;}
.kodbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikqy2C5omkA0rSPCTwkY4VYlH_e9OhcDM6yKEboKiAHEqAoAR5iaODWHZya2YUJW8g78qY181kBWlP_S0ebCIvN57gJeOC0Fx4D0ixGUf_29t2EKxul7TwIZEOF5IdXYt1cxmOBW72RME/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.kodbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgokbaY9BsasaAATeIbsDmMxGvkc5T3FosgCDTUqPYQC8DkS2_HKym3Ugg7TkA5ejw9amuC6oBKkgHe5i6KBf1VtB-9fh5zbNbQorhVP76OACV8SEkwDqgo49gRt6nti_Z2IPi7K9ae4bQ/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.kodbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyiiqogw_5da1GXqW5f1k_0SommriFDCXur-YAXOcJv7RKsyYXmmYlmYLF35FX-DkkJCE5Dq_iAeXnrMQHU2WTf0kd9K3hknD4pZ48YQuGWy-W1ZFNS-Vaki7fWpX_5V98UBq8fSDpyc8/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.kodbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.kodbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCtgKsa9iOBbd2j4U7e6zBnQ1Ot0Yk92CWq5lIHDsDA6ZffNVNVgbowtZs8TP-hBYtmjhx98thC_t3iuj9dS99LjV3gfBgeILcggKsqAccG8VpRIpHtZD6AMAZ66aJsN_oj_Dhq9eYWZE/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.kodbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.kodbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.kodbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<!--[if IE 7]>
<style>
.kodbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.kodbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->
<div class="kodbar"><div class="count">Join <span class="bigcount">5032+</span> Orang Following KOD</div><div class="subicons"><div class="rssicon"><a href="http://feeds.feedburner.com/KangOnkDesign" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/pages/Kang-Onk-Design/113506822070307" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/onkdesign" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Berlanggan Artikel terbaru</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=KangOnkDesign', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Masukkan Email Anda....." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Masukkan Email Anda.....&#39;;}" onfocus="if (this.value == &#39;Masukkan Email Anda.....&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="KangOnkDesign" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>

Catatan :

1. Ubahlah http://www.facebook.com/pages/Kang-Onk-Design/113506822070307 dengan halaman link profil facebook anda;
2. Ubahlah http://twitter.com/onkdesign dengan URL link twitter anda;
3. Ubahlah http://feedburner.google.com/fb/a/mailverify?uri=KangOnkDesign dengan feedburner RSS Email Link anda;
4. Ubahlah http://feeds.feedburner.com/KangOnkDesign dengan feedburner RSS link anda.

Selamat mencobna dan semoga berhasil.
Jangan lupa komentarnya dan klik google +1 di pojok kanan atas. Terima kasih.

Cara Simple Membuat Menu Tab View V-2

Cara ini lebih gampang dari cara membuat menu tab view sebelumnya. Pada tutorial ini hanya memanfaatkan Kode jQuery Easy Organic tanpa harus meng-otak atik kode template dan gadget default blogger.

Carannya sangatlah simple, anda hanya mengcopy paste kode dibawah kedalam gadget blog dan meletakkan gadget tersebut diatas gadget yang akan dibuat menu tab view. Bingung gak? Ikuti aja langkahnya :

• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget);
• Pilih HTML/JavaScript;
• Copy paste kode dibawah kedalam HTML tersebut;
• Lalu Simpan;

<style type="text/css">.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}
html .blogtabs h2.active {background: #fff;}
.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://kang-onk.googlecode.com/files/TabViews-V2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>

Selanjutnya letakkan hasil gadget HTML yang baru dibuat diatas gadget-gadget yang akan dibuat menjadi menu tab view, seperti gambar berikut :

Dan Hasilnya :

Selamat Mencoba dan semoga berhasi, jangan lupa komentarnya untuk kemajuan blog ini. Trims

Membuat Bayangan Foto Membesar Pada Blog

Banyak website atau blog yang kita jumpai dengan menampilkan foto (image) membesar saat didekati mouse dan kata orang asing menyebutnya Drop Shadows to Images and Expand them on Mouse Hover, katanya sih...!!!!

Demo alias contohnya bisa anda liat di menu Kang Onk Design [Image], jika tertarik silakan ikuti langkah berikut.

• Masuk ke akun Blogger Anda;
• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode ]]></b:skin>
• Jika ketemu copy paste kode dibawah ini sebelum ]]></b:skin>

/*Image Galery*/
#hoverbox-wrapper {padding-left:30px;padding-top:10px;border-bottom:1px solid #eeeeee;height:300px;}#hoverbox-wrapper-b {margin-left:30px;margin-top:10px;margin-bottom:30px;}ul.hoverbox {cursor: default;list-style: none;}.hoverbox a {cursor: default;}.hoverbox a .preview {display: none;}.hoverbox a:hover .preview {display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}.hoverbox img {background: #fff;border-color: #aaa #ccc #ddd #bbb;border-style: solid;border-width: 1px;color: inherit;padding: 2px;vertical-align: top;width: 100px;height: 75px;}.hoverbox li {background: #eee;border-color: #ddd #bbb #aaa #ccc;border-style: solid;border-width: 1px;color: inherit;display: inline;float: left;margin: 3px;padding: 5px;position: relative;}.hoverbox .preview {border-color: #000;width: 180px;height: 150px;}

• Lalu Simpan Template.

Langkah selanjutnya

• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget);
• Pilih HTML/JavaScript;
• Copy paste kode dibawah kedalam HTML tersebut;

<li><a href="#"><img src="Your URL Image" alt="" /><img src="Your URL Image" alt="description" class="preview" /></a></li>

• Lalu Simpan, cling selesai.

Catatan:  Rubahlah hruf yang bercetak tebal dengan URL foto anda.
Semoga berhasil.....

Modifikasi Label Blog Menjadi 2 Kolom

Pada sore yang berbahagia ini, bagaimanan kabar anda semua?
Dalam kesempatan ini akan dibahas topik membuat label blog menjadi 2 kolom. Ini berfungsi untuk mengirit milyaran rupiah kocek anda gadget blog anda. Langsung bisa dilihat cara membuatnya:

Langkah Pertama adalah :

• Login blogger.com;
• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget);
• Pilih Label;
• Lalu Simpan, seperti yang dijelaskan pada gambar dibawah.

Selanjutnya ikuti Langkah Kedua :

• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode ]]></b:skin>
• Jika ketemu copy paste kode dibawah ini sebelum kode diatas;

#Label1 li {
float:left;
width:
48%;
}

• Klik Simpan

jika berhasil hasilnya akan seperti contoh gambar berikut :


Selamat mencoba dan semoga berhasil.

Animasi Neon Light pada Teks Blog

Membuat variasi teks sangatlah bermacam-macam, salah satunya adalah teks dengan animasi neon light. Animasi teks ini mungkin dibutuhkan oleh teman-teman blogger untuk mempercantik blognya. Meskipun pernah saya posting sebelumnya tentang cara membuat efek marquee teks, akan tetapi efek yang akan dibuat pada teks kali ini sangatlah berbeda jauh.

Dengan script dibawah ini akan membuat teks dengan efek neon light, dimana teks akan menyala dari posisi sebelah kiri kekanan hingga semua teks akan terlihat menyala.

Anda tertarik untuk mencobanya?
Silakan ikuti langka berikut.

• Login Blogger anda;
• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget)
• Pilih HTML/JavaScript
• Copy paste kode dibawah kedalam HTML tersebut;

<h2>
<script language="JavaScript1.2">
//Visit http://kang-onk.blogspot.com for this script
var message="Selamat Datang di Blog Kang Onk Design"
var neonbasecolor="red"
var neontextcolor="blue"
var neontextcolor2="#FFFFA8"
var flashspeed=100 // kecepatan berkedip
var flashingletters=3 // jumlah huruf yang berkedip
var flashingletters2=1 // jumlah huruf berkedip dalam neontextcolor2 (0 untuk menonaktifkan)
var flashpause=0 // jarak jeda antara flash-siklus dalam milidetik
///please do not delete the line and text/////
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script></h2>

Lalu Simpan;
Dan hasilnya:

*Catatan: silakan ganti huruf yang bercetak tebal diatas sesuai dengan template dan kesukaan anda.

Semoga berhasil dan berguna bagi anda semua.

Membuat 3 Kolom Horisontal Dibawah Header

Dalam postingan kali ini akan dibahas bagaimana membuat 3 widget atau kolom horisantal dibawah header blog, meski pada tutorial sebelumnya pernah dibahas disini, akan tetapi banyak keluhan dari pengunjung blog yang tidak berhasil. setelah saya koreksi ternyata tidak semua template berhasil menggunakan tutorial yang sebelumnya.

Untuk itu, tutorial ini sangatlah simple untuk membuat 3 kolom horisontal dibawah header blog. Langkahnya:

• Masuk ke akun Blogger Anda;
• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode ]]></b:skin>
• Jika ketemu copy paste kode dibawah ini sebelum ]]></b:skin> 

#header-column-divide {
clear:both;
}
.header-column {
padding: 10px;
}
#header-column-divide {
clear:both;
}
.header-column {
padding: 10px;
}

• Selanjutnya cari kode seperti ini :

<div id='header-wrapper'>
<b:section class='footer' id='footer'/>
</div>

• Sudah ketemu belum? jika ketemu, hapus kode <b:section class='footer' id='footer'/> dan ganti kode berikut

<div id='header-column-divide'>
<div id='header1' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='header-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='header2' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='header-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='header3' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='header-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

• Simpan dan lihat hasilnya.

Semoga berhasil dan jangan lupa klik + 1 sebagai rasa terima kasih anda pada Kang Onkatas tutorial cantik ini. Terima kasih atas dukungan anda atas blog ini.

Membuat Iklan Banner 125x125 pada Blog

Banyak banner atau iklan berupa gambar yang diliat pada hampir semua blog, terkesan menarik bukan? Oke pada tutorial kali ini akan dibahas tentang bagaimana membuat banner 125x125 digadget blog. Tanpa panjang lebar karena temen-temen blogger pasti tahu kegunaan banner 125x125 tersebut. Langkahnya adalah:

• Seperti biasa, Log in Blogger anda;


• Pilih Rancangan;


• Klik tab Tambahkan Elemen atau Gadget;


• Pilih HTML/JavaScript;


• Copy paste kode dibawah kedalam HTML tersebut;


• Lalu Simpan, dan liat selesai.

<div align="center">
<table border="0" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>
<td><center>
<!-- iklan#1 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-1' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
images[1] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-2' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
<td><center>
<!-- iklan#2 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-1' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
images[1] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-2' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
</tr>
<tr>
<td><center>
<!-- iklan#3 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-1' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
images[1] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-2' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
<td><center>
<!-- iklan#4 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-1' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
images[1] = "<a href = 'URL iklan anda' rel='nofollow' ><img src='URL gambar iklan anda-2' border='0' height='125' width='125' alt='Deskripsi tulisan anda'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</td></center>
</tr>
</tbody></table>
<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
<tr>
<td><center><a href="http://kang-onk.blogspot.com/" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="http://belfastcitylife.com/images/advertise_here.gif" /></a></center></td>
</tr>
</tbody></table>
</div>  

Silakan modifikasi sesuai dengan kesukaan banner/gambar iklan anda.
Selamat mencoba.

Menambahkan Slide Pada Entri Populer Default Blogger

Dalam kesempatan yang sempit ini, Kang Onk akan share cara menambahkan slide pada entri populer (populer view) bawaan dari blogger. Fungsi ini sama dengan tutorial disini dan ini hanya saja tutorial kali ini lebih simple dan menarik (menurut Kang Onk, red). Bahkan cara pembuatannya juga sangat gampang segampang membalikkan tangan.

Dalam postingan kali ini mungkin sangat menarik perhatian pengunjung blog anda karena tampilannya sangat cantik.... hehehehe.

Langsung saja pada langkah berikut:

• Masuk ke akun Blogger Anda;


• Pilih Rancangan;


• Klik tab Tambahkan Elemen;


• Pilih Entri Populer, pada display up to pilih angka 4;


• Lalu Simpan;


• Lalu Tambahkan Elemen;


• Pilih HTML/JavaScript


• Copy paste kode dibawah kedalam HTML tersebut;


• Lalu Simpan, selesai.

<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;

height:310px;

}
#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}
#PopularPosts1 li {
width:295px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7gt52FY6EL4UoKbKUYUMN2Zh66Tihqpyswq_ynNGZhiSdIrzZRY_aEy-nf2lsJ6V7xBTpDAlIT5k4C2VDToUHx8fttzdtc0HFQYrjNTQsuHDG8v6KQyT552q6ZuHYh1JV57pq4vnUtkU/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;

color:#7CA2C4;

font:bold 12px verdana;

height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:1px solid #CCCCCC;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Verdana, Arial;
font-size:11px;
color:#FFFFFF;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}
#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}
#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
a img {
border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Penempatan gadget/widget yang baru ditambahkan bisa diliat dibawah ini

• Orange:Tinggi pada widget.


• Biru: Warna dan font link judul.


• Merah : merupakan border dari image postingan anda.


• Kuning : ringkasan postingan anda.

Silakan modifikasi sesuai keinginan anda,
Selamat mencoba dan semoga berhasil

Membuat Recent Post Animasi Tumbnail Versi 2

Pada dini hari ini saya akan memberikan tips Cara Membuat Recent Post Disertai  Animasi Tumbnail Versi 2, menarik bukan.. Oke, sebelumnya saya pernah membahas bagaimana Membuat Populer View dengan Thumbnail Bergerak Fungsi keduanya sama hanya saja pada tutorial kali ini lebih simple dari tutorial sebelumnya. Langsung ke TKB saja ya...!!!

• Pilih Rancangan;


• Klik tab Tambahkan Elemen;


• Pilih HTML/JavaScript;


• Copy paste kode dibawah ini kedalamnya;

<style type="text/css">
#kod_plus_img{height:377px;}
#kod_plus_img li {height:50px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #ccc;}
#kod_plus_img a{color:#000;}
#kod_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#kod_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kang-onk.googlecode.com/files/recentpost-v21.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
kodnewsticker();
interval = setInterval(kodnewsticker, pause);
});
</script>
<ul id="kod_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=kodthumbnt"></script>
</ul><small><a href="http://kang-onk.blogspot.com/2011/09/membuat-recent-post-animasi-tumbnail.html" target="_blank">pasang widget ini</a></small>

• Klik Simpan 


• Lihat Hasilnya.

Silakan modifikasi sesuai dengan template blog anda semua.
Semoga bermanfaat bagi anda seaklian dan jangan lupa komentarnya, terima kasih

Membuat Link Seksi (Bergerak) pada Blog

Namanya saja sudah seksi, apalagi penerapannya jelas mengagumkan banget. Pada tutorial kali ini akan dibicarakan topik tentang membuat Link pada Blog Tampil Seksi. Langsung aja karena sudah capek seharian keluyuran. Ikuti aja langkah berikut :

Langkah Pertama :

• Masuk ke akun Blogger Anda;


• Klik tombol Rancangan;


• Pilih Edit HTML;


• Cari kode ]]></b:skin>


• Jika ketemu copy paste kodedibawah sebelum kode ]]></b:skin>

.seksilink  {-moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }.seksilink:hover  {margin-left: 20px;padding-left: 10px;}

• Simpan Template.

Langkah Kedua :

• Pilih Rancangan;


• Klik tab Tambahkan Elemen;


• Pilih HTML/JavaScript


• Copy paste kode dibawah kedalam HTML tersebut;


• Lalu Simpan.

<li><a href="URL Link Anda" target="new" class="seksilink">Nama Link</a></li>
<li><a href="URL Link Anda" target="new" class="seksilink">Nama Link</a></li>

Selamat mencoba dan semoga berhasil.

Buku Tamu Tersembunyi dan Profesional Dengan jQuery

Langsung aja pada topik tentang membuat buku tamu tersembunyi versersi terbaru, sebab fungsi buku tamu sudah pernah dibahas sebelumnya disini dan disini. Kode ini saya dapatkan dari salah satu teman yang bernama Ahrizal WS. Akan tetapi, pada tutorial kali ini menggunakan jQuery sepenuhnya tanpa menambahkan gadget. Biar anda tidak penasaran silakan lihat demo disini

Langkahnya sebagai berikut :

• Masuklah ke akun Blogger yang anda miliki;


• Pilih dan klik tombol Rancangan dan pilih Edit HTML;


• Jangan lupa Centang Expend Widget;


• Cari kode </head>


• Masukan kode derikut diatas </head>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.slide&quot;).click(function(){
$(&quot;.kodbk&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>

• Lanjutkan pencarian kode ]]></b:skin>


• Copy paste kode berikut diataskode ]]></b:skin>

/*KOD Buku Tamu V-3*/
.kodbk{position:fixed;top:40px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.kodbk p{color:#ccc;margin:0 0 15px;padding:0}
.kodbk a,.kodbk a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.kodbk a:hover,.kodbk a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.slide{position:fixed;text-decoration:none;top:110px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLbLnnoS1YU6E3gZn7n7baLi-qW3Glb36pEnOB9qvT-uAoMhPTKUQLzLOzojlNkTAzcmzyaUZGcdd1z9hGhbqNc_GU1l_r4rPKrF1Sj-XgV7t-AOyvIu1OjEwfHp8OGVHDmRYqhAEbK0/) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.slide:hover{position:fixed;text-decoration:none;top:110px;left:50px;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL1veBRHIz-KrNYocUm9B0XxwB2-dhNyYNKyGdOzjax4a3Dm4gnIletr2NcJjAgcJoXAKS9XM71wo55HGGoeG2f3c6kbHlbuAwTsJvcmnYBSQr8tt4J3J44GWWVyK5jrVIxHi9IL0KOQY/) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.slide{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.table{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.kodbk img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.kodbk h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.table ul,.table ul li{list-style-type:none;margin:0;padding:0}

• Langkah yang terakhir carilah kode </body>


• Copy kode dibawah ini dan pastekan diatas kode </body>

<div class='kodbk'>
<h3>Buku Tamu</h3>
------ Kode Buku Tamu Anda -------------
</div>
<a class='slide' href='#'>Buku Tamu</a>

• Simpan Template dan lihat hasilnya

Selamat mencoba dan semoga berhasil