» » » » » » Show Messages use Address Link Post

Show Messages use Address Link Post

Show Messages use Address Link Post - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Show Messages use Address Link Post, we have prepared well for this article you read and download the information therein. hopefully fill posts Article HTML, Article Javascript, Article jQuery, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Show Messages use Address Link Post
link : Show Messages use Address Link Post

Also Read


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/


Thus articles Show Messages use Address Link Post

that is all articles Show Messages use Address Link Post This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Show Messages use Address Link Post with the link address https://autopostingblogspot.blogspot.com/2015/05/show-messages-use-address-link-post.html

0 Response to "Show Messages use Address Link Post"

Posting Komentar

Langganan: Posting Komentar (Atom)