Skip to main content

Cara Pop up Contact di Blogger dengan Style

By


Hey guys now iwanna to tell you how to make Pop up Contact to Faceboo, twitter, and Google+ With style!

So Let's see

<style>
#iconmr li {
font-size:18px;
font-family:Agency Fb;
color:#ccc;
cursor: pointer;
height:41px;
position: relative;
border-top:none;
border-bottom:none;
list-style:none;
}
#iconmr .icon {
background: red url('https://lh5.googleusercontent.com/-oJJuTABnZG4/TyvWKerI_-I/AAAAAAAAF_g/9tFEfxqNLa4/d/iconizers.png') 3px 0 no-repeat;
background-color: rgba(217,30,118, .42);
-moz-border-radius:20px;
-webkit-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
display: block;
color: #141414;
float: none;
height: 40px;
line-height: 40px;
margin: 5px 0 0;
position: relative;
text-align: left;
text-indent: 50px;
text-shadow: #333 0 1px 0;
white-space: nowrap;
width: 250px;
z-index: 5;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-ms-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0,0,0, .28) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 1px 3px;
-ms-box-shadow:rgba(0,0,0, .28) 0 1px 3px;
-o-box-shadow: rgba(0,0,0, .28) 0 1px 3px;
box-shadow: rgba(0,0,0, .28) 0 1px 3px;
width:40px
}
#iconmr li:after {
color: #141414;
content: attr(data-alt);
display: block;
height: 38px;
line-height: 38px;
position: absolute;
left: 55px;
top: 0;
z-index: 2;
}
#iconmr .icon {
color: #fafafa;
overflow: hidden;
text-decoration: none;
}
#iconmr .facebook {
background-color: rgba(65,131,196, .42);
background-position: 3px 0;
}
#iconmr .twitter {
background-color: rgba(74,191,226, .42);
background-position: 3px -40px;
}
#iconmr .gplus {
background-color: rgba(206,26,29, .42);
background-position: 3px -80px;
}
#iconmr li:hover .icon {
width:99%;
}
#iconmr li:hover .icon {
background-color: #d91e76;
}
#iconmr li:hover .facebook {
background-color: #2d76b9;
}
#iconmr li:hover .twitter {
background-color: #29b8e5;
}
#iconmr li:hover .gplus {
background-color:#E0181C;
}
#iconmr li:hover .rss {
background-color: #ff6d00;
}
</style>

<br />
<ul id="iconmr">
<li data-alt="Follow Me On Twitter"><a class="icon twitter" href="http://twitter.com/@IrfanVBH" rel="external" target="_blank">Follow Me On Facebook</a></li>
<li data-alt="Follow Me On Facebook"><a class="icon facebook" href="https://www.facebook.com/KarcisHitam" rel="external" target="_blank">Follow Me On Facebook</a></li>
<li data-alt="Find Me On Google+"><a class="icon gplus" href="http://plus.google.com/u/0/103584175783067687681" rel="publisher" target="_blank">Find Me On Google+</a></li>

</ul>

Edit yang berwarna merah

Setelah jadi seperti ini:


Labels:

Comments

Post a Comment

Popular posts from this blog

Adab Adab Budaya Melayu Riau Berdasarkan Google

By
Orang Melayu mengaku identitas kepribadiannya yang utama adalah adat istiadat Melayu, dan agama Islam. Dengan demikian, seseorang yang mengaku dirinya orang Melayu harus beradat-istiadat Melayu, berbahasa Melayu, dan beragama Islam. Dari tiga ciri utama kepribadian orang Melayu tersebut, yang menjadi pondasi pokok adalah agama Islam, karena agama Islam menjadi sumber adat-istiadat Melayu. Oleh karena itu, adat-istiadat Melayu Riau bersendikan syarak dan syarak bersendikan kitabullah. Dalam bahasa Melayu berbagai ungkapan, pepatah, perumpamaan, pantun, syair, dan sebagainya menyiratkan norma sopan-santun dan tata pergaulan orang Melayu. 1. Pendahuluan Orang Melayu menetapkan identitasnya dengan tiga ciri pokok, yaitu berbahasa Melayu, beradat-istiadat Melayu, dan beragama Islam. Dalam makalah ini, penulis akan mengemukakan beberapa hal pokok yang berkaitan dengan adat istiadat Melayu Riau. Seperti diketahui bersama, segala hal yang bersangkutan dengan adat-istiadat Me
Post a Comment
Read more

Pembahasan Soal Olimpiade TIK Tingkat Kabupaten Tahun 2006

By
  Hey bro! kali ini saya mau membahas soal Olimpiade TIK yang di selenggarakan oleh TOKI! Langsung aja ya! SOAL OLIMPIADE TIK Tingkat Kabupaten tahun 2006 Pembahasan ini kami sengaja buat secara berseri, dengan tujuan agar kita tidak lekas bosan dan jenuh. Di samping itu juga agar kita mudah memahami apa yang kami sampaikan dalam pembahasan ini. SOAL 1 – 2: Deskripsi untuk pertanyaan 1-2 Deret bilangan Fibonacci didefisikan secara rekursif sbb. f1 = 1 f2 = 1 fn = fn-1 + fn-2 untuk semua n > 2 1. Berapa banyak kah bilangan Fibonacci antara 10 sampai dengan 100? (A) 90 (B) 9 (C) 5 (D) 10 (E) 12 2. Dengan mengambil satu harga n kemudian anda menjumlahkan bilangan-bilangan tsb mulai dari f1 s.d. fn maka berapakah n terkecil agar jumlah itu > 150? (A) 9 (B) 10 (C) 11 (D) 15 (E) 20 PEMBAHASAN SOAL: Sebagaimana yang kita ketahui bersama, soal-soal dalam olimpiade komputer jarang merupakan soal mandiri. Biasanya, soal-soal ini merupakan soal berkelompok, dengan satu macam permasalaha
Post a Comment
Read more

Tradisi dan Budaya PraIslam di Nusantara

By
  Tradisi dan Budaya Islam di Nusantara Sejarah tentu pastilah ada yang mengawalinya dan bisa saja sejarah tersebut dirubah, baik itu untuk hal-hal yang negatif atau bisa juga sejarah tersebut dirubah menjadi sesuatu yang positif dan bermanfaat bagi masyarakat luas. Keadaan geografis dan wilayah yang dimiliki bangsa ini, telah membentuk keragaman dan perbedaan struktur masyarakatnya. Secara sederhana, keragaman ini ditunjukkan setidaknya oleh tiga jenis kelompok masyarakat yang berkembang di seluruh wilayah nusantara. Kelompok I, adalah masyarakat yang hidup di daerah-daerah pedalaman dan kawasan-kawasan yang terpencil. Masyarakat ini biasanya memiliki kepercayaan animisme dan komitmen kesukuannya sangat kuat. Kelompok II, adalah masyarakat yang hidup di sepanjanggaris pesisir, dimana jalur-jalur pedagangan laut telah memudahkan mereka untuk dapat mengenal dan bertukar kebudayaaan dengan dunia luar. Sedangkan kelompok III , adalah masyarakat yang dipengaruhi oleh struktur b
Post a Comment
Read more