Pada postingan kali ini kita akan membahasa tentang membuat box iklan melayang. Tentunya apabila iklan yang melayang di blog akan mudah untuk di lihat oleh pengunjung dan apabila ternyata pengunjung tidak berkenan melihatnya pengunjung pun bisa mengklik tombol CLOSE yang telah ada. Trik ini sebenarnya sudah umum sekali dan banyak digunakan dan saya juga mendapatkannya dari blog Mas O-OM.
Ok, simak caranya:
1.Login Ke Blogger.
2.Klik Tata Letak.
3.Klik Element Halaman.
4.Klik Tambah Gadget dan pilih HTML / JAVASCRIPT .
5.Copy dan Paste Kode Berikut Di Dalamnya.
<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" "" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a> <style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:right; border:2px solid #A5BD51; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){
var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()">
.:[Close][Klik 2x]:. </a> </div> <center> <script src="http://kumpulblogger.com/scahor.php?b=190266&onlytitle=1" type="text/javascript"></script>
</center> <script type="text/javascript"> var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>
6.Ganti teks yang berwarna merah dengan script iklan sobat
7.Jangan lupa simpan
Untuk menambah koleksi Efek blog saya, kali ini aku akan posting bagaimana cara membuat efek tulisan berkedip ... Untuk membuatnya sangatlah mudah kok, kita tinggal meletakkan kode <blink> sebelum isi postingan / linkmu yang kamu inginkan untuk berkedip dan menutupnya dengan kode </blink>... Untuk lebih mudahnya seperti berikut :
1. Pastekan kode berikut ini untuk membuat postingan berkedip ... pastekan dimanapun kamu mau :
<blink>ISI POSTINGANMU atau ISI LINK MU</blink> ...Bisa waktu Posting (dalam mode Edit Html)
Contoh :
<blink>kali ini aku akan posting bagaimana cara membuat efek tulisan berkedip ...</blink>
setelah di tambahi kode <blink>ISI POSTINGANMU</blink>
HASILNYA akan terlihat seperti ini :
2. Untuk membuat link berkedip, Klik pada "Page Element" trus pilih"Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu):
<blink><a href="http://linkmu.blogspot.com/" target="_blank">DESKRIPSI LINK MU</a></blink>
setelah di tambahi kode <blink>DESKRIPSI LINK MU</blink>
CSS, sangat berguna sekali pada materi web design, apalagi pada perkembangan baru-baru ini, nah untuk menambah skill kita di CSS, rieztoshare posting tentang cara membuat tombol dengan CSS3, ya walaupun artikel bukan punya saya asli, apa salahnya sih kita share, hehehe....
Ouke, yuk kita ikuti artikelnya.
Apa yang menarik dengan Tombol ini?
100% CSS, tanpa Image ataupun Javascript.
Fasilitas Gradient didukung oleh berbagai browser (IE, Firefox 3.6, Chrome, and Safari).
Fleksibel dan scalable. ukuran dan lengkungan tombol dapat disesuaikan dengan mengubah ukuran font dan nilai padding.
Memiliki 3 state, yaitu Normal, Hover dan Active.
Dapat diimplementasikan pada berbagai element HTML, diantaranya: a, input, button, span, div, p, h3, dsb.
Jika browser tidak mendukung CSS3 tombol akan tetap akan tampil, tapi hanya akan tampil dengan style standard tanpa gradient dan lengkungan.
Tampilan pada berbagai BrowserPada gambar di bawah ini, dapat dilihat perbedaan tampilan pada beberapa browser yang mendukung CSS3, yang mendukung sebagian, dan yang tidak mendukung sama-sekali.
Status Tombol
Tombol CSS3 ini mendukung 3 state/status. yaitu:
Normal state = Ketika tombol ini normal.
Hover = Ketika tombol ini di dekati oleh mouse.
Active = Ketika tombol ini mendapatkan focus atau di klik.
Berikut adalah contoh tampilan dari tombol CSS3 berdasarkan status/state tombol tersebut:
Styles Umum Untuk Tombol Ini
Kode berikut adalah style umum untuk class button yang nantinya dapat dipergunakan pada element HTML dan dikombinasikan dengan class-class lainnya.
Style untuk Gradiasi
Kode di bawah ini adalah CSS styling untuk tombol berwarna oranye yang akan diberi nama dengan class orange. Baris pertama adalah latar belakang untuk browser non-CSS3, baris kedua adalah untuk browser WebKit, baris ketiga adalah untuk Firefox, dan baris terakhir adalah filter gradient yang hanya dibaca oleh Internet Explorer.
Bagaimana menggunakannya dalam HTML?
Mari kita umpamakan Anda ingin menggunakan Tombol yang berwarna Biru. Maka langkah-langkah yang perlu Anda lakukan adalah dengan Mendownload Script CSS di Bawah Ini Terlebih Dahulu:
Dalam file zip tersebut terdapat tombol.css yang dapat dimasukkan ke dalam HTML atau dapat juga di link dengan cara seperti berikut:
<!-- Tambahkan Link ke CSS untuk Tombol CSS3 -->
<link href="tombol.css" rel="stylesheet" type="text/css" />
Setelah menambahkan tag di Atas, Kita dapat menyisipkan class untuk Element-element HTML yang ingin dijadikan tombol. Misalnya Tag # yang ingin dijadikan menjadi tombol berwarna biru, maka kode yang harus digunakan adalah sebagai berikut :
Nah Mudah kan?. Pada file di Atas pun terdapat contoh.html yang dapat dijadikan referensi penggunaan tombol.css. Berikut adalah tampilan contoh.html yang akan Anda dapatkan bila Anda menggunakan Firefox versi terbaru:
Bagaimana sob? tertarik untuk mencoba? silakan saja sob, selain praktis tips ini juga lumayan mudah untuk dicoba.
Sekian dulu web design kali ini ya sobat, semoga bermanfaat dan termakasih...
Login ke Dashboard blogger kemudian klik Design / Rancangan / Tata Letak. Klik Add a Gatget, kemudian pilih Gadget HTML/JavaScript. Masukkan script random post berikut di dalam Gadget HTML/JavaScript tersebut
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts" type="text/javascript"></script>
Setelah script random post di atas sudah di masukkan jangan lupa untuk menyimpan nya. Cara ini memang benar-benar bisa menampilkan random post di blogger.
5.Copy dan Paste Kode Berikut Di Dalamnya.
