Cara Download Video dari Youtube Dengan KeepVid

Selasa, 02 Oktober 2012

 

Beberapa teman masih sering bertanya tentang bagaimana download video lewat situs youtube.com. Memang mengundung video gampang-gampang susah. Penyebabnya juga bermacam-macam. Nah, sebelum kita membahas tentang cara download video youtube, mending kita cek and ricek dulu. Pertama dan yang paling utama mungkin, pastikan koneksi internet anda mendukung. Maksudnya sinyalnya ndak putus nyambung dan kecepatannya koneksinya memungkinkan.

Dulu pas saya masih pake modem smartfren, mau download satu buah video yang kecil aja, waduh setengah mati lah menunggu dan bersabar. Baru jalan berapa detik videonya, muncul buffernya (yang muter-muter di tengah video trus ilang kalau video jalan lagi). Dikit-dikitt buffer lagi, buffer lagi. Untung Tuhan memberikan kesabaran sedikit untukku. Jadi kalo kecepatan koneksi internet anda lambat dan anda tipe jiwa-jiwa yang kurang sabar, saran saya don’t do it. Mending ke warnet saja bentar. Atau menunggu internet di Indonesia jadi cepat dan entah kapan itu terjadi.

Masalah sinyal yang putus nyambung, kita juga harus waspada. Biasanya terjadi pada internet via hotspot, modem atau yang jenis nirkabel lain. Maklum, untuk jenis nirkabel (tanpa kabel) cuaca, jarak dan kemmapuan wearless sangat menentukan. Ini pengalaman pribadi lagi, sekadar download satu video, karena menyadari jaringan yang lemot, aku sambi bobo (duh imut banget ya…) semalaman. Dan paginya, jrengg…. mimpi semalam ternyata lebih indah. Gagal, gagal dan gagal. Mungkinn kejadiannya, udah mau penuh proses downloadnya, eh… sinyal ilang. Pas nyambung, mulai lagi dari awal, trus sinyal ilang, putus lagi. Dan lagi dan lagi sampai pagi.

Ok. Lanjut bro. Untuk persiapan software tentu saja flash player untuk memutar file video di tampilan youtube. Untuk memutar hasil download juga perlu diinstal dulu playernya. Bisa pake GOM, K-Lite Codec, FLV atau aplikasi lain. Tapi biasanya yang tiga ini sudah cukup. Kalau belum punya, monggo download dulu aplikasinya disini (GOM ; K-Lite Codec ; FLV).

Selanjutnya proses downloadnya. Ada beberapa sofware yang biasa digunakan. Ini ada tiga cara yang biasa saya gunakan. Mana yang tercepat? Semua lebih tergantung pada dua hal yang tadi di atas. Semua aplikasi yang digunakan rata-rata yang hampir sama lah.

1. www.keepvid.com
Pertama buka dulu www.keepvid.com. Nanti akan terlihat tampilan kira-kira seperti di bawah ini.



Selanjutnya, masuk halamann youtube.com, puter video pilihamu lalu copy alamat URL nya. Lihat tanda panah merah.



Ndak usah diketik. Copy saja lalu buka tampilan keepvid.com dan paste di kolom yang dikasih tanda panah merah. Trus klik DOWNLOAD di samping kanannya. Nantti kira-kira hasilnya seperti contoh di bawah ini.



Kalau sudah pilih salah satu format video yang disukai dan tergantung player yang digunakan. Biasanya format (dibelakang nama video) yang disediakan ada FLV, MP4, WebM, dan 3GP dan tambahan MP3 (hanya file audio saja). Semuanya bisa diputer pake GOM, FLV, dan K-LIte COdec.

Terkadang tampilan pilihan file tidak dimunculkan, tapi server malah minta diinstal JAVA. Kalo begitu kejadiannya, berarti komputer anda belum ada aplikasi java-nya. Ya, skalian saja download JAVA dulu, trus instal. Cukup sekali untuk pemakaian seterusnya. Kalau mau cepet, monggo download saja di sini JAVA. Kalau sudah silahkan langsung diinstal dan jangan lupa internet dalam kondisi connect.

Nah, mudah to. Silahkan berpuas-puas mendownload video youtube. Tapi ingat, video yang baik-baik saja ya. Biar berkah.

Sebagai tambahan sebenarnya banyak sekali software yang bisa digunakan untuk download video-video youtube. Semua memiliki keunggulan dan kelemahan masing-masing. Berikut ini aplikasi yang bisa digunakan untuk download. Silahkan download lewat link di bawah ini. Proses penggunaannya hampir sama. Intinya COPAS alamat URL dari youtube.com ke aplikasi yang digunakan.

1. Internet Download Manager (IDM),
2. I Livid Download Manager
3. Youtube Downloader,
4. Solid Youtube Downloader and conventer



Sumber: sanggarpendidikanfisika.wordpress.com

Read More | komentar

Cara Membuat Menu Vertikal Dengan Sub Menu

Kamis, 06 September 2012

Cara Membuat.
1. Login ke Blog kamu.
2. Pilih Rancangan > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<style>
/* Page Styles */
.menu-container {padding: 20px 0; width: 250px; float: left;}
.clear {clear: both;}
ul{list-style:none;
border:0;outline:none;margin:0;padding:0;}
/* Vertical Mega Menu Styles */
.mega-menu{
font: bold 13px Arial, sans-serif;
line-height: 16px;
background: #333;
border-left: 1px solid #1B1B1B;
position: relative; /* Required */
}
.mega-menu li a {
display: block;
color: #fff;
padding: 12px 38px 12px 25px;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
background: #4b4b4b;
color: #fff;
border-right: 1px solid #4b4b4b;
}
.mega-menu li a.dc-mega {
position: relative;
}
/* Add arrow icon to parent links */
.mega-menu li a .dc-mega-icon {
display: block;
position: absolute;
top: 18px;
right: 15px;
width: 6px;
height: 8px;
background: url(https://lh6.googleusercontent.com/-laQkZDiPnTU/T2mCautiJgI/AAAAAAAAAJE/W4AmH-Erz90/s12/arrow_right.png) no-repeat 0 0;
}
/* Mega menu container */
.mega-menu li .sub-container {
position: absolute; /* Required */
background: #4B4B4B;
padding: 10px 10px 0 10px;
overflow: hidden;
border: 1px solid #4b4b4b;
border-left: none;
}
.mega-menu li .sub .row {
width: 100%; overflow: hidden; /* Clear floats */
}
.mega-menu li .sub li {
float: none;
width: 150px;
font-size: 1em;
font-weight: normal;
}
.mega-menu li .sub li.mega-hdr {
float: left; /* Required */
margin: 0 5px 10px 5px;
}
.mega-menu li .sub a, .mega-menu.left li .sub a {
background: none;
border: none;
text-shadow: none;
float: none;
color: #fff;
padding: 7px 10px;
display: block;
text-decoration: none;
font-size: 0.9em;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a {
padding: 5px 5px 5px 15px;
margin-bottom: 5px;
background: #E88221;
text-transform: uppercase;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #333;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
text-shadow: none;
}
.mega-menu .sub li.mega-hdr li a {
padding: 4px 5px 4px 20px;
background: url(https://lh6.googleusercontent.com/-8rWzoixDQ3A/T2mCZSCPlWI/AAAAAAAAAIw/pYwQCVUgd1w/s8/arrow_white.png) no-repeat 5px 8px;
font-weight: normal;
}
.mega-menu .sub li.mega-hdr li a:hover {
color: #a32403;
background: #efefef url(https://lh3.googleusercontent.com/-MUXpMaAJ8Mo/T2mCY-_uNEI/AAAAAAAAAIs/2v_uqOX8qC8/s8/arrow_on.png) no-repeat 5px 8px;
}
.mega-menu .sub ul li {
padding-right: 0;
}
/* Styling for Menu Items with only 2 levels */
.mega-menu li .sub-container.non-mega .sub {
padding: 10px;}
.mega-menu li .sub-container.non-mega li {
padding: 0;
margin: 0;
width: 150px;
}
.mega-menu li .sub-container.non-mega li a {
padding: 7px 5px 7px 22px;
background: url(https://lh6.googleusercontent.com/-8rWzoixDQ3A/T2mCZSCPlWI/AAAAAAAAAIw/pYwQCVUgd1w/s8/arrow_white.png) no-repeat 7px 10px;
}
.mega-menu li .sub-container.non-mega li a:hover {
color: #a32403;
background: #efefef url(https://lh3.googleusercontent.com/-MUXpMaAJ8Mo/T2mCY-_uNEI/AAAAAAAAAIs/2v_uqOX8qC8/s8/arrow_on.png) no-repeat 7px 10px;
}
</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://ravisaivein.googlecode.com/files/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='http://ravisaivein.googlecode.com/files/jquery.dcverticalmegamenu.1.0.js'></script>
<script type="text/javascript">
$(document).ready(function($){
$('#mega-1').dcVerticalMegaMenu({
rowItems: '3',
speed: 'fast',
effect: 'show',
direction: 'right'
});
});
</script>
<div class="menu-container clear">
<ul id="mega-1" class="mega-menu">
<li><a href="#">Menu Item A</a>
<ul>
<li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item B</a>
<ul>
<li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
</ul></li>
<li><a href="#">Menu Item C</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 7</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item D</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item E</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
</ul></li>
<li><a href="#">Menu Item F</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 7</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item G</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item H</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item I</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
</ul></li></ul>
</div>

Silahkan anda ganti tanda # dengan URL yang dituju dan kata Menu Link dengan kata lainnya. 

Read More | komentar

Cara Membuat Like Facebook Melayang Pada Blog

Bagaimana Cara Membuat Like Facebook Melayang pada layar blog anda, caranya mudah sekali.

Langkah-langkahnya sangat mudah :

1. Login ke www.blogger.com

2. Klik > Tata Letak > Tambah Gadget > HTML/JavaScript

3. Setelah itu masukkan Script di bawah ini

<div

style="display:scroll;position:fixed;top:50px;left:400px;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://sudidoremie.googlecode.com/files/slidefbnew.js" type="text/javascript">
</script>
<style>
#kompiajaib_slidefb2012{
font-family: "Consolas", "Courier New", Courier, mono, serif;
border: 1px solid;
width: 355px;
margin: 10px 0px;
padding:5px 0px 0px 5px;
background-repeat: no-repeat;
position:relative;
color: #00529B;
background-color: #FFFFFF;
}
</style>
<div id="kompiajaib_slidefb2012">
<a class="close"  href="#close" style='position:absolute;right:0px;top:0px;margin-right:-1px;margin-top:-1px;'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMGEaDwXxCXH_vKc7Aop8vB6KHwl4bPWA4OAwtra3CObbytCSlXmXsyD0MwhGPql98jcu6rh6nMKYmGM-qnOOMYzeMhErHIQT4tfjGKnfuaJDhZpS93ioP9dPJHcCcf9DQeRa7KaU_DwMf/s1600/popover-close-button.gif" /></a>
<div style='width:99%;padding:8px 0px;background-color:#737373;font-family:arial;text-align:center;'><div style='color:#FFF;font-size:13px;font-weight:bold;'>Like us and get updates</div></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FGembaraSoftware&amp;width=351&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=294651503949340" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:258px;" allowtransparency="true"></iframe></div></div
style="display:scroll;position:fixed;top:50px;left:400px;">

4. Setelah itu tinggal Simpan

Catatan :
- Code yang Berwarna MERAH bisa di ganti dengan scrip Facebook anda.
- Atau mungkin GembaraSoftware bisa anda ganti dengan id Facebook anda.

Read More | komentar

Cara mudah Parse atau Encode kode HTML

Rabu, 05 September 2012

Parsing atau Encode HTML merupakan cara yang cukup penting  bagi para publisher yang akan membuat artikel mengenai code script html  yang akan ditampilkan dalam postinganya pada saat dipublish.Misalnya ingin membuat postingan yang akan dipublish berisi code script html agar code script htmlnya tampil dihalaman postingan pada saat dipublish , seperti contoh ingin membuat artikel mengenai tutorial cara membuat widget recent post, cara membuat text area, cara mengedit template blog, cara parsing/encode HTML pada code iklan PPC/Adsense  agar iklan dapat diselipkan diantara halaman posting, dan mungkin juga tutorial tentang cara membuat guestbook pada blogspot maupun wordpress dll. Kesimpulannya  kode HTML tidak akan keluar di artikel postingan blog kita tanpa kode tambahan. Jadi bila kita tidak hafal kode tambahan tersebut, gunakan saja situs program extract Encode/Decode HTML entities yang sudah tersedia. Berikut ini saya akan mencoba menjelaskan kepada sobat netter cara mudah dan cepat mem-parsing/Encode HTML :

1. Siapkan/copy-kan dulu  kode HTML yang ingin sobat parsing/di-Encode, kemudian klik disini
2. Masukkan kode HTML yang tadi sobat copy ke dalam kotak yang tersedia dan klik Parse , selesai dan copykan saja hasil parsenya ke tempat yang sobat inginkan.

Atau sobat netter bisa melakukan parse dengan cara lain adalah dengan cara silahkan menuju ke centricle.com kemudian pilih pada bagian tab tool :



Pilih Encode/Decode HTML entities :



Tentunya code script html yang akan di parse/Encode sudah disediakan/dicopy dan dipaste/ditempatkan pada kolom Encode. Kemudian klik Encode bila kita ingin melakukan parse kode , copy kan hasil parsenya ketempat yang ingin sobat netter inginkan.



Jika ingin mengembalikan kode kita seperti semula kita hanya melakukan  paste/tempatkan saja code script html yang sudah di parse/encode lalu klik tombol decode.
Contoh berikut ini adalah cara memparse/Encoding code iklan PPC/Adsense yang akan dimasukan ke halaman postingan pada blog :

Bila tidak di-parse besar kemungkinan  kita akan mendapati pesan error seperti berikut :

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The processing instruction target matching "[xX][mM][lL]" is not allowed.

Anda dapat menggunakan cara yang lebih mudah untuk memparse code iklan PPC/Adsense yaitu silahkan Anda kunjungi disini http://www.blogcrowds.com sebelumnya copykan dulu code iklan PPC/Adsense yang akan Anda parse/Encode lalu paste/tempatkan ke kolom parse yang tersedia, dilanjutkan dengan memilih tombol PARSE untuk memulai proses encoding/parsing :

 

Dibawah ini adalah contoh gb. dari hasil parse/encodenya :


Selanjutnya copas/copy paste kan hasil parse/encode dari kode iklan PPC/Adsense ke halaman template HTML Anda.

Cara lainnya dapat juga dilakukan dengan cara seperti yang sudah dijelaskan diatas yaitu menggunakan  centricle.com kemudian menuju tab tool pilih Encode/Decode HTML entities. Kemudian klik Encode bila kita ingin melakukan parse kode dan klik Decode bila kita ingin mengembalikan kode kita seperti sebelumnya.

Sekian dan semoga berguna bagi ANDA.



Sumber: http://bisnisonlinetop1.blogspot.com

Read More | komentar

Memasang Kode Warna di Blog

Rabu, 29 Agustus 2012

Dalam membuat sebuah blog, kita pasti dihadapkan pada pemilihan sebuah warna. Warna dalam membuat blog memiliki kode tersendiri. Kode warna bagi sebagian blogger yang senang merias tampilan dan keindahan Blog, sangat dibutuhkan untuk kemudahan mendapatkan kode HTML dari setiap warna yang diperlukan. Nah untuk lebih mudah mendapatkan kode HTML setiap warna yang diinginkan, alangkah baiknya jika temen-temen memasang tabel kode warna ini di Blog atau di dalam postingan artikel. Dengan demikian dijamin teman-teman akan lebih cepat dalam bekerja merias blog karena tabel kode warrna sudah terinstall di Blog.

Cara pasang widget kode warna pada blogger

Langkah Pertama

1. Login ke blogger dengan id anda
2. Klik menu Tata Letak
3. Pada tab menu klik Edit HTML
4. Silahkan Backup dulu template anda dengan klik Download Template Lengkap
5. Sekarang cari kode </head>. Jika sudah ketemu, copy lalu paste kode berikut di atas kode </head>

   <script language='javascript'>
   function Barva(koda)
   {
   document.getElementById("vzorec").bgColor=koda;
   document.hcc.barva.value=koda.toUpperCase();
   document.hcc.barva.select();
   }
   function BarvaDruga(koda)
   {
   document.getElementById("vzorec2").bgColor=koda;
   document.hcc.Barva2.value=koda.toUpperCase();
   document.hcc.Barva2.select();
   }
   </script>
   
   <script type='text/javascript'>
   
   var hue;
   var picker;
   //var gLogger;
   var dd1, dd2;
   var r, g, b;
   
   function init() {
   if (typeof(ygLogger) != "undefined")
   ygLogger.init(document.getElementById("logDiv"));
   pickerInit();
   //ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
   //ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
   }
   
   // Picker ---------------------------------------------------------
   
   function pickerInit() {
   hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
   hue.onChange = function(newVal) { hueUpdate(newVal); };
   
   picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
   picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
   
   hueUpdate();
   
   dd1 = new YAHOO.util.DD("pickerPanel");
   dd1.setHandleElId("pickerHandle");
   dd1.endDrag = function(e) {
   // picker.thumb.resetConstraints();
   // hue.thumb.resetConstraints();
   };
   }
   
   executeonload(init);
   
   function pickerUpdate(newX, newY) {
   pickerSwatchUpdate();
   }
   
   
   function hueUpdate(newVal) {
   
   var h = (180 - hue.getValue()) / 180;
   if (h == 1) { h = 0; }
   
   var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
   
   document.getElementById("pickerDiv").style.backgroundColor =
   "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
   
   pickerSwatchUpdate();
   }
   
   function pickerSwatchUpdate() {
   var h = (180 - hue.getValue());
   if (h == 180) { h = 0; }
   document.getElementById("pickerhval").value = (h*2);
   
   h = h / 180;
   
   var s = picker.getXValue() / 180;
   document.getElementById("pickersval").value = Math.round(s * 100);
   
   var v = (180 - picker.getYValue()) / 180;
   document.getElementById("pickervval").value = Math.round(v * 100);
   
   var a = YAHOO.util.Color.hsv2rgb( h, s, v );
   
   document.getElementById("pickerSwatch").style.backgroundColor =
   "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
   
   document.getElementById("pickerrval").value = a[0];
   document.getElementById("pickergval").value = a[1];
   document.getElementById("pickerbval").value = a[2];
   var hexvalue = document.getElementById("pickerhexval").value ='#'+
   YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
   ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
   if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
   }
   
   </script><!--[if gte IE 5.5000]>
   <script type="text/javascript">
   
   function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
   {
   var img = document.images[i]
   var imgName = img.src.toUpperCase()
   if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
   {
   var imgID = (img.id) ? "id='" + img.id + "' " : ""
   var imgClass = (img.className) ? "class='" + img.className + "' " : ""
   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
   var imgStyle = "display:inline-block;" + img.style.cssText
   if (img.align == "left") imgStyle = "float:left;" + imgStyle
   if (img.align == "right") imgStyle = "float:right;" + imgStyle
   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
   var strNewHTML = "<span " + imgID + imgClass + imgTitle
   + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
   + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
   + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
   img.outerHTML = strNewHTML
   i = i-1
   }
   }
   }
   
   YAHOO.util.Event.addListener(window, "load", correctPNG);
   
   </script>
   <![endif]-->

6. Selesai

Langkah Kedua :

Berikutnya, memasang tabel kode warna pada blog. Ada dua pilihan, pertama dipasang sebagai posting blog dan yang kedua dipasang pada halaman utama (homepage) blog. Nah, kode untuk tabel kode warna yang akan dipasang adalah berikut ini :

Kode Warna :

</div><center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table><table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24">
</td><td valign="bottom"><p>Kode warna : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form></center>

Cara pasang kode warna sebagai posting blog :

• Yang pasti, anda buat posting baru terlebih dahulu
• Copy lalu paste Kode Warna tersebut pada posting anda
• Berikan judul posting yang sesuai
• Jangan lupa untuk memberi label posting
• Kemudian terbitkan postingan
• Selesai

Cara pasang kode warna di halaman utama (homepage) blog :

• Masuk ke menu Elemen Halaman
• Klik Tambah Gadget
• Pilih tambahkan HTML/JavaScript
• Copy lalu paste Kode Warna tersebut di dalamnya.
• Berikan judul atau nama gadget
• Klik tombol Simpan
• Silahkan tempatkan gadget kode warna dengan men-drag ke tempat yang sesuai
• Klik tombol Simpan
• Selesai

Hasilnya nanti akan seperti ini :

Kode warna :

Sekarang widget kode warna sudah hadir di blog anda. Selamat mencoba dan mudah-mudahan bermanfaat.

Read More | komentar

Cara Pasang Iklan Dibawah Judul Posting

Cara Pasang Adsense di bawah Judul postingan atau pasang iklan di bawah judul posting - lama bener ya ga update Tips blogging, nah kali ini untuk memaksimalkan hasil dari GA alias google adsense saya disini akan memberikan kepada anda sekalian cara memasang adsense di bawah Judul Posting agar iklan adsense kita keluar saat orang klik judul dan peletakanya dibawah Judul posting, hanya sekedar mengingatkan kita juga sudah pernah membahas mengenai memasang adsense atau iklan di bawah postingan, dan semua ini kita lakukan untuk memaksimalkan hasil GA kita agar erning bisnis online kita bisa meningkat jika kita mau ngobrol seputar bisnis online

cara memasang adsense di bawah judul posting sebenarnya tidak begitu sulit, dan kita ikuti saja langkah-langkahnya berikut ini:
1. Seperti biasa kita log in ke akun blogger kita kemudian masuk ke tata letak edit html dan jangan lupa centang “Expand widget template”
2. Kemudaian ctl F cari kode berikut ini,

<data:post.body/>

3. Setelah ketemu kemudian pasang kode Google Adsense anda di atas kode tersebut
4. Kurang lebih jadinya sepeti ini

< === KODE IKLAN ANDA === >
<data:post.body/>

Akan tetapi jangan lupa untuk memparse kode GA ( Google Adsense ) anda, jika anda kesulitan untuk memparse kode ga anda bisa kalian kunjungi alamat ini http://centricle.com/tools/html-entities/ kemudian masukan kode GA anda sekalian di dalam kotak yang tersedia dan klik end code, dan kode yang dihasailkan letakan diatas post body yang tadi, selamat mencoba untuk meletaknan iklan di bawah judul posting semoga hasil GA anda bisa meningkat dengan peletakan GA yang menarik perhatian orang.

Read More | komentar (1)

Membuat Kolom Widget Di Samping Header Blog

Membuat Kolom Widget Di Samping Header Blog - Seperti yang ditanyakan oleh salah satu pengunjung, saya akan memberikan cara untuk Membuat Kolom Widget Di Samping Header Blog. Mungkin cara ini bisa digunakan untuk menaruh iklan yang dipasang di blog.


Silahkan ikuti langkah ini untuk membuatnya :


1. login blogger.com
2. Tata Letak ---> Edit HTML
3. Lalu cari kode seperti ini :

----------------------------------------------------------------------------
/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

4. ganti kode tersebut dengan ini !

/* Header
===================================
*/

#header-wrapper {
width: 900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height: 190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

Kode  900px adalah panjang header, kode yang berwarna hijau 190px adalah tinggi header.
 
5.Kemudian cari kode seperti di bawah ini !

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

6. Kalau sudah ketemu ganti kode tersebut dengan kode di bawah ini !

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

7.Klik tombol simpan template.
 
Kemudian pilih Elemen Halaman, lalu lihat perbedannya. Mungkin beberapa blog tidak berhasil untuk memasangnya, dan ambilan kode yang mirip dengan diatas.. selamat mencoba



Sumber Artikel: Habluezshare.blogspot.com

Read More | komentar

Cara Membuat Menu Horizontal Pada Blog

Menu di dunia internet memiliki arti tersendiri khususnya dalam blog. Karena menu tidak hanya merupakan salah satu atribut yang dapat memperindah tampilan blog akan tetapi tujuan utamanya adalah sebagai sarana untuk membuat link, baik link postingan ataupun situs-situs referensi blognya kita.

Dengan adanya menu yang terpampang di bawah header blog setidaknya akan memberikan gambaran kepada pengunjung tentang artikel-artikel di dalamnya.

Cara membuat menu Horizontal blog dapat dilakukan dengan langkah-langkah sebagai berikut:.
1. Sign in di blog
2. Pilih rancangan
3. Klick Tambah Gadget/Add gadget.
4. Pilih Html/Javascript
5. Copy kode berikut ini untuk ditempat gadget HTML/Javascript

<div id="tabs">
<ul>
<li><a href="http://sudidoremi.blogspot.com">HOME</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>

Sebelum memasang kode-kode di atas pada html/javascript agar terlebih dahulu merubahnya seperti yang tertera di bawah ini supaya menu horizontalnya dapat berfungsi secara optimal di blognya anda.

• Tulisan yang berwarna hijau URL atau situs tujuan. 
• Judul-postingan.html : Halaman situs tujuan
• HOME :Tulisan yang tampil di Menu

6. Paste kode yang dikopi di atas pada html/javascript
7. Jangan lupa disimpan ya.... supaya menu horinzontalnya jadi.
8. Tempatkan gadget yang ditambah di bawah header blog

Setelah melakukan langkah-langkah yang dijelaskan di atas selamat melihat hasilnya.

Sumber Artikel: bangahyar.blogspot.com

Read More | komentar

Membuat Blockquote Dengan Image Gradient

Contoh Blockquote

Itulah yang namanya blockquote. Tutorial yang baru saja saya pelajari dari blog { limitpost.blogspot.com }. Kayanya gak usah panjang lebar lagi ya mungkin semuanya pada tahu apa itu blockquote.

Step 1
- Masuk ke blog anda.
- Masuk ke Template -> Edit HTML -> Lanjutkan -> Expand template widget.
- Lalu klik ctrl + f. Cari kode ini   ]]></b:skin>

Step 2
- masukan kode ini tepat diatas kode   ]]></b:skin   :

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;border-right: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "201C""201D""2018""2019";
}

blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}

blockquote {
    font-family: "Arial","Verdana",Serif;
    font-size: 16px;
    padding: 50px 5px;
    position: relative;
    text-align: center;
}

blockquote p {
    margin: 0 0 20px;
    display: inline;
}

blockquote:before {
    top: 25px;
}

blockquote:after {
    bottom: 25px;
}

blockquote:before, blockquote:after {
background-image: -webkit-linear-gradient(left,#eee,#eee 35%,#f3a01e 35%,#f3a01e 45%,#d05d2a 45%,#d05d2a 55%,#9dc425 55%,#9dc425 65%,#eee 65%,#eee);
    background-image: -moz-linear-gradient(left,#eee,#eee 35%,#f3a01e 35%,#f3a01e 45%,#d05d2a 45%,#d05d2a 55%,#9dc425 55%,#9dc425 65%,#eee 65%,#eee);
    background-image: -ms-linear-gradient(left,#eee,#eee 35%,#f3a01e 35%,#f3a01e 45%,#d05d2a 45%,#d05d2a 55%,#9dc425 55%,#9dc425 65%,#eee 65%,#eee);
    background-image: -o-linear-gradient(left,#eee,#eee 35%,#f3a01e 35%,#f3a01e 45%,#d05d2a 45%,#d05d2a 55%,#9dc425 55%,#9dc425 65%,#eee 65%,#eee);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
}

Step terakhir
- Save template anda.




Sumber Artikel: limitpost.blogspot.com

Read More | komentar