◄ Min  Size Fonts: + | - | ± Color: Max ►

Show Messages use Address Link Post

Aapakah anda pernah memperhatikan tulisan hasil ketikan dari sebuah search engine? Misalkan sobat mengetik "Tutorial Blog for Stylish Blogger" di dalam kotak pencarian google. Maka pada address bar browser akan terlihat menjadi: https://www.google.com/?q=Tutorial+Blog+for+Stylish+Blogger Pada tampilan halaman pencarian, tulisan yang diketikan akan memiliki warna yg berbeda!
Ex: Tutorial Blog for Stylish Blogger
Dengan bantuan jQuery script, AA Koben akan berbagi trik tutorial bagaimana cara membuat pesan di mana prinsip kerja seperti sebuah search engine (kalimat pembuka tadi) Jadi, link sebuah postingan blog anda akan menjadi korban :D agar trick ini berjalan mulus :))

Buatlah satu artikel post, terserah mau di isi dengan kalimat basa-basi apaan. Kemudian hilangkan style (CSS) template/area konten/widget/etc seperlunya. Masukan bumbu ajaib berikut ke dalam area postingan...

<div class="box">
<p>Message here...</p>
</div>

<style>
.box {
font: normal 12px/1.5 "Verdana", arial, sans-serif;
width: auto;
height: auto;
min-height: 53px;
margin: 0 auto;
padding: 12px 5px 4px 41px;
position: relative;
color: #cc0000;
line-height: 20px;
border: 1px solid #d2d2d2;
background: #fff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
-webkit-background-size: 100% 20px;
background-size: 100% 20px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.box::before {
content: '';
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #efe4e4;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
function escapeHtml(text) {
var map = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#039;'
};

return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
var replacestring = "`1234567890-= qwertyuiop[] asdfghjkl;' zxcvbnm,./ ~!@#$%^&*()_+ QWERTYUIOP{}| ASDFGHJKL:\ ZXCVBNM<>?";
var paperstring = escapeHtml(decodeURI(getQueryVariable("txt")).substr(0, 120).replace(/\+/g," "));
$('.box p').html(paperstring);
var plength = paperstring.length;
var rlength = replacestring.length;
});
//]]
</script>

Selesai misi membuat dashboard untuk menampilkan pesan.
Messages on the BlogDemo: My Messages For You (Press Enter if you see skull head)

Permasalahan timbul, apakah kita harus secara manual membuat lambang + pada setiap antar kata! Solusinya, buatlah ___.html secara terpisah? Buka notepad/teks editor sobat

<!DOCTYPE html>
<html>
<head>
<title> </title>
<script type="text/javascript">
function work(what) {
 var escapedString = escape(what);
 var stringToReplace = escapedString.split('%20');
 escapedString = stringToReplace.join("+");
 stringToReplace = escapedString.split('%0A');
 escapedString = stringToReplace.join("+"); 
 return escapedString;
}
</script>
<style>
#toParse {
 font-family:inherit;
 font-size:11pt;
 width:100%;
 height:100px;
}
#button {
 background:#f3f3f3;
 border:solid 1px #d9d9d9;
 border-radius:2px;
 -webkit-border-radius:2px;
 color:#666;
 font-weight:bold;
 margin:0 0 0 16px;
 padding:6px 12px;
}
</style>
</head>
<body>
<textarea id="toParse" spellcheck="false" onkeyup="document.getElementById('linkText').value = document.getElementById('theirURL').value + '?txt=' + work(document.getElementById('toParse').value)"></textarea>
<p>
 Basic link: <input type="text" name="txt" size="50" id="theirURL" value=" LINK-POSTINGAN "/>
</p>
<button id="button" onclick="document.getElementById('linkText').value = document.getElementById('theirURL').value + '?txt=' + work(document.getElementById('toParse').value)">Make Link</button>
<p>
 Your link (CTRL+C or right-click to copy):
<input id="linkText" type="text" size="60" onclick="this.select();" readonly="readonly"/>
</p>
</body>
</html>
Gantikan tulisan LINK-POSTINGAN dengan link address postingan yg tadi sobat buat (penjelasan di atas!!!)
Source by: Shre Per
Itu hanya versi standar yg saya buat. Jika sobat mengerti akan JavaScript, you bisa menambahkan banyak lagi vaiasi urlEncoding ke dalamnya :)

Happy ngoding \m/
Loading...
XShow Messages use Address Link Post
Membuat tampilan pesan singkat messages menggunakan link post blogger
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE