ilMu kiTa: cara blogger

Tampilkan postingan dengan label cara blogger. Tampilkan semua postingan

Minggu, 05 Februari 2012

Membuat Menu Navigasi Dropdown Di Blogger

ilustrasi:kucoba.com

Membuat Menu Navigasi Dropdown Di Blogger - Turoarial ini sengaja kang salman buat untuk membantu anda dalam membuat navigasi horizontal drop down menu. Dan sebelum ini saya sudah pernah membahas 3 tutorial serupa yaini

Namun karena masih banyak yang mengalami kesulitan dalam tutorial no 3 di atas maka saya sengaja membuat sebuh kode baru yang insya Allah di jamin paling mudah dari tutorial-tutorial yang pernah ada.

Pertama-tama silakan Lihat dulu contohnya ya... LIVE DEMO

Bagaimana menurut anda =||

Dalam demo di atas mungkin warna menu navigasinya belalar belakang hitam. tetapi jangan kuatir. Anda dapat mengubah warnanya leluasa dan tanpa harus pusing-pusing. cukup mengubah 2 kode warna, dalam 5 detik navigasi menu dropdown kita sesuai dengan template kita. :thumbsup:

Inilah trik membuat navigasi menu drop down tersebut.

1. Login ke Blogger

2. Pilih Rancangan

3. Pilih Edit HTML

4. Jangan Lupa Untuk Membackupd dulu template blog anda, klik Download Template Lengkap

5. Silakan copy kode di bawah ini :

#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

6. Setelah itu cari kode berikut ]]></b:skin>

7. Setelah ketemu simpan kode yang sudah di copy tadi dan paste kan tepat di atas ]]></b:skin>

8. Selanjutnya silakan hapus kode menu navigasi anda sebelumnya yang berada di bawah <body> atau <body class='loading'>

kalau belum menemukan coba cari saja kode <body kalau sudah ketemu, simpan saja kode sesudah kode tersebut.

9. Setelah itu ganti dengan kode berikut :

<div id='outer'>

<div id='NavbarMenu'>

<div id='NavbarMenuleft'>

<ul id='nav'>

<li><a href='http://www.kucoba.com/'>Home</a></li>

<li><a href='#'>Trik</a>

<ul>

<li><a href='http://portal-komputer.blogspot.com'>Komputer</a></li>

<li><a href='http://portal-komputer.blogspot.com'>Windows</a></li>

</ul></li>

<li><a href='#'>Tips</a>

<ul>

<li><a href='http://www.kucoba.com/2010/07/kumpulan-tips-blogspot.html'>Tips Blogspot</a></li>

<li><a href='http://www.kucoba.com/search/label/Kesehatan'>Kesehatan</a></li>

</ul></li>

<li><a href='#'>Tutorial</a>

<ul>

<li><a href='http://www.kucoba.com/2009/09/tutorial-mudah-blog.html'>Tutorial Blog</a></li>

</ul></li>

<li><a href='#'>Peralatan</a>

<ul><li><a href='http://www.kucoba.com/search/label/Widget'>Widget (smiley)   »</a>

<ul><li><a href='http://www.kucoba.com/2010/12/kirim-sms-gratis-di-internet.html'>SMS Gratis</a></li>

<li><a href='http://www.kucoba.com/2010/06/pasang-widget-dafar-isi-scrool-ajaib.html'>Scrool Ajaib</a></li>

<li><a href='http://www.kucoba.com/2010/12/menampilkan-status-onoff-yahoo-di-blog.html'>Status YM</a></li>

</ul></li>

<li><a href='http://www.kucoba.com/2010/08/kumpulan-kode-warna-rgb-dan-hexadecimal.html'>Kode kode Warna</a></li>

</ul></li>

<li><a href='#'>Zona Aneh</a>

<ul><li><a href='http://patimeh.blogspot.com'>Unik</a></li>

<li><a href='/'>Gila</a></li>

<li><a href='/'>Hiburan</a></li>

</ul></li>

<li><a href='http://cinta-seo.blogspot.com/2010/12/free-link-exchange.html'>Link Sahabat</a></li>

<li><a href='#'>[ Kontak Admin ]</a></li>

</ul>
</div>
<div id='search'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<input class='btn' type='submit' value='Go'/>
</form>
</div></div>
</div>

Keterangan : Ganti semua tulisan warna merah di atas dengan link anda / blog anda. dan tulisan warna hijau dan seterusnya kebawah ganti dengan nama menu yang ingin di tampilkan.

Untuk mengubah latar belakang menu Navigasi agar sesuai dengan selera kita, silakan perhatikan kode di Nomer 5, Saya sudah menandainya dengan warna hijau.. Ubah tulisan berwarna hijau tersebut dengan kode warna yang anda sukai.

Untuk melihat daftar jide warba silakan baca halaman ini Kumpulan Kode Warna RGB dan Hexadecimal

Dan blog pertama yang saya bantu dengan turun langsung masuk ke akun blognya untuk memasang kode navigasi ini adalah http://perjuanganulamadahulu.blogspot.com silakan di lihat, di sana navigasi menunya berwarna merah marun. so buat kamu jangan kuatir soalnya kode navigasi ini bisa di setting sesuai selera.

Semoga tutorial ini bermanfaat bagi anda.

Cara Mudah Membuat Menu Navigasi Dropdown pada Blog

Sebenarnya dulu saya punya blog, akan tetapi udah jarang di update.. artikel ini saya ambil dari blogku yang lama, yakni Cara Membuat Menu Navigasi Dropdown. Tentu banyak blogger yang menginginkan menu jenis ini, karna selain bisa mempercantik blog, juga memudahkan pengunjung dalam menemukan sesuatu yang ingin dicari, contohnya ingin mencari artikel berdasarkan label, yang biasanya berada di sub menu dari menu navigasi dropdown ini. Dulu saya mencari-cari menu jenis ini di antara banyak blog diluar sana, akan tetapi kode dari menu navigasi dropdown inilah yang paling mudah pemasangannya juga bisa dimengerti oleh saya. Akan tetapi banyak juga koq yang lebih mudah lagi pemasangannya, silakan bisa dicari di blog-blog lain yang membahasnya, dengan search di google. hehe..
Jadi buat kamu yang ingin punya menu navigasi dropdown, sekaranglah saatnya wkwk

Okelah, langsung saya beri tahu langkah-langkah untuk memasang menu navigasi dropdownya..

Login ke Blogger >> klik Tata Letak >> Edit HTML.
Backup dulu template anda. caranya pasti sudah taulah.. >> Download Template Lengkap
Cari Code :
]]></b:skin>

Copy paste code di bawah ini tepat di atasnya

/* Navigasi Dropdown Menu */
      #navdropdownmenu{
      background:black; /*Warna Latar Belakang */
      width:100%;
      height:auto;
      margin:0;
      padding:0;
      }
      #navdropdownmenu ul{
      float:left;
      list-style:none;
      margin:0;
      padding:0;
      }
      #navdropdownmenu li{
      list-style:none;
      float:left;
      }
      #navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
      color:yellow; /* Warna Teks */
      display:block;
      padding:9px 10px 9px 10px;
      font-size: 12px; /* Ukuran Teks */
      font-family: verdana; /* Jenis font */
      text-decoration:none;
      }
      #navdropdownmenu li a:hover{
      background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
      color:black; /* Warna teks saat kursor mouse berada di atasnya */
      padding:9px 10px 9px 10px;
      }
      #navdropdownmenu li ul{
      z-index:10;
      position:absolute;
      height:auto;
      width:200px; /* Lebar submenu */
      border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
      border-style:solid;
      border-color:#ffff66; /* Warna garis pinggir submenu */
      }
      #navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
      float:none;
      background:black; /* Warna latar belakang submenu */
      width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
      border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
      border-style:solid;
      border-color:#ffff66; /* Warna garis pinggir submenu */
      }
      #navdropdownmenu li ul li a:hover{
      background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
      color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
      }
      #navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover ul#submenu{
      z-index:10;
      position:absolute;
      height:auto;
      width:200px; /* Lebar submenu */
      left:auto;
      }
      .ngumpet{
      display:none;
      }
      .muncul{
      display:block;
      }
Cari kode berikut

</head>
Ketikkan code berikut diatasnya

<script>
      var auahgelap = '';
      function petakumpet(id)
      {
      var menu = document.getElementById(id);
      var sangmantan = menu.className;
      if (sangmantan == 'ngumpet') {
      if (auahgelap != '') {
      var terlalu = document.getElementById(auahgelap);
      terlalu.className = 'ngumpet';
      }
      menu.className = 'muncul';
      auahgelap = id;
      } else {
      menu.className = 'ngumpet';
      }
      }
      function umpetpetak(id)
      {
      var menu = document.getElementById(id);
      var sangmantan = menu.className;
      if (sangmantan != 'ngumpet') {
      if (auahgelap == '') {
      var terlalu = document.getElementById(auahgelap);
      terlalu.className = 'muncul';
      }
      menu.className = 'ngumpet';
      auahgelap = id;
      } else {
      menu.className = 'muncul';
      }
      }
      </script>
Cari kode yang mirip kode berikut.

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
      </b:section>
      </div>
Dibawahnya, ketikkan kode berikut:

<div id='navdropdownmenu'>
      <ul id='navdropdownmenu'>
      <li><a href='#'>Home</a></li>
      <li onmouseout='petakumpet("submenu1")' onmouseover='umpetpetak("submenu1")'><a href='#'>Software PC</a>
      <div class='ngumpet' id='submenu1'>
      <ul>
      <li><a href='#'>Application</a></li>
      <li><a href='#'>Anti Virus</a></li>
      <li><a href='#'>Internet Browser</a></li>
      <li><a href='#'>Utility</a></li>
      <li><a href='#'>Themes</a></li>
      <li><a href='#'>Desktop</a></li>
      <li><a href='#'>Games</a></li>
      <li><a href='#'>Hack Tools</a></li>
      </ul>
      </div>
      </li>
      <li onmouseout='petakumpet("submenu2")' onmouseover='umpetpetak("submenu2")'><a href='#'>Mobile Software</a>
      <div class='ngumpet' id='submenu2'>
      <ul>
      <li><a href='#'>Application</a></li>
      <li><a href='#'>Games</a></li>
      <li><a href='#'>Themes</a></li>
      <li><a href='#'>Anti Virus</a></li>
      </ul>
      </div>
      </li>
      <li onmouseout='petakumpet("submenu3")' onmouseover='umpetpetak("submenu3")'><a href='#'>Tips And Tricks</a>
      <div class='ngumpet' id='submenu3'>
      <ul>
      <li><a href='#'>Blogger</a></li>
      <li><a href='#'>Tutorials</a></li>
      <li><a href='#'>Computers</a></li>
      </ul>
      </div>
      </li>
      <li onmouseout='petakumpet("submenu4")' onmouseover='umpetpetak("submenu4")'><a href='#'>Music</a>
      <div class='ngumpet' id='submenu4'>
      <ul>
      <li><a href='#'>Indo Hits</a></li>
      <li><a href='#'>Rock</a></li>
      </ul>
      </div>
      </li>
      <li><a href='#'>News Update</a></li>
      </ul>
      </div>

Keterangan:
      * Tanda # pada kode <a href='#'> adalah link. Ganti dengan URL yang diinginkan
      * Anda bisa menambah atau mengurangi menu diatas.
Lalu klik >> Simpan Template (Di anjurkan untuk mempratinjau dulu sebelum menyimpan!)
Lihat Hasilnya..

NB: Apabila hasilnya tumpukan dengan menu navigasi bawaan template.. anda bisa menghapus menu navigasi bawaan template tsb..

Jumat, 20 Januari 2012

Menampilkan Postingan Secara Otomatis di Facebook dan Twitter

Sobat blogger semua pasti punya account Facebook dan Twitter dong, satu modal awal telah dimiliki tuch...

Oke, mungkin ini bukan hal yang baru buat anda, tapi ini menjadi hal yang menarik buat blogger pemula seperti saya.

Langsung aja dech, tanpa basa-basi...
Nah, untuk menampilkan postingan blog anda secara otomatis di Facebook dan Twitter, ada beberapa tahap yang akan di jalankan seperti dibawah ini :

Langsung aja menuju TKP disini TwitterFeed

Lalu klik "Register Now"
Buat account baru - klik "Create Account"

Terus isi "Feed Name" dan "RSS Feed URL" anda, lalu klik "Test RSS Feed" untuk memastikan RSS Feed URL yang anda masukkan aktif.

Jika muncul tulisan "Feed Parse OK", berarti RSS Feed URL anda sudah benar.
Nah, sekarang masuk ke tahap selanjutnya.

Pada halaman "Available Service", langsung klik "Facebook" untuk menghubungkan dengan account Facebook anda.
Pada halaman "New Facebook Service", pilih "Connect with Facebook", atau jika account Facebook anda sedang aktif, anda bisa memilih pada account yang sudah logged pada pilihan no 1

Silakan Login ke Facebook anda, dan ikuti instruksi selanjutnya.

Setelah sukses terkoneksi ke Facebook anda, maka akan muncul informasi seperti ini : You are currently logged into your “Your-Name-Here” Facebook account. Lalu Klik “Create Service” di bagian bawah.
Lalu kembali ke "Available Services", klik "Twitter" untuk menghubungkan ke Account Twitter anda.
Pada halaman "New Twitter Service", pilih “Authenticate Twitter”, atau bisa juga memilih account Twitter yang sudah logged jika anda sudah masuk pada account Twitter anda.

Setelah sukses terhubung ke Account Twitter anda, maka akan muncul pesan: “Twitter auth successful.“
Selanjutnya Klik “Create Service” di bagian bawah.
Setelah itu akan masuk ke halaman “Feed Publishing” dan bisa anda lihat Account Facebook dan Twitter anda telah terkoneksi dengan adanya tanda Active.

Lalu klik "All Done"
Maka akan muncul halaman "Congratulations!" menandakan bahwa Account Facebook dan Twitter anda telah skses terkoneksi.

Klik "Go to Dashboard"
Jika anda ingin menambah RSS lainnya atau menambah Account lainnya, silakan menuju "Create New Feed" dihalaman Dashboard.
Nah, selesai dech....
Berikut ini contoh tampilannya :

Berikut ini Update setelah beberapa saat postingan ini di luncurkan, langsung otomatis terkirim ke Facebook dalam beberapa saat :

Langkah selanjutnya anda cukup membuat posting di blog anda saja, maka secara otomatis postingan anda akan tampil di Account Facebook dan Twitter yang anda buat tadi.
Untuk informasi saja, bahwa TwitterFeed selalu melakukan update setiap 1 jam, maka dari itu jika anda membuat postingan baru mungkin tidak langsung muncul dengan serta-merta pada saat itu juga, silakan tunggu saja, update-nya cuma 1 jam sekali koq...

Semoga bermanfaat yaaaa....
Terima Kasih

Sabtu, 24 Desember 2011

Tips cara blog bisa masuk google search engine, yahoo, dsb

Sumber pengunjung blog kita bisa dari direktori web, mesin pencari, tautan / link dari website lain dan kunjungan langsung ke alamat / url situs kita. Untuk bisa dicrawl dan diindex google, situs kita harus ditemukan oleh sistem bot google yang akan menelusuri blog kita dan menampilkan situs kita di hasil pencarian google.

berikut ini adalah beberapa cara agar situs web kita kenalan dengan bot punya google, yahoo, dan kawan-kawan :
1. submit url situs web atau blog kita di sistem milik google, yahoo, dll.
- www.google.com/addurl/
- www.google.com/webmasters/tools/ (khusus yang ahli saja / expert)
- www.submitexpress.com/submit.html (pihak ketiga)
- www.altavista.com/addurl/default
- search.yahoo.com/info/submit.html
2. submit alamat blog / situs ke web direktori terkenal
- www.dmoz.org
3. promosi baik-baik
- pasang signature email kita yang ada link blog atau website kita (hati-hati email kita diangap spam)
- pasang signature di komentar blog atau forum walaupun nofollow
- pasang iklan di iklan online gratisan
- masukkan blog kita di web direktori lokal dan internasional sebanyak-banyaknya
- daftar direktori blog seperti blog-indonesia.com
- pakai pakaian atau atribut yang ada tulisan alamat situs kita
- kalau kenalan sama orang lain di internet jangan lupa promosi blog kita.
- pasang link blog kita di profil friendster, facebook, hi5, myspace, dan lain-lain.
4. rajin menebar link blog aktif kita di internet
carilah forum atau blog yang memperbolehkan kita posting link aktif follow web kita di situsnya. seperti memberi komentar atau respon balasan thread di forum komunitas dengan melampirkan link di signature kita. cara ini lumayan ampuh untuk menarik pengunjung dan banyak bot search engine.
-----
Tambahan :
Yang perlu diingat dan diperhatikan adalah proses mulai dari crawl sampai index bisa memakan waktu sebentar maupun lama suka-suka sistem google. Bisa dalam hitungan jam, hari, minggu, bulan, tahun, dan seterusnya. Jadi harap sabar dan jangan mudah putus asa. Jangan bergantung pada meisn pencari saja, tetapi gunakan metode promosi lain.
Kalau buat blog jangan cuma copy paste dari website lain karena google bisa mendeteksi kejahatan hak cipta semacam itu. Buatlah tulisan blog sendiri biarpun jelek karena lama-lama kita bisa jadi ahli menulis.
Artikel atau tulisan blog yang bagus tidak selamanya bisa memancing orang / pengunjung untuk memberi komentar. Komentar bukanlah sesuatu yang patut dibanggakan. Konsentrasilah pada jumlah pengunjung ketimbang jumlah komentar blog.
Semoga membantu :D

Selasa, 20 Desember 2011

CARA MENAMBAHKAN PROFIL FB DI BLOG

Badge Facebook dikenal juga dengan nama lencana profil facebook. Merupakan fitur facebook yang memungkinkan pengguna mengintegrasikan halaman profil facebooknya ke blog yang ia kelola. Bermanfaat bagi blogger untuk meningkatkan brand personal dirinya melalui badge facebook yang ia pasang di salah satu sidebar atau halaman statis blog.

Lagi pula facebook merupakan salah satu sosial media yang marak dikunjungi. Hasil survey menunjukkan Indonesia menduduki peringkat kedua di dunia dalam hal akses Facebook. Jadi jangan sia-siakan kesempatan ini. Yuk mari kita sebagai blogger memanfaatkan sosial media untuk kepentingan blog dan personal branding.

Cara membuat badge facebook

Login ke akun facebook anda
Silahkan ke link di bawah ini

http://www.facebook.com/badges/
Pilih “profil badge”

cara membuat badge profil facebook
Pilih “edit this page”

cara membuat dan mengambil lencana profil facebook

Di bagian ini anda bisa memilih bentuk vertikal atau horisontal atau dua kolom yang bisa anda lihat contohnya di halaman about me adhani blog, anda juga dapat menambahkan item seperti nama, tanggal lahir, nama website jika punya, lalu memilih format yaitu menaruh foto atau tidak di profile/badge facebook anda.

cara setting badge lencana facebook
Jangan lupa untuk klik save
Untuk mengambil kode badge / lencana profil facebook anda klik “Blogspot” untuk blog berplatform blogspot atau pilih “other” untuk pengguna wordpress.
Copy/paste dan simpan di notepad (hanya untuk memudahkan)

Selanjutnya,

Cara memasang badge facebook di blog wordpress atau Blogspot

Anda bisa memasang di sidebar blog dengan menggunakan “widget text” wordpress atau menggunakan “add to gadget” di blogspot atau memasangnya di halaman tentang saya atau about me seperti yang ada di halaman statis about me adhani blog

Untuk memasang di widget wordpress caranya sebagai berikut

Silahkan masuk ke dashboard WordPress Anda
Kemudian klik “Appereance” pilih ” Widget “
Pilih widget “Text”
Kemudian copy-paste kode Facebook tadi kedalam widget text tersebut
Simpan dan Selesai

Untuk memasang badge profil facebook di halaman statis blog wordpress

Silahkan masuk ke dashboard wordpress anda
pilih “pages/halaman” kemudian klik “add new/ buat baru”
Beri judul halaman statis wordpress anda, bisa about me atautentang saya
Sorot isi postingan terlebih dahulu ke arah “HTML” kemudian pastekan kode badge / lencana facebook anda disitu
Kemudian sorot lagi ke posisi “visual” kemudian ketikkan isi postingan seperti biasa
Jangan lupa jika sudah selesai klik update/publish.

Untuk memasang lencana profil facebook di halaman statis blogspot silahakan ikuti langkah-langkahnya di artikel cara membuat halaman statis di blogspot

Tambahan tips

Agar tampilan badge facebook di halaman statis lebih menarik, tambahkan sedikit sentuhan kode HTML di bawah ini untuk membuatnya berada di posisi tepat sebelah kiri artikel (left text wrapping position).

style=”float: left; border: 0px; margin: 0 10px 10px 0;”

letakkan kode html di atas tepat di samping kode pemanggil gambar badge / lencana profil facebook. Kode HTML pemanggil gambar berawalan “<img src…..”

contoh :

Setelah ditambahkan kode di atas menjadi

NB: float:left bisa anda ganti dengan float:right (untuk posisi right text wrapping)

Maka hasilnya bisa anda lihat seperti gambar di bawah ini

contoh badge profil facebook di halaman statis blog

Mudah bukan membuatnya, dengan memasang badge profil facebook pengunjung blog anda dapat mengetahui siapa di balik penulis blog melalui akun situs jejaring facebook, hitung-hitung sebagai upaya diri untuk terkenal melalui dunia online bukan ? Karena kata pepatah, tak kenal maka tak sayang

Semoga tutorial cara membuat badge facebook berguna buat anda. Tunggu tips dan trik facebook berikutnya di kategori serba-serbi facebook adhani blog

Senin, 19 Desember 2011

Cara Mengganti Background Blog Otomatis

Cara Mengganti Background Blog Otomatis .Banyak cara untuk membuat variasi dan memperindah tampilan blog sobat. Salah satunya adalah dengan menempatkan widget untuk mengganti warna background otomatis ini di sidebar blog sobat, sehingga pengunjung dapat memilih warna background kesukaan mereka. Selain supaya kita juga tidak bosan dengan tampilan background yang itu-itu saja, dan pengunjung yang datang pun kita harapkan mendapatkan kenyamanan sehingga mereka betah berlama-lama membaca di blog kita.

Cara Mengganti Background Blog Otomatis :
1. Login ke dashboard blogger anda.
2. Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
3. Copy script yang ada dibawah ini dan paste pada gadget.

<div class="widget-content">
<center><b>Pilih Warna Kesukaan Sobat</b></center>
<br/>
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table border="1" width="100%" height="20">
<tbody><tr>
<td onclick="bgChange('#8B008B')" bgcolor="#8B008B">
</td>
<td onclick="bgChange('#9400D3')" bgcolor="#9400D3">
</td>
<td onclick="bgChange('#008080')" bgcolor="#008080">
</td>
<td onclick="bgChange('#808080')" bgcolor="#808080">
</td>
<td onclick="bgChange('#CD853F')" bgcolor="#CD853F">
</td>
<td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">
</td>
<td onclick="bgChange('#DC143C')" bgcolor="#DC143C">
</td>
<td onclick="bgChange('#4B0082')" bgcolor="#4B0082">
</td>
<td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A">
</td>
</tr></tbody></table>
</div>

Silahkan sobat edit teks tulisan yang berwarna merah dan kode pilihan warna yang berwarna biru dengan warna-warna kesukaan anda. Untuk kode warna dapat dilihat disini.
5. Save / Simpan.
semoga Berhasil..
Sumber : rayhanzhampiet

Original From : http://m-wali.blogspot.com/2011/11/cara-mengganti-background-blog-otomatis.html#ixzz1gxunMU2t

ilMu kiTa

Pages