serba-serbi

Sabtu, 25 Desember 2010

Cara Membuat Share Artikel

Posted by serba-serbi on 13.49

Pada setiap wibsite banyak kita jumpai kolom untuk share artikel, baik untuk diri sendiri atau di share keteman. Hal ini bagus buat blog atau wibesite agar lebih banyak dilihat dan dikenal orang.
Seperti contoh dibawah ini.

Share melalui:

Jika anda berminat, ikuti langkah-langkah berikut ini:
Login ke blogger anda, kemudian pilih Rancangan, setelah itu klik Elemen Laman. Klik Tambah Gadget kemudian pilih HTML/JavaScript lalu masukkan kode dibawah ini kedalam kolom HTML/JavaScript,

anda tinggal mengganti tulisan yang berwarna merah dengan alamat URL blog anda.

kemudian klik Simpan.

Selamat mencoba

Baca Juga Artikel Lain Berikut ini:

* Cara Menambahkan Tampilan Jam Pada Blog
* Cara Membuat Tulisan Berkedip-kedip
* Cara Menambah Image Pada Link Download
* Membuat Tulisan Bergerak
* Cara Mengganti Template Pada Blogspot
* Cara Menambahkan Gambar Slideshow Pada Blog
* Menambahkan Dafter Isi Pada Blog
* Menambahkan Tampilan Video Kedalam Blog
* Cara Membuat Menu Dropdown Standart
* Cara Membagi Postingan Menjadi Dua Kolom
* Cara Merubah Domain Dari Blogspot Menjadi .co.cc
* Memberi Background Warna Pada Tulisan Postingan
* Cara Membuat Pop-up
* Membuat Link Dalam Gambar
* Cara Membuat Kotak Tabel Dalam Postingan
* Cara Membuat Menu Drop Down Menggunakan CSS Menu Maker
* Membuat Kolom Scroll
* Cara Membuat Share Artikel
* Cara Membuat Text Area dan Textbox Area Berfasilitas Select All
* Cara Membuat Readmore
* Cara Membuat Iklan Melayang

Cara Membuat Text Area dan Textbox Area Berfasilitas Select All

Posted by serba-serbi on 12.56

Apakah anda pernah dengar atau membaca tentang Text Area dan Textbox Area.
Text Area dan Textbox Area mempunyai fungsi yang sama yaitu sebagai tempat menyimpan data dalam bentuk text maupun kode HTML/Javascript, baik di dalam postingan maupun di sidebar blog. Manfaat lain dari Text Area maupun Textbox Area adalah untuk menghemat halaman posting agar tidak terlalu panjang.

Berikut contoh dari Text Area:

Contoh pengguna'an Textbox Area:

KLIK "SELECT ALL" UNTUK MELAKUKAN COPY PASTE

Adapun Cara Membuat Text Area dan Textbox Area Berfasilitas Select All adalah masukan kode di bawah ke dalam posting atau sidebar blog Anda. Berikut ini kodenya:

1. Text Area:

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width:200px; height:30px;" name="txt"> disini tempat memasukkan kode / text anda</textarea></p></form>

2. Textbox Area:

Keterangan:

* Width/Cols adalah lebar Text Area/Textbox Area;
* Height/Rows adalah tinggi Text Area/Textbox Area;
* disini tempat memasukan kode / text anda, disitulah tempat Anda menyimpan text atau kode

Selamat mencoba

Baca Juga Artikel Lain Berikut ini:

Cara Membuat Readmore

Posted by serba-serbi on 12.19

Readmore atau Baca Selengkapnya pada postingan blog secara otomatis, adalah untuk menunjukkan bahwa postingan tersebut masih panjang atau masih ada terusanya. Fungsi dari Readmore itu sendiri adalah memperpendek postingan agar tidak terlalu panjang.Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik. Banyak berbagai cara untuk membuat Readmore dan dengan cara yang berbeda-beda. Ini adalah salah satu trik untuk membuat Readmore secara otomatis, caranya ikuti langkah berikut ini:

Pertama, silakan masuk ke acount www.blogger.com, kemudian pilih Rancangan, selanjutnya pilih Edit HTML, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template"

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

Langkah 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 != "item"'>

</script>

<a expr:href='data:post.url'>»»  READMORE...</a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><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...

Langkah ketiga kemudian klik Save Template

Selanjutnya anda bisa melihat hasil Readmore pada postingan anda.

selamat mencoba

Baca Juga Artikel Lain Berikut ini:

CARA MEMBUAT IKLAN MELAYANG

Posted by serba-serbi on 17.46

Pernah kita jumpai tampilan teks atau gambar yang tampilanya melayang pada sebuah blog atau website yang kebanyakan masih berhubungan dengan iklan. Nah, untuk postingan kali ini akan saya uraikan tentang cara membuat iklan melayang pada blog atau website.

Sudah banyak cara-cara untuk membuat tampilan tersebut, bahkan banyak yang lebih bagus lagi, dan ini adalah salah satu caranya.

Langkah pertama seperti biasa login dahulu ke www.blogger.com, selanjutnya pilih Rancangan, setelah itu klik Elemen Laman. Langkah selanjutnya klik Tambah Gadget kemudian pilih HTML/JavaScript. Berikutnya copy pastekan kode berikut dibawah ini kedalam kolom tersebut, kemudian klik Simpan.

#gb{

position:fixed;

top:10px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbcontent{

float:right;

border:2px solid #A5BD51;

background:#ffffff;

padding:10px;

}

</style>

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.top = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

.:[Close][Klik 2x]:.

</a>

</div>

disini tempat meletakkan gambar, teks atau URL iklan anda

</script>

Selamat mencoba......

Baca Juga Artikel Lain Berikut ini:

Cara Membuat Kotak Tabel Pada Postingan

Posted by serba-serbi on 18.46

Berikut adalah Langkah-langkah dan kode untuk membuat kotak tabel pada postingan.
Untuk membuat kotak dalam postingan, kita harus menggunakan kode HTML <table> ..... </table> yang didalamnya terdapat berbagai atribut sepeti berikut ini:

    * bordercolor --> warna dari garis tabel
    * bgcolor --> warna dari background tabel
    * cellpadding --> jarak antara tulisan dengan garis luar tabel
    * cellspacing --> jarak antar tulisan
    * border --> ketebalan garis pinggir tabel

          * dotted --> garis titik putus-putus
          * dashed --> garis datar putus-putus
          * double --> garis rangkap dua

    * align --> posisi dari isi tabel, bisa kiri, tengah, atau kanan
    * width --> lebar tabel
    * height --> tinggi tabel

<table border="1" style="width: 250px;">
<tbody>
<tr>
<td>
Isi Tabel
</td>
</tr>
</tbody></table>

hasilnya seperti ini

Isi Tabel

<table border="7" style="width: 400px;">
<tbody>
<tr bgcolor="#99cc00">
<td align="center">
Isi Tabel
</td>
</tr>
</tbody></table>

hasilnya seperti ini

Isi Tabel

<table width="400" border="7">
<tr bgcolor="#99CC00">
<td align="center">
Kolom 1 Baris 1
</td>
<td align="center">
Kolom 2 Baris 1
</td>
</tr>
</table>

hasilnya seperti ini

Kolom 1 Baris 1

Kolom 2 Baris 1

<table border="5" bordercolor="blue" style="width: 400px;">
<tbody>
<tr bgcolor="#33cccc">
<td align="center">
Kolom 1 Baris 1
</td>
<td align="center">
Kolom 2 Baris 1
</td>
</tr>
<tr bgcolor="#33cccc">
<td align="center">
Kolom 1 Baris 2
</td>
<td align="center">
Kolom 2 Baris 2
</td>
</tr>
<tr bgcolor="#33cccc">
<td align="center">
Kolom 1 Baris 3
</td>
<td align="center">
Kolom 2 Baris 3
</td>
</tr>
</tbody></table>

hasilnya seperti ini

Kolom 1 Baris 1	Kolom 2 Baris 1
Kolom 1 Baris 2	Kolom 2 Baris 2
Kolom 1 Baris 3	Kolom 2 Baris 3

Selamat Mencoba...

Baca Juga Artikel Lain Berikut ini:

Membuat Link Dalam Gambar

Posted by serba-serbi on 18.12

Tujuan membuat link dalam gambar adalah supaya pengunjung lebih tertarik karena dari gambar ataupun tulisan yang ada pada tampilan gambar tersebut. Link dalam gambar banyak kita jumpai pada iklan-iklan, dari gambar dan tampilan yang menarik sehingga dapat menarik minat pengunjung.

Adapun cara membuatnya adalah sebagai berikut:
Langkag pertama Upload sebuah gambar untuk mendapatkan kode URL, sebagai contoh URL berikut ini

Untuk mengganti link yang akan dituju, tinggal merubah kode yang berwarna merah ini sesuai dengan link tujuan anda, seperti contoh ini

sedangkan untuk menambahkan judul pada gambar, tinggal menambahkan title seperti contoh berikut ini

hasilnya akan menjadi seperti ini:

Selamat mencoba...

Baca Juga Artikel Lain Berikut ini:

Membuat Menu Dropdown Menggunakan CSS Menu Maker

Posted by serba-serbi on 16.17

Untuk membuat menu Dropdown dengan menggunakan CSS Menu Maker seperti contoh diatas, sangat mudah asal bisa sedikit memahami kode css. Sebelumnya saya sendiri juga sangat kesulitan membuatnya, setelah lama-lama dicoba akhirnya bisa juga dan sekarang ingin berbagi ilmu dengan anda jika mau.

Langkah pertama buka situs www.cssmenumaker.com, kemudian pilih Drop Down CSS Menu setelah itu pilih contoh menu yang akan anda pakai.

Kemudian klik customize untuk mengatur link yang akan dimasukkan, setelah itu klik download.

Langkah selanjutnya, login ke blogger dan pilih Rancangan kemudian klik Edit HTML
Kemudian masukkan kode yang telah didownload seperti contoh dibawah ini,

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url("images/seperator.gif") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("images/hover.gif") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

background:url('images/sub_sep.gif') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;

}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('images/hover_sub.gif') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}

ditaruh diatas kode ]]></b:skin>

Setelah itu Simpan Template.

Langkah selanjutnya, klik Rancangan, kemudian klik Elemen Laman setelah itu klik Tambah Gadget dan pilih Tambah HTML/JavaScript.
Kemudian masukkan kode berikut

<ul>

</li>

<li><a href="" target="_self" >TUTORIAL</a>

<ul>

<li><a href="" target="_self">COMPUTER</a></li>

</ul>

</li>

<li><a href="" target="_self" >DOWNLOAD</a>

<ul>

<li><a href="" target="_self">DRIVER</a></li>

<li><a href="" target="_self">SOFTWARE</a></li>

</ul>

</li>

<li><a href="" target="_self" >CONTAC</a>

</li>

</ul>

</div>

Ganti tulisan yg bercetak tebal, sesuai dengan keinginan.
kemudian klik simpan.

Baca Juga Artikel Lain Berikut ini:

Membuat Pop-up

Posted by serba-serbi on 17.54

Apakah Pop-up itu..?
Pop-up adalah jendela iklan yang biasanya muncul secara tiba-tiba ketika kita mengunjungi sebuah halaman web. Biasanya dengan adanya Pop-up Iklan justru sering membuat orang jengkel dan bahkan tak jarang visitor enggan untuk berkunjung kembali.

Tapi, kali ini kita mencoba belajar menghias blog dengan tampilan jendela baru dengan ukuran sesuai yang kita inginkan. Jika Iklan popup kebanyakan memaksa visitor untuk melihat suatu pesan dari author, tapi disini kita hanya menawarkan visitor untuk melihatnya.

Singkat saja, langkah pertama sebelum membuat Pop-up, kita harus menentukan terlebih dahulu alamat URL yang akan dituju dan tentukan lebar halaman yang akan dibuat.
Sebagai contoh dengan menambahkan Element Baru pada blog,seperti biasa,Dashboard,lalu pilih Tata Letak, selanjutnya Tambah Element Baru/Add New Widget.

Pilih HTML/Javascript,dan letakkan kode berikut:

atau dengan kode berikut ini:

<a href="http://URL YANG AKAN DITAMPILKAN/" target="_blank">TEXT YANG TAMPIL PADA BUTTON</a>

Tulisan kapital dan angka yang berwarna merah,pada kode diatas,ganti sesuai perintah yang dituliskan dan rubah sesuai ukuran pilihan anda.

Setelah kode di letakkan Simpan,dan Selesai

Selamat mencoba...

Baca Juga Artikel Lain Berikut ini:

Sabtu, 25 Desember 2010

Cara Membuat Share Artikel

Cara Membuat Text Area dan Textbox Area Berfasilitas Select All

Cara Membuat Readmore

Rabu, 22 Desember 2010

CARA MEMBUAT IKLAN MELAYANG

Minggu, 05 Desember 2010

Cara Membuat Kotak Tabel Pada Postingan

Membuat Link Dalam Gambar

Membuat Menu Dropdown Menggunakan CSS Menu Maker

Kamis, 02 Desember 2010

Membuat Pop-up

Categories

Archives

Tentang Blog

SEBA-SERBI

Pengikut

Total Tayangan

Recent Comment

Mengenai Saya

sponsors

Sabtu, 25 Desember 2010

Rabu, 22 Desember 2010

Minggu, 05 Desember 2010

Kamis, 02 Desember 2010

Categories

Archives

Tentang Blog

SEBA-SERBI

Pengikut

Total Tayangan

Langganan

Recent Comment

Mengenai Saya

sponsors