Pages - Menu

Sabtu, 30 Juni 2012

Cara Membuat Warna Komentar Admin Berbeda

Suatu ketika teman-teman main2 ke suatu blog dan ingin memosting komen, pas lagi pengen mosting komen kok ngelihat ada warna yang berbeda yaaa...? Apanya...itunya lho warna dinding komennya ada yang berbeda, gak seperti warna dinding komen yang lain (ternyata stelah diintip2, ternyata yg punya komen tersebut adalah admin alias server alias empunya blog), wah gmana ne cara buat yg seperti itu...?.

Nah, itu yg ingin kita bahas di dalam postingan kali ini. Kalau teman-teman bertanya apa manfaat membuat warna admin berbeda, jawabannya ya jelas buat mbedain antara komen pengunjung dan admin. Dengan begitu mungkin ada yang pernah mosting komen berupa keluhan atau pertanyaan, maka nanti langsung tahu tuh kalau si admin sudah menjawab (dari sisi warna komen yg berbeda), dgn begitu mempermudah para pengunjung menemukan komen admin, tanpa harus meniliknya satu persatu (Nb: untuk memosting komen, Admin harus dalam keadaan Online/login Blogger), lanjuuutt.....

Cara bikinnya simpel, ikuti langkah2 berikut

1. Login ke blogger >> Tata Letak >> Edit HTML

2. Jangan lupa centang kotak "expand widget template"

3. Lalu cari kode: ]]></b:skin> dan pastekan kode berikut di atasnya...

.comment-body-author {
background: #CCCCCC;
border:1px dotted #FF6600;
margin:0;
padding:0 0 0 20px;
}



Ket:

Warna= Adalah warna background kotak komen [cari kode warna di sini]
Warna= Itu adalah border alias garis tepi, semakin besar nilai border maka semakin tebal. Bagi teman-teman yg gak senang garis tepi, maka 1px bisa diubah menjadi 0px
Warna= kalau yang itu adalah warna border/gris tepi [cari kode warna di sini]


4. Selanjutnya carilah kode: <data:commentPostedByMsg/>

5. Nah kalau dah ketemu, perhatikan kode berikut


<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>


ALTERNATIF LAIN: Kalau tidak ketemu kode <data:commentPostedByMsg/> maka langsung saja cari kode <dd class='comment-body'>, selanjutnya tinggal di tambah kode warna lumut di atasnya, dan jangan lupa di tutup bagian akhir dgn kode </b:if> ==> persis contoh di atas. (lihat contoh di atas dgn baik2 yaaa...)


6. Sudah memperhatikannya baik2? Kalau begitu tugasnya teman-teman hanya menambahkan kode yang berwarna lumut ke dalam kode seperti di atas (Ingat, kode ijo dan hitam sudah ada di dalam template-nya teman-teman, sedangkan yg lumut adlh kode yg perlu ditambahi)

7. Seperti biasa, simpan hasil kerjaannya teman2. Dah itu coba komen sendiri di kotak komen masing2



Ngomong2 admin blog ini menggunakan trik ini juga nggak ya...?

Jawabannya YA.

Tapi kok warna Adminnya gak kelihatan beda?

Hahaha, itu karena background-nya saya atur jadi warna putih, alias kalau dikode-in jadi [#FFFFFF], walau putih background-nya namun komen saya (empunya/admin) tetap tampil beda dengan adanya border/garis tepi yang super tebal itu (kalau teman-teman tertarik buat bikin seperti admin blog ini monggo, yang penting untuk warna background, tebal garis tepi serta warnanya kuncinya ada di langkah.3, lihat ke atas dunk), dah dulu ya...dah adzan tuh...^


Nb: untuk memosting komen, Admin harus dalam keadaan Online/login Blogger




Semoga Bermanfaat []
baca selengkapnya!!! »»  

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 selengkapnya!!! »»  

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....?


baca selengkapnya!!! »»  

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 selengkapnya!!! »»  

Jumat, 29 Juni 2012

Goo.gl Google URL shortener - Cara Memperpendek URL Agar URL Lebih Singkat



Goo.gl Google URL shortener - Cara Memperpendek URL Agar URL Lebih Singkat. Mungkin sebagian dari kita sudah tidak asing lagi dengan istilah URL Shortener, yaitu layanan untuk mempersingkat URL. Tujuannya? Youpz, jelas tujuannya untuk mempersingkat/memperpendek URL/alamat web maupun blog yang dirasa harus dipersingkat, mungkin dikarekan terlalu panjang atau sukar diingat. Di internet kita bisa mendapatkan layanan tersebut secara cuma-cuma, selain gratis - layanan seperti ini memang benar-benar sudah banyak bermunculan di internet, namun sesuai dengan judul postingan kali ini kita akan membahas tentang layanan Google URL Shortener, Goo.gl


baca selengkapnya!!! »»  

Menyapa Pengunjung dengan Alert Message

Pembahasan kita kali ini yaitu cara membuat "Alert Message". Apa itu alert message? Sebenarnya sih dari segi bahasa artinya pesan peringatan, mungkin itu mengenai bahaya atau memang sesuatu yang isinya untuk mengingatkan seseorang/ pengunjung, tapi ya gak apa-apa lah kita gunakan alert message ini buat menyapa para pengunjung blog kita, toh menyapa tak ada salahnya, iya nggak? Lalu apa kegunaan Alert Message ini selain buat menyapa para pengunjung? Bisa kita katakan kegunaannya ya untuk memperindah blog kita, selain itu membuat para pengunjung terkesan.

baca selengkapnya!!! »»  
Mengatur jumlah posting yang akan tampil di halaman depan juga termasuk penting. kenapa? Tentunya alasannya beragam-ragam, kita di sini mencoba untuk mengambil alasan yang berkaitan dengan tampilan, di mana kalau berurusan dengan tampilan ini pasti akan muncul pertanyaan "bagus atau tidak?", "menarik atau tidak?". Memang sih, untuk mengukur keindahan atau kebagusan dari suatu blog adalah isinya yaitu isi postingan yang disajikan. Tapi kita juga harus ingat bahwa gaya/ style juga berpengaruh lho terhadap mood para pengunjung blog kita.

Lalu bagaimanakah cara untuk mengatur jumlah postingan yang akan tampil di halaman depan blog kita?

Caranya adalah sebagai berikut:


baca selengkapnya!!! »»  

Cara memosting Kode HTML

Memosting kode HTML atau JavaScript lain halnya ketika kita ingin memosting tulisan biasa. Ketika kita ingin memosting kode HTML, ada beberapa langkah agar kode HTML yang kita posting bisa muncul sebagai kode HTML
baca selengkapnya!!! »»  

Cara memasang jam di blog

kali ini saya mau memberi tahu tentang bagaimana memasang jam di blog. agar blog kita mempunyai jam ada banyak cara untuk memasang jam di blog. Ada sebuah situs yang menyediakan berbagai bentuk jam apalagi di situs tersebut kita tinggal mengcopy dan paste kodenya tanpa harus registrasi terlebih dahulu ke situs tersebut situs-situs tersebut sangatlah banyak tetapi yang banyak di pakai adalah :

www.clocklink.com

Berikut cara memasang widget Jam di blogger

  1. Pertama kunjungi www.clocklink.com
  2. lalu klik pada menu Gallery (disitu kita bisa memilih kategori-kategori yang ingin kita pilih)
  3. sebagai contoh kategori analog kita pilih,
  4. kemudian klik view html tag pada kotak di bawah jam yang kita pilih lalu akan timbul halaman baru di window baru. disitu nanti kita ada ketentuan-ketentuan yang memakai bahasa inggris,
  5. langsung aja kita pilih accept
  6. Selanjutnya kita diminta memilih warna (color), {time zone untuk Waktu Indonesia Bagian Barat sebaiknya memilih JOG : Jogyakarta Indonesia Time (GMT + 07.00)} serta jangan lupa tuliskan ukuran (size) jam agar sesuai dengan sidebar tempat meletakan jam itu nantinya. Dapat juga diatur kemudian.
  7. Copy seluruh kode HTML kemudian disimpan di komputer kita contoh pada notepad.
Langkah selanjutnya kita menuju blog kita
  1. Silahkan login ke blogger dengan ID anda
  2. Klik Tata Letak
  3. Klik tab Elemen Halaman
  4. Klik Tambah Gadget
  5. Klik tanda plus (+) untuk HTML/Javascript
  6. Copy paste kode yang kita taruh di notepad tadi ke dalam kolom konten yang tersedia
  7. selesai
baca selengkapnya!!! »»  

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 selengkapnya!!! »»  

Cara Membuat Read More


penting Menjadi Ahli Desain Web

penting Lancar Percakapan Bahasa Inggris Cepat!

isi paypal dengan gratis
Apa itu read more? Dan apa kegunaannya? Kalau secara bahasa sih artinya baca selebihnya atau selanjutnya, akan tetapi kalau sudah berkaitan dengan dunia blogging maka "Read More" itu adalah suatu fitur yang biasa digunakan untuk menyingkat postingan. Agar lebih singkat, dengan adanya fitur read more ini postingan kita tidak akan tampil dalam bentuk yang sebenarnya, akan tetapi hanya sebagiannya saja. Dengan pendahuluan ini, pengertian dan kegunaan read more telah terjawab. Bagaimana? Masih bingungkah? Kalau belum ada bayangan mengenai Read More, bisa tuh nengok blog ini, teman-teman bisa pergi ke halaman depan blog ini, dan di bagian bawah posting ada tulisan "Baca Selengkapnya>>" nah, itulah yang dinamakan "read more".

Sebelumnya, untuk membuat "read more" ini kita harus mengedit beberapa kode CSS. Namun, karena sekarang pihak blogger sudah menyediakan fitur ini langsung untuk postingan kita, jadinya kita tidak perlu mengotak-ngatik kode CSS.

Lalu bagaimanakah caranya? Caranya yaitu cukup dengan mengetik kode berikut ini di bagian postingan yang ingin anda potong secara manual:

<!-- more -->

Maka, kode di atas akan terlihat jelas tatkala anda menulis postingan anda dalam mode Edit HTML, bukan mode Tulis, tampilannya seperti berikut ini:


Dan tampilan di postingan blog anda nantinya akan seperti di bawah ini:


Bagi anda yang menggunakan template klasik atau templet yang telah disediakan oleh blogger sejak awal, maka tahap-tahap di atas sudah cukup. Yaitu anda tinggal menulis kode yang berwarna hijau itu secara manual dalam keadaan Edit HTML. Akan tetapi masalahnya bagi yang menggunakan templet download-an atau templet gratis yang telah disediakan oleh pihak selain blogger, maka trik di atas akan tetap bekerja dengan baik. Namun tulisan Baca selengkapnya>> itu lho, nanti gak kelihatan. Wah jadinya repotkan kalau begitu. Oleh karena itu bagi teman-teman yang menggunakan templet download-an, perlu satu tahap lagi agar trik di atas bisa berjalan dengan lancar, yaitu dengan menambahkan beberapa kode di CSS templet.

Langkahnya adalah sebagai berikut:

1. Login ke akun blogger-nya anda.

2. Ketika di halaman Dasbor, silahkan untuk mengklik Tata Letak.

3. Sesampai di halaman Tata Letak, silahkan untuk mengklik Edit HTML.

4. Jangan lupa untuk mencentang kotak kecil yang berada di samping tulisan Expand Template Widget.



5. Dan selanjutnya, silahkan untuk mencari kode berikut ini: (saran: Gunakan tombol Ctrl+F)

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


6. Kemudian kopi kode di bawah ini, dan diletakkan persis di bawah kode tadi (no.5):

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>


7. Klik tombol Simpan Template.

8. Selesai...


Dengan cara di atas, maka tulisan "Read More" atau Baca selengkapnya>> akan terlihat di postingan blog anda.

Oh iya, tulisan "Read More" atau Baca Selengkapnya>> tersebut bisa anda ubah sesuai dengan selera anda, contohnya saja: Lanjutannya..., ...Selengkapnya, Lanjuuut....., dll. Maka caranya adalah sebagai berikut:

1. Pergi ke halaman Tata Letak.

2. Sesampai di halaman Tata Letak, perhatikanlah elemen "Posting Blog", lalu klik-lah tulisan Edit.


3. Selanjutnya akan tampil halaman window kecil baru, seperti di bawah ini:

4. Nah, teman-teman bisa mensetting tampilan tulisan read more-nya (bisa diganti dengan: baca selanjutnya..., ....selengkapnya,dll) di bagian yang telah ditandai dengan elips merah di atas.

5. Jangan lupa untuk mengklik tombol Simpan.

6. Selesai...


Nb: Tips tambahan.

Agar teman-teman tidak capek menulis kode <!-- more --> setiap kali ingin memosting sesuatu, maka ada tipsnya. Silahkan simak tips berikut ini:

1. Pergi ke halaman Pengaturan.


2. klik Format.


3. Di halaman Format, carilah bagian Templat Entri. Dan sekarang, tulislah kode tadi (<!-- more -->) ke dalam kolom Templat Entri tersebut.



4. Jangan lupa klik tombol Simpan Setelan.


5. Maka setiap kali anda ingin memosting sesuatu, anda tidak perlu menulis kode: <!-- more --> karena akan secara otomatis muncul di halaman pemostingan. Untuk melihatnya anda harus dalam keadaan/ mode Edit HTML.



6
. Selesai...
baca selengkapnya!!! »»  

Kamis, 28 Juni 2012

Cara memasang efek gelembung

 

Ada dua efek gelembung yang akan saya bagikan triknya ke sobat blogger. Efek yang pertama yaitu efek gelembung berwarna biru muda yang berjatuhan di blog sementara efek kedua yaitu efek gelembung terapung (float effect). Jika sobat penasaran bagaimana tampilan efeknya silahkan dicoba aja langkahnya dibawah ini:

Efek Pertama:
1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Carilah kode <body>
4. Paste kode dibawah ini dibawah kode <body>

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/bubble.js'/>
5. Simpan template sobat

Efek Kedua:
1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkkan kode berikut ini:

<script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/bubble2.js"></script>
5. Simpan gadjet
baca selengkapnya!!! »»