Jumat, 24 Mei 2013

Cara Membuat Tab Tiga Kolom di Samping Pada Blog - Smart Blogger Zone

Membuat menu tab view ,tanpa mengubah template blog atau membuat tiga kolo pada samping blog, atau yang tab berjejer tiga kolo di samping website :) , Artinya tanpa otak-atik “Edit HTML”. Tentunya dengan adanya tips tersebut akan sangat memudahkan Sobat Blogger yang masih kesulitan untuk membuat menu tab view.

Contoh Menu Tab View : lihat di sidebar saya yang kanan, tepatnya yang atas yang kayak gini loh

Cara kali ini hanya meletakkan kode-nya pada tempat yang kosong pada blog Sobat, misalnya sidebar, atau yang lainnya. Metodenya hanya seperti pembuatan widget biasa kok . . .

Mari yang ingin mencoba bisa ikuti langkah-langkah berikut,
1.      login ke blogger,
2.      kemudian pada Elemen Halaman sobat klik Tambah Gadget,
3.      Lalu pilih yang HTML/Javascript.
4.      Setelah itu tambahkan kode script menu tab view-nya seperti di bawah ini :
<style type="text/css">
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:8px; 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: 5px 5px}
</style>
<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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Note  : 
Untuk yang berwarna hijau, artinya diisi dengan “kode-kode lain sebagai isinya (misal banner, iklan, dan lain-lain)
Untuk yang berwarna merah, diisi dengan Judul dari isi tab view yang telah dibuat
semoga bermafatt gan ;)
Referensi dari

Kamis, 23 Mei 2013

Cara Membuat Scroll Pada Widget - Smart Blogger Zone

Tujuan saya memberikan trik membuat scroll ini adalah agar membuat tampilan blog anda terlihat rapih dan tidak memanjang. kali ini saya akan memberikan triknya yang sangat mudah apalagi untuk blogger pemula. langsung saja pada tutorial membuat scroll pada blog.
1. Buka Widget yang ingin anda buat scroll

Cara Membuat Scroll Pada Widget

2. Gambar diatas adalah contohnya, dan berikut kodenya

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #eee;">KODE HTML ANDA</div>

Jika berhasil, maka akan seperti gambar dibawah ini

Cara Membuat Scroll Pada Widget

Semoga berhasil dan bermanfaat untuk anda semua.Referensi dari bloglazir.blogspot.com

Daftar Isi - Smart Blogger Zone

Cara Membuat Daftar Isi Blog Secara Otomatis - Smart Blogger Zone

Cara Membuat Daftar Isi Blog Secara Otomatis - Selamat malam sahabat blogger. Pada kesempatan ini saya akan menjelaskan bagaimana cara membuat daftar isi di blog secara otomatis. Daftar isi sangat berguna untuk mempermudah para pengunjung blog dalam mencari artikel atau konten yang mereka cari / inginkan. Sedangkan manfaat untuk admin blog yaitu daftar isi blog juga dapat meningkatkan jumlah page view blog.

Untuk melihat tampilannya seperti apa, anda bisa melihat demonya terlebih dahulu :
DEMO

Nah bagaimana, apakah anda berminat untuk memasang daftar isi di blog anda? Untuk memasang widget daftar isi di blog, anda dapat melakukan beberapa langkah mudah membuat daftar isi berikut ini :
Langkah-langkah memasang widget Daftar Isi di blog :
1. Login ke akun blogger
2. Klik "Laman Baru" kemudian klik "Laman Kosong", untuk lebih jelasnya, silahkan perhatikan gambar dibawah ini :
Cara Membuat Daftar Isi Blog Secara Otomatis

Gambar 1.1

3. Kemudian pilih Mode HTML
http://zicblogger.blogspot.com/p/daftar-isi.html
4. Lalu copy kode script dibawah ini :
<div style="border: 1px solid #eee; height: 700px; overflow: auto; padding: 10px; width: 530px;">
<script src="http://widgetsitemap.googlecode.com/files/daftarisi.js"></script><script src="http://yoga-tc.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>
Keterangan :
Ganti kode yang berwarna merah ( yoga-tc ) : dengan alamat blog anda!

6. Kemudian anda letakan pada halaman kosong tadi,
Cara Membuat Daftar Isi Blog Secara Otomatis
Gambar 1.2

Keterangan gambar 1.2 :
1. Pilih mode HTML
2. Letakan kode pada halaman kosong
3. Berikan judul (terserah anda)
4. Klik "Publikasikan"


7. Selesai
Referensi : http://zicblogger.blogspot.com/ dan http://yoga-tc.blogspot.com/