Rabu, 28 Desember 2011

Jaringan Peer to Peer adalah jaringan komputer dimana setiap host dapat menjadi server dan juga menjadi client secara bersamaan.


Cara Mengkoneksikan Jaringan Peer to Peer

1. Menampilkan Icon Local Area Connection

Icon Local Area Network perlu Anda munculkan pada masing-masing komputer untuk memudahkan Anda Mendeteksikan hubungan yang terjadi dengan cara :

a. Klik dua kali icon Local Area Network di pojok kanan bawah monitor Anda.
b. Akan muncul jendela Network Conections


c. Klik kanan icon Local Area Network lalu pilih Properties.

d. Berikutnya akan ditampilkan kotal dialog Local Area Connection Properties seperti terlukis pada gambar di bawah, pastikan tab General dalam kondisi terpilih kemudian beri tanda conteng bagian Show icon notification area when connecced dengan cara mengklik-nya agar bila terjadi hubungan komputer antar komputer icon Local Area Connection akan di munculkan.
e. Klik tombol Ok untuk Mengkhari.

2. Memberi Alamat Pada Masing-Masing Komputer.

Komputer yang berhubungan ke jaringan harus di beri alamat atau tanda pengenal(dalam bahasa jaringan lebih di kenal dengan istilah IP Addres) agar di kenali oleh komputer angota jaringan. Berikut adalah langkah-langkah untuk memberi IP Address pada komputer yang menggunakan operating system Windows XP.

a. Buka lah Jendela Local Area Connection, Properties.

b. Pastikan tab General dalam kondisi terpilih, selanjutnya pada bagian This Connections user the following items klik pilihan Internet Protocol (TCP/IP). Ingat klik tulisannya bukan pada kotak check-nya, setelah itu klik tombol Properties. Lihat pada gambar berikut sebagai ilustrasi nya.
c. Akan muncul jendela Internet Protocol (TCP/IP) Properties. Klik lingkaran pilihan Use the following IP Address setelah itu pada bagian IP Address isi dengan 192.168.1.1 dan pada bagian Subnet mask isi dengan 255.255.255.0 (biasanya muncul secara otomatis). Untuk isian yang lain kosongkan saja. Lihat gambar di bawah, untuk lebi jelas nya.

d. Klik tombol Ok untuk menutup jendela Internet Protocol (TCP/IP) lalu klik tombol Close untuk menutup jendela Local Area Connection Properties.

Setelah menyelesaikan tahap ini, berikan Ip Addres untuk komputer satunya, tetapi ganti angka paling belakang dengan angka 2, sehingga Anda akan memiliki dua nomor IP Addres yaitu 192.168.1.1 untuk komputer 1 dan 192.168.1.2 untuk komputer 2 Anda. Untuk Subnet mask-nya sama-sama menggunakan 255.255.255.0

3. Menghubungkan Komputer

Berikut nya saat menghubungkan 2 komputer dengan metode peer to peer. Langkah-Langkahnya adalah sebagai berikut :

a. Masukkan ujung kabel yang satu ke lubang konektor RJ-45 pada LAN Card komputer 1 dan ujung lainnya ke LAN Card di komputer 2.

b. Bila sudah, perhatikan pojok kanan bawah kedua monitor komputer Anda, pada icon Local Area Connection akan di perlihatkan proses pencarian keberadaan komputer lain dengan cara mengenali IP Addres masing-masing komputer. Jika berhasil maka tanda silang pada icon Local Area Connection akan hilang.
Selamat Anda telah berhasil membuat koneksi antar dua komputer.
Read More....

Selasa, 27 Desember 2011

Cara mempercepat koneksi internet. Mempercepat koneksi internet yang lambat adalah tema postingan kali ini. Koneksi internet yang lambat memang sangat menyebalkan dan dapat membuat emosi yang kadang berlebihan hehe. Sebenarnya ada beberapa trik mudah yang dapat di gunakan untuk mempercepat koneksi internet anda.

Cara mempercepat koneksi internet

Mempercepat koneksi internet dengan menutup program yang terus menggunakan Bandwidth Internet. Program seperti AIM, Skype dan MSN yang selalu menggunakan Internet untuk menyambung ke server chatting untuk menghubungkan jaringan dengan teman anda. Program ini diam-diam mengisap koneksi Internet Anda. Jika program tersebut terbuka terus-menerus dan Internet Anda berjalan lambat, coba menutup program tersebut satu per satu. Mungkin ini salah satu cara paling mudah untuk mempercepat koneksi internet anda.

Mempercepat koneksi internet dengan membatasi jumlah halaman Web yang anda buka. Membuka 30 halaman web yang berbeda adalah faktor utama yang membuat koneksi Internet Anda berjalan lambat. Cobalah membatasi browsing Anda, jika halaman web yang anda buka sudah tidak di butuhkan, segera tutup saja. Dan jangan membuka beberapa halaman web (misalkan 10 halaman) secara bersamaan, karena itu akan membuat koneksi anda semakin lambat. Tapi bukalah halaman web yang ingin anda kunjungi satu per satu agar koneksi internet anda terasa lebih cepat.

Langkah 3 untuk mempercepat koneksi internet yaitu mematikan Program Email seperti Outlook dan Tundher Bird. Ke dua program tersebut terkenal untuk membuat Internet Anda berjalan lebih lambat. Ini adalah masalah besar karena program tersebut tidak hanya memeriksa atau melihat inbox email anda, tetapi mereka juga dapat men-download banyak data. Anda harus membatasi jumlah waktu yang di habiskan untuk program tersebut karena mereka cenderung untuk memperlambat Internet Anda.

Cara mempercepat koneksi internet

Mempercepat koneksi internet juga perlu memantau kegiatan Jaringan PC. Jika anda menggunakan 1 jaringan dengan menghubungkan ke beberapa komputer (LAN) itu bisa saja menjadi faktor yang memperlambat koneksi internet anda. Jika koneksi Anda berjalan lambat, bisa jadi karena salah satu komputer yang lain banyak memakan bandwidth. Anda harus memeriksa untuk melihat apakah ada yang men-download file besar, menonton video online atau bermain game. Jika ada, maka itulah yang menjadi penyebab kemungkinan Internet Anda berjalan lambat. Jangan di LAN kalau ingin koneksi internet anda lebih cepat :).

Tips mempercepat koneksi internet yang terahir dari saya yaitu bersihkan Registry. Registry adalah database yang menyimpan pengaturan dari PC Anda, tetapi juga merupakan penyebab Internet Anda berjalan lambat. Masalahnya adalah bahwa setiap kali Anda menggunakan komputer, perlu membuka pengaturan yang bagaimana untuk mendapatkan jaringan ke Internet (seperti port yang digunakan, dll). Sayangnya, banyak dari pengaturan tersebut menjadi rusak dan tidak terbaca, dan membuat komputer anda lambat untuk memproses setiap halaman web yang Anda kunjungi. Anda dapat memperbaiki hal ini dengan mudah yaitu dengan menggunakan registry cleaner atau software registry booster untuk memperbaiki apapun yang rusak yang mungkin menyebabkan Internet Anda berjalan lambat. Hal ini juga bisa mempercepat kinerja komputer anda. Sebenarnya  masih banyak cara untuk mempercepat koneksi internet anda, seperti penggunaan DNS atau proxy dll yang mungkin saya bahas pada postingan berikutnya. Untuk kali ini itu saja yah tips cara mempercepat koneksi internet.
Read More....

Posted by : Unknown
0 komentar

Memasang Tombol Google Plus di Blog
Memasang Tombol Google Plus di Blog. Blog dilengkapi Tombol Google Plus atau G+1 di atas setiap postingan blog? Wah tentunya sangat bagus. Artinya kita memberikan kesempatan untuk para pengunjung blog agar berbagi dengan teman mereka di jaringan sosial terbaru saat ini yaitu Google Plus. Selain itu tombol Google Plus juga berguna untuk merekomendasikan atau memberi nilai + setiap posting blog kita di search engine google. Tapi tutorial ini hanya untuk Blogspot atau Blogger hehe. Ok sekarang di simak baik-baik cara memasang tombol google plus (+) di Blog.

Cara memasang tombol Google Plus (+) di Blog

  • Pertama silahkan login ke blog anda
  • Pilih menu Design > Edit HTML > Centang expand widget templates
  • Cari kode </head>
  • Setelah ketemu silahkan paste kode JS berikut tepat di atas kode </head>
<!-- kode G + -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
  • Nah sekarang anda cari <data:post.body/>. Untuk blog pengguna Read More, kalau ada lebih dari 1 kode tersebut, pakai kode <data:post.body/> yang kedua.
  • Kalau sudah ketemu sekarang paste kode dibawah ini tepat di atas kode <data:post.body/>
<g:plusone size='medium'/>
  • Sekarang simpan template dan selesai.
Catatan : sekarang anda pilih dulu ukuran tombol google plus tersebut sesuai kriteria anda, ukurannya di bawah ini.

1. small
2. medium
3. standart
4. tall

Cara memasang tombol Google Plus di Blog

Cara memasang tombol Google Plus (+1) sama dengan cara memasang facebook like di atas posting blog dan tentunya tidak sulit kan? hehhe silahkan anda coba dulu, kalau sudah berhasil jangan lupa komentar disini yah :). Oh iya Tombol Google Plus tersebut bisa anda pasang dimana saja dengan hanya menambahkan kode yang ini saja <g:plusone size="medium"></g:plusone> , jadi tidak perlu lagi menambah kode javascript. Dan kalau anda ingin tombol google plus tersebut hanya mengarah ke 1 link, misalnya tombol tersebut hanya ingin ditujukan untuk halaman home page seperti di bagian header blog ini. Anda hanya cukup menambahkan link url tujuan seperti ini <g:plusone href='URL' size="medium"></g:plusone> . Ayo silahkan di coba dulu memasang tombol Google Plus (+1) di blog anda, kalau kesulitan silahkan tanyakan saja :).
Read More....

Membuat Popular Post dengan Animasi gambar berputar. Cara membuat popular post yang kali ini akan saya share yaitu hanya menampilkan gambar dengan hover. Sebelumnya saya juga pernah menulis artikel tentang cara membuat widget popular post animasi 3D. Tentunya kali ini hasilnya akan beda dari yang kemarin dan saya rasa lebih simpel dan lebih bagus :D. Lanjut ke cara membuat widget Popular Post dengan Animasi gambar berputar.

Membuat Popular Post dengan Animasi Gambar berputar

Cara membuat Popular Post dengan Animasi gambar berputar tahap 1

  • Login ke Blog anda > Design > Pada page lemen silahkan add gadged baru Popular Posts seperti contoh gambar di bawah ini.
Membuat Popular Post dengan Animasi Gambar berputar
  • Beri judul widget tersebut "Popular Posts" ( tenang saja nanti bisa anda ganti, untuk langkah awal agar mempermudah nanti pada bagian edit HTML)
  • Centang image thumbnail
  • Pada bagian snipet tidak perlu di centang
  • Jumlah artikel populer bebas berapa saja yang ingin di tampilkan
  • Save

Cara membuat Popular Post dengan Animasi gambar berputar tahap 2

  • Pada menu design > Edit HTML (tidak perlu centang expand widget templates)
  • Cari kode ]]></b:skin> dan paste Css berikut di atasnya
.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}
  • Sekarang cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
  • kalau sudah ketemu, ganti kode tersebut dengan kode dibawah ini
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>
  • Sekarang simpan template
Membuat Popular Post dengan Animasi gambar berputar semacam ini tidak akan mengurangi kecepatan loading blog anda karena tidak ada penggunaan javascript dalam membuatnya. Oh yah perlu di ingat, kode yang berwarna merah kadang ada yang kodenya PopularPost2. Jika kodenya PopularPost2 yah anda tianggal mengganti kode yang saya berikan (yang warna biru) menjadi PopularPost2 juga :). Kalau masih bingung tanyakan langsung di kotak komentar yah, jangan lupa di like juga hehehe. Selamat mencoba cara membuat widget popular post dengan animasi gambar berputar.
Read More....

Membuat Navbar Menu di Blog
Membuat Navbar Menu di Blog. Navbar menu atau Meta bar di bagian atas blog yang fungsinya mungkin untuk notice atau pemberitahuan dsb. Oh ya, cara membuat menu navbar ini hanya untuk pengguna blogger / blogspot.

Cara membuat Navbar Menu di Blogspot

  • Login ke Blog anda > Design > Edit HTML
  • Cari kode ]]></b:skin> ( Gunakan CTRL + F biar gampang )
  • Copy kode di bawah ini dan paste di atas kode ]]></b:skin>
#meta_bar { background: #454545; border-bottom: 1px solid #808080;  margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }
* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression (document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#meta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:95%;}
#meta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#meta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#meta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }
  • Sekarang cari kode </head> dan paste kode Javascript berikut tepat di atas kode </head>
<script src='http://script-bamz-us.googlecode.com/files/navbarmenu.js' type='text/javascript'/>
  • Selanjutnya cari kode <body> dan paste kode berikut di bawah <body>
<div id='meta_bar'>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/BamzUs' target='_blank'>Ada 1.000.000 pembaca Rss Feed sudah bergabung, Sudahkah anda?</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://www.jurnalismewarga.com/images/utils/icon_close.png' style='cursor:hand;cursor:pointer;'/></span></div>
Simpan
Catatan :
  • Kode yang berwarna merah adalah Isi pesan singkat navbar menu tersebut, bebas bisa anda ganti susuai keinginan anda.
  • Kode yang warna hijau adalah warna background dari navbar menu tersebut juga bisa di sesuaikan dengan warna background blog anda.

Membuat Navbar Menu di Blog

Membuat Navbar Menu di Blog ala Bamz.Us ini memang tergolong simpel dan tidak terlalu banyak modifikasi. Kalau anda cukup paham Css anda bisa mempercantik tampilan navbar menu itu sendiri. Setelah saya lihat-lihat / berkunjung ke blog lain ternyata fitur navbar menu ini banyak dipakai untuk menarik visitor agar mau berlangganan via Feed. Yah memang kemungkinan besar visitor akan tertarik untuk berlangganan dengan adanya rayuan pada navbar menu tsb :). Semoga artikel Membuat navbar menu ini bermanfaat buat sobat smua.
Read More....

Membuat widget Recent Post Blogspot. Cara membuat widget recent post di blogspot / blogger dengan fasilitas RSS Feed. Widget recent post ini sangat simpel dan mudah, contohnya anda bisa lihat pada blog ini. Cara ini sama persis dengan cara membuat recent comment yang pernah saya posting sebelumnya. Ok deh silahkan ikuti langkah-langkah cara membuat widget Recent Post di blogspot berikut ini.

Cara membuat Widget Recent Post di Blogspot

  • Login ke blog ada pilih design > Pada page elemen kemudian add gadged baru
  • Pilih Feed kemudian paste link ini pada feed tersebut http://BLOG-ANDA.blogspot.com/feeds/posts/default
Membuat Widget Recent Post Blogspot
  • Klik continue dan beri judul widget tersebut "Recent Post" atau "Artikel Terbaru"
  • Tentukan berapa artikel yang ingin di tampilkan pada widget tersebut (maksimal 5 artikel)
  • Save dan lihat hasilnya.

Membuat Widget Recent Post di Blogspot

Membuat widget Recent Post di Blogspot memang bermacam-macam, tapi yang saya terapkan ini adalah cara yang paling simpel dan mudah di praktekkan. Kelebihan menggunakan widget recent post ini tidak akan mengganggu atau membuat Blog anda menjadi berat. ya sudah selamat mencoba cara membuat widget recent post di blogspot dan semoga sukses
Read More....

Memasang Facebook Like di Blog
Memasang Facebook like di blog pengguna blogger atau blogspot. Cara memasang Facebook like di blog sangat mudah asalkan anda bisa menerapkan langkah langkah yang saya berikan. Memasang Facebook like diblog memang perlu, agar para visitor atau pengunjung bisa memberikan like atau suka bahkan membagikan atau share artikel blog kita kepada teman teman mereka di facebook. Dengan memasang facebook like di blog, tentunya apabila visitor sudah memencet tombol like yang ada pada setiap artikel blog, otomatis pada facebook mereka akan ada notice kalau visitor tersebut sudah menyukai artikel yang kita tulis. kemungkinan besar teman facebook mereka akan penasaran, "kenapa orang ini menyukai ini?" disinilah peluang blog kita akan kebanjiran visitor. ok deh sekarang lanjut ke cara memasang Facebook like di Blog.

Cara memasang Facebook like di blog

  • Login ke Blog anda > Design > Edit HTML > centang expand widget templates
  • Cari kode <data:post.body/> . Untuk pengguna read more biasanya ada 3 kode tersebut, Pilih saja kode yang kedua lalu paste kode berikut tepat di atas kode <data:post.body/>
<div class='facebook-like'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp; action=like&amp; layout=standard&amp; show_faces=false&amp;width=400&amp; font=arial&amp; colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>
</div>
  • Simpan dan lihat hasilnya.
Cara memasang Facebook like di blog bukan hanya ini saja, tapi tergantung bagaimana anda bisa memahami kode kode yang ada pada template blog anda, sehingga tidak akan mengalami kesalahan dalam penempatan. Bicara mengenai penempatan facebook like ini akan tampil di atas setiap artikel atau postingan blog. Jika ingin di tempatkan pada bagian bawah setiap artikel / posting, maka anda tinggal paste saja dibawah <data:post.body/>. <data:post.body/> adalah kode dari artikel blog. Silahkan di coba memasang Facebook like di blog dengan cara ini dan jangan lupa kalau sudah berhasil, ditunggi tanggapan atau komentarnya yah ^^.

Mempercantik Facebook like di blog


Setelah memasang facebook like di blog anda sukses, tentunya semua orang ingin mempercantik tombol facebook like, iya kan? Sekarang kita akan mempercantik facebook like yang sudah di pasang pada blog anda dengan cara merubah warna background dan border ( garis tepi ) seperti di blog ini.

Cara mempercantik Facebook like di blog

  • Login ke blog anda > Design > Edit HTML
  • Cari kode ]]></b:skin> ( gunakan CTRL + F untuk mempermudah pencarian ) dan kalau sudah ketemu, silahkan paste Css berikut tepat di atas kode ]]></b:skin>
.facebook-like {background:#e6e6fa; color:#FF7800; border:1px solid #00bfff; font-size:12px; margin-top:5px;padding-left:5px;padding-top:5px}
  • Simpan dan lihat hasilnya :)
Catatan :
  • background:#e6e6fa adalah warna latar belakang
  • color:#FF7800 adalah warna tulisan
  • border:1px solid #00bfff adalah warna border / garis tepi
Silahkan ubah kode warna yang merah sesuai keinginan anda. Lihat kode warna di http://camex.wen.ru/Sampel/Warna.html. Sudah ya tips untuk memasang facebook like di blog karena sudah lumayan panjang :p.
Read More....

Cara membuat recent comment di blog dan lebih tepatnya di blogspot atau blogger. Cara membuat recent comment ala saya pribadi sangat mudah dan itupun saya terapkan pada blog ini. Widget recent comment ini hanya menampilkan maksimal 5 komentar terbaru. Wah bagaimana caranya? gampang saja, silahkan ikuti langkah langkah cara membuat recent comment di bawah ini.

Cara membuat Recent Comment

  • Login ke Blog anda > Pilih Design
  • Kemudian Add a gadged > pilih Feed
  • Masukkan Url berikut
  • http://BLOG-ANDA/feeds/comments/default
  • Ganti yang warna merah dengan alamat blog anda dan simpan

Cara membuat Recent Comment

Cara membuat Recent comment yang simpel dan mudah kan? tentu saja anda tidak akan kewalahan menambah script atau kode apa lah yang akan membuat anda bingung. Sekedar saran dari saya, jika ingin blog anda mempunya speed atau kecepatan yang maksimal, janganlah terlalu banyak menggunakan javascript atau kode kode yang akan membuat blog anda lelet atau berat. ok deh silahkan di praktekan cara membuat Recent comment di blog..
Read More....

Cara membuat artikel terkait pada sidebar blog. Membuat artikel terkait pada sidebar blogger atau blogspot tentunya lebih menarik dibandingkan artikel terkait yang sudah umum berada di bawah setiap postingan. Blog ini juga menggunakan artikel terkait dibagian sidebar kanan. Karena saya sendiri sudah mencoba pada blog ini, saya akan share cara membuat artikel terkait pada sidebar blog.

Cara Membuat Artikel Terkait atau related post di blogspot

Cara membuat artikel terkait atau related post pada sidebar

  • Login ke blog anda > Edit HTML > centang expand widget templates
  • Cari kode </head> ( gunakan CTRL + F untuk mempermudah pencarian )
  • Copy kode dibawah ini dan paste di atas kode </head>
<!-- Related Post -->
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
  • Selanjutnya cari kode <div class='post-footer-line post-footer-line-1'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'>
  • Pilih salah satu saja, kemudian paste kode berikut tepat dibawahnya
 <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
  • Kalau sudah silahkan simpan template
  • Sekarang lanjut ke Page element > add a gadged dibagian sidebar kanan / kiri > pilih HTML / Javascript > Beri judul ' Artikel Terkait ' kemudian paste kode berikut pada gadget tersebut
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
  • Save
  • Sekarang kembali lagi ke Edit HTML > centang expand widget template dan cari title='Artikel Terkait'
  • Biasanya kodenya seperti dibawah ini
<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
  • Sekarang anda tambahkan kode berwarna merah dibawah ini sehingga hasilnyapun seperti dibawah ini
<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
  • Simpan template dan lihat hasilnya

Cara membuat artikel terkait atau related post

Cara membuat artikel terkait atau related post pada sidebar blog memang sedikit rumit yah? ^^. tapi tenang saja, cara ini sudah saya praktekkan sebelumnya, kalau bingung anda bisa tanya langsung pada komentar. Kelebihan membuat artikel terkait / related post semacam ini adalah artikel yang di tampilkan di random. oh iya kode yang warna hijau di abaikan saja, karena itu hanya nomor urut id widget anda. Misalkan di blog anda HTML5, jangan diganti, cukup di abaikan saja. Kode yang berwarna biru adalah jumlah artikel terkait yang ingin di munculkan. Ok itu saja langkah-langkah cara membuat artikel terkait atau related post pada sidebar blog
Read More....

Cara membuat Contact Us

Posted by : Unknown
0 komentar

Cara membuat Contact Us Blogspot dan Wordpress menggunakan HTML, contohnya anda bisa lihat disini. Kali ini saya akan memberikan tutorial cara membuat Contact Us di blogspot atau wordpress dengan bantuan situs pembuat kode html contact form. Saya rasa semua blogger pasti memberikan menu contact us pada blog mereka, mungkin ada sebagian yang kesulitan dalam membuat menu contact us.

Bagaimana Cara membuat menu Contact Us ?

Pertanyaan yang sering saya dengar sampai saat ini. Sebenarnya cara membuat contact Us tidak terlalu sulit. Ok langsung saja, dari pada capek basa-basi silahkan ikuti langkah-langkah cara membuat contact us dibawah ini.

Langkah-langkah cara membuat Contact Us :

  • Siapkan email anda untuk proses pendaftaran.
  • Kunjungi www.123contactform.com dan lakukan pendaftaran disana, ingat pilihlah yang gartis. Kalau ada $$ lebih bagus lagi pilih yang berbayar ( fiturnya lebih lengkap )
  • Setelah melakukan pendaftaran silahkan cek email anda untuk verifikasi pendaftaran.
  • Login akun anda dan Creat New Form pilih Contact Form setelah itu beri judul Formnya (tidak pakai judul juga tidak apa-apa)
  • Disininah kemampuan anda mendesain form tersebut ( bebas yang anda suka )
  • Apabila sudah selesai klik Continue dan anda akan menemui hal seperti dibawah ini
Cara Membuat Contact Us
  • No 1 adalah email yang akan menerima pesan apabila ada yang menghubungi anda lewat form tersebut. Jadi anda haru centang disebelah email. Anda juga bisa menambh email yang akan menerima pesannya dengan cara klik add notification diatas email tsb. Maaf g masuk SS hehe.
  • No 2 adalah pesan yang akan tampil setelah pesan terkirim. Anda bisa mengubahnya sesuai keinginan anda, misalnya " Terima kasih sudah menghubungi kami " dll.
  • Kalau sudah anda bisa klik continue dibagian kanan atas.
  • Sekarang anda tinggal pilih form tersebut ingin di pasang dimana dan beberapa pilihan kode. lihat gambar dibawah ini.
Cara Membuat Contact Us
  • Silahkan dipilih sesuai yang anda inginkan dan anda akan di suguhi kode. langkah selanjutnya copy kodenya dan paste di halaman contact Us anda. Untuk wordpress anda hanya diberikan kode formnya.
Cara membuat Contact Us semacam ini mirip sekali dengan Emailme Form. Kelebihan cara membuat Contact Us ini yaitu pada waktu redirect akan tetap pada halaman blog, ada pilihan untuk mengganti Layout atau tema belakang. Dan desain contact us ini bagus dan mudah. Sampai disini dan semoga artikel cara membuat contact us ini bermanfaat bagi anda yang membutuhkan.
Read More....

Cara Membuat Menu Horizontal di blog, atau lebih tepatnya di blogspot. Blogger dengan kelebihannya yaitu bisa mengedit template atau bahkan mengubah keseluruhan template membuat para blogger jadi lebih semangat memodifikasi blog mereka. Kali ini saya akan share cara membuat menu horizontal di atas header atau judul blog. Contoh menu horizontal seperti dibawah ini.

Cara Membuat Menu Horizontal

Cara membuat Menu Horizontal

  • Login ke blog anda > Design > Edit HTML ( tidak perlu centang Expand Widget templates )
  • Cari Kode ]]></b:skin> ( Gunakan CTRL + F untuk mempermudah pencarian )
  • Copy Css di dibawah ini dan paste tepat diatas kode ]]></b:skin>
#NavbarMenuAtas{ background:#000 url(http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QZkDvCUI/AAAAAAAACKE/8-OPdORCKI8/bgnav_thumb%5B1%5D.jpg?imgmax=800) repeat-x; width:960px; height:40px; color:$navcolor; margin:0 auto; font: bold 8px Arial, Tahoma, Verdana;}
#NavbarMenuAtasleft{ width:650px; float:left; }
  • Langkah selanjutnya cari kode <div id='header'> atau <div id='header-wrapper'>
  • Jika sudah ditemukan, Copy kode dibawah ini dan paste tepat di atas kode <div id='header'> atau <div id='header-wrapper'>
<div id='NavbarMenuAtas'>
       <div id='NavbarMenuAtasleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Page #1</a>
          <ul>
            <li><a href='#'>Sub Page #1</a></li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
          </ul>
        </li>
        <li><a href='#'>Page #2</a></li>
      </ul>
    </div>
  </div>
  • Linknya bisa anda ganti sendiri sesuai keinginan lalu preview, kalau sudah benar silahkan di save.

Cara Membuat Menu Horizontal

Cara Membuat Menu Horizontal sangat bermacam-macam, tergantung dari kreativitas anda. Yang paling penting adalah belajar HTML dan CSS. Jika sudah mahir HTML atau bahkan javascript pasti sangat mudah untuk membuat tampilan apa saja. Oh iya Anda juga bisa mengganti Background menunya dengan cara mengganti link gambar yang ini
http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QZkDvCUI/AAAAAAAACKE/8-OPdORCKI8/bgnav_thumb%5B1%5D.jpg?imgmax=800
Atau anda ingin backround warna saja, silahkan hapus :
url(http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QZkDvCUI/AAAAAAAACKE/8-OPdORCKI8/bgnav_thumb%5B1%5D.jpg?imgmax=800)
Untuk mengubah warna yang ini background:#000
OK deh selamat mencoba membuat menu horizontal di blog anda, saya doakan sukses. Jika anda bingung tanyakan saja pada kotak komentar.

NB : Sesuaikan lebar menu dengan lebar header blog anda, untuk menyesuaikan misalkan kurang lebar atau sebalikanya silahkan ubah kode yang berwarna biru
Read More....

Cara membuat artikel terkait di blogspot dengan sedikit mondifikasi agar lebih keren. Artikel terkait atau related post berfungsi untuk membantu para pengunjung agar mengetahu apa saja artikel yang berhubungan dengan keyword atau artikel utama. Dan manfaatnya kepada pemilik blog yaitu akan menambah Page view apabila stiap artikel pada related post tsb di kunjungi oleh visitor. Contoh artikel terkait bisa anda lihat pada blog ini di bagian bawah setiap artikel atau postingan.

Cara Membuat Artikel Terkait

Cara membuat Artikel Terkait di blogspot

  • Login ke blog anda > Design > HTML > centang Expand widget templates
  • Cari kode <div class='post-footer-line post-footer-line-1'> gunakan CTRL + F agar lebih mudah
  • Biasanya ada 2 kode tersebut, anda cukup fokuskan pada kode yang pertama saja.
  • Jika sudah ketemu, Copy kode dibawah ini lalu paste dibawah kode <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<DIV class='rbbox'>
<DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<DIV id='albri'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>
<script type="text/javascript">RelPost();</script>
</DIV>
</b:if>
  • Simpan template. 

Modifikasi artikel terkait

Cara membuat artikel terkait atau related post ini juga bisa di modifikasi. Bagaimana caranya? ok silahkan jika ingin di praktekkan.
  • <H2>Artikel Terkait:</H2> bisa anda ganti sesuai keinginan anda ( misal : Related post, artikel yang berhubungan dll ) atau anda ingin menghapusnya.
  • <DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> adalah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas,  1px tsb adalah tebal batasnya, solid adalah jenis batasnya dan #ccc adalah warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
  • maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan
  • maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan
Jika anda masih bingung atau pusing, jangan sungkan untuk bertanya. kotak komentar saya sediakan gratis loh :). ok deh cukup untuk artikel cara membuat artikel terkait atau related post di blogspot.

Read More....

Meta Tags, meta keyword for Seo Blogspot
Meta Tags for Seo Blogspot. Kali ini saya akan bahas penggunaan meta tags atau meta keyword yang bagus di mata search engine. Sebuah template sederhana yang biasanya menggunakan meta tags sederhana juga, akan sangat sulit untuk berteman dengan SE ( search engine ). Masih banyak para blogger yang belum memahami atau mengetahui cara memasang meta tags atau meta keyword yang benar dan bagus bagi SEO. Sebelum lanjut pada bahasan meta tags, silahkan ubah meta title standard blogger menjadi meta title seo friendly.

Cari kode <title><data:blog.pageTitle/></title> , jika sudah ketemu ganti dengan meta title seo friendly dibawah ini.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Ok sekarang lanjut pembahasan pada meta tags atau meta keyword yang Seo friendly. Masih banyak para bloggger yang menggunakan meta description dan meta keyword standard dan kurang berteman pada SE. Contoh meta tags yang sering digunakan para blogger dibawah ini:

<Meta content='Tutorial blogger dan wordpress lengkap dan berita' name='Description'/>
<Meta content='cara membuat menu di blogger, membuat read more, turorial recent post' name='Keywords'/>

Dari contoh meta tags diatas apabila dilakukan pencarian pada SE maka yang akan muncul sbg berikut

Tutorial blogger lengkap
Tutorial blogger dan wordpress lengkap dan berita
www.bloganda.com - Tembolok - Mirip

dari hasil pencarian sudah bagus dan benar, Tapi coba lihat kesalahan yg ditimbulkan Meta Description tersebut.

Tutorial cara membuat menu di blogger
Tutorial blogger dan wordpress lengkap dan berita
www.bloganda.com/.../cara-membuat-menu.html - Tembolok - Mirip

Meta tags atau meta keyword dengan hasil seperti diatas sangatlah kurang bagus dimata SE karena meta description selalu merebut posisi meta keyword pada halaman posting. nah sekarang saatnya anda mencoba meta tags atau meta keyword yang bagus untuk Search engine dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta content='Tutorial blogger dan wordpress lengkap dan berita' name='description'/>
<meta content='cara membuat menu di blogger, membuat read more, turorial recent post' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - Tutorial blogger dan wordpress lengkap dan berita&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, cara membuat menu di blogger, membuat read more, turorial recent post&quot;' name='keywords'/> 
</b:if>

Silahkan ganti yang berwarna merah sesuai blog anda. Jika sudah menggunakan meta tags atau meta keyword di atas, contoh dalam pencarian dibawah ini.

Contoh pencarian pada halaman index atau home page
<BLOG TITLE>
<Meta Description>
<URL>

Tutorial blogger lengkap
Tutorial blogger dan wordpress lengkap dan berita
www.bloganda.com - Tembolok - Mirip

Contoh pencarian pada halaman posting
<POST TITLE>
<POST TITLE> <Meta Description>
<URL>

Tutorial cara membuat menu di blogger
Tutorial cara membuat menu di blogger - Tutorial blogger dan wordpress lengkap dan berita
www.bloganda.com/.../cara-membuat-menu.html - Tembolok - Mirip

Meta tags atau meta keyword for blogspot tersebut sudah sangat makasimal dimata Search engine menurut saya pribadi. Dan cara tersebut juga saya gunakan pada blog ini, alhasil memang terasa beda. ok cukup dulu artikel tentang meta tags atau meta keyword for seo blogspot, di artikel selanjutnya mungkin akan membahas Optimasi seo On page ( behubungan dengan artikel atau postingan ). Jika bingung anda bisa tanyakan pada kotak komentar, insyaallah saya bantu sebisa mungkin.
Read More....

Cara Membuat Tombol Share Facebook, Twitter dan Google +
Cara Membuat Tombol Share Facebook, Twitter, Google + dll. Membuat tombol share facebook, twitter, digg atau mungkin ditambah dengan Google + diatas setiap posting / artikel blog dengan cara menambahkan kode atau script pada template anda. Share button atau tombol share untuk blogger sebenarnya bisa langsung anda dapatkan kodenya di situs situs yang menyediakannya, seperti contoh situs sharethis.com yang menyediakan kode untuk di pasang pada blog anda dengan fitur share yang lengkap. Namun yang kurang menarik adalah penempatannya yang kurang stretegis. Kali ini saya akan share cara membuat tombol share facebook, twitter, Google + dll di atas posting blog anda.

Cara membuat tombol Share atau Share button Blogger

  • Pertama silahkan login blog anda
  • Klik menu Design > Edit HTML > centang expand widget templates
  • Cari kode <div class='post-body entry-content'> atau class='post-body entry-content' dan biasanya ada 2 kode tersebut, pakailah kode yang pertama
  • Jika sudah ketemu, copy kode dibawah ini dan paste tepat diatas kode <div class='post-body entry-content'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
Share on :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</div>
</b:if>

  • Langkah terahir yaitu simpan template
Cara Membuat Tombol Share atau share button di blogger ini adalah cara paling mudah untuk memasang fitur share / membagikan artikel anda. Share button ini juga bisa anda edit sesuai keeinginan anda, tapi jangan lupa back up templatenya dulu untuk menghindari kesalahan pada proses editing. Oh ya "User Name" diganti user name twitter anda. Untuk blog yang sudah menggunakan read more biasanya bukan menggunakan kode
<div class='post-body entry-content'>
melainkan kode di bawah ini
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
Pahami dulu, baru praktekkan cara membuat tombol share atau share button blogger type ini.

Manfaat Tombol Share / Share button blogger

Manfaat tombol share adalah memberikan kesempatan para pengunjung / visitor blog agar mereka bisa berbagi dengan teman atau jaringan mereka melalui fitur share yang tersedia pada blog anda. Tentunya ini sangat penting, secara langsung pengunjung akan mengajak orang lain untuk megunjungi blog anda. Selamat kebanjiran visitor dengan memasang tombol share / share button pada blog anda.
Read More....

Cara Membuat Daftar Isi Blog
Cara membuat daftar isi blog dengan menambakan kode javascript pada halaman posting. Daftar isi atau sitmap berfungsi untuk membantu visitor agar mereka tidak kesulitan dalam mencari artikel yang mereka butuhkan. Saya masih menemui beberapa pertanyaan yang sering muncul dari blogger yaitu " bagaimana cara membuat daftar isi atau sitmap Blog?". Tenang saja, jawabannya akan saya tuliskan pada artikel ini. Ada 2 macam tampilan daftar isi blog otomatis dan scriptnya pun berbeda, disini saya akan sharing kedua nya. Silahkan ikuti langkah-langkah cara membuat daftar isi blog atau Sitmap berikut ini.

Cara membuat daftar isi Blog pertama

  • Buatlah sebuah posting kosong / page kosong dengan judul "Daftar Isi" atau "Sitmap"
  • Copy kode dibawah ini kemudian paste pada postingan tersebut ( paste kodenya pada edit html, bukan compose )
 <script src="http://script-bamz-us.googlecode.com/files/sitmap.js"></script><script src="http://URL-BLOG-ANDA/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

  • Pada post option jangan ijinkan komentar, agar halaman ini tidak dipenuhi komentar sehingga membuat berat blog anda.
  • Jangan lupa ganti URL-BLOG-ANDA dengan alamat blog anda
  • Ok sekarang publish post dan selesai.

Cara membuat daftar isi Blog kedua

  • Caranya sama seperti yang pertama, bedanya hanya pada kode javascript yang di gunakan. Gunakan kode berikut.
<script src="http://script-bamz-us.googlecode.com/files/blogtocftp.js"></script><script src="http://URL-BLOG-ANDA/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
 
  • Jangan lupa ganti URL-BLOG-ANDA dengan alamat blog anda
  • Publish post dan lihat hasilnya.
Cara membuat daftar isi blog yang pertama bisa anda lihat contoh hasilnya pada Daftar Isi blog ini. sedangkan untuk cara yang kedua anda bisa lihat disini. Jadi bedanya antara cara pertama dan kedua yaitu pada hasil sitmap yang pertama mengurutkan daftar isi sesuia archive per bulan. Sedangkan hasil dari cara kedua, sitmap yang tampil di urutkan bedasarkan label atau kategory. Untuk yang kedua juga ada tambahan notice, New!! apabila posting itu masih baru. Sekarang anda sudah bisa membuat daftar isi blog
Read More....

Cara membuat Popular Post animasi 3D pada bagian widget blog menggunakan kode simpel javascript. Widget popular post atau artikel populer memang di perlukan dalam sebuah blog. Dengan adanya widget popular post, secara para visitor akan penasaran dengan isi artikel yang menjadi populer di blog tersebut dan tentunya memiliki kemungkinan besar untuk melihat atau membaca artikel pada populer post tersebut. Apalagi dengan widget popular post yang unik, walaupun visitor tidak penasaran pada isi artikelnya, mungkin penasaran sama animasi pada widget popular tersebut. " wah kok keren ya widgetnya, Klik dulua lah " kemungkinan seperti itu hehe ^^. Sebelum mencoba, alangkah baiknya anda lihat contoh hasilnya disini. Ok sekarang lanjut ke cara membuat Popular Post animasi 3D.
Cara membuat Popular Post animasi 3D di Blogspot

Login ke blog anda > Design > kemudian Add gadged baru pada elemen, jangan lupa pilih HTML / Javascript ( bebas dimana saja, karena hanya untuk penempatan Css dan koda javascript saja )
Copy kode atau script berikut dan paste pada gadget tadi kemudian save ( tidak perlu judul )







Sekarang masih pada halaman Design
Silahkan add Gadged baru lagi dan pilih gadget popular post ( penempatannya terserah anda, bisa pada sidebar kanan atau kiri dan bawah ) kemudian save dan lihat hasilnya.

Contoh penempatan script membuat Popular Post
Cara membuat widget Popular Post animasi 3D ini sebenarnya masih bisa diterjemahkan atau istilahnya di dirinci, tapi dari pada mumet edit HTML templatenya mending pake cara di atas lebih mudah dan tidak beresiko ^^. Oh iya jangan lupa sesuaikan lebar dan tinggi widget ini sesuai lebar sidebar dimana tempat anda akan memasang widget popular post tsb. Jika mau pasang widget popular post nya di pasang di tempat yang strategis yah, biar menarik perhatian para pengunjung. Sampai jumpa di artikel berikutnya dan semoga sukses mencoba cara membuat popular post animasi 3D
Read More....

Cara Membuat Menu Drop Down Blogspot
Cara membuat menu Drop Down atau istilah asingnya pull-down di Blogspot. Menu drop down akan sangat berguna untuk menghemat elemen blog kita. Tentunya dengan menu drop down, internal link maupun external link bisa kita ringkas menjadi 1 atau bahkan 2 menu drop down sesuai yang kita inginkan. Silahkan anda copy salah satu kode menu drop down di bawah ini sesuai keinginan anda, dan pasang pada widget blog anda

Cara membuat menu Dropdown standard di blog





<form name="jump">
<select name="menu"
onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://url1.com">Menu1 standard</option>
<option value="http://url2.com">Menu2 standard</option>
<option value="http://url3.com">Menu3 standard</option>
</select>
</form>

Cara membuat menu dropdown dengan tombol button di blog



<form name="jump">
<select name="menu"
onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://url1.com">Menu1 standard</option>
<option value="http://url2.com">Menu2 standard</option>
<option value="http://url3.com">Menu3 standard</option>
</select> <input
onclick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" type="button" value="Go" />
</form>

Cara membuat Drop down menu dengan tombol gambar



Gambar

<form name="jump">
<select name="menu"
onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://url1.com">Menu1 standard</option>
<option value="http://url2.com">Menu2 standard</option>
<option value="http://url3.com">Menu3 standard</option>
</select> <a href="javascript:jumpMenu()">
<img border="0" src="Link-Gambar-anda" /></a>
</form>

Menu drop down bisa anda tempatkan dimana saja, misalkan pada widget blog, footer bawah ataupun atas, bahkan juga bisa anda tempatkan di bawah / posting seperti penempatan artikel terkait dll. silahkan berkreasi sesuai keinginan dan kemampuan anda ^^. Oh ya jangan lupa ganti kode yang saya blog. Selamat mencoba dan semoga sukses. sudah yah itu saja tutorial cara membuat drop down menu di blog.
Read More....

Cara membuat menu di blog, lebih tepatnya menu vertikal di blogspot alias blogger. Menu vertikal atau pun menu horizontal memang tidak bisa di hindari dalam dunia blogger. Terutama menu horizontal yang 99% template pasti ada menu horizontal. Sebelumnya saya sudah pernah mengulas tentang cara membuat menu horizontal di blogspot, dan pada posting kali ini saya akan berbagi tutorial cara membuat menu vertikal di blogspot.

Cara membuat menu Vertikal di Blogspot

  • Login ke blog anda > Klik Design
  • Add a gadged dan pilih HTML / javascript
  • Penempatan gadged atau widget tepatnya pada sidebar kanan atau kiri, karena menu ini vertikal dan tentunya susunan menunya kebawah.
  • Copy kode berikut dan paste pada gadged tsb
<style>
.menu-vertikal, .menu-vertikal li ul{list-style-type: none;margin: 5px;width: 250px; /*Lebar Menu*/border: 1px solid black;}
.menu-vertikal li{position: relative;}
.menu-vertikal li a{background: #000000;font: bold 12px Verdana, Helvetica, sans-serif;color: #FFFFFF;display: block;width: auto;padding: 5px 0;padding-left: 10px;text-decoration: none;}
.menu-vertikal li ul{position: absolute;width: 250px;display: none;}
.menu-vertikal li ul li{float: left;}
.menu-vertikal li ul a{width: 250px;}
.menu-vertikal li a:visited, .glossymenu li a:active{color: white;}
.menu-vertikal li a:hover{background: #454545;}
* html .menu-vertikal li { float: left; height: 1%; }
* html .menu-vertikal li a { height: 1%; }
</style>
<ul id="verticalmenu" class="menu-vertikal">
<li><a href="/">Home</a></li>
<li><a href="http://Link1">Menu1</a></li>
<li><a href="http://Link2">Menu2</a></li>
<li><a href="http://Link3">Menu3</a></li>
</ul>
  • Kemudian Save

Keterangan cara membuat menu vertikal di Blogspot :

  • Ganti Link1, Link2, Link3 dan Menu1, Menu2, Menu3 sesuai kebutuhan anda. yangs aya contohkan hanya 4 menu dengan Home. Jika ingin menambah, silahkan di tambahi dibawah sendiri ya <li><a href="http://Link4">Menu4</a></li> dan seterusnya.
  • Kode berwarna Merah adalah lebar menu dan list menu, silahkan anda sesuaikan dengan lebar widget sidebar blog anda.
  • Kode berwarna Piru adalah warna background menu Vertikal
  • Kode dengan warna Orange adalah warna tulisan dan bisa anda rubah sendiri
  • Kode berwarna Pink adalah warna hover background menu vertikal tersebut. Maksudnya warna background apabila mouse di arahkan pada menu tersebut.
Membuat menu vertikal di blog hanya perlu sedikit waktu, karena prosesnya juga tidak lama alias rada rada gampang ^^. Ya sudah selamat mencoba dan semoga sukses membuat menu vertikal di blog.
Read More....

Mempercepat Start Menu

Posted by : Unknown
0 komentar

Bagi anda pengguna Sistem Operasi berbasis Windows 95,97,98&98SE,Me,2000,ataupun XP dan anda kurang puas dengan tampilan Start Menu yang lamban ketika anda memilih program-program yang ada pada Start Menu dan harus menunggu beberapa detik, berikut tips n' trik untuk mempercepatnya:

1. Aktifkan Windows
2. Klik Start -> Run
3. Pada Kotak Dialog Run ketikan REGEDIT kemudian tekan tombol Ok/ENTER
4. Kemudian Program Registry Editor akan muncul
5. Kemudian Ikuti langkah berikut ini :
- Pilih HKEY_CURRENT_USER -> Control Panel -> Desktop
- Kemudian pada panel window sebelah kanan cari MenuShowDelay
~ Pada Windows XP defaultnya 400 ubah menjadi 0
~ Untuk Windows 95,97,98&98SE,Me,2000 belum terdapat adanya MenuShowDelay
maka buat terlebih dahulu :
Klik Kanan pada area kosong sebelah kanan -> New -> String Value
kemudian otomatis akan membuat string baru dengan nama
New Value #1 -> ketikan MenuShowDelay -> ENTER
atau
Klik Kanan -> Rename -> MenuShowDelay -> ENTER
Kemudian Pilih :
MenuShowDelay -> Klik kanan -> Modify -> isikan Value Data 0 -> Ok/ENTER
~ Keluar dari Registry Editor

6. Kemudian Restart Komputer Anda
7. Bandingkan Start Menu sebelum diubah dan setelah diubah

Selamat mencoba
Read More....

INSTAL FONTS

Posted by : Unknown
0 komentar

Untuk menginstall font biasanya kita harus mengikuti langkah yang panjang : Start > Settings > Control Panel > Font. Lalu dari situ Anda harus klik File > Install New Fonts. Cara tersebut tentunya sangat menjengkelkan. Sebenarnya ada cara yang lebih mudah, yaitu :

Cara pertama :

1. Buka registry editor.
2. Pindah ke key "HKEY_CLASSES_ROOTTTFFILESHELL".
3. Pilihlah perintah "Edit > New > Key" dan berikanlah nama "Install Fonts" pada key yang baru diletakkan tadi.
4. Klik ganda pada bagian jendela kanan pada entry "(Default)".
5. Berikan nilai "Value"-nya "Install Font" dan konfirmasikan perubahan ini dengan mengklik "OK".
6. Tandai sekali lagi subkey "Install Font" dan di dalamnya dengan menggunakan perintah "Edit > New > Key".
7. Buatlah sebuah subkey baru yang dinamakan "command".
8. Klik ganda pada "(Default)", berikan pada "Value"-nya perintah "c:windowscommandxcopy32.exe %1 c:windowsfonts".

Sekarang jika Anda mengklik kanan pada file *.ttf akan muncul menu Install Fonts. Jika anda memilih menu ini, maka file font tersebut akan di-copy ke dalam folder Windows anda.

Cara kedua :

1. Buat shortcut yang menunjuk ke directory font pada Windows Anda (C:WindowsFonts).
2. Letakkan shortcut tersebut pada directory Send To.

Sekarang untuk menginstall font, klik kanan pada file *.ttf, pilih Send To > Fonts.
Read More....

Hapus WGA di Windows 7

Posted by : Unknown
0 komentar
Kamis, 22 Desember 2011

Windows copy-an mu kena blokir karena Windows update mu lupa dimatikan...?

Pusing 7 keliling kan gimana menghilangkannya...?
Background layarnya jadi hitam dengan pesan di pojok kanan bawah
"Windows 7 Build 7600 This copy of Windows is not genuine"
Setelah restart windows juga harus klik pesan2 yang sangat menjengkelkan, ampun dah, Ha..Ha..Ha.. Tp g usah bingung2, apa lagi strees harus install ulang.
Sebenarnya cukup dengan RemoveWAT 2.2.6 sudah bisa diatasi, tapi jadi nggak kelihatan logo Genuine dari windows nya, hmm payah, nggak bisa sombongin windows nya lagi.
Apa ada cara lain ?
ada dong, nih aku bagi caranya buat kalian semua.
Caranya :
  1. Klik Control Panel --> Windows Update --> Installed Update --> klik tab Name untuk sorting (mengurutkan nama update) --> cari dan pilih KB971033 --> klik Uninstall.
  2. Klik All Programs --> Accessories --> klik kanan Command Prompt --> Pilih Run as administrator
  3.  Setelah muncul jendela command prompt, kamu akan berada di patch C:\Users\[nama PC mu] --> ketikkan : CD\Windows\System32 [Enter]
  4. Maka kamu akan berpindah patch C:\Windows\System32>
  5. Lalu ketikkan : slmgr.vbs -rearm [Enter]
  6. Restart komputermu
  7. Hacking ulang windows seven mu dengan Uloader 8.0.0.0 / Seven Activator / dll
Nah sekarang silahkan jingkrak2 kayak Dora the Adventure sambil teriak
"Berhasil ... Berhasil ... Berhasil ... Horeee"
Read More....

Netter pasti tahu apa itu Run. Run adalah menu atau command yang bisa diakses di Start atau menekan tombol Windows + R.



Nah berikut daftar perintahnya:
  • compmgmt.msc - Computer management
  • devmgmt.msc - Device manager
  • diskmgmt.msc - Disk management
  • dfrg.msc - Disk defrag
  • eventvwr.msc - Event viewer
  • fsmgmt.msc - Shared folders
  • gpedit.msc - Group policies
  • lusrmgr.msc - Local users and groups
  • perfmon.msc - Performance monitor
  • rsop.msc - Resultant set of policies
  • secpol.msc - Local security settings
  • services.msc - Various Services
  • msconfig - System Configuration Utility
  • regedit - Registry Editor
  • msinfo32 - System Information
  • sysedit - System Edit
  • win.ini - windows loading information(also system.ini)
  • winver - Shows current version of windows
  • mailto: - Opens default email client
  • cmd - Opens command prompt
  • msconfig - to configurate start up
  • mspaint - to open ms paint program
  • calc - to call calculator

Read More....

Copyright © 2013 Iphin Shinichi BLOGGER INDONESIA