Cara Membuat pesan bergambar di blog

Belajar SEO dan Blog Bagi pemula
Cara Membuat pesan bergambar di blog

Masih di Variasi Blogger share Cara Membuat pesan bergambar di blog cekidot

Silahkan sobat Copy Paste script  di bawah ini simpan sebelum kode ]]></b:skin> di blog sobat
    /* to top */
    #toTop {
    width:100px;
    background:none;
    border:0px solid #ccc;
    text-align:center;
    padding:5px;
    position:fixed;
    bottom:10px;
    right:10px;
    cursor:pointer;
    color:#666;
    text-decoration:none;
    }
    </style></head>
    <script language="javascript" type="text/javascript">
    /* toggle() checks to see if the images has already been faded
    or not and sends the appropriate variables to opacity(); */
    function toggle(el,milli) {
    // Get the opacity style parameter from the image
    var currOpacity = document.getElementById(el).style.opacity;
    if(currOpacity != 0) { // if not faded
    fade(el, milli, 100, 0);
    } else { // else the images is already faded
    fade(el, milli, 0, 100);
    }
    }
    /* changeOpacity() uses three different opacity settings to
    achieve a cross-browser opacity changing function. This
    function can also be used to directly change the opacity
    of an element. */
    function changeOpacity(el,opacity) {
    var image = document.getElementById(el);
    // For Mozilla
    image.style.MozOpacity = (opacity / 100);
    // For IE
    image.style.filter = "alpha(opacity=" + opacity + ")";
    // For others
    image.style.opacity = (opacity / 100);
    }
    /* fade() will fade the image in or out based on the starting
    and ending opacity settings. The speed of the fade is
    determined by the variable milli (total time of the fade
    in milliseconds)*/
    function fade(el,milli,start,end) {
    var fadeTime = Math.round(milli/100);
    var i = 0; // Fade Timer
    // Fade in
    if(start < end) {
    for(j = start; j <= end; j++) {
    // define the expression to be called in setTimeout()
    var expr = "changeOpacity('" + el + "'," + j + ")";
    var timeout = i * fadeTime;
    // setTimeout will call 'expr' after 'timeout' milliseconds
    setTimeout(expr,timeout);
    i++;
    }
    }
    // Fade out
    else if(start > end) {
    for(j = start; j >= end; j--) {
    var expr = "changeOpacity('" + el + "'," + j + ")";
    var timeout = i * fadeTime;
    setTimeout(expr,timeout);
    i++;
    }
    }
    }
    </script>
    <div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
    document.getElementById('june').style.display=''">
    <img src="http://img24.imageshack.us/img24/3151/welcomevariasibloggerbl.png"
    style="opacity:0.4;filter:alpha(opacity=40)"
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/>
    </div>
    <div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
    <div id="june" style="display : none;"><body>

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik Edit HTML >> centang Expand Template Widget , kemudian tekan Ctrl + F paste scipt ]]></b:skin> jika sudah ketemu silahkan Copy paste script diatas , simpan dan lihat hasilnya semoga bermanfaat

Catatan : Silahkan sobat ganti script yang berwarna merah diatas dengan gambar pilihan sobat,Saya sarankan Back Up dulu Template sobat soalnya pengalaman saya menggunakan  Cara Membuat pesan bergambar di blog ini terjadi kesalahan pada Template blog saya , tapi setelah saya utak atik script di atas akhirnya berjalan dengan baik namun setelah saya melepas script diatas terdapat widget yang hilang yaitu Navbar tidak ada jadi silahkan baca Cara Back Up Template di Blog

Klik DEMO


Share to

12 Responses to "Cara Membuat pesan bergambar di blog"

  1. ngeberatin gak bang.. :))

    BalasHapus
    Balasan
    1. ya sob , kalo udah berat jangan hahaha... :>)

      Hapus
  2. wah siip infonya..
    izin ambil ilmunya..

    BalasHapus
    Balasan
    1. silahkan sob, semoga bermanfaat :)

      Hapus
  3. Anonim18:28

    takut berat ya bang, heheehe


    keep posting aja bang


    salam dan suport dari duniasharing.com

    BalasHapus
    Balasan
    1. ya sob, gpp kali aja ada yang butuh buat yang lain hehehe... :D

      Hapus
  4. letaknya di mana tuh.. linknya..

    BalasHapus
    Balasan
    1. maksudnya link gambarnya ya sob, kalo link gambarnya yang warna merah silahkan ganti dengan gambar pilihan sobat :D

      Hapus
  5. itu bisa diganti buat iklan gak ya?

    BalasHapus
    Balasan
    1. bisa sob , tinggal diganti aja dengan gambar banner iklannya hehehe... :)

      Hapus

Jika ada Tutorial Info Blog Indonesia ini, yang kurang dimengerti silahkan luangkan saja waktu anda untuk berkomentar, karena pertanyaan anda sangat berharga untuk perkembangan dan kemajuan blogs ini.

Soalnya diblogs ini adalah wadah untuk belajar mengenal webs/blogs, disini kita sama - sama belajar, seandainya anda adalah seorang pakar blogger profesional atau pakar seo indonesia bimbinglah saya, untuk menulis artikel berkualitas.

Oia sebelum menyisipkan script silahkan gunakan tools konversi terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar.

Terimakasih.. salam kenal dan salam hangat untuk blogger indonesia, yang selalu setia di Info blog Indonesia variasi blogger.

¯\(◕ ‿◕)/¯



convert TOS

Panduan, Bimbingan Cara Belajar Blogs dan Seo