Cara Membuat Scroll To Top Button

Salam Blogger Sejati.
Untuk melengkapi tentang cara membuat Scroll To Top di blogger kali ini saya akan melengkapinya dengan Membuat Scroll To Top Button Menggunakan OW Generator.
Di postingan sebelumya blog Oto Website pernah membahas tentang Scroll To Top di antaranya berada di artikel : Memasang Tombol Smooth Scroll to Top With jQuery dan Blogger Scroll to Top With jQuery, yang pemasangannya menggunakan jQuwery dan perlu mengedit HTML.

Untuk kali ini Anda tidak perlu mengedit HTML karna Scroll To Top ini hanya menggunakan simple CSS yang di gabungkan menjadi satu Generator, bahkan Anda yang tidak mengerti tentang HTML ataupun pemula akan sangat mudah memasang Scroll To Top. Bahkan Anda dengan sangat mudah apa ingin memasang Scroll To Top ini di bagian kanan, kiri, bahkan di bagian tengah blog Anda. Di sini juga ada banyak pilihan Scroll To Top yang bisa Anda pilih.

Yang perlu Anda ketahui disini Generator ini di buat oleh teman saya ya itu Hasan dari Apps.dan saya memintanya agar saya bisa berbagi kepada Anda.

---

Membuat Scroll To Top Button Menggunakan OW Generator

---

Seperti yang saya bilang di atas bahwa cara Membuat Scroll To Top Button ini sangalah mudah dan simple karena menggunakan OW Generator.

Untuk cara menggunakan generator ini sepertinya tidak perlu saya jelaskan lagi karna generator ini sama dengan generator sebelumnya, silahkan Anda gunakan OW Generator ini dengan bijak.

Description: Membuat Scroll To Top Button Menggunakan OW GeneratorRating: 5.0Reviewer: dek rifItemReviewed: Membuat Scroll To Top Button Menggunakan OW Generator

Select Button

	Simple CSS3 animated Scroll Top Button

General Options

Button Size :	Small (50px)	Medium (67px)	Large (83px)
Position :	Left	Center	Right
Include jQuery Plugin(Do you want to add it?) :

Copyright © 2012 by dek_rif @ Oto Website.All Rights Reserved

Read More ->>

Cara membuat sidebar terpisah

 

Banyak cara untuk membuat kotak sidebar blog kita kelihatan menarik. Contohnya adalah seperti tips kali ini. Terkadang sidebar blog perlu ditata dengan baik, supaya pengunjung blog kita merasa nyaman dengan konten-konten yang ada dalam sidebar blog kita. Selain ditata dengan bagus, tentu kita harus memberi tampilan yang menarik pula pada sodebar blog kita. Nah untuk menampilkan sidebar yang lebih menarik lagi, anda perlu mengikuti langkah-langkah di bawah ini:

1. Login ke blogger.com
2. Pada dasbor blog Sobat, silahkan berkunjung ke Edit HTML.
3. Jangan Lupa Expand Widget Templates
4. Kemudian silahkan cari kode yang mirip seperti kode berikut ini.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

(kode di atas berlaku buat template minimal) Jika sudah ketemu, silahakan pisah kedua konten kode di atas menjadi seperti kode di bawah ini.

.sidebar .widget{
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Jadi untuk terlihat terpisah maka ada yang harus dimodifikasi yaitu kode pada Sidebar . Widger dimodifikasi menjadi seperti kode di bawah ini
:

.sidebar .widget{
background:#fff;
border:1px dotted #6c6b6b;
margin:0 0 1.5em;
padding:0.5em;
}

Semoga Bermanfaat......., Di like y....

Read More ->>

Cara membuat Breaking News

Salam sejahtera untuk Sobat blogger semua. Setelah sekian lama saya tidak update artikel kali ini saya akan share kepada Sobat semua bagaimana cara membuat breaking news di blog. Breaking news pada blog berfungsi untuk memperindah tampilan, terlihat lebih profesional, dan bisa jadi menambah link in yang akan berefek baik pada nilai SEO blog Sobat. Mungkin ada diantara Sobat blogger yang belum pernah liat breaking news itu kaya apa, silahkan lihat screenshootnya.

Langkah-Langkah Cara Membuat Breaking News di Blog :

1. Login ke akun blog Sobat, kemudian masuk ke Dashboard
2. Setelah itu masuk ke menu Template
3. Klik Edit HTML, kemudian klik Lanjutkan, dan centang (checkclist) Expand Widget Template.
4. Cari kode ]]></b:skin> (gunakan kombinasi tombol Ctrl + F untuk mempermudah pencarian)
5. Setelah itu, salin kode dibawah ini tepat diatas kode ]]></b:skin> tersebut
   

   .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib4C1JORW6VwKSRQwt2LCLf-VTgatn0lQ7cXi9zyhPoUx6zi8QIfSscMacPgZ86-HOWa6dyUkVEDogZe4Iv2wVpecLFmq2K4OBWednx5evNFas1JE9ELrC-12vRsFbsXvs81EoXImT-Us/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
   .news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
   .news a:link, .news a:visited{color:#fff;text-decoration:none;}
   .news a:hover {color:#ddd;text-decoration:underline;}

6. Setelah itu cari lagi kode </head>
7. Jika sudah ketemu, salin kode dibawah ini tepat diatas kode </head> tersebut
   

   <script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
   <script type='text/javascript'>
   //<![CDATA[
   var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
   
   var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
   //]]>
   </script>
   <style type='text/css'>
   .titlefield{ /*CSS for RSS title link in general*/
   text-decoration: none;}
   .labelfield{ /*CSS for label field in general*/
   color:#aaa;font-size: 100%;}
   .datefield{ /*CSS for date field in general*/
   color:#aaa;font:normal 14px Arial;text-transform:none;}
   #example1{ /*Demo 1 main container*/
   width: 780px;
   height: 14px;
   border: 0px solid #aaa;
   padding: 0px;
   font:bold 16px Arial;
   text-transform:none;
   text-align:left;
   background-color:transparent;}
   code{ /*CSS for insructions*/
   color: #fff;}
   #example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
   #example1 a:hover {color:#C8D3F2;text-decoration:none;}
   </style>

8. Kemudian cari kode yang biasa dipakai untuk menu navigasi seperti kode dibawah ini
   

   <div class='menu horizontal'>
   ...........................................
   ...........................................
   </div>

9. Jika sudah ketemu kode navigasi blog Sobat (atau kalaupun tidak ada Sobat bisa cari kode </head>) kemudian letakan kode dibawah ini tepat dibawah kode tersebut
   

   <div class='newspic'>
   
   <div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
   <script type='text/javascript'>
   var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
   cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://septia-mujizat.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
   cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
   cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
   cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
   cssfeed.entries_per_page(1)
   cssfeed.init()
   </script>
   </div>
   <div style='clear:both;'/>
   </div>

10. Ganti tulisan yang berwarna merah dengan alamat (url) blog Sobat, kemudian simpan template blog Sobat

Nah, itu dia cara membuat breaking news di blog yang dapat saya sampaikan pada Sobat. Sekian saja postingan saya kali ini, mohon maaf apabila masih banyak kekurangannya.

Read More ->>

Cara Memasang Tanda Tangan Pada Blogger

DI BLOG (BLOGGER), kita dapat membubuhkan tanda tangan (signature) sebagai sebagai identitas penulis blog (blog author). Dengan adanya tanda tangan ini, posting-posting blog terasa lebih khusus, karena memiliki tanda tangan sang penulis blog yg unik. Sobat Blogger bisa membuat dan memasangnya di blog Blogger dengan mudah. Kehadiran online signature maker memberikan kemudahan untuk membuat tampilan tanda tangan tersebut. Selain untuk digunakan di email, gambar tanda tangan ini bisa digunakan pula di blog sebagai blog author signature.

Cara Membuat Gambar Tanda Tangan Secara Online

Untuk membuat tanda tangan dengan online tool, saya memilih menggunakan MyLiveSignature, sehingga tutorial ini akan mengetengahkan langkah-langkah membuat signature dengan online tool tersebut.

1. Masuk ke mylivesignature.com.

2. Ada beberapa opsi disana, jika ingin membuat tanda tangan tanpa register, klik "Proceed". Jika ingin daftar, klik "register"

3. Setelah klik proceed, anda akan masuk ke halaman opsi jenis signature yang akan dibuat. Ada 4 cara membuat signature: dengan wizard, dengan menulis sendiri di screen tool, upload gambar yang di-scan, atau menggunakan font. sendiri. Saya sarankan untuk membuat dengan wizard (pilih opsi pertama), karena cara itu lebih mudah.

4. Tuliskan nama anda atau nama yg ingin dibuat sebagai tanda tangan. Klik 'next step'.

5. Langkah selanjutnya adalah memilih jenis font tanda tangan. Ada banyak jenis font dan langsung bisa dilihat melalui preview. Pilih font yang diinginkan dengan klik opsi di sebelah preview. Setelah itu 'klik next'.

6. Pilih warna tanda tangan dan background. Sesuaikan background dengan background halaman blog, atau pilih/centang "transparent".

7. Setelah gambar jadi, anda akan dibawa ke halaman hasil akhir gambar. Di halaman tersebut terdapat gambar tanda tangan/signature dan di bwahnya tertera ID dari tanda tangan tersebut. SImpan ID jika dibutuhkan kembali di kemudian hari. Untuk menyimpan gambar, klik kanan, lalu pilih 'save as' atau 'save image as'

Cara Memasang Tanda Tangan di Bawah Posting Blog

1. Pastikan terlebih dahulu gambar tandatangan tadi telah di upload. Kemudian simpan direct url dari gambar tersebut.

2. Untuk menampilkan gambar di bawah posting kita bisa menggunakan dua cara:

  a. Dengan memasukkan html gambar di fitur blogger untuk menyisipkan widget di posting:

Dari Setting > Formatting > Lihat ke bagian kosong di sebelah kanan Post template di bagian bawah halaman.
Isikan script image ke dalamnya:
< img border="0" src="urlgambartandatangan.jpg" />
Ganti urlgambartandatangan.jpg dengan url gambar tandatangan sobat.

Kelemahan dari cara ini adalah susunan struktur pada badan post kadang-kadang bisa kacau, dan membutuhkan waktu load yang lebih lama

b. Dengan memasukkan gambar di bagian template HTML melalui Edit HTML Blogger:

Melalui Edit HTML, sobat dapat memasukkan script secara lebih leluasa dan juga dapat menambahkan aturan-aturan tertentu agar struktur tampilan lebih sempurna.

- Di beberapa tutorial, saya melihat script yang dimasukkan hanya dalam bentuk HTML gambar seperti ini:

< img border="0" src="urlgambartandatangan.jpg" />

Namun, jika hanya dengan HTML gambar, struktur gambar menjadi tidak independen karena dia mengikuti aturan (div) pada tulisan di atasnya (tulisan posting di bagian akhir/bawah). Sehingga kadang-kadang gambar betubrukan dengan tulisan atau bergeser.

- Untuk membuat gambar berstruktur independen maka tambahkan struktur sendiri pada tag gambar:

<div>< img border='0' src='urlgambartandatangan.jpg' /></div>

Dengan cara ini, gambar dapat berada di baris selanjutnya di bawah tulisan posting.

- Agar gambar bisa diatur posisinya, akhirnya gunakan aturan berikut:

<div style='padding:5px;float:right'>< img border="0" src='urlgambartandatangan.jpg' /></div>

- right akan menampilkan gambar di sisi kanan, ganti dengan left jika ingin gambar berada di sebelah kiri.Ganti urlgambartandatangan.jpg dengan url gambar tandatangan yg telah di-upload.

- Setelah selesai mengedit script, masuk ke dahsboard > design > Edit HTML.

- Jangan lupa centang "Expand Widget Templates"

- Cari <data:post.body/>

- Letakkan kode yang telah diedit tadi tepat di BAWAH-nya.

- Save Template.

Note: Jika blog telah menggunakan fitur auto readmore, ada lebih dari satu <data:post.body/>, letakkan kode tanda tangan di bawah <data:post.body/> yg kedua.

Read More ->>

Cara memasang kamera CCTV pada blogger

Nah kali ini saya akan membagikan trik yg keren sekali yaitu kamera CCTV di blog, langsung saja kita ke topek pembahasan, widget ini sebetulnya hanya hiasan untuk mempercantik blog kita, mungkin saja para copaser akan takut karena gerak geriknya diawasi lewat kamera CCTV kwkwkwkwkwkwkwk, jadinya aman postingan kamu :D

Memasang Kamera CCTV diBlog

DEMO KLIK DISINI

1.Login Ke akun blog kalian.

2.Klik tata letak

3.Add Gadget/Tambah Gadget

4.Pilih HTML

5.Lalu Tambahkan Kode ini di dalamnya

<script language="JavaScript" src="http://onlyx-45-blogspot-com.googlecode.com/files/onlyx-45-cmr-cctv.js.txt" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2aBuWDLEIY66tYdGZ8rpp2R-2Ih5dkpi_PIcqHAaPeUM1_ix1EjZa7L_Cv87ynLBvcVljcVOVc83FjnwLFbqpvwzWZpCAognLSQjsZHixRU4LWHSipcWB-GrYRVEP7DzulryDA82dLU/s1600/cctv.gif")</script>

Mudahkan ?

Sumber : http://onlyx-45.blogspot.com

Read More ->>

Cara membuat Teks Berjalan (Marquee)

Terimakasih atas kunjungannya
 
Sering kali kita melihat blog yang dihiasi oleh tulisan atau kata-kata yang berjalan di blog teman-teman kita. mungkin sebagian besar sudah mengetahuinya. tapi disini ade mencoba untuk sharing kepada teman-teman yang belum mengetahui cara pembuatannya.

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

berikut cara pembuatannya :

1. Login ke Blogger
2. Kemudian klik Tata Letak dan Elemen Halaman
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 Berjalan5. 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 anda 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 bo)

# Fungsi dari :

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

Supaya tulisan tersebut selalu berada di tengah.


Semoga bermanfaat. 

Read More ->>

Cara Membuat Logo Menarik Pada Blogger

Tampilan logo blog pada header yang khas dan memiliki desain yang bagus pasti menjadi dambaan setiap blogger. Logo blog biasanya ditampilkan sebagai bagian dari header yang berupa paduan gambar dan gambar teks yang berisi nama atau ciri dari suatu blog.  Umumnya, logo blog digunakan untuk menggantikan teks pada bagian title dan deskripsi header. Tentu saja, membuat logo blog, meskipun hanya berupa logo text, bukanlah perkara mudah bagi setiap orang. Keahlian setidaknya dibutuhkan untuk membuat teks logo dengan menggunakan software image editing semacam Correl Draw maupun Photoshop.

Pengen punya logo teks blog yang seperti ini?

atau seperti ini ?

Kabar baiknya, saat ini ada banyak layanan situs online logo creator and generator yang dapat memudahkan pekerjaan membuat logo blog. Siapa saja dapat dengan mudah membuat teks logo blog maupun logo blog untuk header dengan hasil yang lumayan baik dan tidak mengecewakan. Telah saya pilihkan 6 online logo generator/creator yang mudah untuk digunakan sebagai berikut:

1. www.textspace.net

Memiliki berbagai jenis text generator sesuai dengan bentuk design-nya, misalnya patterned text generator, glitter text generator, LCD text generator, marquee text generator, dan masih banyak lagi yang lainnya. Memiliki interface yang bersih dan waktu muat halaman yang cepat sehingga membuat kita semakin mudah dan cepat dalam membuat logo.

2. www.flamingtext.com

FLaming text memiliki banyak sekali koleksi design yang bermacam-macam dengan berbagai pilihan dari yang paling sederhana dan paling animatif. Membuat anda harus lebih jeli dan benar-benar fokus untuk membuat pilihan karena banyaknya design yang harus dipilih. Interface generator yang lengkap disertai live preview dari hasil teks yang diedit sehingga tidak perlu lagi berpindah halaman untuk kembali mengedit.

3. www.cooltext.com

Sama halnya dengan flamingtext, cooltext memiliki banyak koleksi design dan memiliki interface editor yang mudah dan handy, sehingga siapapun dapat dengan mudah menggunakannya. Terdapat dua jenis design, yaitu logo dan button. Dilengkapi pula dengan puluhan jenis font menarik yang dapat dipilih dan disesuaikan dengan design blog.

4. www.simwebsol.com

Ketika membuka halaman web situs ini, anda akan masuk ke halaman text logo editor yang sederhana. Kostumisasi keseluruhan teks diserahkan kepada user, sehingga dapat membuat logo sesuai dengan kehendak. Pilhan style-nya tidak begitu banyak, namun masih cukup berharga mengingat hasil gambar dari online logo creator ini memiliki kualitas yang cukup baik.

5. www.logomatik.net

Design-design pada situs ini lebih menekankan pada koleksi design font yang menawan. Design yang dihasilkan dengan generator dapat dikostumisasi lebih, namun warna gambar hitam dan putih menurut saya adalah yang terbaik karena kesan vector-nya sangat kuat dan memukau.

6. www.thelogoshop.info

Cukup sederhana, atau bisa dibilang sangat sederhana, selain karena situs ini hanya memiliki satu halaman, design-nya pun sangat terbatas. Namun, bagi anda yang sedang belajar dan dalam proses awal blogging dan design gambar, situs ini bisa menjadi awalan bagi anda untuk belajar membuat design logo.

Setelah mendapatkan logo blog, pasang logo tersebut untuk menggantikan title dan description pada header blog. Simak Cara Mengubah/Memasang Gambar Background Header Blogger/Blogspot.

Selamat Mencoba Semoga bermanfaat. 

Read More ->>

Cara membuat efek gelembung saat kursor digerakan

Pada tutorial blogger kali ini saya akan menuliskan panduan cara bikin efek gelembung atau membuat efek bubble pada cursor bloggger.

Dengan menggunakan script yang akan saya sertakan di bawah nanti, cursor blog blogger teman akan mengeluarkan gelembung-gelembung atau bisa juga di sebut bubble.

Sebelum saya menuliskan caranya, saya ingin menegaskan bahwa ini hanya salah satu cara untuk mempercantik atau menghias blog kita, dan sifatnya tidak wajib, karena mungkin saja ini bisa memperberat loading blog teman.

Mari kita mulai panduan membuat efek bubble ini.

Di sini saya akan menuliskan 2 cara yang bisa kita lakukan agar cursor blog kita bisa mengeluarkan gelembung.

Cara Pertama
1. Klik Tata Letak
2. Klik Tambah Gadget / Add A Gadget

3. Pilih Gadget Html/JavaScript
4. Masukkan Efek Gelembung (Bubble) di dalamnya
    (jangan lupa klik Edit HTML ya, letaknya di sebelah kanan atas kolom isian).
5. Simpan.

Cara Kedua
1. Klik menu seperti ini

2. Klik menu / tulisan Template

3. Klik menu Edit HTML
4. Klik tulisan / menu Lanjutkan

5. Beri centang pada Expand Template Widget

6. Pasang script efek gelembung / bubble sebelum kode </head>
7. Simpan.
Berikut script Efek Gelembung / Efek Bubble yang harus di pasang, silakan pasang script berikut sesuai tutorial yang sudah saya tuliskan di atas:

<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#cc0000", "#cc0000", "#cc0000", "#cc0000", "#cc0000"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}


function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>

Keterangan:

• Kode #cc0000", "#cc0000", "#cc0000", "#cc0000", "#cc0000 adalah kode warna gelembung, silakan ganti dengan warna yang kamu mau, agar lebih mudah menemukan kode warna yang kamu inginkan silakan cari di Daftar Kode HTML Warna / Kode Warna.
• Kode 100 adalah jumlah maksimal gelembung yang akan keluar, silakan ganti angka 100 dengan angka / jumlah gelembung yang kamu suka.

Nah itulah tutorial cara membuat efek gelembung / efek bubble pada cursor di blogger.
Selamat mencoba.

Semoga bermanfaat. 

Read More ->>