Oto Website

Tambah Tooltip jQuery Untuk Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-DnZ_FXr4ltyCmf_Awt6gRqiIINMq75jy18LrbZCOLlX_NM_HBD5nAaxDDi4187wQu_8DSxx9Kb0HX97p04kopn9CRA56uSbGsUDN9mh6dgaD3s1GmdSWmfhyphenhyphenHtQnf7hH-8l_5W7AVg/s1600/untitled.JPG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-DnZ_FXr4ltyCmf_Awt6gRqiIINMq75jy18LrbZCOLlX_NM_HBD5nAaxDDi4187wQu_8DSxx9Kb0HX97p04kopn9CRA56uSbGsUDN9mh6dgaD3s1GmdSWmfhyphenhyphenHtQnf7hH-8l_5W7AVg/s1600/untitled.JPG" /></a></div>
<span class="awal">P</span>lugin tooltip jQuery adalah salah satu alat yang hebat untuk menjelaskan kepada banyak pengunjung dari blog Anda. Anda dapat dengan mudah menerapkan ini ke dalam blog juga sangat mudah untuk menggunakannya.<br />
<br />
Anda dapat menyorot beberapa kata dan menambahkan tooltip kepada mereka, bila ada pengguna melayang pada kata sebuah tooltip mulus akan muncul tepat di atas dari kata disorot dengan tooltip jQuery description.<br />
<br />
Tooltip ini dirancang oleh Nettuts + dan saya telah membagikan ulang ini pada Helper Blogger.Now mari kita lihat bagaimana untuk menambahkannya dan menggunakannya,<br />
<br />
<div style="text-align: center;">
<a class="button" href="http://otowebsite.16mb.com//Tambah%20Tooltip%20jQuery%20Untuk%20Blogger.html" target="_blank"><b>Lihat Demo</b></a></div>
<br />
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Tambah Tooltip JQuery Untuk Blogger?</div>
<br />
Seperti yang saya sebutkan di atas instalasi dan penggunaan tooltip sangat mudah, Anda hanya perlu meletakkan beberapa kode dalam template Anda, cukup ikuti langkah-langkah sederhana di bawah ini.<br />
<br />
<hr color="3e81c4" />
<b><span style="color: #3d85c6; font-size: large;">jQuery</span></b><br />
<hr color="3e81c4" />
<br />
<blockquote class="tr_bq">
<span style="background-color: lime;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></span><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery-tooltip.js"></script></blockquote>
<br />
<hr color="3e81c4" />
<b><span style="color: #3d85c6; font-size: large;">CSS</span></b><br />
<hr color="3e81c4" />
<br />
<blockquote class="tr_bq">
.tip {<br />
    width: 212px;<br />
    padding-top: 37px;<br />
    overflow: hidden;<br />
    display: none;<br />
    position: absolute;<br />
    z-index: 500;<br />
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbL9SD3E2wVyRyZJCGq9aATsTn3tgheOxHi80Tn4XatqZxxYgwfP1tvLXYwonAzIKzKH9SDMeUhkywx5_RuEwJZBcJm3o5w_Vpa3n7yJNNiP5TKIJBRfJsaJnSrMMWaB4npby9qSY6hg/s1600/OW_tipTop.png) no-repeat top;<br />
}<br />
.tipMid {<br />
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvA0uig35jt4cRH-MRCUxF8Pis9YiH4y3tF6_bdNvVF2-PDaBhYq3Oz60Szw4uofp4zybOfK8NUaxHPivfn_WEJ_G8A6cT0DYMViVBpFZIlF2rCPBLe0eUSfa0zw-CSG5YA-vqNbB2ig/s1600/OW_tipMid.png) repeat-y;<br />
    padding: 0 25px 20px 25px;<br />
}<br />
.tipBtm {<br />
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm8GPpX0q3efSHVO0pEZNELWq6hfjyCGQbEEWqzAD8Jp4zMbChr3BOEN9Ut9p-AplX6sGGcEQ_RpCM9TymeOy9XPRAdoDwTCsdmvvsuazUB9iersAEH6nSO0h6p7Lyw3_wdW8XS9OeHg/s1600/OW_tipBtm.png) no-repeat bottom;<br />
    height: 32px;<br />
}</blockquote>
<br />
<hr color="3e81c4" />
<b><span style="color: #3d85c6; font-size: large;">Pemanggil</span></b><br />
<hr color="3e81c4" />
<br />
Pada saat menulis atau mengedit postingan Anda letakkan kode berikut untuk memanggil Tooltip<br />
<br />
<blockquote class="tr_bq">
<div class="tTip" title="<span style="background-color: red;"><span style="color: white;">Tambahkan Pesan Tooltip Disini</span></span>"><span style="background-color: red;"><span style="color: white;">Tambahkan Text Anda Disini</span></span></div></blockquote>
Dan jangan lupa untuk merubah teks yang di block merah di atas dengan teks Anda sendiri.

Tambah Tooltip jQuery Untuk Blogger

P lugin tooltip jQuery adalah salah satu alat yang hebat untuk menjelaskan kepada banyak pengunjung dari blog Anda. Anda dapat dengan muda...

Baca selengkapnya »

Update Facebook Sekarang Dengan Emoticons

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhtBswqhS3vLmFzd06MQq1RvU-oGG1tHo10crEdrf05GmrQEY0ZgcyrBuIuAoMSYMOjxCJjqCEOKqt9KEO1wcwXya07kdlCp3gvv-bPSEoYGO1ZgjCrtLHhvOE3WkNt_p-rf_QvlZ5w/s1600/Facebook-logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhtBswqhS3vLmFzd06MQq1RvU-oGG1tHo10crEdrf05GmrQEY0ZgcyrBuIuAoMSYMOjxCJjqCEOKqt9KEO1wcwXya07kdlCp3gvv-bPSEoYGO1ZgjCrtLHhvOE3WkNt_p-rf_QvlZ5w/s640/Facebook-logo.jpg" width="640" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJFpNhAbLycVcQBFzypzVkx5Y9xjMMXPXQNukNfEbifXMMsN4B4lPOM5d1OczhOzkIMHnFO0-_nxZ9-zS5H1AqW0yp5mwc53690W-VB6NC_LxHjTaRKUa6nE23egfz9D2xDBn-hA2sA/s1600/original.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJFpNhAbLycVcQBFzypzVkx5Y9xjMMXPXQNukNfEbifXMMsN4B4lPOM5d1OczhOzkIMHnFO0-_nxZ9-zS5H1AqW0yp5mwc53690W-VB6NC_LxHjTaRKUa6nE23egfz9D2xDBn-hA2sA/s640/original.jpg" width="640" /></a></div><span class="awal">M</span>elihat sesuatu yang aneh di feed Facebook Anda belakangan ini?<br />
<br />
Jika Anda melihat proliferasi wajah smiley dan hati dalam komentar teman-teman Anda ', bukan itu Anda belum melihat mereka sebelumnya. Facebook diam-diam meluncurkan kemampuan untuk menambahkan emoticon untuk komentar akhir pekan lalu.<br />
<br />
Jika Anda tidak tahan ikonografi tersebut, mengambil hati dalam kenyataan bahwa pengguna Facebook masih belum dapat menggunakannya dalam pembaruan status sendiri - hanya dalam komentar, yang lebih mudah disembunyikan atau diabaikan.<br />
<br />
Facebook juga tidak membiarkan Anda menambahkan emoticon melalui aplikasi mobile-nya, bahkan dalam komentar. Ini tidak membiarkan Anda menggunakannya dalam obrolan dan aplikasi Messenger, bagaimanapun. Check out gambar di atas untuk contoh jenis penawaran ikon Facebook, ada berbagai lebih luas daripada yang mungkin Anda harapkan, seperti hiu dan penguin.<br />
<br />
Apa yang Anda pikirkan tentang emoticon facebook ? Apakah mereka emoticon tambahan yang berguna untuk komunikasi, atau alasan malas dalam berbahasa? Beri kami tanggapan Anda di komentar - dengan atau tanpa emoticon.

Update Facebook Sekarang Dengan Emoticons

M elihat sesuatu yang aneh di feed Facebook Anda belakangan ini? Jika Anda melihat proliferasi wajah smiley dan hati dalam komentar teman...

Baca selengkapnya »

Social Bookmarking Widget Dengan Tooltips Untuk Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRI0fHOfRiV9En1FP1FVsFwsQF8rUnteaqE2F4UfM3M9t6PaLx33nG6ZvD8rVP4rFMZWB2CWDAgguhJrEzJZ6qcYmzcPEXt4KMpMyiFGKZzEkeqAtDo5V3CBVY2ZbFx0e0l1muUuJx8w/s1600/Social+Bookmarking+Widget+Dengan+Tooltips+Untuk+Blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="249" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRI0fHOfRiV9En1FP1FVsFwsQF8rUnteaqE2F4UfM3M9t6PaLx33nG6ZvD8rVP4rFMZWB2CWDAgguhJrEzJZ6qcYmzcPEXt4KMpMyiFGKZzEkeqAtDo5V3CBVY2ZbFx0e0l1muUuJx8w/s640/Social+Bookmarking+Widget+Dengan+Tooltips+Untuk+Blogger.jpg" width="640" /></a></div>
<span class="awal">W</span>idget sosial bookmark adalah salah satu kebutuhan dari setiap blogger, mengapa Anda selalu melihat gadget seperti ini hampir pada setiap widget bookmark blog ? Social boomark membantu Anda untuk meningkatkan lalu lintas di blog.Jadi hari ini saya akan berbagi widget sosial bookmark yang menakjubkan datang dengan tooltips animasi yang indah, ketika user melayang pada ikon sosial tooltip keluar juga berlaku efek opacity terhadap ikon sosial, peningkatan efek keindahan ini widget. Pencipta widget ini adalah Shareaholic. Sekarang mari kita lihat cara untuk menambahkannya ke blog Anda!!!<br />
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Cara Tambah Widget Ini Untuk Blog Anda !!!</div>
Saya telah menciptakan sebuah blogger widget generator untuk widget ini. Ikuti langkah sederhana di bawah ini untuk menambahkan widget ini ke blog Anda. <br />
<br />
Anda harus login ke account blogger Anda terlebih dahulu.<br />
Klik tombol Add to Blogger di bawah ini.<br />
Sekarang Anda akan redirect ke halaman add blogger widget.<br />
Pilih blog Anda dan menambahkan klik pada tombol Add Widget<br />
Tarik widget di bagian bawah tata letak halaman Anda<br />
Terakhir, klik tombol Simpan Pengaturan dan Anda selesai.<br />
<br />
<form action="http://www.blogger.com/add-widget" method="POST" target="_blank">
<div style="text-align: center;">
<input name="widget.content" type="hidden" value="<b:if cond='data:blog.pageType == "item"'> 

<script type="text/javascript">
  var SHRCB_Settings = {"shr_classic":{"size":"32","link":"","service":"5,7,313,309,78,304,88","apikey":"2fc518bd8c0bb3cf45bdade11877971c1","shortener":"bitly","shortener_key":"","designer_toolTips":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
  var SHRCB_Globals = {"perfoption":"1"};
  </script>

<script type="text/javascript">
       (function() {
            var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
            sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-cb.min.js";
            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
        })();
        </script>

Social Bookmarking Widget Dengan Tooltips Untuk Blogger

W idget sosial bookmark adalah salah satu kebutuhan dari setiap blogger, mengapa Anda selalu melihat gadget seperti ini hampir pada setiap...

Baca selengkapnya »

Percantik Label Blogger Dengan CSS3

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtR7WMA6jN_gh9Lzevl0MiL6Y28qXVPIptWaT0d6dkfF1z5VOKeUkYQT9fpg9oBfEzD-C7fu6gXt_-NF0kWkFFIVi8mQaWaxTTxyyKQpmRltAUDW2x1tjTEKoz5BEcDg5sNGYhTCaTDg/s1600/customize-blogger-labels-with-css.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtR7WMA6jN_gh9Lzevl0MiL6Y28qXVPIptWaT0d6dkfF1z5VOKeUkYQT9fpg9oBfEzD-C7fu6gXt_-NF0kWkFFIVi8mQaWaxTTxyyKQpmRltAUDW2x1tjTEKoz5BEcDg5sNGYhTCaTDg/s1600/customize-blogger-labels-with-css.jpg" /></a></div>
<span class="awal">D</span>alam perjumpaan kali ini blog Oto Website akan membahas tentang <a href="http://otowebsite.blogspot.com/2012/10/percantik-label-blogger-dengan-css3.html">Percantik Label Blogger Dengan CSS3</a>.<br />
<br />
Untuk cara <a href="http://otowebsite.blogspot.com/2012/10/percantik-label-blogger-dengan-css3.html">Percantik Label Blogger Dengan CSS3</a> ini juga sangatlah mudah, kita hanya perlu menambahkan widget label blog pada sidebar dan menginstal CSS3 ke dalam Template blogger Anda. Untuk hasil dari Percantik Label Blogger Dengan CSS3 bisa Anda lihat pada gambar di samping.<br />
Bila sudah jelas sekarang akan saya berikan kode CSS untuk membuatnya.<br />
<br />
Perhatikan: Disini saya hanya membahas tentang cara membuatnya, bukan cara memasangnya, bila Anda mengalami kesulitan silahkan ajukan pertanyaan Anda di dalam komentar.<br />
<style>
.ow{
font-size:20px;
padding:5px;
font-family:consolas;
color:#ffffff;
text:1px 1px 1px #333;
background:#3e81c4;
border-left:20px solid #aa0000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
</style><br />
<div class="YOUR HEADLINE CLASS i.e ow">
Cara Percantik Label Blogger Dengan CSS3</div>
<br />
1. Pertama buatlah widget baru untuk menampilkan Label blog Anda.<br />
<br />
2. Lalu letakkan CSS3 berikut ke dalam template blog Anda.<br />
<br />
<span style="font-size: large;"><b>The CSS</b></span><br />
<br />
<pre class="brush:css;">.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}</pre>

Percantik Label Blogger Dengan CSS3

D alam perjumpaan kali ini blog Oto Website akan membahas tentang Percantik Label Blogger Dengan CSS3 . Untuk cara Percantik Label Blog...

Baca selengkapnya »

Oto Website

Tambah Tooltip jQuery Untuk Blogger

Update Facebook Sekarang Dengan Emoticons

Social Bookmarking Widget Dengan Tooltips Untuk Blogger

Percantik Label Blogger Dengan CSS3

Entri Populer

Arsip Blog