Memodifikasi Efek Marquee pada Blogger

Memodifikasi Efek Marquee pada Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Memodifikasi Efek Marquee pada Blogger ini.
Tutorial kali ini saya dapatkan dari blognya Kang Onk Design yang berada di posisi bawah footer. setelah terinspirasi untuk membagikan kepada semua temen-temen blogger memodifikasi dari tutorial temen, lagi-lagi Kang Onk Design...!!!

Sebenarnya tutorial ini banyak dibagikan temen-temen blogger lainnya, hanya saja tidak detail cara pembuatannya. Untuk itu saya mencoba melakukan inovasi dari berbagai tutorial yang didapatkan dari my best friend diberbagai tutorialnya.

Pembuatan tutorial kali ini hasil modifikasi efek marquee yang kudapatkan disini dan dipadukan pada tutorial tetang membuat pesan yang menyesuaikan dengan waktu. Hasilnya sungguh menkajubkan bukan.

Jika anda semua tertarik untuk membuat efek marquue seperti yang saya jelaskan diatas, silakan ikuti langkah-langkahnya :

  • Masuk ke akun Blogger;
  • Klik tombol Rancangan 
  • Pilih Edit HTML;
  • Cari kode ]]></b:skin> 
  • Jika ketemu copy paste kodeberikut persis sebelum kode diatas
.hangfooter {width: 100%;right:0;bottom: 0px;height: 24px;position: fixed;z-index:99;background-color:#627AAD;background-image:url(main/images/bg_hang_footer.png);background-repeat:repeat-x;border-top:1px solid #b5b5b5;border-left:1px solid #b5b5b5;border-right:1px solid #b5b5b5;letter-spacing:0.2px important;margin:0px}.footercenter{margin:0px auto;}.hangfooterleft{float:left;width:15%;font-weight:bold;line-height:24px;margin-left:2px;font-size:12px;letter-spacing:0.2px !important;margin:0px}.hangfooterright{float:right;width:80.2%;font-weight:bold; font-style:font-family:tahoma, sans;line-height:24px;margin-right:10px;font-size:11px;border-left:1px solid #CCC;border-right:1px solid #CCC;letter-spacing:0.2px !important;margin:0px}.link_molmenu{font-size:11px;font-weight:bolder;color:#FFF;background-color:#00cc00;padding:3px 8px 3px 8px;-webkit-border-radius: 2px;-moz-border-radius: 2px;}.link_molmenu1{font-size:11px;font-weight:normal;color:#FFF;}.link_molmenu a{color:#000;text-decoration:none;}.link_molmenu a:hover{color:#FFF;text-decoration:none;}

Langkah selanjutnya adalah :

  • Pilih Rancangan;
  • Klik tab Tambahkan Elemen (Gadget)
  • Pilih HTML/JavaScript
  • Copy paste kode dibawah kedalam HTML tersebut;
  • Lalu Simpan, selesai.
<div class="hangfooter">
<div class="hangfooterleft" align="right">
<span class="link_molmenu"><a href="http://kang-onk.blogspot.com">Kang Onk Design</a></span>
</div>
<div class="hangfooterright">
<marquee behavior="scroll" style="letter-spacing:0.2px;" scrollamount="4" direction="left" onmouseover="this.stop()" onmouseout="this.start()">

<span class="link_molmenu1"><span class="link_molmenu" style="color:#000;">Thank's</span></span> <script>
var Digital=new Date()
var hours=Digital.getHours()

//silahkan isi dengan pesan waktu sesuai dengan kesukaan anda
if (hours>=5&&hours<=11) //pesan pagi hari (05.00-11.00)
document.write('<span class="Apple-style-span" style="font-size:11px; font-weight:normal; color:#fff;padding: 0 0 10px 0;">« Selamat Pagi Shobat! - Semoga pagi ini menjadi awal kehidupan yang baik untuk kita semua</span>')

else if (hours==12) //pesan siang hari (12.00)
document.write('<span class="Apple-style-span" style="font-size:11px; font-weight:normal; color:#fff;padding: 0 0 10px 0;">« Selamat Siang Sahabat - Sahabatku - Terima kasih telah bersua di sela-sela istirahat Shobat semua</span>')

else if (hours>=13&&hours<=15) //pesan waktu siang hari(13.00-15.00)
document.write('<span class="Apple-style-span" style="font-size:11px; font-weight:normal; color:#fff;padding: 0 0 10px 0;">« Selamat Siang Friend - Terima kasih telah bersua kembali di siang ini</span>')

else if (hours>=15&&hours<=17) //pesan sore hari(15.00-17.00)
document.write('<span class="Apple-style-span" style="font-size:11px; font-weight:normal; color:#fff;padding: 0 0 10px 0;">« Selamat Sore Shobat - Terima kasih wahai sahabatku telah berkunjung kembali di Blognya Kang Onk Design</span>')

else if (hours>=17&&hours<=18) //pesan petang hari (17.00-18.00)
document.write('<span class="Apple-style-span" style="font-size:11px; font-weight:normal; color:#fff;padding: 0 0 10px 0;">« Selamat Petang Shobat Blogger! - Sambil istirahat dan santai menikmati blog ini</span>')

else if (hours>=18&&hours<=23) //pesan malam hari (18.00-23.00)
document.write('<span class="Apple-style-span" style="font-size:11px; font-weight:normal; color:#fff;padding: 0 0 10px 0;">« Selamat Malam - Terima Kasih Shobat, Semoga anda bermimpi yang indah</span>')

else //pesan malam mejelang pagi(00.00-04.00)
document.write('<span class="Apple-style-span" style="font-size:11px; font-weight:normal; color:#fff;padding: 0 0 10px 0;">« Sudah Larut Malam Masih Bersua di Blog Kang Onk Design - Terima kasih shobat atas kunjungannya</span>')</script> &nbsp;&nbsp;

<span class="link_molmenu1"><span class="link_molmenu"><a href="http://kang-onk.blogspot.com">About Me</a></span> Suatu pembelajaran Otodidak tanpa komersial semata, satu kuncinya : KEMAUAN dan BELAJAR </span> &nbsp;&nbsp;

<span class="link_molmenu1"><span class="link_molmenu"><a href="http://kang-onk.blogspot.com">Contemplations</a></span> Panduan Praktis Belajar Design dan SEO</span> &nbsp;&nbsp;

<span class="link_molmenu1"><span class="link_molmenu"><a href="http://www.facebook.com/Onk009">FB</a></span> onk009@yahoo.com</span> &nbsp;&nbsp;

<span class="link_molmenu1"><span class="link_molmenu"><a href="https://twitter.com/#!/onkdesign">twitter</a></span> @onkdesign</span>

</marquee>
</div>
</div>

Keterangan : silakan ganti huruf yang berwarna merah sesuai dengan keinginan serta kesukaan kamu. Semoga bermanfaat bagi anda semua. SELENGKAPNYA atau SEPENUHNYA

Sistem Komputer

Sitemap 1 2 3 4 5