Cara Membuat Menu Floating Yang Keren Di Samping Blog - Selamat datang di blog Mr Ivanchan, sebelumnya mohon maaf baru bisa mempublikasikan tutorial selanjutnya kali ini karena saya sibuk dengan kegiatan kuliah. Dan kali ini Saya akan membagikan tutorial tentang Cara Membuat Menu Floating Yang Keren Di Samping Blog.

Menu Navigasi Floating merupakan menu pada blog yang dimodifikasi dengan muncul ketika diarahkan pointer pada menu tersebut sehingga akan menampilkan menu yang sudah anda atur sedemikian rupa.

Ditambah juga dengan efek floating yang memungkinkan menu tersebut dapat tampil dengan efek float atau mengambang dalam pengertian bahasa. Sehingga kalian juga dapat memanfaatkan daerah kosong pada template yang kalian gunakan apabila pada bagian kiri template kalian terdapat bagian yang kosong dapat kalian manfaatkan untuk dipasang menu berikut.

Berikut tutorial untuk Cara Membuat Menu Floating Yang Keren Di Samping Blog :

  • Pilih Edit HTML


  • Kemudian kita cari kode terlebih dahulu dengan cara tekan CTRL+F lalu ketik ]]></b:skin>
  • Setelah itu copy script di bawah ini, lalu paste tepat di atas kode ]]></b:skin>

 /* Menu Navigasi (Floating) Blog Mr Ivanchan */
.menu {text-shadow:none;position: fixed;height: 100%;width: 83px;background: #2c3e50;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0}
.menu:hover {width: 270px;}
.menuItem span {position: absolute;left:80px;top:40px;transition:color 1s;color:rgba(255,255,255,0);}
.menu:hover .menuItem  span {color:rgba(255,255,255,1);}
.menuItem {color:#fff;position: relative;padding: 40px;transition:border .5s, background .2s;}
.menuItem a {color:#fff;}
.menuItem:hover {background: #34495e;cursor: pointer;}
.satu {border-left:5px solid #16a085;}
.satu:hover{border-left:20px solid #16a085;}
.dua {border-left:5px solid #2980b9;}
.dua:hover {border-left:20px solid #2980b9;}
.tiga {border-left:5px solid #8e44ad;}
.tiga:hover {border-left:20px solid #8e44ad;}
.empat {border-left:5px solid #e67e22;}
.empat:hover {border-left:20px solid #e67e22;}
.lima {border-left:5px solid #e74c3c;}
.lima:hover {border-left:20px solid #e74c3c;}
.enam {border-left:5px solid #16a085;}
.enam:hover{border-left:20px solid #16a085;}

Seperti yang ada di bawah ini :


  • Selanjutnya cari kode </body> dengan cara CTRL+F, lalu copy script di bawah ini, lalu paste tepat di atas kode </body>

<div class='menu'>
<div class='menuItem satu'><i class='fa fa-home icon-large'/><span><a href='https://www.mrivanchan.tk/'>Home</a></span></div>
<div class='menuItem dua'><i class='fa fa-comments icon-large'/><span><a href='https://www.mrivanchan.tk/p/contact-us.html'>Contact Us</a></span></div>
<div class='menuItem tiga'><i class='fa fa-bug icon-large'/><span><a href='https://www.mrivanchan.tk/error404'>Bugs</a></span></div>
<div class='menuItem empat'><i class='fa fa-life-ring icon-large'/><span><a href='https://www.mrivanchan.tk/p/privacy-policy.html'>Privacy Policy</a></span></div>
<div class='menuItem lima'><i class='fa fa-exchange icon-large'/><span><a href='https://www.mrivanchan.tk/p/disclaimer.html'>Link Exchange</a></span></div>
<div class='menuItem enam'><i class='fa fa-bullhorn icon-large'/><span><a href='https://www.blogger.com/follow.g?blogID=337447232187138573'>Forum On Blog</a></span></div>
</div>

Keterangan :

#Kode warna Merah ganti dengan url Situs Blog / Website
#Kode warna Hijau ganti dengan url Contact Us
#Kode warna Biru ganti dengan url Bugs
#Kode warna Orange ganti dengan url Privacy Policy
#Kode warna Kuning ganti dengan url Link Exchange
#Kode warna Biru Muda ganti dengan url Forun On Blog

Seperti yang ada di bawah ini :


  • Setelah itu cari kode </head> dengan cara CTRL+F
  • Lalu copy script di bawah ini, setelah itu paste tepat di atas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Seperti yang ada di bawah ini :

Catatan :
Jika sudah terdapat script tersebut dalam blog Anda, maka tidak perlu ditambahkan!

  • Terakhir kita tinggal klik Simpan Tema
  • Hasilnya


Demikian tutorial yang kali ini dapat bagikan tentang Cara Membuat Menu Floating Yang Keren Di Samping Blog. Semoga bermanfaat bagi kalian semua. Bila ada terjadi kesalahan pada blog kalian atau tidak work di blog/website kalian silahkan untuk berkomentar di bawah artikel ini yang sudah disediakan atau bisa mengirim pesan lewat laman Contact Us. Mohon maaf bila ada kata - kata atau kalimat yang sulit dipahami bagi kalian semua. Terima kasih atas kunjungannya...
Regards,
Mr Ivanchan

Cara Membuat Menu Floating Yang Keren Di Samping Blog

Cara Membuat Kotak Banner Iklan 125x125 Di Blog - Selamat datang Sob di blog Saya yang sangat sederhana, kali akan bagikan sebuah tips singkat tentang Cara Membuat Kotak Banner Iklan 125x125 Di Blog. Tujuan adanya Banner Iklan untuk mempromosikan sebuah barang-barang, blog/website atau sebagai pengganti Iklan Adsense ketika blog Sobat ditolak secara terus-menerus, hehehe.... 

Menurut Saya dengan dipasangkan Banner Iklan sangat menguntungkan bagi para blogger. Space banner iklan adalah tempat / kotak / kolom iklan kosong dengan ukuran berbagai macam seperti 125x125, 728x90, 300x250 yang di pasang biasanya pada header, footer dan sidebar blog, wordpress, website yang bertujuan agar orang lain dapat menaruh / memasang iklan mereka pada situs web kita. 

Menampilkan atau menyediakan space iklan pada blog dapat menjadi peluang usaha untuk menghasilkan pundi pundi uang bagi para blogger, apalagi jika blog tersebut mempunyai traffic yang ramai dengan pengunjung yang sangat banyak maka tidak menutup kemungkinan dapat menarik banyak para advertiser untuk memasang iklannya di blog tersebut dengan harga yang dapat kita tentukan sendiri. Untuk memasangnya di blog sangat mudah dan cepat kita tinggal Copy Kodenya lalu pastekan di blog. Berikut Langkah-langkahnya :

  • Kita Masuk Akun Blogger.com
  • Lalu Kita klik Tata Letak > Tambahkan Gadget/Add Gadget



  • Kita pilih yang HTML/Javascript


  • Lalu Copy Kode di bawah ini

<style type='text/css'>
.kotak-iklan { background : #ddd; text-align : center; border-radius : 4px; padding : 12px 0; }
.kotak-iklan img { background : #ebf5f9; margin : auto; padding : 5px; text-align : center; width : 125px; height : 125px; }
.kotak-iklan img:hover { background : #fff; }
</style>

<div class="kotak-iklan">
<a href="http://www.mrivanchan.tk/p/contact-us.html" title="Pasang Iklan"><img alt="iklan banner" src="http://s19.postimg.org/jeo9s6nf7/banner_iklan_125x125.gif"/></a>
<a href="http://www.mrivanchan.tk/p/contact-us.html" title="Pasang Iklan"><img alt="iklan banner" src="http://s19.postimg.org/jeo9s6nf7/banner_iklan_125x125.gif"/></a>
<a href="http://www.mrivanchan.tk/p/contact-us.html" title="Pasang Iklan"><img alt="iklan banner" src="http://s19.postimg.org/jeo9s6nf7/banner_iklan_125x125.gif"/></a>
<a href="http://www.mrivanchan.tk/p/contact-us.html" title="Pasang Iklan"><img alt="iklan banner" src="http://s19.postimg.org/jeo9s6nf7/banner_iklan_125x125.gif"/></a></div>

Keterangan :

#Kode warna Merah ganti dengan url Situs / Alamat Iklan
#Kode warna Biru ganti dengan url Gambar Iklan

  • Terakhir Klik Simpan


Demikian Tips Singkat yang Saya bisa bagikan kali ini Tentang Cara Membuat Kotak Banner Iklan 125x125 Di Blog. Bila ada yang mau ditanyakan bisa berkomentar di kotak komentar dibawah postingan ini Ya, Jangan sungkan* untuk bertanya YA atau bisa menghubungi lewat Laman Contact Us. Mohon maaf ya sob bila ada kata-kata yang sulit dipahami Sobat. Terima Kasih untuk kunjungannya...
Regards,
Mr Ivanchan

Cara Membuat Kotak Banner Iklan 125x125 Di Blog

Cara Memasang Widget Like Box Facebook Melayang di Blogspot - Ok sobat selamat pagi, kali ini Saya akan bagikan Artikel selanjutnya tentang Tutorial Blog Cara Memasang Widget Like Box Facebook Melayang di Blogspot. Memang untuk membuat fanspage/halaman Facebook Melayang di Blog sangat mudah kita tinggal cari kode script di Internet lalu kita copy paste di blog kita. Sebelumnya saya juga bagikan artikel yang sama tentang Cara Membuat Like Box Fanspage Facebook Pop Up Melayang.

Menurut saya dua-duanya bagus. Hanya berbeda untuk yang versi sebelumnya Tampilannya hanya muncul sekali aja ketika kita baru saja masuk blognya. Untuk yang versi ini Tampilannya muncul berkali-kali / muncul setiap postingan, halaman blog. Cara ini saya peroleh dari blog Bos-Tutorial. 

Untuk Caranya kita simak berikut INI :

  • Syarat utama : Memiliki Sebuah Halaman Facebook. Bila belum ada, silahkan buat dulu.. Setelah anda memiliki sebuah halaman facebook, ikuti langkah selanjutnya.
  • Buka Akun Blog yang anda kelola.
  • Pada Dasbor Blog anda, masuklah ke Elemen Tata Letak, pilih Add Widget / Tambah Gadget



  • Lalu pilih HTML/Javascript


  • Selanjutnya copylah kode script di bawah ini ke dalam Widget/Gadget Baru yang anda buat.

<!-- FB Melayang Tombol Close Mr Ivanchan--!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
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:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fweb.facebook.com%2FMrIvanchann%2F&tabs&width=290&height=154&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="290" height="154" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://www.mrivanchan.tk/">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="cara-memasang-widget-like-box-facebook-melayang-di-blogspot">Get This Widget</a></p>
</div>

  • Simpan Widget/Gadget Baru yang anda buat tersebut. 
  • Lihat hasilnya.

Perlu diperhatikan :

- Tulisan berwarna Merah adalah Kode Script dari Halaman Facebook Mr Ivanchan. Silahkan anda ganti Kode Script tersebut dengan Kode Script dari Halaman Facebook Anda.
- Bila tidak berhasil, coba ulang dari awal.
- Mohon Halaman Facebook Mr Ivanchan di Like juga yah

Demikian Tutorial tentang Cara Memasang Widget Like Box Facebook Melayang di Blogspot. Mohon maaf bila ada kata-kata yang sulit dipahami sobat. Bila ada yang mau ditanyakan silahkan komentar dibawahnya atau hubungi lewat laman Contact Us. Terima Kasih untuk kunjungannya...
Regards,
Mr Ivanchan
Fanspage Facebook

Cara Memasang Widget Like Box Facebook Melayang di Blogspot

Cara Membuat Button Pesan Atau Chat Kami Di Blog Dengan Mudah - Ok kali ini saya akan bagikan tutorial selanjutnya. Kita pada kesempatan ini akan membahas Tutorial Bagaimana Cara Membuat Button Pesan Atau Chat Kami Di Blog Dengan Mudah. Untuk membuat Button Pesan Kami di Blog sangat mudah, kita tinggal mengisi form di Whatshelp.io kemudian kita copy kodenya lalu pastekan di blog anda.

Mungkin Button Pesan Kami ini tidak dibutuhkan pada website/blog yang berisikan tentang Games Android, Games PC dan Software. Button Pesan Kami mungkin hanya di pasangkan atau di tempatkan pada website/blog yang berisikan tentang penjualan online. Untuk Langkah - langkahnya sebagai berikut :

  • Kita buka alamat website Whatshelp.io
  • Kemudian kita scroll ke bawah, Lalu Kita isi Formnya



  • Setelah selesai mengisi Formnya Kita Klik Get Button Code
  • Kemudian Kita salin/copy kodenya


  • Lalu Kita Login Blogger.com
  • Setelah Login Kita menuju Tata Letak, Tambahkan Gadget/Add Gadget



  • Pilih HTML/Javascript


  • Lalu pastekan kodenya, kemudian Klik Simpan


Ok demikian Tutorial tentang Cara Membuat Button Pesan Atau Chat Kami Di Blog Dengan Mudah, semoga artikel ini bisa membantu dan bermanfaat. Bila ada kata-kata yang kurang berkenan atau apa Saya mohon maaf. Terima Kasih untuk kunjungannya, bila ada yang kurang paham atau tidak work di blog silahkan tinggalkan komentar di bawahnya atau hubungi lewat laman Contact Us....
Regards,
Mr Ivanchan

Cara Membuat Button Pesan Atau Chat Kami Di Blog Dengan Mudah

Cara Membuat Widget Random Post Paling Sederhana Untuk Blogger - Kali ini saya akan bagikan sedikit tips Cara Membuat Widget Random Post Paling Sederhana Untuk Blogger. Menurut saya Random Post ini keren walaupun dengan tampilan yang sangat sederhana ini.

Yuk mari kita simak Langkah-langkahnya :

  • Buka Blogger > Dashboard
  • Pilih Tata Letak > Pilih add gadget



  • Kemudian Pilih HTML / Javascript > Salin dan tambahkan kode berikut di kolom widget


<ul id="random-posts"></ul>
<style scoped="" type="text/css">
#random-posts{list-style:none;margin:0;padding:0}
#random-posts li{padding:0 0 5px 0;font-size:90%;margin:5px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#random-posts li a{color:#333}
</style>
<script type='text/javascript'>
//<![CDATA[
var homePage = "http://www.mrivanchan.tk",
numPosts = 8;
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<strong><li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></strong>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);
//]]>
</script>

Catatan :

Ganti Tulisan http://www.mrivanchan.tk dengan URL blog kalian.
Ganti angka 8 pada numPosts = 8; dengan jumlah artikel yang kalian inginkan.

  • Terakhir Simpan Widget.

Demikian artikel Widget Random Post Paling Sederhana Untuk Blogger, semoga dapat membantu....
Terima kasih atas kunjungannya....
Regards,
Mr Ivanchan

Cara Membuat Widget Random Post Paling Sederhana Untuk Blogger

Cara Membuat Widget Recent Post Berwarna Warni - Tutorial Blogger/blogspot kali ini tentang Cara Membuat Widget Recent Post Berwarna Warni. Sebetulnya hal ini juga dapat diterapkan pada widget lain seperti widget Popular Posts.

Bagi Anda yang ingin mengkreasi tampilan blog biar kelihatan fresh dan sedikit nor#k, silahkan tambahkan widget recent post bermodel warna-warni berikut ini.

Widget recent post yang dibuat ini adalah versi recent post yang sederhana, tidak menggunakan thumbnail dan meta post (seperti tanggal posting, author dll).

Langkah-langkah pembikinannya adalah sebagaimana berikut:

  • Login ke Blogger > Theme > Edit HTML
  • Tambahkan CSS berikut ini di atas kode </style> (yang pertama)

/* Recent Wrapper By Blog Mr Ivanchan */
#recent-wrapper{display:block;position:relative;overflow:hidden;font-size:15px}
#recent-wrapper ul{margin:0;padding:0;list-style-type:none;}
#recent-wrapper ul li{position:relative;padding:10px 35px 10px 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#recent-wrapper ul li:first-child {background:#E11E28;width:100%}
#recent-wrapper ul li:first-child:after{content:"01";}
#recent-wrapper ul li:first-child + li{background:#FD3C03;width:97%}
#recent-wrapper ul li:first-child + li:after{content:"02";}
#recent-wrapper ul li:first-child + li + li{background:#FECB09;width:94%}
#recent-wrapper ul li:first-child + li + li:after{content:"03";}
#recent-wrapper ul li:first-child + li + li + li{background:#6EBE27;width:91%;}
#recent-wrapper ul li:first-child + li + li + li:after{content:"04";}
#recent-wrapper ul li:first-child + li + li + li + li{background:#149A48;width:88%;}
#recent-wrapper ul li:first-child + li + li + li + li:after{content:"05";}
#recent-wrapper ul li:first-child + li + li + li + li +li{background:#15d3c3;width:85%}
#recent-wrapper ul li:first-child + li + li + li + li +li:after{content:"06";}
#recent-wrapper ul li:first-child + li + li + li + li + li +li{background:#288abb;width:82%}
#recent-wrapper ul li:first-child + li + li + li + li +li +li:after{content:"07";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li +li{background:#863e86;width:79%}
#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li{background:#71264b;width:76%}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li + li +li{background:#502234;width:73%}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}
#recent-wrapper ul li:first-child:after,
#recent-wrapper ul li:first-child + li:after,
#recent-wrapper ul li:first-child + li + li:after,
#recent-wrapper ul li:first-child + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li +li:after
{position:absolute;top:5px;right:5px;line-height:1em;text-align:center;color:rgba(0,0,0,0.2); font-size:23px !important; font-weight:700}
#recent-wrapper ul li a{color:white;text-decoration:none}

  • Simpan Template

Selanjutnya ialah, klik Tata Letak atau Layout di dashboard Blogger. Lalu tambahkan JavaScript recent post berikut ini pada Sidebar blog.

  • Add a Gadget > HTML/JavaScript, lalu copy-paste kode ini ke dalam bidang tersebut:

<div id='recent-wrapper' class='recent-wrapper'>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
numPosts = 10;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>
</div>

  • Simpan
Itulah tutorial untuk kali ini bila ada yang kurang dari saya , mohon maaf....
Semoga artikel ini bisa membantu sobat dan bermanfaat....
Regards,
Mr Ivanchan

Cara Membuat Widget Recent Post Berwarna Warni

Cara Membuat Tabel di Blog dengan Mudah & Responsive - Kali ini saya akan bagikan sedikit tips bagi anda tentang Cara Membuat Tabel di Blog dengan Mudah & Responsive. Membuat Table di Blog mungkin menurut saya sangat dibutuhkan bagi Blogger yang bertemakan Template Blog. Untuk membuat keterangan dari sebuah artikel di blog, terkadang kita membutuhkan tabel. Tabel tersebut biasanya di gunakan untuk membuat keterangan suatu artikel, agar tabel tersebut bisa memperjelas maksud artikel tersebut.

Cara ini Saya dapatkan dari Blognya TUTORIALUMUM, menurut saya di blognya Tutorial Umum isinya sangat lengkap apalagi tentang Tutorial Blogger. Fungsi Tabel keterangan ini biasanya memudahkan pengunjung blog anda agar bisa melihat fitur-fitur apa saja yang terdapat pada postingan kita, ada beberapa contoh yang digunakan orang dalam membuat sebuat tabel keterangan ini : Cara Membuat Responsive Table di Blogger dan keterangannya dan banyak lagi lainnya.

OKE kita Langsung saja ke Tahap Caranya :

Cara Menambahkan Skrip Kode CSS Tabel
  • Langkah pertama masuk ke akun Blogger kalian.
  • Pilih menu Tema, kemudian pilih Edit HTML.
  • Cari skrip kode </style> atau ]]></b:skin>, kemudian masukan skrip kode ini tepat di atasnya.

/* Tabel MR IVANCHAN */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3 !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}

  • Lalu pilih Simpan tema.

Cara Memasang Tabel di Artikel Blog
  • Langkah pertama pilih menu POS, kemudian pilih Entri baru.
  • Jika kalian ingin memasukan tabelnya tepat di tengah artikel, copy kalimat terakhir di dalam paragraf tersebut.


  • Kemudian masuk ke tab HTML.


  • Tekan CTRL + F kemudian cari kalimat yang sudah di copy tadi di tab HTML.


  • Setelah kalimat tadi di temukan, cari kode </div>, kemudian beri jarak pada paragraf sesudahnya seperti ini.


  • Kemudian masukan skrip kode ini tepat di tengah-tengah jarak antar paragraf tadi.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Judul Tabel 1</th> <th>Judul Tabel 2</th> </tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
<tr><td>keterangan tabel 1</td><td>keterangan tabel 2</td></tr>
</tbody></table>

  • Ganti tulisannya sesuai keinginan kalian.

Demikian tutorial dari saya tentang Cara Membuat Tabel di Blog dengan Mudah & Responsive. Bila ada kata-kata yang kurang berkenaan saya mohon maaf. Untuk mendapatkan Tutorial-Tutorial lainnya bisa anda subscribe feedburner saya via Email. Terima kasih sudah berkunjung di blog saya ini, jika ada pertanyaan mengenai cara membuat tabel ini, silahkan masukan di kolom komentar atau lewat Laman Contact Us.
Regards,
Mr Ivanchan

Cara Membuat Tabel di Blog dengan Mudah & Responsive

Cara Membuat Widget Subscribe di Blogspot - Sobat sudah punya banyak reader atau pembaca rutin ? Jika demikian, ada baiknya sobat buat widget khusus untuk pembaca setia dan calon pembaca agar lebih mudah mengakses konten blog terbaru milik sobat.

Sebenarnya dari blogger sudah menyediakan widget ini, namun tampaknya versi defaultnya kurang begitu menarik. Maka kali ini, saya akan bagikan kode script bagi sobat blogging semua untuk membuat widget subscribe yang lumayan bagus dan bisa diubah-ubah isinya sesuai kebutuhan. Berikut tahap-tahap tutorialnya....

  • Buka Browser > Website blogger.com
  • Login > Pilih blog yang akan di pakai *bagi anda yang memiliki blog lebih dari satu dalam satu Gmail
  • Pergi ke Layout/Tata Letak


  • Pilih Tambahkan Gadget > HTML/Java Script



  • Copy Paste kan kode dibawah ini didalam kotak HTML/Java Script

<style type='text/css'>
#subscribe-box {width: 300px;height: auto;border-radius: 2px;background-color: #E0E0DF;box-shadow: 0px 3px 0px 0px #7f8c8d;padding-bottom:10px}
#subscribe-box .title {padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: #95A5A6;text-align: center;background: #F1F1F1;text-transform:uppercase;border-radius:2px 2px 0 0;}
#subscribe-box p {font-family: 'Droid Serif';font-size: 13px;color:#555;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;}
#subscribe-box .emailfield {padding: 0px 20px 10px;}
#subscribe-box .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 15px;font-family: 'Droid Serif';width: 92%;border:0;border-radius: 2px;box-shadow: 0px 3px 0px 0px #bbb;}
#subscribe-box .emailfield input:focus {outline: none;}
#subscribe-box .emailfield .submitbutton {background: #008287;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;box-shadow: 0px 3px 0px 0px #00686C}
#subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;box-shadow: 0px 1px 0px 0px #3293ba;}
#subscribe-box .emailfield .submitbutton:hover{background: #00686C;}
</style>
<div id='subscribe-box'>
              <div class='title'>
               Belajar BLOG Mr Ivanchan
              </div>
<p>
Bagi sahabat yang ingin mendapat informasi terkini terkait cara membuat blog, silakan isi form berikut.....</p>
<div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blognyamrivanchan', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' value='Your Name'/>
               <input type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input name='uri' type='hidden' value='tutorialngeblogging'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Subscribe Now'/>
              </form>
</div>
</div>

Catatan :

Untuk yang warna Merah ganti Tulisan sesuai keinginan anda
Untuk yang warna Biru ganti dengan URL Feedburner sobat

  • Selesai

OK itu dulu yang saya share kali ini bila ada yang kurang kata-katanya saya mohon maaf. Semoga artikel ini dapat membantu dan bermanfaat....
Regards,
Mr Ivanchan

Cara Membuat Widget Subscribe di Blogspot

Cara Membuat Header Blog Bergerak Ketika Disentuh Kursor - Maksud header bergerak disini adalah, ketika kursor menyentuh apapun pada bagian header, baik teks judul dan deskripsi blog, maupun gambar yang terdapat pada header, maka mereka akan bergerak dengan pola tertentu.

Contohnya seperti yang di Blog Mr Ivanchan

Sekarang coba dekatkan kursor mouse anda beberapa waktu pada Logo Header nya Mr Ivanchan. Setelah itu lihat apa yang terjadi:

Nah sekarang bagaimana cara membuatnya?

  • Seperti biasa silahkan login dulu ke halaman dasbor Blogger anda. Setelah dasbor blog anda terbuka, lihat pada menu-menu yang terdapat di sebelah kiri. Tampilannya seperti ini:


  • Sekarang kliklah pada menu Tema, sehingga terbuka tampilan seperti gambar di bawah ini:


  • Nah seperti gambar diatas kliklah pada tombol Edit HTML, sehingga terbuka form edit HTML template anda seperti ini:


  • Nah disinilah semua script atau kode yang membentuk template anda tersimpan, termasuk kode untuk mengatur tampilan header blog anda. Sekarang carilah kode </style>
  • Setelah anda temukan, tepat diatasnya sisipkan kode ini:

#header:hover {
-webkit-transition-duration: 3s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
  }



KETERANGAN:

Angka 3s adalah berapa kecepatan gerakannya
Angka (360deg), adalah berapa jauh sudut perputaran gerakannya
Karena itu anda bisa gonta ganti kedua jenis angka tersebut sesuai keinginan anda
Tapi agar gerakannya tidak norak, rekomendasi saya gunakan 3s dan (20deg)

  • Setelah selesai melakukannya, jangan lupa Simpan Tema anda seperti gambar di bawah ini.
  • Lalu tunggu sampai prosesnya selesai. Setelah itu baru lihat perubahannya, apakah saat kursor menyentuh header blog anda, dia sudah bergerak atau belum....

Ok untuk Postingan Kali ini cukup sampai disini dulu....
Bila ada yang kurang dari kata-kata saya mohon maaf,
Terima Kasih atas kunjungannya.....
Regards,
Mr Ivanchan

Cara Membuat Header Blog Bergerak Ketika Disentuh Kursor

Cara Memasang Widget JNE, TIKI & Pos Indonesia Untuk Cek Resi - Bagi kalian yang memiliki website toko online pasti membutuhkan widget yang satu ini. Baik kalian yang punya situs atau online shop pasti membutuhkan widget ini jika anda sedang berbelanja online. Untuk mengecek pesanan data pesanan kita. Mengetahui apakah pesanan kita sudah dikirim,tiba dikota B,dalam keadaan apa,dan lain sebagainya.

Setelah belanja online anda pasti akan diberikan nomer resi atau tracking kode untuk melacak pesanan kita. No. resi ini sangat penting agar kita bisa mengetahui keadaan paket pesanan kita di jasa ekspedisi yang digunakan. Anda bisa memasang widget ini disidebar/footer atau bisa dilaman. Dengan memasang widget ini maka kita tidak perlu harus mengakses situs ekspedisinya,hanya perlu memasukkan no. resi kita.

Dengan kemudahan tersebut tentu sangat disukai buyer toko online kita. Bagaimana tertarik untuk memasang widget ini. Anda bisa memasang widget ini disidebar atau footer atau juga bisa dilaman. Untuk pemasangan dilaman anda harus meletakkan kode css-nya ditemplate terlebih dahulu. Berikut caranya.

Cara Memasang Widget JNE,TIKI,dan Pos Indonesia

#Untuk Widget Di Sidebar/Footer

  • Silakan buka blogger, pilih Tata Letak → Tambahkan Gadget → HTML/JavaScript
  • Salin kode widget dibawah ini dan tambahkan diwidget baru yang dibuat. Lalu klik Simpan.

<style scoped="scoped" type="text/css">
#kode-lacak{padding:10px;text-align:left;font-size:85%}
#kode-lacak form{display:block;position:relative;clear:both;overflow:hidden;margin:auto;text-align:center}
#kode-lacak .cek-jne,#kode-lacak .cek-tiki,#kode-lacak .cek-pos{text-align:left;display:inline-block;vertical-align:top;padding:2px 8px;height:33px;line-height:19px;color:#626262;background:#fff;outline:none;margin:10px 0;border:1px solid #e3e3e3;border-radius:2px;width:70%;float:left}
#kode-lacak .cek-jne-button,#kode-lacak .cek-tiki-button,#kode-lacak .cek-pos-button{display:inline-block;vertical-align:middle;height:33px;line-height:1;padding:0 18px;font-size:13px;color:#243140;text-align:center;text-shadow:0 1px rgba(255,255,255,.2);background:#e5e7ed;border:0;border-radius:2px;cursor:pointer;width:27%;outline:none;margin:10px 0 0 5px;transition:background .6s;}
#kode-lacak .cek-jne-button:hover,#kode-lacak .cek-jne-button:active,#kode-lacak .cek-tiki-button:hover,#kode-lacak .cek-tiki-button:active,#kode-lacak .cek-pos-button:hover,#kode-lacak .cek-pos-button:active{background:#ee4f3d;color:#fff}
</style>
<div id="kode-lacak">
Lacak resi <b>JNE</b><br />
<form action="http://www.jne.co.id/index.php" method="get" name="input" target="_new2">
<input name="mib" value="tracking.detail" type="hidden" />
<input name="awb" size="14" class="cek-jne" type="text" />
<input value="Cek" class="cek-jne-button" type="submit" /></form>
Lacak resi <b>TIKI</b><br />
<form method="post" action="http://www.tiki-online.com/tracking/track_single" name="input" target="_blank"><input id="TxtCon" name="TxtCon" size="14" class="cek-tiki" type="text" />
<input id="button" name="button" value="Cek" class="cek-tiki-button" type="submit" /></form>
Lacak resi <b>POS Indonesia</b>
<form method="get" action="http://www.posindonesia.co.id/home/modules/mod_search/tmpl/libs/lacakk1121m4np05.php" name="input" target="_blank"><input name="barcode" size="14" class="cek-pos" type="text" />
<input value="Cek" class="cek-pos-button" type="submit" /></form>
</div>

#Untuk Widget Di Laman

  • Silakan buka blogger,pilih Tempate Edit HTML. Salin kode dibawah ini dan letakkan diatas kode </head>

<style scoped="scoped" type="text/css">
#kode-lacak{padding:10px;text-align:left;font-size:85%}
#kode-lacak form{display:block;position:relative;clear:both;overflow:hidden;margin:auto;text-align:center}
#kode-lacak .cek-jne,#kode-lacak .cek-tiki,#kode-lacak .cek-pos{text-align:left;display:inline-block;vertical-align:top;padding:2px 8px;height:33px;line-height:19px;color:#626262;background:#fff;outline:none;margin:10px 0;border:1px solid #e3e3e3;border-radius:2px;width:70%;float:left}
#kode-lacak .cek-jne-button,#kode-lacak .cek-tiki-button,#kode-lacak .cek-pos-button{display:inline-block;vertical-align:middle;height:33px;line-height:1;padding:0 18px;font-size:13px;color:#243140;text-align:center;text-shadow:0 1px rgba(255,255,255,.2);background:#e5e7ed;border:0;border-radius:2px;cursor:pointer;width:27%;outline:none;margin:10px 0 0 5px;transition:background .6s;}
#kode-lacak .cek-jne-button:hover,#kode-lacak .cek-jne-button:active,#kode-lacak .cek-tiki-button:hover,#kode-lacak .cek-tiki-button:active,#kode-lacak .cek-pos-button:hover,#kode-lacak .cek-pos-button:active{background:#347ec9;color:#fff}
</style>

Simpan template.
  • Buat Laman baru,ubah mode penulisan dari Compose menjadi HTML. Salin kode dibawah ini dan masukkan dilaman baru yang anda buat.

<div id="kode-lacak">
Lacak resi <b>JNE</b><br />
<form action="http://www.jne.co.id/index.php" method="get" name="input" target="_new2">
<input name="mib" value="tracking.detail" type="hidden" />
<input name="awb" size="14" class="cek-jne" type="text" />
<input value="Cek" class="cek-jne-button" type="submit" /></form>
Lacak resi <b>TIKI</b><br />
<form method="post" action="http://www.tiki-online.com/tracking/track_single" name="input" target="_blank"><input id="TxtCon" name="TxtCon" size="14" class="cek-tiki" type="text" />
<input id="button" name="button" value="Cek" class="cek-tiki-button" type="submit" /></form>
Lacak resi <b>POS Indonesia</b>
<form method="get" action="http://www.posindonesia.co.id/home/modules/mod_search/tmpl/libs/lacakk1121m4np05.php" name="input" target="_blank"><input name="barcode" size="14" class="cek-pos" type="text" />
<input value="Cek" class="cek-pos-button" type="submit" /></form>
</div>

Jika sudah bisa langsung dipublikasikan. Cukup sekian tutorial yang bisa saya bagikan semoga bisa membantu dan bermanfaat......
Regards,
Mr Ivanchan
Fanspage Facebook

Cara Memasang Widget JNE, TIKI & Pos Indonesia Untuk Cek Resi

Cara Membuat Efek Tulisan Berjalan di Dalam Postingan Blog - Ingin menampilkan sesuatu yang keren didalam postingan blog. Sesuatu yang bisa menarik perhatian pengunjung. Salah satu caranya adalah dengan Membuat Text berjalan/bergerak. Tentu dengan adanya text berjalan akan membuat pengunjung memperhatikan isi text tersebut. Anda bisa mengisi kata-kata penting bisa berupa perintah,anjuran,sapaan,ajakan,dsb.

Efek tulisan ini yaitu berupa efek ketika. Text akan muncul seperti diketik secara langsung. Diketik dan muncul dari kiri ke kanan. Anda bisa menambahkan kata sebanyak yang anda inginkan. Agar pengunjung lebih bisa melihat silakan anda letakkan ditempat yang mudah dilihat pengunjung. Anda bisa meletakkannya didalam postingan,disidebar/di header.

Di sini saya akan menuliskan tutorial bagaimana Cara Membuat Efek Tulisan Berjalan di Dalam Postingan BlogWalaupun demikian, sebenarnya kode <marquee> tidak hanya dapat digunakan pada blogger saja ya.

Anggap saja tutorial yang saya tuliskan ini sebagai gambaran jika ingin menggunakannya di platform lain.

Oke, mari kita mulai....

Membuat Tulisan Berjalan Di Posting / Laman Blogger

Berikut langkah - langkah yang harus dilakukan :

  • Masuk ke dasbor blogger.
  • Buat posting / laman baru.
  • Tulis isi seperti biasanya sampai selesai.
  • Ganti mode penulisan dari Compose menjadi HTML (gambar ada di bawah).
  • Pasang kode html tulisan berjalan pada posisi yang sobat mau.
  • Untuk meyakinkan apakah tulisan sudah berjalan sesuai keinginan silakan pratinjau dahulu.
  • Kalau sudah berjalan dan posisinya sudah pas, silakan terbitkan.
  • Selesai.


Memasang Tulisan Berjalan Di Sidebar / Gadget

Kita juga dapat memasangnya pada gadget blogger. Berikut langkah-langkahnya :

  • Masuk ke blogger.
  • Buka halaman Tata Letak.
  • Klik Tambahkan Gadget Baru.
  • Pilih gadget HTML/JavaScript.
  • Masukkan tulisan berjalan pada bagian konten.
  • Pastikan sobat melihat tulisan Rich Text (gambar ada di bawah)
  • Simpan .... Selesai.


Selain 2 cara di atas, kita juga dapat menyisipkan tulisan berjalan langsung pada template yang digunakan jika mau.

Oke... mari kita lanjut ke pembuatan kode.

Sebenarnya untuk membuat tulisan berjalan kita hanya memerlukan 1 tag html, yaitu <marquee> (pembuka) dan </marquee> (penutup).

Misalnya kita ingin membuat teks "Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_" menjadi berjalan.

Maka kita dapat menulis teks tersebut terlebih dahulu baru mengurungnya dengan kode <marquee> dan </marquee>.

Atau menulis kode <marquee> dan </marquee> dahulu baru menyisipkan teks di antara keduanya.

Hasil kode seharusnya jadi seperti ini

<marquee>Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>

Dan hasil di blog akan terlihat seperti ini

Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_

Itu kode yang paling sederhana yang secara default akan menampilkan tulisan berjalan dari kanan ke kiri.

Kita dapat membuatnya berjalan dari kiri ke kanan dengan menambahkan sedikit atribut direction="right"pada tag pembuka seperti ini

<marquee direction="right">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee> 

Maka hasilnya akan menjadi seperti ini


Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_

Kita juga dapat membuat teks bergerak dari atas ke bawah atau sebaliknya.

Membuat teks bergerak dari bawah ke atas
Kode

<marquee direction="up">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>

Hasil

Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_

Membuat teks bergerak dari atas ke bawah
Kode

<marquee direction="down">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee> 

Hasil


Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_

Apakah kecepatan teks berjalan dapat di atur?....

Bisa sob.... Yaitu dengan cara menambahkan atribut scrollamount="nilai". Yang mana nilai dapat kita tulis dengan angka 1, 2, 3, dst...

Secara default kode <marquee> sudah memiliki nilai scrollamount 6 atau sama dengan scrollamount="6". Jadi kita harus menggunakan angka 6 ke bawah atau ke atas.

Apabila angka yang kita gunakan di bawah dari angka 6, maka tulisan berjalan akan lebih lambat. Sebaliknya, kalau yang kita gunakan di atas dari 6, maka teks akan semakin cepat.

Cara penulisan seperti ini

<marquee scrollamount="9">Contoh Tulisan Berjalan</marquee> <marquee>Contoh Tulisan Berjalan</marquee> <marquee scrollamount="6">Contoh Tulisan Berjalan</marquee> <marquee scrollamount="3">Contoh Tulisan Berjalan</marquee>

Hasil


Contoh Tulisan Berjalan Contoh Tulisan Berjalan Contoh Tulisan Berjalan Contoh Tulisan Berjalan

Kalau dari kiri ke kanan seperti ini kodenya

<marquee scrollamount="8" direction="right">Contoh Tulisan Berjalan</marquee> <marquee direction="right">Contoh Tulisan Berjalan</marquee> <marquee direction="right" scrollamount="2">Contoh Tulisan Berjalan</marquee>

Hasil


Contoh Tulisan Berjalan Contoh Tulisan Berjalan Contoh Tulisan Berjalan

Kalau ingin membuatnya bergerak dari bawah ke atas atau sebaliknya silakan ganti direction="right" jadi direction="up" atau direction="down".

Membuat Tulisan Bergerak Bolak Balik

Untuk membuat teks berjalan tersebut jadi bolak balik / memantul / mondar mandir. Maka kita harus menambahkan atribut behavior="alternate" pada tag pembuka, seperti ini :

<marquee behavior="alternate">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>

Hasil


Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_

Silakan tambahkan atribut lainnya seperti untuk mempercepat / lambat teks, membuatnya berjalan dari kiri, atas, atau bawah.

Membuat teks bergerak diagonal / zig zag

Kode yang digunakan

<marquee direction="up" align="center" behavior="alternate"><marquee direction="right" behavior="alternate">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee></marquee></marquee></marquee>

Hasil


Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_

Tulisan Berjalan Secara Berlawanan

Kode yang digunakan

<marquee width="50%">&lt;&lt; Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee><marquee direction="right" width="50%">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_ &gt;&gt;</marquee>

Hasil


<< Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_ >>

Membuatnya berhenti berjalan ketika kursor di arahkan ke teks berjalan

Untuk membuatnya berhenti ketika kursor di arahkan ke tulisan, kita cukup menambahkan kode onmouseover="this.stop()" onmouseout="this.start()" pada tag pembuka.

Maka kalau ditulis jadi seperti ini

<marquee onmouseover="this.stop()" onmouseout="this.start()">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>

Hasil


Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_

Cara Memberi Warna Pada Teks Berjalan

Kita juga dapat mewarnai tulisan berjalan tersebut dengan menambahkan style seperti ini

<marquee style="background:#FF0000;color:#FFFFFF">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>

Hasil


Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_

background:#FF0000 adalah yang membuat latar menjadi merah
color:#FFFFFF yang membuat tulisan menjadi putih

Untuk mengubah warna silakan ganti kode warna #FF0000 dan #FFFFFF dengan warna lainnya.

Membuat Gambar Berjalan Menggunakan Kode Marquee
Selain teks, kita juga dapat menggunakan <marquee> untuk membuat gambar berjalan.
Caranya sebenarnya sama saja dengan membuat tulisan berjalan, bedanya cuma teks diganti dengan gambar.

Penulisan kode seperti ini

<marquee>Tulis kode gambar di sini</marquee>

Contoh nyata :

<marquee><img src="https://3.bp.blogspot.com/-L7E1uAGVwG0/WQYqPRRjXJI/AAAAAAAAFsU/xNx8-0PV9t4B76_aagOvr8MmmPPBi88LACLcB/s1600/img1.png"/></marquee> 

Hasil




Kalau mau beberapa gambar juga bisa, seperti ini

<marquee> <img src="https://3.bp.blogspot.com/-L7E1uAGVwG0/WQYqPRRjXJI/AAAAAAAAFsU/xNx8-0PV9t4B76_aagOvr8MmmPPBi88LACLcB/s1600/img1.png"/> <img src="https://3.bp.blogspot.com/-9SB9o0WloHM/WQYqPZScA2I/AAAAAAAAFsM/sdrsN7hImGcvAzyUXi0PwQe2GbjnpttNACLcB/s1600/img2.png"/> <img src="https://3.bp.blogspot.com/-9SB9o0WloHM/WQYqPZScA2I/AAAAAAAAFsM/sdrsN7hImGcvAzyUXi0PwQe2GbjnpttNACLcB/s1600/img2.png"/> </marquee>

Hasil




Membuat objek berjalan hilang setelah beberapa kali lewat

Kita juga dapat membuat objek (teks / gambar) menghilang setelah beberapa kali jalan menggunakan atribut loop="nilai". Bagian nilai tinggal diganti dengan angka yang kita mau.

Misalnya kita ingin objek yang jalan hilang setelah 3 kali lewat.
Maka kita dapat menulisnya seperti ini

<marquee loop="3">Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_</marquee>

Hasilnya seperti ini


Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_

Pada gambar penulisannya juga sama kok, cuma teks saja diganti dengan gambar, seperti ini :

<marquee loop="3"><img src="https://3.bp.blogspot.com/-L7E1uAGVwG0/WQYqPRRjXJI/AAAAAAAAFsU/xNx8-0PV9t4B76_aagOvr8MmmPPBi88LACLcB/s1600/img1.png"/></marquee>

NOTE : Silakan kalian ganti tulisan Selamat datang di Blognya Mr Ivanchan, jangan lupa untuk LIKE FANSPAGE di bawah YA!_ sesuai keinginan kalian.

Tinggal simpan untuk widget dan publikasikan untuk postingan. Ok jika sudah beres cukup sekian artikel yang bisa saya bagikan kepada kalian semua. Semoga bisa membantu dan bermanfaat....
Terima Kasih atas kunjungannya....
Regards,
Mr Ivanchan

Fanspage Facebook

Cara Membuat Efek Tulisan Berjalan di Dalam Postingan Blog