TEXT AREA 3D BLOG

Text Area adalah bagian dari form yang berfungsi sebagai space/ruang bagi teks/konten khusus yang ingin diberi posisi/penempatan tertentu. Ada banyak jenis text area berdasarkan fungsi form, yaitu untuk mengisi data, submission/pendaftaran, polling, search, dan lain-lain. Namun pada posting kali ini akan dikhususkan pada text area yang berfungsi sebagai space bagi konten tertentu untuk digunakan olh pengunjung dan bersifat read-only, baik pada posting blog/website maupun pada widget/sidebar.

MENGGANTI GAMBAR BACKGROUND

Memperindah blog ternyata juga merupakan hal yang menyenangkan, karena kustomisasi blog memang sangat diperlukan agar blog tampak lebih personal dan unik. Nah salah satu cara membuat blog tampak beda dengan yang lain adalah dengan mengubah background blog. Untuk mengganti gambar background blog seperti yang diinginkan

MODIFIKASI LINK HANTU

Bithoo kembali lagi membahas tentang mengedit tampilan link di template Blogger/Blogspot. Kali ini diupayakan secara lengkap dan esensial agar nanti sobat dapat mengutak-atik bagian tampilan link secara mandiri.

ICON DEPAN JUDUL POSTING

Icon/Gambar di depan judul posting blog dapat menambah daya tarik. Icon tersebut juga dapat memberikan kesan tampilan judul posting yang indah dan dapat memberikan perwakilan akan arti penting judul posting tersebut. Di Blogger, kemungkinan untuk menambah dan memodifikasi berbagai macam pernak-pernik sangatlah mungkin.

MEMPERCEPAT LOADING BLOG

Kecepatan loading blog adalah hal yang sangat penting, baik bagi kenyamanan pengunjung dan juga SEO. Waktu load (load time) yang terlalu lama dapat membuat pengunjung ngacir sebelum dapat membaca seluruh isi sebuah halaman.

Tampilkan postingan dengan label Navigation/Menu. Tampilkan semua postingan
Tampilkan postingan dengan label Navigation/Menu. Tampilkan semua postingan

Jumat, 18 Mei 2012

Cara Membuat Tombol Show and Hide Di Blog

18.54 Unknown No comments

Hai sobat Bithoo, apa kalian ingin membuat tombol hide pada postingan anda apa bila ingin menghemat tempat anda, nah bithoo akan memberikan tombol hide yang dapat dimanfaatkan bagi sobat bithoo sekalian. penasara tampilannya gimana yuk kita lihat bersama:

Bagaimana sobat, Tertarik untuk membuatnya.... mari kita sama-sama melihat cara pembuatannya dibawah ini.

Ini adalah cara/trik untuk membuat tampilan show/hide di blog:



Catatan: Gantilah tulisan code link yang ingin kamu show/hide dengan apa saja yang sobat bithoo ingin sembunyikan.


Begitulah Cara Membuat Tombol Show/Hide Di Blog. Semoga dapat bermanfaat bagi sobat-sobat bithoo.
Read more »

Senin, 07 Mei 2012

Cara Membuat Menu Dock Di Blog

13.37 Unknown No comments

Menu dock adalah menu navigasi yang mempunyai animasi. Apabila cursor anda berada diatasnya maka menu dock akan bergerak dan membuat zoom.


Jika anda tertarik untuk membuatnya ikuti aja trik berikut ini>......
1. Login ke blogger
2. Pilih Tata Letak dan klik Edit HTML
3. Klik Expand Widget Template
4. Tambahkan kode ini dibawah kode <head>



5. Tambahkan kode ini dibawah ]]></b:skin>



6. Terakhir cari kode <body> dan tambahkan kode dibawah ini dibawah kode ini:



7. Terakhir simpan template anda....

Selamat mencobanya!!!!
Read more »

Kamis, 26 April 2012

Cara Membagi Postingan Menjadi Dua

13.33 Unknown No comments

Berbagai cara digunakan untuk menarik pengunjung agar datang dan kembali mengujungi website/blog yang kita buat, misalnya dengan membuat postingan yang unik dan berkualitas juga dengan mempercantik tampilan website/blog. Tips yang ingin Saya share kepada Anda kali ini adalah cara membuat postingan yang unik dan yang dimaksud unik disini bukan terkait isi dari postingan, melainkan berkenaan dengan penampilan dari postingan tersebut.


Yang menurut Saya unik tadi adalah menampilkan postingan menjadi 2 (dua) kolom seperti contoh di bawah ini:
Berbagai cara digunakan untuk menarik pengunjung agar datang dan kembali mengujungi website/blog yang kita buat, misalnya dengan membuat postingan yang unik dan berkualitas juga dengan mempercantik tampilan website/blog. Tips yang ingin Saya share kepada Anda kali ini adalah cara membuat postingan yang unik dan yang dimaksud unik disini bukan terkait isi dari postingan, melainkan berkenaan dengan penampilan dari postingan tersebut.

Apakah Anda tertarik? Jika iya, berikut ini Cara Membagi Postingan Menjadi 2 (dua) Kolom, maka pada saat membuat posting Anda harus menulis lewat Edit HTML bukan dari Compose/Tulis dan dalam postingan tersebut masukan kode di bawah ini:

<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="250"> artikel di bagian kiri</td><td align="justify" valign="top" width="250"> artikel di bagian kanan</td> </tr>
</tbody></table>

Baiklah supaya lebih jelas, berikut ini contohnya :

<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="300">Berbagai cara digunakan untuk menarik pengunjung agar datang dan kembali mengujungi website/blog yang kita buat, misalnya dengan membuat postingan yang unik dan berkualitas juga dengan mempercantik tampilan website/blog. </td><td align="justify" valign="top" width="300"> Tips yang ingin Saya share kepada Anda kali ini adalah cara membuat postingan yang unik dan yang dimaksud unik disini bukan terkait isi dari postingan, melainkan berkenaan dengan penampilan dari postingan tersebut.</td> </tr>
</tbody></table>

Keterangan :
  • Cellpadding adalah jarak antara tepi kolom dengan tulisan;
  • Cellspacing adalah jarak antara dua kolom;
  • Width adalah lebar masing-masing kolom;
  • Align adalah perataan teks (justify untuk rata kanan kiri, left untuk rata kiri, right untuk rata kanan dan center untuk rata tengah);
  • Valign adalah perataan verikal (top untuk rata atas, bottom untuk rata bawah dan middle untuk rata tengah);
  • Anda bisa merubah dan mengaturnya sesuai selera Anda.
Nah Begitulah cara membagi postingan menjadi dua, semoga artikel ini dapat bermanfaat bagi sobat bithoo semua.
Read more »

Rabu, 25 April 2012

Cara Memasang Menu Cantik Di Blog

16.23 Unknown 1 comment

Link bar dibuat untuk memisahkan suatu kumpulan link-link yang penting dalam suatu widget. Nah, biasanya link bar juga ada di bawah header. Tapi yang akan kita pahami kali ini adalah link bar atau menu bar yang akan dipasang di sidebar. Cara memasang menu cantik di Blog ini juga sangat mudah, hanya butuh pengaturan saja.

Dengan melihat screenshot atau contoh widget ini, apakah anda tertarik untuk membuatnya? Menu ini bisa juga disebut sebagai vertical menu bar. Widget ini dapat membuat blog anda semakin cantik karena tampilan warnanya yang sengaja dibuat ceria. Berikut gambarnya:


Pemasangannya sangat mudah. Ikuti langkah berikut ini:
1. Login – Dasbor – Layout/Tata Letak – Elemen Halaman
2. Klik Add Gadget/Tambah Gadget pada sidebar anda (sangat direkomendasikan)
3. Kemudian pilih HTML/Javascript
4. Taruh kode berikut di kolom content:

        <center><div id=”menu”>
        <ul>
        <li><a class=”current” href=”http://www.ardi33.web.id/”>home</a></li>
        <li><a href=”http://about.com”>about us</a></li>
        <li><a href=”http://google.com”>Google</a></li>
        <li><a href=”http://wikipedia.com”>Wikipedia</a></li>
        <li><a href=”http://www.ardi33.web.id/2008/09/contact-us.html”>contact us</a></li>
        </ul>
        </div></center>
        <style>
        /* ————————–
        AUTHOR : STYLED MENUS
        URL : http://www.styledmenus.com
        Copyrights by STYLED MENUS
        Widget From http://www.ardi33.web.id/
        —————————-*/
        *{
        margin:0;
        padding:0;
        }
        #menu{
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwuHXXDyPlAymyUCCRVarsS_RnKH_yP1-XlQXhwNgRfruIrczm_S9SqJ_NSginCGKM0OdjwQ2bQLS7rZuwEv8FRmgb3UWTPtOB4l2whp_Irpggv8l88BXzkp-TI8dAHU6ZRCOhlcCNlk0/s1600/menu_026_bg.jpg) no-repeat;
        width:172px;
        height:191px;
        padding:15px;
        }
        #menu ul{
        list-style:none;
        padding:0 0 0 8px;
        #menu li{
        list-style:none;
        display:block;
        padding:10px 0;
        }
        #menu li a{
        list-style:none;
        display:block;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlbp_ibFsFlvl6-LKqTwQLcy7czxHlPxom1JvGvKGCz99FBhjM7OIEEDsp-dLz_MBbe5HFkoyuBDd4GFJvs5065H_ibTsuVdb0geqs8BIiQo79v7dJpwtgtPIhBEldBrjih_P_9KOT3HA/s1600/menu_026_b.gif) no-repeat left center;
        color:#ffe991;
        font-weight:bold;
        text-transform:uppercase;
        font-size:11px;
        line-height:1.2em;
        text-decoration:none;
        padding:0 5px 0 25px;
        }
        #menu li a:hover{
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6rR0r2Z_lUgYssCmyM02LaPhHj_szSIrBNL9K7kZBW1zP6Jb-XJc9wJ0vNWz1aNoMz7JF5yrSWub5zMLL9wWj5UOyWS7L3Lzr-NtVVqlY40xSWEXgnHvHvsTYPtnQ-dnI2DImCs8UT24/s1600/menu_026_h.gif) no-repeat left center;
        color:#fff;
        text-decoration:none;
        }
        #menu li .current{
        list-style:none;
        display:block;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6rR0r2Z_lUgYssCmyM02LaPhHj_szSIrBNL9K7kZBW1zP6Jb-XJc9wJ0vNWz1aNoMz7JF5yrSWub5zMLL9wWj5UOyWS7L3Lzr-NtVVqlY40xSWEXgnHvHvsTYPtnQ-dnI2DImCs8UT24/s1600/menu_026_h.gif) no-repeat left center;
        color:#fff;
        font-weight:bold;
        text-transform:uppercase;
        font-size:11px;
        text-decoration:none;
        padding:0 5px 0 25px;
        }
        #menu li a.current, #menu li a:hover.current{
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6rR0r2Z_lUgYssCmyM02LaPhHj_szSIrBNL9K7kZBW1zP6Jb-XJc9wJ0vNWz1aNoMz7JF5yrSWub5zMLL9wWj5UOyWS7L3Lzr-NtVVqlY40xSWEXgnHvHvsTYPtnQ-dnI2DImCs8UT24/s1600/menu_026_h.gif) no-repeat left center;
        color:#fff;
        text-decoration:none;
        }
        </style>
5. Klik Simpan

Ganti tulisan berwarna merah dengan data anda dan yang berwarna biru adalah URL gambar, jika anda menginginkan gambar yang berbeda, ganti saja dengan gambar milik anda.
Read more »

Selasa, 24 April 2012

Cara Membuat Spoiler Di Blog

21.09 Unknown No comments

Kali ini saya akan sedikit membahas tentang bagaimana Cara Membuat Spoiler Di Blog, mungkin para blogger ada yang bertanya apa yang di maksud dengan Spoiler ? Spoiler merupakan sebuah tombol yang bila anda klik maka akan terbuka dan di dalamnya terdapat isi yang biasanya berupa gambar, link, tulisan, video dan lain-lain, tergantung dari apa yang ingin anda masukkan. Bahasa sederhananya fungsi dari Spoiler adalah menyembunyikan file dan untuk melihatnya anda harus menekan tombol yang telah di sediakan, biasanya orang Menggunakan Spoiler di Forum atau semacamnya tapi anda juga dapat Membuat Spoiler Di Blog. Ini ber-tujuan agar Blog kita dapat ter-load lebih cepat (tidak berat) dan terlihat rapi. Sebelum anda memutuskan untuk Membuat Spoiler Di Blog, ada baiknya anda melihat contoh Spoiler di bawah ini.

contoh isi spoiler

Di atas hanyalah salah satu contoh, anda dapat mengubah warna background-nya sesuai dengan keinginan, Cara Membuat Spoiler Di Blog cukup mudah, anda hanya tinggal Copy dan Paste Script di bawah ini ke dalam isi Postingan atau di HTML/JavaScript, tergantung di mana anda ingin menggunakannya.:

SCRIPT:

<div id="spoiler">
<div><input type="button" value="Tampilkan" style="margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;;this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan Lagi&#39;; }" />
</div>

<div style="background: #007777; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">

contoh isi spoiler
</div></div></div>

Keterangan:
  • "Tampilkan" (anda bisa mengubahnya sesuai dengan kata-kata anda sendiri, Contoh: Buka, Show dan sebagainya).
  • "Sembunyikan" (anda juga dapat menggantinya dengan kata-kata lain, misalnya: tutup, hidden dan lain-lain) - "Tampilkan Lagi" (kata ini juga bisa anda ganti sesuai dengan keinginan anda)
  • "Contoh isi spoiler" silahkan di ganti dengan apa yang ingin anda masukkan, misalnya seperti Artikel, Gambar, Link, Video dan sebagainya.

Sekian pembahasan tentang Tutorial Blog mengenai Cara Membuat Spoiler Di Blog, jika anda menyukai Artikel ini berikan kami 1+. Semoga ini bermanfaat untuk anda.
Read more »

Cara Membuat Logo Button Image

11.48 Unknown No comments

Bagi para sobat yang sudah mahir menggunakan program desain grafis semisal adobe photoshop ataupun coreldraw serta teman-temannya yang lain, membuat sebuah logo bukanlah sebuah pekerjaan yang sulit, dan mungkin tutorial ini menjadi tidak menarik untuk di baca. But barangkali ada sebagian dari para sobat sekalian yang satu nasib dengan saya, sebenarnya saya pun boleh di katakan tidak awam banget dengan program-program desain grafis tersebut, akan tetapi tak cukup hanya menguasai tentu saja di perlukan suatu daya kreasi atau imajinasi yang tinggi untuk menciptakan sebuah logo.

Nah kalau ada diantara sobat sekalian yang senasib dan sepenanggungan seperti saya (lho ko jadi ngawur ngomongnya)jangan dulu berkecil hati, seperti biasa ada pepatah mengatakan banyak jalan menuju Roma ((irama)kaya postingan dulu...dah basi)untuk membuat logo kita bisa memakai jasa situs di internet, salah satunya yaitu cooltext.com, Silahkan ikuti langkah-langkah berikut ini :
  1. Silahkan buka alamat http://cooltext.com
  2. Lalu klik tulisan Design a Logo
  3. Klik gambar contoh logo yang sobat sukai
  4. Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog Tutorial
  5. Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
  6. Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih warna tulisan (text).silahkan pilih warna yg sobat sukai
  7. Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
  8. Klik tombol yang bertuliskan Render Logo Design
  9. Tunggu beberapa saat ketika proses pembuatan logo berlangsung
  10. Lihat hasil logo, sudah cocok apa belum? bila belum cocok, klik tulisan Edit this logo ulangi langkah diatas, rubah yang sobat inginkan. Jika sudah cocok, klik tulisan Download Image untuk kita simpan di PC kita
  11. Selesai. Sobat sudah mempunyai sebuah logo.
Agar logo yang kita buat tadi bisa tampil di blog, sobat harus upload gambar tersebut ke blogger.com atau melalui situs lain. Tapi saya lebih suka menyimpannya di situs lain misal www.picasaweb.com.

Untuk proses upload di https://picasaweb.google.com/, silahkan ikuti langkah-langkah berikut :
  1. Silahkan buka alamat  https://picasaweb.google.com/,
  2. Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis bo) dengan meng klik tombol yang bertuliskan Join Now pada sudut kanan atas layar
  3. Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)
  4. Silahkan Sign In dengan Id sobat
  5. Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan pilih logo yang tadi di buat
  6. Klin tombol yang bertuliskan Upload
  7. Tunggu beberapa saat ketika proses upload berlangsung
  8. Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
  9. Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
  10. Silahkan klik tulisan Log Out untuk keluar dari account sobat. tutup layar browser sobat
Nah sekarang sobat tinggal memasukan kode gambar tadi ke blog ke blog sobat, cuma ada sedikit kode yang harus di tambahkan, karena kode tadi baru berupa Link Image saja. Contoh kode link image : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrLZr2O0PXN9AiD2DXNMxqEQ1VrBn5K30sQeadhMR8WPLunbdD1Me1zBfwHIxnJlDfTaJ45mx1_vnVR_h2Wx0zScyguYCiFuns_H6vmpOJDyODN7FrDdoFcjTfrdNS6i8RDH_0owSsuI/s1600/logoblogtutorial.jpg. Disini sobat harus menambahkan kode <img src="Link URL logo">, sehingga kode tadi menjadi seperti ini :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrLZr2O0PXN9AiD2DXNMxqEQ1VrBn5K30sQeadhMR8WPLunbdD1Me1zBfwHIxnJlDfTaJ45mx1_vnVR_h2Wx0zScyguYCiFuns_H6vmpOJDyODN7FrDdoFcjTfrdNS6i8RDH_0owSsuI/s1600/logoblogtutorial.jpg">

Maka contoh hasilnya akan seperti ini :

Untuk cara memasukan kode HTML kedalam blog sudah sering di bahas, jika lupa silahkan klik di sini.

Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran yang sebenarnya. Apabila sobat ingin memperbesar atau memperkecil image tersebut, sobat bisa menambahkan beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin saya tampilkan dalam ukuran 100px X 40px , maka kode tersebut menjadi seperti ini :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrLZr2O0PXN9AiD2DXNMxqEQ1VrBn5K30sQeadhMR8WPLunbdD1Me1zBfwHIxnJlDfTaJ45mx1_vnVR_h2Wx0zScyguYCiFuns_H6vmpOJDyODN7FrDdoFcjTfrdNS6i8RDH_0owSsuI/s1600/logoblogtutorial.jpg" width="100" height="40" alt="ini contoh saja">

sedikit clue, kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau memperkecil image, sobat tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk ukuran tinggi image, sobat tinggal menambah atau mengurangi nilainya. Untuk alt="..." yaitu untuk menampilkan tulisan ketika mouse berada pada image tersebut.

Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut untuk melihat efek kode alt="..." :

Bagaimana sudah bisa kan? pasti bisa, kan sudah di coba. Sekarang bagaimana cara membuat image button? langkahnya sama saja dengan langkah-langkah di atas, cuma pada saat berada di situs cooltext.com yang sobat klik adalah tulisan Desiggen a Button bukan Design a Logo, contoh image button :


Ok sobat, selamat menikmati hasil karyanya
Read more »

Cara Memasang Sitemeter Di Blog

10.55 Unknown No comments

Salah satu blog tool sekaligus sebagai aksesori blog yang sering di gunakan oleh para blogger yakni memasang statistik dan tracker. Dengan adanya statistik blog, maka kita yang mpunya blog ataupun yang berkunjung pun dapat mengetahui berapa pengunjungkah yang pernah berkunjung ke blog kita. selain itu juga bisa sekaligus sebagai tracker yakni kita bisa mengetahui para pengunjung blog kita datang dari mana, apakah dari search engine, blog lain ataupun darimana saja kita dapat mengetahuinya.


Sekarang bagaimana caranya kita membuat statistik tersebut? cara yang mudah yaitu kita menggunakan situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis, sebagai contoh adalah situs http://www.sitemeter.com. Berikut adalah contoh tool yang bisa kita pilih :

Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :
  1. Silahkan kunjungi situs http://www.sitemeter.com.
  2. Klik tulisan Sign Up untuk melakukan pendaftaran
  3. Klik tombol bertuliskan Next
  4. Klik tombol Next lagi
  5. Isi semua tabel yang ada lalu klik tombol Next lagi
  6. Isi lagi tabel yang ada, lalu klik tombol Next lagi
  7. klik tombol Next lagi
  8. klik tombol Next lagi ( cape dech next..next melulu )
  9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka email yg anda berikan
  10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda untuk login ke sitemeter.com
  11. Silahkan login dengan id anda
  12. Bila sudah login, Klik menu Manager
  13. Klik Menu Meter Style untuk memilih gaya dari site meter anda
  14. Pilih style yang anda sukai, kemudian klik tombol Select
  15. Klik menu HTML Code
  16. Klik tulisan Adding site Meter to a Blogger.com Site
  17. Copy semua kode HTML yang di berikan lalu paste pada Notepad
  18. Klik menu Logout untuk keluar dari situs tersebut
  19. Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita
Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah berikut :
khusus blog dengan template klasik :
  1. Sign in di blogger dengan id anda
  2. Klik menu TEMPLATE
  3. Klik Edit HTML
  4. Klik Edit (yang ada pada bar menu browser anda)
  5. Klik Find (on this page)... ⇒ untuk mempercepat pencarian
  6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger (karena dekat dengan tombol blogger) klik Find
  7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk melihat perubahan yang terjadi
  8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai

Sedikit tambahan, bila anda ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode <center> ...kode site meter... </center>

Untuk blog dengan Template baru : 
  1. Login di blogger dengan ID anda
  2. Klik menu layout
  3. Klik Elemen Halaman
  4. Klik Tambahkan sebuah Elemen Halaman
  5. Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript
  6. Tulis Judul site meter anda pada isian di sebelah form judul (bila ingin ada keterangan. kalau tidak, ya kosongkan saja)
  7. Copy & paste kode Site meter pada kolom isian
  8. Klik tombol Simpan Perubahan
  9. Klik Elemen yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag & drop)
  10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan
  11. Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN
  12. Selesai
Untuk fungsi site meter sebagai tracker, silahkan anda login ke sitemeter.com trus ya acak-acak deh isinya pasti ketemu....

Selamat mencoba.

Read more »

Senin, 23 April 2012

Cara Membuat Tulisan Berjalan Di Blog

23.00 Unknown No comments

Cara membuat tulisan berjalan (marquee) – Mungkin anda pernah mengunjungi sebuah blog atau website yang terdapat tulisan berjalan dan dalam hati anda bertanya, bagaimana cara membuat tulisan berjalan seperti itu yah?


Cara membuat tulisan berjalan (marquee)
Untuk membuat tulisan berjalan itu sangat mudah karena hanya dengan kode HTML sederhana sudah akan tercipta sebuah tulisan berjalan. Kode HTML untuk membuat tulisan berjalan di kenal dengan perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :



Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah :

bgcolor="warna" » Untuk mengatur warna background (latar belakang) teks

direction="left/right/up/down" » Mengatur arah gerakan teks

behavior="scroll/slide/alternate" » Untuk mengatur perilaku gerakan

Scroll » teks bergerak berputar

Slide » teks bergerak sekali lalu berhenti

Alternate » teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

title="pesan" » Pesan akan muncul saat mouse berada di atas teks

scrollmount="angka" » mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya.

scrolldelay="angka" » Untuk mengatur waktu tunda gerakan dalam mili detik

loop="angka|-1|infinite" » Mengatur jumlah loop

width="lebar" » Mengatur lebar blok teks dalam pixel atau persen


Agar lebih jelas Bithoo sertakan contohnya :

Contoh marquee dari gerakan :



Contoh hasilnya :

marquee dari kanan ke kiri
ganti kata "left" dengan keinginan anda yaitu bisa : right,  up, down .

Contoh marquee dengan variasi hurup dan warna latar belakang :



Contoh hasilnya :




Agar lebih menarik, kode marquee juga bisa dipadukan dengan javascript sederhana, seperti onmouseover="this.stop()" onmouseout="this.start()" . Dengan kode javascript tersebut, tulisan berjalan akan seketika berhenti apabila pointer mouse komputer pengunjung blog kita mengarah ke tulisan yang berjalan, dan akan berjalan kembali apabila pointer mouse dipindah ke tempat lain.

Contoh, silahkan arahkan pointer mouse anda ke area marquee di bawah ini :

Contoh kodenya :




Contoh hasilnya :

silahkan tunjuk ke sini

Contoh kode marquee yang di dalam nya terdapat link :



Contoh hasilnya :

Belajar Blog
Text Area 3D
Nevbar Blog
 Twitter Animated Facebook Like
Belajar Blog
Itu adalah beberapa contoh variasi kode marquee yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Cara memasang tulisan berjalan di blog
Bila anda bertanya, sesudah membuat kode marquee lalu untuk di pasang di blognya bagaimana? Tentu jawabannya ya terserah anda mau di pasang di mana. Namun, sebagai contoh berikut adalah cara memasang kode marquee di sidebar blogger.

  1. Silahkan login ke blogger dengan akun anda.
  2. Klik pada nama blog anda.
  3. Klik menu Tata Letak
  4. Tata letak
  5. Klik Tambah Gadget
  6. Klik pada widget HTML/Javascript html widget
  7. Pasanglah kode marquee yang telah anda buat sesuai degan yang Kang Rohman terangkan diatas. kode marquee
  8. Klik tombol Simpan
  9. Selesai.
Semoga artikel cara membuat tulisan berjalan (marquee) ini dapat bermanfaat bagi anda.
Read more »

Cara Memunculkan Nevbar Blog

21.12 Unknown No comments

Apabila kita memakai fasilitas yang gratisan pastinya ada ketentuan-ketentuan yang berlaku untuk menggunakannya, seperti halnya NgeBlog, apabila kita pengguna wordpress yang gratisan kita tidak boleh memasang iklan ataupun adsense pada blog tersebut kecuali kita sudah memiliki hosting sendiri.


Tidak jauh berbeda apabila kita NgeBlog di Blogger.com kita harus mengikuti peraturan yang ditentukan oleh Blogger yaitu Term Of Services (TOS). salah satunya adalah harus menggunakan Navbar Blogger pada tampilan blognya. bedanya dengan wordpress pada blogger diperbolehkan untuk memasang iklan ataupun adsense.

Banyak sekali template yang kita download saat ini yang telah menghapus navbar blogger tersebut, karena mungkin mengganggu tampilan pada blog kita sebenarnya itu tidaklah dihilangkan melainkan disembunyikan, tetapi Trik Tips Tutorial menyarankan untuk memunculkan kembali navbar blogger tersebut dengan cara menghapus kode yang membuat navbar blogger tersebut tersembunyi dan agar tidak di banned oleh google nantinya, karena telah melanggar TOS (aturan-aturan) blogger.

caranya sangatlah mudah.

1. Setelah login ke Blogger.
2. Kemudian Tata Letak Edit HTML
3. setelah itu cari kode seperti (atau kode mirip) dibawah ini tepatnya dibawah kode <b:skin><![CDATA[



4. Hapus kode berwarna biru tersebut.
5. Selesai.

Langkah selanjutnya adalah menuju Tata Letak elemen halaman kemudian klik edit pada kolom Navbar dan pilih navbar yang akan tampil pada halaman blog sesuai keinginan atau sesuai warna pada blog anda seperti contoh beberapa gambar navbar di bawah ini :

Demikianlah artikel tentang Memunculkan Navbar Blogger yang Hilang

Semoga Bermanfaat..
Read more »

Cara Menghapus Navbar Blog

17.17 Unknown No comments

Hai Sobat Bithoo,,, Ketemu lagi nih,,, emmm ada yang bosan yah melihat Navbar pada blognya,,,, emmm sekarang nih Bithoo pengen ngasih cara untuk menghapus navbar blog. Dan Jika anda mengganti template anda dengan template template terbaru saat ini banyak navbar blogger yang telah dihilangkan pada templatenya tetapi ada beberapa yang masih menggunakannya.


Bagi anda yang mengedepankan penampilan blog anda navbar blogger mungkin dapat mengganggu pada tampilan blog anda dan jika anda ingin menghilangkan navbar blogger tersebut sangatlah mudah anda hanya akan menambahkan beberapa kode.

Langkah-langkah dalam menghilangkan Navbar Blogger :

cari kode



tepatnya pada bagian atas edit HTML.

kemudian masukkan kode berikut ini dibawahnya :



Selesai dan lihatlah hasilnya..

Demikianlah artikel tentang Cara Menghilangkan Navbar Blogger.

Apabila Ingin Memunculkan Nevbar Pada Blog Silahkan Lihat Postingan Beriktnya.

Semoga Bermanfaat..

Read more »

Sabtu, 21 April 2012

Karakteristik Dan Optimasi Label Blog

22.56 Unknown No comments

Label pada blog ber-platform Bloggger (Blogspot) memiliki fungsi sebagai pengelompok posting berdasarkan kriteria/kategori tertentu. Dengan adanya label, diharapkan pengunjung/pembaca blog dapat dengan lebih mudah mencari bagian/kategori tertentu dari posting-posting (artikel-artikel) sesuai dengan yang dia inginkan. Akan tetapi ada beberapa karakteristik khusus yang membuat "Label Blogger" berbeda dengan fitur  kategori pada blog berplatform lain (category pada WordPress misalnya). Memahami beberapa karakteristik ini diharapkan dapat memaksimalkan fungsi label dan juga menghindarkan dampak buruk terutama untuk SEO blog Blogger/Blogspot:

 1. Cara Membuat Label Blogger/Blogspot (Basic Step untuk Pemula)
Ada dua cara membuat label:
a. Membuat label ketika di halaman new post/buat posting baru (post editor)
Ketika sedang membuat posting, anda dapat langsung membuat label.

Lihat di bagian bawah kotak post editor
Tuliskan label yang diinginkan, bisa lebih dari satu
atau jika anda sudah memiliki label-label, klik "show all" dan klik label-label yang diinginkan

b. Membuat dan mengedit label di halaman "edit posts".


Centang satu atau beberapa posting yang ada di bagian bawah label editor seperti di atas, kemudian pilih label/buat label baru/hapus label pada menu dropdown "Label Actions..."

2. Karakteristik Umum Label Blogger
a. Susunan label yang ditampilkan pada bagian link label baik di atas atau di bawah posting disusun sesuai abjad, misalnya: Label: Blogging, Cheat, Download, dan seterusnya.

b. Label Blogger bukan lah pengelompokan dengan sistem direktori, namun hanya pengelompokan berdasarkan hasil posting yang ditandai dengan label tertentu dan merupakan perintah pencarian (search label). Ini merupakan kelemahan dan perbedaan Label Blogger dengan category WordPress, dimana category merupakan pengelompokan direktori, sehingga ada parental category, child category, dan seterusnya.

c. Karena url label sebenarnya merupakan perintah search (contoh url-nya: http://buka-rahasia.blogspot.com/search/label/Blog%20Design), maka label bukanlah link permanent (permalink). Atau, lebih mudahnya, bisa dibilang label bukan lah url yang sesungguhnya. Label hanya terbentuk sebagai hasil url perintah pencarian (contohnya seperti url pencarian seach engine). Oleh karena itu, search engine tidak memperhitungkan label sebagai link/url yang sah untuk diindeks. Itulah mengapa ketika anda masuk ke Google Webmaster Tools, ada informasi bahwa link-link label di-restricted oleh robot.txt. Efeknya, label yang terindeks justru malah berdampak buruk pada SEO.

d. Jika anda menggunakan menu/navigasi breadcrumbs (khususnya seperti yang telah saya buat dan beberapa lain yang sejenis), label yang diambil adalah label yang paling terakhir, sehingga apa bila anda membubuhkan lebih dari satu label pada suatu posting, dan karena label diurutkan sesuai abjad, maka label yang ditampilkan di menu breadcrumbs adalah label dengan abjad paling akhir dari posting tersebut. Jika label yang dimunculkan oleh breadcrumbs kurang tepat dan tidak sesuai dengan yang diinginkan, maka optimalisasi SEO pun jadi kurang maksimal.
Contoh: suatu posting memiliki label: "Design, HTML, Trik". maka hasil generating menu breadcrumbs adalah:
Browse >> Home >> Trik >> Judul Posting.

3. Memaksimalkan Fungsi Label untuk Navigasi dan SEO
a. Pasang label sebagai alat navigasi berdasarkan kelompok posting, baik pada link list label yang sudah disediakan sebagai widget bawaan Blogger/Blogspot ataupun pada menu/navigasi lain, misalnya menu horizontal. Fitur-fitur semacam ini dapat membantu pengunjung/pembaca blog mencari posting yang diinginkan sesuai kelompok/kategori tertentu.

b. Disarankan untuk tidak terlalu banyak membubuhkan label pada suatu posting, sehingga tidak membingungkan pengunjung/pembaca blog. 4 atau 5 label pada suatu posting sudah merupakan batas maksimal yang dapat diterapkan.

c. Karena label bukanlah url yang sesungguhnya (permalink), untuk SEO, maka sebaiknya label tidak diikutsertakan sebagai link yang harus diindeks search engine. Caranya adalah dengan membuat link label bersifat nofollow. Tambahkan rel=nofollow pada setiap link label ketika anda membuat/membubuhkan link label secara manual. Cara ini digunakan apabila anda menambahkan link label secara manual di bagian isi posting atau menu/navigasi tambahan.
Contoh penambahan atribut nofollow pada hyperlink (tag a):



 Jika anda ingin menambahkan nofollow widget label otomatis bawaan Blogger dan juga label yang muncul di bagian bawah/atasposting, maka atribut nofollow harus ditambahkan melalui edit HTML pada tag xml label. Lihat: Cara Membuat/Mengubah Label Blogger Jadi Nofollow

d. Untuk mengatasi pemunculan urutan breadcrumbs dengan label yang tidak sesuai atau yang tidak diinginkan, maka berhati-hatilah dalam membuat label untuk suatu posting. Pastikan label yang anda ingin munculkan di breadcrums adalah label yang ingin dioptimalkan. Sebaiknya jangan terlalu banyak menggunakan label pada suatu posting dan lihat apakah urutan abjad terakhir pada nama label adalah yang ingin dimunculkan di breadcrumbs. Label yang sesuai dapat berpengaruh baik pada SEO.

Happy blogging!
Read more »

Cara Membuat Menu Breadcrumb Blog

21.11 Unknown No comments

Menu/Navigasi Breadcrumbs adalah navigasi yang berada di bagian atas posting dan menunjukkan urutan isi halaman dari rootnya (Home) hingga ke posting/artikel.


Menu ini sering ditemui di blog/website berplatform WordPress, dimana urutan navigasinya dimulai dari Home > Parental Category > Subcategory > Posting. Di Blogger/Blogspot, kita juga dapat melakukan hack navigasi breadcrumbs dengan berdasarkan pada label: Home > Label > Posting. Menu ini akan muncul pada halaman posting, label, arsip, dan tidak muncul di bagian homepage.

Menu/navigasi breadcrumbs juga membantu meningkatkan SEO dan SERP, yaitu dalam pemetaan oleh search engine dan juga menambah kepadatan keyword, mengingat letaknya yang berada di bagian atas posting.

Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot:
1. Masuk ke dashboard > Design/Rancangan > Edit HTML, jangan lupa centang (check) "Expand Widget Templates" di pojok kanan atas kotak edit HTML.
2. Cari (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan CSS berikut di ATAS-nya:



3. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian tambahkan kode ini TEPAT di BAWAH/SETELAH-nya:



4. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script berikut TEPAT di ATAS/SEBELUM-nya:



5. Pastikan semua kode telah di-copy dan diletakkan dengan benar, lalu save.

Note: karena banyaknya problem yang disampaikan ketika mengedit, perhatikan benar-benar instruksinya serta pahami istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan kode benar-benar setelah atau sebelum kode yang dicari. Contoh:



Enjoy menu breadcrumbs baru di Blog Blogger/Blogspot-mu!
Read more »

Cara Mengganti Newer/Older Post Home Blog

20.36 Unknown No comments

Tutorial cara mengganti text "Newer Post", "Home", dan "Older Post" di Blogger/Blogspot dengan tulisan lain atau gambar (icon)

Jika kita melihat dan mengamati tulisan older post, newer post, dan home dalam tampilan template Blogger/Blogspot, tampak kurang menarik, terkesan jadul, dan tidak profesional, bukan? Sebagai alat navigasi, tentunya anda perlu memperhatikan tampilannya agar lebih menarik pengunjung untuk meng-klik-nya.

                                                  

Anda dapat dengan mudah mengubahnya menjadi tulisan lain atau gambar (icon) dengan cara sebagai berikut:
1. Masuk ke dashboard > design/rancangan > edit HTML, klik "Expand Widget Templates".
2. Cari kode yang berwarna merah sebagai berikut:
Wujud barisnya biasanya seperti ini, kopi kode yang berwarna merah dan masukkan ke kotak pencarian browser (Ctrl+F).



(yang terakhir adalah Home/Beranda, biasanya ada dua, jadi cari satu lagi).

3. Perhatikan poin-poin berikut:
A. Jika ingin mengganti dengan tulisan lain:
<data:newerPageTitle/> adalah newer post, hapus dan ganti dengan "Previous" atau kata-kata sejenisnya yang diinginkan.
<data:olderPageTitle/> adalah older post, hapus dan ganti dengan "Next" atau kata-kata sejenisnya yang diinginkan.
<data:homeMsg/> adalah home/beranda (biasanya ada dua, jadi jika ingin mengganti, maka ganti keduanya), biarkan begitu saja atau ganti dengan "Home" atau kata-kata sejenisnya yang diinginkan.
Contoh:



b. Jika ingin mengganti dengan gambar (icon):
Masukkan script image source sebagai pengganti dari tulisan: <img src="url gambar icon"/>
contoh:



Anda dapat menggunakan gambar berikut, seperti yang dipakai blog ini, namun upload dan host sendiri ya. Klik kanan di atas gambar dan klik "save image as", atau bisa cari di internet. Lalu upload gambar dan ambil direct link-nya, masukkan seperti contoh diatas.

4. Langkah terakhir, preview terlebih dahulu, atau langsung save.
Read more »

Cara Membuat Daftar Isi Di Blog (Part 3)

19.21 Unknown 1 comment

Hai Sobat Bithoo ketemu lagi,,, Emmm ada lagi nih cara membuat daftar isi blog, kita menuju ke daftar isi part 3,,, penasaran bentuk dari daftar isi part 3 ini yuk kita lihat.

Contoh gambar dari bentuk daftar isi part 3

Daftar isi berefek accordian berfungsi untuk menghemat tempat dimana daftar isi blog banyak. Membuat daftar isi blog menjadi lebih ringkas dan rapi. Banyak kita jumpai daftar isi berefek accordion ya... Bagaimana kalau kita menambahkan efek link nudging yaitu jika link di sorot maka akan bergeser. Demo dapat di lihat disini Penasaran ingin sekali mempraktekan cara membuat daftar isi dengan efek link nudging dan accordion di blog sobat? Yuk ke cara:

Langkah  pertama:
  • Login blogger anda
  • Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
  • Cari kode ]]></b:skin>
  • Copy kode dibawah ini dan paste diatas kode ]]></b:skin>


keterangan:
warna di ubah sesuai keinginan
  • Tempatkan kode di bawah ini di atas kode </head>

  • Simpan Template

Langkah kedua:
  • Buat postingan, di beri judul daftar isi atau sitemap
  • Tempatkan kode di bawah ini di edit html editor blog
  • Save dan lihat hasilnya

Semoga infonya bermanfaat...
Read more »

Cara Membuat Daftar Isi Di Blog (Part 2)

18.40 Unknown No comments

Cara membuat daftar isi blog kali ini berbeda dengan sebelumnya, baik tampilan maupun script yang akan digunakan, saya pribadi lebih suka dengan daftar ini (content) karena bisa menampilkan seluruh judul postingan dan dikelompokkan sesuai dengan label masing-masing judul. Jadi kalo postingan kita buat tanpa menggunakan label, besar kemungkinan judul postingan tidak akan muncul didalam daftar ini.

Daftar isi (content) ini saya bagi menjadi dua bagian, yaitu Daftar isi ditampilkan pada satu halaman penuh dan Daftar isi ditampilkan pada halaman depan blog

Cara pertama adalah jika kita ingin menampilkan daftar isi ini dihalaman depan blog kita, agar setiap pengunjung dapat melihat daftar isi blog kita tiap kali mengunjungi blog kita

Contohnya sebagai berikut :


Berikut ini langkah-langkahnya :
1. Masuk ke account blogger anda
2. Pilih tata letak/layout
3. Pilih tambah gadget
4. Pilih HTML/javascript.
5. Beri Judul Dafar isi atau judul sesuai dengan keinginan sobat
5. Kopas kode di bawah ini



http://namablog.blogspot.com : ganti dengan alamat blog sobat

width:430px : Ganti Lebar sesuai dengan yang sobat inginkan, sesuaikan dengan template

height:120px : Ganti tinggi nya sesuai dengan keinginan sobat


6. Kemudian save dan letakkan sesuai dengan keinginan sobat.



Kemudian cara kedua saya akan bahas Daftar isi yang akan ditampilkan pada satu halaman penuh

Berikut ini langkah-langkahnya :
1. Masuk ke account blogger anda
2. Pilih New post
3. Pilih Edit HTML pada kanan atas halaman tersebut
4. Beri Judul postingan tersebut dengan Daftar Isi, atau judul apapun sesuai keinginan sobat.
5. Copy paste script berikut ini :



http://alamatblog.blogspot.com : Ganti dengan alamat blog sobat

6. Klik Publish Post

Jadi deh, hasilnya atau sebagai contih dapat dilihat disini.

Read more »

Cara Membuat Daftar Isi Di Blog (Part 1)

18.20 Unknown No comments

Cara Membuat Widget Daftar Menu Blog Otomatis - Daftar menu blog yang biasanya ditempatkan pada sidebar blog ini ada juga yang menyebutnya dengan table of content. Cara membuat table of content ini sedikit berbeda dengan daftar isi blog otomatis yang pernah saya posting sebelumnya. Pada widget daftar menu otomatis ini sudah dilengkapi fungsi scroll dan pengunjung blog anda dapat mempercepat pencarian artikel dengan menggunakan opsi pilihan label, title, tanggal posting serta dapat juga menampilkan seluruh isi blog jika kita memilih opsi “All label”. Pada script daftar menu blog yang mau saya share ini, mampu menampilkan sampai max 500 halaman posting. Jika blog anda sudah memiliki lebih dari 500 halaman posting, tinggal diganti saja angka 500 dengan angka 1000 beres !. Dan satu lagi kelebihannya : jika anda mengklik icon panah hitam yang ada didepan judul posting, maka akan memunculkan ringkasan artikel tersebut sepanjang 250 kata. Klik kembali icon panah tersebut untuk menyembunyikan ringkasan.





Cara Membuat Daftar Menu/Isi Di Sidebar Blog :
1. Login ke dashboard blogger anda.
2. Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3. Copy script dibawah ini dan paste pada gadget.



4. Silahkan edit pada lebar (width) dan tinggi (height) pada script ini untuk menyesuaikan dengan lebar sidebar blog anda. Dan ganti juga http://bithoo.blogspot.com dengan nama blog anda.
5. Save / Simpan.

Cukup mudah bukan cara membuat widget daftar menu blog ini ? Mudah-mudahan postingan ini bisa menjawab keinginan sobat-sobat yang “mungkin” saja salah alamat datang ke blog ini. Karena dari data statistik widget histat counter yang saya pasang di blog ini, banyak juga pengunjung yang datang dengan kata kunci membuat daftar menu blog ternyata diarahkan ke artikel Cara Membuat Daftar Isi Sitemap Blog Otomatis. Ternyata mbah Google juga bisa salah ngasih alamat ya he he.

Di Buat oleh: Raihanun (Code Script).
Read more »

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Bithoo | Bloggerized by Lasantha - Premium Blogger Themes | Bluehost