Memasang Tombol Pop Up Like Box Facebook dan Follow Twitter Otomatis di Blogspot

Salam sobat blogger.
Social media sudah menjadi suatu hal yang harus dimiliki oleh blogger. Kita bisa menshare artikel kita disana dan tentu mendapatkan kunjungan dari link yang kita share disana. Untuk mendapatkan pengunjung secara berkala tentu kita harus menaruh tombol like fan page fb dan follow twitter di blog. Nah, langsung saja kita mulai memasang tombol pop up like box facebook dan follow twitter di blogspot.

Silahkan sobat ikuti beberapa langkah berikut
1.Login ke akun blogger sobat
2.Klik menu Tata Letak/Rancangan
3.Klik Tambah Gadget
4.Klik/pilih HTML/Javascript
5.Masukan kode di bawah ini

 <script src="http://andreykusanagi.googlecode.com/files/pop-up.js" type="text/javascript"></script>
<div id="fbslidebox" style="position: fixed; width: 310px; overflow: hidden; bottom: 5px; right: 5px; background: url(&quot;http://www.scri8e.com/white.gif&quot;) repeat scroll 0% 0% transparent;-moz-border-radius: 15px 15px 15px 15px; border: 3px solid rgb(255, 51, 0); display: block;"><div style="width: 295px; padding: 10px; margin: 0pt auto; overflow: hidden;"><a id="fbcloseslidebox" style="float: right; color: rgb(153, 153, 153); padding: 0pt 2px; border: 1px solid rgb(204, 204, 204); text-decoration: none; font-size: 9px; font-family: Verdana,Geneva,sans-serif;" href="#">Keluar</a><strong style="color: rgb(0, 0, 0);">Jangan Lupa Klik Like Dan Follow ya!</strong><br/>
<a href="https://twitter.com/Nama Twitter Sobat" title="alibloggers" class="twitter-follow-button" data-button="grey" data-text-color="#000000" data-link-color="#ffffff">Follow @Nama Twitter Sobat</a><script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fid-id.facebook.com%2Fblogtyo&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;height=212&amp;appId=128536653899046" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:212px;" allowtransparency="true"></iframe></div></div>

Keterangan : Ganti tulisan yang bercetak tebal sesuai dengan nama twitter dan alamat fan page facebook sobat.

Sebelum menyimpan URL Facebook anda, ganti kode-kode pada URL.
: dengan %3A 
/ dengan %2F 

6.Klik Simpan
7.Selesai 

Nah sederhana bukan...
Yang di atas adalah contoh sederhana tentang  Memasang Tombol Pop Up Like Box Facebook dan Follow Twitter Otomatis di Blogspot  , selanjutnya bisa sobat  kembangkan sendiri menurut keinginan sobat.

Demikianlah postingan saya kali ini...
Semoga bermanfaat.. 

Read More

Cara Membuat Widget Blog Rata Tengah / Center

Salam sobat blogger,,,

Kali ini saya membahas dikit nih trik Cara Membuat Widget Blog Rata Tengah / Center.
Biasanya jika kita memasang widget di blog otomatis akan ditempatkan rata kiri seperti gambar dibawah ini pada widget Rank Alexa :

Klik show untuk melihat

Nah jika tampilannya lebih enak dilihat atau menrik dan biar blog terlihat rapi maka tips dari saya adalah membuat widget tersebut rata tengah, contohnya seperti ini :

Klik show untuk melihat

Nah caranya adalah simple dan sederhana kita hanya menambahkan kode <center> pada awal dan </center> pada akhir kode widget contohnya seperti ini :

<center>

Letakkan Kode wideget Anda disini

</center>

Nah sederhana bukan...
Yang di atas adalah contoh sederhana tentang  Cara Membuat Widget Blog Rata Tengah / Center , selanjutnya bisa sobat  kembangkan sendiri menurut keinginan sobat.

Demikianlah postingan saya kali ini...
Semoga bermanfaat.. 

Silahkan mencobanya semoga bermanfaat!!!

Read More

Cara Membuat Bingkai Dan Mengubah Warna Latar Pada Judul Serta Area Widget

Salam sobat blogger..

Setelah kita membahas artikel mengenai cara mengganti older post dengan angka.
SEkarang saya coba membahas mengenai Cara Membuat Bingkai Dan Mengubah Warna Latar Pada Judul Serta Area Widget.

Klik show untuk melihat

Sobat, seperti kita tahu bahwasanya hampir semua template standar yang disediakan oleh Blogger tidak menyertakan aksesori berupa bingkai untuk setiap widget yang dipasang di halaman. Dan hal ini sangat berbeda apabila dibandingkan dengan kustom template yang umumnya menyertakan aksesori berupa bingkai untuk bagian tersebut, sehingga tampilan halaman blog yang yang menggunakan template standar Blogger menjadi terkesan tidak lebih menarik apabila dibandingkan dengan blog yang menggunakan kustom template.

Namun demikian bukan berarti kita tidak dapat melakukan kustomisasi pada template standar Blogger agar tampilannya menjadi lebih menarik bila dibandingkan dengan kustom template. Oleh sebab itulah dalam artikel sebelumnya yang berjudul “Inilah Beberapa Daftar Template Blog Terbaik Yang Pernah Ada” saya menyebutkan bahwa sebenarnya template standar yang disediakan oleh Blogger merupakan template blog terbaik yang pernah ada untuk platform Blogger (Blogspot), dengan salah satu alasannya yaitu karena kemudahan bagi kita bila ingin melakukan kustomisasi.

Salah satu dari kemudahan kustomisasi yang dapat kita lakukan adalah ketika kita ingin memodifikasi desain tampilan untuk setiap elemen halaman, termasuk diantaranya yaitu modifikasi widget dengan cara menambahkan bingkai dan warna latar untuk bagian tersebut. Dimana kustomisasi dapat dilakukan dengan menambahkan kode CSS tertentu ke dalam template untuk menggantikan kode CSS standar yang diberikan oleh Blogger.

Nah, dalam hal melakukan kustomisasi untuk bagian widget, dalam hal ini adalah memberi garis dan warna latar untuk bagian tersebut, maka Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya.

.main-inner .sidebar .widget h2 {

  margin-top: 0px;

  margin-bottom: 1px;

  margin-left-value: 0px;

  margin-right-value: 0px;

  padding: 3px 3px;

  color: #274e13 !important;

  text-align: center;

  border: 1px solid #666666;

  border-radius: 4px;

  box-shadow: 1px 1px 6px 1px #3d85c6;

  background: #bbbbbb;

}

.main-inner .sidebar .widget-content {

  margin: 0px;

  padding: 2px 2px;

  text-align: justify;

  text-decoration: none;

  border: 1px solid #674ea7;

  border-radius: 4px;

  box-shadow: 1px 1px 6px 1px #3d85c6;

  background: #ffffff;

}

.main-inner .widget #ArchiveList {

  margin: 0px;

}

.main-inner .widget ul, 

.main-inner .widget li,

.main-inner .widget ul li,

.main-inner .widget #ArchiveList ul.flat li {

  margin: 0px;

  padding: 2px;

  list-style: none;

}

Ketiga, simpan template Anda.

Perlu diketahui bahwa background yang digunakan dalam rangkaian tersebut merupakan warna solid (dalam hal ini adalah #bbbbbb dan #ffffff), sehingga agar tampilannya menjadi seperti gambar di atas maka Anda dapat mengganti kode warna pada background: dengan gambar atau warna gradasi. Sebagai contoh misalnya dengan memakai kode di bawah ini.

Background dengan menggunakan gambar (misalnya untuk judul widget).

background: url("https://lh6.googleusercontent.com/-H-0CmGKOwSg/T_GubudWV2I/AAAAAAAAAPI/SYKtH9zZlXA/s800/Menu.png") repeat-x scroll left bottom rgb(243, 244, 246);

Background dengan menggunakan warna gradasi (misalnya untuk area widget).

background: -moz-linear-gradient(center top , white 20%, rgb(243, 243, 243) 100%) repeat scroll 0% 0% transparent;

Demikian halnya untuk warna garis dan warna bayang-bayang, Anda dapat menyesuaikannya dengan desain tampilan halaman blog yang Anda kelola, yaitu dengan cara mengganti kode warna yang terdapat pada border: dan box-shadow:. Dan perlu diketahui pula bahwa kode tersebut dapat diimplementasikan pada semua kategori template standar Blogger (Mudah, Jendela Gambar, PT Keren Sekali, Tanda Air, Kelembutan, dan Perjalanan). Terkecuali untuk kategori template PT Keren Sekali, kode tersebut hanya dapat diterapkan pada desain template yang belum memiliki bingkai pada bagian widget. Karena apabila diimplementasikan pada template dalam kategori PT Keren Sekali yang telah memiliki bingkai pada widget, maka tampilannya malah akan menjadi tidak proporsional.

Yang di atas adalah contoh sederhana tentang Cara Membuat Bingkai Dan Mengubah Warna Latar Pada Judul Serta Area Widget , selanjutnya bisa sobat  kembangkan sendiri menurut keinginan sobat.

Demikianlah postingan saya kali ini...
Semoga bermanfaat..
Sumber

Read More

Cara Mengganti Older Post Dengan Angka

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.

Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini


1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

.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;
}

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

Yang di atas adalah contoh sederhana tentang Cara Mengganti Older Post Dengan Angka , selanjutnya bisa sobat  kembangkan sendiri menurut keinginan sobat.

Demikianlah postingan saya kali ini...
Semoga bermanfaat.. 

Read More

Cara Membuat Tabel, Kolom dan Kotak di Blog

Salam sobat blogger...
Beberapa hari yang lalu saya membahas cara membuat text area di blog.
Pada kesempatan kali ini saya akan coba bahas cara membuat tabel atau kotak di blog atau di artikel postingan. cara nya tidak begitu sulit, hanya menambahkan kode saja, untuk lebih jelasnya silahkan sobat baca langkah-langkah dibawah ini
Berikut langkah-langkah cara membuat tabel atau kotak di blog sobat:

• Tabel dengan satu (1) kolom

  Nama Sahabat

  <table border=”1″><tr><td>Nama Sahabat></td></tr></table>
• Tabel dengan dua (2) kolom

  Nama

  Hoby

  <table border=”1″ width=”300″>
  <tr><td>Nama Sahabat</td><td>Hoby</td></tr>
  </table>
• Table tiga (3) kolom dengan empat (4) baris

  Nama	Kelas	website
  A	6	http://vathrie.blogspot.com/
  A	6	http://vathrie.blogspot.com/
  A	6	http://vathrie.blogspot.com/
  A	6	http://vathrie.blogspot.com/

  <table border=”1″ width=”300″>
  <tr bg#3366ff”>#E0F8E0″>
  <td align=”center”>
  <b>Nama</b></td><td align=”center”><b>Kelas</b></td><td align=”center”><b>website</b></td>
  </tr><tr><td align=”center”>A</td><td align=”center”>6</td><td align=”left”>http://vathrie.blogspot.com/</td></tr>
  <tr><td align=”center”>A</td><td align=”center”>6</td><td align=”left”>http://vathrie.blogspot.com/</td></tr>
  <tr><td align=”center”>A</td><td align=”center”>6</td><td align=”left”>http://vathrie.blogspot.com/</td></tr>
  <tr><td align=”center”>A</td><td align=”center”>6</td><td align=”left”>http://vathrie.blogspot.com/</td></tr>
  </table>
• silahkan disimpan, begitulah caranya sobat bisa rubah-rubah sesuai selera dan kebutuhan.

Yang di atas adalah contoh sederhana tentang Cara Membuat Tabel, Kolom dan Kotak di Blog, selanjutnya bisa sobat  kembangkan sendiri.

Demikianlah postingan saya kali ini...
Semoga bermanfaat.. 

Read More

Membuat Text Area Di Blog

Salam sobat blogger...
Setelah saya memposting artikel beberapa hari yang lalu tentang cara membuat tombol klik show di postingan blog. Sekarang saya ingin membahas tentang cara membuat text area d blog.
Text area merupakan salah satu hal penting untuk memperingkas sebuah posting dalam blog, apalagi text kode yang begitu panjang apabila tidak dimuat dalam text area maka akan memanjang kebawah, dan pastinya membuat susah pengunjung blog untuk mecopy text tersebut.

Kali ini saya sedikit memberikan tips untuk sobat blogger yang ingin membuat text area yang keren,, heheheheeeee,,,

Nah bagi sobat yang berminat untuk membuat text area dengan tombol pilih semua / Select all silakan copy paste code dibawah ini:

<code><span ><div><form name="copy"><div align="center"><input value="Pilih Semua" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"> </div><div align="center"></div><p align="center"><textarea rows="3" cols="20" style="border: 8px inset rgb(104, 104, 204); padding: 0pt 1px; background: rgb(100, 100, 200) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(255, 255, 255); line-height: 1.5em; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;" name="txt" wrap="VIRTUAL">

Masukan text / kode sobat di sini

</textarea></form></div></span></code>

Keterangan:

• Text warna hijau:  bisa sobat ganti dengan select all / block all / tandai semua dan lain-lain sesuai selera sobat.
• Text warna kuning:  adalah ketinggian text area tersebut, silakan sobat sesuaikan sendiri.
• Text warna putih:  adalah panjang kolom text area tersebut, silakan sobat sesuaikan sendiri.
• text warna merah:  merupakan tempat untuk kode yang inggin sobat taruh di dalam text area tersebut.

Abaikan warna lainya selain warna yang disebutkan di atas.

Berikut ini saya berikan contoh text area pilih semua / select all:

Masukan text / kode sobat di sini

Yang di atas adalah contoh sederhana tentang cara membuat text area di blog, selanjutnya bisa sobat  kembangkan sendiri.

Demikianlah postingan saya kali ini...
Semoga bermanfaat.. 

Read More

membuat tulisan berjalan dan berhenti ketika terkena kursor

 

Salam sobat blogger.
Beberapa hari yang lalu saya memposting cara membuat teks / tulisan bergerak di blog.
Kalau sobat ingin membacanya sobat bisa lihat disini.
Tetapi sekarang saya bukan membahas topik yang lalu sobat.tetapi memodifikasi sedikit membuat teks bergerak di blog yaitu membuat tulisan berjalan dan berhenti ketika terkena kursor.
sobat bisa ikuti langkah2 dibawah ini :

1. ketika sobat melihat fungsi marquee biasanya seperti ini :

<marquee direction="left" scrollamount="2" align="center">Tulisan sobat</marquee>

2. sobat hanya menyisipkan sedikit kode tambahan kedalam fungsi marquee diatas seperti dibawah ini :

onmouseover="this.stop()"

onmouseout="this.start()"

Jadi hasilnya menjadi seperti ini :

<marquee onmouseover="this.stop()"

onmouseout="this.start()"

direction="left" scrollamount="2"

align="center">Tulisan Sobat
</marquee>

Pada kata "Tulisan Sobat" itu bisa diganti tidak hanya teks saja, bisa diganti URL temen sobat atau apalah terserah sobat aja hehe

Contoh Hasilnya.. Coba sobat arahkan kursor sobat ke Teks tersebut apakan berhenti??

Contoh Tulisan Berjalan

Sekian dulu informasi dari saya sobat..silahkan sobat praktekkan di blog sobat..
semoga bermanfaat..

Read More

Cara Menyembunyikan Tampilan Semua Drive di My Computer

Salam sobat blogger.
kali ini saya posting dikit nih Cara Menyembunyikan Tampilan Semua Drive di My Computer.
Mungkin karena alasan tertentu suatu saat sobat perlu menyembunyikan tampilan semua drive di my computer (computer), ketika diklik dari menu Computer, akan terlihat kosong atau tidak akan tampil drive apapun.

Caranya yaitu melalui setting di Local Group Policy Editor

• Tekan Win+R untuk masuk ke RUN Command
• Ketik gpedit.msc
• Klik OK ( akan tampil jendela  Local group policy editor )
• Browse ke User Configuration => Administrative Templates => Windows Components => Windows Explorer
• Di Jendela sebelah kanan cari : Hide these specified drives in my computer, dobel klik kalau sudah ketemu

Klik show untuk melihat

• Pilih pada Enable  => klik Apply => Klik OK

Klik show untuk melihat

Silakan klik pada Computer sekarang, drive C, D, dll  harusnya sudah tidak nampak.


Untuk mengembalikan ke kondisi normal, sobat bisa lakukan langkah-langkah di atas, dan kembalikan pilihan  di Hide these specified drives in my computer ke Not Configure atau Disable.

Sekian dulu infomasi dari saya, selamat mencoba,
Semoga bermanfaat .

sumber : http://komputertipstrik.blogspot.com/

Read More

Cara Memasang Chat Facebook Di Sidebar Firefox

Salam sobat blogger..
Kali ini saya berbagi sedikit tips ne bagi para facebukers yang suka chattingan di Facebook..
Chat facebook yang bagus setidaknya memungkinkan sobat untuk mengirim pesan instant kepada teman facebook online.
Tetapi bagaimana kalau kita sudah meninggalkan facebook atau off di facebook tetapi masih ingin tetap mengobrol dengan kontak Facebook kita? Jika sobat menggunakan Firefox, sobat dapat menempatkan Chat Facebook di sidebar firefox.

Caranya bisa sobat ikuti langkah-langkah dibawah :

1. Carilah Penanda navigasi atas kemudian pilih Organize Bookmarks ...
   
   
       Klik show untuk melihat

   
   
   
2. Klik New Bookmark  pilih tab dan masukkan data berikut ini:
   •  Nama : Facebook Chat
   •  Lokasi: http://www.facebook.com/presence/popout.php
   • Periksa  bookmark ini di sidebar.
     
     Klik show untuk melihat

     
     
     
3.  Untuk menjalankan Firefox sidebar tadi, klik Facebook Chat dan mulai mengobrol dengan kontak Facebook sobat dalam Firefox. walaupun sobat sudah meninggalkan facebook.
   
   Klik show untuk melihat

   
   
   Sekian dulu postingan saya kali ini tantang Cara Memasang Chat Facebook Di Sidebar Firefox.
   Semoga bermanfaat bagi sobat yang membutuhkannya..

Read More

Cara Memasang Like Box Facebook di Blog

Salam sahabat blogger...

Kali ini saya posting lagi nih mengenai cara memasang like box facebook di blog.

Namun terlebih dahulu saya akan terangkan fungsi dari widged Like Box ini adalah sebagai media sarana untuk menjalin perkenalan atau persahabatan antara Blog tersebut dengan para Facebookers dan meminta para facebookers tersebut bersedia menjadi penggemar blog milik kita, dengan catatan para facebokers itu memang harus betul-betul menyukai isi dari blog tersebut,
yang ditandai dengan di kliknya tombol " like/suka " yang ada di dalam widged Like Box itu.

Seperti gambar diatas inilah tampilan dari widged Like Box Facebook.

Gambar di atas adalah contoh Like Box Facebook milik blog saya Flasz Band, lebih jelasnya sobat bisa cek dihalaman Flasz Band ini, lalu gimana cara membuatnya...? mudah sekali yang penting syarat utamanya adalah sobat harus punya akun di Facebook.

Ada 2 Tahap yang harus sobat lakukan yaitu :

TAHAP 1.

Mendaftarkan halaman penggemar/Fans blog kita di Facebook

Login/masuk ke Facebook sobat dan jangan Facebook milik orang lain ya..nanti berbahaya  he..he..he.

Kemudian sobat buka halaman ini http://www.facebook.com/pages/create.php dan pilih/klik " Merk atau Produk "

Klik show untuk melihat

Akan keluar beberapa pilihan, di kolom kategori pilihlah yang berkategori " Situs Web " sementara di kolom merek atau produk silahkan tulis nama tampilan halaman penggemar sobat dan centang kotak kecil yang menyatakan persetujuan kemudian klik tombol "mulai " dan dihalaman berikutnya anda hanya tinggal mengatur isi dari halaman itu misalnya foto profil dan lain-lain. 

Klik show untuk melihat

Sekarang sobat sudah memiliki halaman penggemar/fans untuk blog sobat, dan catat alamat URL halaman penggemar Facebook sobat tersebut.

TAHAP 2
Membuat Widged Like Box Facebook untuk ditempatkan di Blog

Buka halaman http://developers.facebook.com/plugins/?footer=1  dan setelah terbuka pilih " Like Box "

Klik show untuk melihat

Akan muncul halaman untuk mendapat kode widgednya, silahkan sobat isi kolom Facebook Page URL dengan alamat URL halaman penggemar Facebook yang telah sobat buat sebelumnya, kemudian klik " Get Code " untuk mendapatkan kode scriptnya dan kode script itulah nantinya yang akan sobat tempatkan di blogsobat.

Tampilannya seperti gambar di bawah ini.

Klik show untuk melihat

Keterangan Gambar :
Facebook Page URL : alamat URL halaman penggemar facebook kita.
Width : Lebar widged.
Height : Tinggi widged.
Color Scheme : untuk menampilkan warna latar widgednya.
Show Faces : untuk memunculkan/menyembunyikan Photo para penggemarnya.
Border Color : untuk membuat warna disisi widgednya.
Stream : Menampilkan komentar di comunity halaman facebook sobat.
Header : Menampilkan kata " find us on facebook "
Get Code : kode scriptnya dari widged tersebut

Selesai deh...dan silahkan sobat mencobanya.
demikianlah postingan saya kali ini..
Semoga bermanfaat.

Read More

Cara Membuat Teks Bergerak

Salam sobat blogger..

Kali ini saya ingin posting dikit nih tentang modifikasi teks.
cara membuat teks bergerak merupakan salah satu langkah desain blog yang biasanya dilakukan untuk tek-teks atau kalimat-kalimat yang penting, misalnya ucapan selamat datang, iklan atau judul bagian-bagian tertentu dari blog. Sering kali kita melihat blog yang dihiasi oleh tulisan atau kata-kata yang
berjalan di blog sobat-sobat kita. mungkin sebagian besar sudah mengetahuinya. tapi disini saya mencoba untuk sharing kepada sobat-sobat yang belum mengetahui cara pembuatannya.

Note: yang akan saya bahas ini merupakan tulisan berjalan biasa bukan tulisan berjalan yang apabila ada mouse di area tulisan itu akan berhenti.

berikut cara menjadikan teks di blog bergerak:

1. Login ke Blogger.
2. Klik Tata Letak.
3. Ketika sudah berada di Elemen Halaman klik Tambah Gadget.
4. Lalu pilih HTML/JavaScript.
5. Langkah selanjutnya masukkan kode marquee yang anda inginkan seperti contoh dibawah ini:

1. Teks berjalan dari kanan ke kiri

Kode:

<marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>

Hasil:
Contoh Tulisan Berjalan
2. Teks berjalan dari kiri ke kanan

Kode:

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

Hasil:

Contoh Tulisan Berjalan
3. Teks berjalan bolak balik

Kode:

<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

Hasil:
  Contoh Tulisan Berjalan
4. Teks berjalan dari atas ke bawah

Kode:

<marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

Hasil:

Contoh Tulisan Berjalan  
5. Teks berjalan dari bawah ke atas

Kode:

<marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

Hasil:

Contoh Tulisan Berjalan  
6. Teks berjalan mondar-mandir

Kode:

<marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

Hasil:

Contoh Tulisan Berjalan
7. Teks berjalan zig-zag nembus

Kode:

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>

Hasil:









Contoh Tulisan Berjalan 8. Teks berjalan zig-zag mantul

Kode:

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Contoh Tulisan Berjalan </marquee></marquee></center>

Hasil:










Contoh Tulisan Berjalan Langkah Selanjutnya adalah mengganti tulisan

Contoh Tulisan Berjalan

dengan tulisan atau kata-kata yang sobat inginkan.

Ket :
# direction="left/right/up/down" --> Mengatur arah gerakan teks.

# scrollamount="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.

# behavior="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan :
~> Scroll --> teks bergerak berputar
~> Slide--> teks bergerak sekali lalu berhenti
~> Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik )

# Fungsi dari :

<center> ............. </center>

adalah agar tulisan tersebut selalu berada di tengah.

Demikianlah sedikit tips blogging dari saya dengan judul cara membuat teks bergerak di blog.
Semoga bermanfaat..

Read More