Cara Membuat ToolTips Warna-Warni Dengan CSS3 cara ke I
Tooltips ini menggunakan jquery dan css dan tampilan tooltips ini sangat menarik dengan warna biru, hijau, merah, kuning, putih dan hitam, secara default tooltips ini menampilkan warna kuning. untuk melihat hasilnya
Bagaimana apa sobat tertarik untuk membuat tooltips warna-warni ini?
Langsung saja kita ikuti tutorial berikut ini :
1. Login ke Blogger
2. Pilih tab Dsign > Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode di bawah ini dan pastekan tepat di bawah kode ]]></b:skin>
<link href='https://sites.google.com/site/tutorialseoblogger/file/colortip-1.0-jquery.css' rel='StyleSheet' type='text/css'/>
5. Kemudian cari kode </body>
6. Copy kode di bawah ini dan pastekan tepat di atas kode </body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src='https://sites.google.com/site/tutorialseoblogger/file/colortip-1.0-jquery.js' type='text/javascript'/> <script src='https://sites.google.com/site/tutorialseoblogger/file/scriptcolortips.js' type='text/javascript'/>
7. Simpan template sobat.
8. Untuk mengaplikasikannya tambahkan kode class='blue' untuk menampilkan tooltips berwarna biru
contoh
<a href='http://www.tutorial-4u.com/' title='Tutorial For You' class='blue'>Tutorial For You</a>
Warna yang tersedia, blue, red, green, yellow, white dan black
Selesai sudah tutorial Cara Membuat ToolTips Warna-Warni Dengan JQuery,
selamat mencoba, semoga berhasil dan bermanfaat
Berikut Langkah-Langkah Cara Membuat Tooltip Otomatis di Blog cara ke II
Langkah Pertama, seperti biasa login ke akun blogger sobat. ( bukan punya orang lain...)
Kedua, Masuk ke Rancangan - Edit HTML
Ketiga, Centang Expand Template Widget.
Keempat, Paste Kode Berikut di bawah kode <body>.
<script src='http://javascript-share.googlecode.com/files/wb.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Princexells Seyka (Princelling Saki)</a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #778899;background:#dcdcdc}#ttcont{background:#000000;color:#00ff00}"
};
//]]></script><script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'/>
<script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>
Kelima, Paste Lagi kode berikut di atas kode </body>
</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>
Keenam, Save Template.
NB : Sobat Bisa mengatur tampilan Tooltip dengan memodifikasi kode yang berwarna biru.
Sobat tidak boleh mengubah kode - kode selain yang berwarna biru.... karena kalo tidak, tooltip akan mengalami Error.
Bagaimana apa sobat tertarik untuk membuat tooltips warna-warni ini?
Langsung saja kita ikuti tutorial berikut ini :
1. Login ke Blogger
2. Pilih tab Dsign > Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode di bawah ini dan pastekan tepat di bawah kode ]]></b:skin>
<link href='https://sites.google.com/site/tutorialseoblogger/file/colortip-1.0-jquery.css' rel='StyleSheet' type='text/css'/>
5. Kemudian cari kode </body>
6. Copy kode di bawah ini dan pastekan tepat di atas kode </body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src='https://sites.google.com/site/tutorialseoblogger/file/colortip-1.0-jquery.js' type='text/javascript'/> <script src='https://sites.google.com/site/tutorialseoblogger/file/scriptcolortips.js' type='text/javascript'/>
7. Simpan template sobat.
8. Untuk mengaplikasikannya tambahkan kode class='blue' untuk menampilkan tooltips berwarna biru
contoh
<a href='http://www.tutorial-4u.com/' title='Tutorial For You' class='blue'>Tutorial For You</a>
Warna yang tersedia, blue, red, green, yellow, white dan black
Selesai sudah tutorial Cara Membuat ToolTips Warna-Warni Dengan JQuery,
selamat mencoba, semoga berhasil dan bermanfaat
Berikut Langkah-Langkah Cara Membuat Tooltip Otomatis di Blog cara ke II
Langkah Pertama, seperti biasa login ke akun blogger sobat. ( bukan punya orang lain...)
Kedua, Masuk ke Rancangan - Edit HTML
Ketiga, Centang Expand Template Widget.
Keempat, Paste Kode Berikut di bawah kode <body>.
Kelima, Paste Lagi kode berikut di atas kode </body><script src='http://javascript-share.googlecode.com/files/wb.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Princexells Seyka (Princelling Saki)</a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #778899;background:#dcdcdc}#ttcont{background:#000000;color:#00ff00}"
};
//]]></script><script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'/>
<script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>
</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>Keenam, Save Template.
NB : Sobat Bisa mengatur tampilan Tooltip dengan memodifikasi kode yang berwarna biru.
Sobat tidak boleh mengubah kode - kode selain yang berwarna biru.... karena kalo tidak, tooltip akan mengalami Error.
Cara Membuat Tooltip Zigzag Effect diblog
Hello,..All bloggers all around Indonesia, in this nice opportunity Education for All would like to share an article about how to make Tooltip Zigzag Effect in a blog. there are many ways how to beauty your blog. one of the by putting Tooltip Zigzag Effect in your blog. I promise that your blog will look cute if you wanna put this one. and even will make your guest stay at home when visiting your blog. trust me. You wanna try it?? well, without further a do just some of the hints bellow. it's very easy.
- log in to your blog
- Click design
- Choose Edit HTML
- Find the code
</head>
- If you've found it, put the code bellow above the code
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/sin1ajablog/jquery/Tooltip-ZigZagSystem.js" type="text/javascript"></script>
<style type='text/css'>
.tooltip{
display:none;
background:#333;
width:250px;
font-family:Arial;
font-size:13px;
padding:10px 10px 20px;
color: #00CCFF;
text-shadow:1px 1px 1px #000;
border: 4px solid #555;
border-radius:10px;
box-shadow:0px 5px 20px rgba(125,124,250,.9);
}
#jqtips img{
border:0;
cursor:pointer;
margin:0 8px;
}
</style>
The next step is, find the code </body> and put the code bellow above the code </body>
<script type="text/javascript">
$("#jqtips a[title]").tooltip({effect: 'bouncy'});
$("#jqtips img[title]").tooltip({effect: 'bouncy'});
</script>
And now the explanation how to use Tooltip , if you wanna to use tooltip code in a posting area, please move mode Compose to mode EDIT HTML,
if you wanna to use tooltip code in sidebar please click ,
Design ► Add Gadget ► Choose HTML/Javscript
here is the code ▼
1. the code Tooltip in link form
<div id="jqtips">
<a href="your link here" title="Write down tooltip text here!">your tittle link here</a>
</div>
2. The Tooltip Code in link and picture form
<div id="jqtips">
<a href=" your link here " title="Write down tooltip text here!"><img src="your URL picture here" /></a>
</div>
3. The Tooltip Code in picture form
<div id="jqtips">
<img src=" your URL picture here " title="Write down tooltip text here!" />
</div>
For the CSS code please create by yourself.
Hello,..All bloggers all around Indonesia, in this nice opportunity Education for All would like to share an article about how to make Tooltip Zigzag Effect in a blog. there are many ways how to beauty your blog. one of the by putting Tooltip Zigzag Effect in your blog. I promise that your blog will look cute if you wanna put this one. and even will make your guest stay at home when visiting your blog. trust me. You wanna try it?? well, without further a do just some of the hints bellow. it's very easy.
- log in to your blog
- Click design
- Choose Edit HTML
- Find the code
</head> - If you've found it, put the code bellow above the code
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/sin1ajablog/jquery/Tooltip-ZigZagSystem.js" type="text/javascript"></script>
<style type='text/css'>
.tooltip{
display:none;
background:#333;
width:250px;
font-family:Arial;
font-size:13px;
padding:10px 10px 20px;
color: #00CCFF;
text-shadow:1px 1px 1px #000;
border: 4px solid #555;
border-radius:10px;
box-shadow:0px 5px 20px rgba(125,124,250,.9);
}
#jqtips img{
border:0;
cursor:pointer;
margin:0 8px;
}
</style>
The next step is, find the code
</body> and put the code bellow above the code </body><script type="text/javascript">
$("#jqtips a[title]").tooltip({effect: 'bouncy'});
$("#jqtips img[title]").tooltip({effect: 'bouncy'});
</script>
And now the explanation how to use Tooltip , if you wanna to use tooltip code in a posting area, please move mode Compose to mode EDIT HTML,
if you wanna to use tooltip code in sidebar please click ,
Design ► Add Gadget ► Choose HTML/Javscript
here is the code ▼
1. the code Tooltip in link
if you wanna to use tooltip code in sidebar please click ,
Design ► Add Gadget ► Choose HTML/Javscript
here is the code ▼
1. the code Tooltip in link
form <div id="jqtips">
<a href="your link here" title="Write down tooltip text here!">your tittle link here</a>
</div>
2. The Tooltip Code in link and picture form
<div id="jqtips">
<a href=" your link here " title="Write down tooltip text here!"><img src="your URL picture here" /></a>
</div>
3. The Tooltip Code in picture form
<div id="jqtips">
<img src=" your URL picture here " title="Write down tooltip text here!" />
</div>
For the CSS code please create by yourself.
0 komentar:
Posting Komentar