Home | Looking for something? Sign In | New here? Sign Up | Log out

Cara Membuat Menu Blogroll

Ternyata banyak juga yang bertanya mengenai blogroll yang saya gunakan karena mungkin hemat tempat. Dan mungkin karena sadar segalanya sekarang serba naik; baik BBM yang naik disusul harga kebutuhan pokok naik, juga ongkos angkutan umum yang ikut naik 30 hingga 50%, maka segalanya perlu diperhemat, termasuk pemasangan blogroll yang mesti diperhemat juga *beuh, ga nyambung* heuheu.
Saya tidak tahu harus menamai apa blogroll ini, tapi menurut keyword yang masuk dan pertanyaan yang saya terima diantaranya, cara membuat widget kotak untuk blogger, widget kotak blogroll untuk blogger, widget blogroll untuk blogger, tempat blogroll hemat, blogroll hemat tempat, kode html tempat blogroll, cara membuat blogroll hemat tempat, cara membuat widget kotak, cara membuat widget blogroll, blogroll wordpress, wp plugin blogroll, widget blogroll untuk wordpress (wp), dan sebagainya yang pasti untuk satu tujuan yaitu penghematan tempat di blog. :lol: memanfaatkan keyword prase ya om?. Bagaimanapun, widget blogroll ini memang hemat tempat.
Berikut ini tiga tipe contoh blogroll yang bisa Anda gunakan baik yang bernaung dibawah bendera blogger ataupun blog wordpress self hosted maupun dengan hosting wordpress (free). Dan widget blogroll ini hanya memerlukan tag HTML biasa dengan menggunakan semacam “kotak” kemudian diberi overflow dengan dibatasi width (lebar) dan height (tinggi) sehingga overflow pun berfungsi dengan baik jika link blog teman-teman Anda sudah begitu banyaknya. Tiga tipe tersebut adalah dengan border (garis tepi) tanpa border dan menggunakan warna background.
widget blogroll
Untuk membuat widget kotak blogroll tersebut yang Anda perlukan adalah tag HTML sebagai berikut,

Tag HTML blogroll dengan border (Blogroll 1)
<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 150px; height: 200px; text-align: center; background:#FFFFF;">

<a href="http://URL-BLOG" target="_blank">Tekslink 01</a><br/>

<a href="http://URL-BLOG" target="_blank">Tekslink 02</a><br/>

Link lainnya

</div>


Tag HTML blogroll tanpa border (Blogroll 2)

<div style="border: 0px; overflow: auto; width: 150px; height: 200px; text-align: center; background:#FFFFFF;">

<a href="http://URL-BLOG" target="_blank">Tekslink 01</a><br/>

<a href="http://URL-BLOG" target="_blank">Tekslink 02</a><br/>

Link lainnya

</div>


Tag HTML blogroll dengan background (Blogroll 3)
<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 150px; height: 200px; text-align: left; background:#FEA8A1;">

<a href="http://URL-BLOG" target="_blank">Tekslink 01</a><br/>

<a href="http://URL-BLOG" target="_blank">Tekslink 02</a><br/>

Link lainnya

</div>


Anda bisa mengubah lebar dan tinggi kotak widget blogroll tersebut dengan mengubah angka yang terdapat setelah width (lebar) dan height (tinggi) disesuaikan dengan ukuran sidebar template Anda. Lalu untuk align teks dan backgroundnya, Anda bisa mengubah left (kiri), right (kanan) atau center (tengah) setalah text-align: dan mengubah kode warna setelah background:# … disesuaikan dengan warna template Anda.

Cara Membuat Efek Kupu-Kupu

Hey semuanya, ketemu agi nih... Kali ni aku mau ngasih tau caranya buat efek kupu-kupu terbang di FS. Caranya mudah aja koq.. Gini lho, Copy kode di bawah ini :
<script language="JavaScript1.2" src="http://www.geocities.com/heri_sys89/kupu2.js"></script>
Terus paste kode tersebut di About Me ato Who I want to meet. Uda gitu thok...
Jangan lupa di save...!! Gimana kayaknya berhasil. Jangan lupa ninggalin comment buat aku ya...

Kalo buat Blog (Blogspot), cara yang paling gampang :
- Log In ke Blogger
- Masuk ke Tata Letak
- Trus Tambah gadget, pilih HTML/ Java Script
- Trus copy-paste kode di atas tadi ...
- Kalo udah, Save.....

Efek bunga Bertaburan

script Efek Blog Bertaburan Bunga : Jika bosan dengan efek yang telah digunakan selama ini, kita dapat mencoba script yang lain, seperti yang akan Tips dan Trik Blog sampaikan berikut ini. Dengan memasang script tersebut, kita akan mendapatkan efek bunga bertaburan pada blog kita. Jika tertarik, silakan ikuti tipsnya berikut ini.

Langkah-langkah untuk memasang script tersebut adalah sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML
Kedua, cari dan temukan kode <body>
Ketiga, kemudian letakkkan script berikut ini di bawah kode <body> tersebut.

<script language=”Javascript” src=”http://www.geocities.com/yono_pati/bunga.js”> </script>

Keempat, Simpan Template
Kelima, selesai

Jika langkah-langkah tersebut dirasa kurang praktis, kita dapat menambahkan script tersebut pada gadget, dengan langkah-langkah seperti di bawah ini.

Pertama, login account blogger hingga masuk Dasbor >> Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript >>
Kedua, copykan script yang telah disebutkan di atas tersebut.
Ketiga, simpan perubahan
Keempat, selesai

Sekarang, refresh blog kita dan pastikan blog kita sudah “bertaburan bunga”. Oh, iya untuk tips selanjutnya, Tips dan Trik Blog akan mengetengahkan script yang membuat blog bertaburan “bunga bank”, pasti lebih seru, he,..he,..

Cara Mudah Membuat Tab View

sobat blogger pada postingan kali ini saya akan memberikan tips cara membuat Tab View.
meskipun ini sudah banyak di internet tapi saya akan memberikan tips ini buat sobat blogger.

Berikut langkah-langkahnya

1.Login ke blogger dengan ID anda

2.Lalu Klik Menu Templates

3.Klik Sub Menu Edit HTML

4.Pada Kotak Edit HTML cari Kode ]]>

5.Lalu Copy Kode berikut dan Pastekan diatas kode ]]>
/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

6.Lalu letakkan kode berikut dibawah kode <head>
ini kodenya:
 <script
src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js'
type='text/javascript'/>

7.Save Template 
8.Pergi ke halaman Element Halaman 
9.Klik Add Widget Element 
10.Pilih Menu HTML/Java Script 
11.Lalu Copy kode berikut
<form
action="tabateonsoft.html" method="get"><br>
<div class="Tabateonsoft" id="Tabateonsoft"><br>
<div class="TFs"><br>
<a>tab1</a><br>
<a>tab2</a><br>
<a>tab3</a><br>
<a>tab4</a><br>
</div><br>
<div class="Pages"><br>
<div class="Page"><!-- Tab --><br>
<div class="floor"><br>
Disini letakkan kode untuk tab 1 anda<br>
</div><br>
</div><!-- end Tab --><br>
<div class="Page"><!-- Tab --><br>
Disini letakkan kode untuk tab 2 anda<br>
</div><!-- end Tab --><br>
<div class="Page"><!-- Tab --><br>
<div class="floor"><br>
Disini letakkan kode untuk tab 3 anda<br>
</div><br>
</div><!-- end Tab --><br>
<div class="Page"><!-- Tab --><br>
<div class="floor"><br>
Disini letakkan kode untuk tab 4 anda<br>
</div><br>
</div><!-- end Tab --><br>
</div><br>
</div><br>
</form><br>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>
12.Simpan,selesai deh

Efek Daun Dan Bintang Berjatuhan Di Blog

Pada postingan sebelumnya saya telah membuat artikel tentang efek salju yang berterbangan di halaman blog. Sekarang saya akan coba lagi membuat postingan yang intinya tidak jauh-jauh dari efek salju tersebut untuk memperindah halaman blog anda.

Pada postingan kali ini tiba giliran efek daun kering berguguran dan efek bintang berjatuhan yang akan saya terbitkan.
Jika anda tertarik untuk menambah efek tersebut pada halaman site anda, silahkan ikuti langkah-langkah berikut ini :
1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan salah satu script di bawah ini ke kolom Konten
Efek daun berguguran, dengan jumlah 20 buah daun kering
<script src=”http://h1.ripway.com/pinginbelajar/daunberguguran/20.js” type=”text/javascript”></script>
Efek daun berguguran, dengan jumlah 30 buah daun kering
<script src=”http://h1.ripway.com/pinginbelajar/daunberguguran/30.js” type=”text/javascript”></script>

Efek bintang berjatuhan, dengan jumlah 20 buah bintang
<script src=”http://h1.ripway.com/pinginbelajar/bintangberjatuhan/20.js” type=”text/javascript”></script>
Efek bintang berjatuhan, dengan jumlah 30 buah bintang
<script src=”http://h1.ripway.com/pinginbelajar/bintangberjatuhan/30.js” type=”text/javascript”></script>
7. Klik Simpan

Efek Hantu Gentayangan Di blog

Jika kalian lihat Hantu pada bergentayangn di blog2
Berikut cara-cara untuk membuatnya:
1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
Lalu masukan script di bawah ini
<script language="JavaScript1.2" src="http://kangfatur.googlecode.com/files/hantu.js"></script>
6.Simpan

Efek Bintang Berjatuhan

Jika kalian lihat kelelawar berterbangan di blog di blog2
Berikut cara-cara untuk membuatnya:
1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
Lalu masukan script di bawah ini
<!-- Star Fall effect by http://www.oktri.co.cc -->
<script type='text/javascript'>
//<![CDATA[
//Configure below to change URL path to the snow image
var snowsrc="http://img6.imageshack.us/img6/4945/pinginbelajar.gif";
// Configure below to change number of snow to render
var no =20;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = "0";
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

6.Simpan

Hati Berjatuhan

Jika kalian lihat Hati berjatuhan di blog2
Berikut cara-cara untuk membuatnya:
1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
Lalu masukan script di bawah ini
<script src='http://anas.ku93.googlepages.com/lovingheart.js'>
</script>
6.Simpan

Efek Salju Di Blog

Jika kalian lihat ada seperti Salju yang turun teruz menerus di blog2
Berikut cara-cara untuk memembuat efek salju
1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
Lalu masukan script di bawah ini
<script src="http://alien.keren.googlepages.com/klinikblog.snow.js" type="text/javascript"></scri></script>
6.Simpan

Mouse Diikuti Bintang


Jika kalian lihat mouse di blog2 selalu diikuti oleh bintang2 kecil.
Berikut cara-cara untuk meng "custom" mouse di Blogmu:
1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. "Pilih salah satu script di bawah ini" dan pastekan ke dalam kolom Konten:
Bintang biru<script src="http://denisahlan.netau.net/bintang.biru.js" type="text/javascript"></script>
Bintang hijau<script src="http://denisahlan.netau.net/bintang.hijau.js" type="text/javascript"></script>
Bintang merah<script src="http://denisahlan.netau.net/bintang.merah.js" type="text/javascript"></script>
Bintang putih<script src="http://denisahlan.netau.net/bintang.putih.js" type="text/javascript"></script>
Bintang ungu<script src="http://denisahlan.netau.net/bintang.ungu.js" type="text/javascript"></script>
7. Simpan

Advertise

Related Posts Plugin for WordPress, Blogger...

Blog Archieve