shoutmix
Mungkin sahabat blogger hari ini mengalami masalah pada shoutmix, yakni url alamat kita kita terdeteksi. Akibatnya, nama kita pada shoutmix tidak berlink sehingga blogger lain yang berpapasan di tengah jalan saat blogwalking tidak bisa mampir. Soal apa penyebabnya saya tidak tahu pasti, namun ada beberapa langkah yang bisa Anda lakukan.
1. Prune Messages
Untuk membetulkan shoutmix di blog Anda, Anda bisa mengatasinya dengan cara menghapus semua pesan yang pernah masuk ke shoutmix Anda. Kita refresh sehingga shoutmix kita seperti baru.
Caranya adalah:
* Login ke shoutmix.com
* Pada bagian kotak General pilih Prune Messages
shoutmix
* Pilih Delete All Messages
shoutmix
* Masukkan password lalu klik Apply
Tapi ini tidak menjamin menyebuhkan dalam waktu lama.
2. Ganti Sementara Dengan Fasilitas Lain
Dengan cara di atas Anda bisa memasukkan link lagi di shoutmix Anda, namun bisa jadi secara berkala akan error lagi. Silahkan Anda lakukan beberapa kali. Namun, bagi yang gregetan karena error selalu berulang saya sarankan Anda mengganti sementara shoutmix Anda dengan chat lain seperti cbox.
Setelah shoutmix kembali normal Anda mempunyai pilihan untuk kemabali memasang shoutmix atau tetap pada widget pengganti seperti cbox.
3. Mirip Shoutmix di http://shoutbox.widget.me
Widget ini mirip shoutmix dan ternyata normal, bagi Anda yang ingin silahkan:
* Menuju link http://shoutbox.widget.me/
* Copy kode dari sana dan gantikan sementara shoutmix Anda
Anda bisa atur tinggi dan lebar disana namun tidak bisa memodifikasinya. Dan juga tidak bisa menambahkan smile.
4. Upgrade ke Premium
Bagi Anda yang ingin fasilitas lebih tentu selayaknya upgrade ke premium. Dipastikan akan mendapatkan pelayanan lebih dan prioritas dari shoutmix.com
Hal di atas dapat membenahi chat Anda. Orang bisa berpromosi di blog Anda lagi. Lalu bagaimana cara Anda berpromosi?
5. Meninggalkan URL dalam Pesan
Anda bisa blogwalking ke shoutmix orang dengan cara meningalkan link blog Anda lewat pesan. Syaratnya jangan tuliskan url blog Anda dengan diawali www atau http://
Tuliskan saja misal, "Silahkan mampir ke --->>> ucuhasasuke.blogspot.com"
6. Blogwalking ke Shoutmix Premium
Anda bisa berpromosi ke blog-blog dengan fasilitas shoutmix premium yang tidak mengalami masalah seperti:
* Kolom Tutorial [kolom-tutorial.blogspot.com]
* O-om [o-om.com]
7. Blogwalking ke Blog Pengguna Chat Selain Shoutmix
Blogwalkinglah ke blog-blog lain yang menggunakan fasilitas chat selain shoutmix, seperti cbox. Anda akan banyak menemukannya di blog-blog luar negeri walaupun juga telah banyak blogger Indonesia menggunakannya.
8. Berkomentar
Jika Anda tidak bisa blogwalking cara yang dapat Anda lakukan dengan meninggalkan jejak komentar. Pergilah ke blog teman Anda dan berkomentarlah. Menambah backlink sekaligus menyapa untuk mendapat kunjugan.
Wednesday, 3 November 2010
Cara membuat Shoutmix Tersembunyi
Cara membuat Shoutmix Tersembunyi
Bagaimana yah caranya membuat buku tamu tersembunyi atau shoutmix tersembunyi, ini dia langkah-langkah dan caranya :
1. Masuk ke account Blogger kamu, pilih Layout; kemudian Page Elements;
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTM01MtLgGMph-TCzZqbUPavkR4dCuV5t97JUAweyu70wLbufsGWeFfe-HHF8dq_ljz9FcX63gmMgVzkFJBk7MOiJnt3p-ljhMlHIAtAA_E1ZPRq5Btc80DAupjWrXCd0JJYhK7krdUtCv/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="btab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- Ganti ini dengan kode buku tamu kamu -->
<br/>
<br/>
< href="http://ucuhasasuke.blogspot.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
# Pada kode di atas, cari kode <!-- Ganti ini dengan kode buku tamu kamu --> dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya,
# Kamu juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah kamu.
Bagaimana yah caranya membuat buku tamu tersembunyi atau shoutmix tersembunyi, ini dia langkah-langkah dan caranya :
1. Masuk ke account Blogger kamu, pilih Layout; kemudian Page Elements;
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTM01MtLgGMph-TCzZqbUPavkR4dCuV5t97JUAweyu70wLbufsGWeFfe-HHF8dq_ljz9FcX63gmMgVzkFJBk7MOiJnt3p-ljhMlHIAtAA_E1ZPRq5Btc80DAupjWrXCd0JJYhK7krdUtCv/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="btab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- Ganti ini dengan kode buku tamu kamu -->
<br/>
<br/>
< href="http://ucuhasasuke.blogspot.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
# Pada kode di atas, cari kode <!-- Ganti ini dengan kode buku tamu kamu --> dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya,
# Kamu juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah kamu.
Cara Mendapatkan Dolar dari Ziddu
ziddu
Artikel tentang belajar bisnis online tidak hanya menarik, kadang juga bisa bikin ngiler, hehehe. Apabila kita meng-apload file bisa dapat dolar, mana mungkin? Tapi itu menjadi kenyataan apabila kita mengapload file di Ziddu. Sesuai slogannya Upload —>> Share —>> Earn, maka kita akan mendapatkan dolar setiap ada orang yang mendownload file yang telah kita apload. Uang yang kita dapat tidak banyak sih, tapi ini layak di coba bagi orang yang sedang belajar bisnis online seperti saya. Setiap ada orang yang mendownload, kita akan mendapatkan $0,001. Kok koma nol nya banyak sekali Mas? hehehe. Apabila 1 hari saja ada 1000 orang yang download maka kita akan mendapatkan $1, jadi kalo 1 bulan kita akan mendapatkan $30. Lumayankan....
Apa keuntungan kita mendaftar di Ziddu?
* Yang penting dan yang paling penting, 100% Gratis, :-)
* Unlimited Disk Space (Mau upload sebanyak apapun silakan)
* Membarikan dolar apabila ada yang mendownload file yang kita upload di Ziddu.
* Oia, Ziddu juga akan memberikan tambahan $0.05 apabila ada orang yang mendaftar dengan referal anda (Setelah upload file pertamanya)
Tunggu apa lagi ayo segera mendaftar di Ziddu....
Untuk mendaftar silakan buka link disamping Daftar Ziddu (ref: Makasih ya Sobat ^_^) Soal cara pendaftaran sangat mudah kok, sobat pasti bisa.
Selamat belajar berbisnis online.....
Artikel tentang belajar bisnis online tidak hanya menarik, kadang juga bisa bikin ngiler, hehehe. Apabila kita meng-apload file bisa dapat dolar, mana mungkin? Tapi itu menjadi kenyataan apabila kita mengapload file di Ziddu. Sesuai slogannya Upload —>> Share —>> Earn, maka kita akan mendapatkan dolar setiap ada orang yang mendownload file yang telah kita apload. Uang yang kita dapat tidak banyak sih, tapi ini layak di coba bagi orang yang sedang belajar bisnis online seperti saya. Setiap ada orang yang mendownload, kita akan mendapatkan $0,001. Kok koma nol nya banyak sekali Mas? hehehe. Apabila 1 hari saja ada 1000 orang yang download maka kita akan mendapatkan $1, jadi kalo 1 bulan kita akan mendapatkan $30. Lumayankan....
Apa keuntungan kita mendaftar di Ziddu?
* Yang penting dan yang paling penting, 100% Gratis, :-)
* Unlimited Disk Space (Mau upload sebanyak apapun silakan)
* Membarikan dolar apabila ada yang mendownload file yang kita upload di Ziddu.
* Oia, Ziddu juga akan memberikan tambahan $0.05 apabila ada orang yang mendaftar dengan referal anda (Setelah upload file pertamanya)
Tunggu apa lagi ayo segera mendaftar di Ziddu....
Untuk mendaftar silakan buka link disamping Daftar Ziddu (ref: Makasih ya Sobat ^_^) Soal cara pendaftaran sangat mudah kok, sobat pasti bisa.
Selamat belajar berbisnis online.....
Cara Mendaftar dan Pasang Iklan Kumpul Blogger
uang dari blog
Postingan ini dibuat agar memudahkan kita semua untuk mendaftar dan memasang iklan PPC (pay per click) kumpulblogger pada blog/website kita. Sehingga blog/website kita dapat menghasilkan uang untuk kita dengan adanya orang yang meng-klik iklan yang terpasang pada blog/website kita.
Cara mendaftar di kumpulblogger pun langsung bisa diterima. Tetapi perlu diingat, walaupun mudah mendaftar bukan berarti kita boleh melakukan kecurangan. Sebaiknya peraturan dalam kumpulblogger juga dibaca dengan teliti agar tidak merugikan pihak manapun. Perlu ditekankan, dari kumpulblogger, kita bisa meraih sejumlah uang dengan tanpa modal alias Gratis !!!
Cara mendaftar dan pasang iklan di kumpul blogger adalah sebagai berikut :
1. Mendaftar dulu Di sini
2. Klik Register Now
3. Pada kotak isian e-mail, isi dengan e-mail kamu.
4. Buka E-mail kamu, lihat passwordnya.
5. Login dengan ID kamu (ID merupakan e-mail kamu yang dikirimi password)
6. Jika sudah login di kumpulblogger, pilih Tambah Blog.
7. Isi formulir sesuai Blog kamu.
8. Setelah selesai, klik Script Text Advertising untuk Blog kamu
9. Copy kode yang sudah disediakan.
10. SIGN IN kedalam Blog anda
11. Pilih menu “tata letak (Layout)”
12. Pilih “tambah gadget (add page element)”
13. Pilih “HTML/Java Script”
14. Paste kode/script tersebut
15. Save
16. Silahkan buka kembali blog anda, maka iklan akan secara otomatis muncul kedalam blog anda. Hanya tinggal menunggu ada orang yang mengklik iklan tersebut maka pundi-pundi uang akan mengalir!!!
~~~Selamat Mencoba, Semoga Succes ~~~
Postingan ini dibuat agar memudahkan kita semua untuk mendaftar dan memasang iklan PPC (pay per click) kumpulblogger pada blog/website kita. Sehingga blog/website kita dapat menghasilkan uang untuk kita dengan adanya orang yang meng-klik iklan yang terpasang pada blog/website kita.
Cara mendaftar di kumpulblogger pun langsung bisa diterima. Tetapi perlu diingat, walaupun mudah mendaftar bukan berarti kita boleh melakukan kecurangan. Sebaiknya peraturan dalam kumpulblogger juga dibaca dengan teliti agar tidak merugikan pihak manapun. Perlu ditekankan, dari kumpulblogger, kita bisa meraih sejumlah uang dengan tanpa modal alias Gratis !!!
Cara mendaftar dan pasang iklan di kumpul blogger adalah sebagai berikut :
1. Mendaftar dulu Di sini
2. Klik Register Now
3. Pada kotak isian e-mail, isi dengan e-mail kamu.
4. Buka E-mail kamu, lihat passwordnya.
5. Login dengan ID kamu (ID merupakan e-mail kamu yang dikirimi password)
6. Jika sudah login di kumpulblogger, pilih Tambah Blog.
7. Isi formulir sesuai Blog kamu.
8. Setelah selesai, klik Script Text Advertising untuk Blog kamu
9. Copy kode yang sudah disediakan.
10. SIGN IN kedalam Blog anda
11. Pilih menu “tata letak (Layout)”
12. Pilih “tambah gadget (add page element)”
13. Pilih “HTML/Java Script”
14. Paste kode/script tersebut
15. Save
16. Silahkan buka kembali blog anda, maka iklan akan secara otomatis muncul kedalam blog anda. Hanya tinggal menunggu ada orang yang mengklik iklan tersebut maka pundi-pundi uang akan mengalir!!!
~~~Selamat Mencoba, Semoga Succes ~~~
membuat menu vertikal
Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');
Pilihan Warna menu vertikal :
blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif
3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home<a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li>lt;a href="http://x-template.blogspot.com" >Free Template</a></li>
<li>lt;a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>
Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.
Dah gitu aja. Gampang kan???? :D
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');
Pilihan Warna menu vertikal :
blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif
3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home<a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li>lt;a href="http://x-template.blogspot.com" >Free Template</a></li>
<li>lt;a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>
Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.
Dah gitu aja. Gampang kan???? :D
cara membuat menu tab view
Karena sering ditanya tentang bagaimana caranya membuat Tab VIew (Biasanya nanyanya gini: "Mas cara membuat menu yg kayak punya mas gmn? yg ada "Tips & Trik", "Lain-lain", "Terbaru", "Komentar" itu lho). Ya kan? hayo ngaku... Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak. Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini juga bukan dari o-om lho :D
Tab view itu contohnya seperti ini :
Beginilah cara untuk membuat menu tab view tersebut
1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;
}
4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>
<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>
6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; 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>
Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.
Tab view itu contohnya seperti ini :
Beginilah cara untuk membuat menu tab view tersebut
1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;
}
4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>
<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>
6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; 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>
Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.
cara membuat menu horizontal
Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:
Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:
pertama-tama kamu harus punya gambar kayak gini nih:
dan
kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.
blackleft.gif blackright.gif
greenleft.gif greenright.gif
redleft.gif redright.gif
unguleft.gif unguright.gif
yellowleft.gif yellowright.gif
blueleft.gif blueright.gif
whiteleft.gif whiteright.gif
Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya:
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya
/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;
background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;
background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;
Mudeng nggak loe :D
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini
<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a>lt;/li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a"</li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :
<div id="content-wrapper">
caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya
6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>
teru ganti text yang berwarna hijau sihingga menjadi seperti ini:
<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>
terus di Save
Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.
hasilnya pasti akan berbeda-beda di setiap template.
kalo berhasil berarti kamu pinter, kalo gagal berarti kamu kurang pinter :r coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, jangan cuma di plototin. OK BOZ, Good luck.....
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:
Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:
pertama-tama kamu harus punya gambar kayak gini nih:
dan
kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.
blackleft.gif blackright.gif
greenleft.gif greenright.gif
redleft.gif redright.gif
unguleft.gif unguright.gif
yellowleft.gif yellowright.gif
blueleft.gif blueright.gif
whiteleft.gif whiteright.gif
Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya:
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya
/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;
background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;
background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;
Mudeng nggak loe :D
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini
<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a>lt;/li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a"</li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :
<div id="content-wrapper">
caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya
6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :
<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>
teru ganti text yang berwarna hijau sihingga menjadi seperti ini:
<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>
terus di Save
Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.
hasilnya pasti akan berbeda-beda di setiap template.
kalo berhasil berarti kamu pinter, kalo gagal berarti kamu kurang pinter :r coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, jangan cuma di plototin. OK BOZ, Good luck.....
Subscribe to:
Posts (Atom)