Gudang Informasi Blogging

Menu Navigasi Terbaik: ZIPUP

noreply@blogger.com (Anonymous) — Sat, 25 Aug 2012 17:38:00 +0700

Lihat Gambar dibawah ini

untuk membuatnya copy kode dibawah ini

<script type='text/javascript'>
$(document).ready(function() {
    $('div.tovikh ul li a').hover(function() {
        $('em', this).stop(true, true).slideDown(500, "easeOutQuint");
        if ($(this).is(':animated')) {
            $(this).stop().animate({width:"250px"}, {duration:450, easing:"easeOutQuad"});
        } else {
            $(this).stop().animate({width:"250px"}, {duration:400, easing:"easeOutQuad"});
        }
    }, function() {
        $('em', this).stop(true, true).slideUp(100, "easeOutQuint");
        if ($(this).is(':animated')) {
            $(this).stop().animate({width:"30px"}, {duration:400, easing:"easeInOutQuad"})
        } else {
            $(this).stop(':animated').animate({width:"30px"}, {duration:450, easing:"easeInOutQuad"});
        }
    });
});
</script>

<style type="text/css">
.tovikh {
width:670px;
height:50px;
font:italic 16px Times,serif;
border:2px solid #e6e6e6;
padding:0 0;
margin:10px 5px 25px;
color:#fff;
text-decoration:none;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
overflow:hidden;
}

.tovikh ul {
width:2500px;
background-color:#622;
margin:0 0;
padding:0 0;
overflow:hidden;
}

.tovikh li {
text-align:left;
list-style:none;
margin:0 0;
padding:0 0;
display:inline;
float:left;
}
.tovikh li a {
width:30px;
height:40px;
line-height:normal;
background-color:#333;
border-left:2px solid #3c3c3c;
padding:5px 7px;
margin:0 0;
color:#fff;
text-decoration:none;
font-weight:bold;
text-shadow:1px 1px 2px #000;
-webkit-box-shadow:-2px 0 3px #000,-5px 0 20px #000;
-moz-box-shadow:-2px 0 3px #000,-5px 0 20px #000;
box-shadow:-2px 0 3px #000,-5px 0 20px #000;
overflow:hidden;
outline:none;
display:block;
}

.tovikh li.akhir a {
background-color:#622;
min-width:250px;
border-color:#633;
overflow:hidden;
text-align:left;
display:block;
}

.tovikh li a:focus       {background-color:#888;border-color:#777;}
.tovikh li.akhir a:focus {background-color:#822;border-color:#633;}

.tovikh li a em {
position:fixed !important;
position:absolute;
top:0px;
right:0px;
bottom:auto;
left:0px;
background-color:#aa9900;
border-bottom:2px solid #aa8800;
font-style:italic !important;
line-height:normal;
font:normal 30px Arial,sans-serif;
color:#fff;
padding:15px 10px 7px;
margin:0 0;
text-align:left;
overflow:hidden;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
display:none;
}
</style>

<div class='tovikh'>
     <ul>
          <li><a href='#'>Mitra
                    <em>Deskripsi1</em>
               </a>
          </li>
          <li><a href='#'>Profil
                    <em>Deskripsi2</em>
               </a>
          </li>
          <li><a href='#'>Jurnal
                    <em>Deskripsi3</em>
               </a>
          </li>
          <li><a href='#'>Komentar
                    <em>Deskripsi4</em>
               </a>
          </li>
          <li><a href='#'>Sunting
                    <em>Deskripsi5</em>
               </a>
          </li>
          <li><a href='#'>Arsip
                    <em>Deskripsi6</em>
               </a>
          </li>
          <li><a href='#'>Feed
                    <em>Deskripsi7</em>
               </a></li>
          <li><a href='#'>Kontak
                    <em>Deskripsi8</em>
               </a>
          </li>
          <li><a href='#'>Pengunjung
                    <em>Deskripsi9</em>
               </a>
          </li>
          <li class="akhir"><a href='#'>Beranda
                    <em>Deskripsi10</em>
               </a>
          </li>
     </ul>

</div>

Membuat Scroll pada Widget Blogger

noreply@blogger.com (Anonymous) — Sat, 25 Aug 2012 06:19:00 +0700

Sebenarnya saya bingung mau memberi judul apa pada artikel ini, artikel ini juga hasil rangkuman dari beberapa posting yang saya baca di Blog Kang Enes. Secara singkatnya saja, saya ingin membuat widget di blog yang terpasang sidebar mempunyai scroll. Khususnya ini berlaku buat widget standar yang ada di blogspot seperti bloglist, Linklist dan mungkin nantinya berguna untuk berbagai macam hal. Sebetulnya membuat scroll dapat juga dilakukan dengan cara lain (dapat dibaca di sini) Namun tidak ada salahnya saya coba uraikan cara lain yang mungkin berguna:

(lihat gambar disamping, yang diberi tanda panah)

Masing-masing dari bagian itu mempunyai nama Title di template kita, untuk membuat perintah scroll caranya adalah sebagai berikut :

Dari halaman dasbor, klik Tata Letak - Edit HTML.
Beri tanda centrang pada Expand Template Widget.
Kemudian cari kode "Title" yang ingin di buat scroll, misalnya disini saya ambil contoh widget dengan nama "My Blogroll" (gunakan Control F atau F3).
Perhatikan kode yang ada di bawahnya, seperti ini:

..................................
...................................
<b:widget id='BlogList1' locked='false' title='My Blogroll' type='BlogList'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
.......................................
.....................................
Perhatikan yang ber warna merah....
Anda Tinggal menambahkan saja code dibawah ini :

style='overflow:auto; height:100px
Sehingga keseluruhannya akan tampak seperti ini :

..................................
...................................
<b:widget id='BlogList1' locked='false' title='My Blogroll' type='BlogList'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'style='overflow:auto; height:100px'>
.......................................
.....................................
Selesai, Simpan Template dan LIHAT hasilnya
Untuk Height dapat di ganti sesuai ukuran tinggi yang diinginkan. 100px, 150px, 250px, dan sebagainya

SELAMAT MENCOBA!

Membuat Fungsi Scroll

noreply@blogger.com (Anonymous) — Sat, 25 Aug 2012 06:08:00 +0700

Fungsi Scroll sangat berguna untuk membuat halaman menjadi lebih ringkas, tidak sulit untuk membuatnya, tinggal menambahkan kode berikut ini:

Sebagai Contoh :

<a href="http://andresahan.blogspot.com/2010/04/membuat-spoiler-showhide_20.html"> Membuat Spoiler</a>

<a href="http://jendelainfo23.blogspot.com/2010/04/membuat-menu-sidebar-unik-dengan-jquery.html"> Membuat Menu SideBar Unik jquery</a>

<a href="http://jendelainfo23.blogspot.com/2010/04/membuat-google-translate.html"> Modifikasi Tampilan Google Translate</a>

<a href="http://jendelainfo23.blogspot.com/2010/04/membuat-link-banner.html">Membuat Link Banner</a>

<a href="http://jendelainfo23.blogspot.com/2010/04/membuat-auto-hide-navbar-blogger.html">Membuat Auto Hide NavBar</a>

<a href="http://cooltext.com/">Cool Text: Logo and Graphics Generator</a>

<a href="http://s831.photobucket.com">PhotoBucket</a>

</div>

Maka Hasilnya akan seperti dibawah ini

Membuat Spoiler

Membuat Menu SideBar Unik jquery

Modifikasi Tampilan Google Translate

Membuat Link Banner

Membuat Auto Hide NavBar

Cool Text: Logo and Graphics Generator

PhotoBucket

Mudah Bukan?

Cara Membuat Widget LikeBox Facebook

noreply@blogger.com (Anonymous) — Fri, 24 Aug 2012 23:30:00 +0700

Apakah anda ingin menampilkan seberapa banyak fans blog anda di facebook? Saat ini facebook menyediakan berbagai macam aplikasi dan widget yang dapat anda gunakan di website atau blog anda. Tapi kali ini saya akan membahas bagaimana cara membuat like box (dulu disebut fan box) dan menampilkannya di blog anda.

Like box adalah sebuah widget yang dapat anda tampilkan di blog atau website anda, berupa kotak yang berisi foto-foto dari profile facebook yang menyukai, atau meng-like blog kita dengan mengklik tombol like yang terdapat di kotak tersebut. Like box dahulu bernama fan box dan tombol like di dalam kotak itu dulu ditulis become a fan. Gak tahu kenapa facebook menggantinya dengan like, namun memang sih, menurut saya kata-kata become a fan agak sedikit terlalu berlebihan, tidak seperti kata like yang lebih familiar dan lebih ringan didengar.

Ada banyak keuntungan menggunakan like box, disamping dapat mendatangkan traffic dari facebook, akan ada kepuasan tersendiri jika banyak yang menyukai blog kita. Tentu saja untuk menampilkan sebuah like box kita harus membuat page di facebook. Page adalah fasilitas dari facebook, penggunaannya sama seperti halnya profil pribadi facebook kita, kita dapat menuliskan status, dan sharing apapun disana. Hanya saja di page ini tidak fasilitas add friend request atau approve friend request. Yang ada hanya tombol like itu tadi. Dan jika kita sudah meng-like sebuah page di facebook, kita tidak perlu menunggu di-approve oleh sang empunya page.

Lalu bagaimana cara membuat page di facebook?

Setelah login, klik link ini Create Facebook Page
Pilih yang dibagian Official Page
Di section Brand, Products or Organization pilih Website
Kemudian isi Pagename sesuai dengan nama page yang anda inginkan.
Setelah selesai klik Create Official Page
Dan Official Page anda telah selesai dibuat.
Selanjutnya anda dapat menambahkan foto atau mengedit profil sesuai dengan keinginan anda.

Cara Membuat Like Box

Setelah selesai membuat Official Page pribadi anda di facebook, langkah selanjutnya adalah membuat Like Box.
Klik Edit page.
Lalu klik Promote with a Like Box
Pada Facebook Page ID isikan dengan Facebook Page ID anda
ID ini dapat anda temukan di address bar browser Anda.
Maka akan Like Box anda akan muncul. Anda tinggal mengatur saja Width,
Width : lebar dari like box, Height : tinggi dari like box, Connections : Jumlah orang yang meng-like page anda (sesuaikan dengan header dan width), Stream : aktivitas live terbaru dari page anda, Header : opsi untuk menampilkan Find us on Facebook atau tidak.
Setelah selesai anda setting, klik Get Code
Dan akan muncul 2 macam code yang dapat anda pilih.
Saya menyarankan anda gunakan XFBML, karena kelebihan dari XFBML adalah lebih flexible dibandingkan dengan iframe.
Kelebihan lain dari XFBML adalah Like Box yang anda pasang nanti tidak akan menghalangi loading element lain di blog anda. Berbeda dengan iframes, contoh : like box anda taruh di sidebar bagian atas, jika loading like box ini belum complete, maka widget atau elemen lain di bawah like box tersebut tidak akan di-load sebelum like box anda di-load secara utuh.
Namun ada code yang harus anda tambahkan agar anda dapat menambahkan code XFBML ini. Masukkan kode dibawah ini di header.php anda setelah
Code:
<body>
Atau buka link ini dan copy Javascript SDK code yang ada di halaman tersebut.
Code:
<div id=”fb-root”></div> <script> window.fbAsyncInit = function() { FB.init({appId: ‘your app id’, status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement(‘script’); e.async = true; e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’; document.getElementById(‘fb-root’).appendChild(e); }()); </script>
Setelah itu anda tinggal memasukkan kode XFBML tadi di widget atau di manapun yang Anda mau.

sumber : http://nimbuzzer.hotgoo.net/t1203-cara-membuat-like-box-fans-box-facebook-di-blog

Cara Menambahkan Google Friend Connect Pada Blog

noreply@blogger.com (Anonymous) — Fri, 24 Aug 2012 23:15:00 +0700

Kali ini saya akan share tentang Cara Menambahkan Google Friend Connect Pada Blog. Langsung saja ini Cara Menambahkan Google Friend Connect Pada Blog :

1. Login ke Google Friend Connect menggunakan akun blogger/gmail anda.

2. Klik nama blog anda pada sidebar kiri dan pilih Add the member gadget.

3. Bila sudah masuk pada Gadget / Anggota Langkah selanjutnya :

Pilih ukuran Gadget yang sobat inginkan lalu pilih deretan wajah sesuai sobat juga.

Kemudian pilih pilihan warna sesuai keinginan sobat, Anda akan dibawa ke halaman kustomisasi gadget seperti gambar dibawah ini. Lakukan kustomisasi lebar gadget, jumlah baris follower yang ingin ditampilkan, warna background, border, huruf dan lain-lain dihalaman ini. :

Jika sudah buat kode HTML dan Copy pastekan pada blog anda, maka kode HTML gadget follower / Google Friend Connect milik anda sudah selesai dan siap ditayangkan.

SEKIAN TERIMAKASIH

SEMOGA BERMANFAAT

Awards

noreply@blogger.com (Anonymous) — Fri, 24 Aug 2012 22:20:00 +0700

PIK Remaja Al-Hikmah

Konfirmasi Tukar Link

noreply@blogger.com (Anonymous) — Fri, 24 Aug 2012 21:40:00 +0700

Apakah sebenarnya pentingnya tukar link itu?

Pertanyaan itu merupakan pertanyaan yang sering muncul dalam benak blogger baru. Tukar link merupakan sarana silaturahim antar blog dan dapat meningkatkan page rank. PageRank merupakan nilai dari google dalam memberi peringkat blog kita. Semakin tinggi PR maka akan semakin kita mendapat posisi depan, bahkan jika PR kita tinggi bisa saja masuk di halaman pertama google. sudah pasti blog kita kebanjiran pengunjung untuk itu mari jaga silaturahim dan bertukar link.

Silahkan Tulis Pesan Konfirmasi Pada Komentar dibawah ini untuk bertukar link.

Membuat Popular Post/ Artikel Populer

noreply@blogger.com (Anonymous) — Fri, 24 Aug 2012 12:34:00 +0700

Ingin tahu artikel apa saja yang paling banyak direspon oleh pembaca? Gampang saja, kamu tinggal menambahkan most popular post pada sidebar blog kamu. Dengan adanya widget ini, selain kamu bisa melihat artikel-artikel yang banyak direspon pembaca, juga dapat menarik pembaca lain untuk lebih mengetahuinya lebih lanjut. Ya, itung-itung promo artikel. Siapa tahu karena banyaknya komentar pada artikel tersebut akan membuat orang tertarik untuk turut membacanya. Nah, jika kamu tertarik untuk membuatnya, ikuti saja langkah-langkah berikut:

Dari halaman dasbor, pilih Tata Letak - Elemen Halaman.
Klik Tambah Gadget dan pilih HTML/JavaScript.
Masukkan (copy-paste) script berikut (gunakan Control C):
<script language="javascript">
titlebold=false;
numposts=9999;
maxshowresult=10;
explanation="respon";
home_page="NamaBlog.blogspot.com";
</script>
<script style="text/javascript" src="http://gudang-informasi-blogging.googlecode.com/files/popularpost.js"></script>

Keterangan:
titlebold = Judul artikel. Jika ingin judul artikel ditampilkan dengan cetak tebal, ganti false-nya dengan true.
numpost = Banyaknya artikel yang dijadikan referensi.
maxshowresult = Maksimum artikel yang ditampilkan. Kamu bisa mengubahnya menjadi kurang atau lebih dari 10.
explanation = Keterangan. Kamu dapat mengubah respon menjadi comments, komentar, komen, komeng, atau bisa juga kamu kosongkan.
home_page = Alamat situs. Ganti NamaBlog dengan nama blog kamu. Tapi awas, jangan pake http:// !
Setelah selesai, simpan hasilnya

Nah, segitu aja sob, mudah-mudahan bermanfaat.
Selamat mencoba .....

Image Logo

noreply@blogger.com (Anonymous) — Thu, 23 Aug 2012 23:33:00 +0700

	Logo
	Logo
Logo	Logo

Image

noreply@blogger.com (Anonymous) — Thu, 23 Aug 2012 23:30:00 +0700

	Cell 2 - Baris 1 Kolom 2
Cell 3 - Baris 2 Kolom 1	Cell 4 - Baris 2 Kolom 2
Cell 5 - Baris 3 Kolom 1	Cell 6 - Baris 3 Kolom 2

Membuat Recent Post dengan Tumbnail

noreply@blogger.com (Anonymous) — Thu, 23 Aug 2012 20:53:00 +0700

Widget Recent Post dengan Preloader

Salah satu gadget yang sangat penting adalah recent posts. Jadi selain melihat postingan paling baru pembaca juga bisa tahu beberapa postingan yang paling baru (jumlah sesuai keinginan kita yang menyediakan informasi). Selain itu, kita jadi tidak perlu menampilkan banyak postingan pada halaman utama karena takut postingan yang 'agak baru' bukan terbaru jadi tak terlihat. Langsung saja tambahkan script berikut pada widget HTML Anda. Copy Code Script Dibawah ini :

<style type="text/css">
#dte_recent-post {
  margin:0 0;
  padding:0 0;
  font:normal 11px Arial,Sans-Serif;
  color:#333;
  margin:0 auto;
  min-height:100px;
  background:white url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
}

#dte_recent-post li {
  list-style:none;
  margin:0 0;
  padding:7px 7px;
  background-color:white;
  border-bottom:1px solid #ddd;
}

#dte_recent-post li a img {
  float:left;
  margin:0 10px 0 0;
  padding:0 0;
  border:none;
  background:transparent;
  outline:none;
}

#dte_recent-post li a.title {
  display:block;
  font-size:12px;
  text-decoration:none;
  color:#1155CC;
}

#dte_recent-post li a.title:hover {
  text-decoration:underline;
}

#dte_recent-post li span.foot {
  clear:both;
  display:block;
  color:#ccc;
  margin-top:7px;
  font-size:10px;
}
</style>
<ul id="dte_recent-post"></ul>
<script type="text/javascript">
//<![CDATA[
var rp_homePage    = "http://gudang-informasiku.blogspot.com", // Your blog homepage
    rp_numPosts    = 5, // How many posts?
    rp_thumbWidth  = 72, // Thumbnail width. Change to 0 if you want to disable the post thumbnail
    rp_numChars    = 100, // Number of posts summary
    rp_sortByLabel = false, // Replace false with your specific label name to display posts by specific label
                            // Example: rp_sortByLabel = "JQuery", to sort posts by label "JQuery"
    rp_noImage     = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY6wZu0YNON8lE9j-GpQtd7CywTRltNR-VuRVAw27nvaya2KWbf5R1qFPVRCizP79DseF4szWYQWl-1wjQPjFT1ty4wK3RZJwuWZr6hDpwpxv_8AmSccPoS4YUS8veRvoGBHaRqqziw9I8/s320/cooltext748217035%25281%2529.png", // A 'no-image' image
    rp_monthNames  = [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    rp_newTabLink  = true, // If true, then all the widget links will automatically opens in new window/new tab
    rp_loadTimer   = "onload"; // "onload" || time in milliseconds (e.g: 3000, 4000, ...)
//]]>
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"></script>

Konfigurasi Widget

Opsi	Keterangan
rp_homePage	Ganti dengan URL blog Anda
rp_numPosts	Digunakan untuk menentukan jumlah posting yang akan ditampilkan
rp_thumbWidth	Digunakan untuk menentukan lebar thumbnail. Ubah lebarnya menjadi `0` untuk menghilangkan thumbnail
rp_numChars	Digunakan untuk menentukan jumlah karakter ringkasan posting
rp_sortByLabel	Ganti nilai `false` menjadi nama label untuk menampilkan posting berdasarkan label yang spesifik. Contoh: `rp_sortByLabel = "JQuery"` akan menampilkan semua posting dengan label JQuery
rp_noImage	Thumbnail cadangan jika posting yang tampil dalam widget tidak memiliki gambar
rp_monthNames	Tentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Anda
rp_newTabLink	Jika bernilai `true`, maka semua tautan dalam widget akan terbuka di tab/jendela baru saat diklik
rp_loadTimer	Digunakan untuk menentukan seberapa lama widget akan menunda proses pemuatan sebelum akhirnya mulai memuat. Secara normal bernilai `"onload"`. Artinya bahwa widget akan memuat setelah semua elemen halaman telah berhasil termuat. Anda juga bisa mengganti nilainya dengan satuan waktu milidetik untuk menunda waktu pemuatan selama beberapa detik ke depan. Contoh: `rp_loadTimer = 3000` akan menunda pemuatan JSON

Button Vertikal

noreply@blogger.com (Anonymous) — Thu, 23 Aug 2012 12:50:00 +0700

	>
2	2a
3	3a

Membuat Table dengan CSS

noreply@blogger.com (Anonymous) — Mon, 20 Aug 2012 21:41:00 +0700

Contoh Table dengan CSS

Berikut adalah contoh tabel dengan menggunakan atribut style. Style "margin:0 auto" di dalam tag <table> dibawah adalah untuk membuat posisi tabel tersebut agar berada pada tengah dokumen, width adalah lebar dari tabel, dalam contoh adalah 80% berarti lebar dari tabel tersebut adalah 80% dari lebar jendela browser kita.
Kode HTML:

<table style="margin:0 auto;width:80%;border-collapse:collapse;background:#ecf3eb">
    <caption><h3>Contoh Tabel dengan CSS</h3></caption>
    <tr>
        <th style="border:1px solid #999;padding:8px 0;background: #0cf;">Header Kolom 1</th>
        <th style="border:1px solid #999;padding:8px 0;background: #0cf;">Header Kolom 2</th>
        <th style="border:1px solid #999;padding:8px 0;background: #0cf;">Header Kolom 3</th>
    </tr>
    <tr>
        <td style="border:1px solid #999;padding:4px 8px;">Data Cell</td>
        <td style="border:1px solid #999;padding:4px 8px;">Data Cell</td>
        <td style="border:1px solid #999;padding:4px 8px;">Data Cell</td>
    </tr>
    <tr>
        <td style="border:1px solid #999;padding:4px 8px;">Data Cell</td>
        <td style="border:1px solid #999;padding:4px 8px;">Data Cell</td>
        <td style="border:1px solid #999;padding:4px 8px;">Data Cell</td>
    </tr>
</table>

Hasil:

Contoh Tabel dengan CSS
Header Kolom 1	Header Kolom 2	Header Kolom 3
Data Cell	Data Cell	Data Cell
Data Cell	Data Cell	Data Cell

Jika menggunakan internal atau eksternal CSS akan kelihatan lebih simpel.

Kode CSS:

table{margin:0 auto;width:80%;border-collapse:collapse;background:#ecf3eb;}
caption h3{}
th, td{border:1px solid #999;}
th{padding:8px 0;background: #0cf;}
td{padding:4px 8px;}

Kode HTML:

<table>
<caption><h3>Contoh Tabel dengan CSS</h3></caption>
    <tr>
        <th>Header Kolom 1</th>
        <th>Header Kolom 2</th>
        <th>Header Kolom 3</th>
    </tr>
    <tr>
        <td>Data Cell</td>
        <td>Data Cell</td>
        <td>Data Cell</td>

    </tr>
    <tr>
        <td>Data Cell</td>
        <td>Data Cell</td>
        <td>Data Cell</td>

    </tr>
</table>

Hasil:

Contoh Tabel dengan CSS
Header Kolom 1	Header Kolom 2	Header Kolom 3
Data Cell	Data Cell	Data Cell
Data Cell	Data Cell	Data Cell

Jika ingin membuat warna baris cell yang selang seling kita dapat menambahkan atribut "class" atau "id" di dalam tag <td>, dalam contoh berikut kita akan menggunakan atribut class dengan nama baris-ganjil

<table>
<caption><h3>Contoh Tabel dengan CSS</h3></caption>
    <tr>
        <th>Header Kolom 1</th>
        <th>Header Kolom 2</th>
        <th>Header Kolom 3</th>
    </tr>
    <tr>
        <td class="baris-ganjil">Data Cell</td>
        <td class="baris-ganjil">Data Cell</td>
        <td class="baris-ganjil">Data Cell</td>
    </tr>
    <tr>
        <td>Data Cell</td>
        <td>Data Cell</td>
        <td>Data Cell</td>
    </tr>
    </tr>
    <tr>
        <td class="baris-ganjil">Data Cell</td>
        <td class="baris-ganjil">Data Cell</td>
        <td class="baris-ganjil">Data Cell</td>
    </tr>
    <tr>
        <td>Data Cell</td>
        <td>Data Cell</td>
        <td>Data Cell</td>
    </tr>
</table>

Kita akan membuat background baris ganjil tersebut dengan warna putih maka di dalam CSS kita tambahkan:

.baris-ganjil(background:#fff;}

Maka hasilnya adalah sebagai berikut:

Contoh Tabel dengan CSS
Header Kolom 1	Header Kolom 2	Header Kolom 3
Data Cell	Data Cell	Data Cell
Data Cell	Data Cell	Data Cell
Data Cell	Data Cell	Data Cell
Data Cell	Data Cell	Data Cell

Cara Membuat Tabel di Blog 2

noreply@blogger.com (Anonymous) — Mon, 20 Aug 2012 21:18:00 +0700

Beberapa waktu lalu saya sempat menulis tentang cara membuat tabel diposting. Mungkin ada sobat yang kurang jelas mengenai tutorial dan cara modifikasinya berikut ini adalah lanjutan yang mungkin akan sedikit membantu kita dalam belajar.

Sekilas tentang tabel.

Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.

Cara membuat tabel.

Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.

Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1">
 <tr>
  <td>Cell 1 - Baris 1 Kolom 1</td>
  <td>Cell 2 - Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 3 - Baris 2 Kolom 1</td>
  <td>Cell 4 - Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 5 - Baris 3 Kolom 1</td>
  <td>Cell 6 - Baris 3 Kolom 2</td>
 </tr> 
</table>

Hasil:

Cell 1 – Baris 1 Kolom 1	Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1	Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1	Cell 6 – Baris 3 Kolom 2

Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.

Mengatur lebar dan tinggi tabel.

Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.

Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

<table border="1" width="75%">
<tr>
 <td style="width:50%;height:40px;">Baris 1 Kolom 1</td>
 <td>Baris 1 Kolom 1</td>
</tr>
<tr>
 <td>Baris 2 Kolom 1</td>
 <td>Baris 2 Kolom 2</td>
</tr>
<tr>
 <td>Baris 3 Kolom 1</td>
 <td>Baris 3 Kolom 2</td>
</tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.

Menggabungkan kolom pada tabel

Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.

Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.

<table border="1" width="75%">
 <tr>
  <td colspan="2">Gabungan Kolom 1&amp;2 pada Baris 1</td>
 </tr>
 <tr>
  <td style="width:50%">Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>

Hasil:

Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.

<table border="1" width="75%">
<tr>
 <td style="width:50%" rowspan="2">Gabungan Baris 1&amp;2 pada Kolom 1</td>
 <td>Baris 1 Kolom 2</td>
</tr>
<tr>
 <td>Baris 2 Kolom 2</td>
</tr>
<tr>
 <td>Baris 3 Kolom 1</td>
 <td>Baris 3 Kolom 2</td>
</tr>
</table>

Hasil:

Gabungan Baris 1&2 pada Kolom 1	Baris 1 Kolom 2
Gabungan Baris 1&2 pada Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Mengatur jarak kolom pada tabel

Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.

Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.

<table border="1" width="75%" cellpadding="8">
 <tr>
  <td style="width:50%;">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

<table border="1" width="75%" cellspacing="8">
 <tr>
  <td style="width:50%">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat titel pada tabel.

Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.

Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.

<table border="1" width="75%">
<caption>Disini adalah titel tabel ini</caption>
 <tr>
  <th style="width:50%;">Header Kolom 1</th>
  <th>Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Disini adalah titel tabel ini
Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat background pada tabel

Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.

Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.

<table style="background:#ffc" width="75%" border="1">
 <tr>
  <th style="background:red;width:50%;">Header Kolom 1</th>
  <th style="background:red;">Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px.

Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px.

Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0.

<table cellpadding="0" cellspacing="0" style="background:#ffc" width="75%" border="1">
...
</table>

Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.

<table style="border-collapse:collapse;background:#ffc" width="75%" border="1">
 <tr>
  <th style="background:red;width:50%;">Header Kolom 1</th>
  <th style="background:red;">Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Pada link berikut ini kita akan membuat contoh tabel dengan CSS baik itu dengan atribut style (inline) maupun internal dan eksternal CSS.

Button Horizontal

noreply@blogger.com (Anonymous) — Mon, 20 Aug 2012 21:07:00 +0700

		Image Button 4
Cell 3 - Baris 2 Kolom 1	Cell 4 - Baris 2 Kolom 2
Cell 5 - Baris 3 Kolom 1	Cell 6 - Baris 3 Kolom 2

Membuat Scroll pada Widget Blogger

noreply@blogger.com (Anonymous) — Mon, 20 Aug 2012 00:43:00 +0700

(lihat gambar disamping, yang diberi tanda panah)

Masing-masing dari bagian itu mempunyai nama Title di template kita, untuk membuat perintah scroll caranya adalah sebagai berikut :

Dari halaman dasbor, klik Tata Letak - Edit HTML.
Beri tanda centrang pada Expand Template Widget.
Kemudian cari kode "Title" yang ingin di buat scroll, misalnya disini saya ambil contoh widget dengan nama "My Blogroll" (gunakan Control F atau F3).
Perhatikan kode yang ada di bawahnya, seperti ini:

..................................
...................................
<b:widget id='BlogList1' locked='false' title='My Blogroll' type='BlogList'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
.......................................
.....................................
Perhatikan yang ber warna merah....
Anda Tinggal menambahkan saja code dibawah ini :

style='overflow:auto; height:100px
Sehingga keseluruhannya akan tampak seperti ini :

..................................
...................................
<b:widget id='BlogList1' locked='false' title='My Blogroll' type='BlogList'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'style='overflow:auto; height:100px'>
.......................................
.....................................
Selesai, Simpan Template dan LIHAT hasilnya
Untuk Height dapat di ganti sesuai ukuran tinggi yang diinginkan. 100px, 150px, 250px, dan sebagainya

Cara Menghilangkan Navbar Blogger

noreply@blogger.com (Anonymous) — Sun, 19 Aug 2012 23:05:00 +0700

Cara Menghilangkan Navbar Blogger

Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Menu Navbar Standar

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :

Untuk template klasik

Sign in di blogger
Klik menu Template
Klik menu Edit HTML
Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
Copy kode berikut lalu paste di atas kode </style>

/* hilangkan navbar

----------------------------- */

#navbar-iframe {

height:0px;

visibility:hidden;

display:none

}

Klik tombol Simpan Perubahan Template
Selesai.

Untuk template baru

Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
Copy kode berikut lalu paste di atas kode ]]></b:skin>

/* hilangkan navbar

----------------------------- */

#navbar-iframe {

height:0px;

visibility:hidden;

display:none

}

Klik tombol Simpan Template
Selesai.

Selamat menikmati blog tanpa navbar !

Membuat Related Post Otomatis Modifikasi Scroll

noreply@blogger.com (Anonymous) — Sun, 19 Aug 2012 16:03:00 +0700

Lanjutan dari posting Membuat Related Post Otomatis, karena beberapa hal yang menurut saya mengganggu salah satunya yaitu jika related post tersebut mempunyai jumlah yang banyak... maka akan tampak menjadi sangat panjang.Untuk itu saya sedikit memodifikasi script Membuat Related Post Otomatis langsung saja ke TKP :

Seperti biasa masuk ke blogmu
Pilih template, klik edit html dan klik lanjutkan
Ceklist pada Expand Template Widget (jangan lupa simpan template aslinya buat jaga-jaga)
Cari kode: #related-posts { (gunakan Ctrl+f untuk mencari)

Sisipkan kode

overflow: auto;

width: 95%;

height: 300px;

background-color: #000000;
border:5px groove #141414;

Sehingga menjadi

#related-posts {
float : left;

overflow: auto;

width: 95%;

height: 300px;

background-color: #000000;
border:5px groove #141414;
width : auto;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana; margin-bottom:10px;
}

S impan Template... Selesai

Membuat Related Post Otomatis

noreply@blogger.com (Anonymous) — Sun, 19 Aug 2012 15:45:00 +0700

Related posts adalah kumpulan link yang diletakkan persis dibawah artikel sehingga menarik minat pembaca untuk membaca artikel berikutnya.

Seperti biasa masuk ke blogmu
Pilih template, klik edit html dan klik lanjutkan
Ceklist pada Expand Template Widget (jangan lupa simpan template aslinya buat jaga-jaga)
Cari kode: </head> (gunakan Ctrl+f untuk mencari)
Copy kode dibawah ini tepat diatas </head>

<style>
#related-posts {
float : left; width : auto;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana; margin-bottom:10px;
}

#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}

#related-posts .widget h2,
#related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}

#related-posts a {
text-decoration : none;
}

#related-posts a:hover {
text-decoration : none;
}

#related-posts ul {
border : medium none;
margin : 10px; padding : 0;
}

#related-posts ul li {
display : block;
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfp6eBE9sj8jZju1GCAAJH66Y7zySjjhByOPoUyHSF3_I2tqj20W6r4oAMBCsXgHBg0eyOTaZKEAat_04NO29ZUppMwLwwTHe6Cidc6OcbamR6TpnNhMkTRXHl5THp79ciHt2v0C42vckE/s1600/rss.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>

<script src='http://yourjavascript.com/1244223703/related_postku1.js' type='text/javascript'/>

Cari kode <data:post.body/> atau <div class='post-body>,
Kemudian copy code dibawah ini, letakkan persis dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font>
<font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != "true"'>,
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&
callback=related_results_labels&
max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Klik pratinjau (preview) untuk memastikan tidak terjadi error dan Simpan hasilnya
Semoga Berhasil (untuk membuat menjadi scroll lihat diSINI)

Cara Membuat Tombol Back To Top

noreply@blogger.com (Anonymous) — Sun, 19 Aug 2012 00:53:00 +0700

Cara Membuat Tombol Back To Top

Kali ini saya kembali hadir di dunia maya dan akan share tentang bagimana caranya Membuat Tombol Back To Top. Tombol Back to top itu sendiri berfungsi apabila setelah kita mengscroll halaman blog ke bawah dan ingin naik lagi ke atas maka kita tidak perlu menggulung layar keatas lagi. Cukup dengan menekan tombol Back to Top maka otomatis layar akan menggulung sendiri ke atas.

Kertas Kecil Kita kali ini akan memberikan tutorial cara memasang tombol back to top tersebut.

Langkahnya adalah sebagai berikut:

1. Login ke akun blog anda
2. Klik menu Rancangan, kemudian klik tambah gadget, pilih javascript
3. Kemudian copy dan pastekan kode di bawah ini

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/agt_uninstall-product.png" /></a>

Untuk gambarnya bisa anda ganti sendiri sesuai selera anda dengan mengganti http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/agt_uninstall-product.png dengan alamat gambar yang anda sukai.untuk posisinya juga bisa anda rubah sendiri dengan mengganti right:5px dengan left:5px untuk mengganti posisi tombol berada di kiri.

Pasang Bebarapa Floating Widget diBlog

noreply@blogger.com (Anonymous) — Sat, 18 Aug 2012 21:13:00 +0700

Langsung saja, tanpa basa-basi :

Masuk ke akun Google Anda
Pilih Tata Letak >> Eleman Laman >> Add gadget (HTML/Javascript).
Copy script master widget dibawah ini dan paste pada gadget.

<style type="text/css">
.barrightblogger{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5zetkm3Wp30Vg_2YhU4ySoG9PTwFbPkdIGjw0QY_J7lO9_R9nayrnGijdj9FncpPHP94613U10arVnBaZlfSyJMenNALhZ__J4cKiduaIRflfLQgVNEDh1J75WTbQfabLd7EgbYVD3k_Q/');
background-repeat:no-repeat;
width:39px;
height:159px;
position:fixed;
right:0px;top:50px;
z-index:1000;
}

.barrightbloggerc{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1LJgHP1gGcb8x94RkZ5L608joAeyrOrUmQr0gPCGpf4NDlkt1dATQcLGJG2WK30ezRLdJ6RkisuhE0HQUV1SJExiDqPTND_ShcO0cYsFbwwG_diWlFLanWjw3_OSnFAJQJEWlEyPB9JLB/');
background-repeat:no-repeat;
width:288px;
height:345px;
position:fixed;
right:0px;
top:50px;
z-index:1100;
}

.barconteblogger{
margin:5px 0 0 47px
}

.barrighttwitter{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKGQkMp8NES_cvZzKiM_w7giOIEhWu_omkCkkghbmp6gMPqpFwTEfPNNC7mGy4vmZ69nuiHu8ZIabWgvvuyQiJpNjllTx1dGtV7_MVlEh2XXkyPR687ufZjJOxioPto8wrFwlMD5XO7uN/');
background-repeat:no-repeat;
width:39px;
height:159px;
position:fixed;
right:0px;
top:210px;
z-index:1000;}

.barrighttwitterc{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKiK5_EPXTJRLdEDiAGknhYcsv35LI53ECc8aIixthcc6RGODsCgnEW2yyKNZIxfyklIbe9P1scIvzsyVK8PJ_giJS0Y7i_qbCmRLMyJNYys_bUxvJTnTR3HVPmi_Zp-tmzeTSWBzLvvWt/');
background-repeat:no-repeat;
width:288px;
height:345px;
position:fixed;
right:0px;
top:120px;
z-index:1100;}

.barcontetwitter{
margin:5px 0 0 47px
}

.barrightfacebook{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcmT_ejB2r0pCx6zlgQHCnJe_Q3a5ASQOv-w8YM6gErs55ozycXIAPtCXEdG98DyBJ49o7I9SZzNp4bN0u5bTzSLjVInoOOX5J5ENsckMHdVJAhv6RibHp8SXvqBBUmCc43sL_8A0gc-Qf/');
background-repeat:no-repeat;
width:39px;
height:159px;
position:fixed;
right:0px;
top:370px;
z-index:1000;}

.barrightfacebookc{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNRBxiconsmEb7EU9ObfF0YCFJGcREpHRa5BZXaXZdOl-7RPgCoURMFg2w_R2Yo4SqkZRJPXRxmZo4S6fiLb0bRy8Vw-4rpK_3l-iAFiyM9kvVfCU9DheqlU-cVCpFPbs2hSwiBI-PgCL0/');
background-repeat:no-repeat;
width:288px;
height:345px;
position:fixed;
right:0px;
top:185px;
z-index:1100;}

.barcontefacebook{
margin:5px 0 0 47px
}

</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
CONTENT BLOGGER HERE
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
CONTENT TWITTER HERE
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE
</div>
</div>

Kustomisasi widget :

Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.
Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.
Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.

Bila anda masih bingung atau kesulitan untuk mengetahui kode ID Google Friend Connect (GFC), Facebook Like Box, dan Twiter Update berikut ini tutorialnya :

Cara Menambahkan Google Friend Connect Pada Blog
Cara Menambahkan Facebook Likd Box Connect Pada Blog
Cara Menambahkan Twitter Update Pada Blog

Cara Agar Halaman Blog Terindex Google

noreply@blogger.com (Anonymous) — Sat, 18 Aug 2012 02:21:00 +0700

Cara Agar Halaman Blog Terindex Google - Bagi yang suka dengan namanya SEO pasti selalu ingin mengejar apa yang diperlukan agar blog kita SEO secara maksimal, tapi taukah Anda untuk mencapai SEO halaman blog kita juga butuh Index dari Google lho!, berikut ini akan saya ulas sedikit masalah SEO tentag index halaman blog.
Hal pertama yang harus kita lakukan adalah menuju ke https://www.google.com/webmasters/tools/ setelah itu tambahkan blog kita dengan cara klik ADD A SITE

Jika sudah didaftarkan klik gambar blog kita atau alamat blog kita.

Langkah selanjutnya
Sekarang kita menuju ke Optimization > Sitemaps

Nanti akan ada tulisan "No sitemaps found for this site."

Sudah ketemu kan? jika sudah kita klik ADD/TEST SITEMAP nanti akan keluar kolom seperti dibawah ini

Nah inti tutorial yang saya sampaikan itu pada tahap ini, pada tahap ini lalu kita masukkan beberapa url yang gunanya untuk mengindex halaman/posting dalam blog kita berikut url yang harus kita sublimt kan dalam kolom tersebut dan untuk caranya masukkan satu persatu secara berurutan url dibawah ini, setelah yang pertama maka di refresh dan dilanjutkan yang kedua...dan seterusnya.

atom.xml?

atom.xml?redirect=false

feeds/posts/default?orderby=updated

atom.xml?redirect=false&start-index=1&max-results=500

Dan tambahkan juga url dibawah ini jika posting kamu sudah lebih dari 500.

atom.xml?redirect=false&start-index=501&max-results=500

Begitu juga yang ini jika posting kamu sudah lebih dari 1000 tambahkan pula url berikut.

atom.xml?redirect=false&start-index=1001&max-results=500

Setelah semua di sublimt maka akan terperoleh hasil seperti berikut:

Hasil ini menunjukkan bahwa halaman yang ada di blog saya telah terindex semua oleh Google, jika ada diantara sobat yang belum terindex semua mohon untuk bersabar siapa tahu di bulan depan sobat coba Resublimt hasilnya akan sempurna.

Tutorial ini tidak hanya memaksimalkan SEO namun juga memaksimalkan SERP dalam SE, semoga tutorial ini bermanfaat dan dapat membantu sobat yang belum tahu.

Memasang tags ALT dan TITLE Pada Gambar Secara Otomatis

noreply@blogger.com (Anonymous) — Sat, 18 Aug 2012 02:06:00 +0700

Secara teknis untuk mencapai SEO pengguaan tag ALT dan TITTLE pada gambar sangatlah penting, karena jika tanpa itu robot google tidak bisa membaca gambar yang kita unggah dan untuk mengatasi masalah itu mari kita terapkan tutorial ini pada blog kita.

Cara penerapannya letakkan kode berikut diatas kode </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>

Scripttersebut akan langsung membuat tags alt dan title untuk foto yang sobat unggah secara otomatis, maka dari itu pastikan terlebih dahulu nama file foto sebelum di upload.

Cara Memasang MetaTag pada blog

noreply@blogger.com (Anonymous) — Sat, 18 Aug 2012 01:37:00 +0700

Salah satu cara untuk meningkatkan sumber lalu lintas (pengunjung) mesin pencari blog yaitu dengan cara memasang meta tag pada blog. Dalam HTML ada beberapa tag yang membuat situs lebih menarik bagi mereka. META TAG biasanya ditempatkan di halaman, yang terletak antara <HEAD> ... <HEAD>.

Jika kita ingin mendefinisikan suatu deskripsi meta tag ke halaman utama yang akan diulang untuk setiap halaman, dan kemudian mesin pencari (seperti Google) akan menganggapnya sebagai duplikat dari "meta-tag." Dengan kode di bawah kita dapat memiliki tag deskripsi yang berbeda untuk setiap entri dalam blog kita pada blogger.

Dalam membuat meta tag blog, "carapada" ngasih pertimbangan sbb:

Deskripsi
Deskripsi menggambarkan informasi halaman secara keseluruhan.

Keyword / kata kunci
Kata kunci yang relevan dengan isi blog kamu atau konten blog.

Pengindeksan oleh mesin pencari / robot

Cara membuat meta tag pada blog dapat kamu lakukan dengan langkah - langkah sebagai berikut :

1.Login ke Dashboard Blogger - design -> Edit HTML
2.Cari kode seperti ini , kamu bisa mencarinya dengan menekan tombol F3 :

<title><data:blog.pageTitle/></title>

3.Copy dan paste kode berikut setelah kode di atas.

<meta content=' Deskripsi blog kamu' name='description'/>
<meta content='keyword 1 ,keyword2 ,keyword3 ...' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

Ganti tulisan berwarna biru di atas dengan deskripsi dan keyword yang sesuai dengan blog kamu.
4.Klik "Simpan / save Template" dan sudah selesai.
Selamat mencoba.

btw: bisa gunakan juga tool

Meta Tag Analyzer Tool

Contoh Meta Tagku

Add caption

Apa itu Meta Tag

noreply@blogger.com (Anonymous) — Sat, 18 Aug 2012 01:09:00 +0700

Meta Tag adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web. Elemen meta ini harus diletakkan pada bagian “head” dalam HTML tersebut. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web dan untuk menjelaskan mengenai kata kunci (keyword) yang terkait serta untuk metadata lain tanpa “head”.

Sebagai contoh yang sederhana, di bawah ini ditampilkan perintah meta:

<meta name=”keywords” content=”blog trick,hacking,blog tutorial”>

adapun cara penggunaannya dapat dilihat disini