Cara Membuat Menu Navigasi "Horizontal" + Kotak Penelusuran Melayang Di Atas Blog

Sebenarnya Cara Membuat Menu Navigasi "Horizontal" + Kotak Penelusuran Melayang Di Atas Blog ini tidak terlalu sulit, namun terkadang Menu Navigasi ini tidak sesuai dengan template yang kita gunakan, karena struktur templatenya yang berbeda.

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<style media='screen' type='text/css'>
/*----- TOP -----*/
#top {background:#000000; color:transparent; font-size:11px; line-height:30px; border-bottom:1px solid #00ff00;
opacity:.85;
filter:alpha(opacity=85);
-moz-opacity:.85;
position: fixed;
align: center;
top:0;left:0;
width:100%;
}
#top li a:hover{ background-color:#00ff00; color:#ff0000; }
/*----- TOP NAV -----*/
.topnav ul li{ margin:0;}
.topnav li { float:left; width:auto; }
.topnav li a { padding:6px 11px; font-size:11px; line-height:16px; border-right:1px solid #00ff00; text-decoration:none; }
/* search form */
#search { display:inline; float:right; height:14px; margin:3px 15px 0px 0px; }
#search input { float:left; background:#ff0000; width:160px; padding:2px 5px 3px 5px; font-family:Arial,serif; font-size:12px; font-style:italic; color:#ff0000; line-height:12px; border:1px solid #00ff00; }
#search input:focus { background:#00ff00; border:1px solid #00ff00; }
#search input.btn { background:none; border:none; margin:4px 0px 0px -23px; padding:0px; width:auto; }
</style>
<div id='top'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input class='field' id='s' name='q' type='text' value=''/>
<input class='submit btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNarXAXm9Ssxt_-J5rX1OqCSj7Sv4KxzD8CY3T7soL6kxQC5z8hRdUoOd-wOHll0UTtg6NAchVOncTqD9EwConYTw6N6IJfXc47534Z1NYM-Shs00575y97jzlG2udm7ExAEltSgxYIX4/w18-h14-no/Search.gif' type='image' value='Go'/>
</form>
</div><!--end #search -->
<div class='topnav'>
<ul class='topnav' id='page-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
</ul>           
</div>
<div class='clear'/>
</div>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-menu-navigasi-horizontal-kotak-penelusuran-melayang-di-atas-blog.html" target="_blank">Cara Membuat Menu Navigasi "Horizontal" + Kotak Penelusuran Melayang Di Atas Blog</a></small>

Keterangan :

• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
• Silahkan kamu ganti # dengan URL halaman yang kamu mau. (contoh : URL label, URL postingan, atau URL yang mengarah ke situs lain).
• Silahkan kamu ganti ? dengan nama menu yang kamu mau.

Catatan :

• Letakkan Cara Membuat Menu Navigasi "Horizontal" + Kotak Penelusuran Melayang Di Atas Blog ini di tempat yang sesuai : biasanya paling bawah di "Tata Letak" blog kamu.

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Cara Membuat Banner Iklan + Tombol Close Melayang Di Bawah Blog

Sobat blogger pasti ingin sekali blog sobat blogger ditawarkan pemasangan iklan pada blog sobat blogger. pemasangan iklan pada web/blog dapat mendatangkan keuntungan pada si pemilik blog. oleh karena itu sobat blogger semua mesti membuat blog yang bagus sehingga blog sobat menjadi ramai pengunjung.

Dengan ramainya pengunjung, Insya Allah akan menarik para pemasang iklan yang ingin memasang iklan di blog sobat blogger.
Saya sarankan agar sobat blogger menyediakan banner iklan melayang di blog sobat yang terletak di bawah blog sobat. kelebihan posisi ini adalah ketika halaman blog digulir, maka iklan tersebut terus mengikuti dan akan terus terlihat di halaman blog. sehingga para pemasang iklan tertarik untuk memasang iklan di blog sobat blogger.

Dengan kode script ini, iklan akan melayang di blog walaupun halaman di scroll ke atas ataupun ke bawah. Dan iklan dapat di Close untuk mempermudah pengunjung ketika ingin menutup iklan tersebut.

Catatan :

• Artikel yang saya posting di blog ini adalah : Menggunakan Banner Iklan "728 x 90 px".

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<script src='https://sites.google.com/site/tutorialblogeno/javascript/cara-membuat-banner-iklan-tombol-close-melayang-di-bawah-blog.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {
bottom: 0;
position: fixed;
width: 100%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 105px; z-index: 9999;'>
<div style='text-align: right; width: 728px; height: 15px;'>
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtkGdABt6F174Cg8Tdt6zF__0RTJIhhyuDf4fBbAz_1wnms7jjC5t16nEDwEA61xlrIR5UlyDxoM6OdpkoFGrUbd_GSeL08u-fKqPN5m9E3NFDDMdrrdea9yuGzuZwPnLaALot8XUX5gM/s1600/CLOSE.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>

<a href="http://tutorial-blog-eno.blogspot.com/p/pasang-iklan-di-sini.html" target="_blank" title="Pasang Iklan Di Sini"><img alt="Banner Iklan 728 x 90 px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicCsSO2oxiDvBzc3usoeEOsvi5CjPj3L6b8RqxWtM-ySJgyoxZIdjc8CUbxeaRInfAa2aiIuZ2IfWhhTyotkflqt2bhYX1WheHwWSvIp5MDEH5gQTcO6ojm7UQcZtsNvG-KNyf-av_vxU/s1600/Cara+Membuat+Banner+Iklan+++Tombol+Close+Melayang+Di+Bawah+Blog.gif" /></a>

</center></p>
</p>
</div>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-banner-iklan-tombol-close-melayang-di-bawah-blog.html" target="_blank">Cara Membuat Banner Iklan + Tombol Close Melayang Di Bawah Blog</a></small>

Keterangan :

• Warna orange adalah link kode "JavaScript" blog.
• Warna yellow adalah URL gambar Close, silahkan kamu ganti dengan selera yang kamu mau.
• Warna red adalah URL banner iklan, silahkan kamu ganti dengan selera yang kamu mau.
• Warna orange adalah judul banner iklan, silahkan kamu ganti dengan selera yang kamu mau.
• Warna lime adalah ALT gambar banner iklan, silahkan kamu ganti dengan selera yang kamu mau.
• Warna fuchsia adalah URL gambar banner iklan, silahkan kamu ganti dengan selera yang kamu mau.

5. Simpan Pengaturan.

...

» Bagi sobat blogger yang berminat ingin Memasang Iklan di blog ini : Klik Di Sini

...

Rekomendasi Untuk Kamu :

• Kumpulan Gambar Banner Iklan "728 x 90 px"
• Kumpulan Gambar Icon "Close"

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Cara Membuat Banner Iklan + Tombol Close Melayang Di Kiri Dan Kanan Blog

Sobat blogger pasti ingin sekali blog sobat blogger ditawarkan pemasangan iklan pada blog sobat blogger. pemasangan iklan pada web/blog dapat mendatangkan keuntungan pada si pemilik blog. oleh karena itu sobat blogger semua mesti membuat blog yang bagus sehingga blog sobat menjadi ramai pengunjung.

Dengan ramainya pengunjung, Insya Allah akan menarik para pemasang iklan yang ingin memasang iklan di blog sobat blogger.
Saya sarankan agar sobat blogger menyediakan banner iklan melayang di blog sobat yang terletak di kiri dan kanan blog sobat. kelebihan posisi ini adalah ketika halaman blog digulir, maka iklan tersebut terus mengikuti dan akan terus terlihat di halaman blog. sehingga para pemasang iklan tertarik untuk memasang iklan di blog sobat blogger.

Dengan kode script ini, iklan akan melayang di blog walaupun halaman di scroll ke atas ataupun ke bawah. Dan iklan dapat di Close untuk mempermudah pengunjung ketika ingin menutup iklan tersebut.

Catatan :

• Artikel yang saya posting di blog ini adalah : Menggunakan Banner Iklan "120 x 600 px".

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<script type='text/javascript'>
        $(document).ready(function() {
        $('img#closed').click(function(){
        $('#btm_banner').hide(90);
        });
        });
        </script>
        <script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
        </script><script type="text/javascript">
        if (window.jstiming) window.jstiming.load.tick('headEnd');
        </script>

        <!--start: floating ads-->
        <div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">
         <div><a id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaONZZAGAsT3bsgAXiw-a6asKl4MzZmorFYQe_SG3BRITBcvEclZFZ6CN6QBRkOE0R2fI8wBSj4NYvrDjqK0ytnjZutQMi2dLO3coGlxEjCYGEzV5jo1AoXNVPko6uS7zRW0DBr4b2oZw/s1600/CLOSE+3.png' alt='close' title='close button'/></center></a></div>

        <!--Mulai disini-->
    <a href="http://tutorial-blog-eno.blogspot.com/p/pasang-iklan-di-sini.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMCGS4YLsbX_gYaWF4OFvsqEKVHHdW7A8ZfP6cRaxRJHHzjjtlFctGhGEjeDstyp4Laj5xS5kTRU72otQ10oeMDJuxFZlKjUjC0u950RC7QegYvWhlJgPlRD7AsCnXv4pjYs63mg88iv0/s1600/Cara+Membuat+Banner+Iklan+++Tombol+Close+Melayang+Di+Kiri+Dan+Kanan+Blog.gif" border="0" alt="Banner Iklan 120 x 600 px" title="Pasang Iklan Di Sini" /></a>
<!--Akhir disini-->
        </div>
        <!--end: floating ads-->

        <!--start: floating ads-->
        <div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">
         <div><a id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaONZZAGAsT3bsgAXiw-a6asKl4MzZmorFYQe_SG3BRITBcvEclZFZ6CN6QBRkOE0R2fI8wBSj4NYvrDjqK0ytnjZutQMi2dLO3coGlxEjCYGEzV5jo1AoXNVPko6uS7zRW0DBr4b2oZw/s1600/CLOSE+3.png' alt='close' title='close button'/></center></a></div>

        <!--Mulai disini-->        
    <a href="http://tutorial-blog-eno.blogspot.com/p/pasang-iklan-di-sini.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMCGS4YLsbX_gYaWF4OFvsqEKVHHdW7A8ZfP6cRaxRJHHzjjtlFctGhGEjeDstyp4Laj5xS5kTRU72otQ10oeMDJuxFZlKjUjC0u950RC7QegYvWhlJgPlRD7AsCnXv4pjYs63mg88iv0/s1600/Cara+Membuat+Banner+Iklan+++Tombol+Close+Melayang+Di+Kiri+Dan+Kanan+Blog.gif" border="0" alt="Banner Iklan 120 x 600 px" title="Pasang Iklan Di Sini" /></a>
<!--Akhir disini-->
        </div>
        <!--end: floating ads-->
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-banner-iklan-tombol-close-melayang-di-kiri-dan-kanan-blog.html" target="_blank">Cara Membuat Banner Iklan + Tombol Close Melayang Di Kiri Dan Kanan Blog</a></small>

Keterangan :

• Warna blue adalah untuk semua Kode banner iklan melayang di sebelah Kiri.
• Warna aqua adalah untuk semua Kode banner iklan melayang di sebelah Kanan.

...

• Warna yellow adalah URL gambar Close, silahkan kamu ganti dengan selera yang kamu mau.
• Warna red adalah URL banner iklan, silahkan kamu ganti dengan selera yang kamu mau.
• Warna fuchsia adalah URL gambar banner iklan, silahkan kamu ganti dengan selera yang kamu mau
• Warna lime adalah ALT gambar banner iklan, silahkan kamu ganti dengan selera yang kamu mau.
• Warna orange adalah judul banner iklan, silahkan kamu ganti dengan selera yang kamu mau.

Catatan :

• Letakkan Cara Membuat Banner Iklan + Tombol Close Melayang Di Kiri Dan Kanan Blog di tempat yang sesuai : biasanya paling bawah di "Tata Letak" blog kamu.

5. Simpan Pengaturan.

...

» Bagi sobat blogger yang berminat ingin Memasang Iklan di blog ini : Klik Di Sini

...

Rekomendasi Untuk Kamu :

• Kumpulan Gambar Banner Iklan "120 x 600 px"
• Kumpulan Gambar Icon "Close"

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Cara Membuat Menu Navigasi "Horizontal" Di Blog

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<style>/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#000000;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#ff0000; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #00ff00; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#00ff00; color:#ff0000; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
</ul>                  
</div>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-menu-navigasi-horizontal-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>

Keterangan :

• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
• width:100%; adalah ukuran lebar, silahkan kamu ganti dengan selera yang kamu mau.
• height:35px; adalah ukuran tinggi, silahkan kamu ganti dengan selera yang kamu mau.
• Silahkan kamu ganti # dengan URL halaman yang kamu mau. (contoh : URL label, URL postingan, atau URL yang mengarah ke situs lain).
• Silahkan kamu ganti ? dengan nama menu yang kamu mau.

Catatan :

• Letakkan Cara Membuat Menu Navigasi "Horizontal" Di Blog ini di tempat yang sesuai : biasanya paling atas di "Tata Letak" blog kamu.

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████

Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Cara Membuat Widget Link Pada Teks Dan Gambar Berjalan Melayang Di Bawah Blog

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.

2. Klik Tambah Gadget.

3. Pilih Gadget HTML/Javascript.

4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<div id="DADrun" style="bottom: 0px; left: 0px; position: fixed; right: 0px;"><marquee behavior="left" scrollamount="7">
<a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-widget-link-pada-teks-dan-gambar-berjalan-melayang-di-bawah-blog.html" target="_blank"><span style="color: #00ff00; font-size: medium;">Jangan Lupa Like, Comment & Share Artikel Tutorial Blog Eno Ya, Agar Semakin Cepat Ter~UPDATE Oke. Terima Kasih.</span><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhostKJyxDTCD1rU2A4opB9sVXSXfucrsJZEZ5dqttYmoo6V8o4XJF2kfh5MOR-HYlCfbAm65jTicbg-X7nJAYBnICOzCt1gshlILTpLYP_XBKZuc20FkZrlGuJM49SBXC6rhWZ1DbrxUA/s1600/Cara+Membuat+Widget+Link+Pada+Teks+Dan+Gambar+Berjalan+Melayang+Di+Bawah+Blog.gif" style="cursor: pointer;" /></a></marquee></div>

Keterangan :

• marquee behavior ="left" adalah mengatur perilaku gerakan link teks & gambar, silahkan kamu ganti dengan selera yang kamu mau.
• left (Kiri), right (Kanan).
• slide (bergerak sekali lalu berhenti), scroll (bergerak bolak-balik), alternate (bergerak memantul-mantul).
• scrollamount="7" adalah kecepatan link teks & gambar (semakin tinggi nilainya semakin cepat gerakannya), silahkan kamu ganti dengan selera yang kamu mau.
• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
• front-size: medium; adalah ukuran link teks, silahkan kamu ganti dengan selera yang kamu mau.
• small (Kecil), medium (Sedang), large (Besar).
• Warna red adalah teks, silahkan kamu ganti dengan selera yang kamu mau.
• Warna fuchsia adalah URL gambar, silahkan kamu ganti dengan selera yang kamu mau.

Catatan :

• Letakkan Cara Membuat Widget Link Pada Teks Dan Gambar Berjalan Melayang Di Bawah Blog ini di tempat yang sesuai : biasanya paling bawah di "Tata Letak" blog kamu.

5. Simpan Pengaturan.

Rekomendasi Untuk Kamu :

• Kumpulan Gambar Animasi Bergerak
• Kumpulan Gambar Animasi Bergerak "Naruto"
• Kumpulan Gambar Animasi Bergerak Ragnarok "Job Class" 

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████

Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Cara Membuat Widget Popular Posts Warna-Warni Di Blog

Sebenarnya Cara Membuat Widget Popular Posts Warna-Warni Di Blog tidak sulit kok, kamu cukup pasang widget Entri Populer yang sudah disediakan oleh blogger (setting sedikit), kemudian tambahkan kode widget atau kode CSS pada template blog kamu.

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget Entri Populer.

Cara Setting Widget Entri Populer :

• Pada bagian Paling banyak dikunjungi, silahkan kamu tentukan sendiri apakah ingin menampilkan artikel populer Setiap saat, 30 hari terakhir, atau 7 hari terakhir.
• Pada bagian Tampilkan judul entri dan, ada bagian thumbnail gambar, cuplikan, serta Tampilan hingga [...] entri.
• nah pada bagian Tampilan hingga [...] entri, silahkan kamu tentukan sendiri berapa Entri Populer yang mau kamu ditampilkan. sedangkan pada thumbnail gambar dan cuplikan = Jangan Diberi Centang.
• Setelah itu silahkan Simpan.

Lanjut...

» Di sini saya akan menuliskan 2 Versi, kamu tinggal pilih Versi yang mana yang kamu inginkan.

Versi Pertama Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).
5. Simpan Pengaturan.

Versi Kedua Melalui Edit HTML :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

Ingat : Sebelum kamu mengedit HTML, sebaiknya BACKUP dulu template blog kamu.

1. Klik Template.

2. Klik Edit HTML.

3. Klik Di Dalam Kotak Template Kamu.

4. Cari Kode (agar lebih mudah mencari kode di kotak template kamu, gunakan tombol ctrl+f  » jika berhasil maka akan terlihat Di Dalam Kotak Template Kamu).

» Cari kode : ]]></b:skin>
» Setelah kode tersebut sudah ditemukan, silahkan pasang kode di bawah ini tepat di atasnya.

5. Sebelum Kamu Klik Simpan Template, sebaiknya kamu klik Pratinjau Template terlebih dahulu untuk memeriksanya.
6. Jika Sudah Oke » Klik Simpan Template.

█████████████████████████████████████████████████████████████████

Ini Dia "Kode" Tersebut :

<style type='text/css'>
/*----- WIDGET POPULAR POSTS WARNA-WARNI -----*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px;  margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#df01d7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#b041ff;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#f52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
</style>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-widget-popular-posts-warna-warni-di-blog.html" target="_blank">Cara Membuat Widget Popular Posts Warna-Warni Di Blog</a></small>

Keterangan :

• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini

Catatan :

• Sebelum kamu menggunakan Cara Membuat Widget Popular Posts Warna-Warni Di Blog ini, entri/artikel kamu harus sudah ada yang "Populer".
• Jika entri/artikel kamu tidak ada yang "Populer" maka Cara Membuat Widget Popular Posts Warna-Warni Di Blog ini tidak bisa digunakan alias Tidak Ada Efeknya.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████

Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Cara Membuat Widget Teks Animasi Tulisan Berwarna Di Blog

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<div style="-moz-box-shadow: inset 0 1px 5px 0 #fff; background: #990099; border: 1px solid #00ff00; box-shadow: inset 0 1px 5px 0 #555; font-family: Cataneo BT; font-size: 21px; font-weight: bolder; padding: 5px 20px; text-align: center;">
<script type="text/javascript">
var message="Selamat Datang Di Tutorial Blog Eno"
var bgsGR1color="#ffffff" /* Warna teks utama */
var bgsGR2color="#ffff00" /* Warna teks flash pertama */
var bgsGR3color="#00ff66" /* Warna teks flash kedua */
var flashspeed=100 // kec. ganti warna (1/1000 dt)
var flashingletters=15 // jumlah teks pertama (tips / hiting jumlah text, kemudian bagi 2)
var flashingletters2=18 // jumlah berwarna teks ke dua (tips / hiting jumlah text, kemudian bagi 2)
var flashpause=1 // waktu jeda pergantian warna (1/1000 dtk)
var n=0
if (document.all||document.getElementById){document.write('<font color="'+bgsGR1color+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')}else
document.write(message)
function crossref(number){var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj}function neon(){if (n==0){for (m=0;m<message.length;m++)
crossref(m).style.color=bgsGR1color}
crossref(n).style.color=bgsGR2color
if (n>flashingletters-1) crossref(n-flashingletters).style.color=bgsGR3color
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=bgsGR1color
if (n<message.length-1)
n++
else{n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return}}
function beginneon(){if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)}
beginneon()
</script>
</div>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-widget-teks-animasi-tulisan-berwarna-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>

Keterangan :

• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
• Warna red adalah teks, silahkan kamu ganti dengan selera yang kamu mau.

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Cara Membuat Widget Recent Posts Bergerak Di Blog

Widget Recent Posts atau posting terbaru merupakan wiget penting karena berfungsi sebagai penunjang navigasi blog. dengan adanya daftar posting terbaru, pengunjung yangg masuk tidak dari halaman utama (homepage) dapat langsung mengetahui beberapa posting terbaru dari sebuah blog. selain itu, widget recent posts dapat menjadi sebuah tawaran bagi pengunjung blog untuk mengetahui isi posting-posting lain dari blog tersebut.

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#3eb5da;
    border:solid 1px #00ff00;}
    #rp_plus_img a{color:#000000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #000000;width:55px;height:55px;}

</style>
<script src="https://sites.google.com/site/tutorialblogeno/javascript/cara-membuat-widget-recent-posts-bergerak-di-blog-bagian-1.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/tutorialblogeno/javascript/cara-membuat-widget-recent-posts-bergerak-di-blog-bagian-2.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });

</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;

</script>     <script src="http://tutorial-blog-eno.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-widget-recent-posts-bergerak-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>

Keterangan :

• {height:377px;}adalah ukuran tinggi, silahkan kamu ganti dengan selera yang kamu mau.
• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
• Warna orange adalah link kode "JavaScript" blog.
• var numposts = 5; adalah jumlah posting, silahkan kamu ganti dengan selera yang kamu mau.
• Silahkan kamu ganti http://tutorial-blog-eno.blogspot.com/ dengan URL blog kamu sendiri.

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Cara Membuat Widget Random Posts Di Blog

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<style>
.rp-post-link {
font-weight: bold !important;
font-size: 12px !important;
}
.rp-summary {
margin-bottom: 5px !important;
border-bottom: 1px dotted #00ff00;
font-size: 12px !important;
line-height: 20px !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:60px;height:60px;
}
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var lengthsummary = 80;
var numofpost=5;
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('<div>');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
break;
}
}
item += "<br"
item += "/>"

if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"
var summary = "";
if ("content" in entry) {
summary = entry.content.$t;
}
else if ("summary" in entry) {
summary = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
summary = summary.replace(re, "");
item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
document.write(item);
}
document.write('</div>');
}
</script>
<script src="http://tutorial-blog-eno.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-widget-random-posts-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>

Keterangan :

• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
• var lengthsummary = 80; adalah jumlah huruf yang akan ditampilkan pada deskripsi posting, silahkan kamu ganti dengan selera yang kamu mau.
• var numofpost=5; adalah jumlah posting, silahkan kamu ganti dengan selera yang kamu mau.
• Silahkan kamu ganti http://tutorial-blog-eno.blogspot.com/ dengan URL blog kamu sendiri.

Catatan :

• Jika blog kamu tidak ada artikel yang di publikasikan/kurang dari jumlah posting yang di tentukan untuk di publikasikan, kemudian kamu menggunakan Cara Membuat Widget Random Posts Di Blog ini, maka blog kamu akan "ERROR, Debug Script" (saat kamu/pengunjung blog melihat blog kamu).

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Kumpulan Gambar Animasi Bergerak Ragnarok "Job Class"

Artikel Ini Rekomendasi Dari :

• Cara Membuat Widget Gambar Animasi Bergerak Melayang Di Blog
• Cara Membuat Widget Gambar Animasi Bergerak Melayang Di Pojok Blog
• Cara Membuat Widget Link Pada Teks Dan Gambar Berjalan Melayang Di Bawah Blog

Lanjut...

Bagi Kamu Yang Belum Tahu Cara Menyimpan Gambar Atau Cara Copy URL Gambar, Ikutilah Cara Di Bawah Ini :

» Cara Menyimpan Gambar :
1. Klik "kanan" pada kursor » pilih Save Image As...
2. Dan kemudian pilih Lokasi Penyimpanan Gambar.

» Cara Copy URL Gambar :
1. Klik "kanan" pada kursor » pilih Copy Image URL (Google Chrome) atau Copy Link Location (Mozilla Firefox).
2. Dan kemudian, Paste-kan (ctrl+v) ke Artikel atau Browser kamu.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████

Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]