Tutorial Blog

Kamis, 02 Juni 2011

Membuat Teks Berjalan Pada Blog

20.54

Ariawan

Teks berjalan sebenarnya terdiri dari dua kode dasar. Diawali dengan kode <marquee>dan diakhiri dengan kode </marquee>.

Macam-macam teks berjalan.
1. Teks berjalan dasar yaitu teks berjalan dari kanan ke kiri.
Contoh penggunaan kode : <marquee>IRAWAN</marquee>
Hasilnya :

IRAWAN

2. Teks berjalan dari berbagai arah dengan menambahkan kode direction.
Contoh penggunaan kode :
<marquee direction="right">TEKS DARI KIRI KE KANAN</marquee>
<marquee direction="up">TEKS DARI BAWAH KE ATAS</marquee>
<marquee direction="down">TEKS DARI ATAS KE BAWAH</marquee>

Hasilnya :

TEKS DARI KIRI KE KANAN TEKS DARI BAWAH KE ATAS TEKS DARI ATAS KE BAWAH

3. Teks berjalan dengan kecepatan yaitu dengan menambahkan kode scrollamount.
Contoh penggunaan kode :
<marquee scrollamount="10">TEKS BERJALAN 10</marquee>
<marquee scrollamount="15">TEKS BERJALAN 15</marquee>
<marquee scrollamount="30">TEKS BERJALAN 30</marquee>

Hasilnya :

TEKS BERJALAN 10 TEKS BERJALAN 15 TEKS BERJALAN 30

4. Teks berjalan mondar mandir dengan menambahkan kode behavior="alternate"
Contoh penggunaan kode :
<marquee behavior="alternate">TEKS BERJALAN MONDAR MANDIR</marquee>
Hasilnya :

TEKS BERJALAN MONDAR MANDIR

5. Teks berhenti ketika disentuh kursor mouse dengan menggunakan kode onmouseuver="this.stop()"onmouseout="this.start."

Contoh penggunaan kode :

<marquee onmouseover="this.stop()" onmouseout="this.start()">TEKS BERHENTI KETIKA DISENTUH</marquee>

Hasilnya :

TEKS BERHENTI KETIKA DISENTUH

6. Teks dengan warna background dengan cara menambahkan kode bgcolor="warna" atau bgcolor="#kode warna" dan juga bisa mengatur warna text dengan kode style="color:warna" .
Contoh penggunaan kode :
<marquee bgcolor="blue" style="color:yellow">TEKS KUNING BACKGROUND BIRU</marquee>
Hasilnya :

TEKS KUNING BACKGROUND BIRU

7. Taks berjalan variasi.
Contoh penggunaan kode :
<marquee behavior="alternate"><marquee width="180">TEKS BERJALAN</marquee></marquee>
Hasilnya :

TEKS BERJALAN

Contoh dengan kode :
<marquee behavior="alternate" width="10%">>></marquee>TEKS DENGAN PANAH<marquee behavior="alternate" width="10%"><<</marquee>
Hasilnya :

>>TEKS DENGAN PANAH<<

Contoh dengan kode :
<marquee style="border:blue 2px SOLID">TEKS DENGAN BORDER BIRU</marquee>
Hasilnya :

TEKS DENGAN BORDER BIRU

Contoh dengan kode :
<marquee behavior="alternate" direction="up" width="95%"><marquee direction="right" behavior="alternate">TEKS ZIGZAG</marquee></marquee>

Hasilnya :

TEKS ZIGZAG

Selamat mencoba!

20.52

Ariawan

No comments

Menghilangkan Navigasi Bar pada blogspot caranya cukup mudah.

Begini caranya gan....

Pertama masuk ke akun blogger, klik Tata Letak / Lay Out, pilih Tab Menu EDIT HTML dan jangan lupa centang EXPAND WIDGET.

Cari kode ini [CDATA[/*, gunakan Ctrl + F atau tekan F3 copy paste kode tadi di kotak pencarian / find bar.

Masukkan kode berikut ini di bawah kode [CDATA[/* tadi.

#navbar-iframe {

display: none !important;

}

Seperti inilah gambaran penempatannya :

<b:skin><![CDATA[/*-----------------------------------------------

Blogger Template Style

Name: Picture Window

Designer: Josh Peterson

URL: www.noaesthetic.com

----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

Selamat mencoba!

20.51

Ariawan

No comments

Membuat Link pada blog adalah kebutuhan pada saat kita memposting. Link adalah tautan dimana kita mengarahkan teks atau gambar dalam posting untuk menuju ke satu tujuan yang kita arahkan. Dalam posting mungkin kita akan menautkan postingan kita menuju satu lokasi yang kita arahkan. Misal kita ingin mengarahkan isi postingan kita yang berisi tentang informasi software yang kita ikuti dari blog atau website lain, untuk mengajak pembaca menuju blog atau website tadi kita mengarahkan teks tertentu dalam postingan kita untuk menuju pada blog atau web yang kita arahkan jika pembaca mengklik teks tertentu yang kita tandai. Atau Anda juga bisa mengarahkan teks untuk mendownload file dari link download file hosting Anda.

File hosting sendiri adalah tempat penyimpanan file yang disediakan oleh situs tertentu yang dapat diakses dari mana saja. Ada beberapa contoh free file hosting yang dapat Anda gunakan secara cuma-cuma. Misal ziddu, 4shared, mediafire dan sebagainya. Untuk dapat menggunakan layanan penyimpan data atau file cukup dengan mendaftar di salah satu situs yang menyediakan layanan file hosting. Jika kita kita mengupload file nantinya kita akan diberikan link file kita untuk bisa diakses oleh siapapun.

Kembali kepada topik membuat link pada blog. Misal kita akan membuat link seperti dibawah ini :

" Untuk informasi lebih lengkap mengenai software yang satu ini silakan klik dini."

Pada tulisan "silakan klik disini" kita blok kemudian klik ikon "LINK" dan masukkan alamat url blog atau website yang kita tuju.

Kemudian untuk membuat tautan terbuka dengan tab baru tambahkan kode target=_blank" dibelakang alamat url yang kita masukkan tadi. Caranya dengan klik Edit HTML pada menu posting blog Anda lalu cari kode alamat url tadi dan tambahkan kode target=_blank" dibelakang alamat sebelum tanda >. Misal Anda membuat link seperti ini : "klik disini"

Kode yang muncul di format HTML posting Anda seperti ini :
<a href="http://araya19.blogspot.com/"><b style="color: blue;">klik disini.</b>

Setelah kita tambahkan jadi seperti ini :
<a href="http://araya19.blogspot.com/"target=_blank"><b style="color: blue;">klik disini.</b>

Perhatikan tulisan yang berwarna biru.

Membuat link pada blog terbuka dengan tab baru penting dilakukan. Tujuannya agar pada saat pembaca atau pengunjung mengklik teks yang kita tautkan terbuka dengan tab baru. Jika Anda tidak membuatnya maka halaman blog Anda akan tertimpa dengan tautan atau link yang Anda buat tadi. Atau dengan kata lain halaman blog Anda akan hilang dan berganti dengan halaman baru yang kita tautkan. Bayangkan jika Anda membuat banyak tautan atau link di blog Anda. Tentunya akan menyulitkan pembaca untuk membuka tautan lainnya di posting blog Anda karena harus kembali ke halaman blog Anda.

Agar lebih mudah untuk memasukkan kode untuk membuka tab baru pada link yang perlu diperhatikan adalah alamat url yang Anda masukkan pada anchor text. Untuk praktisnya ketika anda masuk pada Edit HTML posting Anda cari saja kode yang berisi url yang Anda tautkan pada teks dan tambahkan target=_blank" disetiap kode tautan sebelum tanda >. Mudah bukan?

Well, selamat mencoba.

20.48

Ariawan

No comments

Dari sekian banyak tutorial membuat navigasi bernomor, rasanya hanya cara dibawah ini yang paling efektif, praktis dan bisa diterapkan pada template bawaan maupun template eksternal. Berikut langkah-langkahnya :

1. Login ke dashboard blogger anda
2. Klik Rancangan lanjut EDIT HTML
3. Cari kode ]]></b:skin>
4. Tambahkan kode berikut diatasnya

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

5. Kemudian cari kode </body>
6. Tambahkan kode berikut diatasnya

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/> </b:if> </b:if>

7. Simpan template dan lihat hasilnya

Selamat mencoba...

20.47

Ariawan

No comments

Mengganti Tulisan Posting Baru, Posting Lama dan Beranda sebenarnya bukanlah suatu hal yang harus dilakukan. Tapi bagi Anda yang ingin agar tampilan blog lebih bervariasi bisa mengganti tulisan dengan icon gambar. Caranya cukup mudah.

Langkah-langkah menggantinya seperti di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,
3. Ganti beberapa kode seperti di bawah ini :

Untuk mengganti tulisan Posting Baru (Newer Post) cari kode berikut: <data:newerPageTitle/>

Untuk mengganti tulisan Posting Baru (Newer Post) cari kode berikut:
Ganti kode tersebut dengan kode ini

Untuk mengganti tulisan Posting Lama (Older Post) cari kode berikut: <data:olderPageTitle/>

Ganti kode tersebut dengan kode ini:

Untuk mengganti tulisan Home (Home Page) cari kode berikut: <data:homeMsg/>

Ganti kode tersebut dengan kode ini:

4. Untuk icon silahkan di ganti dengan selera masing-masing .
5. Jika sudah tinggal klik Save Templates.

20.42

Ariawan

No comments

Membuat Daftar Isi pada sidebar blog caranya mudah dan praktis. Mungkin anda ingin lebih memudahkan pengunjung blog anda menelusuri isi postingan blog anda dengan daftar isi yang mudah terlihat. Caranya sebagai berikut :

1. Login ke dasboard blogger anda klik Rancangan
2. Klik tambah gadget kemudian cari HTML/Javascript
3. Masukkan kode berikut ini :

<script type="text/javascript"></script>
    <div id="fungsiscroll" class="sidebar section">
    <h2 class="title" align="left">Daftar Isi</h2>
    <div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 160px">
    <ul>
    <li>> <a href="http://Link URL Yang Dituju"> Nama Artikel </a></li>
    <li>> <a href="http://Link URL Yang Dituju"> Nama Artikel </a></li>
<li>> <a href="http://Link URL Yang Dituju"> Nama Artikel </a></li>
<li>> <a href="http://Link URL Yang Dituju"> Nama Artikel </a></li> MP3</a></li>
    </ul>
    </div>
    </div>

Ganti tulisan yang berwarna merah dengan alamat URL atau alamat blog anda atau link postingan anda. Lihat link postingan anda di adress bar pada saat anda membuka halaman posting dan letakkan di tulisan yang berwarna merah. Anda juga bisa mengganti tulisan "Daftar Isi" yang berwarna biru sesuai dengan selera anda. Juga untuk tinggi kolomnya sesuaikan saja dengan selera anda dengan mengubah nilai HEIGHT.

4. Simpan dan lihat hasilnya

Sekedar untuk contoh memasukkan link posting lihat dibawah :

<script type="text/javascript"></script>
    <div id="fungsiscroll" class="sidebar section">
    <h2 class="title" align="left">MP3 GRATIS</h2>
    <div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 160px">
    <ul>
    <li>> <a href="http://araya19.blogspot.com/2011/03/free-download-bon-jovi-mp3.html"> BON JOVI </a></li>
    <li>><a href="http://araya19.blogspot.com/2011/02/free-download-dream-theater-mp3.html">DREAM THEATER</a></li>
<li>><a href="http://araya19.blogspot.com/2011/02/free-download-roxette-mp3.html">ROXETTE</a></li>
<li>><a href="http://araya19.blogspot.com/2011/01/guns-n-roses-mp3.html">GUNS N ROSES </a></li>
</ul>
    </div>
    </div>

Selamat mencoba...

20.40

Ariawan

No comments

Inilah beberapa script efek salju dengan berbagai warna yang bisa anda gunakan untuk menghias blog anda. Untuk menggunakan script cukup dengan cara tambah gadget, pilih HTML/Javascript dan masukkan scriptnya, simpan dan letakkan dimana saja.

1. Efek salju merah

20.38

Ariawan

No comments

Ingin link dalam blog anda berkedip warna warni pada saat disorot mouse? Berikut caranya :

1. Login ke akun blogger
2. Klik Rancangan lanjut klik tab EDIT HTML
3. Cari kode </head>, tekan F3 untuk memudahkan pencarian
4. Kalau sudah ketemu copy paste kode berikut tepat dibawahnya

<script src="http://ajurna.googlecode.com/files/rainbow.js"></script>

5. Simpan template dan lihat hasilnya

Tutorial Blog

Kamis, 02 Juni 2011

Membuat Teks Berjalan Pada Blog

Menghilangkan Navigation Bar Blogger

Membuat Link Pada Blog

Membuat Navigasi Halaman Bernomor

Cara Mengganti Tullisan Posting Baru, Posting Lama Dan Beranda Dengan Icon Pada Blog

Membuat Daftar Isi Pada Sidebar

Script Efek Salju Berbagai Warna

Membuat Link Berkedip Pada Saat Disorot Mouse

Visitors

Mengenai Saya

Tags

Pengikut

Entri Populer

adsensecamp

Feedjit

Labels

Archives