HTML editordan mencari siapa tauk ada HTML-editor baru yang bisa dibagikan kepada kalian ;) Kemudian AA Koben nemuin code.reloado.com sebuah tool testing platform untuk HTML, JS dan CSS. Editor yang mengadopsi gaya dari site jsbin tempo doeloe! Gue juga dulu pernah share tool serupa, do you want to try free download openHTML and JS Bin editor.
Telusur punya usut sampai ke web reloado.com, ternyata sebuah search engine bro :-O Mungkin lebih khusus searching akan meliputi wilayah Germany! Soalnya daerah si-empunya. Sobat dapat melakukan add url di sana, dan akan langsung ter-direct ke (dot)de [beben-koben.blogspot.de]? Berikut rincian privasi add-url:
- IP addresses are not saved.
- Searches are not associated.
- No registration required.
screenshot) site! Cobalah sobat melakukan search di web reloado atau buka ini saja beben koben on Reloado perhatikan dan sorot gambar icon preview! This is trick similar with websnapr, but now we talk about website thumbnails and screenshots for your site.
Apakah kepingin yg seperti itu!!!
Get started, this is the plan!http://t.reloado.com/api.php?src=
Contoh: <img src="http://t.reloado.com/api.php?src=http://embah-google.blogspot.com&w=300&h=250" />
or<img src="http://t.reloado.com/api.php?src=www.bing.com&w=300&h=250" />
Itu cara mengambil thumbnail website dengan syntax HTML image. Lantas bagaimana cara menampilkan screenshots via link disorot-sorot akan muncul si thumbnailnya? Pastikan pada template blog sobat sudah terpasang jQuery script, jika sudah ada abaikan!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
#WSBubble {
display: none;
overflow: hidden;
position: absolute;
box-shadow: 0 0 6px #b4b4b4;
}
#WSBubble img {
margin: 0;
}
#WSBubble.small {
width: 220px;
height: 170px;
background: url(http://reloado.com/images/ajax-loader.gif);
}
img.websnapr {
width: 10px;
height: 10px;
}
display: none;
overflow: hidden;
position: absolute;
box-shadow: 0 0 6px #b4b4b4;
}
#WSBubble img {
margin: 0;
}
#WSBubble.small {
width: 220px;
height: 170px;
background: url(http://reloado.com/images/ajax-loader.gif);
}
img.websnapr {
width: 10px;
height: 10px;
}
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
$("body").append('<div id="WSBubble" class="small"></div>');
$("a.websnapr").hover(function (e) {
this.t = this.title;
this.title = "";
$("#WSBubble").css("top", (e.pageY + 15) + "px").css("left", (e.pageX + 15) + "px").html('<img width="220" height="170" src="http://t.reloado.com/?url=' + encodeURIComponent(this.href) + '" />').fadeIn("slow")
}, function () {
this.title = this.t;
$("#WSBubble").fadeOut("fast")
}).mousemove(function (e) {
$("#WSBubble").css("top", (e.pageY + 15) + "px").css("left", (e.pageX + 15) + "px")
})
});
//]]>
</script>
Planing HTML<a href="HYPERLINK-HOME-WEBSITE" class="websnapr" ><img src="LINK-IMAGE"></a>
or<a href="HYPERLINK-HOME-WEBSITE" class="websnapr" >YOUR TITLE</a>
Pada penulisan syntax link harus memakai properti Kalo tertarik dengan teknik yg lain, sobat bisa coba baca artikel add mini preview links to blogger like snapshot capture!
Happy coding \m/
Tidak ada komentar:
Posting Komentar