Cara Membuat Efek Hover pada Gambar

, , , No comments
Cara Membuat Efeck Hover

Kali ini saya akan memberikan sedikit Tutorial "Cara Membuat Efek Hover pada Gambar" 

 1. Login dulu pastinya di Blogger sobat...
2. Masuk ke pengaturan Template > Klik yang HTML
3. Cari Kode ini ]]></b:skin> atau </style>.
4.  Lalu tambahkan Kode Css di bawah ini  Tepat di Atas ]]></b:skin> atau </style>.
.post-body img{background:#FFF;/* background color around the image */
padding:15px;/* The Space Between Border and Image */
border-radius:50% 0;/* Rounded border */
box-shadow:0 0 15px #000;/* Shadow */
-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s}
.post-body img:hover{border-radius:0;/* This removes the border roundness (value 0) */
-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;cursor:pointer}
5.Trahir Save.....

Demikian tentang "Cara Membuat Efek Hover Pada Gambar"
Share:
Read More

Anti Copas (Copy Paste) Pada Blog

, , No comments


Kali Ini saya akan memberikan Tutorial "Anti Copas (Copy Paste) Pada Blog"
Langsung saja ikuti Tutorial di bawah ini :



  • Cara Pertama

Cara Pertama ini untuk sebagian artikel kita saja yang tidak bisa di Copas
1. Masuk ke Blogger Sobat
2.Lalu masuk ke menu Template Klik Yang Html
3.Cari ]]></b:skin> atau </style>
4.Lalu paste Script di bawah ini Tepat dia atas  ]]></b:skin> atau </style>
.Moura {
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
5. Save
6.Untuk menerapkan tinggal masukan script di bawah ini di postingan sobat
<div class="Moura"> isi artikel Anda yang tidak ingin dicopas </div>

  • Cara Kedua

Cara Kedua Ini untuk semua isi artikel  yang tidak bisa di Copas
1. Masuk ke Blogger Sobat
2.Lalu masuk ke menu Template Klik Yang Html
3.Cari kode </head> di Edit Html. Lalu paste Script di bawah ini Tepat di bawah </head>


<script type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</script >
4. Save..



  • Cara Ketiga

Cara Ketiga ini untuk Semua Isi Blog tidak bisa di Copas

1. Masuk ke Blogger Sobat
2.Lalu masuk ke menu Template Klik Yang Html
3.Cari kode <body> lalu hapus ganti dengan Script di bawah ini
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
4.Save..

Demikian beberapa cara agar Blog kita tidak di Copy orang lain..

Share:
Read More

Membuat Kotak dengan Scrool di postingan

, , No comments
Membuat Kotak dengan Scrool di postingan

Kali ini saya akan memberikan tutorial yang lumayan penting buat Sahabat blogger atau Wordpress,
"Membuat Kotak dengan Scrool di postingan",
Entah di buat masukin Gambar atau Script.

Langsung saja ikutin Langkah demi Langkah..

1. Buat Postingan baru.
2.Lihat di atas kotak buat postingan ada tulisan "Compose sama HTML" (Blogger) atau "Visual sama HTML" (Wordpress),
3.Copy Script Di bawah ini :
<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;"> Kode/Script yg ingin di masukan </div>
3. Paste Script di atas dan taruh di HTML... (Ingat HTML)

Terahir kalau cara di atas udah tepat pasti sukses.
Demikian cara "Membuat Kotak dengan Scrool di postingan"
Share:
Read More

Cara membuat Pulse Loading Animation di Blog

, , No comments
Pulse Loading Animation
Kali ini saya akan memberi tutorial "Cara membuat Pulse Loading Animation di Blog"
Langsung saja pada penjeasannya dari pada banyak basa-basi. Hehehehe...


1.Pertama harus punya Blogger
2.Masuk ke menu Template
3.Klik edit Html
4.Masuka kode Html di bawah ini di atas </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0Bz6NggaZAz1DVnZsS2F6SllZOXc" type="text/javascript"></script>
<style>
#load-page-moura { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }
$circle-size:10vmin; * { box-sizing:border-box; position:relative; }
.loader { margin-top:250px; }
.circle { border-radius:100vmax; display:inline-block; height:20vmin; opacity:.5; width:20vmin; }
.pulse .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 -4vmin; transform:scale(0); }
.two .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 calc(0vw - 10vmin); position:absolute; transform:scale(0); }
.circle:nth-of-type(1) { background:#FF9800; }
.circle:nth-of-type(2) { background:#FFC107; animation-delay:100ms; }
.circle:nth-of-type(3) { background:#FFEB3B; animation-delay:200ms; }
.circle:nth-of-type(4) { background:#CDDC39; animation-delay:400ms; }
.circle:nth-of-type(5) { background:#8BC34A; animation-delay:500ms; }
.circle:nth-of-type(6) { background:#4CAF50; animation-delay:600ms; }
@keyframes pulse-1 {
    25% { transform:scale(0); } 100% { transform:scale(1); }
}
</style>

*Penting kalau di Template kamu ada Jquery (warna Merah). maka langsung saja dari

<script src="https://googledrive.com/host/0Bz6NggaZAz1DVnZsS2F6SllZOXc" type="text/javascript"></script>
<style>
#load-page-moura { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }
$circle-size:10vmin; * { box-sizing:border-box; position:relative; }
.loader { margin-top:250px; }
.circle { border-radius:100vmax; display:inline-block; height:20vmin; opacity:.5; width:20vmin; }
.pulse .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 -4vmin; transform:scale(0); }
.two .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 calc(0vw - 10vmin); position:absolute; transform:scale(0); }
.circle:nth-of-type(1) { background:#FF9800; }
.circle:nth-of-type(2) { background:#FFC107; animation-delay:100ms; }
.circle:nth-of-type(3) { background:#FFEB3B; animation-delay:200ms; }
.circle:nth-of-type(4) { background:#CDDC39; animation-delay:400ms; }
.circle:nth-of-type(5) { background:#8BC34A; animation-delay:500ms; }
.circle:nth-of-type(6) { background:#4CAF50; animation-delay:600ms; }
@keyframes pulse-1 {
    25% { transform:scale(0); } 100% { transform:scale(1); }
}
</style>

5.Letakan Kode Html di bawah ini tepat di bawah <body>
<div id="load-page-moura">
<div class="loader pulse">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>

6. Trahir Save. Selesai dehhhhhh

Kalau ada pertanyaan koment di bawah ye... :)
Share:
Read More

Recent Posts