Membuat Tulisan Terbalik

Posted by Unknown on Saturday, May 30, 2009

Membuat Tulisan Terbalik dengan Flip Text Generator : Setelah melakukan kegiatan “ronda malam” di “rumah mewahnya” Kang Rohman, saya menemukan postingan yang baru yang mungkin sahabat blogger membutuhkannya atau jika pun tidak membutuhkannya, anggaplah sebagai tambahan pengetahuan, yaitu tips membuat tulisan terbalik. Dengan bantuan tool online, Flip Text Generator, hal tersebut sangat mudah dan praktis dilakukan. Jika tertarik, silakan ikuti tipsnya berikut ini bersama Tips dan Trik Blog.

Contoh hasilnya adalah seperti ini.

˙˙˙`ǝɥ˙˙`ǝɥ ɥǝu ƃuısnd ıpɐɾ ɐlɐdǝʞ ɹɐʇu˙˙`ɐʎ`ɐɔɐqıp nlɹǝd ʞɐpıʇ ƃuɐʎ ʞılɐqɹǝʇ uɐsılnʇ ɥoʇuoɔ ɥɐlɐpɐ ıuı

Cara membuatnya??

Pertama, kunjungi situs http://www.fliptextgenerator.com/



Kedua, tuliskan kata-kata atau tulisan yang ingin dibuat terbalik pada kotak “Original Text (type here)”. Sayangnya tool ini tidak mengenal huruf kapital, artinya apa pun yang kita ketikkan baik dengan huruf kapital atau kecil "outputnya' tetap huruf kecil.

Ketiga, seketika itu juga, tulisan yang kita ketikkan akan ditampilkan pada kotak “Flipped text (point your mouse over)

Keempat, arahkan mouse ke teks yang terbalik dan secara otomatis teksnya akan menjadi terseleksi.

Kelima, kemudian kita dapat men-copy teksnya untuk dipastekan ke email, postingan blog, facebook, dan lain-lain sesuai kebutuhan.

Keenam, selesai.

¡¡¡ɐqoɔuǝɯ ʇɐɯɐlǝs
Description: Membuat Tulisan Terbalik Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Tulisan Terbalik
More aboutMembuat Tulisan Terbalik

Memberi Highlight Pada Teks Tertentu

Posted by Unknown on Friday, May 29, 2009

Menonjolkan Teks Tertentu Dalam Postingan : Sebenarnya Tips dan Trik Blog pernah mengetengahkan tips serupa di sini. Pada tips yang kedua ini, walaupun cara penggunaannya tidak sepraktis yang terdahulu namun kita dapat memperoleh efek/tampilan yang lebih fleksible. Dengan cara mengganti warna background, atau jenis/warna border, jika menginginkan, kita akan mendapatkan hasil tampilan/warna yang berbeda-beda antara satu dengan yang lainnya sesuka kita.

Fleksible??!!! Maksud saya begini,…

Kita dapat memberi efek/tonjolan yang berbeda antara suatu teks tertentu dengan teks lainnya atau bahkan kita dapat memberi background berupa image.

Contohnya begini.

Pada teks yang pertama, saya menginginkan warna backgroundnya hijau dan pada teks yang kedua saya ingin memberikan warna background biru, dan kemudian pada teks yang ketiga, saya ingin memberikan background image, masing-masing seperti di bawah ini.

Tampilan Pertama

NAMAMU

Namamu adalah manis terngiang di telingaku selalu
dalam malam berbisik dalam siang berteriak
namamu adalah sayap kupu-kupu
namamu terbang dalam kalbu
mengigau tidurku
menggumam lamunku

http://yosepnugroho.tripod.com/


Tampilan Kedua


NAMAMU

Namamu adalah manis terngiang di telingaku selalu
dalam malam berbisik dalam siang berteriak
namamu adalah sayap kupu-kupu
namamu terbang dalam kalbu
mengigau tidurku
menggumam lamunku

http://yosepnugroho.tripod.com/



Tampilan Ketiga



NAMAMU

Namamu adalah manis terngiang di telingaku selalu
dalam malam berbisik dalam siang berteriak
namamu adalah sayap kupu-kupu
namamu terbang dalam kalbu
mengigau tidurku
menggumam lamunku

http://yosepnugroho.tripod.com/



Bagaimana cara untuk membuatnya?? Berikut caranya.

Untuk membuat seperti Tampilan Pertama dan Tampilan Kedua, adalah dengan menggunakan kode html dengan format seperti di bawah ini.

<div style="background:#9AFE2E; border:1px dotted #0B3B0B; padding:10px;">
TEKS YANG INGIN DIBERI HIGHLIGHT
</div>


Keterangan

background: #9AFE2E
Adalah kode untuk warna background yang kita dapat ganti dengan warna lainnya sesuai selera masing, untuk kode warna dapat dilihat di sini.

border:1px dotted #0B3B0B
Adalah kode untuk border, di mana kita dapat merubahnya sesuai selera dan kebutuhan masing-masing,
1px menunjukkan ukuran border yaitu sebesar 1 pixel,
dotted menunjukkan style border,
dan #0B3B0B adalah kode warna border.

Padding:10px
Adalah kode yang digunakan untuk memberi jarak atau space dari antara garis dan content (isi), di mana kita juga dapat merubahnya sesuai kebutuhan.

Untuk membuat tampilan yang ketiga adalah dengan kode html dengan format seperti berikut ini.


<div style="background:url(URL_Image); width:400px; height:300px; padding:10px;">

TEKS YANG INGIN DIBERI HIGHLIGHT

</div>

Keterangan

background:url(URL_Image)
Adalah kode image untuk background, kita dapat mengganti URL_image masing-masing

width:400px; height:300px
Adalah kode lebar dan tinggi area yang dapat kita sesuaikan dengan kebutuhan masing-masing.

Selamat Mencoba

Baca juga yang ini.

Highlight Pada Postingan Bagian Pertama
Description: Memberi Highlight Pada Teks Tertentu Rating: 4.5 Reviewer: Unknown - ItemReviewed: Memberi Highlight Pada Teks Tertentu
More aboutMemberi Highlight Pada Teks Tertentu

Membuat Format Spasi Teks Tidak Berubah

Posted by Unknown

Membuat Format Spasi Teks Tidak Berubah : Pernahkah kita mengetikkan teks yang telah kita format spasinya sedemikian rupa namun setelah mem-publish-nya format spasinya menjadi rata atau tidak seperti yang kita ketikkan? Begini, kadang-kadang untuk memberi variasi tampilan atas suatu teks/tulisan, kita perlu memberikan spasi sedemikian rupa sehingga tulisan menjadi menjorok ke kanan. Namun apa yang terjadi, setelah capek-capek membuatnya, setelah kita mem-publish-nya, format spasinya (menjorok tidaknya) tidak seperti yang kita format sebelumnya.

Masih bingung?!! Sama, dong, he,.. he,… Begini saja, coba kita ketikkan tulisan dengan format seperti di bawah ini pada halaman pengetikan (post editor). Gunakan space bar untuk memberikan spasi sehingga tulisan menjadi menjorok ke dalam (ke kanan).


Indonesia tanah airku
Tanah tumpah darahku
Disanalah aku berdiri
Jadi pandu ibuku
Indonesia kebangsaanku
Bangsa dan Tanah Airku
Marilah kita berseru
Indonesia bersatu

Hiduplah tanahku
Hiduplah negriku
Bangsaku Rakyatku semuanya
Bangunlah jiwanya
Bangunlah badannya
Untuk Indonesia Raya

Indonesia Raya
Merdeka Merdeka
Tanahku negriku yang kucinta

Indonesia Raya
Merdeka Merdeka
Hiduplah Indonesia Raya

Indonesia Raya
Merdeka Merdeka
Tanahku negriku yang kucinta
Bla,… bla,…
Bla,… bla,…
Bla,… bla,…


Coba sekarang terbitkan (publish) dan kemudian bukalah halaman postingan yang baru saja kita terbitkan tersebut. Kemudian perhatikan apakah yang terjadi dengan yang telah ketikkan tersebut? Pastinya spasi yang telah kita format sedemikian rupa akan menjadi hilang atau rata, seperti di bawah ini.

Indonesia tanah airku
Tanah tumpah darahku
Disanalah aku berdiri
Jadi pandu ibuku
Indonesia kebangsaanku
Bangsa dan Tanah Airku
Marilah kita berseru
Indonesia bersatu

Hiduplah tanahku
Hiduplah negriku
Bangsaku Rakyatku semuanya
Bangunlah jiwanya
Bangunlah badannya
Untuk Indonesia Raya

Indonesia Raya
Merdeka Merdeka
Tanahku negriku yang kucinta

Indonesia Raya
Merdeka Merdeka
Hiduplah Indonesia Raya

Indonesia Raya
Merdeka Merdeka
Tanahku negriku yang kucinta
Bla,… bla,…
Bla,… bla,…
Bla,… bla,…



Untuk mengatasinya, apitlah teks yang tidak ingin format spasinya berubah dengan kode <pre> dan </pre>. Contohnya, ketikkan seperti di bawah ini.

<pre>Indonesia tanah airku
Tanah tumpah darahku
Disanalah aku berdiri
Jadi pandu ibuku
Indonesia kebangsaanku
Bangsa dan Tanah Airku
Marilah kita berseru
Indonesia bersatu

Hiduplah tanahku
Hiduplah negriku
Bangsaku Rakyatku semuanya
Bangunlah jiwanya
Bangunlah badannya
Untuk Indonesia Raya

Indonesia Raya
Merdeka Merdeka
Tanahku negriku yang kucinta

Indonesia Raya
Merdeka Merdeka
Hiduplah Indonesia Raya

Indonesia Raya
Merdeka Merdeka
Tanahku negriku yang kucinta
Bla,… bla,…
Bla,… bla,…
Bla,… bla,…</pre>


Setelah itu, terbitkan postingan tersebut. Kemudian coba liatlah hasilnya dan pastikan format spasinya tidak berubah, persis seperti yang kita ketikkan sebelumnya.

Hasilnya seperti di bawah ini.

Indonesia tanah airku
Tanah tumpah darahku
Disanalah aku berdiri
Jadi pandu ibuku
Indonesia kebangsaanku
Bangsa dan Tanah Airku
Marilah kita berseru
Indonesia bersatu

Hiduplah tanahku
Hiduplah negriku
Bangsaku Rakyatku semuanya
Bangunlah jiwanya
Bangunlah badannya
Untuk Indonesia Raya

Indonesia Raya
Merdeka Merdeka
Tanahku negriku yang kucinta

Indonesia Raya
Merdeka Merdeka
Hiduplah Indonesia Raya

Indonesia Raya
Merdeka Merdeka
Tanahku negriku yang kucinta
Bla,… bla,…
Bla,… bla,…
Bla,… bla,…


APLIKASI UNTUK PEMPOSTINGAN KODE HTML
(KODE PEMROGRAMAN)

Bagi yang sering memposting kode html (kode pemrograman) ke dalam halaman postingan mungkin membutuhkan kode tersebut untuk menjaga agar format spasi sama persis dengan format aslinya.

Bingung, ya!! Sama donk,…

Begini saja,………..

Coba sekarang ketikkan kode html seperti di bawah ini. Buatlah dua postingan dengan cara yang berbeda.
Untuk postingan yang pertama, cobalah mempostingnya tanpa memberi kode <pre> dan </pre>. Kemudian perhatikan hasilnya.

Sedangkan untuk yang kedua, buatlah postingan dengan menggunakan <pre> dan </pre> kemudian lihat perbedaannya dengan cara yang pertama.

<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore,..</a>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Dengan cara yang pertama hasilnya menjadi seperti di bawah ini.

<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore,..</a>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>



Sedangkan cara yang kedua, hasilnya seperti di bawah ini.

<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore,..</a>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Tentunya, kita lebih suka dengan hasil yang kedua kan di mana format kode html-nya persis seperti kode aslinya sehingga para pengunjung lebih mudah dalam memahaminya.

Selamat Mencoba!!!
Description: Membuat Format Spasi Teks Tidak Berubah Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Format Spasi Teks Tidak Berubah
More aboutMembuat Format Spasi Teks Tidak Berubah

Membuat Link Dalam Satu Halaman

Posted by Unknown on Thursday, May 28, 2009

ke bagian bawah
Membuat Link Kembali Ke Atas : Jujur, saya merasa kebingungan untuk memberikan judul postingan ini. Yang jelas, tips kali ini dapat kita aplikasikan untuk halaman postingan yang panjang. Kenapa? Ketika kita membaca halaman yang panjang pastilah kita harus melakukan scroll ke bawah dan ke atas untuk membaca semua isi tulisannya dan hal ini dapat menjengkelkan ketika kita harus melakukannya beberapa kali.

Nah, untuk itu, kita dapat membuat link yang dapat menggantikan fungsi scroll tersebut. Praktisnya begini, ketika kita membaca tulisan sampai pada akhir halaman tiba-tiba kita ingin mengulangi tulisan yang berada di bagian atas maka dengan mengklik klik yang kita buat tersebut, kita akan menuju ke bagian atas tulisan tersebut dengan cepat.


MEMBUAT LINK KE BAGIAN ATAS

Langkah-langkahnya adalah sebagai berikut.

Pertama,
  • Login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

  • Cari dan temukan kode <body>

  • tempatkan kode dengan format seperti di bawah ini persis di bawah <body>.

    <a name="atas"></a>



    Kita dapat mengganti kata “atas” dengan nama atau sebutan lain yang mungkin lebih berasosiasi ke bagian tertentu, misalnya “bawah” (asosiasinya mengarah kepada bagian bawah halaman atau tulisan), atau bisa “tengah” (ke bagian tengah halaman), dan lain-lainnya. Saya menggunakan kata “atas” karena asosiasinya mengarah ke bagian atas.


  • Kemudian simpan template

Kedua,
  • Kemudian kita masuk ke halaman pengetikan / post editor (Dasbor >> Entri Baru).

  • Kemudian kita ketikkan isi postingan

  • Kemudian tempatkan (sisipkan) kode dengan format seperti di bawah ini di bagian paling bawah dari tulisan/postingan atau di bagian lain sesuka kita.

    <a href="#atas">kembali ke atas </a>


    Kita dapat mengganti “kembali ke atas” dengan tulisan yang lain sesuai selera masing-masing.

  • Terbitkan (publish) postingan kita tersebut


Ketiga,
Sekarang kita buka blog kita dan bukalah postingan yang baru saja kita buat tadi kemudian klik link yang baru kita buat, dalam contoh di sini adalah “kembali ke atas” dan pastikan kita dapat melihat hasilnya yaitu kita akan di bawa ke bagian atas halaman blog kita. Sebagai contoh, kliklah link di bawah ini dan lihatlah efeknya.

KE BAGIAN ATAS

Keempat, selesai


MEMBUAT LINK KE BAGIAN BAWAH

Jika menginginkan, kita dapat membuat link yang mengarah kepada bagian tertentu dari halaman postingan, misalnya ke bagian bawah tulisan, atau ke bagian tengah tulisan. Langkah-langkahnya sebagai berikut.

Pertama,
  • Masuk ke halaman pengetikan/post editor (dasbor>>Entri Baru>

  • Ketikkan isi postingan hingga selesai

  • Tempatkan atau sisipkan dengan format seperti di bawah ini pada bagian di mana kita ingin link di bawa ke bagian tersebut.
    Jika ingin kita dibawa ke bagian bawah tulisan maka letakkan kode di bawah ini pada akhir tulisan. Jika kita ingin di bawa ke bagian tengah tulisan, maka letakkan kode di bawah ini pada bagian tengah-tengah tulisan.

    <a name="bawah"></a>

    Seperti yang telah saya sebutkan di atas, kita juga dapat mengganti “bawah” dengan nama atau sebutan yang lain sesuai selera masing-masing.


Kedua,
  • tempatkan atau sisipkan kode dengan format seperti di bawah ini di bagian tulisan yang kita inginkan, misalkan kita tempatkan di bagian atas tulisan.

    <a href="#bawah">KE BAGIAN BAWAH</a>


  • kemudian terbitkan atau publish postingan tersebut

Ketiga,
  • Kemudian buka blog dan bukalah halaman postingan yang baru saja kita buat tersebut dan cobalah untuk mengklik yang kita buat tersebut dan pastikan kita akan di bawa ke bagian bawah tulisan atau postingan.


  • Untuk melihat hasilnya, silakan klik link “ke bagian bawah” yang berada di bagian atas dari postingan ini.

Keempat, selesai

MEMBUAT LINK KE TULISAN TERTENTU DALAM SATU HALAMAN

Kita juga dapat membuat link yang dapat kita arahkan ke tulisan tertentu dari suatu postingan. Caranya sama dengan langkah-langkah di atas, tempatkan kode pertama sebelum tulisan (kata) yang ingin dituju tersebut. Kemudian buatlah link dengan menempatkan kode yang kedua ke bagian tulisan yang diinginkan.

Contohnya, silakan diklik masing-masing link di bawah ini dan lihatlah hasilnya.

ke MEMBUAT LINK BAGIAN ATAS
ke MEMBUAT LINK BAGIAN BAWAH
ke BAGIAN ATAS


Selamat Mencoba!!!
Description: Membuat Link Dalam Satu Halaman Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Link Dalam Satu Halaman
More aboutMembuat Link Dalam Satu Halaman

Tips Membuat Link Image

Posted by Unknown on Tuesday, May 26, 2009

Tips Membuat Link Image : Daripada kehabisan bahan posting, kali ini Tips dan Trik Blog akan mencoba mengetengahkan cara membuat link image. Yang dimaksud dengan link image di sini adalah link yang berupa gambar atau image yang lainnya di mana ketika kita mengklik gambar atau image tersebut maka kita akan dibawa ke suatu link tertentu. Ikuti tipsnya berikut ini.

Langkah-langkah untuk membuat link image adalah sebagai berikut.

Pertama, buatlah image yang akan dijadikan sebagai link dengan menggunakan image/photo editor, seperti photoshop, corel draw, GIMP, atau yang sejenisnya.
Atau jika menginginkan, kita dapat menggunakan image atau gambar yang dapat kita peroleh dari internet.

Kedua, setelah mempunyai imagenya, langkah berikutnya adalah mengupload image tersebut pada image/photo hosting. Jika belum mempunyai image/photo hosting sendiri, kita dapat menggunakan image/photo hosting gratisan yang banyak kita temukan mudah di internet, seperti photobucket, imageshack, geocities, dan lain-lain.

Setelah menguploadnya, kita akan dapat mengetahui alamat URL image kita tersebut. Formatnya seperti di bawah ini.

<img src="URL_Image">


Contohnya, seperti di bawah ini.

<img src="http://www.geocities.com/yono_pati/intan.gif"/>


Ketiga, tentukan alamat URL Link yang akan kita jadikan sebagai target. Formatnya seperti di bawah ini.

<a href="URL_Link">


Contohnya, seperti di bawah ini.

<a href="http://tips-trik-blog.blogspot.com">


Keempat, setelah kita mempunyai alamat URL image dan juga sudah menentukan URL link (tujuan) maka kita sudah dapat membuat link image dan formatnya seperti di bawah ini.

<a href="URL_Link"><img src="URL_Image"/></a>



Dengan contoh yang telah digunakan di atas maka susunannya menjadi seperti di bawah ini.

<a href="http://tips-trik-blog.blogspot.com"><img src="http://www.geocities.com/yono_pati/intan.gif"/></a>



Jika tidak menginginkan image-nya dikelilingi border maka kita harus menambahkan kode border="0" dan juga jika menginginkan ketika diklik link-nya terbuka pada jendela baru maka kita harus menambahkan kode target="_blank" sehingga menjadi seperti di bawah ini.

<a href="http://tips-trik-blog.blogspot.com"target="_blank"><img src="http://www.geocities.com/yono_pati/intan.gif" border="0"/></a>

Kelima, selesai.


Hasilnya berupa image seperti di bawah ini dan jika mengkliknya maka kita akan dibawa menuju ke URL http://tips-trik-blog.blogspot.com.



Selamat Mencoba!!

Baca juga Link Terbuka Pada Jendela baru
Description: Tips Membuat Link Image Rating: 4.5 Reviewer: Unknown - ItemReviewed: Tips Membuat Link Image
More aboutTips Membuat Link Image

Efek Bunga Bertaburan Pada Blog

Posted by Unknown on Saturday, May 23, 2009

Script Efek Blog Bertaburan Bunga : Jika bosan dengan efek yang telah digunakan selama ini, kita dapat mencoba script yang lain, seperti yang akan Tips dan Trik Blog sampaikan berikut ini. Dengan memasang script tersebut, kita akan mendapatkan efek bunga bertaburan pada blog kita. Jika tertarik, silakan ikuti tipsnya berikut ini.

Langkah-langkah untuk memasang script tersebut adalah sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML
Kedua, cari dan temukan kode <body>
Ketiga, kemudian letakkkan script berikut ini di bawah kode <body> tersebut.

<script language=”Javascript” src=”http://www.geocities.com/yono_pati/bunga.js”> </script>


Keempat, Simpan Template
Kelima, selesai

Jika langkah-langkah tersebut dirasa kurang praktis, kita dapat menambahkan script tersebut pada gadget, dengan langkah-langkah seperti di bawah ini.

Pertama, login account blogger hingga masuk Dasbor >> Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript >>
Kedua, copykan script yang telah disebutkan di atas tersebut.
Ketiga, simpan perubahan
Keempat, selesai

Sekarang, refresh blog kita dan pastikan blog kita sudah “bertaburan bunga”. Oh, iya untuk tips selanjutnya, Tips dan Trik Blog akan mengetengahkan script yang membuat blog bertaburan “bunga bank”, pasti lebih seru, he,..he,..


Selamat Mencoba!!
Description: Efek Bunga Bertaburan Pada Blog Rating: 4.5 Reviewer: Unknown - ItemReviewed: Efek Bunga Bertaburan Pada Blog
More aboutEfek Bunga Bertaburan Pada Blog

Membuat Judul Postingan Menjadi Judul Blog

Posted by Unknown on Thursday, May 21, 2009

Membuat Judul Postingan Menjadi Judul Blog : Ketika kita membuka halaman suatu blog, kita akan melihat judul blog diikuti dengan judul postingan pada title bar pada browser yang kita gunakan. Sebagai contoh, ketika kita membuka postingan “Pengaturan Tampilan Komentar Autor Blog” pada blog ini maka kita akan melihat tampilan “Tips dan Trik Blog : Pengaturan Tampilan Autor Blog” pada title bar.

Dengan tampilan seperti itu, selain tulisan yang muncul pada title bar menjadi lebih panjang juga dengan format seperti ini menurut ahli SEO, membuat judul postingan dinilai kurang SEO friendly.

Jika menginginkan, kita dapat membuat judul postingan menjadi judul blog sehingga lebih SEO friendly. Dengan demikian, search engine akan dapat men-detect setiap judul postingan sebagai suatu keyword tersendiri. Selain itu, ketika kita membuka halaman suatu postingan (artikel) tertentu maka yang akan muncul pada title bar hanya judul postingan (artikel) tersebut sehingga lebih simple dan pendek.

Untuk membuat postingan menjadi judul blog, langkah-langkahnya sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, jangan lupa centangi “Expand Widget Template”

Ketiga, cari dan temukan kode di bawah ini yang letaknya di bawah kode <head>

<title><data:blog.pageTitle/></title>



Keempat, ganti kode tersebut dengan kode di bawah ini.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>



Kelima, simpan template

Keenam, selesai.

Sekarang refresh blog kemudian buka salah satu postingan dan pastikan judul postingan tersebut sudah muncul pada title bar, seperti dapat kita lihat pada blog ini.

Jika memang blog kita sudah terindex oleh suatu search engine maka ketika kita mengetikkan keyword tertentu pada search engine tersebut, kita akan dapat melihat hasilnya seperti di bawah ini, di mana judul blognya tidak “ikut terbawa" lagi.


Sebelum merubahnya, dalam hasil pencarian dengan suatu search engine kita akan melihat hasilnya seperti di bawah ini, di mana judul blog-nya ikut “terbawa”.


Sukses!!
Description: Membuat Judul Postingan Menjadi Judul Blog Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Judul Postingan Menjadi Judul Blog
More aboutMembuat Judul Postingan Menjadi Judul Blog

Internet Marketing

Posted by Unknown on Monday, May 18, 2009

We all know that Internet is the most advanced invention in the world. Almost all people in the world now use Internet for many kinds of purposes; browsing data or information their study or job, shopping or buying products online, studying online, promoting online and many more. Right now, many individuals, companies or those who have products to sell, use Internet as their media to sell and promote their business and products. People or companies prefer using Internet or what people call as Internet Marketing because it gives many advantages, especially for those who have online business. Internet Marketing will be the right and the best place for online businessmen to introduce, publish, and promote their online business. When their marketing is successful, they will get a lot of money or earning. For example, when have handicraft and plan to sell it through the Internet, we just need to make a web site. After the web is ready, we place our products in the Internet, promote with many kind of ways. There have been a lot of successful people or online businessmen after using Internet Marketing. Now, how about you? Have you tried Internet marketing for your online business? If not, It is the time to start it.

Description: Internet Marketing Rating: 4.5 Reviewer: Unknown - ItemReviewed: Internet Marketing
More aboutInternet Marketing

Pengaturan Tampilan Komentar Autor Blog

Posted by Unknown on Friday, May 15, 2009

Tips Membuat Komentar Pemilik Blog Berbeda : Walaupun sudah banyak blogger yang membahas tentang tema yang satu ini, Tips dan Trik Blog tetap “nekad” untuk mempostingnya, siapa tahu masih ada para pengunjung yang masih membutuhkannya. Dengan tips tersebut, kita akan membuat tampilan komentar pemilik blog yang berbeda dengan komentar yang dilakukan oleh pengunjung blog. Jika tertarik, silakan ikuti tipsnya berikut ini.

Dengan tampilan komentar yang berbeda maka para pengunjung akan dengan mudah mengetahui adanya jawaban atau komentar balik atas komentar atau pun pertanyaan yang dilakukan oleh pengunjung blog.

Oh, iya tampilan komentar pemilik blog akan berbeda apabila si pemilik blog tersebut melakukan login terlebih dahulu dengan account blogger yang dimiliknya. Jika tidak, maka tampilan komentarnya tidak berbeda dengan tampilan komentar pengunjung lainnya.

Untuk membuatnya, silakan ikuti langkah-langkahnya berikut ini.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, jangan lupa centangi pada “Expand Widget Template
Ketiga, dengan Ctrl+F (jika menggunakan Firefox), temukan kode "comments-block" sehingga kita akan menemukan baris kode-kode berikut dan kemudian sisipkan kode yang berwarna merah di dalamnya, dan letakkan seperti di bawah ini.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<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'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>



Keempat, setelah itu, temukan code css comment-body. Setiap template mempunyai code yang berbeda namun mempunyai kemiripan. Sebagai contoh, karena pada kesempatan ini saya menggunakan template “Minima” maka kita akan menemukan css comment-body, seperti di bawah ini.

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}



Pada template Rounder, kita akan menemukan comment-body, seperti di bawah ini.

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}


Kelima, tempatkan kode dibawah ini di bawah kode yang disebutkan di atas, sehingga menjadi seperti di bawah ini. (Kode yang berwarna merah adalah kode yang baru saja kita tambahkan).

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#C3FDB8;
}



Atau pada template Rounder akan menjadi seperti di bawah ini.

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#C3FDB8;
}

Keterangan

  • Jika menginginkan, kita dapat merubah ketebalan border, jenis border, atau warna border, begitu juga dengan background-nya, kita dapat mengganti warna sesuai selera masing-masing.
  • Padding bertujuan untuk menggeser ke kanan agar tidak bertabrakan dengan warna background, jika menginginkan dapat mengganti angkanya.

Keenam, simpan template
Ketujuh, selesai

Sekarang, bukalah salah satu postingan dan berikanlah komentar sebagai pemilik account dan pastikan tampilan komentar kita sebagai pemilik account telah berbeda dengan tampilan komentar pengunjung lain. Di bawah ini, screenshot contoh tampilan komentar tersebut.



Selamat Mencoba!!

(Referensi : Tips For New Bloggers)
Description: Pengaturan Tampilan Komentar Autor Blog Rating: 4.5 Reviewer: Unknown - ItemReviewed: Pengaturan Tampilan Komentar Autor Blog
More aboutPengaturan Tampilan Komentar Autor Blog

Tips Membuat Seleksi Teks

Posted by Unknown

Tips Membuat Seleksi Teks : Dengan tips tersebut, kita dapat memberikan kemudahan kepada para pengunjung yang ingin melakukan seleksi atas teks tertentu yang memang sengaja siapkan untuk tujuan tersebut. Salah satu contoh penggunaan “fasilitas” tersebut adalah dapat kita aplikasikan pada sarana tukar link (link exchange). Dengan menambahkan “fasilitas” tersebut akan memudahkan para pengunjung yang ingin memasang banner link kita pada blog mereka masing-masing. Jika tertarik, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

Untuk membuat fasilitas seleksi teks, formatnya adalah seperti di bawah ini.

<div><form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/>
<textarea style="WIDTH: 170px; HEIGHT: 100px" name="txt" readonly="readonly" wrap="VIRTUAL">
teks atau tulisan yang diinginkan
</textarea></div></form></div>



Keterangan

  • <div align=”center”> agar button dan kotak menjadi rata tengah
  • Kata “Select All” dapat diganti sesuai selera masing-masing.
  • Angka pada width menunjukkan lebar kotak yang dapat diubah sesuai kebutuhan.
  • Angka pada height menunjukkan tinggi kotak yang juga dapat diubah sesuai kebutuhan.
  • Tambahkan Readonly=”readonly” jika ingin teks atau tulisannya tidak dapat berubah/diubah.
  • Ganti tulisan "teks atau tulisan yang diinginkan" dengan tulisan yang diinginkan.

Contoh penggunaan seperti di bawah ini.

<div><form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/>
<textarea style="WIDTH: 400px; HEIGHT: 125px" name="txt" readonly="readonly" wrap="VIRTUAL">
Untuk mengetahui hasilnya, silakan pengunjung klik button "select all". Setelah diklik maka kita akan melihat bahwa teks atau tulisan ini menjadi terseleksi yang kemudian dapat dicopy dengan cara klik kanan pilih copy (salin) kemudian paste di tempat yang kita inginkan.
</textarea></div></form></div>



Hasilnya seperti di bawah ini.




Contoh aplikasi untuk bertukar link adalah seperti di bawah ini.

<div><form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/>
<textarea style="WIDTH: 170px; HEIGHT: 100px" name="txt" readonly="readonly" wrap="VIRTUAL">
<a href="http://tips-trik-blog.blogspot.com" target="_blank"><img border="0" src="http://www.geocities.com/yono_pati/mychicklet.gif"/></a>
</textarea></div></form></div>




Hasilnya seperti di bawah ini.




Selamat Mencoba!!

Baca juga yang ini.

Tentang Textarea Lagi

Semua Tentang Link Exchange
Description: Tips Membuat Seleksi Teks Rating: 4.5 Reviewer: Unknown - ItemReviewed: Tips Membuat Seleksi Teks
More aboutTips Membuat Seleksi Teks

Bertuah Award 2009

Posted by Unknown on Thursday, May 14, 2009

Mendapatkan Anugerah Bertuah Award 2009 : Wah, seneng dan terharu mendapatkan award "Bertuan Award 2009" ini. Terima kasih saya ucapkan kepada Computer-Tech atas penghargaan yang tidak pernah saya duga sebelumnya. Kemudian dengan award ini, semoga menjadikan pemicu semangat untuk terus berkarya dalam bidang per-blog-an ini. Semoga!! Sekali lagi, terima kasih!!!

Berikut award yang saya terima dari Computer-Tech tersebut.

Sesuai dengan pesan yang diberikan oleh pemberi award dimana harus diteruskan ke 10 sahabat blogger dan yang saya pilih adalah tersebut di bawah ini.

  1. Tutorial dan Tips-Trik Blog
  2. Echa-Bintang Timur
  3. World Of Template
  4. Appfreeware
  5. Blogger Ceria
  6. Bola Sinema
  7. Anandia Yuska Blog
  8. Bayu Blog
  9. Bisnis Internet
  10. Komputer Tips
Sahabat blogger yang saya sebutkan diatas juga diharapkan meneruskan perjuangan ini dengan cara :

- membuat postingan yang memuat gambar award ini di blog sobat
- sebutkan yang memberikan award ini beserta link blognya
- hadiahkan award ini kepada 10 sahabat
- kunjungi blognya dan beritahukan kalau ada award dari sobat untuknya
- sampaikan kepada sobat yang lain untuk melakukan hal-hal tersebut tadi...

Salam Blogger

Description: Bertuah Award 2009 Rating: 4.5 Reviewer: Unknown - ItemReviewed: Bertuah Award 2009
More aboutBertuah Award 2009

Menghiasi Blog dengan Widget Kurs Mata Uang Asing

Posted by Unknown

Widget Kurs Mata Uang Rupiah Terhadap Mata Uang Asing : Pada postingan kali ini, perkenankanlah Tips dan Trik Blogging untuk mengetengahkan widget yang menampilkan konverter Mata Uang Rupiah terhadap mata uang beberapa Negara asing. Widget ini merupakan layanan yang disediakan secara gratis oleh http://fx-rate.net/ yang dapat kita gunakan untuk “menghiasi” blog kita terutama blog yang berhubungan dengan ekonomi & bisnis. Jika tertarik, silakan ikuti tipsnya berikut ini.

Widget yang disediakan oleh http://fx-rate.net/ tersebut terdiri dari dua type tampilan yang dapat kita pilih sesuai selera dan kebutuhan, yang pertama adalah bertipe converter mata uang. Dengan widget ini, kita dapat menghitung nilai kurs rupiah ke mata uang dari beberapa Negara asing yang lain.

Tipe widget yang kedua adalah bertipe table kurs mata uang rupiah terhadap beberapa mata uang asing. Dengan tipe yang ini, kita akan dapat mengetahui kurs mata uang rupiah terhadap mata uang Negara asing tanpa harus melakukan konversi satu per satu seperti pada tipe yang pertama.

Tipe Konverter

Agar lebih jelas, untuk blogger yang menyukai dengan tipe konverter (semacam kalkulator), silakan langsung menuju ke halaman http://fx-rate.net/IDR/getwidget_calculator/.

Di situ, kita diberi beberapa opsi tampilan yang cocok dengan kebutuhan atau selera kita, ada yang berbentuk memanjang ke bawah dan ada juga yang memanjang ke samping.

Kemudian copy code html yang letaknya berada di bawah pada setiap contoh tampilan yang ada pada gadget blog kita, seperti screenshot di bawah ini.

Tipe Table Kurs

Yang menyukai tipe table kurs, silakan langsung menuju ke halaman http://fx-rate.net/IDR/getwidget/.

Di situ juga, kita dapat memilih beberapa contoh tampilan yang sesuai dengan kebutuhan atau selera masing-masing. Ada yang hanya menampilkan kurs terhadap beberapa mata uang asing saja, dan ada juga yang menampilkan hampir seluruh mata uang asing dari Negara-negara di dunia. Selain itu, ada yang hanya menampilkan bendera saja dan ada juga yang menampilkan bendera beserta nama Negara masing-masing. Pokoknya, kita diberi banyak opsii untuk memilih tipe mana yang pas untuk sidebar blog kita.

Setelah cocok dengan pilihan yang ada, langkah selanjutnya adalah melakukan copy paste atas kode html yang disertakan (di bawahnya) dalam setiap contoh tampilan pada gadget blog kita. Lihat contoh screenshot di bawah ini.

Jika berhasil, maka kita akan mendapatkan hasil tampilannya seperti di bawah ini.

Ini contoh tipe tampilan converter atau kalkulator.



Ini contoh tipe tampilan table kurs.



Akhirnya, selamat mencoba pada blognya masing-masing. Good Luck!!!


Description: Menghiasi Blog dengan Widget Kurs Mata Uang Asing Rating: 4.5 Reviewer: Unknown - ItemReviewed: Menghiasi Blog dengan Widget Kurs Mata Uang Asing
More aboutMenghiasi Blog dengan Widget Kurs Mata Uang Asing

Tips Menghilangkan Border Image

Posted by Unknown on Wednesday, May 13, 2009

Tips Menghilangkan Border Image : Sebelum menginjak kepada tema tersebut, mungkin kita perlu “menyamakan” pemahaman tentang border ini. Yang dimaksud border di sini adalah garis yang mengelilingi suatu image yang kita upload ke halaman blog. Sehubungan dengan border tersebut, setiap blogger mempunyai kebiasaan atau kesukaan yang berbeda, sebagian lebih yang menyukai image berborder dan sebagian yang lain lebih menyukai image tanpa border. Bagaimana dengan pengunjung???

Ini contoh image yahoo emotion dengan border



Ini contoh image yahoo emotion tanpa border


Sehubungan dengan hal itu pula, saya mempunyai pengalaman tersendiri yang tentunya sedikit menjengkelkan tentang border ini. Ketika ingin memasang sebuah image yahoo emotion pada suatu postingan, saya mendapati image yahoo emotion tersebut “dihiasi” dengan kotak atau border. Saya sudah memastikan bahwa kode border=”0” sudah saya tambahkan pada kode html image-nya, seperti contoh tersebut berikut ini.

<img src="http://geocities.com/yono_pati/contoh.gif" border="0">


Ternyata, dengan penulisan tersebut, border-nya masih tetap muncul. Setelah beberapa lama akhirnya saya menemukan jawabannya. Bahwa jika kita sudah men-setting boder=”0” namun ternyata bordernya masih muncul maka kita harus merubah style sheet css yang ada di template blog milik kita.

Untuk merubahnya, langkah-langkahnya adalah sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, temukan kode css untuk image tersebut.

Kode-nya bisa seperti di bawah ini.

.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid $borderColor;
}


Atau bisa juga seperti di bawah ini.

.post-body img {
margin:0 0 5px 0;
padding:4px;
border:1px solid $borderColor;
}


Yang perlu diubah adalah kode yang ditandai dengan warna merah, gantilah 1px menjadi 0px pada “border:1px solid $borderColor;” sehingga menjadi “border:0px solid $borderColor;

Ketiga, simpan template

Keempat, selesai

Sekarang pastikan image yang kita upload sudah tidak mempunyai border lagi.

Selamat Mencoba!!
Description: Tips Menghilangkan Border Image Rating: 4.5 Reviewer: Unknown - ItemReviewed: Tips Menghilangkan Border Image
More aboutTips Menghilangkan Border Image

tempat keren edit foto online

Posted by Unknown on Tuesday, May 12, 2009

pernahkah anda membayangkan perasaan anda ketika foto anda yang sedang bergaya muncul di keramaian seperti di baliho, billboard, galeri seni, atau sedang beredar di surat kabar atau majalah terkenal seperti gambar di bawah ini??

ORxhARiQtD8EApUFT3YNoQPhotoFunia-276cc   PhotoFunia-2228b PhotoFunia-22da5

jika anda ingin foto anda seperti itu. Anda tidak perlu susah-susah untuk menjadi terkenal terlebih dahulu seperti Ariel Peterpan, Luna Maya, Pasha Ungu, ataupun artis-artis ternama lainnya .sudah banyak fasilitas edit foto online yang tersedia untuk membuat foto anda berada di billboard, baliho, galeri seni, dan tempat-tempat keren lainnya. Salah satunya adalah fasilitas yang disediakan oleh Photofunia.com. di situs ini anda hanya diminta untuk mempersiapkan sebuah foto terkeren yang anda miliki dan setelah beberapa menit foto anda langsung berubah menjadi foto-foto yang keren dan terpajang di tempat-tempat yang bisa anda pilih sendiri.

untuk lebih jelas caranya adalah sebagai berikut :

1. kunjungi situs photofunia.com

2. klik pada sebuah effect yang anda sukai untuk di tampilkan

3. pilih menu choose file dan pilih foto yang anda inginkan untuk di tampilkan di effect tersebut

4. tunggu beberapa saat dan foto andapun siap untuk di pamerkan buat teman-teman andaketawa

5. jangan lupa simpan foto anda dengan baik. karena jika foto anda tidak disimpan lebih dari 2 jam. maka foto anda akan di hapus secara otomatis

6. selamat mencoba042 040

Description: tempat keren edit foto online Rating: 4.5 Reviewer: Unknown - ItemReviewed: tempat keren edit foto online
More abouttempat keren edit foto online

Kode-kode warna

Posted by Unknown on Sunday, May 10, 2009

kode-kode warna ini sengaja saya posting disini untuk kemudahan dalam mengutak-atik warna di blog yang kita miliki. jadi ketika kita ingin mengubah suatu warna dengan warna yang sesuai dengan isi blog kita. kita tinggal mencocokkannya disini. dalam penerapannya, sayapun sering kesulitan dalam urusan warna-warna ini. jadi, postingan ini juga berguna bagi saya sendiri dalam memilih berbagai macam warna untuk berbagai kepentinga.terima kasih saya ucapkan kepada mas kendhin yang sudah membuat kode warna ini. semoga bermanfaat dan selamat mencoba.

Description: Kode-kode warna Rating: 4.5 Reviewer: Unknown - ItemReviewed: Kode-kode warna
More aboutKode-kode warna

Mengkustomasi Tampilan Teks Pada Title Bar

Posted by Unknown on Friday, May 8, 2009

Mengkustomasi Tampilan Teks Pada Title Bar : Pada kesempatan ini, Tips dan Trik Blog akan mengetengahkan script yang dapat kita gunakan untuk mengkustomasi tampilan teks yang akan muncul pada title bar. Teks atau tulisan tersebut akan bergerak ke kiri (scroll) satu kali. Bingung!!! Dari pada bingung lebih baik ikuti tipsnya berikut ini dan langsung mempraktekkannya.

Langsung to the point saja, langkah-langkahnya sebagai berikut. (Sebelum melakukan pengeditan jangan lupa untuk membackupnya terlebih dahulu)

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, cari dan temukan kode <title>………………………</title> yang letaknya berada persis di bawah kode <head>

Ketiga, copy dan replace (tindihkan) script di bawah ini di tag <title> tersebut.

<title>Teks yang akan muncul pada title bar </title>
<script>

//Document title scroller- By Graeme Robinson (me@graemerobinson.co.uk)
//Exlusive permission granted to Dynamic Drive to include this script in their DHTML archive.
//For full source code, terms of use visit http://www.dynamicdrive.com

var repeat=0 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
}
if (document.title)
titlemove()
</script>



Keterangan :

Gantilah "Teks yang akan muncul pada title bar" dengan teks yang kita inginkan.

Keempat, simpan template
Kelima, selesai

Sekarang, cobalah buka atau refresh blog kita dan pastikan tampilan atau teksnya sudah berubah seperti yang kita ketikkan atau kita inginkan.

Contoh hasilnya dapat dilihat pada screenshot di bawah ini.



Catatan :

Script ini akan berjalan pada Firefox, Internet Explorer, Opera, Netscape, Sea Monkey.

(Sumber referensi : Dynamic Drive)

Baca juga yang ini.

Menampilkan Jam Pada Title Bar
Pengaturan dan Kustomasi Judul Bar
Marquee Untuk Beriklan
Description: Mengkustomasi Tampilan Teks Pada Title Bar Rating: 4.5 Reviewer: Unknown - ItemReviewed: Mengkustomasi Tampilan Teks Pada Title Bar
More aboutMengkustomasi Tampilan Teks Pada Title Bar

Menampilkan Jam Pada Title Bar

Posted by Unknown on Wednesday, May 6, 2009

Script Untuk Menampilkan Jam Pada Title Bar : Dengan script ini kita dapat menampilkan jam digital sederhana pada title bar. Jangan kuatir karena display jam tersebut tidak akan menindih judul dokumen yang sedang kita buka. Justru dengan jam display jam yang berada di atas akan memudahkan kita dan para pengunjung untuk melihatnya. Jika tertarik, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

Untuk memasang script tersebut pada blog kita dapat dilakukan dengan dua cara. Cara pertama adalah menempatkan script pada gadget atau widget blog kita. Sedangkan cara yang kedua adalah dengan menempatkan script pada tag <body>.

CARA PERTAMA

Menempatkan script pada gadget atau widget blog. Cara yang ini lebih praktis namun dapat menyebabkan widget blog menjadi “penuh”. Langkah-langkahnya sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript hingga muncul jendela untuk menampung script.

Kedua, copy dan paste-kan script di bawah ini.

<script language="JavaScript" src="http://www.geocities.com/yono_pati/jambar.js">
/*
This script was written by Mike Cullen, 1999
Featured on Dynamic Drive (dynamicdrive.com)
For full source code, installation instructions
and many more DHTML scripts
Visit Dynamicdrive.com
*/
</script>


Ketiga, Simpan

Keempat, selesai



CARA KEDUA

Pada cara yang kedua ini diperlukan langkah-langkah yang sedikit “ribet” setidaknya jika dibandingkan dengan cara pertama, yaitu dengan cara melakukan pengeditan html dan menempatkan script pada tag <body>. Langkah-langkahnya sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, cari kode </body> dan tempatkan script tersebut, di atas kode </body> tersebut.

Ketiga, simpan template

Keempat, selesai.

Sekarang refresh blog kita dan pastikan tampilan jamnya sudah “nongol” di title bar pada browser yang kita gunakan, seperti screenshot di bawah ini.



Selamat Mencoba!!!

(sumber : DynamicDrive)

Baca juga yang ini.

Pengaturan dan Kustomasi Judul Sidebar
Menampilkan Hari dan Tanggal Pada Blog
Marquee Untuk Beriklan
Tips dan Trik Komputer
Description: Menampilkan Jam Pada Title Bar Rating: 4.5 Reviewer: Unknown - ItemReviewed: Menampilkan Jam Pada Title Bar
More aboutMenampilkan Jam Pada Title Bar

Pengaturan dan Kustomasi Judul Sidebar

Posted by Unknown on Tuesday, May 5, 2009

Pengaturan dan Kustomasi Judul Sidebar : Sepertinya banyak blog yang telah membahas tentang tema ini namun tidak ada salahnya jika Tips dan Trik Blog mempostingnya juga, siapa tahu ada di antara para blogger atau pengunjung yang belum mengetahuinya. Jika tertarik, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

Kini, memperoleh template gratis yang bagus-bagus di internet adalah hal yang tidak sulit. Bahkan banyak pembuat template membolehkan template buatan-nya digunakan oleh pengguna lain dengan sukarela tanpa menarik bayaran satu sen pun. Dengan demikian para pengguna atau blogger pemula mempunyai banyak pilihan untuk menggunakan template yang “pas” buat dirinya.

Namun demikian, pasti ada bagian-bagian tertentu dari template yang kita gunakan tersebut kurang pas dengan kita. Bisa saja secara keseluruhan, kita sudah merasa cocok dengan suatu template namun mungkin ada bagian tertentu yang masih “mengganjal”, misalkan pada bagian judul sidebar.

Bagi yang mengalami hal demikian, tidak perlu terburu-buru untuk mengganti template yang ada dengan template yang lain (karena bagaimana pun juga untuk mengganti template dibutuhkan energi ekstra), kita dapat melakukan pengaturan dan kustomasi judul sidebar sedemikian rupa sehingga menjadi “pas” dengan selera atau kebutuhan kita.

Untuk melakukan pengaturan dan kustomasi judul sidebar tersebut, kita harus melakukan modifikasi (mengganti/menghapus) terhadap kode css untuk judul sidebar tersebut. Untuk template default blogger, kita dapat menemukan kode css tersebut dengan format seperti di bawah ini.

.sidebar h2 {
………………….
………………….
………………….
}



Titik-titik tersebut merupakan deklarasi untuk tampilan judul sidebar. Kita dapat memodifikasi deklarasi tersebut sedemikian rupa sehingga tampilan judul sidebar sesuai dengan kemauan kita, antara lain :

Warna Font

Jika menginginkan, kita dapat mengkustomasi warna teks untuk judul sidebar sesuai dengan selera kita masing-masing. Deklarasinya seperti di bawah ini.

font-color: #XXXXXX;



Kita dapat mengganti kode warna #XXXXXX dengan kode warna yang lain sesuai selera masing-masing. Untuk melihat kode warna, silakan kunjungi di sini.


Ukuran Font

Kita dapat mengkustomasi ukuran font sesuai keinginan kita. Deklarasinya seperti di bawah ini.

Font-size:100%;



100% pada font-size berarti ukuran font sebesar default font, jika menginginkan kita dapat menggantinya dengan prosentase lain, 75% atau bahkan 120%.
Selain secara prosentase, ukuran font dapat didefinisikan dengan satuan pixel (px), misalnya 12px, 15px, dan seterusnya.

Opsi selengkapnya dapat dipilih di antara di bawah ini.

font-size: 75%;
font-size: 15px;
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;



Jenis Font

Kita juga dapat mengkustomasi jenis font agar sesuai dengan keinginan kita, deklarasinya dapat dipilih di antara contoh di bawah ini.

Font-family: verdana;
Font-family: arial;
Font-family: monospace;
Font-family: roman;


Atau dengan menggunakan jenis font yang lainnya.


Ketebalan Font

Kita juga dapat mengatur ketebalan font dengan deklarasi yang dapat dipilih di antara di bawah ini.

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;


Font Style

Kita juga dapat mengkustomasi style font dengan deklarasi yang dapat dipilih di antara di bawah ini.

font-style: normal;
font-style: italic;



Perataan Teks

Kita dapat mengkustomasi perataan teks untuk judul sidebar dengan deklarasi yang dapat dipilih di antara di bawah ini.

text-align:left;
text-align:center;
text-align:right;
text-align:justify;


Warna Background

Untuk menambahkan warna background, deklarasinya seperti di bawah ini.

background: #XXXXXX;



Kita dapat mengganti kode warna #XXXXXX dengan kode warna yang lain sesuai selera masing-masing. Untuk melihat kode warna, silakan lihat di sini.

Padding


Padding ini bertujuan untuk memberikan jarak teks dari tepi sehingga teksnya tidak akan bertabrakan dengan bagian luar dari warna background yang kita atur sebelumnya. Deklarasinya seperti di bawah ini.

padding:5px;


Jika dirasa kurang cocok, kita dapat menggantinya dengan angka yang lebih kecil atau bahkan lebih besar lagi.

Text Decoration


Dengan text-decoration ini, kita dapat membuat teks menjadi bergaris bawah, bergaris atas, bergaris tengah, atau bahkan menjadi berkedip. Deklarasi selengkapnya seperti di bawah ini.

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;



Text Transform

Dengan text-transform ini, kita dapat membuat teks menjadi huruf capital, huruf kecil, atau huruf besar pada awal kata. Deklarasinya dapat dipilih di antara di bawah ini.

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;


Border Style

Kita pun dapat menambahkan efek border dengan berbagai bentuk, deklarasinya dapat dipilih di antara di bawah ini.

border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;



Border Color

Selain bentuk border, kita pun dapat mengkustomasi warna untuk border. Deklarasinya seperti di bawah ini.

border-color: #XXXXXX;


Kita dapat mengganti kode warna #XXXXXX dengan kode warna lain sesuai selera masing-masing. Untuk mengetahui kode warna, silakan kunjungi di sini.

Nah, dari uraian di atas, kita dapat melakukan modifikasi atau mencoba-coba sendiri untuk mendapatkan tampilan judul sidebar yang sesuai dengan selera masing-masing.

Berikut contoh deklarasi untuk tampilan judul sidebar.

.sidebar h2 {
font-color: #071910;
font-size:120%;
font-family:verdana;
font-weight:bold;
text-align:center;
background:#ACFA58;
padding:5px;
text-decoration:blink;
text-transform:capitalize;
border-style:double;
border-color:#243B0B;
}


Atau kita dapat meringkasnya seperti di bawah ini.

.sidebar h2 {
font:#071910 120% verdana bold;
text-align:center;
text-decoration:blink;
text-transform:capitalize;
background:#ACFA58;
padding:5px;
border : double #243B0B;
}



Contoh hasilnya seperti screenshot di bawah ini.



Selamat Bereksperimen!!

Baca juga yang ini.

Deklarasi Link Teks
Kustomasi Warna dan Efek Pada Link
Description: Pengaturan dan Kustomasi Judul Sidebar Rating: 4.5 Reviewer: Unknown - ItemReviewed: Pengaturan dan Kustomasi Judul Sidebar
More aboutPengaturan dan Kustomasi Judul Sidebar

Memanfaatkan Marquee Untuk Beriklan

Posted by Unknown on Friday, May 1, 2009

Memanfaatkan Marquee Untuk Beriklan : Sepertinya sudah banyak bahasan tentang marquee ini, namun pada kesempatan kali ini Tips Trik Blog masih ingin mengetengahkannya lagi untuk aplikasi yang lain lagi. Jika para pengunjung pernah berkunjung di Tips dan Trik Komputer mungkin para pengunjung akan melihat teks berjalan di bawah header yang mempromosikan link tertentu. Nah, jika para pengunjung tertarik untuk mengaplikasikannya, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

Marquee yang kita digunakan adalah menggunakan "mode" onmouseover dan onmouseout di mana ketika mouse didekatkan maka teksnya akan berhenti dan ketika dijauhkan, teksnya akan berjalan lagi. Formatnya seperti di bawah ini.

<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="20" style="margin-left: 12px; margin-right: 10px; font-size:13pt; line-height: 19px"><font color="#5F04B4"><b>
Teks yang ingin ditampilkan <a href="URL_Blog_01">Teks_Link_01< /a>&nbsp;&#9474;&nbsp;<a href="URL_Blog_02">Teks_Link_02</a> </b></font>
</marquee>


Keterangan :
  • Left pada direction menunjukkan arah gerakan ke kiri, jika menghendaki, kita dapat mengubahnya menjadi “right” (kanan).
  • Angka pada scrollamount dapat diubah sesuai selera masing-masing, semakin tinggi nilainya maka gerakannya semakin cepat.
  • Angka pada scrolldelay menunjukkan delay per detik, semakin tinggi nilainya semakin halus gerakannya. Untuk mengetahui lebih lanjut tentang scrollamount dan scrolldelay ini, silakan kunjungi di sini.
  • Angka pada margin-left dan margin-right menunjukkan batas kiri dan kanan yang dapat diubah sesuai kebutuhan.
  • Font-size dapat diubah sesuai kebutuhan masing-masing, semakin tinggi nilainya maka semakin besar ukuran hurufnya.
  • Font color dapat diubah sesuai selera dan kebutuhan, untuk kode warna dapat dilihat di sini.
  • Line-height dapat diubah sesuai kebutuhan.
  • Untuk menambahkan spasi di antara Link satu dengan link lainnya dengan kode &nbsp;
  • Atau kita dapat menambahkan pembatas seperti "│"di antara link satu dengan link lainnya dengan &#9474;
  • URL_Blog_01 dan URL_Blog_02, diubah dengan URL_blog atau URL_permalink sendiri-sendiri.
  • Teks_Link_01 dan Teks_Link_02, diubah dengan sesuai nama yang diinginkan.
  • Kita dapat menambahkan link sebanyak yang kita inginkan.

Penempatan Marquee

Kita dapat menempatkan marquee tersebut baik di atas header maupun di bawah header blog. Langkah-langkahnya sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML
Kedua,

@ Jika ingin menempatkan marquee di atas header maka cari kode <body> kemudian copy paste kode marquee tersebut persis di bawah kode <body>.

@ Jika ingin menempatkan marquee di bawah header maka cari section header, seperti di bawah ini.

<div id='header-wrapper'>
<b:section ………………………..’>
<b:widget ………………………….’/>
</b:section>
</div>


kemudian tempatkan kodenya persis di bawah kode tersebut lebih tepatnya di bawah </div>

Ketiga, simpan template
Keempat, selesai

Contohnya seperti di bawah ini.

<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="20" style="margin-left: 12px; margin-right: 10px; line-height: 19px">
<font="#5F04B4"><b>
Kunjungi Blog saya yang lain <a href="http://onoid.blogspot.com">Tips dan Trik Komputer</a>&nbsp;&#9474;&nbsp;<a href="http://tips-trik-blog.blogspot.com">Tips dan Trik Blog</a>&nbsp;&#9474;&nbsp;<a href="http://clixsense2007.blogspot.com">Bisnis Internet</a>&nbsp;&#9474;&nbsp;<a href="http://tips-net.blogspot.com"> Tips dan Trik Internet</a> </b>
</font>
</marquee>


Dan hasilnya akan menjadi seperti di bawah ini atau dapat dilihat pada Tips dan Trik Komputer.

Kunjungi Blog saya yang lain Tips dan Trik KomputerTips dan Trik BlogBisnis Internet Tips dan Trik Internet




Selamat Mencoba !!

Baca juga yang ini.

Semua Tentang Marquee
Description: Memanfaatkan Marquee Untuk Beriklan Rating: 4.5 Reviewer: Unknown - ItemReviewed: Memanfaatkan Marquee Untuk Beriklan
More aboutMemanfaatkan Marquee Untuk Beriklan