Membuat Gambar Horizontal Thumbnail Dengan CSS

Sambil menunggu blog Kang Rohman Dot Com siap untuk di tayangkan, kita iseng-iseng
bermain dengan CSS dulu deh. Kali ini kang Rohman akan coba mengulas tentang cara membuat gambar horizontal thumbnail dengan CSS. Apa
itu horizontal Thumbnail? untuk pengertian kang rohman rasa tidak penting karena memang tidak tahu, ini juga bikin judul asal-asalan
biar sedikit terdengar keren . Biar
tambah keren lagi sok atuh di sorot gambar-gambar di bawah ini :

 

 

 

 

 

 

 

Bagaimana bagus tidak? kalau anda ingin tahu cara membuatnya ya musti di baca sampai akhir biar
tambah seru. Begini nih caranya :

Pertamax. Buatlah terlebih dahulu gambar-gambar yang sekiranya mau di pajang di blog atau website
milik anda. Misalkan gambar yang mau di pajang seperti ini :

 

 

 

 

 

Keduax. Uploadlah gambar-gambar tersebut ke hosting untuk menyinpan gambar, mau di blogger atau
pada hosting lainnya seperti google pages,
photobucket, geocities, dll. Misalkan
saya telah menguploag gambar-gambar diatas, dan masing-masing mempunyai mempunyai alamat gambar sebagai berikut :

 

http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg



http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg



http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg

 

Ketigax. simpanlah kode CSS berikut diantara style sheet css yang ada :

 

 


#latar {

padding:20px;

margin:25px;

float:left;

background:#ebe9dc;

border-right: 3px solid #ccc;

border-bottom: 3px solid #ccc;

}



.tabel {

padding:5px;

margin:0;

float:left;

}



.thumbnail {

position:relative;

z-index:100;

}



.thumbnail a.gambar-kecil, .thumbnail a.gambar-kecil1:visited {

display:block;

text-decoration:none;

background:transparent;

top:0;

left:0;

border:3px solid #000;

}


.thumbnail a img {

border:0;

}



.thumbnail a.gambar-kecil:hover {

text-decoration:none;

background-color:#8c97a3;

color:#000;

border:3px solid #43b843;

}



.thumbnail a .gambar-besar1 {

display:block;

position:absolute;

width:0;

height:0;

border:0;

top:0;

left:0;

}



.thumbnail a.gambar-kecil:hover .gambar-besar1 {

display:block;

position:absolute;

top:100px;

left:0px;

width:400px;

height:300px;

border:5px solid #000;

}



.thumbnail a .gambar-besar2 {

display:block;

position:absolute;

width:0;

height:0;

border:0;

top:0;

left:0;

}



.thumbnail a.gambar-kecil:hover .gambar-besar2 {

display:block;

position:absolute;

top:100px;

left:0px;

width:400px;

height:300px;

border:5px solid #000;

}



.thumbnail a .gambar-besar3 {

display:block;

position:absolute;

width:0;

height:0;

border:0;

top:0; left:0;

}



.thumbnail a.gambar-kecil:hover .gambar-besar3 {

display:block;

position:absolute;

top:100px;

left:0px;

width:400px;

height:300px;

border:5px solid #000;

}



 

Keempax. Silahkan simpan kode di bawah ini di dalam body template ( mau lewat elemen halaman juga boleh ).

 



<div id="latar">

<span class="tabel">

<span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="Gambar Thumbnail"><img src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar1" src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" title="gambar besar" alt="gambar besar" /></a></span></span>

<span class="tabel">



<span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="Gambar Thumbnail"><img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar2" src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a></span>

</span>




<span class="tabel">

<span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="Gambar Thumbnail"><img src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar2" src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" title="gambar besar" alt="gambar besar" /></a></span>

</span>

</div>



Kelimax. Di saving aja biar datanya tersimpan. Trus ya udah, kan sudah klimaks, tinggal lemesnya aja deh .

 

Masih bingung dengan cara di atas? begini deh kalau memang masih bingung, cara yang lebih detail adalah seperti ini :



Langkah pertama :

1. Sign in di blogger dengan ID anda tentunya dong.





2. Klik menu Layout.





3. Klik menu Edit HTML.





4. Klik link Download full template, silahkan save untuk backup data (penting).





5. Copy kemudian paste kode CSS berikut di atas kode ]]></b:skin>














<br /> <br />#latar {<br />padding:20px;<br />margin:25px;<br />float:left;<br />background:#ebe9dc;<br />border-right: 3px solid #ccc;<br />border-bottom: 3px solid #ccc;<br />}<br /><br />.tabel {<br />padding:5px;<br />margin:0;<br />float:left;<br />}<br /><br />.thumbnail {<br />position:relative; <br />z-index:100;}<br />.thumbnail a.gambar-kecil, .thumbnail a.gambar-kecil1:visited {<br />display:block; <br />width:90px; <br />height:75px; <br />text-decoration:none; <br />background:#fff; <br />top:0; left:0; <br />border:3px solid #000;<br />}<br /><br />.thumbnail a img {<br />border:0;<br />}<br /><br />.thumbnail a.gambar-kecil:hover {<br />text-decoration:none; <br />background-color:#8c97a3; <br />color:#000;border:3px solid #43b843; <br />}<br /><br />.thumbnail a .gambar-besar1 {<br />display:block; <br />position:absolute; <br />width:0; height:0; <br />border:0; top:0; left:0;<br />}<br />.thumbnail a.gambar-kecil:hover .gambar-besar1 {<br />display:block; position:absolute; <br />top:100px; <br />left:0px; <br />width:400px; <br />height:300px; <br />border:5px solid #000;<br />}<br /><br />.thumbnail a .gambar-besar2 {<br />display:block; <br />position:absolute; <br />width:0; <br />height:0; <br />border:0; <br />top:0; <br />left:0;<br />}<br /><br />.thumbnail a.gambar-kecil:hover .gambar-besar2 {<br />display:block; <br />position:absolute; <br />top:100px; <br />left:0px; <br />width:400px; <br />height:300px; <br />border:5px solid #000;<br />}<br /><br />.thumbnail a .gambar-besar3 {<br />display:block; <br />position:absolute; <br />width:0; <br />height:0; <br />border:0; <br />top:0; left:0;<br />}<br /><br />.thumbnail a.gambar-kecil:hover .gambar-besar3 {<br />display:block; <br />position:absolute; <br />top:100px; <br />left:0px; <br />width:400px; <br />height:300px; <br />border:5px solid #000; <br />}<br /><br />







6. Klik tombol SIMPAN TEMPLATE

Langkah kedua :

1. Klik menu Elemen Halaman





2. Klik tulisan Tambah sebuah Elemen Halaman





3. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML





4. Copy paste kode berikut ke dalam elemen yang muncul













<br /> <div id="latar"><br /><span class="tabel"><br /><span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="thumbnail image"><img src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Gambar Thumbnail" /><img class="gambar-besar1" src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" title="gambar besar" alt="gambar besar" /></a></span></span><br /><span class="tabel"><br /><span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="thumbnail image"><img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Gambar Thumbnail" /><img class="gambar-besar2" src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" title="Gambar besar" alt="gambar besar" /></a></span><br /></span><br /><br /><span class="tabel"><br /><span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="thumbnail image"><img src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Gambar Thumbnail" /><img class="gambar-besar2" src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" title="Gambar Thumbnail" alt="Gambar Thumbnail" /></a></span><br /></span><br /> </div><br />






5. Klik tombol Simpan





6. Pindahkan elemen yang baru di buat ke tempat yang kira-kira tepat menurut anda.





7. Klik tombol Simpan yang berada di sebelah atas





8. Selesai.

Tambahan dhenk, pada kode di atas ada tertulis seperti ini :




<a class="gambar-kecil" href="#nogo" title="thumbnail image">




Tulisan #nogo tidak usah di ganti apabila gambar yang di pajang
tidak ingin nge link ke manapun, namun apabila photo yang di pajang ingin dalam bentuk link, silahkan
ganti tulisan #nogo dengan alamat URL, misal di ganti dengan
http://www.kangrohman.com atau apa saja dhenk terserah.



Basa basi



Kode-kode di atas saya buat dan boleh di pakai untuk umum secara gratis, namun apabila anda menginginkan
kang rohman lebih eksis lagi dalam membuat kode-kode yang lainnya, silahkan yang mau mengirimkan donasi
untuk sekedar uang jajan anak-anak kang rohman :







I'm wait and see.

CSS menu : tabs6

Setelah melihat perkembangan penghasilan kang rohman dari iklan yang ada di blog ini,
akhirnya kang rohman berubah fikiran. Apanya yang berubah? begini ade-ade, teteh-teteh,
bapak-bapak, ibu-ibu, dan sebangsanya .
Dulu, untuk download template atau nerangin cara pasang menu navigasi, para pengunjung blog ini sengaja saya
lempar alihkan ke blog saya yang berbahasa inggris dengan maksud agar
blog tersebut mendapatkan traffic yang cukup lumayan dan alih-alih berharap semoga saja
ada yang berbaik hati mengklik iklannya. Namun sekarang semuanya mungkin tidak akan terjadi lagi,
sekarang kang rohman akan tulis semuanya di sini, download di sini dan silahkan baca sepuasnya

Sudah ah ko kayanya jadi sombong begitu..hihihi.



Untuk tulisan pertama mengenai menu navigasi, yang saya bahas adalah
menu navigasi yang di beri nama Tabs6. Ini bukan buatan
kang rohman, namun buatan orang lain yang sudah di modifikasi agar bisa
di pake di blogspot. Namun untuk menghargai desainer nya, tolong jangan
di hilangkan credit pada kode css nya ya. Untuk demo
menu navigasi ini silahkan klik tombol berikut :

 

 

 

Kalau anda berminat, silahkan baca tutorialnya sampai selesai.Namun kalau tidak
berminat,mending cari artikel lainnya yang lebih menarik .



Jika anda merasa tertarik dengan menu navigasi di atas, silahkan baca sampai
dengan selesai. Namun perlu saya tegaskan di sini bahwa mungkin hasil yang di
dapat bisa berbeda dengan contoh diatas karena faktor desain template yang
berbeda-beda, oleh kerena itu ada kemungkinan anda harus sedikit merubah kode
yang saya berikan agar cocok dengan template anda.



Berikut adalah langkahnya :



Klik kanan pada kedua gambar di bawah ini, lalu Save Picture As...
lalu save dulu di komputer anda.

tableft6.gif	tabright6.gif

Kemudian simpan pada image hosting yang biasa anda gunakan, misalkan
di photobucket
atau google pages dan lain-lain.
Lalu anda catat alamat dari kedua gambar tersebut. Contoh, saya mempunyai alamat gambar
untuk kedua gambar di atas sebagai berikut :





http://ahom24.googlepages.com/tableft6.gif


http://ahom24.googlepages.com/tabright6.gif




 

Sebenarnya anda boleh saja menggunakan kedua alamat tersebut,
namun saya khawatir jika terlalu banyak yang memakai alamat
tersebut bisa terjadi limited band with sehingga gambar tidak
dapat tampil dan menu anda jadi tidak bagus, jadi sebaiknya
pake alamat sendiri ya.



Berikut adalah salah satu cara menginstall menu tabs6 :



Langkah #1

1. Silahkan Sign in di blogger dengan ID anda.





2. Klik Layout.





3. Kemudian klik tab Edit HTML.





4. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting).





5. lihat ke bagian kode template anda, kemudian cari kode ]]></b:skin>





6. Copy kode yang ada di bawah ini, lalu paste di atas kode ]]></b:skin>











<br /><br />/*<br />==================================================<br /><br />Tabs6<br /><br />Author : Christopher Ware<br />URL : http://www.exploding-boy.com<br /><br />Tutorial oleh Rohman<br />URL : http://kolom-tutorial.blogspot.com<br /><br />kunjungi blog saya untuk tutorial menu lainnya<br /><br />==================================================<br />*/<br /><br />#tabs6 {<br />float:left;width:100%;<br />background:#efefef;<br />font-size:13px;<br />line-height:normal;<br />border-bottom:1px solid #666;<br />}<br /><br />#tabs6 ul {<br />margin:0;padding:10px 10px 0 5px;<br />list-style:none;<br />}<br /><br />#tabs6 li {<br />display:inline;<br />margin:0;<br />padding:0;<br />}<br /><br />#tabs6 a {<br />float:left;<br />background:url("http://ahom24.googlepages.com/tableft6.gif") no-repeat left top;<br />margin:0;padding:0 0 0 4px;text-decoration:none;<br />}<br /><br />#tabs6 a span {<br />float:left;display:block;background:url("http://ahom24.googlepages.com/tabright6.gif") no-repeat right top;<br />padding:5px 15px 4px 6px;<br />color:#fff;<br />font-weight:bold;<br />}<br /><br />/* Commented backslah Hack hides rule from IE5-Mac \*/<br /><br />#tabs6 a span {<br />float:none;<br />}<br />/* End IE5-Mac hack */<br /><br />#tabs6 a:hover span {<br />color:#C2FB77;<br />}<br /><br />#tabs6 a:hover {<br />background-position:0% -42px;<br />}<br /><br />#tabs6 a:hover span {<br />background-position:100% -42px;<br />}<br /><br />#tabs6 #current a {<br />background-position:0% -42px;<br />}<br /><br />#tabs6 #current a span {<br />background-position:100% -42px;<br />} <br />






7. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti 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>








8. Ubahlah kode yang berwarna hijau, sehingga kodenya 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>








9. Kemudian klik Simpan Template.Silahkan tunggu
   beberapa saat.

Langkah #2

1. Klik tab Elemen Halaman





2. Lalu klik Tambahkan sebuah Elemen Halaman yang ada di bagian header (elemen paling atas).





3. setelah munculwindow popup, klik TAMBAHKAN KE BLOG yang untuk HTML/JavaScript.





4. Copy lalu paste kod berikut pada kolom yang tesedia (jangan lupa untuk merubah alamat gambarnya) :







<br /> <br /> <br /> <div id='tabs6'> <br /> <ul><br /><br /><!-- Silahkan ganti tanda pagar (#) dengan link milik anda --><br /><br /><li id='current'><a href='#' title='your link title here'><span>Home</span></a></li><br /><li><a href='#' title='your link title here'><span>Products</span></a></li><br /><li><a href='#' title='your link title here'><span>Services</span></a></li><br /><li><a href='#' title='your link title here'><span>Support</span></a></li><br /><li><a href='#' title='your link title here'><span>Contuct Us</span></a></li><br /><li><a href='#' title='your link title here'><span>Obral Plus</span></a></li><br /><li><a href='http://kolom-tutorial.blogspot.com' title='tutorial lengkap membuat blog di blogspot'><span>Blogspot Tutorial</span></a></li><br /></ul><br /> </div><!-- #tabs6 end --><br />











5. Klik tombol Simpan Peribahan.





6. Selesai, silahkan lihat hasilnya.

 

 

Terkadang jika anda melakukan instalasi sesuai dengan langkah
diatas, untuk beberapa template hasilnya kurang bagus. Oleh karena
itu, saya akan mencoba menulis dengan cara lain. Namun cara ini
hanya untuk Template Minima (template asli dari blogger).



Langkahnya sebagai berikut :

1. Silahkan Sign in di blogger dengan ID anda.





2. Klik Layout.





3. Kemudian klik tab Edit HTML.





4. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting).





5. Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :



 





 




6. Tunggu beberapa saat ketika proses sedang berlangsung





7. lihat ke bagian kode template anda, kemudian cari kode ]]></b:skin>





8. Copy kode yang ada di bawah ini, lalu paste di atas kode ]]></b:skin>











<br /><br />/*<br />==================================================<br /><br />Tabs6<br /><br />Author : Christopher Ware<br />URL : http://www.exploding-boy.com<br /><br />Tutorial oleh Rohman<br />URL : http://kolom-tutorial.blogspot.com<br /><br />kunjungi blog saya untuk tutorial menu lainnya<br /><br />==================================================<br />*/<br /><br />#tabs6 {<br />float:left;width:100%;<br />background:#efefef;<br />font-size:13px;<br />line-height:normal;<br />border-bottom:1px solid #666;<br />}<br /><br />#tabs6 ul {<br />margin:0;padding:10px 10px 0 5px;<br />list-style:none;<br />}<br /><br />#tabs6 li {<br />display:inline;<br />margin:0;<br />padding:0;<br />}<br /><br />#tabs6 a {<br />float:left;<br />background:url("http://ahom24.googlepages.com/tableft6.gif") no-repeat left top;<br />margin:0;padding:0 0 0 4px;text-decoration:none;<br />}<br /><br />#tabs6 a span {<br />float:left;display:block;background:url("http://ahom24.googlepages.com/tabright6.gif") no-repeat right top;<br />padding:5px 15px 4px 6px;<br />color:#fff;<br />font-weight:bold;<br />}<br /><br />/* Commented backslah Hack hides rule from IE5-Mac \*/<br /><br />#tabs6 a span {<br />float:none;<br />}<br />/* End IE5-Mac hack */<br /><br />#tabs6 a:hover span {<br />color:#C2FB77;<br />}<br /><br />#tabs6 a:hover {<br />background-position:0% -42px;<br />}<br /><br />#tabs6 a:hover span {<br />background-position:100% -42px;<br />}<br /><br />#tabs6 #current a {<br />background-position:0% -42px;<br />}<br /><br />#tabs6 #current a span {<br />background-position:100% -42px;<br />} <br />






9. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti ini :








<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

</div>

</b:if>

</b:includable>

</b:widget>

</b:section>










10. Hapus kode diatas, lalu ganti dengan kode berikut :










<br /> <br /><div class='descriptionwrapper'> <br /><p class='description'><span><data:description/></span></p><br /></div><br /></b:if><br /></b:includable><br /></b:widget><br /></b:section><br /><br /> <div id='tabs6'> <br /> <ul><br /><br /><!-- Silahkan ganti tanda pagar (#) dengan link milik anda --><br /><br /><li id='current'><a href='#' title='your link title here'><span>Home</span></a></li><br /><li><a href='#' title='your link title here'><span>Products</span></a></li><br /><li><a href='#' title='your link title here'><span>Services</span></a></li><br /><li><a href='#' title='your link title here'><span>Support</span></a></li><br /><li><a href='#' title='your link title here'><span>Contuct Us</span></a></li><br /><li><a href='#' title='your link title here'><span>Obral Plus</span></a></li><br /><li><a href='http://kolom-tutorial.blogspot.com' title='tutorial lengkap membuat blog di blogspot'><span>Blogspot Tutorial</span></a></li><br /></ul><br /> </div><!-- #tabs6 end --><br /><br />












11. Klik tombol Simpam Perubahan.





12. Selesai. silahkan lihat hasilnya.

Agar mendapat variasi yang berbeda, sedikit akan saya tambahkan.



jika anda melakukan langkah di atas, maka hasil yang di dapat adalah
tab-tab atau menu-menu akan mepet ke sebelah kiri, jika ingin sedikit
menjorok ketengah anda harus menambahkan sedikit kode. kodenya yang ini :


#tabs6 {

float:left;width:100%;

background:#efefef;

font-size:13px;

line-height:normal;

border-bottom:1px solid #666;

}



kode yang di tambahkan adalah seperti ini :


#tabs6 {

float:left;width:90%;

background:#efefef;

font-size:13px;

line-height:normal;

border-bottom:1px solid #666;

padding-left:10% ;

}



Angka 10% adalah besarnya nilai jarak sela dari sebelah kiri,
silahkan di ubah sesuai kebutuhan.



Untuk yang lainnya, silahkan anda otak-otik sendiri, keburu siang nih belum mandi




mandi dulu ahhhhh....

Pasang Game di Blog

Kemarin ada yang rikues minta di buatkan tutorial cara Pasang Game di blog, dan sepertinya tutorial yang akan di tulis tidak terlalu sulit, maka langsung saya buatkan saja.



Sebagai catatan kecil saja, memasang game di blog memang menyenangkan bagi sebagian orang, namun hal ini akan mengakibatkan loading blog anda akan sedikit berat. Jadi silahkan dipikir dulu baik dan buruknya.

Untuk memasang Widget game, anda bisa mendapatkannya secara gratis di internet, silahkan lakukan googling saja. Sebagai contoh, salah satu penyedia layanan ini adalah http://www.khemer.com. Contoh game yang bisa di pasang adalah seperti ini :



Caranya menginstall nya seperti ini :



Untuk template Baru :



Langkah #1 :

1. Silahkan kunjungi http://www.khemer.com.


2. Silahkan lihat dan coba game-game yang ada dengan cara meng klik pada judul game.


3. Setelah menemukan game yang di rasa cocok, perhatikan ke bagian bawah.


4. Copy kode yang ada pada text area, lalu paste pada notpad atau text editor lainnya, kemudian save dulu di komputer.


5. Sekarang anda mempunyai kode game untuk di pasang di blog.


6. Silahkan close halaman browser anda jika di rasa cukup.

Langkah #2 :

1. Sign in di blogger dengan ID anda.


2. Klik Layout.


3. Klik tab Elemen Halaman.


4. Klik Tambahkan sebuah Elemen Halaman.


5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript.


6. Copy kode game yang tadi di dapat, lalu paste pada pop up window yang muncul.


7. Klik tombol SIMPAN PERUBAHAN.


8. Pindahkan elemen yang baru anda buat tadi pada tempat yang di di rasa cocok.


9. Klik tombol SIMPAN yang ada di sebelah atas.


10. Selesai. Silahkan lihat hasilnya!

Untuk template Klasik :

1. Sign in di blogger dengan ID anda.


2. Klik Layout.


3. Klik tab Edit HML.


4. Copy seluruh kode template anda, kemudian paste pada notepad. Silahkan di save dulu untuk backup (sangat penting).


5. Copy kode game yang tadi di dapat, lalu paste pada tempat yang dinginkan.


6. Klik tombol Simpan Perubahan Template.


7. Selesai. Silahkan lihat hasilnya!

Gampang bukan? Selamat mencoba !

Pasang Fasilitas "Print" di blog

Sudah beberapa hari tidak ada tulisan baru di blog ini, harap
dimaklumi ya soalnya kemarin baru liburan ke bandung selama tiga hari.
Iseng melihat dokumen yang ada di shoutbox, rupanya banyak juga
pengunjung baru blog ini. Buat anda yang terbilang sebagai pengunjung
baru dan belum kenal dengan saya, salam kenal saja dari saya Kang Rohman,
sering-sering berkunjung kemari ya.

Pada kesempatan kali ini saya mau mencoba mengulas sebuah pertanyaan mengenai
bagaimana cara memasang fasilitas print di blog, layak nya
yang banyak terdapat di situs-situs internet.. Memang, dengan memasang
falitas print di blog, maka akan lebih memudahkan para pembaca blog yang ingin
membaca artikel kita secara offline.

Untuk memasang falitas ini, banyak cara yang bisa di tempuh. Ada yang memasang
script dari yang rumit nya minta ampun sampai dengan script yang sederhana. Untuk
mendapatkan script tersebut sangatlah mudah, coba lakukan googling Silahkan
tulis keyword atau kata kunci yang berhubungan
semisal script print this page pada mesin pencari (search engine) yang ada di sebelah
kanan atas blog ini. Bagi yang sedikit malas untuk ber googling ria, silahkan baca
artikel ini sampai selesai.

Agar tidak membingungkan, saya memilih cara yang sederhana tapi tetap berfungsi secara
semestinya yaitu memasang script yang sederhana tapi tetap berfungsi secara baik.
Agar telihat lebih manis, ada banyak pembuat situs menggandengkan link untuk print
berderetan dengan icon berbentuk printer, maka dari itu saya pun akan
mencoba membuat link untuk print beserta icon print.

Langkah pertama yaitu membuat icon berbentuk print, jika anda tidak mahir menggambar
tentu saja ada banyak situs penyedia icon secara gratis di internet. Lagi-lagi silahkan tulis
keyword yang berhubungan semisal free icon pada mesin pencari di sebelah
kanan atas blog ini. Sebagai contoh, saya mempunyai icon printer seperti ini .
Jika anda sudah mempunyai icon yang mau di pasang, langkah selanjutnya adalah mengupload
icon tersebut ke server tempat anda biasanya menyimpan gambar. Sebagai contoh saya menyimpan icon print
di google pages, untuk cara-cara upload ke google pages sudah saya ulas pada postingan yang ini.

Sebagai contoh, icon yang saya upload mempunyai alamat seperti ini :

http://amen24.googlepages.com/printer.png

Untuk script fasilitas print, anda tinggal memakai script di bawah ini (silahkan
ganti alamat gambarnya dengan milik anda):



<a href="javascript:print(document)"><img src="http://amen24.googlepages.com/printer.png" alt="print this page" border="0"/>&#160;Print this page</a>



Hasilnya akan seperti ini (silahkan klik untuk membuktikannya!) :

 Print this page

Tulisan Print this page bisa anda ubah sesuai keinginan, misal di ubah menjadi Cetak halaman ini atau
yang lainnya, perhatikan saja kodenya.

Masih bingung cara memasukannya di blog anda? ya sudah saya tuliskan langkah-langkahnya lebih detail :

1. Silahkan login di blogger dengan id anda.




2. Klik Layout.




3. Klik Elemen Halaman.




4. Klik tulisan Tambahkan sebuah Elemen Halaman.




5. Setelah muncul popup, klik tombol TAMBAHKAN KE BLOG yang berada di bawah tulisan HTML/JavaScript.




6. Copy lalu paste kode berikut pada elemen halaman tadi :









<br /><a href="javascript:print(document)"><img src="http://amen24.googlepages.com/printer.png" alt="print this page" border="0"/>&#160;Print this page</a><br />






7. Klik tombol simpan perubahan.




8. Pindahkan elemen yang baru di buat tadi ke tempat yang anda sukai.




9. Klik tombol SIMPAN.




10. Selesai. Silahkan lihat hasilnya.

 

Selain bentuk link seperti yang saya terangkan di atas, ada juga yang memasang
fasilitas ini dalam bentuk tombol, kodenya seperti ini :

<br /><form><br /><input type="button" value="Print this page" Onclick="print()" ;><br /></form><br />

hasilnya akan seperti ini (coba klik untuk membuktikannya !) :

Untuk langkah-langkah pemasangan silahkan merujuk pada langkah-langkah yang di atas, langkahnya
sama yang berbeda hanya kode yang di pasang saja.

Selamat mencoba !

Horizontal Tab menu J

Jika kemarin lusa telah di perkenalkan menu navigasi horizontal
yang cukup menarik yaitu Horizontal menu F yang saya posting di sini,
maka hari ini ada tambahan perbendaharaan menu navigasi yang
berbentuk horizontal yaitu Horizontal Tab menu J. Ingin tahu
seperti apa bentuknya? silahkan arahkan mouse komputer sobat ke menu navigasi di bawah ini :

• Home


• Products


• Obral Plus


• Belajar Website
  

Tertarik ingin segera mengetahui bagaimana cara membuat menu navigasi ini?
Silahkan baca tutorialnya di sini !



Selamat menikmati tampilan baru navigasi sobat!

Menambah Emoticons di shoutbox

Pernah melihat kepala-kepala ajaib seperti ini :







Bagi sobat yang pernah atau sering mengisi buku tamu di blog ini,
maka tentu saja tidak tidak akan asing lagi dengan kepala-kepala ajaib
tersebut. Yups..... betul sekali, kepala ajaib tersebut adalah smile atau
emoticons miliknya Shoutmix
yag di simpan dalam fasilitas yang di berikannya yaitu buku tamu.

Dengan adanya emoticon dalam buku tamu, ini akan lebih mempertegas karakter
si pemberi komentar, walaupun tentu saja ada juga yang hanya berpura-pura mempunyai karakter tersebut.
Bagi sobat yang menggunakan buku tamu dari shoutmix, apabila sobat berkeinginan untuk menambah
kepala-kepala ajaib, hal itu bisa sobat lakaukan. Misalkan sobat ingin menambahkan si kepala ini
atau malah yang ini
atau mau yang lebih ekstrim lagi seperti ini .
Kepala-kepala tersebut sebenarnya bisa di tambahkan di buku tamu Shoutmix, yang penting sobat mengetahui
atau mempunyai alamat gambar kepala ajaib nya. Bagi sobat yang sangat menyukai emoticons dari yahoo! messenger,
sobat bisa melihat alamat gambarnya di sini!, yang diperlukan hanyalah alamat gambarnya saja, misalkan
di sana di terangkan bahwa untuk menampilkan smile seperti ini
adalah memakai kode seperti ini :



<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" width=34 height=18 border=0>





kode yang diperlukan adalah kode yang ini saja :





http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif



Ingin tahu cara memasukan smiles tersebut ke buku tamu shoutmix? silahkan ikuti langkah-langkah berikut :

1. Silahkan login di Shoutmix, tentunya
   memakai username serta pasword yang sobat miliki.





2. Pada menu Display, klik yang untuk Smiley





3. Masukan alamat gambar yang di inginkan pada kotak di bawah tulisan Smiley image URL.





4. Klik pada tombol Add yang berada di sampingnya.





5. Masukan kembali alamat gambar smile yang lain apabila masih ada yang masu di masukan, jangan lupa
   untuk klik kembali tombol Add nya.





6. Klik tombol Save Settings.





7. Selesai.

Apabila sobat sudah melakukan langkah-langkah di atas, maka secara otomatis pada buku tamu
yang ada di blog nya akan memiliki kepala ajaib yang tadi di masukan tanpa harus mengubah
apa-apa lagi pada kode templatenya.



Mau lihat contohnya? silahkan coba buka buku tamu yang ada di blog ini, di pastikan sobat akan menemui
kepala-kepala seperti ini





Selamat mencoba !

Horizontal Green menu

Jika kemarin-kemarin saya selalu menawarkan menu navigasi yang berupa
navigasi yang berbentuk horizontal yaitu menu navigasi yang cocok
di pasang di sekitar header, nah kali ini saya coba tawarkan yang lain
yakni menu navigasi yang berbentuk vertikal. Navigasi ini adalah untuk di
simpan pada bagian sidebar blog agar link-link yang tercipta dan di tempatkan
pada navigasi tersebut tampak lebih cantik dan menarik untuk di lihat.

Untuk melihat contoh dari menu yang saya buat, silahkan klik pada tombol
di bawah ini :








Jika sobat tertarik, silahkan ikuti tutorial pemasangannya di sini!



Selamat mempunyai sidebar yang lebih cantik!