Posts tagged ‘blog’

21 Januari 2010

Membuat tabview pada blog


Membuat widget tabviewDari anda melihat gambar disamping ini saja,anda pasti sudah mengerti apa yang saya maksud dari multi halaman/multi tab tersebut.

Yup! Membuat Widget sederhana yang bertujuan untuk menghemat tempat,sekaligus menambah kerapian dari blog/web tersebut.

Selain itu,pengunjung tidak merasa lelah menaikan maupun menurunkan scrollbar hanya untuk sekedar menari status dari blog tersebut.

Nah! kesempatan kali ini,akan membahas tentang widget multi tab tersebut.
Sebenarnya artikel ini sudah di publikasikan oleh Mas Herman di artikelnya ’Menambahkan Widget Tab View Pada Blog’.

Pelajaran Blog tanpa mengurangi etika blogging,akan menjabarkannya lagi.
Sebenarnya sangat sederhana dalam membuat widget bertab-tab ini,untuk yang belum tahu cara membuatnya,anda bisa ikuti lagkah berikut:

Cara Membuat Multi Halaman

Pergilah ke Dashboard,lalu pilih Tata Letak,kemudian pilih Add New Widget/Tambah Gadget/Element Baru,pilih HTML/Javascript.

Letakkan kode berikut:

<style type=”text/css”>
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #222222; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: “Arial, Helvetica, sans-serif”, Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action=”tabview.html” method=”get”>
<div id=”TabView”>
<div style=”width: 385px;”>
<a><span style=”color:white”>TAB 1</span></a>
<a><span style=”color:white”>TAB 2</span></a>
<a><span style=”color:white”>TAB 3</span></a>
</div>
<div style=”width: 252px; height: 180px;”>

<div>
<div>
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 1
</div>
</div>

<div>
<div>
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2
</div>
</div>

<div>
<div>
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>

<script style=”text/javascript” src=”http://h1.ripway.com/forantum/javascript/tabview.js”></script&gt;
<script type=”text/javascript”>tabview_initialize(‘TabView’);
</script>

Untuk kode yang berwarna biru ubahlah dan gantilah sesuai keinginan anda,sedangkan kode yang berwarna merah,hanya sebuah penjelasan dari masing-masing kode.

Sekarang tinggal menyisipkan kode-kode html yang ingin anda letakkan pada masing-masing tab.
Anda bisa meletakkan seperti,kode Shout,Recent Comment,Blogroll dll.

Semoga berhasil
Tag: ,
2 Januari 2010

Cara membuat polling di blog


kali ini coba saya tuliskan bagaimana cara membuat Polling di Sidebar WordPress baik di Main sidebar ataupun right sidebar.

Biasanya mungkin tmpilan polling berada pada isi halaman atau isi tulisan setelah kita menekan ADD POLL untuk membuat polling. Lalu bagaimana menampilkan Polling berada di SIDEBAR ??

addpoll

  • Buatlah tulisan baru lalu klik bagian ADD POLL  pada bulatan berwarna merah
  • ketikan pertanyaan polling yang direncanakan, lalu isi pilihan jawaban bisa 4 , 5 atau lebih, kemudian klik SEND EDITOR, maka akan muncul kode POLLING seperti ini

polldady

  • Tulisan tersebut jangan di terbitkan, Klik saja SAVE DRAFT.
  • Selanjutnya buatlah WIDGET, dengan mengklik APPEARENCE, Klik WIDGET, klik Tambah Pada TEKS. copykan kode Polling diatas dan Paste ke dalam Widget Teks.

jejakpendapat

akhirnya…. kita dapat memiliki Polling yang ditempatkan dibagian SIDEBAR….. ok selamat mencoba …

Tag: ,
22 November 2009

Cara Memasang search engin pada blog


Search engin?.. apa to?… itu lo kota buat nyari2 artikel pada blog…iya! bener sekali,itulah yang ane maksud, kadang template yang kita pakai tidak ada fasilitas yang satu ini, jadi buat sobat yang gk punya mesin pencari pada blognya gk usah khawatir ya…simak saja tutorial yang satu ini.

Langsung saja kopi kode dibawah ini:



<form id=”searchform” action=”http://BlogAnda.blogspot.com/search&#8221; name=”searchform” method=”get”><br /><input id=”s” onfocus=”if (this.value == ‘cari di blog ini . . .’) {this.value = ”;}” value=”cari di blog ini . . .” name=”q” onblur=”if (this.value == ”) {this.value = ‘cari di blog ini . . .’;}” type=”text”> <input id=”searchsubmit” value=”Search” type=”submit”> </form>



caranya ialah sbb:
1. masuk ke blogger.com dan login
2. masuk ke tab “layout: atau “tata letak”
3. pada tab “elemen halaman” atau “page element” klik “add gadget” atau “tambah gadget”
4. pilih “HTML/JavaScript”
5. pada textbox “content” atau “konten” paste kode yg disediakan
6. ganti “bloganda.blogspot.com” dengan alamat sesuai blog anda
7. silahkan diberi judul atau tidak, tekan “save” atau “simpan”