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 :))
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 = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
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>
<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 = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
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.
Demo: My Messages For You (Press Enter if you see skull head)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/
Demo: My Messages For You (Press Enter if you see skull head)Permasalahan timbul, apakah kita harus secara manual membuat lambang
<!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> 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... |
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/...