Cara Membuat Ucapan Selamat Kepada Komentator Pertama Di Blog

Cara Membuat Ucapan Selamat Kepada Komentator Pertama Di Blog
Cara Membuat Ucapan Selamat Kepada Komentator Pertama Di Blog
Ucapan Pertamax



Selamat datang agan atau aganwati kali ini Saya akan berbagi cara membuat ucapan selamat kepada komentator pertama di blog, ucapan selamat ini akan muncul jika hanya dalam artikel baru satu orang saja yang berkomentar, namun jika sudah ada orang lain yang berkomentar akan hilang, untuk menerapkannya silakan ikuti beberapa langkah berikut;


Langkah

1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu template, lalu pilih menu edit html,

3. Untuk yang menggunakan kolom komentar threaded comment hack maupun kolom komentar biasa, akan Saya bahas, untuk yang pertama Saya akan bahas untuk threaded comment hack,


Threaded Comment Hack


1. Cari kode <data:comment.body/> dengan cara
Ctrl
+
F
,
 biasanya akan muncul lebih dari satu, cari <data:comment.body/> yang kedua,

2. Copy script di bawah ini, lalu paste tepat di bawah kode <data:comment.body/> yang kedua,

 <b:if cond='data:post.numComments == 1'>  <div expr:class='&quot;item-control &quot; + data:comment.adminClass' style='margin-top:10px;margin-bottom:15px;border:1px solid #c94a36;background:#e55e48;padding:5px 10px;color:#FFF;border-radius:3px'>Selamat <b><data:comment.author/></b> Anda menjadi komentator pertama pada artikel ini, beri komentar terus agar jadi Top Komentator..!!!</div></b:if> 


3. Simpan.



Default Blogger Comment


1. Cari kode ]]></b:skin> dengan cara
Ctrl
+
F
,


2. Copy script di bawah ini, lalu paste tepat di atas kode ]]></b:skin>,

 .comments .pertamax{position:relative;margin:10px 0;padding5px 10px;margin-top:10px;border:1px solid #e4c445;background:#ffe785;padding:5px;color:#fff !important'} 


3. Lalu cari script (function() {  var items = <data:post.commentJso/>; dengan cara
Ctrl
+
F
,


4. Ganti script tersebut dengan script di bawah ini,

 var items_copy=[];(function() {var items = <data:post.commentJso/>;items_copy=items; 


5. Setelah itu cari kode <data:post.commentHtml/> dengan cara
Ctrl
+
F
,


6. Copy script di bawah ini lalu paste tepat di bawah kode <data:post.commentHtml/>,



 <b:if cond='data:post.numComments == 1'><script type='text/javascript'>//<![CDATA[  for(i=0;i<items_copy.length;i++){if(i==items_copy.length-1){d=document.getElementById('c'+items_copy[i].id).getElementsByTagName('p').item(0);e=d.innerHTML+'<div class="pertamax '+items_copy[i].deleteclass.replace(/ blog-admin/,'')+'">Selamat '<b>+items_copy[i].author.name+</b>' Anda dapat PERTAMAXXX !!! Tunggu kunjungan saya ke Blog Anda.</div>';d.innerHTML=e}}//]]></script></b:if> 

7. Simpan.

Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar, terima kasih.




Referensi script http://blog.kangismet.net/

Cara Membuat Tombol 3D Keren Di Blog

Cara Membuat Tombol 3D Keren Seperti Kang Rian Di Blog
Cara Membuat Tombol 3D Keren Seperti Kang Rian Di Blog
Tombol 3D


Selamat datang agan atau aganwati kali ini Saya akan berbagi cara membuat tombol tiga dimensi keren seperti Kang Rian, nah untuk membuatnya silakan agan ikuti beberapa langkah berikut;


Langkah

1. Login pada blog Anda masing-masing,

2. Setelah itu pada menu dashboard pilih menu template, lalu pilih menu edit html,

3. Lalu cari kode ]]></b:skin> dengan cara
Ctrl
+
F
,

4. Lalu copy script di bawah ini, setelah itu paste tepat di atas kode ]]></b:skin>,

 .tombol { display: inline-block; text-decoration: none; outline: 0; cursor: pointer; font: 700 12px/1em HelveticaNeue,Arial,sans-serif; padding: 8px 11px; color: #555; text-shadow: 0 1px 0 #fff; background: #f5f5f5; background: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#f0f0f0)); background: -moz-linear-gradient(top,#f9f9f9,#f0f0f0); border: 1px solid #dedede; border-color: #dedede #d8d8d8 #d3d3d3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; } .tombol:focus,.tombol:hover { color: #555; background: #efefef; background: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#e9e9e9)); background: -moz-linear-gradient(top,#f9f9f9,#e9e9e9); border-color: #ccc; -webkit-box-shadow: 0 2px 1px #e0e0e0,inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 2px 1px #e0e0e0,inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 2px #e0e0e0,inset 0 1px 0 #fbfbfb; } .tombol:active { position: relative; top: 1px; color: #555; background: #efefef; background: -webkit-gradient(linear,left top,left bottom,from(#eaeaea),to(#f4f4f4)); background: -moz-linear-gradient(top,#eaeaea,#f4f4f4); border-color: #c6c6c6; -webkit-box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; -moz-box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; } .tombol.bulat { padding: 8px 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } button.tombol,input.tombol { *width: auto; *overflow: visible; } .tombol img { border: none; vertical-align: bottom; } .tombol.kecil { padding: 5px 11px; font-size: 11px; font-weight: 400; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .tombol.kecil.bulat { -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; } .tombol.besar { padding: 12px 15px; font-size: 20px; font-weight: 400; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .tombol.besar.bulat { padding: 12px 22px; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px } 


5. Lalu simpan, untuk penerapannya silakan lihat demo di bawah ini,

Small button

<a class='tombol kecil'>Small Button</a>

Small Button


Standard button

<a class='tombol'>Standard Button</a>

Tombol Standar


Big Button

<a class='tombol besar'>Big Button</a>


Big Button


Round Button

<a class='tombol bulat'>Round Button</a>


Round Button

Big And Round Button

<a class='tombol besar bulat'>Big And Round Button</a>


Big And Round Button

6. Jika anda menerapkannya pada artikel jangan lupa untuk mengganti compose menjadi html.


Cara Membuat Tombol 3D Keren Seperti Kang Rian Di Blog




Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar, terima kasih.


Referensi script http://nandanet-software.blogspot.com/

Cara Membuat Top Komentator Pada Halaman Statis Dan Komentar Blog

Cara Membuat Top Komentator Pada Halaman Statis Dan Komentar Blog
Cara Membuat Top Komentator Pada Halaman Statis Dan Komentar Blog
Top Komentator


Selamat datang agan atau aganwati kali ini Saya akan berbagi cara membuat top komentator pada halaman statis dan komentar blog, nah untuk menerapkannya silakan Anda mengikuti beberapa langkah berikut;


Langkah

1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu laman,

3. Lalu pilih menu laman baru,

4. Jangan lupa untuk mengganti jenisnya dari compose menjadi html,
Cara Membuat Top Komentator Pada Halaman Statis Dan Komentar Blog


5. Copy script di bawah ini, lalu paste pada laman tersebut,

 <style type="text/css">
.top-commenter-line img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); margin-left:5px;margin-right:5px; } .top-commenter-line {margin: 5px 0;border-bottom:1px solid #eee;padding:3px 5px 6px 0px;} .top-commenter-line .profile-name-link {padding-left:0;font-weight:bold;} .top-commenter-avatar {vertical-align:middle;width:30px;height:30px; } .post h1 { display:none!important; }.top-komeng { border-radius: 5px; box-shadow: 0px 0px 10px #ccc; margin: 10px; padding: 30px; }.top-komeng h2 {font-size:20px;padding-bottom: 10px;border-bottom:1px solid #eee;margin-bottom:0px;}.top-komeng a { color:#444; }
</style>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet"></link>
<br />
<div class="top-komeng">
<h2>
<i class="icon-thumbs-up icon-large"></i> (10) Top Komentator</h2>
<script type="text/javascript">
//<![CDATA[
function replaceTopCmtVars(e, t, n) {
if (!t || !t.author) return e;
var r = t.author;
var i = "";
if (r.uri && r.uri.$t != "") i = r.uri.$t;
var s = urlAnoAvatar;
var o = "http://www.blogger.com/profile/";
if (r.gd$image && r.gd$image.src && i.substr(0, o.length) == o) s = r.gd$image.src;
else {
var u = document.createElement("a");
if (i != "") {
u.href = i;
s = "http://www.google.com/s2/favicons?domain=" + u.hostname
}
} if (urlMyProfile != "" && i == urlMyProfile && urlMyAvatar != "") s = urlMyAvatar;
if (s == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") s = urlNoAvatar;
var a = "s" + sizeAvatar;
s = s.replace(/\/s\d\d+-c\//, "/" + a + "-c/");
if (cropAvatar) a += "-c";
s = s.replace(/\/s\d\d+(-c){0,1}\//, "/" + a + "/");
var f = r.name.$t;
if (f == "Anonymous" && txtAnonymous != "" && s == urlAnoAvatar) f = txtAnonymous;
var l = '<img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" title="' + f + '" src="' + s + '" />';
if (i != "") l = '<a href="' + i + '">' + l + "</a>";
if (maxUserNameLength > 3 && f.length > maxUserNameLength) f = f.substr(0, maxUserNameLength - 3) + "...";
var c = f;
if (i != "") c = '<a class="profile-name-link" href="' + i + '">' + c + "</a>";
e = e.replace("[user]", c);
e = e.replace("[image]", l);
e = e.replace("[#]", n);
e = e.replace("[count]", t.count);
return e
}

function showTopCommenters(e) {
var t = 1e3 * 60 * 60 * 24;
var n = new Date;
if (urlMyProfile == "") {
var r = document.getElementsByTagName("*");
var i = /(^| )profile-link( |$)/;
for (var s = 0; s < r.length; s++)
if (i.test(r[s].className)) {
urlMyProfile = r[s].href;
break
}
}
for (var s = 0; s < e.feed.entry.length; s++) {
var o = e.feed.entry[s];
if (numDays > 0) {
var u = o.published.$t.match(/\d+/g);
var a = new Date(u[0], u[1] - 1, u[2], u[3], u[4], u[5]);
var f = Math.ceil((n.getTime() - a.getTime()) / t);
if (f > numDays) break
}
var l = "";
if (o.author[0].uri && o.author[0].uri.$t != "") l = o.author[0].uri.$t;
if (excludeMe && l != "" && l == urlMyProfile) continue;
var c = o.author[0].name.$t;
if (excludeUsers.indexOf(c) != -1) continue;
var h = o.author[0].name.$t + "-" + l;
if (topcommenters[h]) topcommenters[h].count++;
else {
var p = new Object;
p.author = o.author[0];
p.count = 1;
topcommenters[h] = p
}
}
if (e.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://' + window.location.hostname + "/feeds/comments/default?redirect=false&max-results=200&start-index=" + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + "script>");
return
}
var d = [];
for (var v in topcommenters) d.push([v, topcommenters[v]]);
d.sort(function (e, t) {
if (t[1].count - e[1].count) return t[1].count - e[1].count;
return e[1].author.name.$t.toLowerCase() < t[1].author.name.$t.toLowerCase() ? -1 : 1
});
var m = 0;
for (var s = 0; s < maxTopCommenters && s < d.length; s++) {
var g = d[s][1];
if (g.count < minComments) break;
document.write("<di" + 'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, g, m + 1));
document.write("</d" + "iv>");
m++
}
if (!m) document.write(txtNoTopCommenters)
}
var maxTopCommenters = 10;
var minComments = 1;
var numDays = 0;
var excludeMe = true;
var excludeUsers = ["Anonymous", "Renaldy Ramadani"];
var maxUserNameLength = 42;
var txtTopLine = "<b>[#].</b> [image] [user] ([count])";
var txtNoTopCommenters = "No top commentators at this time.";
var txtAnonymous = "";
var sizeAvatar = 56;
var cropAvatar = true;
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHhlG7_udndnPm9MMal51Jmz2OGR754XF9z-R_5BKP1J0o0HSx1E1eXZqaN591LQsXu62uFBeLKZPQNep5bosH1Jqr7xNa_zBtiZm-hwjLia1MukdhyphenhyphenYYQDH3aie8OvAytl5IQ-SVLr9Q/" + sizeAvatar + "/avatar_blue_m_96.png";
var urlAnoAvatar = "http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=" + sizeAvatar;
var urlMyProfile = "";
var urlMyAvatar = "";
if (!Array.indexOf) {
Array.prototype.indexOf = function (e) {
for (var t = 0; t < this.length; t++)
if (this[t] == e) return t;
return -1
}
}
var topcommenters = {};
var ndxbase = 1;
document.write('<script type="text/javascript" src="http://' + window.location.hostname + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + "script>")
//]]>
</script>
</div>



Jangan lupa untuk ganti nama Saya menjadi nama Anda!

6. Lalu simpan,

7. Setelah itu untuk membuat top komentator pada komentar blog, kembali pada menu dashboard pilih menu template,

Cara Membuat Top Komentator Pada Halaman Statis Dan Komentar Blog



8. Lalu pilih menu edit html,

9. Setelah itu jika Anda belum mempunyai script Jquery maka Anda harus menambahkannya, tetepi jika Anda sudah mempunyainya tidak perlu ditambah karena membuat tidak berjalan dengan baik, untuk pemasangannya cari kode </head> dengan cara
Ctrl
+
F
,
 lalu paste tepat di atas kode </head>,


 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> 


10. Setelah itu copy script di bawah ini, lalu cari kode </body> dengan cara
Ctrl
+
F
,
 setelah itu paste tepat di atas kode </body>,

 <script>
//<![CDATA[
var gentosnami = document.getElementById("area");
gentosnami.innerHTML = (gentosnami.innerHTML).replace(/Renaldy Ramadani/gi, "Renaldy Ramadani <a class='tombol kecil'>Top Komentator</a>");
//]]>
</script>


Ganti nama Saya dengan nama top komentator blog Anda, jadi jumlah script yang dipasang di atas kode </body> bisa lebih dari 1 sesuai banyaknya top komentator Anda!

Jika Anda menggunakan kolom komentar biasa ganti teks pada script area menjadi comment-holder, jika Anda menggunakan threaded comment maka teks pada script area biarkan saja atau jika tidak muncul bisa diganti dengan comment_body.



11. Untuk membuat tombol top komentator pada kolom komentar, copy script berikut ini,

 .tombol { display: inline-block; text-decoration: none; outline: 0; cursor: pointer; font: 700 12px/1em HelveticaNeue,Arial,sans-serif; padding: 8px 11px; color: #555; text-shadow: 0 1px 0 #fff; background: #f5f5f5; background: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#f0f0f0)); background: -moz-linear-gradient(top,#f9f9f9,#f0f0f0); border: 1px solid #dedede; border-color: #dedede #d8d8d8 #d3d3d3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; } .tombol:focus,.tombol:hover { color: #555; background: #efefef; background: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#e9e9e9)); background: -moz-linear-gradient(top,#f9f9f9,#e9e9e9); border-color: #ccc; -webkit-box-shadow: 0 2px 1px #e0e0e0,inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 2px 1px #e0e0e0,inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 2px #e0e0e0,inset 0 1px 0 #fbfbfb; } .tombol:active { position: relative; top: 1px; color: #555; background: #efefef; background: -webkit-gradient(linear,left top,left bottom,from(#eaeaea),to(#f4f4f4)); background: -moz-linear-gradient(top,#eaeaea,#f4f4f4); border-color: #c6c6c6; -webkit-box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; -moz-box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; } .tombol.bulat { padding: 8px 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } button.tombol,input.tombol { *width: auto; *overflow: visible; } .tombol img { border: none; vertical-align: bottom; } .tombol.kecil { padding: 5px 11px; font-size: 11px; font-weight: 400; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .tombol.kecil.bulat { -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; } .tombol.besar { padding: 12px 15px; font-size: 20px; font-weight: 400; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .tombol.besar.bulat { padding: 12px 22px; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px } 


12. Lalu cari kode ]]></b:skin> dengan cara
Ctrl
+
F
lalu paste tepat di atas kode ]]></b:skin>,


13. Simpan dan lihat hasilnya.



Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar Anda, terima kasih.



Referensi script http://blog.kangrian.com/

Cara Membuat Efek Hover Keren Pada Gambar Di Blog

Selamat datang agan atau aganwati kali ini Saya akan berbagi tips blogging yaitu cara membuat efek hover keren pada gambar di blog, untuk menerapkannya di blog, Anda harus mengikuti beberapa langkah berikut, untuk demo coba Anda dekatkan pointer pada gambar di bawah ini;

Cara Membuat Efek Hover Keren Pada Gambar Di Blog
Kamu membuatku pasrah dan menyerah...!!!
Cuekmu Membuatku Menyerah


Langkah



1. Login pada blog Anda masing-masing,

2. Setelah itu pada menu dashbord pilih menu template, lalu pilih menu edit html,

3. Lalu cari kode ]]></b:skin> dengan cara
Ctrl
+
F
,


4. Setelah itu copy script di bawah ini lalu paste tepat di atas kode ]]></b:skin> ,

 jm-item {
padding: 10px;
display: inline-block;
text-align: left;
}

.jm-item-wrapper {
position: relative;
padding: 7px;
background: #E8D7B6;
}

.jm-item-image {
position: relative;
overflow: hidden;
}

.jm-item-image img {
display: block;
}

.jm-item-title {
position: absolute;
left: -10px;
bottom: 17px;
background: #FF6B0E;
color: #FFFFFF;
font-size: 1.4em;
line-height: 1.5em;
font-weight: normal;
padding: 7px 9px 6px;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
}

.jm-item-overlay {
background: #000;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: opacity 0.5s ease-in 0s;
-moz-transition: opacity 0.5s ease-in 0s;
-o-transition: opacity 0.5s ease-in 0s;
transition: opacity 0.5s ease-in 0s;
}

.jm-item-wrapper:hover .jm-item-overlay {
opacity: 0.3;
}

.jm-item-button {
height: 50px;
width: 50px;
text-align: center;
position: absolute;
left: 50%;
margin-left: -25px;
}

.jm-item-button a {
border-radius: 50%;
-webkit-border-radius: 50%;
background: #FF6B0E;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
line-height: 50px;
-webkit-transition: all 0.2s ease-in 0s;
-moz-transition: all 0.2s ease-in 0s;
-o-transition: all 0.2s ease-in 0s;
transition: all 0.2s ease-in 0s;
text-decoration: none !important;
display: block;
}

.jm-item-button a:hover {
background: #3b3b3b;
}

/** first **/

.first .jm-item-button {
-webkit-transition: all 0.5s ease-in 0.5s;
-moz-transition: all 0.5s ease-in 0.5s;
-o-transition: all 0.5s ease-in 0.5s;
transition: all 0.5s ease-in 0.5s;
top: -50px;
}

.first .jm-item-wrapper:hover .jm-item-button {
top: 20%;
}

/** second **/

.second {
overflow: hidden;
}

.second .jm-item-wrapper .jm-item-title {
-webkit-transition: all 0.2s ease-in 0s;
-moz-transition: all 0.2s ease-in 0s;
-o-transition: all 0.2s ease-in 0s;
transition: all 0.2s ease-in 0s;
}

.second .jm-item-wrapper:hover .jm-item-title {
left: -100%;
}

.second .jm-item-description {
position: absolute;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background: rgba(0,0,0,0.4);
color: #fff;
top: 100%;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
}

.second .jm-item-wrapper:hover .jm-item-description {
top: 0;
}




5. Setelah itu untuk penerapannya silakan copy script berikut lalu paste pada artikel Anda, tetapi jangan lupa sebelum meletakan script ini Anda harus mengganti jenis artikel yaitu compose menjadi html,

Cara Membuat Efek Hover Keren Pada Gambar Di Blog


 <div class="jm-item second">
<div class="jm-item-wrapper">
<div class="jm-item-image">
<img alt="Cara Membuat Efek Hover Keren Pada Gambar Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVAnsqEMZdRV9hWLUf22BBrPh1vry2TmG6XV4WXhCHzI9aZ0fGGA64wdKCWH9unBj9w8FRD6N3QJHX_a1NS3s0i3ps-7w6KcOf6j4xcxP3r339zv1I07_hwz_XzY6LjnMf0ie974YEiqdU/s1600/IMG_20140510_214814.jpg" height="400" title="Cara Membuat Efek Hover Keren Pada Gambar Di Blog" width="400" />
<br />
<div class="jm-item-description">
Kamu membuatku pasrah dan menyerah...!!!
<br />
<div class="jm-item-button">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVAnsqEMZdRV9hWLUf22BBrPh1vry2TmG6XV4WXhCHzI9aZ0fGGA64wdKCWH9unBj9w8FRD6N3QJHX_a1NS3s0i3ps-7w6KcOf6j4xcxP3r339zv1I07_hwz_XzY6LjnMf0ie974YEiqdU/s1600/IMG_20140510_214814.jpg">View</a></div>
</div>
</div>
<div class="jm-item-title">
Cuekmu Membuatku Menyerah</div>
</div>
</div>


6. Jangan lupa untuk mengganti deskripsi serta alamat URL gambar Anda.





Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar, terima kasih.


Referensi script irvan-efendy.blogspot.com

Cara Membuat Countdown Timer Tahun Baru 2015 Keren Di Blog

Countdown Timer 2015
Cara Membuat Countdown Timer Tahun Baru 2015 Keren Di Blog
Countdown Timer 2015




Selamat datang agan atau aganwati kali ini Saya akan berbagi cara membuat countdown timer tahun baru 2015 keren di blog, untuk membuatnya silakan ikuti beberapa langkah berikut;


Langkah



1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu tata letak,

3. Lalu tambahkan gadget, pilih html / javascript,

4. Setelah itu copy script di bawah ini,

 <div id="flash-region">
<div id="preview-container"><!-- This is only used by editor replaces content dynamically -->

<script type="text/javascript">
// Not needed for remote


</script>


<script type="text/javascript">
window.oc = window.oc || {};
window.oc.spritePath = "https://countingdownto.com/oc-sprite";
window.oc.spriteParams = {"title":"Menuju 2015","date_label":"1 Januari 2015","txt_color":"FFFFFFFF","bg_color":"333333FF","width":350,"height":180,"scale":1.0,"style":"TemplateCdt3","quality":0.95,"use_overlay":0,"shadow":1,"unit_labels":"hari,jam,menit,detik","renderer":"v1","encoding":"png","font_push_down":0.34,"font":"Helvetica Neue LT Com 77 Bold Condensed","shadow_color":"0000008b","shadow_y":1,"shadow_blur":1,"overlay":"reflection-09.png","overlay_size":"350,180","hlines":"YYYY","text_effect":3,"text_effect_strength":1.0};
window.oc.startTime = new Date().getTime() / 1000;
window.oc.scale = 1.0;
window.oc.repeatMode = 0;
if(window.oc.remainingTimeAtStartTime === undefined) {
// Not needed in remote version
window.oc.remainingTimeAtStartTime = 729922;
}
</script>

<script type="text/javascript">if(!window.console)console = {log: function(){}};</script>
<style>#demo{z-index: 999;}</style>
<div id="countdown_widget_style_holder"><style type="text/css">html,body{margin:0px;padding:0px}a img{border:0}#demo{position:absolute;right:0;top:0}#ie-fix{display:none}.digit{background-image:url(https://countingdownto.com/oc-sprite?bg_color=333333FF&amp;date_label=1+Januari+2015&amp;encoding=png&amp;font=Helvetica+Neue+LT+Com+77+Bold+Condensed&amp;font_push_down=0.34&amp;height=180&amp;hlines=YYYY&amp;overlay=reflection-09.png&amp;overlay_size=350%2C180&amp;quality=0.95&amp;renderer=v1&amp;scale=1.0&amp;shadow=1&amp;shadow_blur=1&amp;shadow_color=0000008b&amp;shadow_y=1&amp;style=TemplateCdt3&amp;text_effect=3&amp;text_effect_strength=1.0&amp;title=Menuju+2015&amp;txt_color=FFFFFFFF&amp;unit_labels=hari%2Cjam%2Cmenit%2Cdetik&amp;use_overlay=0&amp;width=350);background-repeat:no-repeat;width:28px}.digit-0{background-position:-350px -75px}.digit-1{background-position:-378px -75px}.digit-2{background-position:-406px -75px}.digit-3{background-position:-434px -75px}.digit-4{background-position:-462px -75px}.digit-5{background-position:-490px -75px}.digit-6{background-position:-518px -75px}.digit-7{background-position:-546px -75px}.digit-8{background-position:-574px -75px}.digit-9{background-position:-602px -75px}.digit-x{width:24px;background-position:-670px -75px}.digit-p{width:10px;background-position:-640px -75px}.spr.digit-b{width:10px;background-image:none;visibility:hidden}.widget-wrapper{width:350px;height:180px;background-color:#333333;position:relative;margin:auto;-webkit-box-shadow:0 1px 6px 1px rgba(0,0,0,0.4),0 1px 2px 0 rgba(0,0,0,0.4);-moz-box-shadow:0 1px 6px 1px rgba(0,0,0,0.4),0 1px 2px 0 rgba(0,0,0,0.4);box-shadow:0 1px 6px 1px rgba(0,0,0,0.4),0 1px 2px 0 rgba(0,0,0,0.4)}.content-wrapper{width:100%;height:100%}.spr{background-image:url(https://countingdownto.com/oc-sprite?bg_color=333333FF&amp;date_label=1+Januari+2015&amp;encoding=png&amp;font=Helvetica+Neue+LT+Com+77+Bold+Condensed&amp;font_push_down=0.34&amp;height=180&amp;hlines=YYYY&amp;overlay=reflection-09.png&amp;overlay_size=350%2C180&amp;quality=0.95&amp;renderer=v1&amp;scale=1.0&amp;shadow=1&amp;shadow_blur=1&amp;shadow_color=0000008b&amp;shadow_y=1&amp;style=TemplateCdt3&amp;text_effect=3&amp;text_effect_strength=1.0&amp;title=Menuju+2015&amp;txt_color=FFFFFFFF&amp;unit_labels=hari%2Cjam%2Cmenit%2Cdetik&amp;use_overlay=0&amp;width=350)}@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){.spr{background-image:url(https://countingdownto.com/oc-sprite?bg_color=333333FF&amp;date_label=1+Januari+2015&amp;encoding=png&amp;font=Helvetica+Neue+LT+Com+77+Bold+Condensed&amp;font_push_down=0.34&amp;height=180&amp;hlines=YYYY&amp;overlay=reflection-09.png&amp;overlay_size=350%2C180&amp;quality=0.95&amp;renderer=v1&amp;scale=1.0&amp;shadow=1&amp;shadow_blur=1&amp;shadow_color=0000008b&amp;shadow_y=1&amp;style=TemplateCdt3&amp;text_effect=3&amp;text_effect_strength=1.0&amp;title=Menuju+2015&amp;txt_color=FFFFFFFF&amp;unit_labels=hari%2Cjam%2Cmenit%2Cdetik&amp;use_overlay=0&amp;width=350&amp;retina=1);background-size:800px 180px}}.counter-wrapper{width:336px;height:90.0px;margin-left:14px}.counter-wrapper .counter-item{height:40px;float:left}.counter-wrapper .counter-group{height:53px;float:left;position:relative;overflow:hidden}.counter-group .unit-label{position:absolute;height:15px;width:60px;left:0;top:38px}.days .unit-label{background-position:-350px -114px}.hours .unit-label{background-position:-410px -114px}.minutes .unit-label{background-position:-470px -114px}.seconds .unit-label{background-position:-530px -114px}.header{height:75px;width:100%}
</style>
</div>

<div class="widget-wrapper">
<div id="ie-fix">&nbsp;</div>
<div class="content-wrapper spr">
<div class="header">
</div>
<div class="counter-wrapper">

<div class="days counter-group">
<div class="counter-item"></div>
<div class="counter-item"></div>
<div class="counter-item spr digit item-0 digit-8"></div>
<div class="unit-label spr" style="left: -16px;">
</div>
</div>
<div class="counter-item spr digit item-0 digit-x" style="margin: 0px 9px;"></div>
<div class="hours counter-group">
<div class="counter-item spr digit item-0 digit-1"></div>
<div class="counter-item spr digit item-0 digit-0"></div>
<div class="unit-label spr">
</div>
</div>
<div class="counter-item spr digit item-0 digit-x" style="margin: 0px 9px;"></div>
<div class="minutes counter-group">
<div class="counter-item spr digit item-0 digit-3"></div>
<div class="counter-item spr digit item-0 digit-3"></div>
<div class="unit-label spr">
</div>
</div>
<div class="counter-item spr digit item-0 digit-x" style="margin: 0px 9px;"></div>
<div class="seconds counter-group">
<div class="counter-item spr digit item-0 digit-2"></div>
<div class="counter-item spr digit item-0 digit-5"></div>
<div class="unit-label spr">
</div>
</div>
<div class="counter-item spr digit item-0 digit-b"></div>
<div class="counter-item spr digit item-0 digit-b"></div>

</div>
</div>
</div>

<script type="text/javascript">
if(window.oc == undefined)
{
window.oc = {};
}
//var oc = window.oc;
if(window.oc.remainingTimeAtStartTime === undefined)
{
window.oc.remainingTimeAtStartTime=729922;
}
</script>


<script type="text/javascript">
!function(){

window.oc.startTime=new Date().getTime() / 1000;
window.oc.countDirection=1;
window.oc.scale=1.0;
window.oc.repeatMode = 0;
window.oc.showMilliseconds = false;
window.oc.countdownExpired = function()
{
if(window.oc.repeatMode > 0)
{
if(window.oc.editor)
{
window.oc.editor.countdownExpired();
}
else
{
if(window.self !== window.top)location.reload();
}
}
}

var pad,periods,update;periods={d:86400,h:3600,m:60},pad=function(e){for(;e.toString().length<2;)e="0"+e;return e},update=function(){var e,t,o,i,r,a,d,n,s,c,p,m,l,u,h;for(p=(new Date).getTime()/1e3,t=p-oc.startTime,t*=oc.countDirection,u=Math.max(0,Math.floor(oc.remainingTimeAtStartTime-t)),r=Math.floor(10*(oc.remainingTimeAtStartTime-t-u)),0===u&&(oc.countdownExpired(),r=0),e=u-u%periods.d,a=u-e-u%periods.h,c=u-e-a-u%periods.m,h=u-e-a-c,s=[e/periods.d,pad(a/periods.h),pad(c/periods.m),pad(h)].join("x"),window.oc.showMilliseconds?s=s+"p"+r:s+="bb",n=$(".counter-item"),d=n.length,m=d-s.length;d--;)o=n[d],$(o).removeClass(),$(o).addClass("counter-item"),d-m>=0&&$(o).addClass("spr digit item-0 digit-"+s.charAt(d-m));return l=Math.round(($(".days").innerWidth()-60*oc.scale)/2),$(".days .unit-label").css("left",l+"px"),i=26*m*oc.scale,$(".digit-x").css("margin","0 "+Math.round(i/6)+"px")},update(),oc.timerRef&&clearInterval(oc.timerRef),oc.timerRef=setInterval(update,100),oc.updateCountdownClock=update;
}.call(this);
</script></div>
<div id="progress-indicator" class="" style="width:350px;height:5px;margin:auto;margin-top:3px">
<div class="progress progress-striped active hide" style="width: 100%; height: 100%; display: none;">
<div class="bar" style="width: 100%;">
</div>
</div>
</div>
</div>




5. Setelah itu paste pada kolom html / javascript tadi,

6. Lalu simpan dan lihat hasilnya.







Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar, terima kasih.


Referensi script http://mrhb404.blogspot.com/

Cara Membuat Loading Page Jam, Tanggal, Bulan, Dan Tahun Di Blog

Loading Page Kang Rian
Cara Membuat Loading Page Jam, Tanggal, Bulan, Dan Tahun Seperti Kang Rian Di Blog
Loading Page Kang Rian


Selamat datang agan atau aganwati, kali ini Saya akan berbagi cara membuat loading page jam, tanggal, bulan dan tahun seperti kang rian di blog, nah untuk membuatnya silakan Anda mengikuti beberapa langkah berikut;


Langkah

1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu template, lalu edit html.

3. Setelah itu cari kode </head> dengan cara
Ctrl
+
F

4. Copy script di bawah ini lalu paste tepat di atas kode </head>,

 <style>
#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfvIU_JTjqi95qkCnRgTNl9FOooMp9ZW3LZI_GuFlhJ3dGhZVCriR9D9bbVvpsBI8jI-RwLTjG_C8L5arYP2Rsk3n1vrhswUVu_M-AoNux8tJPCs1NUn_ifCYciqeHU2_sxMBteBr4nLJ/s90/ajaxloader.gif) no-repeat center 85%; z-index:+100000; cursor:default; display:none; } .wrapper-clockdate { padding:25px; max-width:600px; width:100%; text-align:center; -webkit-border-radius:3px; border-radius:3px; margin:0 auto; margin-top:15%; -webkit-box-shadow:inset 0px 0px 10px #222; box-shadow:inset 0px 0px 10px #222; -webkit-border-radius:5px; border-radius:5px; background-color:#2f2f2f; } #clock-large { font-family:Orbitron, sans-serif; font-size:60px; text-shadow:0px 0px 1px #fff; color:#fff; } #clock-large span { color:#888; text-shadow:0px 0px 1px #333;font-size:30px;position:relative;top:-27px;left:-10px; } #date-large { letter-spacing:15px; font-size:14px; font-family:arial,sans-serif; color:#fff; }
</style>


5. Setelah itu cari kode </body> dengan cara
Ctrl
+
F


6. Copy script di bawah ini lalu paste tepat di atas kode </body>,

 <script type='text/javascript'>

// Javascript Loading Halaman
//<![CDATA[
$(document.body).append('<div id="clockdate-full"><div class="wrapper-clockdate"><div id="clock-large"/><div id="date-large"/></div></div>');
$(window).on("beforeunload", function() {
$('#clockdate-full').fadeIn(500).delay(8000).fadeOut(1000);
});

// Jam Besar
function showTime(){var a_p="";var today=new Date();var curr_hour=today.getHours();var curr_minute=today.getMinutes();var curr_second=today.getSeconds();if(curr_hour<12){a_p="<span>AM</span>"}else{a_p="<span>PM</span>"}if(curr_hour==0){curr_hour=12}if(curr_hour>12){curr_hour=curr_hour-12}curr_hour=checkTime(curr_hour);curr_minute=checkTime(curr_minute);curr_second=checkTime(curr_second);document.getElementById("clock-large").innerHTML=curr_hour+" : "+curr_minute+" : "+curr_second+" "+a_p}function checkTime(i){if(i<10){i="0"+i}return i}setInterval(showTime,500);
// Tanggal Besar
var months=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];var myDays=["Minggu","Senin","Selasa","Rabu","Kamis","Jum&#39;at","Sabtu"];var date=new Date();var day=date.getDate();var month=date.getMonth();var thisDay=date.getDay(),thisDay=myDays[thisDay];var yy=date.getYear();var year=(yy<1000)?yy+1900:yy;document.getElementById("date-large").innerHTML="<b>"+thisDay+"</b>, "+day+" "+months[month]+" "+year;
</script>



7. Lalu simpan dan lihat hasilnya.




Nah itu saja artikel dari Saya, semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar Anda, terima kasih.


Sumber referensi script http://mrhb404.blogspot.com

Cara Membuat Efek Spesial Natal Di Blog

Cara Membuat Efek Spesial Natal Di Blog
Cara Membuat Efek Spesial Natal Di Blog
Efek Spesial Natal Di Blog

Selamat datang agan atau aganwati, kali ini Saya akan berbagi tips blogging yaitu cara membuat efek spesial natal di blog, tentu cara ini sangat menarik apalagi menjelang natal, nah untuk menerapkannya di blog Anda silakan ikuti beberapa langkah di bawah ini;


Langkah


1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu template,

3. Pilih menu edit html,

4. Setelah itu cari kode </body> dengan cara
Ctrl
+
F
 ,

5. Lalu copy script di bawah ini, lalu paste tepat di atas kode </body>,

 <script src='//mrhb404.googlecode.com/svn/js/snow.js' type='text/javascript'/>

<div style="float:left;margin:5px;">
<script id="_wau779">var _wau = _wau || []; _wau.push(["small", "wj4qhqsaf3xu", "779"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/small.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script></div>

<img title="Natal" alt="Natal" style="position:fixed;z-index:9999;top:0;left:0" src="http://3.bp.blogspot.com/-FIi2lhedZlM/UqUh7DiIQBI/AAAAAAAABw0/zGmBkOAzb6g/s1600/vbbstyle.net---top-left.png"/>
<img title="Natal" alt="Natal" style="position:fixed;z-index:9999;top:0;right:0" src="http://3.bp.blogspot.com/-e1ht8cs_3Pc/UqUiMUGdW3I/AAAAAAAABw8/qyiyeOVv0cM/s1600/vbbstyle.net---top-right.png"/>
<div title="Natal" alt="Natal" style="position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(http://1.bp.blogspot.com/-QMaoKtD-U74/UqUiYNtnz0I/AAAAAAAABxE/3BVD-f1E1uE/s1600/vbbstyle.net---footer.png) repeat-x bottom left;"></div>
<img title="Natal" alt="Natal" style="position:fixed;z-index:9999;bottom:20px;left:20px" src="http://1.bp.blogspot.com/-Ss5kPDUVIbM/UqUikRK8PqI/AAAAAAAABxM/6fBmSCbU5lI/s1600/vbbstyle.net---bottom-left.png"/>


6. Simpan dan lihat hasilnya.



Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan dan tinggalkan komentar Anda, terima kasih.

Referensi script http://www.mrhb404.blogspot.com

Cara Membuat Disable Klik Kanan Keren Di Blog

Cara Membuat Disable Klik Kanan Seperti Blog Zona Yahya

Selamat datang agan atau aganwati, kali ini Saya akan berbagi tips blogging yaitu cara membuat disable klik kanan seperti blog Zona Yahya, nah untuk menerapkannya di blog Anda, silakan Anda mengikuti beberapa langkah berikut;


Langkah


1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu template, setelah itu pilih menu edit html,

3. Setelah itu cari kode </b:skin> dengan cara
Ctrl
+
F
,


4. Lalu copy script di bawah ini, lalu paste tepat di atas kode </b:skin>,


  #zz-com{background:#6D6D6D;position:fixed;z-index:99999;bottom:0;height:88px;display:none;width:100%;}.qq{height:20px}.foot-right,.zz2{float:right}#zz1{padding: 10px;width: 80%;color: #fff;font-size: 15px;margin: 0 auto;}#zz1 ul i,.zz2 ul i{font-size:18px}#search{padding:5px;}#penginput{padding:5px;border:0;background:#2c3e50;color:#fff;}.tabs li.selected a,.tabs li.selected a:hover{background:#34495e;position:relative;font-weight:inherit;}#blog-pager{text-align:center;}.showpageArea{overflow:hidden;padding:5px 0;}.showpageOf{display:none;background:#eee;padding:2px 5px;margin-right:5px;}.showpagePoint{background:#2980b9;color:#fff;padding:10px;margin-right:3px;}.showpageNum a{background:#fff;padding:10px;margin-right:3px;color:#000;transition:all 0.4s ease-in-out;}.showpage a:hover,.showpageNum a:hover{background:#2980b9;color:#fff;border-color:#2980b9}.showpage a{background:#fff;padding:10px;margin:0;color:#000;}
input[type="text"]{border:0;padding:10px;background:#fff;font-weight:bold;color:#666;}



5. Setelah itu cari kode </body> dengan cara
Ctrl
+
F
,


6. Lalu copy script di bawah ini, lalu paste tepat di atas kode </body>,




 <div id='zz-com'><div id='zz1'><div style='text-align:center;'>Maaf untuk sementara ini klik kanan dinonaktifkan, karena banyak blogger yang copy paste sembarangan tanpa izin. 
<br/>
<br/>
Jadi jika ingin Copy Tekan &quot;<div class='kbrd'>Ctrl</div>+<div class='kbrd'>C</div>&quot;. Dan jika ingin buka link di new tab klik linknya sambil menekan tombol <div class='kbrd'>Ctrl</div>. Terimakasih atas Pengertiannya, dan mohon maaf Jika anda terganggu.
.</div>
<div style='text-align:right;'>Best Regards <a href='https://fb.com/RenaldyRizki Ramadani'><b>Renaldy Ramadani</b></a></div></div></div>
<script language='javascript' type='text/javascript'>
document.oncontextmenu = RightMouseDown;
document.onmousedown = mouseDown;

function mouseDown(e) {
if (e.which==3) {//righClick
$(&quot;#zz-com&quot;).toggle(500);
}
}

function RightMouseDown() {
return false;
}
</script>
<script language='javascript' type='text/javascript'>
$(document).ready(function(){
$(&quot;.zz2&quot;).click(function(){
$(&quot;#zz-com&quot;).hide(500);
});
});
</script>


Keterangan :

- https://fb.com/RenaldyRizki Ramadani dapat diganti dengan link media sosial Anda,

- Renaldy Ramadani dapat diganti dengan nama Anda,

- Untuk penerapan efek keyboard dapat ditambahkan, untuk penambahannya dapat dilihat di bawah ini,


View
click to view

8. Lalu simpan dan lihat hasilnya.


Nah semoga artikel ini bermanfaat, jangan lupa bagikan dan tinggalkan komentar, terima kasih.


Referensi script http://www.zonayahya.com/2014/09/anti-klik-kanan-dengan-efek-kata-kata.html

Cara Membuat Efek Tombol Keyboard Di Blog

Cara Membuat Efek Tombol Keyboard Di Blog

Selamat datang agan atau aganwati kali ini Saya akan berbagi tips blogging yaitu membuat efek tombol keyboard di blog, untuk menerapkannya di blog Anda, Anda harus mengikuti beberapa langkah berikut;


Langkah


1. Login pada blog Anda masing-masing,

2. Pada menu dashboard blog pilih menu template, lalu pilih menu edit html,

3. Lalu cari kode </b:skin> dengan cara
Ctrl
+
F
,


4. Lalu copy script di bawah ini, lalu paste script tersebut tepat di atas kode </b:skin>,


 /* CSS Keyboard renaldyways.blogspot.com */
.kbrd {
border-radius: 3px;
border: 1px solid #A3A3A3;
box-shadow: 1px 0px 1px 0px #FFF, 0px 2px 0px 2px #D3D3D3, 0px 2px 0px 3px #888;
box-sizing: border-box;
display: inline;
font-family: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0px 5px;
padding: 1px 5px;
text-transform: capitalize;
vertical-align: baseline;
}



5. Setelah itu simpan,

6. Untuk penerapannya silakan menggunakan script di bawah ini,


 <div class="kbrd">Ctrl</div>+<div class="kbrd">F</div> 



7. Jika di gunakan dalam suatu artikel jangan lupa ubah jenis dari compose menjadi html untuk meletakan script tersebut.

Cara Membuat Efek Tombol Keyboard Di Blog



Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan dan tinggalkan komentar, terima kasih.

Cara Membuat Lafadz Bismillah Tepat Di Atas Artikel Di Blog

Cara Membuat Lafadz Bismillah Tepat Di Atas Artikel Di Blog


Selamat datang agan atau aganwati kali ini Saya akan berbagi cara membuat lafadz bismillah tepat di atas artikel blog, nah untuk membuatnya silakan Anda mengikuti beberapa langkah berikut;



Langkah



1. Login pada blog Anda masing-masing,

2. Pada menu dashboard, pilih menu template,

3. Lalu pilih menu edit html,

4. Setelah itu cari script di bawah ini, dengan cara
Ctrl
+
F
,

 <data:post.body/> 


5. Lalu Anda akan menemukan beberapa kode tersebut, jika Anda menemukan beberapa kode cari kode tersebut yang terakhir,

6. Setelah itu copy script di bawah ini lalu paste tepat di atas kode tadi yang paling terakhir,


 <div style='text-align: center;'> <span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></span></span></div> 



7. Simpan dan lihat hasilnya.






Nah mungkin itu saja dari Saya semoga bermanfaat, jangan lupa bagikan dan tinggalkan komentar, terima kasih.

Cara Membuat Prism Syntax Highlighter Keren Di Blog

Cara Membuat Prism Syntax Highlighter Keren Di Blog


Selamat datang agan atau aganwati kali ini, Saya akan berbagi cara membuat syntax highlighter seperti Arliana Design di blog, untuk menerapkan di blog Anda silakan ikuti beberapa langkah berikut;



Langkah



1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu template,

3. Lalu pilih menu edit html,

4. Cari kode ]]></b:skin> dengan cara
Ctrl
+
F
,


5. Copy script di bawah ini,


 /*CSS Syntax Hightler */
pre {
padding: 50px 10px 10px 10px;
margin: .5em 0;
white-space: pre;
word-wrap: break-word;
overflow: auto;
background-color: #2c323c;
position: relative;
border-radius: 4px;
max-height: 500px;
}

pre::before {
font-size: 16px;
content: attr(title);
position: absolute;
top: 0;
background-color: #eee;
padding: 10px;
left: 0;
right: 0;
color: #fff;
text-transform: uppercase;
display: block;
margin: 0 0 15px 0;
font-weight: bold;
}

pre::after {
content: &#39;Double click to selection&#39;;
padding: 2px 10px;
width: auto;
height: auto;
position: absolute;
right: 8px;
top: 8px;
color: #fff;
line-height: 20px;
transition: all 0.3s ease-in-out;
}

pre:hover::after {
opacity: 0;
top: -8px;
visibility: visible;
}

code {
font-family: Consolas,Monaco,&#39;
Andale Mono&#39;,&#39;Courier New&#39;,Courier,Monospace;
line-height: 16px;
color: #88a9ad;
background-color: transparent;
padding: 1px 2px;
font-size: 12px;
}

pre code {
display: block;
background: none;
border: none;
color: #e9e9e9;
direction: ltr;
text-align: left;
word-spacing: normal;
padding: 0 0;
font-weight: bold;
}

code .token.punctuation {
color: #ccc;
}

pre code .token.punctuation {
color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
color: #777;
}

code .namespace {
opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
color: #fafafa;
}

pre code .token.string {
color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
color: #ccc;
}

code .token.operator {
color: #1887dd;
}

code .token.atrule,code .token.attr-value {
color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
color: #1baeb0;
}

code .token.keyword {
color: #e13200;
font-style: italic;
}

code .token.comment {
font-style: italic;
}

code .token.regex {
color: #ccc;
}

code .token.important {
font-weight: bold;
}

code .token.entity {
cursor: help;
}

pre mark {
background-color: #ea4f4e!important;
color: #fff!important;
padding: 2px;
border-radius: 2px;
}

code mark {
background-color: #ea4f4e!important;
color: #fff!important;
padding: 2px;
border-radius: 2px;
}

pre code mark {
background-color: #ea4f4e!important;
color: #fff!important;
padding: 2px;
border-radius: 2px;
}

.comments pre {
padding: 10px 10px 15px 10px;
background: #2c323c;
}

.comments pre::before {
content: &#39;Code&#39;;
font-size: 13px;
position: relative;
top: 0;
background-color: #f56954;
padding: 3px 10px;
left: 0;
right: 0;
color: #fff;
text-transform: uppercase;
display: inline-block;
margin: 0 0 10px 0;
font-weight: bold;
border-radius: 4px;
border: none;
}

.comments pre::after {
font-size: 11px;
}

.comments pre code {
color: #eee;
}

.comments pre.line-numbers {
padding-left: 10px;
}

pre.line-numbers {
position: relative;
padding-left: 3.0em;
counter-reset: linenumber;
}

pre.line-numbers &gt; code {
position: relative;
}

.line-numbers .line-numbers-rows {
height: 100%;
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.5em;
width: 3em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
padding: 0;
}

.line-numbers-rows &gt; span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}

.line-numbers-rows &gt; span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
transition: 350ms;
}

pre[data-codetype=&#39;CSS&#39;]:before {
background-color: #00a1d6;
}

pre[data-codetype=&#39;HTML&#39;]:before {
background-color: #3cc888;
}

pre[data-codetype=&#39;JavaScript&#39;]:before {
background-color: #75d6d0;
}

pre[data-codetype=&#39;JQuery&#39;]:before {
background-color: #e5b460;
}




6. Paste script yang sudah dicopy tadi tepat di atas kode ]]></b:skin>,

7. Lalu cari kode </body> dengan cara
Ctrl
+
F
,


8. Copy script di bawah ini,


 <script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>
<script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})
</script>

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
pres[i].addEventListener(&quot;dblclick&quot;, function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>


9. Lalu paste script yang sudah dicopy tepat di atas kode </body>,

8. Simpan.





Penerapan



1. Pada saat menerapkan pada posting pilih menu html,


Cara Membuat Prism Syntax Highlighter Keren Di Blog

2. Setelah itu tambahkan kode di bawah ini setiap akan memakai penerapan,


 <pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup"> Taruh Script HTML Di Sini </code></pre> 


 <pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css"> Taruh Script CSS Di Sini </code></pre> 



 <pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript"> Taruh Script Java Script Di Sini </code></pre> 



 <pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"><code class=" language-jquery"> Taruh Script JQuery Di Sini </code></pre> 



3. Untuk menambahkan script pada syntax highlighter, kembalikan jenisnya menjadi compose,

Cara Membuat Prism Syntax Highlighter Keren Di Blog


4. Contoh pengisian syntax highlighter,

Cara Membuat Prism Syntax Highlighter Keren Di Blog


5. Kalimat "Taruh Script Di Sini" diganti dengan script yang akan Anda pasang,

6. Selesai.



Nah mungkin itu saja dari Saya semoga bermanfaat jangan lupa bagikan dan tinggalkan komentar, terima kasih.