CARA MEMBUAT FORM CONTACT / KONTAK KAMI DI BLOGSPOT

Keinginan untuk membuat form contact / kontak kami berawal dari template yang sudah ada menu form contact / kontak kami tersebut.
Awalnya sich bingung gimana ngisi menu tersebut, tapi setelah blog walking akhirnya saya menemukan cara untuk membuat form contact / kontak kami.
Selain berguna untuk mengirim pesan secara pribadi form contact / kontak kami menambah kesan professional pada blogspot kita.
Bagi kalian yang tertarik untuk memasang form contact / kontak kami caranya adalah sebagai berikut :

Sumber : Kang Rohman                Demo : Klik contact diatas sebelah kanan

1.    Kunjungi situs Kontactr
2.    Klik sign up,
lihat screenshot
3.    Isi form registrasi,
lihat screenshot
4.    Cek email kalian, klik link-nya untuk mengaktifkan akun kalian.
5.    Login.
6.    Copy paste kode HTML-nya pada postingan,
lihat screenshot
7.    Selesai
Keterangan:
       Untuk membuat halaman form contact-nya seperti membuat postingan tinggal merubah menu compose ke menu edit.
Semoga bermanfaat and happy bloging.

CONTACT

Jika kalian ingin memberi saran, kritikan, atau apa saja silahkan isi form dibawah ini, terima kasih.

Your Name :
Your Email :
Subject :
Message :
Image (case-sensitive):

MERUBAH STYLE PAGENUMBER / NAVIGASI HALAMAN

Pada postingan sebelumnya saya share tentang cara memasang Pagenumber/Navigasi Halaman.
Jika kalian merasa kurang puas dengan style/tampilan Page numbernya. Maka kali ini  saya akan berbagi tentang cara merubah tampilannya tersebut.
Untuk caranya adalah sebagai berikut :

Sumber : Abu farhan

1. Ikuti langkah pada postingan CARA MEMASANG NAVIGASI HALAMAN/PAGE NUMBER
2. Ganti kode pada langkah ke-2 dengan kode dibawah ini :

    Untuk style 1:        Demo

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }
 
.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }
 
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x;
  }
 
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -25px repeat-x;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x;
  text-decoration: none;
  }
]]></b:skin>
 
Untuk style 2:        Demo

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }
 
.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }
 
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #919106;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(http://1.bp.blogspot.com/_McxL-_3YYuM/TBG_enC7gWI/AAAAAAAAAAc/HWqEJ9LyzPc/s1600/wp2.jpg) 0 -50px repeat-x;
  }
 
.showpageNum a:hover {
  border:1px solid #aeae0a;
  background: #ccc url(http://1.bp.blogspot.com/_McxL-_3YYuM/TBG_enC7gWI/AAAAAAAAAAc/HWqEJ9LyzPc/s1600/wp2.jpg) 0 -25px repeat-x;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #919106;
  background: #666 url(http://1.bp.blogspot.com/_McxL-_3YYuM/TBG_enC7gWI/AAAAAAAAAAc/HWqEJ9LyzPc/s1600/wp2.jpg) 0 0 repeat-x;
  text-decoration: none;
  }
]]></b:skin>

Untuk style 3:        Demo 

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }
 
.showpageArea a {
  color: #fff;
  }
 
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #363636 url(http://2.bp.blogspot.com/_McxL-_3YYuM/TBG_h_wTHCI/AAAAAAAAAAk/rFiXqN3fyes/s1600/wp3.jpg) 0 -25px repeat-x;
  }
 
.showpageNum a:hover {
  background: #044697 url(http://2.bp.blogspot.com/_McxL-_3YYuM/TBG_h_wTHCI/AAAAAAAAAAk/rFiXqN3fyes/s1600/wp3.jpg) 0 -50px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #e30000 url(http://2.bp.blogspot.com/_McxL-_3YYuM/TBG_h_wTHCI/AAAAAAAAAAk/rFiXqN3fyes/s1600/wp3.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }
]]></b:skin>

Untuk style 4:        Demo

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }
 
.showpageArea a {
  color: #fff;
  }
 
.showpageNum a {
  padding: 3px 4px;
  margin:0 4px;
  text-decoration: none;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.jpg) 0 -25px repeat-x;
  }
 
.showpageNum a:hover {
  border-top:2px solid #999;
  border-left:1px solid #999;
  border-right:1px solid #999;
  border-bottom:1px solid #999;
  background: #999 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.jpg) 0 -50px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  border-top:2px solid #000;
  border-left:1px solid #000;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background: #000 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }
]]></b:skin>

Untuk style 5:        Demo       

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }
 
.showpageArea a {
  color: #fff;
  }
 
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #333 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 -50px repeat-x;
  }
 
.showpageNum a:hover {
  background: #666 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 -25px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #06a2b9 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }
]]></b:skin>

Untuk style 6:        Demo

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #fff;
  font-size:11px;
  margin:10px;
  padding:8px 20px;
  background: #333;
  }
 
.showpageArea a {
  color: #fff;
  }
 
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #666;
  }
 
.showpageNum a:hover {
  background: #888;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #da6100;
  text-decoration: none;
  }

.showpageOf{
  margin:0 8px 0 0;
  }
]]></b:skin>

3. Klik Save Template
4. Selesai
    Keterangan:
- Untuk mempermudah mencari kode gunakan ctrl+f
- Jika kode ada yang ga bisa ditemukan coba kilik Expand Template widget.

Semoga bermanfaat and happy bloging

CARA MEMASANG NAVIGASI HALAMAN/PAGE NUMBER

Page number/navigasi halaman dengan menggunakan angka, memberi kemudahan bagi pengunjung blog kita untuk menjelajahi isi blog kita.
Selain itu page number juga membuat tampilan blog kita lebih menarik dan kelihatan proffesional.
Untuk cara pasang page number adalah sebagai berikut:

Demo:Lihat dibawah postingan                      Sumber: abu farhan 


1. login ke blogger, pilih rancangan, pilih edit HTML.

2. cari kode ini "]]></b:skin>" kemudian ganti dengan kode di bawah ini:
      kode:
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd;
  }


.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }


.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666;
  text-decoration: none;
  }
]]></b:skin>


3. cari kode ini "</body>" kemudian ganti dengan kode di bawah ini:
      kode:
&lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;
&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;
</body>


4. centang kotak expand widget dan cari kode 'data:label url' kemudian ganti dengan kode di bawah ini:
     kode:
'data:label.url + &quot;?&amp;max-results=7&quot;'


5. Save template.

6. Selesai semoga bermanfaat.
    keterangan:
- var postperpage=7; adalah jumlah postingan yang akan tampil di halaman, untuk itu sesuaikan dengan jumlah postingan,per halaman kalian,untuk menyesuiakan postingan klik edit pada elemen post di halaman elemen laman jika jumlah postingan kalian 10 maka tulis pada maka ganti angka 7 dengan angka 10.

- var numshowpage=4; adalah nomor navigasi halaman yang akan ditampilkan.

CARA PASANG WIDGET CHATING DI BLOG

Shoutmix adalah situs penyedia layanan chatting, jika kalian ingin menambah aplikasi chating di blog kalian, shoutmix adalah jawabannya.
Kalian juga bisa menambahkan ikon gambar/emotion pada waktu pengunjung/kalian berchating ria seperti Yahoo Messenger.
Yapz...widget yang satu ini memang sangat bagus untuk melengkapi blog kalian.
Untuk cara pasang shoutmix adalah sebagai berikut:
1. Kunjungi situsnya disini.
2. Klik create shoutbox, untuk melihat screenshot klik
disini
3. Isi form registrasi-nya, untuk melihat screenshot klikdisini
- shoutbox ID
- Ketik password
- Ketik kembali passwordnya
- Isikan nama kalian
- Isikan dengan alamat kalian
4. Klik "I have read and agree to the terms of service"
5. Klik continue
6. Pada menu setting, untuk melihat screenshot klikdisini
a. Style and color untuk merubah tampilan shoutmix
b. Smileys adalah untuk menampilkan emotion pada waktu chatting, untuk melihat screenshot klikdisini
- Untuk menambahkan emotion save gambar di bawah ini, kemudian upload di hostingan kalian:

- Isikan URL gambar Yang tadi kalian upload, isi kode-nya,isi optional, klik add.
- Save setting.
c. Get code, Copy script-nya disini untuk dipasang di blog, untuk melihat screenshot klikdisini
7. Login ke blogger.
- Pilih rancangan.
- Pilih Pilih Elemen laman
- Pilih tambah gadget
- Pilih HTML/Javascript.
- Paste script yang tadi
- Save
8. Selesai
Semoga bermanfaat dan selamat ngeblog.

CARI TAHU PENGUNJUNG BLOG DENGAN FEEDJIT

feedjit.com adalah situs penyedia layanan live traffic feed, artinya kalian bisa mengetahui
orang-orang yang mengunjungi blog kalian mulai darimana asal mereka, artikel mana yang di kunjungi, dan waktu  kunjungannya.Untuk cara pasang widget ini adalah sebagai berkut:
1.Masuk ke blogger
2.Klik rancangan di dashboard
3.Klik elemen laman
4.Klik tambah gadget.
5.Klik Html Javascript
6.copy/paste kode di bawah ini:



<script src="http://feedjit.com/serve/?bc=ffffff&amp;tc=494949&amp;brd1=336699&amp;lnk=494949&amp;hc=336699&amp;ww=160" type="text/javascript">
</script>

7. Klik save.

8. Selesai 160 merupakan lebar dari wiget tersebut.
Semoga bermanfaat and happy bloging.

DEMO CARA MENAMPILKAN RECENT COMMENT

Dibawah ini merupakan demo cara menampilkan recent comment cara pasang yang sangat mudah sekali dan ini merupaka recent comment dari blog karman on blog


Kembali ke artikel

CARA MENAMPILKAN RECENT COMMENT

Widget yang satu ini mungkin akan terasa bermanfaat bagi pemilik blog, karena dengan wiget akan menampilkan komentar-komentar terbaru dari pengunjungnya dan pemilik blog dapat  dengan mudah menanggapi komentar tersebut.
Widget ini tidak hanya menampilkan komentar terbaru dari satu postingan saja tetapi seluruh postingan kita.Untuk selanjutnya kita mari kita coba untuk membuatnya.
Berikut adalah langkah-langkahnya :

Demo Javascript: Sumber:Beautiful Beta
                            - recent comment.js
1. Login ke blogger
2. Pilih tata letak kemudian pilih HTML javascript.
3. Pasang kode berikut pada tag <head> :
Contoh:
<head>

pasang kode disini

</head>
Kodenya:
<script type="text/javascript" src="http://dfssdf.googlecode.com/files/gcrecentcomment.js
"></script>
4. Pasang kode berikut pada  sidebar/tambah widget.
Kodenya:
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://karman-goes74.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
4. Pilih save lalu Klik lihat blog
5. Selesai
Keterangan:
- Klik kanan pada pada teks recent comment.js lalu kalian save.
- Upload file tersebut ke hostingan kalian,untuk cara upload bisa kalian lihat disini. 
- Ganti URL yang berwarna merah dengan URL file javascript kalian.
- Angka 10 merupakan jumlah komentar yang akan di tampilkan.
- Ganti teks yang berwarna biru dengan alamat blog kalian.
- Untuk memudahkan dalam pencarian tag <head> gunakan Ctrl+F
Semoga bermanfaat and happy bloging....

DEMO MEMBUAT TAGSCLOUD BERUBAH-UBAH

• PHP
• CSS
• JavaScript
• xHtml
• C++
• Databases
• Marketing

Ini adalah demo tagscloud berubah-ubah akan sangat menarik lagi bila di tempatkan di sidebar.

Kembali ke artikel

CARA MEMBUAT TAGSCLOUD BERUBAH-UBAH

Tagscloud menurut pandangan saya adalah sekumpulan link yang di tampilkan secara tidak teratur dalam segi ukuran huruf.Sehingga kesannya seperti awan, mungkin oleh sebab itu dinamakan tagscloud, he..he..so tahu ya...Selain membuat blog kita menarik dan kelihatan professional tagscloud juga mempermudah
pengunjung blog menemukan seluruh judul postingan kita dan membuat hemat ruang blog kita.
ada banyak sekali cara membuat tagscloud, berhubung blog ini di dedikasikan ke orang -orang yang masih belajar ngeblog seperti saya.
Saya akan berbagi cara membuat tagscloud yang sangat mudah sekali kalo bahasa kerennya usefull,
Seperti bahasa marketer "murah tapi bukan murahan" ini juga mudah tapi berbobot ini script  bisa membuat tagscloud kita berubah-ubah warna, tempat, dan ukuran hurufnya.

Untuk cara membuatnya sebagai berikut :
Demo Download javascript: Sumber: Dime3studio
                             - tagscloud.js
                             - tagscloud.css
Seperti biasa login dulu ke blog kita, pilih Rancangan, pilih Edit HTML
1.  Pasang kode di bawah ini di dalam  tag <head>
Contoh:  
<head>

Pasang kode disini

</head>
Kodenya:

<link type="text/css" media="screen" rel="stylesheet"  href="http://dfssdf.googlecode.com/files/tags%20cloud.css" />
<script type="text/javascript"  src="http://dfssdf.googlecode.com/files/tags%20cloud.js"></script>

2. Pasang kode di bawah ini dalam tag <body>
Contoh:  
 <body>


Pasang kode disini

</body>

Kodenya:
<ul id="dmCloud2" class="dmCloud">
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">xHtml</a></li>
<li><a href="#"> C++ </a></li>
<li><a href="#">Databases</a></li>
<li><a href="#">Marketing</a></li>
      
</ul>


<script type="text/javascript">
var cloud2 = new dmCloud('dmCloud2', '10,20', '#BF1717,#222,green', false, true, 5);
</script>

3. Selesai
keterangan:
- Klik kanan pada file javascript  dan file css-nya lalu save kemudian upload di hostingan kalian.untuk cara upload klik disini
- Ganti URL yang berwarna merah dengan URL file css kalian.
- Ganti URL yang berwarna biru dengan URL file javascript kalian.
- Untuk tanda "#" adalah URL yang akan di pasang di tagscloud
- Untuk teks berwarna ungu adalah teks yang akan tampil di tagscloud
- kode pada body bisa di pasang pada tambah widget dan postingan
- Diharapkan kalian mengganti file URL file javascript dan css dengan hostingan kalian karena jika tidak sewaktu-waktu script bisa tida berfungsi

Semoga bermanfaat dan selamat ngeblog.....

DEMO MEMBUAT POP UP WINDOW

Ini adalah demo cara membuat pop up window silahkan kalian klik pada teks di bawah ini.
POp up image

Kembali ke Artikel

CARA MEMBUAT POP UP WINDOW

Salah satu cara untuk membuat blog kita menghasilkan uang adalah dengan memasang baner iklan sponsor.
Semakin banyak baner yang kita pasang maka semakin besar peluang untuk menghasilkan uang, untuk memasang banyak baner tentunya di perlukan ruang yang cukup luas.
Untuk itu saya akan sharing tentang cara membuat pop up window karena pop up window lumayan menghemat ruang dalam blog kita.

Berikut adalah caranya :

Demo File javascript-nya Sumber: javascriptkit
                        - popupwin.js

1. Pasang kode di bawah ini di dalam head HTML
Contoh :
<head>


Pasang kode disini

</head>

Kode-nya :
<script type="text/javascript" src="http://dfssdf.googlecode.com/files/popupwin.js"></script>


2. Pasang kode di bawah ini pada body HTML.
Contoh :
<Body>

Pasang kode  disini

</Body>

Kode-nya :
<a href="#" onClick="jkpopimage(' http://i823.photobucket.com/albums/zz154/faturahman74/SMILE.jpg ', 325, 445,''); return false">
POp up image</a>

3. Selesai
Keterangan :
- Klik kanan pada file javascript-nya lalu save dan upload ke hostingan kalian, untuk cara upload klik disini
- Ganti URL javascript yang berwarna orange dengan URL javascript yang telah kalian upload tadi.
- Ganti url yang berwarna biru dengan url gambar kamu.
- Angka 325 adalah lebar pop up yang akan muncul
- Angka 445 adalah tinggi pop up yang akan muncul
- Warna ungu merupakan teks yang akan di beri pop up

Semoga bermanfaat n happy bloging,jangan lupa komentarnya ya..

CARA MEMBUAT TOOLTIP DENGAN PENJELASAN GAMBAR DAN TEKS

Penggunaan tooltip dalam bloging merupakan hal yang penting karena dengan tooltip kita bisa memunculkan kotak penjelasan dari teks atau gambar-gambar tertentu,bahkan kita dapat membuat screenshoot di teks tertentu.
Tooltip juga bisa menghemat ruang blog kita jadi kita bisa pasang banyak iklan ,karena tooltip bekerja pada saat kursor berada di atas teks atau gambar tertentu.
Berikut cara-cara membuat tooltip :


DEMO JAVASCRIPT-nya SUMBER: Css globe
         - jquery.js
         - main.js

Langkah ke 1 pasang kode di bawah ini di pada bagian head HTML

Kodenya :

<script src="http://dfssdf.googlecode.com/files/tooltipjquery.js" type="text/javascript"></script>
<script src="http://dfssdf.googlecode.com/files/tolltipmain.js" type="text/javascript"></script>


<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}

h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}



/*  */

#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

/*  */
</style>


Contoh :
<head>


PASANG KODE DI SINI


</head>

Langkah ke 2 pasang kode di bawah ini pada bagian body HTML

Kodenya :

<a href="http:/karman-goes74.blogspot.com" class="screenshot" rel="http://i823.photobucket.com/albums/zz154/faturahman74/SMILE.jpg" title=" HAPPY BLOGING ">HAPPY BLOGING</a>

Contoh :

<body>

PASANG KODE DISINI

</body>

Keterangan :


- Klik kanan pada kedua file javascript-nya lalu save setelah itu upload di file hostingan kalian NB :        untuk cara upload file javascript bisa lihat disini
- Ganti kedua URL  javascript yang berwarna merah dengan URL javascript yang kalian upload tadi.
- Ganti URL yang berwarna biru dengan URL  yang akan kalian akan jadikan tooltip.
- Ganti URL Fhoto yang berwarna Orange dengan URL fhoto kalian,URL fhoto ini  yang akan di jadikan penjelasan link, NB : untuk cara upload Fhoto bisa lihat disini
- Ubah teks yang berwarna pink dengan penjelasan anda,teks ini akan muncul bersama gambar.
- Ubah teks yang berwarna ungu.teks ini yang akan berisi link dan akan memunculkan gambar ketika kursor ditempatkan di atas teks ini.

Selesai

Tulisan ini hanya sebatas sharing dari seorang pemula untuk pemula,Jika ada yang kurang di mengerti kita bisa sharing di kolom komentar di bawah ini ,semoga bermanfaat.and happy blogging.

DEMO MEMBUAT TOOLTIP DENGAN PENJELASAN TEKS DAN GAMBAR

Ini adalah demo membuat tooltip dengan memunculkan gambar dan teks,coba kalian tempatkan kursor di atas teks happy bloging di bawah ini.
HAPPY BLOGING

Kembali ke artikel

CARA UPLOAD FILE JAVASCRIPT/CSS DI GOOGLE CODE

Kode-kode javascript/css sangat mudah digunakan untuk mengoptimalkan blog kita.
Seperti dalam memasang pop up window, recent comment dan sebagainya.
Memasang kode javascript/css bisa dilakukan dengan memasang langsung pada kode HTML.
Tapi cara ini agak sedikit ribet juga jika suatu hari kita harus melakukan pengeditan.
Untuk cara mudahnya adalah dengan cara menyimpan file javascript/css di hostingan.
Ada banyak hostingan yang menyediakan penyimpanan file javascript/css secara gratisan salah satunya adalah google code.
Untuk cara meng-upload file javascript/css di google code adalah sebagai berikut :
1. Kunjungi google code klik disini
2. Klik sign in to create project.
Untuk melihat screenshoot klik disini
3. Isi dengan alamat email kalian.
Untuk melihat screenshoot klik disini
4. Klik create a new project.
Untuk melihat screenshoot klik disini
5. Create project.
Untuk melihat screenshoot klik disini
- Project name : Isi dengan nama project
- Poroject Summary : Isi dengan rangkuman project kalian
- Project description : Isi dengan penjelasan tentang project kalian
- Version control system : pilih mercurial
- Source code licensi: Pilih GNU general public licensi v3
- Centang use separate content licensi lalu pilih apa saja
- Klik create project

6. Untuk mulai mengupload klik downloads pada menu bar lalu klik new download.
Untuk melihat screenshoot klik disini
7. Beri nama pada kotak summary, pilih file javascript/css yang akan di upload.
Untuk melihat screenshoot klik disini
8. Klik Submit
9. Klik pada file yang sudah di upload, lalu klilk kanan untuk mendapatkan URL-nya  
Untuk melihat screenshoot klik disini
10. Selesai

• Keterangan :

- Kalian harus mempunyai akun email google untuk masuk google code.
- Cara penulisan kodenya untuk di pasang di blog adalah sebagai berikut :
Silahkan komentari tulisan saya ini.thx

MENG-UPLOAD GAMBAR DI PHOTOBUCKET

Gambar seringkali di gunakan orang untuk menerangkan suatu hal karena gambar sangat mudah di ingat dan mudah di mengerti.
Begitupun  halnya dalam dunia bloging banyak pengguna blog yg  menggunakan gambar sebagai alat supaya isi blognya mudah di mengerti pengunjungnya.
Untuk dapat memasang gambar pada blog kita perlu menyimpan file gambar tersebut di hostingan kita.
Ada banyak situs yang memberikan tempat penyimpanan file gambar secara percuma alias gratisan, salah satunya adalah situs photobucket.com.
Pada postingan ini saya akan sharing tentang cara meng-upload file gambar di photobucket.

Berikut adalah caranya :

1. Silahkan anda kunjungi situs photobucket.com klik disini
2. Klik sign up pada menu bar.
Untuk melihat screenshot klik disini
3. Isi form registrasi sesuaikan dengan data-data kalian.
Untuk melihat screenshot klik disini
4. Pilih no thanks untuk menyimpan pada tempat gratisan.
Untuk melihat screenshot klik disini
5. Klik Public.
Untuk melihat screenshot klikdisini
6. Klik upload image and video untuk memulai upload lalu pilih file gambar yang akan kita upload.
Untuk melihat screenshot klik disini
7. Klik save untuk menyimpan file yang sudah kita upload.
Untuk melihat screenshot klik disini 
8. Copy kode-kode-nya untuk di pakai di blog.
Untuk melihat screenshot klik disini  
9. Selesai

Semoga tulisan saya ini bermanfaat jika ada yang kurang di mengerti kita bisa sharing di kolom komentar di bawah ini.