Tampilkan postingan dengan label Menu. Tampilkan semua postingan
Tampilkan postingan dengan label Menu. Tampilkan semua postingan

Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot

11:17 PM | Label:
Horizontal Menu: Pure CSS 3D Button Effect for Blogger

Menu/navigasi horizontal Blogger/Blogspot ini juga dibuat dengan HTML dan CSS murni tanpa sentuhan javascript maupun jquery., sama seperti menu/navigasi horizontal sebelumnya. Cara membuat dan memasangnya pun sangat sederhana dan tanpa mengedit template HTML, karena aturan CSS saya buat menyatu dengan HTML nya.

Cara membuat/memasang widget horizontal menu/mavigation 3d button Blogger/Blogspot:
1. Copy dan edit kode di bawah ini:
Kode:



- Ganti # dengan url yang ingin anda pasang di menu, misalnya url homepage, daftar isi, label, dan lain-lain.
- Ganti Link 1, Link 2, Link 3, dan seterusnya dengan nama menu/anchor text sesuai dengan yang anda inginkan, misalnya Home, Daftar Isi, Tips, dan seterusnya.
- Jika ingin menambah/menghapus daftar menu, tambahkan/hapus baris:


  • Link



    • sebelum .

    2. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

    3. Setelah pop up window muncul, pilih opsi HTML/Javascript

    4. Kemudian masukkan Kode yang sudah diedit tersebut ke kolom configure HTML/Javascript.


    7. Klik save.
    8. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget).
    9. Save lagi.
    10. Done! menu/navigasi horizontal Blog Blogger anda siap digunakan.
    • Digg
    • Del.icio.us
    • StumbleUpon
    • Reddit
    • RSS
    Read User's Comments(0)
    Danu Artha Putra M

    Membuat Tab Menu

    11:17 PM | Label:
    Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya.



    Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik – baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.



    Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Oke sob, sudah mengerti toh…mantaabbbbb kita langsung ke TKP.Hot



    1. Silahkan login ke blogger dengan ID sobat tentunya.


    2. Tuju Tata Letak.


    3. Klik Edit HTML.


    4. Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.


    5. Kemudian letakkan kode javascript berikut sebelum kode






    6. Setelah itu letakkan kode berikut di atas kode ]]>



    div.TabView div.Tabs
    {
    height: 30px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 98px; /* Lebar Menu Utama Atas */

    text-align: center;
    height: 30px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #BDBDBD; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight: bold;
    color: #000; /* Warna Font Menu Utama Atas */
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #E6E6E6; /* Warna background Menu Utama Atas */
    * }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
    overflow: hidden;
    background-color: #E6E6E6; /* Warna background Kotak Utama */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }


    7. Kemudian Simpan Template.


    8. Langkah selanjutnya, silahkan sobat klik Tata Letak.


    9. Klik Elemen Halaman dan tambahkan Gadget.


    10. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.



    Tab 1
    Tab 2
    Tab 3

    Tab 1.1

    Tab 1.2

    Tab 1.3


    Tab 2.1

    Tab 2.2

    Tab 2.3


    Tab 3.1

    Tab 3.2

    Tab 3.3






    11. Kemudian Simpan.


    Keterangan :

    * Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.


    * Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.


    * Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

    Oke sobat, selamat mencoba. smile_teeth
    • Digg
    • Del.icio.us
    • StumbleUpon
    • Reddit
    • RSS
    Read User's Comments(0)
    Danu Artha Putra M

    Cara Membuat Widget Melayang Facebook Like Box

    11:16 PM | Label:

    1.     Sebelumnya anda harus sudah mendaftar dan mendapatkan kode Facebook Like Box untuk nanti dipasang pada widget.
    2.       Login ke dashboard blogger anda.
    3.       Pilih Rancangan > Elemen Laman > Add Gadget (HTML/Javascript).
    4.       Copy script widget dibawah ini dan paste pada gadget.
    <style type="text/css">
    .barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjMupqM8zel7dARf5iGbDEAdoJypojsEq4Uk0vddAmLD3qhQ5dpsZnRRrThf7kYIDEJbOtaEPC3UHz-M_DhpA1-YxsfrX3nF6xpXootBVMyGNnON9Pe18G530tvBqK2eH2Yl2BkdLuy6Mg/');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/AVvXsEjmQtdb1T8rgbd55ionBW_ylg_dXH9K8bGREpnS0jEsv01fXhqf_3PVhmYmLOjvJ2wNNovkoE8Nt3dre0siOH38nL-gPZBVK7NSgN4N8undchvuR3jSwEntu0Ce-DyexFtsRTyRSAOKtSY6/');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="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
    <div class="barcontefacebook">
    <!-- Begin Facebook -->
    CONTENT FACEBOOK HERE
    <!-- End Facebook -->
    </div>
    </div>
    5.      Ganti tulisan CONTENT FACEBOOK HERE dengan kode Facebook Like Box anda.
    6.      Jika pada template anda belum terdapat javascript dari Facebook, maka copy saja javascript dibawah ini dan letakkan tepat diatas kode </head>  pada template supaya widget Facebook Like Box ini bisa berfungsi.
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
      fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
    7.     Sesuaikan tinggi dan lebar widget supaya sama dengan ukuran Facebook Like Box yang anda buat sebelumnya melalui Facebook.
    8.      Save / Simpan.
    • Digg
    • Del.icio.us
    • StumbleUpon
    • Reddit
    • RSS
    Read User's Comments(0)
    Danu Artha Putra M

    MEMBUAT MENU MELAYANG DI BAGIAN KIRI BLOG

    10:54 PM | Label:


    Menampilkan menu melayang merupakan usaha peblogger untuk menghemat ruang blog, terutama yang isi dari blog sudah sangat banyak, baik label maupun post.
    Menu melayang ini dapat kita tampilkan di bagian kiri maupun di bagian kanan blog, tinggal anda memilih mana yang lebih cocok untuk blog anda.
    Script dibawah ini dibuat untuk tampilan dibagian kiri blog. Anda tinggal mengubah sedikit kode untuk menampilkan di sebelah kanan blog.
    Ikuti langkah-langkahnya....
    LANGKAH PERTAMA
    1. Masuk ke Blogger dengan ID anda.
    2. Pilih Rancangan kemudian klik Edit HTML.
    3. Back up template dulu, kalau takut gagal.
    4. Cari kode ini : </head> pada template anda.
    5. Copy Seluruh kode dibawah ini, kemudian paste tepat diatas kode tadi :


      <script src='https://sites.google.com/site/epgstudiosite/javascript/floating1.js' type='text/javascript'/>
      <script>
      YOffset=150;
      XOffset=0;
      staticYOffset=30;
      slideSpeed=20
      waitTime=100;
      menuBGColor=&quot;red&quot;;
      menuIsStatic=&quot;yes&quot;;
      menuWidth=150;
      menuCols=2;
      hdrFontFamily=&quot;verdana&quot;;
      hdrFontSize=&quot;2&quot;;
      hdrFontColor=&quot;black&quot;;
      hdrBGColor=&quot;#FF0000&quot;;
      hdrAlign=&quot;left&quot;;
      hdrVAlign=&quot;center&quot;;
      hdrHeight=&quot;15&quot;;
      linkFontFamily=&quot;Verdana&quot;;
      linkFontSize=&quot;2&quot;;
      linkBGColor=&quot;white&quot;;
      linkOverBGColor=&quot;#FFFF99&quot;;
      linkTarget=&quot;_top&quot;;
      linkAlign=&quot;Left&quot;;
      barBGColor=&quot;red&quot;;
      barFontFamily=&quot;Verdana&quot;;
      barFontSize=&quot;2&quot;;
      barFontColor=&quot;white&quot;;
      barVAlign=&quot;center&quot;;
      barWidth=20; // no quotes!!
      barText=&quot;TUTORIAL BLOGGER&quot;;


      // ----- Masukkan menu blog anda dibawah ini
      ssmItems[0]=[&quot;LABEL&quot;] //Header Menu
      ssmItems[1]=[&quot;Beranda&quot;, &quot;/&quot;, &quot;&quot;]
      ssmItems[2]=[&quot;Postingan Artikel&quot;, &quot;http://epg-studio.blogspot.com/search/label/POSTINGAN%20ARTIKEL&quot;,&quot;&quot;]
      ssmItems[3]=[&quot;Pengaturan Image&quot;, &quot;http://epg-studio.blogspot.com/search/label/PENGATURAN%20IMAGE&quot;,&quot;&quot;]
      ssmItems[4]=[&quot;Elemen Halaman&quot;, &quot;http://epg-studio.blogspot.com/search/label/ELEMEN%20HALAMAN&quot;,&quot;&quot;]
      ssmItems[5]=[&quot;Asesoris Blog&quot;, &quot;http://epg-studio.blogspot.com/search/label/AKSESORIS%20BLOG&quot;, &quot;_new&quot;]
      ssmItems[6]=[&quot; Komentar&quot;, &quot;http://epg-studio.blogspot.com/search/label/KOMENTAR&quot;, &quot;&quot;]
      ssmItems[7]=[&quot;Fasilitas Chat&quot;, &quot;http://epg-studio.blogspot.com/search/label/FASILITAS%20CHAT&quot;, &quot;&quot;]
      ssmItems[7]=[&quot;Fasilitas Chat&quot;, &quot;http://epg-studio.blogspot.com/search/label/FASILITAS%20CHAT&quot;, &quot;&quot;]
      buildMenu();
      //----- Selesai mengedit menu
      </script>
    6. Klik tombol Simpan Template

    Read more: http://epg-studio.blogspot.com/2009/07/membuat-menu-melayang-di-bagian-kiri.html#ixzz1gaGCv2Ew
    • Digg
    • Del.icio.us
    • StumbleUpon
    • Reddit
    • RSS
    Read User's Comments(0)
    Danu Artha Putra M
    Langganan: Postingan (Atom)