DIANPRO: Oktober 2010

Memasang animasi melayang di Blog

Halo sobat blogger ketemu lagi ya, kali ini saya akan berbagi pengalaman menarik tentang cara membuat gambar melayang di blogger.

Caranya cukup mudah sobat cukup menambahkan java sript untuk memunculkan gambar-gambar melayang di blog sobat.

Langsung saja kita praktekkan

Berikut tutorialnya :

Tentu saja harus Login ke Blogger

Klik Tata Letak

Klik tab Edit HTML

Klik tulisan Download Template Lengkap.

Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget ,

lihat gambar di bawah :

Tunggu beberapa saat ketika proses sedang berlangsung

Kemudian cari kode

</body>
</html>

Biasanya berada di bagian paling bawah,
Jika suda ketemu letakkan script berikut di atasnya

Sobat bisa ganti angka 20 merupakan jumlah gambar dan url yang bewarna biru denga url pilihan sobat
Berikut contoh gambar yang bisa sobat terapkan

http://i1002.photobucket.com/albums/af149/Imtikhan/animas/Semut.gif

http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/lowo.gif

http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/kupu-kupu.gif

http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/kelelawar.gif

http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/ikan.gif

http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/burung.gif

http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/lumba-lumba.gif

http://i1002.photobucket.com/albums/af149/Imtikhan/animasi/bintang_godong.gif

Selamat mencoba

Pengajuan Desain Sticker

Pengajuan Desain Sticker 01

(On Recommended / Full Colour Printing)


Minimal Order : 4000 exp. (untuk 2 s/d 4 desain berbeda) Bahan : Bontag Coat Vinishing : Laminasi Kilap Catatan : Minimal Order bisa menyesuaikan Kebutuhan dengan Konsekwensi Harga Perubahan Harga Harga : @ Rp. 750,- _________________________________________________________ Pengajuan Desain Sticker 02 Alternative (Full Colour Printing) Minimal Order : 4000 exp. (untuk 2 s/d 4 desain berbeda) Bahan : Bontag Coat Vinishing : Laminasi Kilap Catatan : Minimal Order bisa menyesuaikan Kebutuhan dengan Konsekwensi Harga Perubahan Harga Harga : @ Rp. 750,- _________________________________________________________ Pengajuan Desain Sticker 03 Alternative (Sablon) Minimal Order : 500 exp. (untuk satu desain) Bahan : Vynil Water Proof Vinishing : - Catatan : Minimal Order bisa menyesuaikan Kebutuhan dengan Konsekwensi Harga Perubahan Harga Harga : @ Rp. 1.500,- _________________________________________________________ Pengajuan Desain Brosur Minimal Order : 1000 exp (atau sesuai kebutuhan dengan konsekwensi perubahan harga) Bahan : Art Papper 160 gr. Ukuran : A3 ( 297 x 420 mm) Finishing : - Harga : @Rp. 1.750

Snapshot

Cara Membuat Snap Shot Pada Blog ini merupakan salah satu cara dari sekian banyak Tips dan Trick untuk mempercantik halaman blog kita. Snap shot pada blog ini akan memberikan efek screenshot pada sebuah link ketika di sorot dengan menggunakan kursor. Sebagai contoh silahkan kunjungi Natural Blog,
gimana sobat sudah dapat gambarannya kan? Jika sobat tertarik berikut adalah langkah - langkah Cara Membuat Snap Shot Pada Blog.

Silahkan kunjungi website penyedianya di http://www.snap.com
Lanjutkan dengan meng klik tombol Get Started pada pilihan paling atas.
Pada halaman selanjutnya silahkan setting terlebih dahulu untuk tampilan snap shot nya, pada menu Choose Color Theme silahkan pilih warna yang telah disediakan dibawahnya untuk merubah warna frame pada snap shot.
Pada Add Your Logo silahkan masukan logo jika sobat ingin merubah logo snap shot nya atau sobat bisa mengabaikannya.
Masukan pilihan bahasa yang akan digunakan di bawah Select Your Shot Language.
Selanjutnya pada Advanced Setting silahkan lakukan setting pada menu dibawahnya untuk membuat pilihan apakah logo snap shot nya akan ditampilkan atau tidak pada blog amati perubahan yang terjadi pada saat melakukan pengaturan.
Selanjutnya silahkan melanjutkan dengan meng klik tombol Continue.
Pada menu selanjutnya silahkan masukan data - data yang diminta mulai dari alamat e.mail sobat, URL blog, serta Password yang akan sobat gunakan. selanjutnya beri tanda centang pada kotak kecil di sebelah I agree to Terms & Conditions above, lanjutkan dengan klik Continue.
Pada halaman selanjutnya silahkan sobat pilih install snap shot dengan mengklik logo blogger apabila sobat ingin menginstallnya secara otomatis, atau secara manual dengan meng copy kode scriptnya dengan meng klik Show Manual Install Instructions, selanjutnya masukan dengan menambahkan gadget HTML/JavaScript pada halaman blog sobat.
Langkah terakhir adalah silahkan simpan dan lihat pada halaman blog.

Membuat Titel Blog Berjalan

Titel Blog Berjalan dibuat untuk memancing perhatian pengunjung untuk minimal melihat/membaca titel Blog kita yang akhirnya tergerak untuk membukanya....

Kali ini saya ingin berbagi pengalaman untuk memasang titel blog tersebut

Caranya mudah saja.

Masuk pada Blog ID anda
Masuk pada Setting > Edit HTML
Temukan kode <head>
Masukkan kode ini

______________________________________________________

alert("Welcome to my Blog, Selamat datang di blog saya")

</script>

________________________________________________________________________

dibawah kode <head>

untuk memasang Pesan/Alert Blog

dan kode
________________________________________________________________________

<script language='JavaScript'>
var txt=" DIAN PRO - Design and Printing Solution ";
var kecepatan=120;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

________________________________________________________________________
untuk Titel Berjalan
Selamat mencoba.....

Memasang Widget SMS Gratis

Demi memanjakan pengunjung anda, anda harus coba widget yang satu ini. Mungkin saja gara-gara widget ini pengunjung bisa betah bulak-balik ke blog anda.
Mungkin anda mau sms dulu? Silahkan pakai widget di bawah ini aja.

&lt;p&gt;&amp;amp;amp;amp;lt;p&amp;amp;amp;amp;gt;Browser Tidak Support&amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;gt;&lt;/p&gt;

Sudah di coba widget di atas! Langsung nyampe aja kan ke nomer tujuan yang anda tuju. Berikut ini cara memasang-nya. dengan persyaratan

>> Masuk di Blogger.com
>> Rancangan/Design
>> Kemudian klik Tambah Gadget atau Add a Gadget
gambar. Cara Membuat Sms Gratis Di Blog, Menambahkan Fitur Widget Sms Gratis

gambar. Cara Membuat Sms Gratis Di Blog, Menambahkan Fitur Widget Sms Gratis

>> Kemudian pilih HTML/Javascript

gambar. Kirim Sms Gratis Di Internet, Cara Menambahkan Gadget Sms Gratis

>> Kemudian Copy Paste Kode di bawah ini dan letakkan di HTML/Javascript tersebut

________________________________________________________________________

<iframe name="l2" src="http://sms-online.web.id/widget" width="270" height="350" style="border:0px;">Browser Tidak Support</iframe>
_________________________________________________________________________

Yang saya cetak merah dapat anda ganti ukuran-nya tinggi dan lebar-nya...
Selamat mencoba...

Membuat Next Pages pada Blog

Sebentar lagi udah mau puasa nih! Belum punya persiapan yang mateng... Mudah-mudahan bulan ini lulus lagi amien...

Langsung aja ah sekarang kita belajar bersama membuat next navigasi, seperti gambar di bawah ini
gambar, Cara Membuat Next Page Seperti Google, Cara membuat nomer next 123, Navigation Page

gambar, Cara Membuat Next Page Seperti Google, Cara membuat nomer next 123, Navigation Page

Jika anda berminat buat memasangnya silahkan ikuti langkahnya berikut ini
>> Masuk Blogger
>> Rancangan/Design (dulu masih tata letak)
>> Edit Html
Letakkan kode di bawah ini tepat di atas ]]></b:skin<

-------------------------------------------------------------------------------------------------------

    .showpageArea a {text-decoration:underline;}
    .showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
    .showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
    .showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
    .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
    .showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
    .showpage a:hover {text-decoration:none;}
    .showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}

-------------------------------------------------------------------------------------------------------

Kemudian cari lagi kode seperti ini </body> dan letakkan kode di bawah ini tepat di atasnya

-------------------------------------------------------------------------------------------------------

<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord='Previous';
var downPageWord='Next';
</script>
<script src='http://rumbiadalam.googlecode.com/files/pag3.js' type='text/javascript'/>

--------------------------------------------------------------------------------------------------------

Kalender

Option 01

Option 02

Option 03

Option 04

Kalender Meja

Option 01

Kalender Meja

Option 02

Memasang Back to Top

3Share

Halaman blog yang panjang mungkin salah satu hal yang tidak disukai oleh pembaca. Solusinya pada halaman home jangan terlalu banyak menyimpan jumlah artikel. sebaiknaya dalam halaman home mempunyai maksimal 5 atau 3 artikel dan ditambah dengan pemanfaatan fungsi read more (baca selengkapnya).

Tapi kalau memang elemen blog atau artikel yang panjang bagaimana? pembaca akan lebih malas mengscroll kembali ke atas halaman page untuk mengakses menu lain. Kalau begitu silakan saja pasang "Icon Back To Top" (tombol Icon kembali ke atas) yang memungkinkan pembaca lebih mudah kembali ke atas halaman. Tombol Icon tersebut selalu terletak pada tempat atau posisi yang tetap walaupun adanya scrolling page.

Berikut kode "Icon Back To Top" (tombol Icon kembali ke atas) dan design yang dapat Anda pilih ( designed by syilpid )
Masuk ke dasbor > tata letak > edit html > Letakan kode di atas

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopbiru.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotophitam.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotophijau.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopkuning.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopmerah.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotoporange.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotoppink.png'/></a>


<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopungu.png'/></a>

Selamat Mencoba

Membuat label flash berputar

Biasanya kita menggunakan label yang tersedia pada blogger, tapi kadang kita ingin sedikit berfantasi dengan animasi-animasi flash, karena kita tidak akan mudah merasa bosan dan cukup menarik buat saya,,contoh animasi flashnya seperti ini

Setelah saya cari2 scrip yang cocok untuk membuat animasi flash label ini,ternyata scrip di bawah ini yang bisa berjalan dengan baik,,
langsung aja kita praktekan,mudah ko :

1. Pilih RANCANGAN=>EDIT HTML
2. Carilah scrip seperti ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>

3. kemudian pastekan scrip di bawah ini tepat di bawah scrip diatas tadi

<b:widget id="Label99" locked="false" title="Tag Cloud" type="Label">
<b:includable id="main">

<b:if cond="data:title">

</b:if></b:includable></b:widget>

<h2>

<data:title></data:title></h2>

<div class="widget-content">

<script src="http://sites.google.com/site/ruangsc/enes/swfobject.js" type="text/javascript">

<div id='flashcontent'>

Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://twitter.com/kurniasepta'>@kurniasepta</a> Distributed by <a href='http://kurniasepta.blogspot.com'>Belajar Ngeblog di Blog</a></div>

<script type='text/javascript'>

var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "300", "200", "7", "#ffffff");

// uncomment next line to enable transparency

//so.addParam("wmode", "transparent");

so.addVariable("tcolor", "0x000000");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "120");

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");

</script>

<b:include name="quickedit">

</b:include></div>

3. SAVE
Note : scrip di atas bisa kamu rubah warna teks,background,kecepatan berputar dan ukuran pixel nya agar sesuai dengan blog kamu.

"Selamat Mencoba"

Membuat Cursor Bertabur Bintang

Banyak cara yang dibuat oleh setiap blogger untuk membuat tampilan blognya terkesan cantik, unik dan macam-macam deh. Diantaranya dengan modifikasi template yang sudah ada, memasang ragam widget dan ragam aksesoris blog termasuk mengganti tampilan cursor. pernah lihat suatu blog dengan cursor bertabur bintang? Pingin mencobanya? Mudah kok, ikuti langkah-langkah berikut:
Membuat cursor bertabur bintang

1. Login ke blogger.
2.Masuk ke Layout-->Page Element
3.Tambahkan gadget HTML/JavaScript
4.Pilih kode taburan bintang dibawah ini.

Bintang Hijau

Bintang Ungu

Bintang Merah

Bintang Biru

Bintang Putih

<script src='http://sites.google.com/site/jimmyamba/js-jimmy/bintang.putih.js' type="text/javascript"></script>

5.Kopi salah satu kode diatas dan simpan.

6. Jangan lupa save dan save lagi.

Menyisipkan script HTML ke postingan

Mungkin diantara kita pernah mengalami kesulitan dalam menyisipkan kode HTML ke postingan blog. Memang untuk menyisipkan kode-kode HTML tidak bisa begitu saja di copy paste karena kode tersebut akan langsung diterjemahkan secara otomatis kedalam bahasa HTML.

Ada beberapa cara untuk menuliskan kode-kode HTML kita ke blog, yaitu :

Cara Pertama :
- Dengan bantuan software-software web design, misalnya Macromedia Dreamwaver, Microsoft Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti post2blog dll.
- Tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area HTML Codedan paste-kan ke editor postingan blog kita.

Cara Kedua :
- Menggunakan Notepad- Tuliskan semua kode/script ke dalam notepad
- Kemudian ganti/replace kode-kode berikut

Kode	Kode Pengganti
<	<
>	>
"	"

Jika malas mengubah kode-kode tersebut secara manual, ada tools encode dan decode yang bisa dipakai di situs ini.(bersihkan)

terus ubah script copy-an anda menjadi encode
akhirnya script anda berubah menjadi text dan siap dipaste di dalam postingan

Semoga bermanfaat...!!!

Pasang Buku Tamu Tersembunyi / Hidden ShoutBox

Cara Pasang Buku Tamu Tersembunyi / Hidden ShoutBox, sebenarnya tips ini sudah basi, alias sudah banyak para blogger membahasnya dalam posting mereka, tapi sekedar mengingatkan kembali aku coba untuk mengulang posting tentang Cara Pasang Buku Tamu Tersembunyi / Hidden ShoutBox. Shoutbox atau shoutmix yang terletak di setiap web/blog adalah sebuah widget atau fasilitas antar muka antara pengunjung blog dengan yang punya blog atau sering disebut sebagai Admin web/blog tsb.

Buku Tamu menurutku adalah widget yang penting ada di web/blog kita, sebab dengan media ini kita bisa berinteraksi dengan pengunjung blog, sehingga akan tercipta interaksi yang akan menjalin silahturahmi antara pemilik blog atau antara pengunjung blog, ujung-ujungnya widget ini juga akan mendatangkan traffic untuk blog kita.

Namun yang sering menjadi masalah dalam pemasangan Buku Tamu ini adalah space yang tidak cukup di halaman muka atau halaman index suatu web/blog, Tip ini akan membantu kita untuk menampilakan Buku tamu untuk tetap tampil di halaman muka namun tidak akan memakan space/tempat, sebab widget ini akan disembunyikan di samping Body blog. langkah Cara Pasang Buku Tamu Tersembunyi / Hidden ShoutBox ini mudah untuk dilakukan, langkahnya hampir sama dengan Cara memasang Widget Facebook atau widget lain yang biasa kita lakukan
Berikut Langkahnya.

Buka Akun Blog dengan ID Sobat
Klick Tata Letak dan Pilih Tambah Gadget
Pilih html/javascript dan Copy Paste kode di bawah ini

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}

</style>

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

Letakkan kode buku tamu / ShoutBox Sahabat disini

<a href="http://rangga-hadi.blogspot.com/2010/02/cara-pasang-buku-tamu-tersembunyi.html">[get this widget]</a>><a href="javascript:showHideGB()">

[close]

</a>

</div>

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div></div>

5. Simpan dan Selesai

Car Painting

V-Lapan

Undangan Wendra

Simple yang Exclusive

Undangan dengan desain yang minimalis didukung hasil cetak yang sempurna menghasilkan Undangan yang terkesan Exclusive dan bernilai tinggi.

Dengan harga yang Relatif murah anda bisa mendapatkan Undangan seperti ini dan bonus berupa Kartu Ucapan Terima Kasih sebagai pelengkap Souvenir.

Spesifikasi :

Bahan : Art Papper 160 gr
Dimensi : 200 x 120 mm
Cetak : Full Colour (CMYK)
Model : Lipat Rangkap dua

Konfirmasi Harga Hubungi :

DIANPRO design & printing solution

Mobile : 0341-9627827

Kotak Posting Terpisah

Perhatikan blog ini, terlihat kolom postingan blog saya terpisah antara satu postingan dengan postingan yang lain.

Kolom postingan terpisah seperti ini juga terlihat lebih enak dipandang dan lebih memudahkan pengunjung blog dalam membedakan isi artikel yang kita tulis, daripada kolom postingan yang menyatu atau dalam 1 kotak saja.

Jika sobat ingin blog sobat tampilannya seperti ini, berarti sobat benar telah membaca artikel ini..

Untuk pemasangan kolom yang seperti ini, sobat hanya memerlukan sedikit tambahan kode HTML saja yang nantinya akan disisipkan ke blog sobat.

Berikut langkah - langkahnya :

Silahkan login dahulu ke Blogger dengan ID sobat tentunya.
Klik Tata Letak.
Klik tab Edit HTML.
Setelah itu cari kode yang seperti ini

.post {

Kemudian tambahkan kode berikut ini tepat setelah kode tersebut

Padding:15px; /* Jarak text post dengan garis pinggir */

Border-top: 2px solid #000000; /* warna garis pinggir atas */

Border-bottom: 2px solid #000000; /* warna garis pinggir bawah */

Border-left: 2px solid #000000; /* warna garis pinggir kiri */

Border-right: 2px solid #000000; /* warna garis pinggir kanan */

Margin-bottom: 30px; /* jarak antara post yang satu dengan yang lainnya */

Save Template.

Sekarang coba sobat lihat hasilnya, jika sobat benar meletakkan kode HTML nya Insya Allah pasti akan berhasil dan sama seperti punya saya. Tapi masih dalam bentuk kotak kaku alias lancip pada ujung - ujungnya. Nanti jika sempat akan saya tulis postingan tentang membuat garis melengkung pada sudut kolom.

Selamat mencoba !!

Membuat Menu Dropdown

Untuk menghindari arsip blog yang menumpuk atau berderet kebawah terlalu panjang, kita bisa menggunakan menu dropdown agar terlihat lebih efisien. Karena semakin banyak dan semakin lama kita ngeblog maka arsip blog kita akan bertambah panjang daftarnya. Seperti yang kita ketahui, blog di arsip setiap bulan. Bagaimana kalau sobat ngeblog bertahun-tahun, tentu akan semakin panjang kan daftar bulan arsip blog sobat.
Berikut ada sedikit tips untuk membuat menu dropdown, tapi saya hanya akan menjelaskan cara membuat menu dropdown untuk yang memakai template baru, karena saya sendiri juga menggunakan template baru.

Login ke Blogger dengan ID sobat tentunya.
Klik Tata Letak.
Kemudian klik Elemen Halaman.
Klik tambah Gadget --> kemudian pilih menu yang bertulikan Arsip Blog
Disamping tulisan style, pilih radio button yang bertuliskan Dropdown Menu --> kemudian contreng kotak radio button tersebut.
Klik Simpan.
Itu tadi menu dropdown untuk Arsip Blog sobat, lantas bagaimana cara membuat menu dropdown yang didalamnya terdapat link. Seperti ini kode HTML nya :
Contohnya seperti berikut :
Hasilnya :

Sangat mudah bukan, silahkan dicoba !

Tips Membuat Efek Marquee

Apa itu Marquee? mungkin buat blogger baru kata marquee tidak terlalu akrab di telinga, padahal efek marquee ini sering kita lihat pada website atau blog yang sering kita kunjungi. Marquee adalah kode HTML yang bisa membuat teks bisa berjalan, dari kiri, kanan, bawah ataupun atas.

Teks berjalan atau marquee ini banyak diminati oleh para blogger, karena sifatnya yang dinamis, selain untuk menghemat tempat juga bisa menarik pengunjung. Berikut ini ada beberapa contoh marquee yang bisa sobat gunakan untuk blog sobat.

I. Contoh Marquee dari gerakan

TEXT BERJALAN DARI KIRI KE KANAN

Hasilnya :

TEXT BERJALAN DARI KIRI KE KANAN

Atribut yang biasa digunakan :

Widht = lebar blok teks dalam pixel atau persen
Title = pesan yang akan muncul saat mouse berada di atas teks
Direction = “left / right / up / down” untuk arah gerakan teks
Scrollmount = kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.
Bgcolor = warna background teks
Behavior = “scroll / slide / alternate” untuk mengatur perilaku gerakan

II. Contoh Marquee dari prilaku gerakan :

TEXT BERJALAN MENURUT PRILAKU

Hasilnya :

TEXT BERJALAN MENURUT PRILAKU

III. Contoh Marquee yang didalamnya terdapat link :

Cara Pasang Search Engine

Trik Membuat Read More (Template Baru)

Cara Membuat Favicon

Cara Membuat Label (Kategori)

Mengganti Template Blogspot

Cara Pasang Banner di Blogspot

Tutorial Membuat Text Area

Kode HTML Tampil di Postingan

Link Berkelip Warna-Warni

Hasilnya :
(arahkan mouse kesini)
Cara Pasang Search Engine

Trik Membuat Read More (Template Baru)

Cara Membuat Favicon

Cara Membuat Label (Kategori)

Mengganti Template Blogspot

Cara Pasang Banner di Blogspot

Tutorial Membuat Text Area

Kode HTML Tampil di Postingan

Link Berkelip Warna-Warni

Selamat Mencoba !

Memasang Text Berjalan Recent Post pada Blog

Widget recent post biasa kita jumpai dengan model dan bentuk yang rata-rata sama, dengan kode http://miscah.blogspot.com/feeds/posts/default maka widget default recent posts dengan mudah terpasang di blog. Ada pula widget recent posts yang disertai thumbnail atau gambar dari postingan dan beberapa widget recent posts lainnya yang bisa kita jumpai di beberapa blog yang berisi tutorial blog.

Agak berbeda dengan recent posts pada umumnya, recent post berikut adalah recent posts atau postingan terakhir dari blog yang berjalan atau biasa kita sebut dengan marquee. Contoh demonya bisa sobat lihat disini. Tertarik ingin memasangnya? berikut langkah singkat dan padatnya, tidak perlu backup template karena kita akan meletakkannya langsung di elemen halaman.

Pada Elemen Halaman, klik Tambah Gadget.
Kemudian pilih yang HTML/Javascript.
Masukkan kode berikut kedalamnya :
Simpan.

Keterangan :

Ganti kode yang berwarna merah dengan alamat blog sobat.
var nMaxPosts = 20 adalah jumlah postingan terakhir.
var nScrollDelay = 180 adalah kecepatan text.
var sDirection="left" untuk text berjalan dari kanan ke kiri, ganti dengan right jika ingin text tersebut berjalan dari kiri ke kanan.
var sOpenLinkLocation="Y" untuk link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).
var sBulletChar="•" adalah icon kecil pada bagian depan setiap link, bisa diganti dengan apa saja sesuai selera.

Semoga bermanfaat.

DIANPRO

Kemasan Beras

Portrait

Memasang animasi melayang di Blog

Pengajuan Desain Sticker

Snapshot

Membuat Titel Blog Berjalan

Memasang Widget SMS Gratis

Membuat Next Pages pada Blog

Kalender

Memasang Back to Top

Membuat label flash berputar

Membuat Cursor Bertabur Bintang

Menyisipkan script HTML ke postingan

Pasang Buku Tamu Tersembunyi / Hidden ShoutBox

Car Painting

Undangan Wendra

Kotak Posting Terpisah

Membuat Menu Dropdown

Tips Membuat Efek Marquee

Memasang Text Berjalan Recent Post pada Blog