B

l

o

g

g

e

r

Amatiran

♥

[Read More...]

7 Kumpulan Efek Gambar Dengan CSS

Banyak Sekali Image EFek pake CSS, Tapi saya mau share beberapa aja ya, kalo kurang Komentar Aja, ntar saya Tanggapi .
Oke sob,
Langsung aja deh, Cekidot

1. Membuat Border berubah Warna saat Di Hover/Sorot
Kode CSSnya :

.f403_img-efek {
border:1px solid #fff;
  }
.f403_img-efek:hover {
border:1px solid blue;
  }

Kode HTMLnya :

<img class="f403_img-efek" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/s1600/main-logo.png" />

Keterangan :
1. Kode warna Merah adalah Kode Panggilan Script
2. Kode Warna Biru adalah URL Gambar Kalian
Demo :


2. Mengubah Background dan Border berubah Warna
CSS :

 .f403_img-efek-2{
border:5px solid #ccc;
  }
.f403_img-efek-2:hover {
  background-color:blue;
border:5px solid #ddd;
  }

 HTML : 

<img class="f403_img-efek-2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/s1600/main-logo.png" />

Demo :


3. Dashed Border Image
CSS :

.f403_img-efek-3 {
border:2px solid #ccc;
  }
.f403_img-efek-3:hover {
border:2px dashed #000;
  }

HTML :

<img class="f403_img-efek-3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/s1600/main-logo.png" />

Demo :



4. Dotted Image Border

CSS :

.f403_img-efek-4 {
border:2px solid #ccc;
  }
.f403_img-efek-4:hover {
border:2px dotted #000;
  }

HTML :

<img class="f403_img-efek-4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/s1600/main-logo.png" />

Demo :


5. Auto Zoom Image with Shadow Color

CSS :

    .f403_img-efek-5 {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    margin: 0 10px 5px 0;
    position: relative;
    padding: 3px;
    width: 125px;
    height: 125px;
    -moz-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
    -webkit-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(-15deg);
    }


    .f403_img-efek-5:hover{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    box-shadow:0px 0px 10px blue;
    -webkit-box-shadow:0px 0px 10px blue;
    -moz-box-shadow:0px 0px 10px blue;
    opacity: 1;
    z-index: 2;
    position: relative;
    -moz-transform: rotate(0deg);
    -moz-transform: scale(1.25);
    -webkit-transform: rotate(0deg);
    -webkit-transform: scale(1.25);

HTML :

<img class="f403_img-efek-5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/s1600/main-logo.png" />

Demo :



6. Membuat Gambar Berputar saat di Sorot/Hover

[Read More...]

2 Mengubah Blog Nofollow Menjadi Dofollow

Apasih Blog Dofollow Itu ?
Blog dofollow adalah memberikan perintah kepada bot google untuk mengindex semua url yang ada pada blog maupun web kita, yang dimana setting untuk dofollow telah kita buat pada kode html blog kita.
Wah .. Keliatanya asik bgt ya, Pasti banyak Komentar yang datangdi blog kita, blog saya udah dofollow Belum ya ?
klo menurut saya udah, soalnya banyak Link yang udah terindex di Google hehehe ..

Cara membedakan Blog Dofollow dengan Nofollow gimana Sih ?
Gampang sob,
1. Lihat komentar Artikel kalian.
2. Kalian Block Nama orang yang Komentar di Blog kita
3. Klik kanan --> Lihat Kode sumber Teks Yang dipilih/View Source Code
4. Kalian cari aja ada Tulisan rel='nofollow' atau nggk ada, biasanya kalo bukan tulisan Nofollow berarti Blog itu bukan Blog Nofollow atau juga kalo gk ada tulisan rel='...' itu juga bisa di anggap Dofollow tapi itu belum memungkinkan, Kalo menurut saya sih kedua2nya bener hehehe ..

Sekarang ke Topik berikutnya, wakakakaka .
Cara bikin Blog Nofollow Berubah menjadi Dofollow hahhhaayyy ..

1. Masuk ke dasboard > design > edit html, lalu centang Expand Widget Templates, setelah itu cari kode html berikut :

<a expr:href='data:comment.authorUrl' rel='nofollow'> 

2. Ganti Tulisan nofollow Menjadi Dofollow


Source Image : hatetepe://www.Google.com/
Source Artikel : Bikin sendiri sob hehehe ..

Selesai deh,

Insyaallah Bermanfaat..

[Read More...]

15 CSS Efek Kertas Lipat

Assalamu'alaikum ..
sobat Bloggers .. kali ini saya mau kasih tau cara bikin Kertas kelipet pinggiranya Pake CSS ..
lansung aja ya gk usah pake penjelasan, soalnya dah Ngantuk sob ..

1. Biasa lah login Blog dulu
2. Rancangan --> Edit HTML
3. Cari Elemen ]]></b:skin> 
4. Masukan CSS berikut di atas code Elemen tadi

/*
--------------------------
Standar tampilan
--------------------------
*/

.note {
  position:relative;
  width:30%;
  padding:1em 1.5em;
  margin:2em auto;
  color:#fff;
  background:#97C02F;
  overflow:hidden;
}

.note:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  border-width:0 16px 16px 0;
  border-style:solid;
  border-color:#fff #fff #658E15 #658E15;
  background:#658E15;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  display:block; width:0; /* Firefox 3.0 damage limitation */
}

/*
--------------------------
Opsi untuk memberikan efek rounded corner
dengan menambahkan class "rounded"
--------------------------
*/

.note.rounded {
  -webkit-border-radius:5px 0 5px 5px;
  -moz-border-radius:5px 0 5px 5px;
  border-radius:5px 0 5px 5px;
}

.note.rounded:before {
  border-width:8px;
  border-color:#fff #fff transparent transparent;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px;
}

5. Simpan Template
6. Untuk memanggil CSS di atas di butuhkan Code HTML, Di bawah ini adalah Code HTMLnya

<div class='note'>
Tulisan Loe Disini
</div>

<div class='note rounded'>
Tulisan Loe Disini ..
</div>

DEMO :

Lorem Ipsum bla bla bla ..

Lorem Ipsum Bla bla bla ..

[Read More...]

4 3D Button CSS3

Halo sobat Blogger ,,
sebelum saya tidur, saya mau posting 3D button ah .
langsung aja dah udah ngantuk Cekidot ..

1. Login ke Blogger Kalian Masing²
2. Rancangan --> Edit HTML
3. Cari Elemen code ]]></b:skin>
4. Masukan Code CSS3 Di bawah ini di atas Code b:skin tadi

.button3 {
  cursor:pointer;
  margin:10px 0px;
  background:#0CA2F2;
  padding:10px 15px;
  margin:4px 2px;
  font:bold 16px Arial,Sans-Serif;
  color:#fff;
  text-decoration:none;
  outline:none;
  text-shadow:0px -1px 0px #0474C2;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:hover {
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #0396FC,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #0786DE,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:active {
  position:relative;
  top:2px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
}

5. Simpan Template.
6. Untuk mengaktifkanya, masukan Kode HTML di bawah Ini di mana aja Terserah kalian mau di posting di widget terserah kalian pokoknya

<a class='button3' href='#'>Pencetan 3 Dimensi Coy</a>

Demo :

Pencetan 3 Dimensi Gue Coy

[Read More...]

2 CSS Circle Menu

Assalamu'alaikum ..
apa kabar sobat Blogger ? pasti baik aja kan ?
kali ini saya mau ngasih Tutorial Cara membuat CSS Circle Menu. Tau gk ? Pasti Tau donk, Bisa kalian bayangin kan ? menunya bentuknya Bulet gitu hehehe ..
Langsung Aja Deh ke tutorialnya Cekidot ..

1. Login Blogger Kalian
2. Rancangan --> Edit HTML
3. Cari Elemen Code ]]></b:skin>

4. Masukan CSS di bawah ini Di atas Elemen Code tadi

.menubunder{
width: 100%;
overflow:hidden;
}

.menubunder ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
}

.menubunder li{
display: inline;
margin: 0;
}

.menubunder li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px;
width:100px;
height:100px;
border-radius: 400px;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

.menubunder a span{
position:relative;
top:40%;
}

.menubunder li a:visited{
color: white;
}

.menubunder a:hover{
background: #a71b15;
}

5. Simpan Template
6. Untuk memanggil CSS, Dibutuhkan HTML code, Masukan Code HTML Di bawah ini Untuk memanggil CSS Dimana aja, diwidget, dipostingan dll.

<div class="menubunder">
<ul>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loet</a></li>
</ul>
</div>

7. Finish. Silahkan lihat sendiri Hasilnya,

Lihat Demo Di Bawah Ini :

• Link Gue
• Link Gue
• Link Gue
• Link Gue
• Link Gue

[Read More...]

10 CSS Rounded Corners

Assalamu'alaikum wr.wb
eh .. Ketemulagi di hari yang sama. Sebelumnya saya Posting CSS3 Menu With Gradient Background Color, kali ini saya mau posting yang lain nee ..
CSS Rounded Corners, Pantes nee buat Blockquote Blog kamu ..
langsung Ke tutornya sobat Cekidot ..

1. Login Blogger Kalian.
2. Rancangan --> Edit HTML
3. Cari Elemen ]]></b:skin
4. Masukan Code CSS Di bawah ini di atas Code tadi ..

#rnd_container {background: #DFD5B9; margin:1px;}
   
    .rnd_top, .rnd_bottom {display:block; background:#DFD5B9; font-size:1px;}
    .rnd_b1, .rnd_b2, .rnd_b3, .rnd_b4 {display:block; overflow:hidden;}
    .rnd_b1, .rnd_b2, .rnd_b3 {height:1px;}
    .rnd_b2, .rnd_b3, .rnd_b4 {background:#FFFFFF; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
    .rnd_b1 {margin:0 5px; background:#CCCCCC;}
    .rnd_b2 {margin:0 3px; border-width:0 2px;}
    .rnd_b3 {margin:0 2px;}
    .rnd_b4 {height:2px; margin:0 1px;}
   
    .rnd_content {
    display:block;
    border:0 solid #CCCCCC;
    border-width:0 1px;
    padding: 4px;
    background:#FFFFFF;
    color:#000000;
}

Keterangan : Kode Yang Berwarna gnti dengan warna yang kalian inginkan.

5. Simpan Template.
6. Untuk Mengaktifkan CSS Tersebut, kita memerlukan HTML Code, Masukan Kode HTML di bawah ini di Mana aja, di Postingan, Di widget, dan lain-lain.

<div id="rnd_container">
<b class="rnd_top"><b class="rnd_b1"></b><b class="rnd_b2"></b><b class="rnd_b3"></b><b class="rnd_b4"></b></b>
<div class="rnd_content">
Tulisan Loe
</div>
<b class="rnd_bottom"><b class="rnd_b4"></b><b class="rnd_b3"></b><b class="rnd_b2"></b><b class="rnd_b1"></b></b>
</div>

7. Selesai deh.

DEMO :

Tulisan Gue

[Read More...]