Tips Menambahkan Teks Berjalan (Running Text) di Blog

Cara Membuat Teks Berjalan Di Blog - Sebuah blog pribadi bisa tampil lebih menarik jika pengelolanya mampu mendesain secara atraktif. Ada banyak pilihan gaya yang bisa diterjemahkan dalam sebuah blog. Mulai dari pilihan tema, warna, ikon dan sebagainya. Tapi ada satu pilihan unik yang bisa kita ciptakan dengan membuat Running Text alias teks berjalan. Seperti yang bisa kita lihat di siaran berita televisi di bagian bawah. Fungsinya bisa bermacam-macam. Kalau mau dikonsepkan layaknya blog berita, teks berjalan itu bisa diatur supaya menampilkan daftar tautan dari postingan terbaru di blog. Atau hanya sekadar teks berjalan yang menyampaikan pesan selamat datang kepada para pengunjung blog. Lalu bagaimanakah cara membuatnya? Disini saya punya 3 cara, yaitu :

1. Membuat dengan Widget.
2. Membuat dengan Kode HTML.
3. Membuat dengan Jquery.

Membuat dengan Widget

• Cara ini tergolong sangat mudah. Silakan kunjungi situsnya di Widgeo.net. Setelah masuk ke situs, Anda akan menemukan kotak dengan beberapa tab. Pilihlah menu button flash message. Setelah itu akan muncul kotak baru yang terdiri dari dua bagian. Bagian sebelah kiri menunjukkan pengaturan isi teks, warna dan ukuran. Silakan mengisi teksnya sesuai dengan yang Anda inginkan termasuk warna dan ukuran. Pilihan warna dan ukuran harus disesuaikan dengan tema blog yang sudah Anda miliki. Jangan sampai terlalu mencolok dan merusak komposisi warna dan desain blog. Sedangkan kotak sebelah kanan berisi kategori. Yaitu menjelaskan kategori teks yang sedang Anda buat sekaligus keterangan apakah termasuk konten dewasa.
• Selanjutnya, tekan tombol get widget untuk proses selanjutnya. Akan muncul kotak dialog yang menampilkan kode html dari teks berjalan yang sudah Anda buat. Silakan salin kode tersebut untuk dipindahkan ke blog Anda.
• Selanjutnya adalah memasang kode tadi ke pengaturan blog. Silakan masuk ke menu tata letak, add gadget -> add html/javascript -> add and finish.

Nah, teks berjalan yang Anda buat tadi sudah muncul secara otomatis di blog Anda. Jika masih merasa tidak cocok dengan ukuran dan warna, silakan ulangi langkah-langkah tadi untuk editing.

Membuat dengan Kode HTML

Prinsipnya sebenarnya sama, tapi cenderung lebih kompleks. Supaya lebih mudah, silakan menyalin kode di bawah ini:

<marquee align="center" direction="left" height="100" scrollmount="2" width="50%"> .... </marquee>

Anda bisa mengisi bagian titik-titik di atas dengan teks yang Anda inginkan. Selanjutnya, ulangi lagi proses yang sama seperti di atas dengan menambahkannya ke gadget. Untuk kode angka (200 dan 30) adalah ukuran dari teks. Sedangkan scrollmount adalah kecepatan gerakan.
Sementara itu, ada beberapa teknik untuk membuat tampilan teks berjalan tersebut menjadi lebih variatif dan dinamis. Misalnya jika ingin mengatur arah gerakan teks, Anda bisa menambahkan kode direction="left/right/up/down".

Membuat dengan jQuery

Sebelumnya saya berterima kasih kepada Radith (puturadith.blogspot.com/2014/09/smooth-marquee-dengan-jquery.html)
Ok, langsung ke tutorialnya

• Silahkan masuk ke menu template didasbor blogger lalu tambahkan kode dibawah ini :

<script type='text/javascript'>
//<![CDATA[
$(function () {
//this is the useful function to scroll a text inside an element...
function startScrolling(scroller_obj, velocity, start_from) {
//bind animation inside the scroller element
scroller_obj.bind('marquee', function (event, c) {
//text to scroll
var ob = $(this);
//scroller width
var sw = parseInt(ob.parent().width()
);
//text width
var tw = parseInt(ob.width());
tw = tw - 10;
//text left position relative to the offset parent
var tl = parseInt(ob.position().left);
//velocity converted to calculate duration
var v = velocity > 0 && velocity <
100 ? (100 - velocity) * 1000 : 5000;
//same velocity for different text's length in relation with duration
var dr = (v * tw / sw) + v;
//is it scrolling from right or left?
switch (start_from) {
case 'right':
//is it the first time?
if (typeof c == 'undefined') {
//if yes, start from the absolute right
ob.css({
left: (sw - 10)
});
sw = - tw;
} else {
//else calculate destination position
sw = tl - (tw + sw);
};
break;
default:
if (typeof c == 'undefined') {
//start from the absolute left
ob.css({
left: - tw
});
} else {
//else calculate destination position
sw += tl + tw;
};
}
//attach animation to scroller element and start it by a trigger
ob.animate({
left: sw
}, {
duration: dr,
easing: 'linear',
complete: function () {
ob.trigger('marquee');
},
step: function () {
// check if scroller limits are reached
if (start_from == 'right') {
if (parseInt(ob.position().left) < -
parseInt(ob.width())) {
//we need to stop and restart animation
ob.stop();
ob.trigger('marquee');
};
} else {
if (parseInt(ob.position().left) >
parseInt(ob.parent().width())) {
ob.stop();
ob.trigger('marquee');
};
};
}
});
}).trigger('marquee');
//pause scrolling animation on mouse over
scroller_obj.mouseover(function () {
$(this).stop();
});
//resume scrolling animation on mouse out
scroller_obj.mouseout(function () {
$(this).trigger('marquee', [
'resume'
]);
});
};
//the main app starts here...
//settings to pass to function
var scroller = $('.scrollingtext'); //element(s) to scroll
var scrolling_velocity = 70; // Scroll speed, use 1-99
var scrolling_from = 'right'; // 'right'or 'left'
//call the function and start to scroll..
startScrolling(scroller, scrolling_velocity, scrolling_from);
});
//]]>
</script>

Keterangan : taruh kode tersebut diatas kode </head> 
Setelah itu masukkan kode CSS dibawah ini :

#scroller {
background-color:#00b6ff;
color:#fff;
font-size:14px;
height:28px;
line-height:28px;
overflow:hidden;
position:relative;
width:100%;
padding-top:1px;
}
.scrollingtext {
color:#fff;
white-space:nowrap;
position:absolute;
font-size:14px;
}

Keterangan : taruh kode tersebut diatas kode ]]></b:skin> atau </style>

• Jika semua kode diatas sudah terpasang di template anda, sekarang tinggal menyiapkan tag html

<div id="scroller">
<div class="scrollingtext">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</div>
</div>

Nah, itulah tips singkat menambahkan teks berjalan di blog Anda. Selamat mencoba.

Tips Menambahkan Teks Berjalan (Running Text) di Blog 2014-12-04T14:18:00+07:00 Rating: 4.5 Diposkan Oleh: Anonymous