M A N T H E K H A J H E: tutorial

Tampilkan postingan dengan label tutorial. Tampilkan semua postingan

Sabtu, 16 Januari 2010

membuat "emoticon pada kotak komentar"

Assalamu'alaikum wr. wb.

Setelah sekian lama saya mencari-cari, akhirnya saya temukan, yaitu cara memasang emoticon di kotak komentar. Agar dapat bermanfaat bagi yang memerlukan, saya putuskan untuk memosting artikel ini.

Baiklah agar tidak berlarut-larut caranya adlah sebagai berikut:

- Login ke Blogger dengan Id anda

- Klik menu Tata Letak

- Lalu Edit HTML

- Centang dulu Expand Template Widget

- Kalo sudah ketemu copas kode berikut sebelum </body>

- Kalo sudah cari kode berikut

- Kalo dah ketemu Copas kode berikut sesudah tulisan yang bewarna

- Klik save

- Selesaii!

Wassalamu'alaikum wr. wb.

by sedot-pc

»» Lanjuut...

Rabu, 13 Januari 2010

membuat "gambar melayang"

Aduh, saya selalu sibuk, tidak sempat ini itu, tugas pada menumpuk, buat makalahlah, karya tulislah, inilah itulah. Wah banyak deh. Tapi demi anda semua, saya sempatkan untuk memposting trik ini, tapi sebelumnya saya mohon maaf juga kalau link atau banner Anda belum terpasang di blog saya, untuk itu jangan lupa untuk selalu mengingatkan saya.

Trik kali ini adalah memasang gambar atau widget yang selalu berada di pojok blog, jika kita geser ke bawah halaman, maka gambar tersebut tetap berada di pojok tak bergerak. Bagaimana triknya ayo langsung saja praktekkan cara-cara berikut ini!!!

2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.

#trikwidget_pojok {

position:fixed;_position:absolute;bottom:0px; left:0px;

clip:inherit;

_top:expression(document.documentElement.scrollTop+

document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "buttom", jika pingin di posisi atas bisa diganti dengan "top".

4. Langkah selanjutnya yaitu letakkan script berikut ini sebelum kode </body>

<div id=" trikwidget _pojok">

<a href="http://kata-irhamna.blogspot.com">

<img src="http://artimaster.irhamna.googlepages.com. /yotsuba.gif"

border="0" /></a>

</div>

"http://kata-irhamna.blogspot.com"

adalah link. ganti dengan link kamu.

"http://arti.master.irhamna.googlepages.com/yotsuba.gif"

adalah lokasi penyimpanan gambarmu. Ganti dengan kode tempat penyimpanan gamabrmu.

Jika ingin tidak gambar seperti di atas, anda bisa mengganti dengan widget-widget, misanya jam, atau iklan dan lain-lain, tinggal ubah saja kode gambar atau widget yang akan ditampilkan.

Kalau udah simpan/save.

Kemudian jangan lupa deh lihat hasilnya.

Selamat mencoba triknya ya!!!

Salam Blogger selalu untuk Anda!!

by kata-irhamna

»» Lanjuut...

membuat "daun berjatuhan"

Halooooooooooo!!! Jumpa lagi dengan tips dari ka-ir,dulu kan pernah script salju dan link kedap-kedap sekarang aku udah dapat script baru nih, kurang lebih utak-atik kodenya satu hari, akhirnya dapat berhasil juga.
Untuk memampilkannya, caranya adalah sebagai berikut....

1. seperti biasa login terlebih dahulu di blog anda.
2. jika sudah masuk dasbor, maka menuju TATA LETAK > EDIT HTML.
3. Kemudian cari kode ini <head>
4. sudah ketemu, anda letakkan kode berikut tepat di bawahnya, bisa juga diletakkan di atas kode ini </body>
<script src='http://arti.master.irhamna.googlepages.com/daun.js' type='text/javascript'>
</script>
5. setelah selesai, simpan dan lihat hasilnya!!
Mudah bukan.
Selamat mencoba dan hijaulah Blogmu sekarang!!!

by kata-irhamna

»» Lanjuut...

cara membuat "favicon"

Pada zaman dahulu kala, kang rohman pernah membahas bagaimana cara menganti Favicon yang saya posting di sini. Karena zaman selalu berubah, maka postingan tersebut sudah tidak relevan lagi untuk di baca atau dengan kata lain sudah kadaluarsa. Walaupun begitu sebenarnya kang rohman sudah memposting artikel terbaru yang saya posting di sini, namun karena tidak semua orang suka berkunjung ke blog saya yang satu ini, maka artikel tersebut luput untuk di baca. Oleh karenanya, kali ini kang rohman coba posting saja di blog ini.

Bagi anda yang masih bingung apa sih Favicon itu? Favicon (favourite icon) adalah icon kecil yang berada di samping alamat blog atau website anda. Apabila anda membuat blog di Blogger.com alias blogspot, maka favicon yang berada di samping alamat URL anda adalah berupa favicon blogger. Berikut screenshot nya :

Apakah favicon tersebut bisa di ganti dengan favicon milik anda? jawabannya adalah bisa. Berikut adalah contoh favicon blogger yang sudah di ganti :

Untuk mengganti favicon tersebut, anda bisa melakukan langkah-langkah seperti berikut :

Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon, contoh seperti gambar di bawah ini :
Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs http://www.favicongenerator.com
Klik pada tombol Browse...
Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon
Klik pada tombol Generate Favicon.
Setelah proses selesai, klik pada Click Here to Download your favicon.
Save ke komputer anda.
Langkah selanjutnya adalah anda harus meng upload Favicon yang tadi ke tempat hosting gamabar, contoh adalah ke Yahoo! Geocities. Belum tahu bagaimana cara meng upload gambar ke Yahoo! Geocities? heuheuheu... sok atuh di baca dulu postingan kang rohman yang ini!
Sekarang saya asumsikan bahwa anda sudah mempunyai alamat URL dari favicon anda. sebagai contoh, saya mempunyai sebuah alamat URL seperti ini :

http://www.geocities.com/amn_tea/favicon.ico
Anda harus mengubah alamat URL favicon anda menjadi seperti ini :

<link rel="shortcut icon" href="http://www.geocities.com/amn_tea/favicon.ico"/>
Langkah selanjutnya adalah silahkan login ke blogger dengan ID anda.
Klik pada Tata Letak.
Klik Edit HTML.
Silahkan cari kode </head> (posisinya hampir paling atas, jadi jangan jauh-jauh nyari ke bawah dhenk).
Simpan kode favicon yang tadi persis di atas kode </head> . Contoh :
<link rel="shortcut icon" href="http://www.geocities.com/amn_tea/favicon.ico"/>
Klik tombol Simpan Template.
Selesai. Sekarang anda sudah mempunyai favicon di alamat URL blog anda.

Bagi anda yang masih menggunakan browser IE6, favicon anda tidak akan langsung terlihat, coba di bookmark dulu alamatnya. Berbeda jika anda menggunakan browser firefox, opera dan yang lainnya, favicon anda sudah langsung dapat di nikmati.
by kang rohman

»» Lanjuut...

pasang "kode tuker link"

BangDhika beberapa waktu yang lalu mengajukan pertanyaan melalui shoutbox mengenai bagaimana cara membuat kode untuk tukeran link, dan sekarang saya akan coba membahasnya. Mudah-mudahan informasi ini bermanfaat juga bagi sobat lainnya yang belum mengetahui mengenai hal ini.

Untuk membuat kode tukeran link, kebanyakan para blogger menggunakan banner yang
berukuran kecil atau di sebut juga dengan chiklet sebagai ciri khas dari blog masing-masing. Maka dari itu, saya akan mencoba mengulas pembahasan ini bermula dari pembuatan chiklet nya.

Untuk membuat sebuah chiklet, sobat bisa menggunakan berbagai software grafik & design semacam photoshop, corel, atau lain sebagainya. Tak hanya sebatas chiklet yang berupa gambar diam, sebuah animasi pun bisa di jadikan chiklet tukeran link, tentunya ini terserah kepada keahlian masing-masing dalam hal membuat chiklet.

Akan tetapi, bagi sobat yang belum bisa atau hanya sekedar malas untuk membuatnya karena memerlukan waktu yang cukup lama untuk berkreasi, sobat bisa menggunakan layanan berbagai situs pembuat chiklet. Salah satu situs yang menyediakan layanan ini adalah www.chicklette.net. Melalui situs ini sobat hanya perlu menentukan warna serta tulisan yang di inginkan, kemudian apabila sudah selesai, sobat tinggal save picture lalu menyimpannya dalam komputer sobat.

Itu tadi merupakan langkah pertama. langkah kedua adalah meng upload file chiklet tadi ke hosting untuk menyimpan gambar, boleh di blogger atau di hosting lain, untuk cara upload gambar sudah sering di bahas, apabila masih bingung coba baca lagi di sini ! Jika proses upload selesai, sobat tinggal mencatat atau mengcopy alamat URL gambar tersebut. Misal saya ambil contoh untuk chiklet blog ini adalah :

http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif

langkah selanjuatnya adalah membuat kode link dari alamat gambar tadi, contoh kodenya seperti ini :


<a href="http://kolom-tutorial.blogspot.com" target="_blank">
<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>

Nah itu tadi merupakan contoh link untuk membuat link ke blog ini, untuk ngelink
ke blog sobat ya tinggal sesuaikan saja.

Apabila kode link sudah ada, langkah selanjutnya adalah membuat text area untuk menampung seluruh kode agar nanti bisa di copy oleh pengunjung yang mau nge link ke blog sobat, kodenya seperti ini :


<textarea name="code" rows="6" cols="20">



<a href="http://kolom-tutorial.blogspot.com" target="_blank">

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>



</textarea>

Beberapa langkah sudah di lewati, langkah selanjutnya adalah merangkaikan kode-kode tadi, misalkan kode tukeran link ingin di bawah gambar chicklet agar tampak lebih menarik, kodenya kira-kira seperti ini :


<h2>Tukeran link</h2>

<br/><br/>

Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali

<br/><br/>



<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial ">


<br/><br/>


<textarea name="code" rows="6" cols="20">

<a href="http://kolom-tutorial.blogspot.com" target="_blank">

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>



</textarea>

Hasilnya nanti akan seperti ini :

Tukeran link

Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali

Dari tulisan diatas, terlihat ada tulisan yang memanjang kekanan. Akan tetapi jangan kawatir karena tulisan tersebut akan turun secara otomatis
mengikuti lebar dari sidebar. Untuk mengatur lebar serta tinggi dari text area, sobat tinggal mengganti nilai dari rows serta cols saja.

Ada juga blogger yang suka memasang tombol LINK TO ME pada blog nya, ini di maksudkan agar ketika pengunjung yang ingin membuat link
ke blog sobat tinggal mengklik tombol tersebut. Akan tetapi ini bekerja bagi mereka (yang ingin membuat link ke blog sobat) yang memakai
template baru saja, sedangkan untuk yang template klasik tidak bisa, jadi menurut saya kurang efektif. Contoh tombolnya seperti :

The button image will displayed on your site like this

Coba buktikan deh, klik saja pada tombol yang saya berikan.

Kode untuk membuatnya seperti ini :

 
<center>

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="FAVOURITE" name="widget.title" type="hidden"/><textarea style="display:none;" name="widget.content">


<a href="http://kolom-tutorial.blogspot.com" target="_blank" />

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>


</textarea><input value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>

<input value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>


<input value="LINK TO ME" name="go" type="submit"/></form><p>The button image will displayed on your site like this</p><br/>

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>

</center>

Silahkan ganti alamatnya dengan yang di miliki sobat.

bagi sobat yang menggunakan template klasik, sobat tinggal menyimpan kode di atas pada sidebar
yang sobat inginkan. Untu yang memakai template baru, sobat tinggal memilih tambah elemen, trus pilih
HTML/Javascript, kemudian masukan kode yang seperti diatas, simpan dan selesai.

Semoga mudah untuk di mengerti.

Salam buat blogger sejati semua......

by kang rohman

»» Lanjuut...

membuat "buku tamu tersembunyi"

Trik ini cukup menarik juga untuk menghemat lahan di blog kamu, sekaligus untuk membuat blog kamu jadi lebih keren.
:jagoan:

Ini membuat buku tamu kamu "tersembunyi", tapi akan terlihat kalau kamu mengklik tab-nya. Kamu bisa lihat contohnya di http://infotentangblog.blogspot.com/.

Caranya, copy-paste aja kode di bawah ini sebagai widget HTML/JavaScript Blog kamu:

Code:

<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('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') 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="gbtab" onclick="showHideGB()">   </div>

<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->


<div style="text-align:right">
Widget by: <a href="http://infotentangblog.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">
Info Blog
</a> |
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Jangan lupa, ganti

Code:

<!-- Ganti ini dengan kode buku tamu kamu -->

dengan kode buku tamu kamu.

by rumah blogger

»» Lanjuut...

Selasa, 12 Januari 2010

membuat "pesan pembuka"

disini saya akan memberikan script untuk membuat suatu pesan yang akan tampil sebelum isi blog anda terlihat oleh pengunjung.mau coba nih aku kasih scriptnya:

<script type='text/javascript'>
var name = prompt("Selamat Datang!! Boleh Tahu Namanya?", "Nama Anda ");
alert("Salam Kenal "+name)
alert("Selamat Surfing di Blog Saya, Semoga Berkenan!!")
</script>

Teks yang berwarna biru dapat Anda kita ganti sesuai keinginan kita.

Kemudian copy script tersebut pada side bar bar Anda, dengan langkah sebagai berikut.
1.login keBlogger dengan id anda

2.klik menu Tata Letak

3.Klik menu Tambah Gadget

4.klik HTML/Javascript

5.paste code tersebut

6.klik Simpan

7.selesai

by robbyanto

»» Lanjuut...

cara membuat "menu horizontal"

bagi anda yang punya blog tapi templatenya tidak menyediakan menu horizontal nih gua kasih cara2x.tapi apasih menu horizontal itu nih contohnya:

persiapan sebelumnya yaitu:
-komputer terhubung dengan internet
-login ke Blogger
-siapkan juga kopi dan snacknya biar g bosan

dah deh basa-basinya nih gua kasih langkah2 yang harus loe ikutin:
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 ]]>, 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;
}

uuh... capek +()+ ahhh nikmat....
yuk lanjut sampe nomer berapa tadi????;;)
oh ya nomer 3 yah
3.Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://hermantkj-joelack.blogspot.com"><span>Home</span></a></li>
<li><a href="http://hermantkj-joelack.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://hermantkj-joelack.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://hermantkj-joelack.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://hermantkj-joelack.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

4.Ganti http://hermantkj-joelack.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.
by robbyanto

»» Lanjuut...

Cara Membuat "Read More"

Terinspirasi oleh masalah yang pernah di hadapi teman saya yang mana ia pernah memosting sebuah artikel yang sangat panjang sehingga membuat halaman utamanya menjadi panjang.
Selain karena panjangnya artikel, ada faktor lain yaitu karena seringnya kita memosting artikel. Jika demikian, maka ada dua cara

, yaitu:

Pertama

Dengan menampilkan 1 posting di halaman muka. Caranya adalah:

- Masuk blogger dengan ID anda

- Klik pengaturan

- Klik menu format

- Ganti jumlah tampilan posting menjadi 1 postingan saja

Yang Kedua

Dengan membuat read more plus judul artikel dibawah postingan. Mau tau caranya ?
Baiklah siapkan diri anda, pakai sabuk pengaman, dan lihatlah

- Sukmasuk ke Blog dengan ID anda

- Klik Pengaturan

- Klik Menu Format

- Isi kotak tulisan Template Posting dengan kode di bawah ini

- Dan Simpan Template

Istirahat dulu ah..

Okeh mari kita lanjutkan.

- Masuk kemenu Tata letak

- Klik Menu Edit HTML

- Cheklist/centang terlebih dahulu tulisan Expand Template Widget

- Cari kode dibawah ini

<data:post.body/>

Atau

- Hapus kode diatas dengan kode di bawah ini

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<strong><a expr:href='data:post.url'>Lanjut membaca“<data:post.title/>”  »» </a></strong>

</b:if>

Eits jangan lupa

Tulisan yang bewarna merah ganti dengan kata yang kalian inginkan. Silahkan Mencoba!

by sedot-pc

»» Lanjuut...