::selection {background:#d90000; color:#FFFFFF;}

Popular Post

Popular Posts

Recent post

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Cara Membuat Spoiler di Blog (Script Spoiler) - Hhhaaiaiaiaiai,..hhehe kali ini saya akan posting tentang "Cara Membuat Spiler di Blog (Script Spoiler)"
Tahu kan spoiler?Kalo dalam arti bahasa sih spoiler itu beberan. Nah di internet penggunaan spoiler ini sangat banyak terutama di forum-forum seperti kaskus, indowebster dll. Gunanya untuk menyembunyikan konten. Jadi konten itu hanya dilihat oleh orang yang ingin melihatnya saja. Lalau bagaimana cara memasang spoiler di blog?ini dia caranya :
  • login ke blog
  • lalu masuk pada halaman yang ingin kalian beri spoiler
  • pilih tab html, bukan compose
  • copy script berikut ini
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Klik Show Untuk Membuka</b>: <input value="Show" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan teks atau kode script (gambar atau video) di sini
 <br>
</div>
</div>
</div> 
  • ganti "Letakkan teks atau kode script (gambar atau video) di sini" dengan konten yang ingin kalian masukkan misalnya text atau gambar.
  • hasilnya:
Klik Show Untuk Membuka
Nah itu kawan script spoilernya, cocok digunakan untuk postingan kalian yang mungkin informasi/gambar itu perlu dicantumkan hanya saja kalian merasa nantinya akan terlalu penuh halamannya. Semoga bermanfaat yah ^_^

Cara Membuat Spoiler di Blog (Script Spoiler)

Sudah lama rasanya tidak posting mengenai tutorial blog. banyak juga komentar yang masuk bertanya tentang tutorial yang belum sempat saya balas. mohon maaf kepada sobat yaqindlive yang selalu setia berkunjung dan meniggalkan komentar-komentarnya di blog ini. saya selaku admin senang dengan apresiasi pengunjung blog yaqindlive. terimakasih semoga setiap sajian blog ini berkenan dan bermanfaat bagi anda semua. cukup sekian dulu curhatnya mohon maap ye. admin sibuk ngurusi skripsi hehe. Nah sobat yaqindlive, kali ini kita akan belajar cara membuat judul blog bergerak di navbar browser kita. cukup mudah anda hanya diharuskan untuk memasang java script pada blog anda.


Berikut Caranya :
  • pastekan kode berikut pada java script anda.pada kolom isian widget, kosongkan saja nama widgetnya.
<script language="JavaScript">
<!--
/*****TITLE START*****/

function tb5_makeArray(n){
this.length = n;
return this.length;
}

tb5_messages = new tb5_makeArray(5);

tb5_messages[0] = "Hallo Sobat yaqindlive";
tb5_messages[1] = "Welcome in my blog";
tb5_messages[2] = "Selamat datang di blog saya";
tb5_messages[3] = "semoga dapat membantu sobat semua";
tb5_messages[4] = "Sering-sering maen dimari ya!";
tb5_rptType = 'infinite';
tb5_rptNbr = 10;
tb5_speed = 50;
tb5_delay = 2000;
var tb5_counter=1;
var tb5_currMsg=0;
var tb5_stsmsg="";
function tb5_shuffle(arr){
var k;
for (i=0; i<arr.length; i++){
k = Math.round(Math.random() * (arr.length - i - 1)) + i;
temp = arr[i];arr[i]=arr[k];arr[k]=temp;
}
return arr;
}
tb5_arr = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
tb5_sts = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
for (var i=0; i<tb5_messages[tb5_currMsg].length; i++){
tb5_arr[i] = i;
tb5_sts[i] = "_";
}
tb5_arr = tb5_shuffle(tb5_arr);
function tb5_init(n){
var k;
if (n == tb5_arr.length){
if (tb5_currMsg == tb5_messages.length-1){
if ((tb5_rptType == 'finite') && (tb5_counter==tb5_rptNbr)){
clearTimeout(tb5_timerID);
return;
}
tb5_counter++;
tb5_currMsg=0;
}
else{
tb5_currMsg++;
}
n=0;
tb5_arr = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
tb5_sts = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
for (var i=0; i<tb5_messages[tb5_currMsg].length; i++){
tb5_arr[i] = i;
tb5_sts[i] = "_";
}
tb5_arr = tb5_shuffle(tb5_arr);
tb5_sp=tb5_delay;
}
else{
tb5_sp=tb5_speed;
k = tb5_arr[n];
tb5_sts[k] = tb5_messages[tb5_currMsg].charAt(k);
tb5_stsmsg = "";
for (var i=0; i<tb5_sts.length; i++)
tb5_stsmsg += tb5_sts[i];
document.title = tb5_stsmsg;
n++;
}
tb5_timerID = setTimeout("tb5_init("+n+")", tb5_sp);
}
function tb5_randomizetitle(){
tb5_init(0);
}
tb5_randomizetitle();

//-->
</script>


NOTE : Anda dapat mengganti tulisan yang berwarna biru menjadi kata-kata anda sendiri.

Thanks to Mampir Bro,

Cara Membuat Judul Dan Deskripsi Blog Bergerak di Navigasi Browser 

           Candra Wijaya
                          T.T.D
   
Devil Elevator-Pada artikel ini saya akan membahas Cara membuat tombol Reply threaded Comments di Blog tanpa Pop up. Kebanyakan tutorial membuat tombol reply komentar yang saya jumpai ujung-ujungnya menggunakan Pop up comments. Tentu ribet bukan jika kita ingin membalas komentar di blog namun harus dengan pop up komentar. Alangkah lebih efisien jika ketika mengklik tombol reply maka secara otomatis muncul teks area komentar dibawah tombol reply tadi.

Maka dari itu saya akan membahas Cara membuat tombol Reply threaded Comments di Blog tanpa Pop up
-Login ke akun blogger
-Menu template-->edit html-->lanjutkan
-Centang expand template widget
-Tekan F3 dan cari kode <b:include data='post' name='comments'/>
-Ganti dengan kode

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
-Jika terdapat 2 kode  <b:include data='post' name='comments'/>maka ganti kedua-duanya dengan kode diatas.
-cari kode ]]></b:skin> kemudian copy kode berikut tepat diatasnya
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;

border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);

}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}

.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}

.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}

.comments .comments-content .user a {
  color: #444;
}

.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}

.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}

.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}

.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}
-Simpan template

Silahkan sobat cek tombol reply blog sobat. Insya Allah sudah seperti dengan apa yang sobat inginkan. Jika terdapat masalah, tinggalkanlah komentar sobat.

Selamat mencoba....

Cara Membuat Tombol Reply Threaded Comments di Blog tanpa Pop up


         Candra Wijaya

                          T.T.D

- Copyright © 2013 Devil Elevator - Devil-Elevator - Powered by Blogger - Designed by Candra Wijaya -