Floating Credit Tutorial

Floating Credit Style ~ Don't take this image if without permission

Annyeonghaseyo! hari ini aku mau ngepost tutorial yang di request Zahra kemaren. Doowwh maaf baru bisa penuhin skrg.



Tutorial ini aku credit dari Kak Ann, jadi sertakan credit lengkap Kak Ann sama aku ya kalau mau repost.  
For Designer Template

  • Blogger >> tata letak >> tambahkan gadget >> html / javascript >> copy dan paste kode ini
<style>
.creditposition{
top: 195px;
right:-213px;
position:fixed;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
z-index:999;}
.creditposition:hover {
right:10px;
}
.credit{
width:200px;
border:2px solid #F8E0E6;
border-radius:10px;
background:url(URLBACKGROUND);
padding:15px;
height:130px;
opacity:0.6;
-webkit-border-radius: 50%; -webkit-border-bottom-left-radius: 0;-moz-border-radius: 50%;-moz-border-radius-bottomleft: 0;border-radius: 50%; border-bottom-left-radius: 0;
}
.credit1{
width:180px;
border-radius:10px;
background:url(URLBACKGROUND;
padding:5px;
height:120px;
opacity:0.5;
border:1px dashed #ccc;
text-align:left;
color:#777;
-webkit-border-radius: 50%; -webkit-border-bottom-left-radius: 0;-moz-border-radius: 50%;-moz-border-radius-bottomleft: 0;border-radius: 50%; border-bottom-left-radius: 0;}
.maiza {
width:140px;
height:270px;
top:25%;
left:260px;
background-color:transparant;
padding:0px;
display:block;
position:fixed;
z-index:-999;
}
         </style>
<div class="creditposition">
<div class="credit">
<center>
<div class="credit1">
<left>
<div class="title2">YOUR TITLE</div>
<div style="border-top:1px solid #eee;padding:2px;">
<div id="sts">Template &nbsp&nbsp&nbsp&nbsp&nbsp:&nbsp&nbsp<a style=""href="http://www.sweetiegirl.co.vu">EXAMPLE</a></div>
<div id="sts">Editor&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp:&nbsp&nbspEXAMPLE</div>
<div id="sts">Best view&nbsp&nbsp&nbsp&nbsp&nbsp:&nbsp&nbspGoogle Chrome</div>
<div id="sts">Visitors&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp:&nbsp&nbspPUTYOURCODE</div>
</script>
</left>
</div>
</center>
</div></div>

<!-------http://www.sweetiegirl.co.vu/. Do not remove this credit1.---->



<!-------http://alneira-firja.blogspot.co.id/. Do not remove this credit2.---->

  • Save

Classic / Blogskin template

  • Template >> (CTRL+F) cari kode </style>, pastekan kode ini diatas kode </style> tadi
top: 195px;
right:-213px;
position:fixed;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
z-index:999;}
.creditposition:hover {
right:10px;
}
.credit{
width:200px;
border:2px solid #F8E0E6;
border-radius:10px;
background:url(URLBACKGROUND);
padding:15px;
height:130px;
opacity:0.6;
-webkit-border-radius: 50%; -webkit-border-bottom-left-radius: 0;-moz-border-radius: 50%;-moz-border-radius-bottomleft: 0;border-radius: 50%; border-bottom-left-radius: 0;
}
.credit1{
width:180px;
border-radius:10px;
background:url(URLBACKGROUND;
padding:5px;
height:120px;
opacity:0.5;
border:1px dashed #ccc;
text-align:left;
color:#777;
-webkit-border-radius: 50%; -webkit-border-bottom-left-radius: 0;-moz-border-radius: 50%;-moz-border-radius-bottomleft: 0;border-radius: 50%; border-bottom-left-radius: 0;}
.maiza {
width:140px;
height:270px;
top:25%;
left:260px;
background-color:transparant;
padding:0px;
display:block;
position:fixed;
z-index:-999;
}

  • Lalu paste kode berikut diatas kode </style> tadi
  • <!-------------------CREDIT(DON'T REMOVE)---------------------!>

<div class="creditposition">
<div class="credit">
<center>
<div class="credit1">
<left>
<div class="title2">YOUR TITLE</div>
<div style="border-top:1px solid #eee;padding:2px;">
<div id="sts">Template &nbsp&nbsp&nbsp&nbsp&nbsp:&nbsp&nbsp<a style=""href="http://www.sweetiegirl.co.vu">EXAMPLE</a></div>
<div id="sts">Editor&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp:&nbsp&nbspEXAMPLE</div>
<div id="sts">Best view&nbsp&nbsp&nbsp&nbsp&nbsp:&nbsp&nbspGoogle Chrome</div>
<div id="sts">Visitors&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp:&nbsp&nbspPUTYOURCODE</div>
</script>
</left>
</div>
</center>
</div></div>

<!-------http://www.sweetiegirl.co.vu/. Do not remove this credit1.---->



<!-------http://alneira-firja.blogspot.co.id/. Do not remove this credit2.---->

CREDIT TUTORIAL : KAK ANNISSA PRAMUDITA P.N 

2 comments:

  1. Eh, rupanya udah ada tutornya ya, aku kira enggak ada. Thanks ya

    ReplyDelete

1 ) Berikan komentar yang baik

2 ) Jangan pernah berkata kasar, jorok, dan menyakiti perasaan orang lain

3 ) Jangan sampai bikin gaduh di kotak comment

4 ) Blog ini secara otomatis memilah mana yang komen spam (termasuk yang menawarkan produk-produk seperti produk diet, dll). Jadi, hati-hati komennya

Related Posts Plugin for WordPress, Blogger...