Gudang Informasi Blogging

Menu Navigasi Terbaik: ZIPUP

Lihat Gambar dibawah ini
DEMO
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>

Baca Selengkapnya...

Membuat Scroll pada Widget Blogger

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

    ..................................
    ...................................
    <b:widget id='BlogList1' locked='false' title='My Blogroll' type='BlogList'>
    <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'>
    .......................................
    .....................................
    Perhatikan yang ber warna merah....
  5. Anda Tinggal menambahkan saja code dibawah ini :
    style='overflow:auto; height:100px
  6. Sehingga keseluruhannya akan tampak seperti ini :
    ..................................
    ...................................
    <b:widget id='BlogList1' locked='false' title='My Blogroll' type='BlogList'>
    <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'style='overflow:auto; height:100px'>
    .......................................
    .....................................
  7. Selesai, Simpan Template dan LIHAT hasilnya
  8. Untuk Height dapat di ganti sesuai ukuran tinggi yang diinginkan. 100px, 150px, 250px, dan sebagainya
SELAMAT MENCOBA!

Baca Selengkapnya...

Membuat Fungsi Scroll

Fungsi Scroll sangat berguna untuk membuat halaman menjadi lebih ringkas, tidak sulit untuk membuatnya, tinggal menambahkan kode berikut ini:
<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">ISI </div>
Sebagai Contoh :
<div style="border: 1px solid #eee; height: 200px; overflow: auto; padding: 10px; width: 300px;">
<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

Mudah Bukan?

Baca Selengkapnya...

Cara Membuat Widget LikeBox Facebook

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?
  1. Setelah login, klik link ini Create Facebook Page
  2. Pilih yang dibagian Official Page
  3. Di section Brand, Products or Organization pilih Website
  4. Kemudian isi Pagename sesuai dengan nama page yang anda inginkan.
  5. Setelah selesai klik Create Official Page
  6. Dan Official Page anda telah selesai dibuat.
  7. Selanjutnya anda dapat menambahkan foto atau mengedit profil sesuai dengan keinginan anda.
Cara Membuat Like Box
  1. Setelah selesai membuat Official Page pribadi anda di facebook, langkah selanjutnya adalah membuat Like Box.
  2. Klik Edit page.
  3. Lalu klik Promote with a Like Box
  4. Pada Facebook Page ID isikan dengan Facebook Page ID anda
  5. ID ini dapat anda temukan di address bar browser Anda.
  6. Maka akan Like Box anda akan muncul. Anda tinggal mengatur saja Width,
  7. 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.
  8. Setelah selesai anda setting, klik Get Code
  9. Dan akan muncul 2 macam code yang dapat anda pilih.
  10. Saya menyarankan anda gunakan XFBML, karena kelebihan dari XFBML adalah lebih flexible dibandingkan dengan iframe.
  11. 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.
  12. 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.
  13. 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>
  14. 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

Baca Selengkapnya...

Cara Menambahkan Google Friend Connect Pada Blog

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

Baca Selengkapnya...

Awards

Baca Selengkapnya...