Cara Membuat Pesan Selamat Datang Bergambar di Blog

Tutorial blogging kali ialah bagaimana cara membuat Pesan bergambar di blog. Jika pada postingan sebelumnya kita membuat pesan selamat datang dengan menggunakan teks berjalan yang mana bagi sebagian blogger mungkin itu kurang menarik dan bisa dibilang kurang extream hehehe. Bagi sobat yang ingin menggunakan pesan bergambar pada blognya ikuti langkah-langkah di bawah ini.

Pesan Bergambar

1. Login ke blogger atau klik disini
2. Pilih template >> Edit html >> Lanjutkan
3. Jangan lupa centang Expand widget template
4. Copy script di bawah ini dan letakkan di atas code
]]></b:skin>

/* 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>

Catatan:

  • Tulisan yang berwarna merah silahkan sobat ganti dengan Url gambar yang sobat inginkan.

5. Dan yang terakhir simpan template

Selamat mencoba, good luck Thumbs up

2 komentar:

  1. artikel mantap gan ,, kunjung balik ya..
    http://cyberpamekasan.blogspot.com/

    BalasHapus
  2. MANTAPPPPPP GANNNNNN ................................................. !!!
    THANKS

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top