Rabu, 06 Maret 2013

Cara membuat teks dan tombol berkedip-kedip


Satu lagi trik yang membuat blog kita kelihatan menarik yaitu membuat tulisan dan link yang ada di blog kita bisa berkedip. Entah itu berkedipnya berkedip biasa maupun berkedip dengan pola warna-warni akan kita bahas bareng di postingan ini.


Copas aja kode script ini ke widget dan liat hasilnya

<blink>Dilarang main mata, nanti belekan lho...mau!</blink>


<blink><a href="http://tricksip.blogspot.com/">Dilarang main mata, nanti belekan lho...mau!</a></blink>

<blink><button>Dilarang main mata, nanti belekan lho...mau!</button></blink>

<a href="http://tricksip.blogspot.com/"><blink><button>Dilarang main mata, nanti belekan lho...mau!</button></blink></a>
Bagaimana teman-teman, keren kan? Mungkin ini aja dulu...

ket : ganti teks warna merah dengan teks yang diinginkan


MEMBUAT LINK BERKEDIP-KEDIP

Kalau begitu, untuk membuatnya cukup menerap pun langkah-langkah brikut:

1. Login ke Blogger >> Klik Tata Letak >> Klik Tambah Gadget/Add Gadget >> Pilih HTML/ Java Cript

2. Taruh kode berikut di dalamnya:
<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/kedip_rainbow.js
' type='text/javascript'/>

3. Simpan hasil kerjaan anda.


sumber :  http://tricksip.blogspot.com
»»  Baca Selanjutnya......

Cara Mengganti Icon Blogger pada Address Bar


Suatu ketika teman-teman berkunjung ke suatu blog, dan melihat ada yang aneh dengan blog tersebut, padahal ya membuat blognya menggunakan jasa blogger juga seperti teman-teman. Apa tuh keanehan yang dimaksud? Itunya lho icon yang ada di Address Bar-nya kok nggak berlogo Blogger[Contoh Blog ini:T4belajarblogger_address_bar(tulisan T4+B+Logo Blogger^]. Wah jadi pengen juga membuat icon seperti itu, tapi bagaimana caranya ya...?

Oh iya, maksudnya seperti ini lho:

Nah aslinya seperti di atas itu icon yang muncul di blonya teman-teman (kalau belum diotak-atik sama sekali). tapi teman-teman bisa mengganti icon Blogger tersebut dengan fotonya teman-teman ataupun gambar menarik lainnya.

Untuk mengganti icon tersebut tidaklah sulit, cukup terapkan langkah-langkah berikut:

1. Login ke Blogger.

2. Klik Tata Letak >> Edit HTML

3. Lalu cari kode </head>, dan letakkan kode berikut sebelum kode </head>



<link href='http://lh4.ggpht.com/_RVpTV2JOOxA/TBfOG70ZLRI/AAAAAAAADFg/a_QGnyThMsY/back_to_top03_t4belajarblogger.gif' rel='SHORTCUT ICON'/>




Keterangan:
Yang Biru itu bisa diganti dengan alamat URL gambarnya teman-teman.


4. Klik Simpan Template.

5. Selesai.

Coba lihat dah, bagaimana tampilan address bar blogger anda sekarang...^




Semoga Bermanfaat []
»»  Baca Selanjutnya......

Membuat Kotak Pencarian/ Search Engine di Blog


Membuat Kotak Search Engine atau kotak pencarian di blog juga bisa dikatakan penting. karena dengan adanya kotak pencarian ini, para pengunjung tidak perlu mencari satu persatu postingan yang ada di blog kita. Cukup dengan menulis kata kunci yang ingin dicari lalu klik enter atau tombol pencarian dan...ketemu dah. Bagaimana, tertarik untuk mencobanya?

Cara untuk memasang kotak pencarian di blog kita adalah sebagai berikut:

1. Login ke Blogger.

2. Klik Tata Letak.

3. Klik Tambah Gadget >> JavaScript/HTML, dan isikan kode berikut:



<form action="http://t4belajarblogger.blogspot.com/search"method="get"><input class="textinput" name="q" size="50" type="text"/><input value="Cari Tutorial Blogger" class="buttonsubmit"name="submit" type="submit"/></form>





Keterangan:

Biru=Ganti dengan alamat blog anda.
Merah=Adalah panjang kotak pencarian, silahkan disesuaikan.
Orange=Nama Tampilan Tombol Pencarian.



4. Simpan hasil kerjaan anda.

5. Selesai.



Nanti tampilannya akan seperti berikut ini:



Silahkan dicoba kotak pencariannya...
»»  Baca Selanjutnya......

Cara membuat read more pada blog, blogspot, Blogger


membuat read more pada blog, blogspot, blogger yang harus anda lakukan adalah sebagai berikut :

► Silahkan Login dan masuk di akun blogger anda
► lalu klik Rancangan dan klik Edit HTML
► Centang Expand Template Widget
► Untuk mempermudah pencarian kode HTML nya anda tekan aja ( CTRL + F )
► Cari kode </head> dan kalau sudah ketemu
► Lalu silahkan Tambahkan kode dibawah ini tepatnya diatas kode </head>




Bila anda ingin merubah ukuran Read More Pada Blog, Blogspot, Blogger anda, ubah aja di bagian-bagian kode di bawah ini, dan Ubah angka nya sesuai kebutuhan:

summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
summary_img = 340; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail

► langkah Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


► dan untuk kata " READ MORE " bisa diganti sesuai dengan selera anda.

setelah dipastikan semua udah terpasang dengan benar langkah selanjutnya adalah simpan template dan coba lihatlah hasilnya.

Okelah sobat itulah artikel tentang Cara Membuat Read More Pada Blog, Blogspot, Blogger yang mungkin bisa sedikit membantu anda. dan ingat, sebelum anda memasukan kode2 diatas sebaiknya anda backup terlebih dahulu template dengan cara download lengkap tempalte, langkah ini untuk antisipasi bila anda salah memasukkan kode yang ada. dan mungkin anda juga ingin Menampilkan Jumlah Visitor Online di blog atau Mempercantik Blog Dengan Gadget Blogspot dan mungkin juga menambahkan Daftar Isi atau Sitemap di Blog ?

► Dan untuk melihat contoh hasil dari Read more bisa anda lihat DISINI
»»  Baca Selanjutnya......

Cara Mengganti Kursor Blogger - Modifikasi Cursor Blogspot


Cara Mengganti Kursor Blogger - Modifikasi Cursor Blogspot. Kali ini kita akan membahas tentang cara mengubah tampilan kursor yang ada di blog kita. Jika sobat masih penasaran dengan yang dimaksud mengubah kursur, maka silahkan untuk memperhatikan kursor blog ini terlebih dahulu. Bagaimana? Menarik bukan....?


Nah, di atas itu adalah tampilan kursor blog ini. Bagi sobat yang ingin mengubah kursor yang ada di blog sobat, maka sobat bisa mengubahnya melalui langkah-langkah berikut:

1. login lah ke akun blogger sobat terlebih dahulu
2. Lalu klik "Layout"

3. Pilih "add a gadget" lalu pilih "HTML/Java Script" dan paste-kan kode berikut untuk mulai mengubah tampilan kursor yang ada di blog sobat:

a. Kode 1: mengubah kursor tapi tidak mengubah kursor ketika menyorot link

<style type="text/css">
body{cursor: url("http://lh5.ggpht.com/_RVpTV2JOOxA/S-5sHPOG-yI/AAAAAAAAC-8/aOb1yn36uAE/cursor_t4belajarblogger.gif"), auto;}
</style>

b. Kode 2: mengubah kursor serta tetap berubah walau disorot ke arah link

<style type="text/css">
body{cursor: url("http://lh5.ggpht.com/_RVpTV2JOOxA/S-5sHPOG-yI/AAAAAAAAC-8/aOb1yn36uAE/cursor_t4belajarblogger.gif"), auto;}
body a:hover{cursor: url("http://lh5.ggpht.com/_RVpTV2JOOxA/S-5sHPOG-yI/AAAAAAAAC-8/aOb1yn36uAE/cursor_t4belajarblogger.gif"), auto;}
</style>

SILAHKAN UNTUK MEMILIH SALAH SATU KODE YANG SOBAT INGINKAN

4. Jika sudah, maka silahkan untuk tekan tombol "SAVE" atau "SIMPAN"


PENTING:

Sobat bisa mengganti link gambar yang telah saya tandai warna biru dengan link gambar kursor sesuai keinginan sobat. Berikut adalah beberapa link gambar kursor koleksi saya:


Link:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPFGd-65vNu3fEAS83SdXuGb7o4W4hKCDYRpIP754w6e3dU25dbDf6kh8BAJwf_v0hAR-ZsnaAONlmorJ6zA22Kh73acGY2Ib8gcwcuPjcsA4OlJtHn47mA79SXQ2shm2Ujmnjm4sXSA/s400/bat_banana_t4belajarblogger.png



Link:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb-onfDW58EiPaUIlXe6Tp_e3y9coS7qaU5Ep1V8_BiUUdD4avcrS0sU7lscw9gEfFFO-8HtmQY-wZ14sHKQBXo7MjEHIyRpo1DypuDZGjnQggSD1L6HRbtGOCnGHeb9oQg40Xi2gDWI0/s400/bird_hair_t4belajarblogger.png



Link:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ5Uu9wzoFM3Os4_eJ304G0vlTYRr_H7pyVvoH84_InNYE_YfG1HP5iTLtCJvff91h5_I6uo83Cb7q8C4e5UMnHkzwj3lwi16jWihIV9T8n0dFMqkNI9S3B5fYBgK-ZjsSAbqlFKTAcyQ/s400/guitar_banana_t4belajarblogger.png
»»  Baca Selanjutnya......