Read more: Cara Membuat READMORE Otomatis di Blogspot http://ojelhtc.blogspot.com/2011/12/cara-membuat-readmore-otomatis-di.html#ixzz1hdcbARLj Under Creative Commons License: Attribution Non-Commercial Share Alike Chit Chat: Desember 2011

Senin, 26 Desember 2011

Cara Membuat Tab View Menu


TabUntuk 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 boxbeberapa 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 </head>

    <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>

  6. Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

    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.

    <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>

  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

SEMOGA SUKSES :)
»»  BACA SELENGKAPNYA...

Cara Meningkatkan Visitor dan Traffic Blog via Plipeo.com

Cara Meningkatkan Traffic dan Visitor via Plipeo.com, Sekarang sobat blogger tidak perlu khawatir, karena sudah adanya Layanan Social Traffic Exchange yang dikhususkan untuk para blogger yaitu Plipeo.com. Plipeo menghubungkan Blog sobat ke blog lainnya yang sudah menjadi jaringan dari Plipeo.com dan sudah banyak yang menggunakan layanan ini karena mampu meningkatkan Traffic hingga 300%! serta mendatangkan Real Visitor atau pengunjung yang benar-benar tertarget ke blog anda.


Oke deh sekarang langsung saja saya akan menjelaskan cara mendaftar agar cepat mendapat Traffic dan Visitor dari Plipeo.com atau layanan Traffic Exchange or Cara Meningkatkan Traffic dan Visitor via Plipeo.com untuk para sobat blogger sebagai berikut:

Silakan sobat persiapkan blog yang akan di daftarkan lalu silakan buka halaman Plipeo.com untuk mendafar atau bisa langsung mengunjungi link berikut http://plipeo.com/webmaster/signup.
Klik Daftar

  • Jika sudah pada halaman daftar silakan sobat isi data yang sesuai seperti Website di isi dengan Url blog, Nama, Email serta  dari blog sobat. dan Plipeo tidak membatasi traffic jadi semua blogger bisa mendaftar dan mendapatkan traffic.
Daftar Plipeo.com

  • Jika sobat sudah mendaftar maka akan langsung di terima menjadi member dari plipeo, dan langkah selanjutnya yaitu sobat wajib Memasang Widget dari Plipeo dengan mengunjungi halaman Widget Anda ambil code widget tersebut lalu pasang di Blog sobat, bisa di sidebar atau tempat lainnya dan jangan lupa untuk memilih kategori yang ingin di munculkan pada widget serta sedikit memodifikasi Widgetnya agar terlihat indah pada blog sobat
Halaman Widget

  • Setelah memasang Code Widget pada Blog sobat silakan sobat kirim artikel sobat dengan memilih Tambah Posting Anda, silakan isi Url, Judul ( Usahakan semenarik munkin dan berbeda pada blog sobat, deskirpsi artikel, Tag, lalu Url gambar agar artikel yang sobat masukan terlihat menarik lalu klik submit menyatakab artikel sobat itu original dan tidak sama dengan yang lainnya.
Kirim Artikel Sobat

  • Bila sobat sudah kirim artikel sobat maka team dari Plipeo.com akan mereview postingan serta widget yang ada di blog sobat, jika sudah benar artikel Tidak hasil dari Kopas ( Copy Paste ) dan widget terpasang maka artikel sobat akan langsung disebar ke jaringan plipeo.
itulah beberapa langkah untuk bergabung, mudah bukan? Layanan seperti ini sudah banyak di Eropa dan Plipeo.com satu-satunya penyedia layanan Traffic Exchange serupa di Indonesia. dan lihat gambar dibawah salah satu contoh blog yang menggunakan Plipeo mendapatkan traffic hingga 277%.
Traffic Hingga 277%!!



tambahan buat sobat blogger, saat ini plipeo sedang mengadakan sebuah kontes Review Plipeo.com jadi sobat hanya menulis artikel tentang mereka atau tutorial terserah sobatlah lalu masukan artikel sobat ke plipeo dengan memasukan ke kategori Support Us dan Total hadiah yaitu sebesar $100 untuk 2 pemenang. kabarnya akan ditambah hadiahnya. silakan lihat pengumumannya dihttp://blog.plipeo.com untuk keterangan lebih lanjut.
SEMOGA SUKSES :)
»»  BACA SELENGKAPNYA...

Cara Membuat READMORE atau BACA SELENGKAPNYA Otomatis di Blogspot

Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial Cara Membuat READMORE OTOMATIS Di Blog berikut ini....


PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

KEDUA, cari kode html berikut ini :
<data:post.body/> atau <p><data:post.body/></p>

ganti kode tersebut dengan kode di bawah ini :


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image
==> Summar img 430 = tinggi artikel terpenggal dengan image
==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...
SEMOGA SUKSES :)
»»  BACA SELENGKAPNYA...

Cara Pasang Iklan Di samping Kotak Komentar Blog

Cara Pasang Iklan Di samping Kotak Komentar Blog | tutorial blog kali ini membahas Cara Memasang atau Membuat Iklan Disamping Kotak Komentar , jadi buat yang suka blognya banyak iklan tidak ada salahnya mencoba cara ini,, karna menut saya sangat bagus dengan penempatan. Dan bagi sobat yang ingin Memasang Kotak Iklan Di samping Form Komentar, silahkan Expand template kamu, cari kode:


<iframe allowtransparency=’true’ class=’blogger-iframe-colorize blogger-comment-from-post‘ frameborder=’0&#8242; height=’410&#8242; id=’comment-editor’ name=’comment-editor’ src=” width=’100%’/>

Jika sudah ketemu, ganti kode tersebut dengan kode berikut:

<table border=’0&#8242; width=’600&#8242;><tr> <td align=’center’>ISI DENGAN KODE IKLAN</td> <td align=’center’><iframe class=’blogger-iframe-colorize blogger-comment-from-post’ frameborder=’0&#8242; height=’210&#8242; id=’comment-editor’ name=’comment-editor’ src=” width=’100%’/></td></tr></table>

Pastikan kode yang diganti adalah kode iframe yang kedua. Karena yang pertama adalah kode iframe form komentar untuk index mobile. Silahkan isi dengan kode iklan atau apa saja yang kamu suka. Dan jika itu iklan adsense, maka harus di parse dulu agar jalan. Untuk lebar tabel harus sesuai dengan lebar post body. Untuk value lainnya silahkan disesuaikan sendiri..

SEMOGA SUKSES :)
»»  BACA SELENGKAPNYA...

Cara Membuat Menu Tab View Widget

TabView Widget hadeeh ayo dong sayang Blog HTC kesayangan saya he,he,, Cara Membuat TabView Widget di BLogspot or Cara Membuat TabView Widget Pada Sidebar Blog or Cara Membuat Menu Tab View Widget 


ada Hari Ini Saya Akan Memberi Tau Teman Teman Bloggers Semua Tutorial Bagaimana Cara Membuat TabView Widget Di Blog, Tab View sendiri menurut saya adalah sebuah menu untuk meletakkan menu menu lainnya sehingga tidak memakan tempat pada template Blog kita baiklah langsung saja untuk melihat Demonya lihat pada Blog Ini


Kita Mulai Perhatikan Baik Baik Langkah Langkah Cara Membuat Tab View Di Bawah ini :
  • Langkah Pertama

  • Login ke akun Blogger kamu.

  • Dari halaman dashboard, pilih Edit HTML.

  • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk lebih mudah mencarinya.

  • lalu copy Script berikut dan letakkan diatas kode ]]></b:skin> tersebut

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #CCC; /* warna border menu */
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #A4A4A4; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /* warna background menu aktif */
color: #FFFFFF;
}

div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:url("http://i864.photobucket.com/albums/ab206/kibagus/th_bgtabview.gif"); /* 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;
font-size: 12px; /* besar hurup kotak utama */
}
  • Langkah Kedua, Setelah itu letakkan kode berikut dibawah kode ]]></b:skin>


<script src="http://sites.google.com/site/kibagusnet/x-design/tabview.js" type="text/javascript"/>
  • Lalu Simpan Hasil Editing Tersebut.

  • Langkah Ketiga

  • Pilih tab Elemen Halaman ( Page Element ).

  • Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.

Copykan script berikut dan letakkan pada kotak Content yang tersedia:


<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->

</div></div></form>

<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://kibagus-homedesign.blogspot.com/" target="_blank" title="Tabview Widget">HDesign-comm</a></div>

  • Keterangan :

Pada tulisan yang tercetak tebal dapat kamu ubah disesuaikan dengan kebutuhan. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai dengan isi blog kamu.

Selain itu kamu juga bisa menambahkan menu-menu lain ( lebih dari 3 ) asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.

SEMOGA SUKSES :)
»»  BACA SELENGKAPNYA...

Cara Membuat Scroll Pada Kotak Komentar

Cara Membuat Scroll Pada Kotak Komentar pada Kesempatan Malam Ini Saya Akan Memberitahukan Tips Dan Trik Cara Menambahkan Scroll pada Kotak Komentar Blog Dengan CSS atau Cara Memasang Scroll Pada Kolom Kotak KomentarMempunyai Blog dengan banyak pengunjung adalah hal yang menyenangkan karena itu merupakan tanda bahwa blog kita cukup populer, banyaknya pengunjung juga akan berimbas pada banyaknya komentar pada posting sehingga kadang panjang komentar dengan panjang posting lebih panjang kolom komentar.Lihat Demonya Pada Blog HTC 

Cara Memasang Scroll Pada Kolom Komentar Blog 
Untuk itu kita bisa mengatasi dengan memasang fungsi scroll pada kolom komentar sehingga tampilan blog lebih sederhana dan elegan, Maka Ikuti Cara Membuat Scroll Pada Kotak Komentar dibawah Ini :
  • caranya adalah sebagai berikut :
  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode dibawah ini ( tekan F3 untuk memudahkan mencari kode )


/* Comments
-------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;

letter-spacing:.2em;
color: $sidebarcolor;
}
...............dst........... s/d

#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

  • Tambahkan Kode Di Bawah Ini DIatas Kode #comments h4{
.comments {
height:300px;
overflow:auto;
}

  • Keterangan :
  • height:300px; tinggi kolom komentar sesuai dengan kebutuhan
  • overflow:auto; fungsi scroll yang akan muncul bila panjang komentar lebih dari 300px
  • Simpan dan lihat hasilnya...!
SEMOGA SUKSES :)
»»  BACA SELENGKAPNYA...