NEWS UPDATE :
Tampilkan postingan dengan label Disimpen Ben Ra Lali. Tampilkan semua postingan
Tampilkan postingan dengan label Disimpen Ben Ra Lali. Tampilkan semua postingan

Membuat Spoiller Buka-Tutup Kotak Komentar pada Blog


Cara Membuat Spoiller Buka-Tutup Kotak Komentar sbb.
Bagian I
Langkah-Langkah sebagai berikut:
1.    Buka dasbor blog Klik template -- Klik edit HTML
2.    Tekan Ctrl + f
3.    Cari kode di bawah ini dengan cara masukkan sebaris kode di bawah lalu “enter”

<div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
</div


4.    Copy paste script dibawah ini, persis di atas kode tadi

<!-- spoiler komentar part1 -->
<div><div style='margin-bottom: 2px;'><i><b><small/></b></i><input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Tutup&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos; Lihat Komentar Disini&apos;; }' style='margin: 0px; padding: 0px; width: 200px; font-size: 15px;font-weight:bold;' type='button' value='Lihat Komentar Disini'/></div>
<div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>
<!-- spoiler komentar part1 end -->


5.    Langkah yang terakhir klik SAVE.
6.    Jika gagal, copy paste-kan script dibawah ini setelah kode  yang berwarna merah, lalu save.

<!-- spoiler komentar part2 -->
</div></div></div>
<!-- spoiler komentar part2 end -->



Bagian II

Selanjutnya untuk mempercantik-memperindah kotak komentar, saya dikasih tahu teman dari Lamongan, agar melakukan langkah-langkah sebagai berikut:

1.    Klik Tata Letak
2.    Klik Tambah Gadget
3.    ilih HTML/JavaScript 
4.    Copy Paste code script di bawah ini 

<style type='text/css'>

/**
 *
 */
.comments:after { border-color: #fff; }
.comments:before { background-color: #030826; }
.comments .comment {
  background: #C0ADFF;
  border-radius: 10px;
  font-size: 14px;
  padding: 10px 15px;
}
.comments [class*="level-"] .photo:before { background-color: #fff; }
.comments .meta { color: #ccc; }
.comments .meta a { color: inherit; }
.comments .meta a:hover { color: #34b5d0; }
.comments .body { color: #888; }

/**
 * Comments Thread
 */
.comments {
  list-style-type: none;
  padding: 5px 0 0 26px;
  position: relative;
  margin: 0 0 0 1px;
}
.comments:before,
.comments .comment,
.comments .comment:after,
.comments .comment:before,
.comments .photo img,
.comments [class*="level-"] .photo:before {
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.comments:after,
.comments:before {
  display: block;
  content: '';
  position: absolute;
}
.comments:before {
  border-radius: 0 0 5px 5px;
  height: 100%;
  width: 8px;
  left: 0;
  top: 0;
}
.comments:after {
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4) inset;
  border-width: 4px;
  border-style: solid;
  border-radius: 18px;
  height: 10px;
  width: 10px;
  left: -5px;
  top: -16px;
  z-index: -1;
}
.comments .comment {
  margin-bottom: 10px;
  position: relative;
}
.comments .comment:after,
.comments .comment:before {
  border-radius: 10px;
  background-color: #fff;
  position: absolute;
  display: block;
  content: '';
}
.comments .comment:after {
  width: 12px;
  height: 12px;
  left: -14px;
  top: 7px;
}
.comments .comment:before {
  width: 5px;
  height: 5px;
  left: -22px;
  top: 16px;
}
.comments .photo {
  position: absolute;
  left: -60px;
  top: 2px;
}
.comments .photo img {
  border: 1px solid #fff;
  border-radius: 32px;
  overflow: hidden;
}
.comments .meta { margin-bottom: 5px; }
.comments .meta .reply { display: none; float: right; }
.comments .comment:hover .reply { display: block; }
.comments [class*="level-"] .photo:before {
  display: block;
  content: '';
  position: absolute;
  margin-top: -2px;
  height: 4px;
  width: 20px;
  left: -10px;
  top: 50%;
  z-index: -1;
}
.comments .level-2 { margin-left: 30px; }
.comments .level-3 { margin-left: 50px; }
.comments .level-4 { margin-left: 70px; }
.comments .level-5 { margin-left: 90px; }
.comments .level-6 { margin-left: 110px; }
.comments .level-3 .photo:before { width: 40px; left: -30px;}
.comments .level-4 .photo:before { width: 60px; left: -50px;}
.comments .level-5 .photo:before { width: 80px; left: -70px;}
.comments .level-6 .photo:before { width: 100px; left: -90px;}</style>

5.    Klik save

Baca Selengkapnya »
Tidak ada komentar:

Membuat Text Box pada Blog


Teks Box - Text Box
Kode HTML nya
<form name="copy"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/>
<textarea name="txt" style="height: 100px; padding: 3px; width: 494px;">
  ----- Masukan text atau Kode HTML atau dll disini ------
</textarea></form>

Contoh
HTML Text Box dan Dara HTML setelah digabung:

<form name="copy"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/>
<textarea name="txt" style="height: 100px; padding: 3px; width: 494px;">
<br /> <style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNbZPBD25S16s2QYmm8bBw_vijf1eL40CuJHdJUoAB1ECWYxw4zihhDjm2jHJGY6FW6Q98Ah4M1KINxZFmWDpkixEgZxr94HKlIbxn9gMGheTUZuxBfqhSNavxHMNi07K5Ls9wRg_Tho/s1600/bukutamu.png') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background: #1B4118; padding:10px; } </style><br /> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script><br /> <div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<!-- BEGIN CBOX - www.cbox.ws - v001 --><br /> <div id="cboxdiv" style="text-align: center; line-height: 0">
<div>
<iframe frameborder="0" width="300" height="350" src="http://www3.cbox.ws/box/?boxid=3295198&boxtag=bd6q13&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3295198" style="border:#DBE2ED 1px solid;" id="cboxmain3-3295198"></iframe></div>
<div>
<iframe frameborder="0" width="300" height="96" src="http://www3.cbox.ws/box/?boxid=3295198&boxtag=bd6q13&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform3-3295198" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform3-3295198"></iframe></div>
</div>
<!-- END CBOX -->
<br /> <div style="text-align:right">
<a href="http://harunarcom.blogspot.com/p/home.html">[Campoeng Cmoneng]</a>><a href="javascript:showHideGB()"><br /> [Tutup]<br /> </a><br /> </div>
</div>
</div>
<script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script></div>
</div>
</textarea></form>

Hasilnya tampilan "Text Box" seperti di bawah ini:

Demikian, Disimpen Ben Ra Lali
Baca Selengkapnya »
Tidak ada komentar:

Membuat Related Post atau Daftar Artikel Terkait


Related Post biasanya disebut juga Artikel Terkait,  yang apabila dipasang pada blog, pada bagian bawah postingan akan muncul judul-judul artikel yang sama label-nya, makanya disebut Artikel Terkait.

Kadang ada yang membuatnya dengan nama “Anda Pasti Meminati Yang Ini, Baca Juga Artikel Menarik Di Bawah Ini, Yang Ini asti Anda Senang, Artikel Menarik Lain”  atau dsb, dsb

Langkah-Langkah Membuat  Related Post atau Artikel Terkait pada Blog

BAGIAN PERTAMA 6 LANGKAH
1.    Login  ke Dashbor Blogger
2.    Pilih Templateatau Design
3.    Pilih  Edit HTML
4.    Centang kotak kecil Expand Widget
5.    Teka “Ctrl + F, Cari kode <data:post.body/>
6.    Copy-paste kode HTML berikut tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:250px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>



BAGIAN KEDUA 2 LANGKAH
7.    Selanjutnya cari kode ]]></b:skin>
8.    Copy-paste kode HTML berikut ini tepat diatasnya

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ol li {
display : block;
background : url(false) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;}



BAGIAN KETIGA 2 LANGKAH
9.    klik Save/Simpan
10. Keterangan: Warna merah dapat diganti sesuai selera
Demikian, Disimpen Ben Ra Lali
Baca Selengkapnya »
Tidak ada komentar:

Membuat Iklan Melayang di Samping Kiri & Kanan Blog

Trik ini sagat mudah, berguna agar iklan yang di pop up selalu tampil dan tidak mengganggu konten, cocok bagi BLOG yang ingin menempatkan iklan

Cara menggunakan trik ini sbb:
  1. Pertama klik Tata Letak
  2. Klik Tambah Gadget
  3. Lalu pilih HTML/JavaScript 
  4. Copy Paste code script di bawah ini 
KETERANGAN
Ganti Tulisan yang berwarna merah dengan script iklan sendiri 


Tanpa Tombol “Close”
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>

<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

<div id="teaser2" style="width:autopx; height:autopx; text-align:left; display:scroll;position:fixed; bottom:0px;left:0px;">

<!--Mulai Iklan Kiri-->

<script src="http://kumpulblogger.com/dam.php?b=183393" type="text/javascript">
                                                     </script>
<!--Akhir Iklan Kiri-->
</div>
<div id="teaser3" style="width:autopx; height:autopx; text-align:right; display:scroll;position:fixed; bottom:0px;right:0px;">

<!--Mulai Iklan Kanan-->

<script src="http://kumpulblogger.com/dam.php?b=183393" type="text/javascript">
                                                     </script>
<!--Akhir Iklan Kanan-->
</div>



Pakai Tombol “Close”
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>

<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

<div id="teaser2" style="width:autopx; height:autopx; text-align:left; display:scroll;position:fixed; bottom:0px;left:0px;">

<div>
<a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq7raSSENO1uDv6fmitpbjFVYe3TxOZMnY5Ld39qrQ4RIVkF_Em6gtOzMXHP6EXA7UXAFsvYygaxmjkFLmzwWRtDv_xyXFbRZuUgkObkxYjoWURxnMYwvCopwL8GotOSNdig7WhoRuUJi7/s1600/PhoXo2.png'/></center>
</a></div>
<!--Mulai Iklan Kiri-->

<script src="http://adsensecamp.com/show/?id=U2ODqs77BxY%3D&cid=Jw0%2BaU5zMLg%3D&chan=M3TKFLZklWc%3D&type=3&title=3D81EE&text=000000&background=E6E6E6&border=000000&url=2BA94F" type="text/javascript"> </script><br />

<!--Akhir Iklan Kiri-->
</div>
<div id="teaser3" style="width:autopx; height:autopx; text-align:right; display:scroll;position:fixed; bottom:0px;right:0px;">

<div>
<a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq7raSSENO1uDv6fmitpbjFVYe3TxOZMnY5Ld39qrQ4RIVkF_Em6gtOzMXHP6EXA7UXAFsvYygaxmjkFLmzwWRtDv_xyXFbRZuUgkObkxYjoWURxnMYwvCopwL8GotOSNdig7WhoRuUJi7/s1600/PhoXo2.png'/></center>
</a></div>
<!--Mulai Iklan Kanan-->

<script src="http://adsensecamp.com/show/?id=U2ODqs77BxY%3D&cid=Jw0%2BaU5zMLg%3D&chan=M3TKFLZklWc%3D&type=3&title=3D81EE&text=000000&background=E6E6E6&border=000000&url=2BA94F" type="text/javascript"> </script><br />

<!--Akhir Iklan Kanan-->
</div>
ARDI WIRAWAN
lazada
Baca Selengkapnya »
Tidak ada komentar:

SahabatQ

Like Facebokk Friends

ProfilQ

VERDA CANTIKA.PSH

Masih Sekolah di SMPN 1 ploso Jombang dr keluarga 3 bersaudara :adik Rindu masih kelas 4 SDN Kedungrejo dn adik Livi masih kecil umur 2,5 th kami keluarga bahagia yg saling menyayangi dn mengasihi sekian Trimksh Lihat Lengkap ProfilQ