Cara Membuat Baner Iklan Unik 125X125 Dengan CSS3

Unknown
Askum all....!!!
Kesempatan kali ini c.arjem mencoba untuk menjelaskan bagaimana cara membuat baner iklan 125X125dengan css3 + effect transition +transformasi, baner iklan ini memang unik selain bisa berubah bentuk, baner iklan ini bisa berjalan dan berputar untuk lebih jelsnya sobat bisa melihat gambar di bawah ini.atau arahkan kursor pada baner iklan yang ada pada blog ini,


      cara menerapkannya iuti lngkah-langkah berikut ini
  • Login ke blog sobat
  • Pada area dashboard Pilih template >>Edit HTML
  • Cari kode ]]></b:skin> tekan ctrl +f untuk mempermudah pencarian
  • Copy kode di bawah ini &letakan tepat di atas kode ]]></b:skin>
  • Selanjut simpan template
#kotak-iklan-125x125 {margin: 0px;padding: 5px;text-align: center;}
#kotak-iklan-125x125 img {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c0c0c0;-webkit-border-radius:70px;-moz-border-radius:70px;-o-border-radius:70px;border-radius:70px;-webkit-transition: all 0.45s ease-out;-moz-transition: all 0.45s ease-out;-o-transition: all 0.45s ease-out;transition: all 0.45s ease-out;}
#kotak-iklan-125x125 img:hover {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c33f00;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px; background: blue; -webkit-transition-property: left, top, background, -webkit-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s; left: 100px; right: 100px; background: red;
-webkit-transform: rotate(360deg);
}
  • Langkah berikunya silahkan sabat klik Tata letak  >> add gadget >> pilih HTML / javascript
  • Kemudian copy script di bawah ini dan pastekan pada kolom gadget yang baru sobat tambahkan tadi
<div id="kotak-iklan-125x125">
<a target="_blank" href="http://coretan-arjem.blogspot.com/"><img alt="banner ads" src="http://i1279.photobucket.com/albums/y529/coretan_arjem1/arjem125x125_zps932f1a23.png" border="0"/></a>
<a target="_blank" href="http://coretan-arjem.blogspot.com/"><img alt="banner ads" src="http://i1279.photobucket.com/albums/y529/coretan_arjem1/arjem125x125_zps932f1a23.png" border="0"/></a>
<a target="_blank" href="http://coretan-arjem.blogspot.com/"><img alt="banner ads" src="http://i1279.photobucket.com/albums/y529/coretan_arjem1/arjem125x125_zps932f1a23.png" border="0"/></a>
<a target="_blank" href="http://coretan-arjem.blogspot.com/"><img alt="banner ads" src="http://i1279.photobucket.com/albums/y529/coretan_arjem1/arjem125x125_zps932f1a23.png" border="0"/></a>
</div>

NB: silahkan sobat ganti script yang berwarna hijau di atas dengan URL iklan sobat

>>more>>
Tidak ada komentar:

Membuat Icon Judul Artikel Bisa Muncul & Menghilang

Unknown
Askum all....
Kali ini C.arjem mau menjelaskan & berbagi tentang bagaimana cara membuat icon di samping judul postingam yang sanggup muncul saat di sorot cursor & menghilang saat cursor tidak lagi di atasnya , gimana penasaran kan ?? hehehehe.... tenang aja sobat C.arjem tak akan membiarkan hati sobat bertanya-tanya dan  tutorial ini akan menjadi jawabanya.


  • Pertama login ke blog sobat
  • Ke dua masuk rancangan Edit HTML
  • Ke tiga cari kode  ]]></b:skin> tekan ctrl+f untuk mepermudah pencarian
  • Ke empat copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>  .
h3.post-title{
       padding-left:15px;
       padding-right:8px;
       display:inline-block;
       background-position:4px 6px;
       background-size:5px 5px;
       text-decoration:none;
       color:#C60000;
       font-weight:500;
       text-shadow:1px 1px 1px #000000;
       transition:0.8s ease-in;
       -o-transition:0.8s ease;-in;
       -moz-transition:0.8s ease-in;
       -webkit-transition:0.8s ease-in;
       -ms-transition:0.8s ease-in;
}
h3.post-title:hover{
background:url(http://i1279.photobucket.com/albums/y529/coretan_arjem1/loading_zps0197b318.gif) no-repeat;
       background-position:1px 2px;
       background-size:15px 15px;
       color:#F00000;
       padding-left:22px;
       padding-right:6px;
}
  • Yang terahir save template danlihat hasilnya  ( semoga bermanfaat )
>>more>>
Tidak ada komentar:

Memasan Sosial Netwok / Jejaring Pada Blog

Unknown
Tampilan blog yang cantik serta pengunjung yang ramai adalah suatu impian yang di dambakan oleh stiap blogger, tool ndaaaak...?? hehehe .sama halnya dengan sosial network / jejaring yang mempunyai pengaruh besar dalam blog kita setidaknya blog sobat bisa terkenal melalui sosial network tersebuat, ok bagi sobat yang ingin memasang silahkan ikuti langkah-langkah berikut


1- Login ke blog sobat
2- Masuk page element/ tata letak
3- Add gadget pilih HTML/javascript
4- Copy paste script di bawah ini
<style>#NBT-SNS {width: auto;margin-top: 0px 0px 0px 0px;padding-right : 0px 0px 0px 0px;}#NBT-SNS li {cursor: pointer;height: 40px;position: relative;list-style-type: none;}#NBT-SNS .icon {background: #D91E76 url('http://i1279.photobucket.com/albums/y529/coretan_arjem1/aa_zpsbe52250e.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 35px;display: block;color: #141414;float:none;height: 48px;line-height: 48px;margin: 0px 0;position: relative;text-align: left;text-indent: 50px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .30s ease-in-out, background-color .30s ease-in-out;-moz-transition: width .30s ease-in-out, background-color .30s ease-in-out;-o-transition: width .30s ease-in-out, background-color .30s ease-in-out;transition: width .30s ease-in-out, background-color .30s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#NBT-SNS span:hover {visibility: hidden;}#NBT-SNS span {display: block;top: 15px;position: absolute;left: 68px;}#NBT-SNS .icon {color: #fafafa;overflow: hidden;}#NBT-SNS .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#NBT-SNS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#NBT-SNS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#NBT-SNS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#NBT-SNS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#NBT-SNS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#NBT-SNS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#NBT-SNS li:hover .icon {width:  auto;}#NBT-SNS li:hover .icon {background-color: #d91e76;}#NBT-SNS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#NBT-SNS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#NBT-SNS li:hover .google {background-color: #A70000;background-position: 0 -94px;}#NBT-SNS li:hover .pint {background-color: #C00;background-position: 0 -142px;}#NBT-SNS li:hover .linked {background-color: #005772;background-position: 0 -190px;}#NBT-SNS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#NBT-SNS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#NBT-SNS .icon:active {bottom: -1px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style><ul id="NBT-SNS"><li><a href="https://www.facebook.com/coretan.arjem?ref=tn_tnmn" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span> </li><li><a href="https://twitter.com/Coretan_arjem" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li><li><a href="https://plus.google.com/u/0/107642724862044125057" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span> </li><li><a href="http://pinterest.com/coretanarjem/" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li><li><a href="https://www.youtube.com/dashboard" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span> </li><li><a href="http://feeds.feedburner.com/coretanarjem" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li></ul><div style='clear: both;'></div>
5- Ganti tulisan yang berwana biru dengan URL soba
6- Yang terahir save template dan lihat hasilnya

>>more>>
2 komentar:

Membuat Effect Berubah Bentuk Pada Gambar Post

Unknown
Hai semuanya ......!!! kali ini saya akan berbagi tentang bagaimana cara membuat gambar postingan berubah bentuk saat di sorot kursor, dengan menambahkan sedikit kode css sobat biasa membuat perubahan yang cukup menarik, bagi yang ingin mencoba silahkan ikuti tutorial berikut ini:
- Pertama login ke blog sobat
- Kedua masuk rancangan Edit HTML
- Ketiga cari kode ]]></b:skin> tekan ctrl+f untuk mempermudah pencarian
- Setelah ketemu copas kode di bawah ini & letakkan tepat di atas kode ]]></b:skin>
.post img{padding:4px  ;margin:0px 0px 0px 0px;margin-top:0px 0px 0px 0px;border-radius:50px 2px 50px 2px;-webkit-transition: all 0.9s ease;-moz-transition: all 0.9s ease;transition: all 0.9s ease;border: 1px solid #BA064B;overflow: hidden;}.post-body img:hover{border-radius:2px 50px 2px 50px;background: -moz-linear-gradient(top, #BA064B 1%, #BA064B 50%);}

  sekian tutorial dari saya semoga bermanfaat

>>more>>
3 komentar:
Langganan: Postingan (Atom)