/* HourGlass THEME */ .ip-header { position: fixed; top: 0; z-index: 100; min-height: 480px; width: 100%; height: 100%; background: #505050 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmgBn63Xy93Q-liqCuagUsbwD_rnNODt4N_a6O950WcuCsHpK9aijMbT-V6Q0RyT_g6iilt8GbUdwxrkgV-dRg82d57nNhAAg1bgWeQ2uy8yZ_oIcVq_5mJtBeyehODdE1lqvQjElhdws/s1600/hourglass.gif) no-repeat center center; /* warna background dan gambar loader */ z-index: 999999; } .ip-header .ip-loader svg path.ip-loader-circlebg { stroke: #fff; /* warna background circle loader */ } .ip-header .ip-loader svg path.ip-loader-circle { -webkit-transition: stroke-dashoffset 0.2s; transition: stroke-dashoffset 0.2s; stroke: #13BAFA; /* Warna garis circle saat loading */ } /* Pre-Loader main */ .ip-loader { position: absolute; left: 0; width: 100%; opacity: 0; cursor: default; pointer-events: none; } .ip-loader { bottom: 20%; } .ip-header .ip-inner { display: block; margin: 0 auto; } .ip-header .ip-loader svg path { fill: none; stroke-width: 6; } /* Animasi */ .loading .ip-loader { opacity: 1; -webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; } .loading .ip-loader { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes animInitialHeader { from { opacity: 0; -webkit-transform: translate3d(0,800px,0); } } @keyframes animInitialHeader { from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); } } .loaded .ip-loader { opacity: 1; } .loaded .ip-loader { -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedLoader { to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } } @keyframes animLoadedLoader { to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } } /* Animasi header ketika loading selesai */ .loaded .ip-header { -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedHeader { to { -webkit-transform: translate3d(0,-100%,0); } } @keyframes animLoadedHeader { to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } } .layout-switch .ip-header { position: absolute; } /* End Preloader */
IP

Senin, 19 Maret 2012


Membuat Kotak Iklan Dengan Efek Mantul



Banyak cara menuju roma... banyak cara pula menampilkan adsense atau iklan dari sponsor blog sobat dengan cara yang unik dan menarik, salah satunya yaitu dengan cara membuat efek pantul pada saat blog ditampilkan. Cara ini bisa membantu meningkatkan jumlah klik adsense sehingga otomatis penghasilan blog dari adsense juga bertambah.

Preview : Demo Postingan

Perhatian : Sebelum mencoba trik ini ada baiknya terlebih dahulu membackup template sobat untuk menghidari hal-hal yang tidak diinginkan !!!...

Cara Pemasangan :
  • Login ke  blog sobat...

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.


  • Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
        <script type='text/javascript'>
        $(window).bind("load", function() {
        // animasikan nilai top saat halaman telah selesai dimuat
        $('#kotak-pesan').animate({top:"190px"}, 1000, "easeOutBounce");
        // hilangkan kotak pesan saat tombol (x) diklik
        $('a.close').click(function() {
        $(this).parent().slideUp(800, "easeOutBounce");
        return false;
        });
        });
        </script>
        <style>
        #kotak-pesan{
        position:fixed !important;
        position:absolute; /* IE6 */
        top:-900px;
        left:50%;
        margin:0px 0px 0px -182px;
        width:250px;
        height:250px;
        padding:10px;
        background:#FFB200;
        border:2px solid #fff;
        font:normal 1em Cambria,Georgia,Serif;
        color:#111;
        -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
        -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
        box-shadow:0px 1px 3px rgba(0,0,0,0.4);
        }
        #kotak-pesan a.close{
        position:absolute;
        top:-10px;
        right:-10px;
        background:#FFB200;
        font:bold 16px Arial,Sans-Serif;
        text-decoration:none;
        line-height:22px;
        width:22px;
        text-align:center;
        color:#fff;
        border:2px solid #fff;
        -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
        -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
        box-shadow:0px 1px 2px rgba(0,0,0,0.4);
        -webkit-border-radius:22px;
        -moz-border-radius:22px;
        border-radius:22px;
        cursor:pointer;
        }
        </style>

  • Cari kode <Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di bawah kode <Body> tersebut.

       <div id='kotak-pesan'>
        DISINI KONTEN ADA,
        Bisa Iklan,
        Dan Lain Lain
        Sesuai yang sobat inginkan
        <a class='close' href='#'>&times;</a>
        </div>

     |  Blog Tools
    - Keterangan :
    • Kode yang berwarna merah merupakan kode script jquery jika sobat sudah menggunakan kode script jquery kode ini jangan pasang lagi.
    • Kode yang berwarna biru merupakan settingan ukuran lebar, tinggi dan warna background. Silakan sesuaikan dengan keinginan sobat.
    • Teks yang berwarna ungu merupakan tempat untuk menaruh kode script iklan.

  • Klik "Save" dan lihat hasilnya...
.: Semoga Bermanfaat :.
Diposting oleh di 00.54.00

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)