Network Tips

Showing posts with label CSS. Show all posts

Award Master CSS

Wahahaha,ini dia event pertama yang saya buat sendiri,Award CSS master.event'a sudah berlangsung dari tanggal 2 febuary sampai sekarang tanggal 5 febuary di grup deezclan.Event yang saya buat cukup simple,yaitu menjawab 20 pertanyaan seputar css yang saya buat dengan google doc

,ada yang mudah dan sulit.tapi buat saya pertanyaan'a itu sangat dasar sekali untuk orang yang sudah biasa otak - atik blog.dengan sistem penilaian poin,1 soal bernilai 5 poin dengan 20 pertanyaan.jadi total 20x5=100 poin nilai sempurna.pesertanya cukup banyak yaitu 22 orang.dan hasilnya lumayan memuaskan ada 14 orang yang lulus dengan nilai diatas 80.inilah yang membuat saya bangga pada sobat" blogger sekarang.CSS bukan lagi menjadi hal yang asing untuk anak" muda dari sd,smp,sma sudah tau cara'a bermain css.tujuan dari event ini pula untuk memotivasi mereka yang mengikuti agar mendapatkan ilmu" dasar dan paham betul cara kerja css.nahh,hadiah untuk yang menang,saya akan memberikan backlink pada 20 blog saya yang masih aktif.lumayan buat naekin pagerank,SEO,dan traffic,karena backlink ini sifatnya berantai.berikut nama,url blog pemenang.untuk award'a sendiri sudah saya kirim ke email pemenang masing"

1. http://mbahqopet.blogspot.com
2. http://ypsrandy.blogspot.com
3. http://www.dickeymaru.com
4. http://cyb3r6h0st.blogspot.com
5. http://www.n0why.us
6. http://xp-files.blogspot.com
7. http://fazhrul.blogspot.com
8. http://demonztrick.blogspot.com
9. http://izenko.blogspot.com/
10. http://mationsannin.blogspot.com/
11. http://dhaniboys-q.blogspot.com
12. http://syndicate-os.blogspot.com
13. http://dicky-ajha.blogspot.com
14. http://rhony09.blogspot.com/

Semua link diatas,saya tebar backlink dan postingan ini ke 20 blog saya.
1. http://blackelegant.blogspot.com/
2. http://mixed23.blogspot.com/
3. http://bubblethemetemplatejo.blogspot.com/
4. http://jo-costumstyle.blogspot.com/
5. http://thegazettetemplate.blogspot.com/
6. http://cosplayfanatictemplates.blogspot.com/
7. http://2ne1-blogtemplates.blogspot.com/
8. http://uchiha-itachi-blogtemplates.blogspot.com/
9. http://www.lockcase.co.cc/
10. http://akb-kita.blogspot.com/
11. http://gumigumi23.blogspot.com/
12. http://rukiatemplate.blogspot.com/
13. http://animetemplatedemo.blogspot.com/
14. http://orangeminimalist.blogspot.com/
15. http://sasuke-template.blogspot.com/
16. http://565656565demo.blogspot.com/
17. http://css3modern.blogspot.com/
18. http://naruto-godmode.blogspot.com/(masih tahap perbaikan)
19. http://akatsukimangaindo.blogspot.com/(template masih proses pengeditan)
20. http://Djogzs.blogspot.com/

Dan untuk yang belum beruntung jangan berkecil hati dulu,karena backlink akan saya taruh di blog saya sendiri.berikut link'a
1. http://www.akita-kun.com
2. http://platinum-site.blogspot.com
3. http://bangtoyyibb.blogspot.com
4. http://www.kazama-kazekage.blogspot.com
5. http://ipadonblogger.blogspot.com/

Terimakasih atas partisipasinya,blajar lagi ya.Arigatou Gozaimasu #tepar @__@"

Simple Navbar dengan Efek Blur

Postingan kali ini,saya mau share Simple Navbar dengan Efek Blur yang berasal dari Blog akb yang merupakan blog saya sendiri.karena ada banyak request yang minta di kasih tau cara memasang'a ywes saya kasih nih.

~xD

Untuk menggunakan Navbar ini,pertama buka blogger => rancangan => edit HTML lalu masukan css dibawah ini diatas kode </b:skin>

#nav {
float:left;
width:100%;
overflow:hidden;
background: -moz-linear-gradient(top, #25272C 0%, black 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25272C), color-stop(99%,black));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25272C), color-stop(99%,black));}
#nav li{
float:left;
display:inline;
list-style:none;
line-height:13px;
margin-right:1px;
color:#ddd;}
#nav ul:hover, #nav li a {color: transparent;text-shadow: 0px 0px 3px white;}
#nav li a:hover, #nav li a.selected{
color:#fff;}
#nav li a {
float:left;
font-size:16px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-decoration:none;
text-shadow: 0px 0px 1px white;
padding:15px 15px 25px 15px;
-webkit-transition: all 0.5s ease-in-out;}
#nav li a span{
font-size:11px;
letter-spacing:2px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-shadow: 0px 0px 2px white;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;}
#nav li a:hover span, #nav li a.selected span{
color:#9E1C16;
text-shadow: 0px 0px 2px #9E1C16;}

Kemudian masukan pula kode html dibawah ini,dimanapun kamu mau.poko'a
diantara kode <body> dan </body> (#Didalam)

<div id='nav'>
<ul>
<li><a href='http://#'>TRIK Blog CSS3</a></li>
<li><a href='http://#'>BRUSHER PHOTOSHOP</a></li>
<li><a href='http://#'>ANIME TEMPLATE Blogger</a></li>
<li><a href='http://#'>VIDEO NarutoShippuden</a></li>
<li><a href='http://#'>VIDEO Bleach</a></li>
<li><a href='http://#'>SOUNDTRACK Anime Music</a></li>
<li><a href='http://#'>J-Music Japan Music</a></li>
<li><a href='http://#'>K-Music Korean Music</a></li>
</ul>
</div>

Ganti Tanda Pagar "#" Dengan Alamat Link kamu dan juga jangan lupa mengganti nama linknya.
Setelah itu simpan.
Mission Complete .Arigatou Gozaimasu :)

Trik membuat page navigasi melayang

Sekedar mau berbagi trik lagi,kali ini saya mau sharing cara membuat pagenavigasi seperti di blog saya.trik ini memungkinkan menu "posting lama,posting baru" melayang dan berada dibawah,yang bisa dibilang mirip taskbar.
Oia,sabelumnya mau saya ingatkan,trik ini tidak semua template bisa,karena bisa saja css'a berbeda".tapi rata" saya pikir sama saja kq.dan sebelum menggunakan trik ini juga,saya sarankan pula untuk membackup dahulu template kamu/simpan /download dahulu template kamu.

Disini yang sobat perlu lakukan buka blogger => rancangan =>edit Html,lalu copy css dibawah ini(pilih salah satu style) ke atas kode </b;skin> .

Note:Sobat cari dahulu css #blog-pager,#blog-pager-older-link,#blog-pager-newer-link pada template sobat,bila ada hapus dahulu agar css'a tidak bentrok.

Style 1

.home-link {
background: white;
padding: 10px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
text-align: center;
position: absolute;
background: rgba(255, 255, 255, 0.8);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

#blog-pager-newer-link {
float: right;
padding: 5px;
}
#blog-pager-older-link {
float:left;
padding: 5px;
}
#blog-pager {
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
position: fixed;
font-size:15px;
bottom: 0;
width: 100%;
color:#000000;
left: 0;
margin:0px;
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

#blog-pager a {color:#58A;}

Style 2

.home-link {
background: white;
padding: 10px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
text-align: center;
position: absolute;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

#blog-pager-newer-link {
float: right;
padding: 5px;
}
#blog-pager-older-link {
float:left;
padding: 5px;
}
#blog-pager {
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
position: fixed;
font-size:15px;
bottom: 0;
width: 100%;
color:#000000;
left: 0;
margin:0px;
background: rgba(0, 0, 0, 0.8 );
border-top: 1px dotted #26B7EB;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

#blog-pager a {color:#58A;}

Style 3

.home-link {
background: white;
padding: 10px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
text-align: center;
position: absolute;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

#blog-pager-newer-link {
float: right;
padding: 5px;
}
#blog-pager-older-link {
float:left;
padding: 5px;
}
#blog-pager {
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
position: fixed;
font-size:15px;
bottom: 0;
width: 100%;
color:#000000;
left: 0;
margin:0px;
background: rgba(0, 0, 0, 0.8 );
border-top: 1px dotted #26B7EB;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

#blog-pager a {color:#58A;}

Untuk style lainya,kamu bisa menggunakan css3 gradient generator
http://www.colorzilla.com/gradient-editor/

sobat pilih salah satu style 'a,lalu copy paste css yang seperti diatas,jangan semua'a,karena menurut saya yang penting hanya css untuk google chrome dan mozilla firefox.
setelah itu letakan css yg tadi kamu copy ke dalam css #blog-pager
Contoh:

#blog-pager {
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
position: fixed;
font-size:15px;
bottom: 0;
width: 100%;
color:#000000;
left: 0;
margin:0px;
background: rgba(0, 0, 0, 0.8 );
border-top: 1px dotted #26B7EB;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

jadi seperti

#blog-pager {
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
position: fixed;
font-size:15px;
bottom: 0;
width: 100%;
color:#000000;
left: 0;
margin:0px;
background: -moz-linear-gradient(top, #d5cea6 0%, #c9c190 40%, #b7ad70 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5cea6), color-stop(40%,#c9c190), color-stop(100%,#b7ad70));
background: -webkit-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%);
border-top: 1px dotted #26B7EB;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);

Hapus background: rgba(0, 0, 0, 0.8 ); agar css backgroundya tidak bentrok.

Untuk yang lain" seperti mengganti jenis font,warna dan sebagainya,saya tidak jelaskan secara rinci.tapi kalau ada masalah,tanyakan saja .thx

Network Tips

Award Master CSS

Simple Navbar dengan Efek Blur

Trik membuat page navigasi melayang

Blogger templates

Weekly post

Popular Posts

Daftar Blogger

Blog Archive

Blogroll

Report Abuse

Mengenai Saya

Cari Blog Ini

Tags

Recent Comments

Recent Post

Facebook

Pages

Recent

About