liya ~

06 Juni 2013

Freebies : Background stripes rainbow

By Ramadhan Liya 6.6.13 // 1 comment

yeye.. dapat freebies background stripe cute lagi =______=

Background stripes rainbow ini bisa buat border-borderan (?)

http://i.imgur.com/zOflB.png

http://i.imgur.com/40EdC.png

http://i.imgur.com/cwIuN.png

http://i.imgur.com/6ILwL.png

http://i.imgur.com/G6Lgi.png

http://i.imgur.com/pcHmg.png

http://i.imgur.com/0dBoN.png

http://i.imgur.com/B7tXa.png

src: farahdini

Sidebar Widget style rainbow

By Ramadhan Liya 6.6.13 // 2 comments

Tutorial ini memang agak sedikit ribet. Tapi sebenarnya widgetnya simple banget. yaa.. paling tidak bisa menghemat ruangan di sidebar blog. Jadi, sorry jika penjelasan saya juga kurang bisa dipahami.*kakubahasa.
Example :

1 2 3 4

Steps :

Copy code di bawah ini

.siden{text-align:center; display:inline-block; width: 12px; background:#FFEFD0; font:12px georgia; padding:5px;color:transparent;border-radius:50%;}
.siden:hover{ background: url(http://i.imgur.com/Q7YUPcc.gif)fixed; color:#000; -webkit-transition-duration: 0.2s}
.sidan{text-align:center; display:inline-block; width: 12px; background:#FCD4DC; font:12px georgia; padding:5px;color:transparent;border-radius:50%;}
.sidan:hover{ background: url(http://i.imgur.com/Q7YUPcc.gif)fixed; color:#000; -webkit-transition-duration: 0.2s}
.sidun{text-align:center; display:inline-block; width: 12px; background:#FCFAD4; font:12px georgia; padding:5px;color:transparent;border-radius:50%;}
.sidun:hover{ background: url(http://i.imgur.com/Q7YUPcc.gif)fixed; color:#000; -webkit-transition-duration: 0.2s}
.sidin{text-align:center; display:inline-block; width: 12px; background:#D4ECFC; font:12px georgia; padding:5px;color:transparent;border-radius:50%;}
.sidin:hover{ background: url(http://i.imgur.com/Q7YUPcc.gif)fixed; color:#000; -webkit-transition-duration: 0.2s}

Paste di atas code </style>
Copy code di bawah ini

<span class="siden" onClick="document.getElementById('page').innerHTML=document.getElementById('intro').innerHTML"title="kotak1">1</span><span class="sidan" onClick="document.getElementById('page').innerHTML=document.getElementById('cbox').innerHTML"title="kotak2">2</span><span class="sidun" onClick="document.getElementById('page').innerHTML=document.getElementById('contact').innerHTML"title="kotak3">3</span><span class="sidin" onClick="document.getElementById('page').innerHTML=document.getElementById('credit').innerHTML"title="kotak4">4</span></center>

Pastekan di bawah code sidebar title kamu.

Misal code title sidebar kamu :

<div class="h2">Introduction</div>

Maka, paste di bawahnya.

Copy code di bawah ini

<div id="page"></div><div id="intro" style="display: none;"><center>CODE WIDGET 1</center><br /><div id="cbox" style="display: none;"><center>CODE WIDGET 2</center><br /><div id="contact" style="display: none;"><center>CODE WIDGET 3</center><br /><div id="credit" style="display: none;"><center>CODE WIDGET 4</center><br />

Paste di bawah code pada steps 3

Preview dulu. Jika tdk failed,

Save

Biru : Title kotak widget
Merah : Kode widget

Mengubah ukuran followers widget

By Ramadhan Liya 6.6.13 // 1 comment

Widget follower yang bisa diubah-ubah itu kayaknya hanya berlaku di blogskin. Misal ngedit backgroundnya, ukuran, and etc. Jadi, tutorial ini hanya berlaku di classic template/blogskin.
Seperti punya saya. *Bisa follow blog saya sekalian?

Untuk melakukannya, pastikan kalian sudah meletakkan widget followers di blog.
Cari code followers kalian.
Tekan F3, cari code var skin = {};
Setelah ketemu, lihat code-code di bawahnya.
Cari code skin['HEIGHT'] = "180";
Nilai yang berwarna merah, bisa kalian ganti untuk memperkecil widget followers.
Preview
Save
Done

Image Hover Blur Jadi Terang

By Ramadhan Liya 6.6.13 // 2 comments

Hover Image to PREVIEW

Req. dari ask.fm. "gimana sih caranya buat gambar tadinya buram jadi jelas jika terkena kursor?"
Someone tanpa username bertanya begitu, maaf baru aja buat karena ada kesibukan xD

Steps

Edit html
Tekan F3, cari kode img{
Copy code di bawah ini

opacity:0.6;-moz-transition: all 0.8s ease-out;-webkit-transition: all 0.8s ease-out;transition: all 0.8s ease-out;

Paste di bawah code img{
Cari code img:hover{
Copy code di bawah ini lagi

opacity:20;-moz-transition: all 0.8s ease-out;-webkit-transition: all 0.8s ease-out;transition: all 0.8s ease-out;

Paste di bawah code img:hover{
Preview
Done

Ask me if not understand :)

K-ON anime Icon

By Ramadhan Liya 1.6.13 // 3 comments

Ohayo, mina!!
yeyeyelalala >____________________<
dapat icon anime K-On, ye.... disini Selain K-on, masih banyak lagi icon-icon kawaii anime yang lainnya.
Btw, hari ini pengumuman kelulusan SMP .___. kyaaa... jadi degdegan.
Sekarang, saya cuma share K-On saja!

Check it Out