CARA Replace Lebih Baru & Link NavigasI Beranda /Older Post /New Post Bergambar

HOW TO REPLACE NEWER, OLDER & HOME NAVIGATION LINKS WITH IMAGE BUTTONS

In this tutorial i show you How to replace the Newer, Older and Home Navigation links with image buttons. These Navigation links are located at Beneath of Post(s) Section. If you are using the Numbered Page Navigation widget, these links are visible on each post only. because the numbered page navigation is not works on single post page. and by adding these image buttons, there is no effect takes on page navigation widget.

The Icons are used in this tutorial is Designed by David Lanham – Amora Icons, You can use you own icons.

HOW TO REPLACE NEWER, OLDER & HOME NAVIGATION LINKS WITH IMAGE BUTTONS?

Important!!! Back Up your Template before Making any changes in Template.

1. Go to Blogger Dashboard -> Design tab -> Edit HTML tab
2. Click on 
    Expand Template Widgets checkbox

REPLACING THE OLDER LINK

Search for <data:olderPageTitle/> and replace with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4XP_SixRVUv18bbw4bcc_8Iu96rbaiDVHJrzget7_EF9OFjuMDVWmuSrJZIf0OBmEN67S-LzXidzzfu32OXUcJkvytZ5QYaW6HxQyEZCPn9mmeFgXzGMwjkiCa_GsWcNsnqRNOa5uHOyt/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/>

REPLACING THE NEWER LINK

Search for <data:newerPageTitle/> tag and replace with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiya5clAd91pzfM7SVxSokXROLZkCFeIDpVa3YIun_TR7BBeYhy3Io0djkslFLYB4IQNZdJ6w7rY7pRkBEdhS9S-8guCUIHBf-dRyuCQIBdUBpLL2ooDhgz4E8KOP5jJpquyE7qgFeNeRYE/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>

REPLACING THE HOME LINK

Search for <data:homeMsg/> tag and replace with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEistfvz4BRw4rZjk-n9kZ7cvDca-yIJ6xGrCKZFLiCQgsMEBA7qjnnv54ahkdI7SN6LQccqKQ1J-Jz5S7Z5mKWwPEykxxb-rtzs5F8iabuLFc-KA6gaxjmlvSjm_y8ORbHdAj-rHJgUYhKA/s1600/w2b_home.png' style='border: 0 none;vertical-align: middle;'/>

You can change your own icons by replacing the image Url in the above three codes.

Cara Mengubah Tampilan Kursor Blog

Secara default, tampilan cursor pada blog adalah berbentuk panah namun bagi anda yang merasa bosan dengan tampilan tersebut atau ingin memberi decak kagum bagi pengunjung. Anda bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang ke blog anda, tampilan kursornya akan berubah sesuai dengan icon yang anda gunakan. Agar lebih jelas anda bisa lihat disini.

Untuk mengubah tampilan kursor menjadi icon gambar, caranya sangat mudah. Berikut langkah-langkahnya:

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Cari kode </head>
3. Letakkan kode css berikut diatasnya

<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>

Keterangan:
Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin anda gunakan.

4. Setelah itu, simpan template anda. Selesai

Jika anda tidak memiliki icon kursor, coba kunjungi http://www.totallyfreecursors.com. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa anda pilih sesuai selera.

Cara Membuat Teks Mengikuti Arah Kursor

Kali ini akan kita bahas mengenai cara membuat teks mengikuti arah kursor, menanggapi sebuah komentar dari salah seorang teman di blog ini, berikut cuplikannya


Tanpa basa basi lagi, Karena saya lagi GALAU.. :D



1. Login akun Blogger
2. Masuk menu Rancangan
3. Pilih Eleman Laman kemudian tambahkan gadget
4. Pilih HTML/JavaScript
5. Masukkan kode script di bawah ini

<style type="text/css">
    /* Circle Text Styles */
    #outerCircleText {
    /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
    font-style: italic;
    font-weight: bold;
    font-family: 'comic sans ms';
    color: #000000;
    /* End Optional */


    /* Start Required - Do Not Edit */
    position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
    #outerCircleText div {position: relative;}
    #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
    /* End Required */
    /* End Circle Text Styles */
    </style>


    <script type="text/javascript">
    /* Circling text trail- Tim Tilton
    Website: http://www.tempermedia.com/
    Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
    Modified Here for more flexibility and modern browser support
    Modifications as first seen in http://www.dynamicdrive.com/forums/
    username:jscheuer1 - This notice must remain for legal use
    */


    ;(function(){


    // Your message here (QUOTED STRING)
    var msg = "Tutorial Blog";


    /* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */


    // Set font's style size for calculating dimensions
    // Set to number of desired pixels font size (decimal and negative numbers not allowed)
    var size = 24;


    // Set both to 1 for plain circle, set one of them to 2 for oval
    // Other numbers & decimals can have interesting effects, keep these low (0 to 3)
    var circleY = 0.75; var circleX = 2;


    // The larger this divisor, the smaller the spaces between letters
    // (decimals allowed, not negative numbers)
    var letter_spacing = 5;


    // The larger this multiplier, the bigger the circle/oval
    // (decimals allowed, not negative numbers, some rounding is applied)
    var diameter = 10;


    // Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
    var rotation = 0.4;


    // This is not the rotation speed, its the reaction speed, keep low!
    // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
    var speed = 0.3;


    ////////////////////// Stop Editing //////////////////////


    if (!window.addEventListener && !window.attachEvent || !document.createElement) return;


    msg = msg.split('');
    var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
    ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
    o = document.createElement('div'), oi = document.createElement('div'),
    b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,


    mouse = function(e){
    e = e || window.event;
    ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
    xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
    },


    makecircle = function(){ // rotation/positioning
    if(init.nopy){
    o.style.top = (b || document.body).scrollTop + 'px';
    o.style.left = (b || document.body).scrollLeft + 'px';
    };
    currStep -= rotation;
    for (var d, i = n; i > -1; --i){ // makes the circle
    d = document.getElementById('iemsg' + i).style;
    d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
    d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
    };
    },


    drag = function(){ // makes the resistance
    y[0] = Y[0] += (ymouse - Y[0]) * speed;
    x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
    for (var i = n; i > 0; --i){
    y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
    x[i] = X[i] += (x[i-1] - X[i]) * speed;
    };
    makecircle();
    },


    init = function(){ // appends message divs, & sets initial values for positioning arrays
    if(!isNaN(window.pageYOffset)){
    ymouse += window.pageYOffset;
    xmouse += window.pageXOffset;
    } else init.nopy = true;
    for (var d, i = n; i > -1; --i){
    d = document.createElement('div'); d.id = 'iemsg' + i;
    d.style.height = d.style.width = a + 'px';
    d.appendChild(document.createTextNode(msg[i]));
    oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
    };
    o.appendChild(oi); document.body.appendChild(o);
    setInterval(drag, 25);
    },


    ascroll = function(){
    ymouse += window.pageYOffset;
    xmouse += window.pageXOffset;
    window.removeEventListener('scroll', ascroll, false);
    };


    o.id = 'outerCircleText'; o.style.fontSize = size + 'px';


    if (window.addEventListener){
    window.addEventListener('load', init, false);
    document.addEventListener('mouseover', mouse, false);
    document.addEventListener('mousemove', mouse, false);
    if (/Apple/.test(navigator.vendor))
    window.addEventListener('scroll', ascroll, false);
    }
    else if (window.attachEvent){
    window.attachEvent('onload', init);
    document.attachEvent('onmousemove', mouse);
    };


    })();
    </script>

6. Simpan

Membuat Sub-Menu Link Blogspot

Membuat sub-menu link blogspot atau yang di sebut sebagai menu navigasi blogspot contohnya seperti yang terlihat pada di bawah ini pada bagian atas yang bertuliskan

HOME | WEBHOSTING | TEMPLATE PREMIUM | PPC


Gak ada screenshot lagi mahal membuat menu navigasi blogspot,membuat sub-menu link blogspot

Gak usah panjang lebar kita langsung ke permasalahan utama.

  [x] Login ke dashboard blogspot
  [x] Pilih Rancangan »» Edit HTML
  [x] Tempatkan kode CSS berikut diatas kode ]]></b:skin>

 #sub-menu {background:#0000AA; font-size:13px; font-family:verdana,sans-serif; color:#ffffff; overflow:hidden; padding:8px; border:1px solid #BB0000;} #sub-menu a:link {color:#fff;} #sub-menu a:visited {color:#fff;} #sub-menu a:hover {color:#BB0000; text-decoration:none;} #sub-menu ul {margin:0px; padding:0px; text-align:center;} #sub-menu li {display:inline; list-style-type:none; margin:0px; padding:0px;} #sub-menu ul li a, #sub-menu ul li a:hover {font-size:13px; color:#fff; margin:0px; padding:px; text-decoration:none; text-transform:uppercase;} #sub-menu ul li a:hover {color:#BB0000; text-decoration:none;}

[x] Kemudian tempatkan kode HTML berikut diatas kode <div id='content-wrapper'> atau biasanya bertuliskan <div id='wrapper-content'>

        <div id='sub-menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'/>HOME</li>
<li class='page_item page-item-2'>
<a href='http://www.wanted-link.blogspot.com/2010/11/membuat-cursor-menjadi-berbintang.html'>LINK 1</a></li>
<li class='page_item page-item-2'>
<a href='http://www.wanted-link.blogspot.com/2010/11/cara-membuat-breadcrumbs-navigasi.html'>LINK 2</a></li>
<li class='page_item page-item-2'>
<a href='http://www.wanted-link.blogspot.com/2010/11/cara-membuat-textarea.html'>LINK 2</a></li>
<li class='page_item page-item-2'>
<a href='http://www.wanted-link.blogspot.com/2011/01/memodifikasi-bentuk-link-blogger.html'>LINK 2</a></li>
</ul>
</div>

   [x] Terakhir simpan tempalate dan lihat hasilnya

Dari kode diatas akan terlihat seperti tampilan pada wanted-link ini, silahkan sesuaikan kode warna sesuai kehendak kamu pada kode CSS-nya dan Ganti tulisan yang berwarna HITAM sesuai kehendak kamu dan ganti alamat blog dengan alamat kamu. Biasanya link yang di pasang pada sub-menu berisi link kategori atau link label. Tapi semuanya terserah kamu mau di beri link apa.

Jika ada yang kurang paham bisa di tanyakan pada kotak komentar :D

Semoga Bermanfaat