SELAMAT DATANG DI BLOG LKP TRI ARGA MUARO JAMBI JLN. LINTAS TIMUR KEL. SENGETI KEC. SEKERNAN KAB. Ma.JAMBI PROV. JAMBI

Rabu, 30 Maret 2011

Membuat Judul Blog Berjalan


 
Sengeti, 30 Maret 2011 By Tri Arga Computer Muaro Jambi
Tampilan memanglah suatu hal yang harus sangat diperhatikan dalam mengelola sebuah Blog maupun Website. Seorang Blogger ataupun Webmaster tentunya harus membuat tampilan dari Web yang dikelolanya menjadi menarik untuk dipandang. Oleh karena itulah, kali ini Arga akan berbagi kepada teman-teman dalam membenahi tampilan Blog Anda yakni dalam hal Membuat Judul Blog Bergerak atau seperti fungsi Marquee. Meskipun demikian, membuat Judul Blog Bergerak bukanlah perkara HTML biasa seperti menggunakan tag <marquee>, namun membutuhkan syntax javasript yang sedikit berbeda. Untuk mewujudkan judul/title yang berjalan ikuti langkah-langkah berikut :
  1. Login ke account Blogger anda
  2. Pilih Tata Letak-->Edit HTML.
  3. cari tag <head> dan paste kode berikut ini tepat di bawahnya:
    <script language='JavaScript'>
    var txt=&quot; <data:blog.pageTitle/> &quot;;
    var kecepatan=200;
    var segarkan=null;
    function bergerak() { document.title=txt;
    txt=txt.substring(1,txt.length)+txt.charAt(0);
    segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}
    bergerak();
    </script>
  4. Untuk mengubah kecepatan, silakan ganti angka 200 pada warna merah dengan angka yang anda inginkan
  5. Klik Simpan Template dan kini lihatlah hasilnya

Senin, 28 Maret 2011

Membuat Dropdown Pada Horizontal Menu

dropdown horizontal menu

Diposting trik blogger terdahulu saya telah menulis tentang membuat menu horizontal. Dimana pengkodeannya menggunakan CSS yang disadur dari blog Kang Rohman. Selanjutnya tinggal bagaimana trik menambahkan dropdown menu di dalam kode tersebut. Betulkan... Seandainya saya jeli mengamati kode menu horizontal tersebut, mungkin ini tidak akan menjadi sebuah posting. Ternyata ada hikmahnya juga, karena faktor ketidaktelitian tersebut he..he..he.. Kalau dropdown menunya agak kurang enak dipandang menurut penglihatan dan perasaan kamu, maka diperlukan beberapa optimasi kode CSS-nya, terutama yang memiliki atribut #nav li li. Jadi memodifikasinya terserah pada yang punya blog (ingin seperti apa dan bagaimana).

Berikut trik menambahkan dropdown menu dalam horizontal navigasi :

  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

  • Cari kode HTML di bawah ini yang posisinya diantara <body> ... <body>.

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    </ul>
    </div>
    </div>


Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

  • Tambah kode berikut di nav link yang kamu inginkan, letakkan sebelum </li>.

    <ul>
    <li><a href='URL sub 1'>Sub menu 1</a></li>
    <li><a href='URL sub 2'>Sub menu 2</a></li>
    <li><a href='URL sub 3'>Sub menu 3</a></li>
    </ul>


Contoh :

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a>
    <ul>
    <li><a href='URL sub 1'>Sub menu 1</a></li>
    <li><a href='URL sub 2'>Sub menu 2</a></li>
    <li><a href='URL sub 3'>Sub menu 3</a></li>
    </ul>
    </li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    </ul>
    </div>
    </div>


Catatan :
   1. Perhatikan peletakkan kode untuk menambah menu dropdown, ditandai dengan warna hijau.
   2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.
  • Jangan lupa disimpan.

Tambahan : Kode CSS #nav li li yang perlu kamu optimasi adalah sebagai berikut.

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px; <!-- lebar dropdown menu -->
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff; <!-- warna latar dropdown menu -->
width: 160px; <!-- lebar dropdown menu, ketika disentuh korsur/mouse -->
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff; <!-- garis tepi bawah dropdown menu -->
border-left: 1px solid #ffffff; <!-- garis tepi kiri dropdown menu -->
border-right: 1px solid #ffffff; <!-- garis tepi kanan dropdown menu -->
<!-- atau kamu bisa mengganti kode border-bottom, left, dan right dengan kode border: 1px solid #ffffff; -->
}
#nav li li a:hover, #nav li li a:active {
background: #c06000; <!-- warna latar dropdown menu , ketika disentuh korsur/mouse -->
padding: 7px 30px 7px 10px;
}


Selamat berdropdown dengan menu horizontal...

Membuat Menu Horizontal di Blog

Sengeti, 28 Maret 2011 By Tri Arga Computer Muaro Jambi
Membuat Blog kita tampil beda dari yang lain memang membuat kita tertantang, salah satunya dengan menambahkan Menu Horizontal pada bagian atas. Untuk mempermudah pengunjung memilih kategori halaman yang akan di lihat nya. Artikel ini juga sudah banyak yang menulis, namun tidak ada salahnya saya menuliskan kembali ke blog saya, bila sewaktu-waktu nanti saya membutuhkannya. Dan sebagai catatan saya dan bagi anda yang ingin belajar. Baik kita mulai saja, pertama yang harus anda lakukan adalah anda sudah masuk atau login ke blog anda.

1. Pilih Rancangan atau Layout, kemudian pilih Edit HTML kemudian cari "]]>", untuk mempercepat silahkan gunakan ctrl + f untuk mencari syntax tersebut.

2. Copykan code CSS dibawah ini diatas syntax "]]>.


  1. /*CSS untuk menu horizontal*/  
  2.   
  3. .menuhorizontal ul{  
  4. fontbold 13px arial;  
  5. padding-left0;  
  6. margin-left0;  
  7. height30px;  
  8. }  
  9.   
  10. .menuhorizontal ul li{  
  11. list-stylenone;  
  12. displayinline;  
  13. }  
  14.   
  15. .menuhorizontal ul li a{  
  16. padding2px 0.5em;  
  17. text-decorationnone;  
  18. floatleft;  
  19. colorblack;  
  20. background-color#999999/*warna disesuaikan dengan layout anda*/  
  21. border2px solid #999999/*warna disesuaikan dengan layout anda*/  
  22. }  
  23.   
  24. .menuhorizontal ul li a:hover{  
  25. background-color#333333/*warna disesuaikan dengan layout anda*/  
  26. border-styleoutset;  
  27. }  

Kemudian simpan template.

3. Kemudian kembali ke Elemen laman, silahkan tambahkan Gadget HTML/JavaScript. Kemudian copykan syntax dibawah ini.

  1. <div class="menuhorizontal"><ul>  
  2. <li><a href="#">Home</a></li><!-- Tanda # diganti dengan URL -->  
  3. <li><a href="#">Tutorial Website</a></li>  
  4. <li><a href="#">About Me</a></li>  
  5. </ul>  
  6. </div>  

Silahkan simpan dan refresh / lihat layout anda, silahkan edit sesuai keinginan anda apabila ada yang tidak pas dengan tampilan /warna.

NB : Silahkan backup template anda sebelum anda mengedit, jika terjadi error dapat segera memperbaiki.

Sabtu, 26 Maret 2011

Mengubah Bahasa Windows 7 Menjadi Bahasa Indonesia

Windows 7 Language Interface Pack (LIP) atau Paket Antarmuka Bahasa Windows 7 sekarang sudah menyediakan versi Indonesia. Namun, terjemahan ke bahasa Indonesia ini hanya untuk bagian Windows yang paling umum digunakan. Setelah Anda memasang LIP versi bahasa Indonesia ini, maka teks di dalam wizard, kotak dialog, menu, bantuan serta dukungan akan ditampilkan dalam bahasa Indonesia. Namun, beberapa teks yang belum diterjemahkan ke Bahasa Indonesia akan tetap berada di dalam bahasa awal Windows 7 Anda. Misalnya, jika Anda mempunyai Windows 7 versi bahasa Inggris, beberapa teks akan tetap dalam bahasa Inggris. Windows 7 Language Interface Pack tersedia untuk semua versi Windows 7, baik versi 32-bit ataupun 64-bit. Namun, agar bisa memasangnya pada Windows 7 Anda, syaratnya adalah Windows 7 Anda adalah Windows 7 Bahasa Inggris. Unkuran file sebesar 2,5 MB untuk versi 32-bit dan 3,9 MB untuk versi 64-bit.

Cara menginstall Windows 7 Language Interface Pack versi Bahasa Indonesia cukup mudah. Anda tinggal melakukan download Indonesia Windows 7 Language Interface Pack terlebih dahulu (link download di akhir artikel). Untuk lebih jelasnya menegai Cara Install Windows 7 Language Interface Pack versi Indonesia, ikuti langkah-langkah berikut:


  1. setelah anda slesai mendonwload  Windows 7 Language Interface Pack Bahasa Indonesia , jalankan file hasil download tersebut dengan melakukan klik 2 kali (double click).
  2. Setelah Install Wizard muncul klik Next.
  3. Install LIP - Step 1
  4. Di jendela selanjutnya berikan tanda pada opsi “I accept the license terms” pertanda Anda menyetujui semua ketentuan dan persyaratan dari Microsoft. Klik Next untuk melanjutkan.
  5. Install LIP - step 2
  6. Selanjutnya, Anda akan dapat membaca Readme dari Windows 7 Language Interface Pack ini dan klik Next.
  7. Setelah itu, proses Instalasi akan mulai. Tunggu hingga proses selesai.
  8. Pada saat proses selesai, klik Nex sekali lagi.
  9. Pada jendela terakhir, Anda pilih Bahasa Indonesia dan berikan tanda cek (centang) pada “Apply display language to welcome screen and system accounts”. Terakhir klik tombol Change Display Language.
  10. Ganti Bahasa
Proses pergantian Bahasa ini membutuhkan restart atau log off. Jadi, agar bahasa indonesia yang baru Anda install teraplikasikan ke system, maka lakukanlan restart atau log off. Setelah, Anda kembali log on maka bahasa Windows 7 Anda telah berubah menjadi Bahasa Indonesia.
Start menu dengan Bahasa Indonesia
Start Menu dengan Bahasa Indonesia
Jika Anda ingin mengganti bahasa menjadi bahasa sebelumnya, Anda dapat mengganti bahasa Windows 7 dengan cara sebagai berikut:
  1. Buka Control Panel dan pada item Jam Bahasa dan Wilayah klik tulisan “Ubah Bahasa Tampilan”

Proses pergantian Bahasa ini membutuhkan restart atau log off. Jadi, agar bahasa indonesia yang baru Anda install teraplikasikan ke system, maka lakukanlan restart atau log off. Setelah, Anda kembali log on maka bahasa Windows 7 Anda telah berubah menjadi Bahasa Indonesia.
Start Menu dengan Bahasa Indonesia
Jika Anda ingin mengganti bahasa menjadi bahasa sebelumnya, Anda dapat mengganti bahasa Windows 7 dengan cara sebagai berikut:
  1. Buka Control Panel dan pada item Jam Bahasa dan Wilayah klik tulisan “Ubah Bahasa Tampilan”
  2. Control Panel Bahasa
  3. Pada jendela setting bahasa, pilih bahasa yang Anda inginkan melalui kotak dropdown “Pilih Bahasa Tampilan”. Klik OK untuk menyimpan pengaturan.
  4. Jendela ganti bahasa
Proses ini juga membutuhkan restart ataupun log off komputer. Untuk itu lakukanlah restart ataupun log off komputer Anda.
Sekian tutorial cara merubah bahasa Windows 7 ke bahasa Indonesia setelah melakukan instalasi Windows 7 Language Interface Pack Bahasa Indonesia. Selamat mencoba! 
saya udah buktikan bener2 berhasil,saya dapet ilmu ini dari blog sahabat

link download

download windows 7

Jumat, 25 Maret 2011

Cara Membuat Menu Vertikal di Blog

Diberdayakan oleh Terjemahan
Update-Saya posting singkat aja gan, hanya share cara membuat menu vertikal di blog. Silahkan ikuti langkah berikut.


  • Log in ke blog anda (jangan blog tetangga yaa)
  • Klik Rancangan
  • Klik Edit HTML
  • Masukkan kode berikut di atas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/ddaccordion.js"></script>

<script type="text/javascript">

ddaccordion.init({
    headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    contentclass: "categoryitems", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){
    }
})


</script>

<style type="text/css">

.arrowlistmenu{
width: auto;
}

.arrowlistmenu .menuheader{
font: bold 14px Arial;
color: black;
background: transparent;
margin-bottom: 10px;
text-transform: uppercase;
padding: 4px 0 4px 10px;
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{
background-image: url(titlebar-active.png);
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px;
}

.arrowlistmenu ul li{
padding-bottom: 2px;
}

.arrowlistmenu ul li a{
color: #A70303;
background: transparent;
display: block;
padding: 2px 0;
padding-left: 19px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{
color: #A70303;
background-color: #F3F3F3;
}

</style>

  • Save Template
  • Klik Rancangan Lagi
  • Pilih Tambah Gadget
  • Pilih HTML/ JavaScript
  • Masukkan Kode ini ke dalamnya

<div class="arrowlistmenu">

<h3 class="menuheader expandable">Blog Info</h3>
/* Ganti dengan judul anda */
<ul class="categoryitems">
<li><a href="http://blogonol.blogspot.com/2011/03/cara-membuat-menu-vertikal-di-blog.html">Membuat Menu Vertikal di blog</a></li> /* ganti tulisan merah dengan alamat link atau alamat posting anda */
<li><a href="http://blogonol.blogspot.com/2011/03/award-pertama-blogonol.html">Award Pertama Blogonol</a></li>
/* ganti tulisan merah dengan alamat link atau alamat posting anda */
<li><a href="http://blogonol.blogspot.com/2011/03/ada-apa-dengan-komentar-di-blog-anda.html">Ada Apa Dengan Komentar di Blog Anda</a></li> /* ganti tulisan merah dengan alamat link atau alamat posting anda */
</ul>

<h3 class="menuheader expandable">Seo</h3>
/* Ganti dengan judul anda */
<ul class="categoryitems">
<li><a href="http://blogonol.blogspot.com/2011/02/kembali-pada-template-klasik.html">Kembali Pada Template Klasik</a></li>
<li><a href="http://blogonol.blogspot.com/2010/12/kode-rahasia-seo-blogspot.html">Kode Rahasia Seo BLogspot</a></li>
<li><a href="http://blogonol.blogspot.com/2010/12/ajaran-sesat-mengenai-alexa-gila-bener.html">Ajaran Sesat Mengenai Alexa</a></li>
</ul>

<h3 class="menuheader expandable">Aneh</h3>
/* Ganti dengan judul anda */
<ul class="categoryitems">
<li><a href="http://blogonol.blogspot.com/2011/02/kata-kata-aneh-orang-terkenal.html">Kata-kata Aneh Orang Terkenal</a></li>
/* ganti tulisan merah dengan alamat link atau alamat posting anda */
<li><a href="http://blogonol.blogspot.com/2011/02/khayalan-tingkat-tinggi.html">Khayalan Tingkat Tinggi</a></li> /* ganti tulisan merah dengan alamat link atau alamat posting anda */
<li><a href="http://blogonol.blogspot.com/2010/12/dokumen-rahasia-amerika-untuk-indonesia.html">Dokumen Rahasia Amerika Untuk Indonesia</a></li> /* ganti tulisan merah dengan alamat link atau alamat posting anda */
</ul>

<h3 class="menuheader" style="cursor: default">Daftar Isi</h3></div> /* Ganti dengan judul widget anda */

  • Silahkan edit tulisan merah untuk link anda dan tulisan biru untuk judul dari link anda. 
  • Klik Save Template
  • Selesai dan lihat hasilnya
  • Ok selamat mencoba dan sukses selalu

Read more: http://blogonol.blogspot.com/2011/03/cara-membuat-menu-vertikal-di-blog.html#ixzz1HTR9goNZ
Under Creative Commons License: Attribution Share Alike

Selasa, 22 Maret 2011

Tap menu view merupakan salah satu solusi untuk menghemat halaman blog anda, jadi saya sarankan agar anda membuat tap menu view pada blog anda. Tap menu view sangat efisien, anda tidak perlu menambahkan banyak widget kedalam halaman blog anda.Tap menu view dengan ukuran yang relatip kecil tetapi dapat memuat space yang banyak, bisa anda gunakan untuk berbagai keperluan anda. Contoh Tap menu view yang akan kita buat adalah seperti ini :



Domo tap menu view bisa anda lihat pada sidebar halaman blog ini.
Langkah-langkah membuat tap menu view adalah sebagai berikut:
  1. Log in terlebih dahulu kehalaman blog anda
  2. Pilih Rancangan >Edit HTML
  3. Download lengkap template terlebih dahulu untuk mengantisifasi kesalahan dalam Edit HTML
  4. Cari kode </head> gunakan tombol (ctrl + f atau F3) untuk memudahkan pencarian kode
  5. Copas kede dibawah  diatas kode </head>
  6. <script type='text/javascript'>
    //<![CDATA[
    function tabview_aux(TabViewId, id)
    {
      var TabView = document.getElementById(TabViewId);
    
      // ----- Tabs -----
    
      var Tabs = TabView.firstChild;
      while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
    
      var Tab = Tabs.firstChild;
      var i   = 0;
    
      do
      {
        if (Tab.tagName == "A")
        {
          i++;
          Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
          Tab.className = (i == id) ? "Active" : "";
          Tab.blur();
        }
      }
      while (Tab = Tab.nextSibling);
    
      // ----- Pages -----
    
      var Pages = TabView.firstChild;
      while (Pages.className != 'Pages') Pages = Pages.nextSibling;
    
      var Page = Pages.firstChild;
      var i    = 0;
    
      do
      {
        if (Page.className == 'Page')
        {
          i++;
          if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
          Page.style.overflow = "auto";
          Page.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (Page = Page.nextSibling);
    }
    
    // ----- Functions -------------------------------------------------------------
    
    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
    
    function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
    //]]>
    </script>
  7. Cari kode ]]></b:skin>
  8. div.TabView div.Tabs
    {
    height: 30px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 105px; /* Lebar Menu Utama Atas */
    background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;
    
    text-align: center;
    height: 45px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #2a2525; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight: bold;
    color: #ffffff; /* 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:#5b4848;url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZjQRQUWdlhu0WF1jpEVwoNJub3CeeK4VxHoJphHMZAHow0HbVQR0IsO8TMnv3yoJ3MKw3NhqEzoub_vN-zq4v8Na21o8-Jye8Xj81amQGMYZU1TZ4ArRxjLdRwifygh4SxNkMj0ZR8msP/s320/b3.gif) no-repeat;
    list-style-type:none;/* Warna background Menu Utama Atas */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #2a2525; /* Warna border Kotak Utama */
    overflow: hidden;
    background-color: #eeeeee; /* 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;
    }
  9. Klik simpan template
  10. Selanjutnya pilih Rancangan > Elemen halaman >Tambah gadget
  11. Tambahkan HTML/JavaScript
  12. Copas atau masukan kode berikut  delaman Box HTML/JavaScript
  13. <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 300px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    </div>
    <div class="Pages" style="width: 300px; height: 250px;">
    
    <div class="Page">
    <div class="Pad">
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />
    </div>
    </div>
    
    <div class="Page">
    <div class="Pad">
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />
    </div>
    </div>
    
    <div class="Page">
    <div class="Pad">
    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br />
    </div>
    </div>
    
    </div>
    </div>
    </form>
    
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>
  14. Klik Simpan
Keterangan :
  • Kode warna coklat adalah lebar dan tinggi menu silahkan anda sesuaikan 
  • kode warna biru adalah Judul menu-menu tap view anda
  • kode warna merah adalah isi/sub-sub menu
Selesai dan selamat mencoba Jika gagal jangan pernah menyerah coba,coba, dan coba terus

Senin, 21 Maret 2011

Cara Membuat Menu Horizontal Biasa

Sengeti, 21 Maret 2011
 
Apa kabar semua?Pasti Baik-baik saja kan?..KangTiar sudah lama tidak mempostingkan Tutorial Blog alias Trik Blogger.Maka dalam kesempatan kali ini KangTiar akan Mempostingkan Tentang Cara Membuat Menu Horizontal Biasa untuk Blog/Blogger. Sebelum ke TKP KangTiar akan Menerangkan Dulu ya.Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. dan Fungsi dari Tutorial Blog Kali ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.
Tidak Usah panjang Lebar lagi,berikut langkah Cara Membuat Menu Horizontal Biasa dalam blog kamu :
  • Login ke account Blogger kamu.
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Catatan :
1. Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.
2. Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.

Kemudian cari kembali kode seperti di bawah ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>

... dan seterusnya ...

</b:section>
</div>
Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).
<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div>

</div><!-- akhir bg_nav -->
Dan Yang Terakhir DISIMPAN
Semoga Artikel Cara Membuat Menu Horizontal Biasa kali ini Bermanfaat Bagi Anda

Cara Menginstall WordPress Offline

Dalam pembuatan website/blog pengeditan/experiment/uji coba biasanya dikerjakan secara off-line di PC sebelum di upload ke internet Hal ini bertujuan untuk mengurangi biaya akses internet, selain itu juga untuk mengurangi waktu yang terbuang karena loading koneksi yang mungkin belum terlalu cepat. Untuk dapat menjalankan WordPress secara off-line sebelumnya kita harus menginstal WordPressnya pada komputer kita.
Cara Install WordPress di computer sendiri
Instal wamp server
Jika belum punya bisa download di link ini
Setelah install selesai
Download file wordpress di http://wordpress.org/
Selesai di download extract file wordpress tersebut dan Copy Folder wordpress kedalam C:wamp/www
Jika sudah dicopy buka browser kamu, ketik localhost lalu Enter, tampilan kan seperti ini (tergantung versi WAMPnya)
Klik phpmyadmin untuk membuat database baru, dengan Create New Database (bebas terserah kamu, ini nama database yang akan digunakan pada tahap pengeditan wp-config nantinya). Jika sudah tekan CREATE lalu kembali kemenu localhost
Sekarang proses installnya, sebelum anda mengisntall wordpressny terlebih dahulu anda ubah databesnya sesuai dengan data base yang kita buat di phpmyadmin, caranya buka file wp-config-sample di folder wordpress, lalu edit data seperti yang ada di bawah ini
// ** MySQL settings – You can get this info from your web host ** //
/** The name of the database for WordPress */
define(’DB_NAME’, ‘putyourdbnamehere‘);
/** MySQL database username */
define(’DB_USER’, ‘usernamehere‘);
/** MySQL database password */
define(’DB_PASSWORD’, ‘yourpasswordhere‘);
/** MySQL hostname */
define(’DB_HOST’, ‘localhost’);
•    pada DB_NAME ganti nama databasenya sesuai yang di buat di phpmyadmin
•    Untuk username ganti dengan nama”root”
•    Untuk password bebas terserah kamu (dikosongkan juga boleh)
•    Untuk localhost jangan diganti sedikitpun
Setelah mengubah namanya save as data tersebut dan beri nama wp-config.php
setelah itu kembai buka localhost di browser anda, klik folder wordpress pada Your Project
Dan akan keluar tampilan seperti di bawah iniJika sudah terisi klik Install WordPress
Masuk Log In
Login dengan username admin dan pastekan passwordnyaAgar tidak sulit gara-gara password yang aneh ganti nama password kamu secepatnya
Masuk ke bagian user –> edit
masukan password baru kamu dipaling bawah..update profile..
Jika sudah Update Profile
>>> Selamat kamu telah menginstall wordpress…. semoga membantu < <<

Sengeti, 21 Maret 2011

Cara Membuat Menu Horizontal Blogger

Udah lama saya ga posting tentang blog tutorial,
kali ini saya akan bagi-bagi cara buat membuat menu horizontal di blogger buat yang belum tau, yang saya kutip dari indahnya berbagi.
Ga tanggung - tanggung saya kasih 30 macam menu horizontal!!! Jadi bisa pilih sesuka hati deh...hehehe

Simak yuk caranya....

1. Log In wordpress Blogger
2. Masuk Rancangan >> Elemen Laman
3. Pilih Tambah Gadget di bawah header ( atau di atas header juga boleh, tergantung temen-temen) trus pilih HTML / Javascript
4. Copas semua code yang ada di dalam text area sesuai dengan menu horizontal pilihan temen-temen. (Akan saya berikan nanti ditoilet belakang)
5. Klik Save

Untuk mengeditnya :

Cari kode ini:
<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 5</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>
Penggunaan :

1. Ganti# dengan link teman-teman
2. Ganti Link 1, atau Link 2, atau Link 3, dan seterusnya dengan judul / title menu temen-temen

Nah, sekarang saatnya saya kasih 30 macam menu horizontal....

Menu 1




Menu 2




Menu 3




Menu 4




Menu 5




Menu 6




Menu 7





Menu 8




Menu 9




Menu 10




Menu 11




Menu 12




Menu 13




Menu 14




Menu 15




Menu 16




Menu 17




Menu 18




Menu 19




Menu 20




Menu 21




Menu 22




Menu 23




Menu 24




Menu 25




Menu 26





Menu 27




Menu 28




Menu 29




Menu 30




Selamat mencoba!!!