Langganan
Postingan
Semua Komentar
Kamis, 29 Mei 2014
A
pakah sobat memasang buku tamu dengan mengunakan shoutmix ? Bagaimana rasanya setelah terpasang ? Tentu semakin seru saja kan, walau sedikit agak berat ketika loading. ( Hah...berat..!!? ) Walau cuma sedikit tapi lama-lama bisa semakin berat jika widget yang kita pasang bertambah. Sebelum hal ini terjadi bagaimana kalau shoutmix kita sembunyikan, tentunya akan bergeser keluar jika kita klik. Untuk hal ini kita bisa menggunakan menu sliding atau para sobat yang lain biasa menyebutnya dengan widget tersembunyi. Jika sobat ingin menyembunyikannya bisa memasukkan buku tamu sobat kedalam menu di bawah ini.
Caranya seperti biasa:- Login ke blog sobat.
Pilih tata letak.
Tambahkan Gadget.
Pilih HTML/JAVAScript.
Ganti kode shoutmix di bawah ini yang berwarna biru dengan kode shoutmix milik sobat.
Kemudian klik simpan
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:160px;
width:35px;
float:right;
cursor:pointer;
background: url('http://i761.photobucket.com/albums/xx252/darma_bucket/MENU-1.gif') no-repeat;
}
.gbcontent{
float:right;
border:2px solid #336633;
background:#FF66CC;
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.left = x.toString() + "px";
if (x0!=xf){setTimeout("moveGB("+x+", "+xf+") ", 10) ;}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB() "></div>
<div class="gbcontent">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="darmasena" src="http://www4.shoutmix.com/?darmasena"
width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www4.shoutmix.com/?darmasena">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat
widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->
</div>
<script type="text/javascript">
var gb = document.getElementById("gb") ;
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
Catatan:
- Warna kuning adalah alamat gambar beserta posisinya.
Warna hijau untuk tampilan warna bisa sobat rubah.
Warna merah adalah di mana posisi widget akan diletakkan.
Sedang untuk warna biru adalah di mana sobat harus meletakkan kode shoutmixnya.
Jika sobat ingin mengganti tulisan menu dengan buku tamu atau guest book bisa memakai gambar di bawah ini. Sobat tinggal mengganti alamat gambarnya.
http://i761.photobucket.com/albums/xx252/darma_bucket/guestbook.jpg
http://i761.photobucket.com/albums/xx252/darma_bucket/buku-tamu.jpg
Semoga bermanfaat !!
Banyak cara yang digunakan oleh para sobat blogger guna menghemat tempat, bisa saja mengunakan menu drop down, menu horisontal, menu sliding atau jenis menu-menu yang lain. Untuk kali ini saya ingin membuat suatu menu yang mungkin untuk para sobat sudah tidak asing lagi, tapi untuk sobat yang masih baru terjun ke dunianya blogger mungkin masih ada yang belum tahu mengenai menu ini. Biasanya para sobat blogger menyebut menu ini dengan nama tab view. Jika sobat ingin tahu cara membuat tab view
bisa ikuti langkah-langkah di bawah ini.Ini adalah gambar tab view yang akan kita buat.
Di bawah ini adalah kode yang kita gunakan untuk membuat tab view.
- <style type="text/css">
div.TabView div.Tabs {
height:30px; overflow: hidden;
}
div.TabView div.Tabs a {
float: left;
display: block;
width:100px;
text-align:center;
height:30px;
padding-top:5px;
vertical-align: middle;
border:2px solid #FF0000;
border-bottom:0;
text-decoration: none;
font-family:"Arial",Times New Roman, Serif;
font-weight:900;
color:#003300;
background-color: #FF33CC;
}
div.TabView div.Tabs a:hover {
background-color: #000000;
text-decoration:none;
color: #FF3300;
border:2px solid #FF0000;
}
div.TabView div.Tabs a.Active {
background-color: #00FF00;
}
div.TabView div.Pages {
clear: both;
background-color: #FF6600;
border: 2px solid #000000;
padding: 10px; overflow: hidden;
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.pad {
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 312px;">
<a>GAMBAR</a>
<a>LINK</a>
<a>ARTIKEL</a>
</div>
<div class="Pages" style="width: 288px; height: 250px;">
<div class="Page">
<div class="Pad">
<center>
<img src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png" width="200" height="200">
</center></div>
</div>
<div class="Page">
<div class="Pad">
<a href="http://activekita.blogspot.com">ACTIVEKITA</a><br><br>
<a href="http://activekita.blogspot.com/2009/11/cara-membuat-link.html">Cara membuat link</a><br><br>
<a href="http://activekita.blogspot.com/2009/12/cara-membuat-spoiler-di-blog.html">Membuat spoiler di blog</a><br><br>
</div>
</div>
<div class="Page">
<div class="Pad">
Banyak cara yang digunakan oleh para sobat blogger guna menghemat tempat, bisa saja mengunakan menu drop down, menu horisontal, menu sliding atau jenis menu-menu yang lain. Untuk kali ini saya ingin membuat suatu menu yang mungkin untuk para sobat sudah tidak asing lagi, tapi untuk sobat yang masih baru terjun ke dunianya blogger mungkin masih ada yang belum tahu mengenai menu ini. Biasanya para sobat blogger menyebut menu ini dengan nama tab view.....................................................................................................</div>
</div>
<div class="Page">
<div class="Pad">
</form>
<script type='text/javascript'/>
tabview_initialize('TabView');
</script>
Sobat bisa mengedit kode-kode di atas dan mengganti sesui keinginan.
Yang berwarna hijau ganti dengan milik sobat.
250px adalah nilai tinggi dari halaman tab.
Width= 100px adalah lebar dari tombol kotak navigasi. Kotak ini mempunyai border 2px dikalikan (x) kanan-kiri menjadi 4px. Jadi nilai sebenarnya dari masing-masing kotak navigasi ini setelah di jumlahkan adalah 104px dikali (x) 3 kotak = 312px (lihat <div class="Tabs" style="width: 312px;"> )
Width: 288px ini adalah lebar dari halaman tab, yang lebarnya mengikuti dari lebar di atas yaitu 312px. Kenapa lebarnya di sini 288 karena lebar halaman ini mempunyai border dengan nilai 2px, jika di jumlah kanan-kiri nilainya 4px selain itu juga mempunyai nilai padding 10px dikali (x) 2 = 20px ( 312px di kurangi (-) (4px + 20px) = 288px )
Jika sudah selesai mengedit dan mengotak-atik sekarang tinggal memasukkan ke blog sobat.
Caranya seperti biasa.
- Login ke blog sobat.
- Pilih tata letak.
- Klik edit html
- Cari kode ]] ></b:skin>
- Letak kode ini di bawahnya hingga posisinya seperti ini.
]] ></b:skin>
<script src='http://sites.google.com/site/darmasites/my-forms/TabView.js'/> - Setelah itu klik simpan.
- Kemudian kembali klik tata letak
- Tambahkan gadget.
- Pilih HTML/Javascipt.
- Masukkan semua kode yang telah sobat edit di atas.
- Kemudian klik simpan.
- Lihat hasilnya.
KEMBALI KE ATAS
Jumat, 23 Mei 2014
KODE WARNAKODE WARNA
KODE WARNA
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
Pada salah satu kolom komentar ada seorang sobat blogger yang bertanya tentang bagaimana memasukkan gambar pada judul template. Dan saya menangkap dari pertanyaan ini mungkin yang di maksud adalah memasukkan gambar pada judul postingan.
Jika yang di maksud demikian seperti contoh gambar pada judul di atas, maka saya akan berusaha menjawabnya semampu yang telah saya bisa.
Pertama yang harus sobat lakukan adalah mengupload dulu gambar di tempat yang biasa sobat lakukan,bisa di photobucket atau di mana saja yang rasanya tidak terlalu sulit untuk mencarinya di internet. Agar lebih memudahkan sebelum upload gambar tentukan dulu ukuran gambarnya. Setelah gambar terupload ambil alamat yang ada.
Misalnya saya mendapatkan kode alamat seperti ini:Jika yang di maksud demikian seperti contoh gambar pada judul di atas, maka saya akan berusaha menjawabnya semampu yang telah saya bisa.
Pertama yang harus sobat lakukan adalah mengupload dulu gambar di tempat yang biasa sobat lakukan,bisa di photobucket atau di mana saja yang rasanya tidak terlalu sulit untuk mencarinya di internet. Agar lebih memudahkan sebelum upload gambar tentukan dulu ukuran gambarnya. Setelah gambar terupload ambil alamat yang ada.
- http://i761.photobucket.com/albums/xx252/darma_bucket/Menambah-gambar-ke- dalam-judul-post.gif
- <img align='left' height='50' width='50' src="http://i761.photobucket.com/albums/xx252/darma_bucket/Menambah-gambar -ke-dalam-judul-post.gif" ></img><br/>
- Masuk ke blog sobat.
- Klik tata letak.
- Pilih edit HTML.
- Beri tanda pada Expand Template Widget
- Cari Kode seperti di bawah ini.
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<img align='left' height='50' width='50' src="http://i761.photobucket.com/albums/xx252/darma_bucket/Menambah-gambar -ke-dalam-judul-post.gif" ></img><br/><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
- Sisipkan alamat gambar milik sobat di antara kode di atas posisinya seperti yang terlihat.
Perhatikan juga spasinya , karena ini sangat berpengaruh. - Klik prajinjau.
- Setelah di rasa aman baru di SAVE.
- Lihat hasilnya.
Dengan speed internet yang cuma pas-pasan kadang memang harus bersabar. Kalau mau lebih cepat ya harus ditambah juga speednya dan harus bayar lebih dalam berlangganan ( yach.. bayar..!! ) . Meskipun kecepatan cuma pas-pasan kalau stabil tidak jadi masalah, tapi yang jadi masalah kalau koneksi lagi turun bisa bikin gerah, ngantuk dan lebih baik tidur. Sebab turun sedikit saja sudah terasa banget ( kok jadi ngomel ). Ya inilah enaknya punya blog bisa buat ngomel dan berkeluh kesah. Makanya yang belum bikin blog cepat bikin, tapi bukan cuma buat ngomel ya.
Mungkin sebagian dari sobat ada yang punya masalah sama, tapi maaf saya tidak bisa bantu.
Kalau masalah koneksi internet mungkin sudah dari sananya begitu. Tapi saya ingin berbagi trik mungkin ini bisa sedikit membantu. Di sini yang akan kita percepat bukan internetnya melainkan browsingan milik kita. Sobat memakai browser firefox bukan ?
Memang ada yang belum pakai..???
Pakai...!!Mungkin sebagian dari sobat ada yang punya masalah sama, tapi maaf saya tidak bisa bantu.
Kalau masalah koneksi internet mungkin sudah dari sananya begitu. Tapi saya ingin berbagi trik mungkin ini bisa sedikit membantu. Di sini yang akan kita percepat bukan internetnya melainkan browsingan milik kita. Sobat memakai browser firefox bukan ?
Memang ada yang belum pakai..???
Download Firefox nya di sini.
Trik cara mempercepat browser firefox ini sudah banyak digunakan, makanya saya juga pakai.
Caranya:
- Buka browser Firefox.
- Ketik about:config pada address bar kemudian enter
Maka akan muncul dialog seperti di bawah ini. - Klik I'll be careful,I promise !
- Klik kanan ( sembarang ) pada halaman browser. Sorot new kemudian klik integer.
- Pada kotak dialog ketik nglayout.initialpaint.delay ,kemudian tekan ok..
- Ganti angka yang muncul dengan 0 dan klik ok.
- Lihat bagian atas, pada Filter ketik pipelining.
- Pada bagian:
network.http.pipelining
network.http.pipelining.ssl
Masing-masing klik 2 kali agar value berubah menjadi true.
Kemudian pada bagian network.http.pipelining.maxrequests agar maksimal rubah value menjadi 30. - Restart Firefox sobat.
- Rasakan bedanya.
Ada yang bilang kotak komentar tanpa emoticon membuat blog kurang hidup. Apa benar ? Yuk kita buktikan ! Siapa tahu ini memang benar.
Bagi sobat yang belum menambahkan icon dengan berbagai karakter bisa menampilkan emoticon ini pada kotak komentar yang sobat punya. Kita bisa menggunakan icon yang biasa di gunakan pada yahoo! messenger seperti contoh di bawah ini.
Bagi sobat yang belum menambahkan icon dengan berbagai karakter bisa menampilkan emoticon ini pada kotak komentar yang sobat punya. Kita bisa menggunakan icon yang biasa di gunakan pada yahoo! messenger seperti contoh di bawah ini.
:) 
:( 
;) 
:D 
;;) 
:-/ 
:x 
:P 
:-* 
=(( 
:-o 
x( 
:(( 
:)) 
:| 
=)) 8-} 
:-L 
B-( 
;)) 
:)] 
~x( 
:-t Bagi yang belum tahu cara memasang emoticon pada kotak komentar bisa ikuti langkah-langkahnya:
- Masuk ke blog sobat.
- Klik tata letak.
- kemudian klik edit HTML.
- Beri tanda pada Expand Template Widget.
- Cari kode </body>
- Letakkan kode ini di atasnya. Hingga posisinya sbb:
<script src='http://sites.google.com/site/darmasites/my-forms/emoticon.js' type='text/javascript'/>
</body> - Langkah selanjutnya cari kode yang mirip seperti di bawah ini.
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
- Kemudian letakkan kode emotnya di bawah kode <p class='comment-footer'>
Sehingga hasil penempatannya akan seperti di bawah ini:
<p class='comment-footer'>
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((<br/>
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/> :-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/> B-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/> ;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/> - Kemudian klik pratinjau.
- Setelah dirasa aman baru klik simpan.
SEMOGA BERMANFAAT
.Pada posting yang sebelumnya saya pernah membahas bagaimana cara menghilangkan garis di bawah link. Hubungan dengan posting kali ini adalah sama-sama mengenai sebuah link, yaitu tentang bagaimana cara merubah warna link Karena kode untuk merubah warna link letaknya sama dengan menghilangkan garis di bawah link, maka cara yang kita gunakanpun hampir sama. Untuk bernostalgia maka kita ulang lagi bagaimana caranya:
- Masuk ke blog sobat
- Klik tata letak
- Pilih edit HTML
- Cari kode yang hampir mirip di bawah ini:
a:link {
color:#0000cc;
text-decoration: underline;
}
a:hover {
color:#ff0000;
text-decoration: underline;
}
a:visited {
color:#006600;
text-decoration: underline;
}
- Jika sudah selesai mengganti jangn lupa Simpan perubahan
- a:link {
color:#0000cc;
text-decoration: underline;
}
Link ini akan berwarna biru.
a:hover {
color:#ff0000;
text-decoration: underline;
}
Jika mouse kita arahkan pada link maka akan berubah menjadi warna merah.
a:visited {
color:#006600;
text-decoration: underline;
}
Jika link selesai diklik pengunjung maka link akan berubah menjadi hijau.
Semoga bermanfaat.
Memang menyenangkan kalau kita disuruh bermain-main dengan gambar. Apalagi gambar atau image yang kita suka, rasanya ingin cepat-cepat dipajang untuk dipamerkan ( kalau yang ini lagi pamer gigi ). Posting kali ini berhubungan dengan gambar zoom ala dynamic drive, yaitu gambar akan membesar ketika disorot. Maksudnya saat mouse kita arahkan ke gambar maka gambar akan lebih besar dari ukuran sebelumnya.
Untuk membuatnya sobat bisa menggunakan cara di bawah ini.
( kalau yang ini lagi pamer gigi ). Posting kali ini berhubungan dengan gambar zoom ala dynamic drive, yaitu gambar akan membesar ketika disorot. Maksudnya saat mouse kita arahkan ke gambar maka gambar akan lebih besar dari ukuran sebelumnya.Untuk membuatnya sobat bisa menggunakan cara di bawah ini.
- Masuk ke blog sobat.
- Klik tata letak.
- Pilih edit HTML.
- Cari kode </head>.
- Letakkan script di bawah ini di atasnya, hingga posisinya sbb:
<style type='text/css'>
border:none;
vertikal-align:top;}
</style>
<script src="http://sites.google.com/site/darmasites/my-forms/gambarmembesarketikadisorot.js" type="text/javascript">
</script>
</head>. - Kemudian klik simpan.
Misal:
<img class="expando" border="0" src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png" width="75" height="75">
Untuk melihat hasilnya arahkan cursor sobat pada gambar di bawah.
Semoga bermanfaat !
Setelah cukup lama tidak update dan mumpung ada kesempatan,kali ini saya ingin berbagi pada teman blogger khususnya blogger baru yang mungkin masih belum tahu bagaimana membuat tooltip dengan menggunakan css. Saya memilih untuk menggunakan tooltip dengan css ini karena menganggap cukup ringan dari pada dengan menggunakan javascript.
Untuk membuatnya sobat bisa menggunakan cara di bawah ini:- Seperti biasa login ke blog sobat.
- Pilh tata letak.
- Klik edit html.
- Letakkan kode di bawah ini di atas kode ]]></b:skin>hingga posisinya sbb:
.tooltip {position:relative;}
.tooltip span {display:none;}
.tooltip:hover span {
display:block;
position:absolute;
width:200px;
left:20px;
top:20px;
background-color:#006633;
border:3px solid #0099FF;
padding:5px;
font-size:15px;
color:#000000;
text-decoration:none;
font-family:Verdana,arial, helvetica, sans-serif;}
]]></b:skin>
- Kemudian klik simpan.
- <a href="http://activekita.blogspot.com/2010/04/membuat-tooltip-dengan-menggunakan-css.html" class="tooltip"><span>MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS</span>Tooltip</a>
Ganti link yang dicetak merah dengan link milik sobat.
Sedang yang berwarna hijau adalah text yang akan keluar,bisa diganti dengan text yang sobat inginkan.
Jika ingin mengganti background dengan sebuah gambar, maka sobat cukup menganti background-color:#006633; dengan alamat gambar milik sobat.
Cara menulis kodenya seperti di bawah ini:
background:url("http://i761.photobucket.com/albums/xx252/darma_bucket/gambar10.jpg")no-repeat bottom;
Ganti alamat gambar yang dicetak merah dengan alamat gambar milik sobat.
Contoh hasilnya kurang lebih seperti di bawah ini.
Untuk melihat hasilnya arahkan mouse pada link di bawah.
MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSSTooltip
Biasanya komentar antara pengunjung dan pemilik blog mempunyai tampilan yang sama. Karenanya kadang si pengunjung sulit membedakan mana yang komentar pengunjung dan yang mana jawaban pemilik blog. Untuk itu biasanya pemilik blog menyiasati dengan memberi tampilan warna background yang berbeda atas jawaban untuk pengunjung. Untuk sobat yang ingin tampilan kotak komentarnya berbeda dan belum tahu caranya bisa ikuti cara di bawah ini.
Di bawah ini adalah cara membuat komentar pengunjung berbeda dengan pemilik blog (admin )
Di bawah ini adalah cara membuat komentar pengunjung berbeda dengan pemilik blog (admin )
- Login ke blog sobat.
- Pilih tata letak.
- Klik edit html.
- Beri tanda centang pada Expand template widget.
- Cari kode yang mirip di bawah ini, kemudian tambahkan kode yang berwarna merah.
/* Comments ----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em; text-transform:uppercase;
letter-spacing:.2em;
color: #999999;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
.admin-comments{
background:#00CC33;
border:3px solid #FF9966;
padding:5px;
Kode warna merah adalah kode yang harus sobat tambahkan.
Kode tersebut bisa juga sobat letakkan di atas kode ]]></b:skin> tinggal terserah sobat mau meletakkannya di mana.
Kemudian kita juga bisa mengganti warna background,sobat bisa menyesuaikan kode warnanya dengan warna template sobat. Bisa lihat Kode warna di sini - Setelah selesai meletakkan kode di atas tarik scroll ke bawah, cari kode seperti di bawah ini dan tambahkan juga kode yang berwarna merah.
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt> <b:if cond='data:comment.author == data:post.author'>
<dd class='admin-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/><dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'>
<data:comment.body/>
</span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd></b:if> <dd class='comment-footer'> - Kode yang berwarna merah adalah kode yang harus sobat tambahkan.
- Jangan lupa klik pratinjau terlebih dulu, jika tidak muncul peringatan baru klik simpan.
Mungkin sobat ada yang ingin menambahkan recent comment pada blogspot. Caranyapun tidak begitu sulit. Sobat tinggal menambahkan alamat feed milik sobat, seperti cara di bawah ini.
- Login ke blog sobat
- Pilih tata letak.
- Klik tambah gadget.
- Pilih feed
Tambahkan konten dari feed RSS atau Atom ke blog Anda. - Masukkan alamat feed milik sobat. Pilih salah satu yang rss atau yang atom.
Untuk yang rss cara penulisannya seperti ini
http://ngelanturwes.blogspot.com/feeds/comments/default?alt=rss
Sedang untuk yang atom penulisannya seperti ini.
http://ngelanturwes.blogspot.com/feeds/comments/default
- Kemudian klik lanjutkan.
- Beri Judul,misal recent comments atau atau komentar baru terserah sobat.
- Sobat juga bisa memilih item yang ingin sobat tampilkan, seperti di bawah ini.
Tampilkan item.
Tanggal Item.
Sumber/pengarang item.
Buka link di jendela baru. - Kemudian Klik simpan.
Lihat hasilnya.
Cara Membuat Blog Di Blogspot I Tutorial Membuat blog, ini merupakan postingan pertama di blog baru saya setelah blog lama saya labhki.com telah dihack oleh orang yang tidak bertanggung jawab :(. Nah postingan ini khusus untuk pemula yang saya kutip dari Ridwanaz.com, buat master-master blogger mohon kritik dan sarannya ya :).
Berikut Cara Membuat Blog Di Blogspot I Tutorial Membuat blog
sumber : http://ridwanaz.com/teknologi/blog/panduan-langkah-cara-membuat-atau-bikin-blog-di-blogspot/
Nah, itulah Cara Membuat Blog Di Blogspot I Tutorial Membuat blog dari saya, jika ada kritik dan saran tulis di kota komentar ya :).
Read More >>
Berikut Cara Membuat Blog Di Blogspot I Tutorial Membuat blog
- Sebelum membuat blogkamu harus memiliki alamat email yang aktif, jika belum memiliki ane sarankan untuk membuat email di Gmail agar lebih serasi gitu :D, untuk membuat email di gmail silahkan klik DISINIBUAT AKUN atau CREATE AN ACCOUNT setelah itu isi formulir pendaftaran dengan baik dan benar :). Setelah semua pertanyaan di isi centang Persyaratan layanan kemudian klik SAYA MENERIMA. BUAT AKUN SAYA.
- Jika kamu sudah memiliki atau membuat email baru, klik www.blogger.com untuk membuat blog dan tunggu hingga muncul tampilan seperti di bawah kemudian klik MEMULAI
Sumber : http://ridwanaz.com/teknologi/blog/panduan-langkah-cara-membuat-atau-bikin-blog-di-blogspot/
- Setelah itu isi semua formulir pendaftaran
E-KTPdengan baik dan benar :).Setelah semuanya diisi klik LANJUTKAN. - Setelah kamu meng-klik LANJUTKAN tadi, tunggu hingga muncul tampilan seperti di bawah dan isi Kolom Judul Blog dan Alamat blog sesuai dengan keinginanmu, jika alamat blog menggunakan 2 kata atau lebih gunakan tanda ( – ). karena blogspot tidak bisa menggunakan spasi. contoh pengisiannya perhatikan gambar bawah.
- Setelah kamu isi semua klik LANJUTKAN, dan tunggu hingga tampilan berikut muncul
sumber : http://ridwanaz.com/teknologi/blog/panduan-langkah-cara-membuat-atau-bikin-blog-di-blogspot/. pilih template yang kamu inginkan lalu klik LANJUTKAN.
- Setelah kamu meng-klik LANJUTKAN berarti blog kamu telah jadi dan untuk memulai blogging klik MULAI BLOGGING.
sumber : http://ridwanaz.com/teknologi/blog/panduan-langkah-cara-membuat-atau-bikin-blog-di-blogspot/
Nah, itulah Cara Membuat Blog Di Blogspot I Tutorial Membuat blog dari saya, jika ada kritik dan saran tulis di kota komentar ya :).
Ingin mendapatkan like status lebih banyak tanpa meminta teman anda likenya? caranya mudah
- Log in ke account FACEBOOK anda
- klik link : like 9.777
- klik link : like 10.000
- klik link : like 1000.000
nah, itulah tips dan trik dari saya.
Seo, apa itu seo? ya benar sekarang banyak para blogger yang mencari keyword ini di Google untuk mempelajar ilmu seo.
Ada Beberapa defenisi tentang seo, namun dapat kita simpulkan bahwa seo adalah sebuah metode/cara agar search engine selalu mengindex website/blog kita diinternet agar setiap pencarian dengan keyword (kata kunci) melalui search engine dapat ditampilkan pada halaman utama atau no. pertama.
Seo sendiri merupakan kependekan dari Search engine optimazition, banyak manfaat yang dapat kita peroleh dari mempelajari ilmu seo diantaranya sebagai berikut :
- Menaikkan pengunjung ke website/blog kita,.
- Mendatangkan pengunjung lebih banyak ke website/blog kita.
Pada kenyataanya hampir 90% pengunjung-pengunjung baru menemukan sebua web/blog dari hasil search engine dan search directory dengan keyword tertentu, disinilah menariknya belajar seo karena bisa mendatangkan pengunjung baru.
Nah, sekian penjelasan pendek dari ane tentang Pengertian Seo I Apa Itu Seo? jika ada kritik dan saran tulis di kotak komentar ya :).
Hai sobat-sobat blogger, tempat ini khusus untuk bagi sobat yang ingin bertukar link. Bagi yang ingin bertukar link silahkan koment di bawah ya :), tapi tentunya sobat harus memasang link saya duluan dengan format :
Nama : Tutorial ANE
alamat : http://ngelanturwes.blogspot.com/
berikut banner dan link dan banner sahabat blogger yang sudah tukar link dan banner
Banner :
Link :
- SANG PEMBELAJAR
- Tips Keluarga Harmonis
- Tutorial Linux Ubuntu | Blog | Seo
- Sharing of Knowledge
- Info Toko Surya
- AfuShare
- Arya Dharma Blogs
Langganan:
Postingan
(Atom)