Image Hover #2
Hello! I have been requested by SOMEBODY~ Image hover tutorial.. Not like the navigation.. Check preview here :D
Simple okay? Now let's see the tutorial!! THIS TUTO ONLY FOR USER WHO USING BLOGSKINS ;)
1. Dashboard > Template
2. CTRL + F or CMD + F (for Mac) and search code </style>
3. Copy code below!
img{
border:2px solid #f8f8f8;
opacity:0.7;
padding:3px;
-webkit-transition: all 0.5s ease-in-out;
-moz-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;
border-radius:10px;}
img:hover{
border-radius:30px;
opacity: 1; }
4. Paste it
before </style> code
5. Preview > Save
Easy and simple^^ BTW, you can edit the code by your own :D
Kbai!!!
I'm still working my skins. Please wait, I will make a unique skins just for you^^ Just wait guys!
Labels: Tutorial
Image Hover with Navi -Like Me-
Hello :) Well, I wanna speak english now.. Because,
Sasha is requested and I think she can't speak Indonesian. Actually
Vladi is request first. But, I sent the tutorial in e-mail and sent it to Vladi. So, can we listen the tutorial. This tutorial maybe make your head spinning *LOL* but I think, you can do it ^^ so, check it out! Before it, please look the preview first ^^
Look cool isn't it? :p Oh! One more! DO NOT RE-TUTOR OR RE-POST !!! I don't like that! Comment if you wanna do this! Check the tutor okay! THIS TUTOR IT'S ONLY FOR BLOGSKINS! OTHER TEMPLATES I DON'T KNOW IT WORKS OR NOT
1. Dashboard > Template
2. Press CTRL + F and search </style> code. For Mac, CMD + F
3. Copy the code below
/*I THINK YOU DON'T HAVE TO TOUCH THIS THING. EXCEPT THE COLOUR FOR TITLE*/
.view {
width: 226px;
height: 300px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: url(http://i.imgur.com/x9x1x.png), auto;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 226px;
height: 300px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: TITLE TEXTS COLOUR;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 40px 0 0 0;
}
.view p {
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 11px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
font-family: trebuchet MS;
font-size:11px;
display: inline-block;
text-decoration: none;
padding: 3px;
background: #000;
color: #fff;
text-transform: uppercase;
filter: alpha(opacity=0.60);
opacity: 0.6;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
background: #323232;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-ms-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
-ms-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.3s;
-moz-transition: all 0.2s ease-in-out 0.3s;
-o-transition: all 0.2s ease-in-out 0.3s;
-ms-transition: all 0.2s ease-in-out 0.3s;
transition: all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceY 0.9s linear;
-moz-animation: bounceY 0.9s linear;
-ms-animation: bounceY 0.9s linear;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
background: #fff
}
.view-eighth:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
4. I think you don't have to edit the code. But, It's up to you. If you can edit that code and change it with yours, just edit it^^
5. Done with the code? Paste it before </style> code
6. Copy the code below
<div style="margin-right:-19px;">
<div class="view view-eighth">
<img src="
YOUR IMAGE URL" style="background: transparemt; border: 2px solid #eeeeee; float:
CHANGE IT WITH LEFT OR RIGHT; margin-right: 5px; margin-bottom: 8px;width:220px;height:300px;" />
<div class="mask"><br>
<h2>
YOUR TITLE HERE</h2>
<br>
CONTENT HERE. PUT ANYTHING LIKE C-BOX NAVI STATUS , ETC
</span></div></div>
</div>
7. Paste the code at place you want.
8. Preview and save
It's little bit dizzy but
KEEP TRYING!! Hehe :D
Labels: Tutorial
Cara Transparentkan Gambar -Photoshop-
Tuto ini boleh untuk newbie. Karena, menurut saya ini cukup gampang dari pada transparentkan dengan layer.. Check tuto di bawah >> (click image to zoom)
1. Buka Adobe Photoshops > click open > select gambar
2. Bisa ikuti gambar di bawah
Udah deh.. Selese :p gampang khan?? Lebih gampang malah :D
Labels: Tutorial
How to Make Blogskins
Hello.. Tutorial ini di request oleh
Adelia. Tentang cara membuat blogskins. Tuto ini agak panjang, so, aku pake read more deh :D Yuk ke tuto sekarang juga! *maksaaaa!!!*
1. Dashboard > Template > Revert ke classic template
2. Hapus semua code yang ada
3. Copy dan pastekan code di bawah di bagian paling atas
<html>
<head>
<center><img src="URL IMAGE HEADER" /></center>
<title>TITLE BLOG</title>
4. Di bawah code di atas bisa dipastekan code seperti Follow dasboard button, etc.
5. Copy code di bawah,
di bawah code di atas
<style type="text/css">
#navbar-iframe {display: none;}
body {
background: url(URL BACKGROUND);
font-family: Century Gothic, Tahoma, Calibri;
background-attachment:fixed;
cursor: url(http://i.imgur.com/ZOrzC.png), auto;
}
::-webkit-scrollbar {
height:12px;
width: 8px;
background: #FFF;
}
::-webkit-scrollbar-thumb {
background-color: #FF0000;
}
::-moz-selection {
background: #000;
color:#FFF;
}
::selection {
background: #000;
color:#FFF;
}
a:link, a:visited {
color:#DF0101;
text-decoration:none;
}
a:hover {
color: #a4a4a4;
}
.content {
background:#ffffff;
font-size: 11px;
padding:14px;
width:600px;
border-radius:10px;
text-align:justify;
}
.main-title {
text-align: right;
color:#DF0101;
font-size:14px;
padding:3px;
border-bottom:1px solid #A4A4A4;
letter-spacing: 0.1cm;
}
</style>
hijau : kode scrollbar
kuning: kode highlight
fuchsia: Code main title
coklat:lebar body blog
6. Copy dan pastekan code di bawah,
di atas code </style> (ini untuk Bold, italic, and, strike)
i {
text-style: italic;
color: #000000;
}
u {
text-underline: underline;
border-bottom: 2px solid #ff0000;
}
b {
font-weight: bold;
color: #FA5858;
}
blockquote {
background-color: #E6E6E6;
border-left: 18px solid #FF0000;
padding: 2px;
}
s {
text-style: line-through;
color: #000;
}
merah: gantikan dengan warna yang kamu mau
Penasaran? Click tulisan ini yoo!!Labels: Tutorial
Slide Show Menggunakan Marquee
Hai... Sumpah gue bosen banget -_- Jadi nge-post tutorial gaje yang sebagian besar orang tau *sotoy lu* Nih previewnya di bawah :D
Tuh preview nya :D Sekarang lanjut ke tuto yokk :P
1. Tinggal copy code di bawah
<div style="background: #fff; border: 1px dashed #FCDFDF; margin-top: 10px; padding-bottom: 4px; padding: 2px; width: 414px;">
<marquee>YOUR TEXT OR IMAGE HERE</marquee>
</div>
2. Edit sesuka hati dan paste di tempat yang di inginkan.
3. Tuto ini bisa dipakai semua jenis template
hijau: solid, dotted, dashed
biru: warna border
merah: content atau image
Bingung? comment yah..
Labels: Tutorial
Add Greeting and Footer Texts at Post
Kali ini mau bagi tutorial. Tahu kan yang tulisan HELLO dengan icon :) di atas post ku dan dibawah ada icon END? Itu namanya Greeting and Footer texts. Okey.. Lihat tuto di bawah oki?
GREETING TEXTS:
- Dashboard > Template
- CTRL + F / F3 and search code <$blogitembody$>
- Copy code di bawah
<center><img src="URL ICON GREETINGS"/></center>
- Paste code di atas di atas code <$blogitembody$>
- Preview > Save
FOOTER TEXTS:
- Dashboard > Template
- CTRL + F / F3 and search code <$blogitembody$>
- Copy code di bawah
<center><img src="URL ICON FOOTER"/></center>
- Paste code di atas di bawah code <$blogitembody$>
- Preview > Save
Jadikan? Bingung comment yah!
Labels: Tutorial
Music Player (Billy)
Music player version 2 Billy! See pic for preview
{click image for bigger preview}
- Go click HERE
- Then, fill the blank with your own music url. You can fill it with >1 music url like me :)
- Then, you will get this code (below its for 1 music url)
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=URL MUSIC&t0=SONG NAME&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=URL MUSIC&t0=SONG NAME&f1=URL MUSIC&t1=SONG NAME&total=2" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
- Copy that code and paste at everywhere you want at blog...
- Preview > Save
Note: Don't ever make your music player hide from everyone! Remember, this is IMPORTANT!
Labels: Tutorial
Music Player Audioplay
I'm gonna speak english today.. Don't understand? Click
here .. Okay? Now, I'm bored.. I dunno what I'm gonna post -,- well, I just sit in front of laptop and write something *well, I don't know what I'm writing now -,-* So, you can call me lazy!
Like the panda's at the picture, yummy food, sleep, and music. That so me in this day.. Well, without smile in there.
I don't want you just outta and click the red X button and leave my blog -,- so, I wanna post a tutorial. You wanna do this? Just do that... I hope you can understand what I'm saying now :D
This post about how to make music player like me.. Want it? And, I wanna speak Indonesian now :D
---------------------------- END SPEAKING ENGLISH---------------------
Halloooo!! Udah tahu kan mau bikin tuto apa? so, ikuti tuto di bawah!
2. Done? So, tinggal pilih design yang kalian mau.
3. Kalian pasti dapet code ini kan? *mungkin beda tapi, mirip kayak gini*
<!-- Generated by AudioPlay Online Generator (http://www.strangecube.com/audioplay/) --><div><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="15" height="15"><PARAM NAME=movie VALUE="http://www.strangecube.com/audioplay/online/audioplay.swf?file=
URL MUSIC&auto=yes&sendstop=yes&repeat=1&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/negative_small&bgcolor=0xffffff&mode=playpause"><PARAM NAME=quality VALUE=high><PARAM NAME=wmode VALUE=transparent>{<embed src="http://www.strangecube.com/audioplay/online/audioplay.swf?file=
URL MUSIC&auto=yes&sendstop=yes&repeat=1&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/negative_small&bgcolor=0xffffff&mode=playpause" quality=high wmode=transparent width="15" height="15" align="" TYPE="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">}</embed></object></div><!-- End of generated code -->
4. Copas code di atas dan taruh di tempat yang kalian mau.
5. Preview, save
Note: don't ever put your music player in place where people can't see it. Okay! this is important!
Bayy!!
Labels: Tutorial
Tutobies Section -Designer-
Haloo... Aku dapet req dari
Salsa .. Langsung aja ke tuto yah! Untuk blogskins, bisa langsung ke
sini untuk tutorial sama kayak gini..
1. Dashboard > edit HTML
2. Copy code di bawah
<style>
.lulu{
background:url(
BACKGROUND);
color:#AAAAAA;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;letter-spacing:5px;
margin-bottom:5px;
margin:15px;
width:500px;
font-family:'arial';
font-size:12px;
line-height:8px;
text-align:center;
padding-right:0px;
}
.eunji {
cursor:pointer;
display:inline-block;
text-align:left;
width:350px;
color:#888;
padding:1px;
background:url(
FAVICON);
color:#888;
background-repeat:no-repeat;
background-size:14px;
padding-left:15px;
line-height:18px;
}
.eunji:hover{
background:url(
FAVICON);
background-repeat:no-repeat;
background-size:14px;
padding-left:15px;
line-height:18px;
color:#EAABFE
}
</style>
<br />
<div class="lulu">
TITLE</div>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
3. Pastekan code tu di bagian dekat html.
4. Preview > Save
5. Untuk code
<div class="lulu">
TITLE</div>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
bisa dipastekan di bagian tutobies yang kamu mau..
Kalau bingung, comment ^^
Credit: Nurul Atiqah Jaidin
Labels: Tutorial
Make an animated banner
Kali ini mau post tuto cara bikin animated banner :) gak susah kok :D Cekidot>>
1. Buka Photoscape > edit banner kamu disana (usahakan lebih dari 1 banner karena itu animated)
2. Pilih Animated GIF seperti gambar di bawah
3. Lihat printscreen di bawah >
4. Hasil nya jadi seperti ini :
Bannernya cuma contoh. Jadi jangan bilang jelek.. Hanya untuk contoh..
Semogga berhasil ;)
Labels: Tutorial
Comment form -like me- Classic template
Haiiii!! Akhirnya selesai hiatusss!!! Woohooo.... :p Tuto kali ini di request oleh Raina. Gak tau dia gak ada url nya. Preview comment formnya:
Cekidot to tuto... Kalo mau re-post atau coba ni tuto, comment dulu yawww...
1. Blogger > Settings > Post and comment > Tick embended > Save settings
2. Template > CTRL + F dan cari code
</style>
3. Copy code dibawah dan pastekan
di atas code </style>
.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#666;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#comments {
margin:5;
border-width:0 1px 1px;
padding:20px 0 15px 0;
}
.comment-icon blogger-comment-icon{display:none}
#comments-block {
margin:2px ;
}
.comment-data {
background:url("URL FAVICON") no-repeat 2px .3em;
margin-top:5px !important;background-size:10px;
padding:0 0 0 20px;
color:#666;
}
span.comment-icon{display:none}
.comment-poster {
font-weight:bold;
}
.comment-body {
margin:0px;
}
.comment-body p {
background:#FFFFFF;
border:3px solid #FCEBED;
margin:0em;
padding:5px;
color:#808080;
}
merah: url favicon sebelah nama. Ganti dengan url favicon yang kamu suka.
4. Then, CTRL + F search code
</Blogger>
5. Copy code dibawah dan pastekan
sebelum code </Blogger>
<itempage>
<div id="comments" style="margin-top:5px;">
<blogitemcommentsenabled><a name="NAMA UNTUK COMMENT"></a>
<dl id="comments-block">
<div style="width:470px; padding:5px;margin-top:20px;border:4px solid #fff;6px;background:url(URL BACKGROUND BODY); box-shadow:0 0 3px #ddd;">
<$CommentPager$>
<blogitemcomments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$></dt>
<dd class="comment-body">
<p>
<$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
<$CommentPager$>
</dl>
</div>
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
</div>
</ItemPage>
biru: gantikan dengan url background yang kamu suka untuk body comment
pink: gantikan dengan nama untuk comment. Seperti: Tomodachi, Mates, Steps
6. Preview > Save
Kalo code </Blogger> ada 2, pastekan code nya kedua-duanya.
Bai
Labels: Tutorial
Tutobies Section -like mine-
Hello :) Tuto ini di request oleh
Maila. Yang bingung tentang tutobies section, cek the picture!
Ngerti? Cekidot to the tutorial >> PERINGATAN! TUTO INI HANYA UNTUK PENGGUNA BLOGSKINS!
1. Dashboard > Template
2. Search code </style>
3. Copy code di bawah
a.tutobies{
display:inline-block;
background:url(URL FAVICON) left center;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
background-repeat:no-repeat;
color:#666;text-align:left;
width:240px;background-size:10px;
line-height:10px;text-decoration:none;
padding:5px 5px 5px 20px;}
a.tutobies:hover{
display:inline-block;
background:url(URL FAVICON) left center;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
background-repeat:no-repeat;
text-align:left;
width:240px;background-size:10px;
line-height:10px;text-decoration:none;
padding:5px 5px 5px 20px;}
4. Then, paste code di atas, di atas code </style>
5. Nanti, tulis di bagian tutobiesnya seperti ini:
<a class="tutobies" href="LINK" target="_blank">TUTOBIES</a>
<a class="tutobies" href="LINK" target="_blank">TUTOBIES</a>
<a class="tutobies" href="LINK" target="_blank">TUTOBIES</a>
<a class="tutobies" href="LINK" target="_blank">TUTOBIES</a>
<a class="tutobies" href="LINK" target="_blank">TUTOBIES</a>
<a class="tutobies" href="LINK" target="_blank">TUTOBIES</a>
6. Preview > Save
merah: url favicon
biru: link tutobies
pink: nama tutobies
Template designer bisa request selanjutnya :)
Bingung? Comment ya!
Labels: Tutorial
Border Keliling Gambar -Blogskins-
{example dotted}
Annyeong! Lihat gambar diatas? Ada bordernya key? Cara buatnya:
1. Dashboard > Template
2. Search code img{
3. Copy code di bawah
border: 2px solid #000; padding: 5px }
4. Paste kan code tu di bawah code img{
hijau: solid, dotted, dashed
merah: warna border
Berikut aku akan kasih example solid dan dashed :)
{example solid}
{example dashed}
Bingung? Comment yah!
Labels: Tutorial
Delete comment on blog -Designer-
Hello semua :D sekarang waktunya Brina post tuto yah! Tuto ini di request oleh >>
Adelia << oke deh... cuzz! Oh ya! Tuto ini hanya untuk pengguna Template Designer.
- Dashboard > Settings > Posts and comments
- Lihat yang bagian comments kan? Tick HIDE
- Save settings
Gampang kan? Buat newbie juga bisa lho!
Labels: Tutorial
Link Hover (Like Me) -Blogskins-
Annyeong haseyo...
Lihat link hover di atas kan? Mau tutonya? Cekidot >>
- Dashboard > Template
- Ctrl + f dan cari code a:link dan hapus semua code yang ada di a:link dan a:link hover
- Copy code di bawah
a{
text-decoration:none ;
color:#BDA291 ;cursor:pointer;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ; }
a:hover{
color:#fff ;
background:url(URL BACKGROUND);
background-position:50% 80%;
background-size:400px;
}
- Paste di bekas code a:link itu ada
- Preview > Save
Bingung? Comment ya!
cr: wana
Labels: Tutorial
Bullet berubah jika disentuh cursor
Coba kamu arahin cursor kamu ke bullet di atas. Berubah kan bulletnya? Mau tau caranya? Untuk blogskins aja. Template designer bisa request di comment ya.. Cekidot>>
- Dashboard > Template
- Ctrl + f dan cari code </style>
- Udah ketemu? Copy code di bawah
li { list-style-image:
url(http://media.tumblr.com/tumblr_mdnsjeMMc01qdlkyg.gif);
}
li:hover { list-style-image:
url(http://media.tumblr.com/tumblr_mdnsjeMMc01qdlkyg.gif);
}
- Paste code di atas, di atas code </style>
- Preview > Save
Kalo bingung, comment!
Note: cari code
http://media.tumblr.com/tumblr_mdnsjeMMc01qdlkyg.gif dan gantikan dengan favicon yang kamu suka. Favicon bisa ambil di
SINI
Labels: Tutorial
Disable Right Click
Annyeong haseyo.. Disable right click tuto... Cekidot >> (Blogskins only)
- Dashboard > Template
- Ctrl + f dan cari code <head>
- Copy code di bawah
<script language=JavaScript><!--//Disable right mouse click Script//By Dynamicdrive (renigade@nsimail.com)//For full source code, visit http://www.dynamicdrive.comvar message="";///////////////////////////////////function clickIE4(){if (event.button==2){return false;}}function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){return false;}}}if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}document.oncontextmenu=new Function("return false")// --></script>
- Paste di bawah code <head>
- Preview > Save
Kalo bingung, comment!
cr: N. Atiqah
Labels: Tutorial
Bias List #1
Annyeong haseyo.. Kali ini mau post tuto bias list.. Thank you for AtinTory yang bolehin aku re-tutor lagi :D Ok.. Cekidot juseyo?
Template Classic Only!
- Dashboard > Template
- Cari tempat dimana kamu mau nempatin ni bias list
- Copy code di bawah!
<style>.icon2 {margin: 5px;width: 100px;height: 100px;overflow: hidden;position: relative;border: 3px solid #FFD7D7;float: left; box-shadow:2px 2px 5px #ccc;}#bias {position: absolute;display: block;width: 300px;height: 30px;top: 30px;margin-left: -20px;opacity: 0;text-align: center;color: #AAA;background: #FBEBED;-webkit-transition-duration: 0.8s;border-top: 3px solid #FFD7D7;border-bottom: 3px solid #FFD7D7;line-height: 4px; text-transform: uppercase ;-webkit-transform: rotate(-30deg);font-size: 12px;font-family:arial;}.icon2:hover #bias{left: 20px; top: 60px;bottom: 5px; opacity: 1;width: 103px; height: 20px;line-height: 20px;-webkit-transform: rotate(0deg)}</style>
<table border="0" bordercolor="" style="background-color:" width="520" cellpadding="3" cellspacing="0"><tr> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> </tr><tr> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> </tr></table>
- Paste di tempat yang kamu mau
Note: cari url http://i.imgur.com/CUSgC.png dan ganti dengan foto bias mu
Bingung? Comment key?
cr: atintory
Labels: Tutorial
Online Users
Annyeong haseyo... Kali ini, aku mau share tuto online users. Online users tuh gimana? Liat foto di bawah.
Nah, itu yang namanya online users. Sekarang, kita cekidot ke tuto... >>>
Template Designer
- Dashboard > Layout
- Cari code c-box kamu
- Copy code di bawah
<a href="http://www.freeonlineusers.com">
<font color=#000000><script type="text/javascript" src="http://st2.freeonlineusers.com/on4.php?id=1450078"> </script> Reader(s)</font></a>
<!-- End FreeOnlineUsers.com -->
- Paste code di atas, di atas code c-box kamu
Template Classic
- Dashboard > Template
- Cari tempat dimana kamu mau letakkin online users ini
- Copy code di bawah
<a href="http://www.freeonlineusers.com">
<font color=#000000><script type="text/javascript" src="http://st2.freeonlineusers.com/on4.php?id=1450078"> </script> Reader(s)</font></a>
<!-- End FreeOnlineUsers.com -->
- Kalau kalian mau online usersnya kayak aku (lihat di D'Owner) perhatikan contoh code di bawah
Annyeong! Welcome here <a href="http://www.freeonlineusers.com">
<font color=#000000><script type="text/javascript" src="http://st2.freeonlineusers.com/on4.php?id=1450078"> </script> Reader(s)</font></a>
<!-- End FreeOnlineUsers.com --> ! Good to see you^^
Note:
merah: ganti dengan yang kamu mau
Labels: Tutorial
Jquery Top Button (blogskins)
Annyeong... Jquery top button tutorial... Ini hanya untuk pengguna blogskins.
- Dashboard > Template
- Ctrl + f dan cari code <head>
- Copy code di bawah
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type='text/javascript' language='Javascript'>var scrolltotop={//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},controlHTML: '<img src="URL IMG"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corneranchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" linksstate: {isvisible:false, shouldvisible:false},scrollup:function(){if (!this.cssfixedsupport) //if control is positioned using JavaScriptthis.$control.css({opacity:0}) //hide control immediately after clicking itvar dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string existsdest=jQuery('#'+dest).offset().topelsedest=0this.$body.animate({scrollTop: dest}, this.setting.scrollduration);},keepfixed:function(){var $window=jQuery(window)var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetxvar controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsetythis.$control.css({left:controlx+'px', top:controly+'px'})},togglecontrol:function(){var scrolltop=jQuery(window).scrollTop()if (!this.cssfixedsupport)this.keepfixed()this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : falseif (this.state.shouldvisible && !this.state.isvisible){this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])this.state.isvisible=true}else if (this.state.shouldvisible==false && this.state.isvisible){this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])this.state.isvisible=false}},init:function(){jQuery(document).ready(function($){var mainobj=scrolltotopvar iebrws=document.allmainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards modemainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>').css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}).attr({title:"Let's Fly High !"}).click(function(){mainobj.scrollup(); return false}).appendTo('body')if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any textmainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing textmainobj.togglecontrol()$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){mainobj.scrollup()return false})$(window).bind('scroll resize', function(e){mainobj.togglecontrol()})})}}scrolltotop.init()</script>
- Paste code ini di bawah code <head>
- Jika tidak ada code <head> , code </html> aja juga gak papa. Asal, paste code-nya di atas code </html>
Note:
merah: ganti dengan url image top button
baii
Labels: Tutorial
Image Hover #2
Hello! I have been requested by SOMEBODY~ Image hover tutorial.. Not like the navigation.. Check preview here :D
Simple okay? Now let's see the tutorial!! THIS TUTO ONLY FOR USER WHO USING BLOGSKINS ;)
1. Dashboard > Template
2. CTRL + F or CMD + F (for Mac) and search code </style>
3. Copy code below!
img{
border:2px solid #f8f8f8;
opacity:0.7;
padding:3px;
-webkit-transition: all 0.5s ease-in-out;
-moz-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;
border-radius:10px;}
img:hover{
border-radius:30px;
opacity: 1; }
4. Paste it
before </style> code
5. Preview > Save
Easy and simple^^ BTW, you can edit the code by your own :D
Kbai!!!
I'm still working my skins. Please wait, I will make a unique skins just for you^^ Just wait guys!
Labels: Tutorial
Image Hover with Navi -Like Me-
Hello :) Well, I wanna speak english now.. Because,
Sasha is requested and I think she can't speak Indonesian. Actually
Vladi is request first. But, I sent the tutorial in e-mail and sent it to Vladi. So, can we listen the tutorial. This tutorial maybe make your head spinning *LOL* but I think, you can do it ^^ so, check it out! Before it, please look the preview first ^^
Look cool isn't it? :p Oh! One more! DO NOT RE-TUTOR OR RE-POST !!! I don't like that! Comment if you wanna do this! Check the tutor okay! THIS TUTOR IT'S ONLY FOR BLOGSKINS! OTHER TEMPLATES I DON'T KNOW IT WORKS OR NOT
1. Dashboard > Template
2. Press CTRL + F and search </style> code. For Mac, CMD + F
3. Copy the code below
/*I THINK YOU DON'T HAVE TO TOUCH THIS THING. EXCEPT THE COLOUR FOR TITLE*/
.view {
width: 226px;
height: 300px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: url(http://i.imgur.com/x9x1x.png), auto;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 226px;
height: 300px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: TITLE TEXTS COLOUR;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 40px 0 0 0;
}
.view p {
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 11px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
font-family: trebuchet MS;
font-size:11px;
display: inline-block;
text-decoration: none;
padding: 3px;
background: #000;
color: #fff;
text-transform: uppercase;
filter: alpha(opacity=0.60);
opacity: 0.6;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
background: #323232;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-ms-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
-ms-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.3s;
-moz-transition: all 0.2s ease-in-out 0.3s;
-o-transition: all 0.2s ease-in-out 0.3s;
-ms-transition: all 0.2s ease-in-out 0.3s;
transition: all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceY 0.9s linear;
-moz-animation: bounceY 0.9s linear;
-ms-animation: bounceY 0.9s linear;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
background: #fff
}
.view-eighth:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-eighth:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
4. I think you don't have to edit the code. But, It's up to you. If you can edit that code and change it with yours, just edit it^^
5. Done with the code? Paste it before </style> code
6. Copy the code below
<div style="margin-right:-19px;">
<div class="view view-eighth">
<img src="
YOUR IMAGE URL" style="background: transparemt; border: 2px solid #eeeeee; float:
CHANGE IT WITH LEFT OR RIGHT; margin-right: 5px; margin-bottom: 8px;width:220px;height:300px;" />
<div class="mask"><br>
<h2>
YOUR TITLE HERE</h2>
<br>
CONTENT HERE. PUT ANYTHING LIKE C-BOX NAVI STATUS , ETC
</span></div></div>
</div>
7. Paste the code at place you want.
8. Preview and save
It's little bit dizzy but
KEEP TRYING!! Hehe :D
Labels: Tutorial
Cara Transparentkan Gambar -Photoshop-
Tuto ini boleh untuk newbie. Karena, menurut saya ini cukup gampang dari pada transparentkan dengan layer.. Check tuto di bawah >> (click image to zoom)
1. Buka Adobe Photoshops > click open > select gambar
2. Bisa ikuti gambar di bawah
Udah deh.. Selese :p gampang khan?? Lebih gampang malah :D
Labels: Tutorial
How to Make Blogskins
Hello.. Tutorial ini di request oleh
Adelia. Tentang cara membuat blogskins. Tuto ini agak panjang, so, aku pake read more deh :D Yuk ke tuto sekarang juga! *maksaaaa!!!*
1. Dashboard > Template > Revert ke classic template
2. Hapus semua code yang ada
3. Copy dan pastekan code di bawah di bagian paling atas
<html>
<head>
<center><img src="URL IMAGE HEADER" /></center>
<title>TITLE BLOG</title>
4. Di bawah code di atas bisa dipastekan code seperti Follow dasboard button, etc.
5. Copy code di bawah,
di bawah code di atas
<style type="text/css">
#navbar-iframe {display: none;}
body {
background: url(URL BACKGROUND);
font-family: Century Gothic, Tahoma, Calibri;
background-attachment:fixed;
cursor: url(http://i.imgur.com/ZOrzC.png), auto;
}
::-webkit-scrollbar {
height:12px;
width: 8px;
background: #FFF;
}
::-webkit-scrollbar-thumb {
background-color: #FF0000;
}
::-moz-selection {
background: #000;
color:#FFF;
}
::selection {
background: #000;
color:#FFF;
}
a:link, a:visited {
color:#DF0101;
text-decoration:none;
}
a:hover {
color: #a4a4a4;
}
.content {
background:#ffffff;
font-size: 11px;
padding:14px;
width:600px;
border-radius:10px;
text-align:justify;
}
.main-title {
text-align: right;
color:#DF0101;
font-size:14px;
padding:3px;
border-bottom:1px solid #A4A4A4;
letter-spacing: 0.1cm;
}
</style>
hijau : kode scrollbar
kuning: kode highlight
fuchsia: Code main title
coklat:lebar body blog
6. Copy dan pastekan code di bawah,
di atas code </style> (ini untuk Bold, italic, and, strike)
i {
text-style: italic;
color: #000000;
}
u {
text-underline: underline;
border-bottom: 2px solid #ff0000;
}
b {
font-weight: bold;
color: #FA5858;
}
blockquote {
background-color: #E6E6E6;
border-left: 18px solid #FF0000;
padding: 2px;
}
s {
text-style: line-through;
color: #000;
}
merah: gantikan dengan warna yang kamu mau
Penasaran? Click tulisan ini yoo!!Labels: Tutorial
Slide Show Menggunakan Marquee
Hai... Sumpah gue bosen banget -_- Jadi nge-post tutorial gaje yang sebagian besar orang tau *sotoy lu* Nih previewnya di bawah :D
Tuh preview nya :D Sekarang lanjut ke tuto yokk :P
1. Tinggal copy code di bawah
<div style="background: #fff; border: 1px dashed #FCDFDF; margin-top: 10px; padding-bottom: 4px; padding: 2px; width: 414px;">
<marquee>YOUR TEXT OR IMAGE HERE</marquee>
</div>
2. Edit sesuka hati dan paste di tempat yang di inginkan.
3. Tuto ini bisa dipakai semua jenis template
hijau: solid, dotted, dashed
biru: warna border
merah: content atau image
Bingung? comment yah..
Labels: Tutorial
Add Greeting and Footer Texts at Post
Kali ini mau bagi tutorial. Tahu kan yang tulisan HELLO dengan icon :) di atas post ku dan dibawah ada icon END? Itu namanya Greeting and Footer texts. Okey.. Lihat tuto di bawah oki?
GREETING TEXTS:
- Dashboard > Template
- CTRL + F / F3 and search code <$blogitembody$>
- Copy code di bawah
<center><img src="URL ICON GREETINGS"/></center>
- Paste code di atas di atas code <$blogitembody$>
- Preview > Save
FOOTER TEXTS:
- Dashboard > Template
- CTRL + F / F3 and search code <$blogitembody$>
- Copy code di bawah
<center><img src="URL ICON FOOTER"/></center>
- Paste code di atas di bawah code <$blogitembody$>
- Preview > Save
Jadikan? Bingung comment yah!
Labels: Tutorial
Music Player (Billy)
Music player version 2 Billy! See pic for preview
{click image for bigger preview}
- Go click HERE
- Then, fill the blank with your own music url. You can fill it with >1 music url like me :)
- Then, you will get this code (below its for 1 music url)
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=URL MUSIC&t0=SONG NAME&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=URL MUSIC&t0=SONG NAME&f1=URL MUSIC&t1=SONG NAME&total=2" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
- Copy that code and paste at everywhere you want at blog...
- Preview > Save
Note: Don't ever make your music player hide from everyone! Remember, this is IMPORTANT!
Labels: Tutorial
Music Player Audioplay
I'm gonna speak english today.. Don't understand? Click
here .. Okay? Now, I'm bored.. I dunno what I'm gonna post -,- well, I just sit in front of laptop and write something *well, I don't know what I'm writing now -,-* So, you can call me lazy!
Like the panda's at the picture, yummy food, sleep, and music. That so me in this day.. Well, without smile in there.
I don't want you just outta and click the red X button and leave my blog -,- so, I wanna post a tutorial. You wanna do this? Just do that... I hope you can understand what I'm saying now :D
This post about how to make music player like me.. Want it? And, I wanna speak Indonesian now :D
---------------------------- END SPEAKING ENGLISH---------------------
Halloooo!! Udah tahu kan mau bikin tuto apa? so, ikuti tuto di bawah!
2. Done? So, tinggal pilih design yang kalian mau.
3. Kalian pasti dapet code ini kan? *mungkin beda tapi, mirip kayak gini*
<!-- Generated by AudioPlay Online Generator (http://www.strangecube.com/audioplay/) --><div><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="15" height="15"><PARAM NAME=movie VALUE="http://www.strangecube.com/audioplay/online/audioplay.swf?file=
URL MUSIC&auto=yes&sendstop=yes&repeat=1&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/negative_small&bgcolor=0xffffff&mode=playpause"><PARAM NAME=quality VALUE=high><PARAM NAME=wmode VALUE=transparent>{<embed src="http://www.strangecube.com/audioplay/online/audioplay.swf?file=
URL MUSIC&auto=yes&sendstop=yes&repeat=1&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/negative_small&bgcolor=0xffffff&mode=playpause" quality=high wmode=transparent width="15" height="15" align="" TYPE="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">}</embed></object></div><!-- End of generated code -->
4. Copas code di atas dan taruh di tempat yang kalian mau.
5. Preview, save
Note: don't ever put your music player in place where people can't see it. Okay! this is important!
Bayy!!
Labels: Tutorial
Tutobies Section -Designer-
Haloo... Aku dapet req dari
Salsa .. Langsung aja ke tuto yah! Untuk blogskins, bisa langsung ke
sini untuk tutorial sama kayak gini..
1. Dashboard > edit HTML
2. Copy code di bawah
<style>
.lulu{
background:url(
BACKGROUND);
color:#AAAAAA;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;letter-spacing:5px;
margin-bottom:5px;
margin:15px;
width:500px;
font-family:'arial';
font-size:12px;
line-height:8px;
text-align:center;
padding-right:0px;
}
.eunji {
cursor:pointer;
display:inline-block;
text-align:left;
width:350px;
color:#888;
padding:1px;
background:url(
FAVICON);
color:#888;
background-repeat:no-repeat;
background-size:14px;
padding-left:15px;
line-height:18px;
}
.eunji:hover{
background:url(
FAVICON);
background-repeat:no-repeat;
background-size:14px;
padding-left:15px;
line-height:18px;
color:#EAABFE
}
</style>
<br />
<div class="lulu">
TITLE</div>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
3. Pastekan code tu di bagian dekat html.
4. Preview > Save
5. Untuk code
<div class="lulu">
TITLE</div>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
<a class="eunji" href="
http://www.blogger.com/LINK">
TITLE</a>
bisa dipastekan di bagian tutobies yang kamu mau..
Kalau bingung, comment ^^
Credit: Nurul Atiqah Jaidin
Labels: Tutorial
Make an animated banner
Kali ini mau post tuto cara bikin animated banner :) gak susah kok :D Cekidot>>
1. Buka Photoscape > edit banner kamu disana (usahakan lebih dari 1 banner karena itu animated)
2. Pilih Animated GIF seperti gambar di bawah
3. Lihat printscreen di bawah >
4. Hasil nya jadi seperti ini :
Bannernya cuma contoh. Jadi jangan bilang jelek.. Hanya untuk contoh..
Semogga berhasil ;)
Labels: Tutorial
Comment form -like me- Classic template
Haiiii!! Akhirnya selesai hiatusss!!! Woohooo.... :p Tuto kali ini di request oleh Raina. Gak tau dia gak ada url nya. Preview comment formnya:
Cekidot to tuto... Kalo mau re-post atau coba ni tuto, comment dulu yawww...
1. Blogger > Settings > Post and comment > Tick embended > Save settings
2. Template > CTRL + F dan cari code
</style>
3. Copy code dibawah dan pastekan
di atas code </style>
.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#666;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#comments {
margin:5;
border-width:0 1px 1px;
padding:20px 0 15px 0;
}
.comment-icon blogger-comment-icon{display:none}
#comments-block {
margin:2px ;
}
.comment-data {
background:url("URL FAVICON") no-repeat 2px .3em;
margin-top:5px !important;background-size:10px;
padding:0 0 0 20px;
color:#666;
}
span.comment-icon{display:none}
.comment-poster {
font-weight:bold;
}
.comment-body {
margin:0px;
}
.comment-body p {
background:#FFFFFF;
border:3px solid #FCEBED;
margin:0em;
padding:5px;
color:#808080;
}
merah: url favicon sebelah nama. Ganti dengan url favicon yang kamu suka.
4. Then, CTRL + F search code
</Blogger>
5. Copy code dibawah dan pastekan
sebelum code </Blogger>
<itempage>
<div id="comments" style="margin-top:5px;">
<blogitemcommentsenabled><a name="NAMA UNTUK COMMENT"></a>
<dl id="comments-block">
<div style="width:470px; padding:5px;margin-top:20px;border:4px solid #fff;6px;background:url(URL BACKGROUND BODY); box-shadow:0 0 3px #ddd;">
<$CommentPager$>
<blogitemcomments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$></dt>
<dd class="comment-body">
<p>
<$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
<$CommentPager$>
</dl>
</div>
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
</div>
</ItemPage>
biru: gantikan dengan url background yang kamu suka untuk body comment
pink: gantikan dengan nama untuk comment. Seperti: Tomodachi, Mates, Steps
6. Preview > Save
Kalo code </Blogger> ada 2, pastekan code nya kedua-duanya.
Bai
Labels: Tutorial
Tutobies Section -like mine-
Hello :) Tuto ini di request oleh
Maila. Yang bingung tentang tutobies section, cek the picture!
Ngerti? Cekidot to the tutorial >> PERINGATAN! TUTO INI HANYA UNTUK PENGGUNA BLOGSKINS!
1. Dashboard > Template
2. Search code </style>
3. Copy code di bawah
a.tutobies{
display:inline-block;
background:url(URL FAVICON) left center;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
background-repeat:no-repeat;
color:#666;text-align:left;
width:240px;background-size:10px;
line-height:10px;text-decoration:none;
padding:5px 5px 5px 20px;}
a.tutobies:hover{
display:inline-block;
background:url(URL FAVICON) left center;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
background-repeat:no-repeat;
text-align:left;
width:240px;background-size:10px;
line-height:10px;text-decoration:none;
padding:5px 5px 5px 20px;}
4. Then, paste code di atas, di atas code </style>
5. Nanti, tulis di bagian tutobiesnya seperti ini:
<a class="tutobies" href="LINK" target="_blank">TUTOBIES</a>
<a class="tutobies" href="LINK" target="_blank">TUTOBIES</a>
<a class="tutobies" href="LINK" target="_blank">TUTOBIES</a>
<a class="tutobies" href="LINK" target="_blank">TUTOBIES</a>
<a class="tutobies" href="LINK" target="_blank">TUTOBIES</a>
<a class="tutobies" href="LINK" target="_blank">TUTOBIES</a>
6. Preview > Save
merah: url favicon
biru: link tutobies
pink: nama tutobies
Template designer bisa request selanjutnya :)
Bingung? Comment ya!
Labels: Tutorial
Border Keliling Gambar -Blogskins-
{example dotted}
Annyeong! Lihat gambar diatas? Ada bordernya key? Cara buatnya:
1. Dashboard > Template
2. Search code img{
3. Copy code di bawah
border: 2px solid #000; padding: 5px }
4. Paste kan code tu di bawah code img{
hijau: solid, dotted, dashed
merah: warna border
Berikut aku akan kasih example solid dan dashed :)
{example solid}
{example dashed}
Bingung? Comment yah!
Labels: Tutorial
Delete comment on blog -Designer-
Hello semua :D sekarang waktunya Brina post tuto yah! Tuto ini di request oleh >>
Adelia << oke deh... cuzz! Oh ya! Tuto ini hanya untuk pengguna Template Designer.
- Dashboard > Settings > Posts and comments
- Lihat yang bagian comments kan? Tick HIDE
- Save settings
Gampang kan? Buat newbie juga bisa lho!
Labels: Tutorial
Link Hover (Like Me) -Blogskins-
Annyeong haseyo...
Lihat link hover di atas kan? Mau tutonya? Cekidot >>
- Dashboard > Template
- Ctrl + f dan cari code a:link dan hapus semua code yang ada di a:link dan a:link hover
- Copy code di bawah
a{
text-decoration:none ;
color:#BDA291 ;cursor:pointer;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ; }
a:hover{
color:#fff ;
background:url(URL BACKGROUND);
background-position:50% 80%;
background-size:400px;
}
- Paste di bekas code a:link itu ada
- Preview > Save
Bingung? Comment ya!
cr: wana
Labels: Tutorial
Bullet berubah jika disentuh cursor
Coba kamu arahin cursor kamu ke bullet di atas. Berubah kan bulletnya? Mau tau caranya? Untuk blogskins aja. Template designer bisa request di comment ya.. Cekidot>>
- Dashboard > Template
- Ctrl + f dan cari code </style>
- Udah ketemu? Copy code di bawah
li { list-style-image:
url(http://media.tumblr.com/tumblr_mdnsjeMMc01qdlkyg.gif);
}
li:hover { list-style-image:
url(http://media.tumblr.com/tumblr_mdnsjeMMc01qdlkyg.gif);
}
- Paste code di atas, di atas code </style>
- Preview > Save
Kalo bingung, comment!
Note: cari code
http://media.tumblr.com/tumblr_mdnsjeMMc01qdlkyg.gif dan gantikan dengan favicon yang kamu suka. Favicon bisa ambil di
SINI
Labels: Tutorial
Disable Right Click
Annyeong haseyo.. Disable right click tuto... Cekidot >> (Blogskins only)
- Dashboard > Template
- Ctrl + f dan cari code <head>
- Copy code di bawah
<script language=JavaScript><!--//Disable right mouse click Script//By Dynamicdrive (renigade@nsimail.com)//For full source code, visit http://www.dynamicdrive.comvar message="";///////////////////////////////////function clickIE4(){if (event.button==2){return false;}}function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){return false;}}}if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}document.oncontextmenu=new Function("return false")// --></script>
- Paste di bawah code <head>
- Preview > Save
Kalo bingung, comment!
cr: N. Atiqah
Labels: Tutorial
Bias List #1
Annyeong haseyo.. Kali ini mau post tuto bias list.. Thank you for AtinTory yang bolehin aku re-tutor lagi :D Ok.. Cekidot juseyo?
Template Classic Only!
- Dashboard > Template
- Cari tempat dimana kamu mau nempatin ni bias list
- Copy code di bawah!
<style>.icon2 {margin: 5px;width: 100px;height: 100px;overflow: hidden;position: relative;border: 3px solid #FFD7D7;float: left; box-shadow:2px 2px 5px #ccc;}#bias {position: absolute;display: block;width: 300px;height: 30px;top: 30px;margin-left: -20px;opacity: 0;text-align: center;color: #AAA;background: #FBEBED;-webkit-transition-duration: 0.8s;border-top: 3px solid #FFD7D7;border-bottom: 3px solid #FFD7D7;line-height: 4px; text-transform: uppercase ;-webkit-transform: rotate(-30deg);font-size: 12px;font-family:arial;}.icon2:hover #bias{left: 20px; top: 60px;bottom: 5px; opacity: 1;width: 103px; height: 20px;line-height: 20px;-webkit-transform: rotate(0deg)}</style>
<table border="0" bordercolor="" style="background-color:" width="520" cellpadding="3" cellspacing="0"><tr> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> </tr><tr> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> <td><div class="icon2"><img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">Name</div></div></td> </tr></table>
- Paste di tempat yang kamu mau
Note: cari url http://i.imgur.com/CUSgC.png dan ganti dengan foto bias mu
Bingung? Comment key?
cr: atintory
Labels: Tutorial
Online Users
Annyeong haseyo... Kali ini, aku mau share tuto online users. Online users tuh gimana? Liat foto di bawah.
Nah, itu yang namanya online users. Sekarang, kita cekidot ke tuto... >>>
Template Designer
- Dashboard > Layout
- Cari code c-box kamu
- Copy code di bawah
<a href="http://www.freeonlineusers.com">
<font color=#000000><script type="text/javascript" src="http://st2.freeonlineusers.com/on4.php?id=1450078"> </script> Reader(s)</font></a>
<!-- End FreeOnlineUsers.com -->
- Paste code di atas, di atas code c-box kamu
Template Classic
- Dashboard > Template
- Cari tempat dimana kamu mau letakkin online users ini
- Copy code di bawah
<a href="http://www.freeonlineusers.com">
<font color=#000000><script type="text/javascript" src="http://st2.freeonlineusers.com/on4.php?id=1450078"> </script> Reader(s)</font></a>
<!-- End FreeOnlineUsers.com -->
- Kalau kalian mau online usersnya kayak aku (lihat di D'Owner) perhatikan contoh code di bawah
Annyeong! Welcome here <a href="http://www.freeonlineusers.com">
<font color=#000000><script type="text/javascript" src="http://st2.freeonlineusers.com/on4.php?id=1450078"> </script> Reader(s)</font></a>
<!-- End FreeOnlineUsers.com --> ! Good to see you^^
Note:
merah: ganti dengan yang kamu mau
Labels: Tutorial
Jquery Top Button (blogskins)
Annyeong... Jquery top button tutorial... Ini hanya untuk pengguna blogskins.
- Dashboard > Template
- Ctrl + f dan cari code <head>
- Copy code di bawah
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type='text/javascript' language='Javascript'>var scrolltotop={//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},controlHTML: '<img src="URL IMG"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corneranchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" linksstate: {isvisible:false, shouldvisible:false},scrollup:function(){if (!this.cssfixedsupport) //if control is positioned using JavaScriptthis.$control.css({opacity:0}) //hide control immediately after clicking itvar dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string existsdest=jQuery('#'+dest).offset().topelsedest=0this.$body.animate({scrollTop: dest}, this.setting.scrollduration);},keepfixed:function(){var $window=jQuery(window)var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetxvar controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsetythis.$control.css({left:controlx+'px', top:controly+'px'})},togglecontrol:function(){var scrolltop=jQuery(window).scrollTop()if (!this.cssfixedsupport)this.keepfixed()this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : falseif (this.state.shouldvisible && !this.state.isvisible){this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])this.state.isvisible=true}else if (this.state.shouldvisible==false && this.state.isvisible){this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])this.state.isvisible=false}},init:function(){jQuery(document).ready(function($){var mainobj=scrolltotopvar iebrws=document.allmainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards modemainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>').css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}).attr({title:"Let's Fly High !"}).click(function(){mainobj.scrollup(); return false}).appendTo('body')if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any textmainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing textmainobj.togglecontrol()$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){mainobj.scrollup()return false})$(window).bind('scroll resize', function(e){mainobj.togglecontrol()})})}}scrolltotop.init()</script>
- Paste code ini di bawah code <head>
- Jika tidak ada code <head> , code </html> aja juga gak papa. Asal, paste code-nya di atas code </html>
Note:
merah: ganti dengan url image top button
baii
Labels: Tutorial
Cupcakes Time!!
Meet me the webmistress peeps!
The Girl Behind The Screen:
Just a ordinary girl who obsessed with Korea and Japan. Who's her? Guess yooo :D Whatever.. My name its Shabrina. Shabrina L. Rais. Now being a 6th Grade student in Al-Jannah Islamic Fullday School (yippee)! Be a human girl since 5 May 2002. Give me present? (LOL! Whut?). You have to know, I'm addicted with KPOP. Woohoo! Especially SNSD. You don't know them? Whutevaa.. Being a SONE since 2012. Beggining Sone, huh? Okay! Time to go :D Bay bayy '-')/
Call me Cupcakes okay! Byee!!
Biased:
1. Kim Taeyeon - Girls' Generation: ULTIMATE one huh? Yapp.. my first bias :D I think, I addicted to much with her (LOL)! Even I said my face it's look like Taeyeon maybe? #justkidding (whatever).
2. Tiffany Hwang - Girls' Generation: The 2nd. Ship this with Taeng >< I just love her same like Taeng.. Locksmith forever!!!
3. Jessica Jung - Girls' Generation: The 3rd. Wae so much SNSD bias? Because my fandom it's SONE. So, im focused with SNSD. (See it at F.A.Q).
4. Krystal Jung - F(x): The 4th. The sister of Jessica :D Oh my god! So much addicted with her >< Krystalized! That was me! Oh my Jung! I LOVE YAA!
5. Choi Sulli - F(x): The 5th. My Barbie Doll Sulli! Really like her pout! OMG, so cute >< Antis? Go away! Sulli it's mine! (LOL)
6. Byun Baekhyun - EXO: The last but not the least, Baekhyun! The one of my bias who is namja ^^ GO AWAY! BAEKHYUN MINE!! HUH?! :p Just kidding :D
About this site:
This blog it's officialy made by Shabrina L. Rais. For the first time, this blog named
http://miss-animeee.blogspot.com/ I don't know why I named that. I just don't have any idea. And the template it's soo simple! The VERY SIMPLE template. And I'm so happy I have a blog. My mom telling me about a Blogger World. So, in Desember 2012, i made my very first blog. I forgot for the link. I just remember the tittle: SHABRINA BLOG. And the blog was so empty >< And then, I made this blog at March 9 2013. Before it, made a kpop blog :)
One day, I saw Vesya's blog. You know the url right? It's
http://vesya-lithaa.blogspot.com/. Then, I see her blog and I think that was a AWESOME blog. And then, I try to find a inspired thing from Vesya's blog. One day, I asked her, "What's header?". I just can't imagine how a header looks! When I found a tutobies blog and it's explains about HEADER. Then, I started to making a header in photoscape and photoshop. But, I can't use it on blogger.
And then, I found Nurul Atiqah's blog. I found a nice header and the texts was saying: 'SNOW FLOWERS'. I decided to use that header for my own blog. When I use it, I already know how to use header at blogspot. When I see my header, I think, I'm gonna change my website name to
http://snow-flowerss.blogspot.com. I think, thats a good name for my blog :)
Some people asked me: "What's template do you use for your blog? Classic or Designer?". Hard question when I don't know everything about a CLASSIC TEMPLATES. And then, I see someone blogs who used a classic template and I'm so corious because her blog it's so awesome! And then I asked her where she get this template? And the she said, this is blogskins. You can find it at
http://blogskins.com and then I know all about blogskins and addicted with blogger's world ^^
OPEN FOR EVERYONE!!! ALWAYS OPEN :D (UNDER CONTRUCTION FOR BANNERS)
Already see my affies? Do you check the rules for affies here?
Tell me in cbox if you wanna ex-links banners