Cara membuat Loading Animasi Circle

, , , , No comments


Kemarin saya Sudah membagikan Tutorial membuat  Efek loading.
dari yang Loading Dengan Font dan Pulse Loading Animation.
Sekarang saya akan memberikan Tutorial lagi tapi masih sama Tentang Loading,
tapi yang sekarang berbedah yaitu Loading Animasi Circle Penasaran Lihat Demo.....

Ok lanjut ke Tutorialnya:
1. Masuk ke Blog sobat,
2. Masuk ke Template > HTML
3. Letakkan Kode di bawah ini Tepat 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://cdn.rawgit.com/maura-tutorial/loading/master/loading.js" type="text/javascript"></script>
<link href='https://cdn.rawgit.com/maura-tutorial/loading/master/Circle.css' rel='stylesheet' type='text/css'/>

*Penting: Kalau di template Sudah ada Jquery (Warna Merah)  Lewati saja.

4. Letakkan juga Kode di bawah ini tepat di bawah <body>
<div id="maura-load">
<div class="all_circle">
   <div class="tulisan">Welcome to the Maura Tutorial..</div>
  <div class="circle one"></div>
  <div class="circle two"></div>
  <div class="circle three"></div>
  <div class="circle four"></div>
  <div class="circle five"></div>
  <div class="circle six"></div>
  <div class="circle seven"></div>
  <div class="circle eight"></div>
  <div class="circle nine"></div>
  <div class="circle ten"></div>
  <div class="circle eleven"></div>
  <div class="circle twelve"></div>
  <div class="circle thirteen"></div>
  <div class="circle fourteen"></div>
  <div class="circle fifteen"></div>
  <div class="circle sixteen"></div>
  <div class="circle seventeen"></div>
  <div class="circle eighteen"></div>
  <div class="circle nineteen"></div>
  <div class="circle twenty"></div>
  <div class="circle twenty-one"></div>
  <div class="circle twenty-two"></div>
  <div class="circle twenty-three"></div>
  <div class="circle twenty-four"></div>
  <div class="circle twenty-five"></div>
  <div class="circle twenty-six"></div>
  <div class="circle twenty-seven"></div>
  <div class="circle twenty-eight"></div>
  <div class="circle twenty-nine"></div>
  <div class="circle thirty"></div>
  <div class="circle thirty-one"></div>
  <div class="circle thirty-two"></div>
  <div class="circle thirty-three"></div>
  <div class="circle thirty-four"></div>
  <div class="circle thirty-five"></div>
  <div class="circle thirty-six"></div>
  <div class="circle thirty-seven"></div>
</div>

*Penting: Warna Merah di atas yang tulisan Welcome silakan ganti sesuai keinginan
5. Terahir Save,,,
Share:
Read More

Cara membuat Efek salju berjatuhan di Blog

, , , , No comments
Cara membuat Efek salju berjatuhan Di blog

Cara membuat Efek salju berjatuhan di Blog- Mumpung Natal hampir tiba ,, sekarang aku akan memberikan Tutorial Cara yang berhubungan dengan natal.. yaitu salju..
mau tahu membuat Efek Salju  di Blog...
Ni simak dan peraktekin (jangan di baca Doang) heheheheh..

1. Pastinya kamu haru login dulu ke blog sbat...
2. Masuk ke Template > HTML 
3. Cari Kode </head> atau  Bisa juga kode </body> (terserah pokonya pilih salah satunya)
4. Lalu copy paste Kode di bawah ini tepat di atas </head> atau </body>

<script src="https://cdn.rawgit.com/maura-tutorial/efek-salju-v.1/master/efeksalju1.js"> </script>

5. Save..


Share:
Read More

Cara Membuat Efek Loading Dengan Font v.1

, , , , No comments


Hi sobat Blogger... 
Kali ini saya akan memberikan sedikit tutorial "Cara Membuat Efek Loading Dengan Font v.1". 
Meskipun banyak yang memberiakn Tutorialnya.
Tapi efek Loading Dengan Font v.1 kali ini berbedah dari yang bisanya karna Font akan muncul dari bawah dan berputar sedikit.
Penasaran Lihat Demo..

Udah sedikit saja penjelasanya sekarang kita peraktekin..

1. Pastinya kamu harus Login dulu ke Blogger sobat.
2. Masuk ke Template > HTML
3. Cari kode </head>. lalu paste script di bawah ini tepat diatas </head>  .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/maura-tutorial/LoadingmauratutorialMT/master/Mauratutorial.js" type="text/javascript"></script>
<style>
#load-page-maura { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }
.load {
  position:absolute;
  width:600px;
  height:36px;
  left:50%;
  top:40%;
  margin-left:-300px;
  overflow:visible;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  cursor:default;
}

.load div {
  position:absolute;
  width:20px;
  height:500px;
  opacity:0;
  font-size: 200%;
  font-family:Charcoal;
  animation:move 2s linear infinite;
  -o-animation:move 2s linear infinite;
  -moz-animation:move 2s linear infinite;
  -webkit-animation:move 2s linear infinite;
  transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  color:#35C4F0;
}

.load div:nth-child(2) {
  animation-delay:0.2s;
  -o-animation-delay:0.2s;
  -moz-animation-delay:0.2s;
  -webkit-animation-delay:0.2s;
}
.load div:nth-child(3) {
  animation-delay:0.4s;
  -o-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
}
.load div:nth-child(4) {
  animation-delay:0.6s;
  -o-animation-delay:0.6s;
  -moz-animation-delay:0.6s;
  -webkit-animation-delay:0.6s;
}
.load div:nth-child(5) {
  animation-delay:0.8s;
  -o-animation-delay:0.8s;
  -moz-animation-delay:0.8s;
  -webkit-animation-delay:0.8s;
}
.load div:nth-child(6) {
  animation-delay:1s;
  -o-animation-delay:1s;
  -moz-animation-delay:1s;
  -webkit-animation-delay:1s;
}
.load div:nth-child(7) {
  animation-delay:1.2s;
  -o-animation-delay:1.2s;
  -moz-animation-delay:1.2s;
  -webkit-animation-delay:1.2s;
}

@keyframes move {
  0% {
    left:0;
    opacity:0;
  }
35% {
left: 41%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}

@-moz-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-moz-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}

@-webkit-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-webkit-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}

@-o-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
</style>

*Penting*
Kalau di template Sudah ada Jquery (Warna Merah)  Lewati saja.

4. Copy Paste Script di bawah ini. dan letakkan Tepat di bawah <body>.

<div id="load-page-maura">
<div class="load">
  <div>G</div>
  <div>N</div>
  <div>I</div>
  <div>D</div>
  <div>A</div>
  <div>O</div>
  <div>L</div>
</div>

5. Terahir Save,,,,


Lihat tara,,,,,,

*kalau ada pertanyaan Koment saja...
Share:
Read More

Cara membuat Efek Gambar Berputar dan Description Gambar Sembunyi

, , No comments


Cara membuat Efek Gambar Berputar dan Description Gambar Sembunyi. 
Pengen Buat??. Tenang saja ntar aku beri tutorialnya. tapi kenalin dulu apa aja efek dari Cara membuat Efek Gambar Berputar dan Description Gambar Sembunyi.:

 1. Gambar akan berputar 100 Drajat tapi berputarnya secara halus.
2. Description akan keluar dan mengikuti gambar yang berputar setelah maouse di arahkan ke gambar
3. Ketika mouse di arahkan ke gambar akan ada efek Zoom

Ok udah selesai sedikit penjelasannya. langsung saja ikutin langkah demi langkah

1. Buka dulu Blogger sobat..
2. Masuk ke Menu Template > HTML
3. Cari Kode ini ]]></b:skin> atau </style>
4. Kopy dan paste kode di bawah ini tepat di atas ]]></b:skin> atau </style>


/* Sliding Description Panel For Images */
.imagepluscontainer {
 /* main image container */
    position: relative;
    z-index: 1;
    font-family: verdana;
    font-size: 13px;
}
.imagepluscontainer img {
 /* CSS for image within container */
    position: relative;
    z-index: 2;
    -moz-transition: all 0.5s ease;
 /* Enable CSS3 transition on all props */
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img {
 /* CSS for image when mouse hovers over main container */
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 10px 25px 10px rgba(0, 0, 0, 0.5);
    -moz-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc {
 /* CSS for desc div of each image. */
    position: absolute;
    width: 90%;
    z-index: 1;
 /* Set z-index to that less than image's, so it's hidden beneath it */
    bottom: 0;
 /* Default position of desc div is bottom of container, setting it up to slide down */
    left: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.8);
 /* black bg with 80% opacity */
    color: white;
    -moz-border-radius: 0 0 8px 8px;
 /* CSS3 rounded borders */
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    opacity: 0;
 /* Set initial opacity to 0 */
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
 /* CSS3 shadows */
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -moz-transition: all 0.5s ease 0.5s;
 /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
    -webkit-transition: all 0.5s ease 0.5s;
    -o-transition: all 0.5s ease 0.5s;
    -ms-transition: all 0.5s ease 0.5s;
    transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a {
    color: white;
}
.imagepluscontainer:hover div.desc {
 /* CSS for desc div when mouse hovers over main container */
    -moz-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    opacity: 1;
 /* Reveal desc DIV fully */
}
/* Below CSS when applied to desc DIV slides the desc div from the right edge of the image */
.imagepluscontainer div.rightslide {
    width: 150px;
 /* reset from default */
    top: 15px;
    right: 0;
    left: auto;
  /* reset from default */
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}
.imagepluscontainer:hover div.rightslide {
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
}
/* Below CSS when applied to desc DIV slides the desc div from the left edge of the image */
.imagepluscontainer div.leftslide {
    width: 150px;
  /* reset from default */
    top: 15px;
    left: 0;
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
}
.imagepluscontainer:hover div.leftslide {
    -moz-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}
/* Below CSS when applied to desc DIV slides the desc div from the top edge of the image */
.imagepluscontainer div.upslide {
    top: 0;
    bottom: auto;
  /* reset from default */
    padding-bottom: 10px;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}
.imagepluscontainer:hover div.upslide {
    -moz-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
}
.imagepluscontainer { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 5s ease; }
.imagepluscontainer:hover { -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); -ms-transform:rotate(-10deg); transform:rotate(-360deg); }
/* Sliding Description Panel For Images */

5. Untuk menggunankannya di postingan Blog cukup kopy kode di bawah ini., dan paste dengan mode HTML.

<div class="imagepluscontainer" style="width:263px;">
<img src="https://wallpaperscraft.com/image/gaara_sabaku_no_gaara_kazekage_naruto_shippuden_naruto_97135_250x300.jpg">
<div class="desc downslide">
DESKRIPSI GAMBAR DI BAWAH
</div>
</div>

*Penting : 
Warna Merah Ganti dengan Url gambar Sobat
Warna Biru adalah arah panel description bergerak. 
upslide (untuk di atas) rightslide (untuk di kanan) leftslide (Untuk di kiri) downslide (untuk di bawah)
Warna Hijau adalah Untuk Description 

OK udah selesai penjelasanya untuk Tutorial "Cara membuat Efek Gambar Berputar dan Description Gambar Sembunyi" 
apabila ada pertanyaan langsung saja di komentar...
Share:
Read More

Floating Conatct-us Keren Blue Dark

, , No comments
Floating Conatct-us Keren Blue Dark

"Demo"

Contact-us Merupakan Hal yang wajib buat admin Blogger.
Apalagi buat Para Pengunjung Blogger yang ingin bertanya secara langsung.

kali ini saya akan memberikan Tutorial membuat Conatct-us yang pastinya lebih keren dari yang biasanya
Ni aku kasih Tutorialnya:

1. kamu Harus menambahkan widged Conatct forum di blog kamu
caranya buka halaman layout > Add gadget > Contact Form, terserah mau di taruh di mana.

2. Masuk ke menu Template > Html. cari kode di bawah ini:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
<b:includable id='main'>
Hapus bagian ini 
</b:includable>
</b:widget>
</b:section>
*hapus yang berwarna merah dan save..

3. Terahir kamu tinggal nambahin  widged HTML/JavaScript dan paste kode Css di bawah ini.
<!-- floating contact form-->
<style>
.form-parent {width:323px;height:auto;background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcx-PrtKUXV5CIiAD_kKvqoWZEAcJpO-ga8UrlGimaS2C6kkRCiPACXNJ5xaDBLX9aNE6R3YkP0qGcG08zsAeTxhokOFGGOSJNh74_74U9SeEvKN2kMJOBjTc1x6lcaucJ0rB2QMqQAu54/s1600/contact-button.png') no-repeat right 10px;position:fixed;top:150px;left: -275px;z-index:9999999;transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.form-parent:hover {left:0;}
.cc-float-form {background:-moz-linear-gradient(top, #0a4cd8 5%, #0a4cd8 100%);background:-webkit-linear-gradient(top, #0a4cd8 5%, #0a4cd8 100%);background:-o-linear-gradient(top, #0a4cd8 5%, #0a4cd8 100%);    background:-ms-linear-gradient(top, #0a4cd8 5%, #0a4cd8 100%);    background:linear-gradient(to bottom, #0a4cd8 5%, #0a0a0a 100%);color:#fafafa;padding:10px;    width:250px;border:2px solid #000;    border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#ContactForm1 {display:none;}
.contact-form-area {background: #222;width: 245px;padding: 10px 0px;border: 1px solid #111;box-shadow: 2px 2px 2px #111 inset;    -webkit-box-shadow: 2px 2px 2px #111 inset;font-family:Verdana, Geneva, sans-serif;color:#fafafa;font-size: 12px;}
#cc {float:right;font-size:9px;margin-top:-10px;color:#777;}#cc a {    color: #777;text-decoration:none;}
</style>
<div class='form-parent'>
<form name="contact-form" class="cc-float-form">
<p></p>
Name:<br />
<input class="contact-form-area" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Email:
<span style="color:red;">*</span><br />
<input class="contact-form-area" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Message: <span style="color:red;">*</span><br />
<textarea class="contact-form-area"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
<div id="cc">
By <a href="http://mauratutorial.blogspot.com/" target="_blank">GET IT</a>
</div>
</form>
</div><!--Parent-->
<!--All ends here-->

4. Save ,,,

Terima kasih udah berkunjung....
Share:
Read More

Cara Membuat Efek Rotasi pada gambar

, , , No comments
Sering kita bertanya bagaimana si  membuat Gambar sedikit berbedah dengan gambar lain di blog ??
Terutama yang bisa Rotasi .
tapi Tenang saya akan memberikan Tutorialnya,,
yuk simak dan praktekin di blog sobat,,,
1. kamu harus Login dulu Di blog sobat.
2. Masuk di Template>Html
3. Cari kode ini ]]></b:skin>
4. lalu masukan Kode CSS di bawah ini tepat di atas ]]></b:skin>
.post-body img{
border-radius: 2%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{  transition: all 2s ease-in-out;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
z-index: 999;
box-shadow: 8px -6px 5px rgba(50, 50, 50, 0.75);
}
5. Save,,

Untuk menarapkannya kamu cukup upload Gambar,,,
Share:
Read More

Cara memmbuat Recent Post di Blogger

, , , , No comments
Cara memmbuat Recent Post Blogger

Bagi kalian yang Pengen Membuat Widget "Recent Post" di Blog.
kali ini saya akan memberikan sedikit Tutorialnya, langsung saja ikuti langkah demi langkah.


1. Pastinya kalian harus Login Dulu di "Blogger" 
2. Pilih Blog yang mau di tambahin Widget Recent Post
3.. Pilih Menu Tata Letak >  tambahkan Gadget > Pilih HTML / Java Script
5. Masukan Kode di Bawah ini di Dalamnya
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://mauratutorial.blogspot.com/";
    var charac = 40;
    var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWb8eTl0VjyBX19bftQZZXBJXbb5PYeEeFuKhLVcAUg6hqieqWFeRxW_rXDHztJQFPPKJpu3A3YP5l2B1F8NQQie4ZfWiJU4je8yPXcDGuXlyqa7tZgtoRJ10kt260hcLMuckv5jpzWQ_D/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<style>
#recentpostnav{border:1px solid #000;width:100%;margin:0 auto;}
#recentpostsae{margin:0}
.recentpostel{background:#ffffff;display:block;border:2px solid #111;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#222;padding:5px;float:left;height:70px;margin-right:8px;width:70px;}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px!important;font-weight:700!important;margin:0;color:#aaa;}
.recentpostel:hover{background-color:#111;}
.recentpostel p{font-size:12px;text-align:left;color:#aaa;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjPqz08IAqfZ3xM9X6BeG-VlRq0fGmZPzqkFI751dRDIZt1zCoKw5gYEKkmcGGtWBaXiIiH4vnNUXI0J63rtRNJMirTUfOWGziC5h-uSlM6KPmtFwk_bRQPf_8KWJuD4igTQRCuP9xNiIB/s1600/loader.gif) 50% 50% no-repeat #2c3e50;height:470px;border:1px solid #111}
#recentpostnavfeed{border:2px solid #000;color:#bbb;background:#333;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#111;}
#recentpostnavfeed a{color:#bbb!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
6. Ganti Link yang Berwarna Merah dengan link Home blog anda
7. Terahir save,,,,

Demikian "Cara memmbuat Recent Post di Blogger"
Share:
Read More

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