Thursday, April 19, 2012

Cara Membuat Kotak Pesan Diblog

Cara Membuat Kotak Pesan Diblog

Cara Membuat Kotak Pesan Diblog


Sahabat pemikir cerdas ini ada Cara Membuat Kotak Pesan Di blog sahabat. ini sangat berguna sahabat untuk promo blog kita nantinya dengan pengunjung sahabat. Tutor ini boleh share dari blog tetangga juga sahabat. semoga dengan share tutor ini bermanfaat untuk sahabat.
Kotak Pesan,jejak pengunjung atau istilah lainnya shout box, Say Box, Tag Board, dan Chatter Box adalah suatu kotak yang berfungsi untuk mengirimkan pesan-pesan pendek, namun bisa juga berfungsi sebagai tempat ngobrol (chatting). Dengan shoutbox, kita juga bisa mempromosikan blog kita, misalnya nih, kita datangi blog orang yang menyediakan kotak ini kemudian kita kasih komentar atau cuma sekedar salam di shoutbox mereka, lalu yang punya blog akan melihat di shoutbox, biasanya meraka akan balas mengunjungi blog kita. Nha gitu ceritannya. Biasanya kotak ngoceh diselipkan kedalam halaman web/blog dengan bahasa java Script. Bagi kamu yang jago pemrograman java script mungkin bisa membuatnya sendiri dengan membuat kode-kode yang memusingkan kepala. Namun buat kamu yang nggak jago nggak usah kuatir karena sekarang ini banyak situs internet yang menyediakan layanan ini, salah satunya yaitu Shoutmix . Caranya adalah sebagai berikut :

1. Buka situs Shoutmix Kamu harus mendaftar di situs tersebut, cara daftarnya gampang kok, yaitu masukan email kamu dan pasword yang kamu kehendaki.
2. Jika pendaftarannya berhasil kamu langsung disuruh milih type shoutbox yang disediakan, terserah kamu milih bentuknya yang gimana. Klik tombol Continue
3. Setelah itu kamu akan mendapat ucapan "Terima Kasih" lalu klik link Go to My Control Panel Now
4. Disitu kamu bisa mensetting terlebih dahulu shoutbox kamu, misalnya Style & Color, Date & Time, dan lain-lain.
5. Jika sudah selesai klik menu Get Codes
6. Jika kamu pingin menaruh shoutbox di blog kamu pilih "Place Shoutbox on Webpage"
7. Atur lebar dan tinggi shoutbox di kolom widht dan hight
8. Kemudian Copy kode yang ada di dalam kotak "generated Codes"
9. Login ke blogger.com lalu pilih Layout kemudian Add Page Elements
11. Tambahkan element HTML/Javascript.
12. Paste Kode yang telah kamu copy dari shoutbox.com tadi di kotak "Content" lalu simpan.
13. oke,, lalu jangan lupa tinggalkan koment di shoutmix saya hahahaaa

Cara Membuat Kotak Pesan Diblog

Sunday, April 15, 2012

Cara Menampilkan Google Translate

Cara Menampilkan Google Translate

Cara Menampilkan Google Translate


Sahabat pemikir cerdas sebelumnya sudah banyak di post kan cara untuk mempercantik blog sahabat. Dan kini tentunya blog sahabat sudah cantik n menarik bukan. kini saaatnya agar blog yang sudah cantik ini bisa dibaca oleh para peselancar dunia maya dimanapun berada , bagian negara mananapun.Ingin supaya blog sahabat dapat dibaca para blogger mania di seluruh penjuru dunia, gunakan aja Google Translate. program pintar ini mampu meterjemahkan blog anda ke dalam 34 bahasa.





Gadgets powered by Google



Sahabat dapat memasang Google Translate ini di blog anda, caranya :
  1. Klik gambar Google Translate di atas, kalo sudah masuk ke sini,
  2. Pilih Tools, kemudian
  3. Pilih bahasa yang anda gunakan di blog anda, misalnya pilih Indonesia
  4. Copy kode yang berada di bawah tulisan "Copy and paste the HTML below to include the gadget on your webpage." kemudian paste di Tata Letak --> Add Gadget --> HTML/javasript terus paste kode tersebut di kolom konten
  5. Simpan. 
  6.  
    Semoga berhasil sahabat.

Cara Menampilkan Google Translate

     

Wednesday, April 11, 2012

Cara Memasang Gambar di Header Blog

Cara Memasang Gambar di Header Blog

Cara Memasang Gambar di Header Blog


Sahabat pemikir cerdas yang haus untuk mempercantik blognya ini ada tutor yang menarik Cara Memasang Gambar di Header Blog
Kadang kala sahabat template standar dari blogger.com tidak menyertakan fasilitas Add Widged sahabat pada bagian headernya sehingga kita kesulitan untuk memasang gambar atau widged lainya di bagian atas blog atau biasa di sebut Header. kalau masih bingung tentang Header, itu tuh yang ada tulisan judul blog dan deskripsi tentang blog, contohnya kalau punya saya di bagian yang ada tulisanya Pemikir Cerdas

Nah begini caranya pertama cari kode berikut ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div> 


Ganti kode yang berwarna biru sehingga menjadi seperti ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div> 


Setelah itu simpan. Untuk maxwidgets nya juga bisa anda ganti menjadi dua atau lebih Widged nya, nah setelah itu seperti biasa masuk ke Tata Letak--->Add Gadged--->HTML/javascript anda posting dahulu gambar di www.photobucket.com lalu copy HTML code nya, lalu paste di HTML/javascript pada bagian content. atau bisa juga anda langsung upload foto dari komputer anda, caranya masuk ke Tata Letak--->Add Gadged--->Gambar lalu upload gambar anda yang ada di komputer anda oke deh, selamat mencoba.

Cara Memasang Gambar di Header Blog



Saturday, April 7, 2012

Cara Membuat Menu Vertikal - tutorial

Cara Membuat Menu Vertikal - tutorial

Cara Membuat Menu Vertikal


Baiklah sahabat pemikir cerdas kali ini kita akan mencoba untuk membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal . Contohnya seperti gambar dibawah ini:


Untuk membuatnya tidak terlalu sulit kok sahabat. nah buat sahabat yang tidak sabaran lagi lansung aja kita ke tkp..


Beginilah cara membuatnya :
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/orange1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/
orange1.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna orange muda (
orange1.gif dan orange2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Pilihan Warna menu vertikal :

orange1.gif
orange2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://pemikir-cerdas.blogspot.com">Trik Blog</a></li>
<li><a href="http://pemikir-cerdas.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna biru muda adalah linknya dan yg warna kuning adalah teks yang ditampilkan.

semoga berhasil ya sahabat.

Cara Membuat Menu Vertikal

Tuesday, April 3, 2012

Pemikir Cerdas - Cara Upload Gambar Ukuran besar di blogger

Pemikir Cerdas - Cara Upload Gambar Ukuran besar di blogger


Cara Upload Gambar Ukuran besar di blogger

sahabat pemikir cerdas kali ini ada Cara Upload Gambar Ukuran besar di blogger tutorial ini boleh saya ambil dari blog Kang Rohman dan saya share disini sahabat. karena ini sangat diperlukan sahabat. mangkanya saya share disini sahabatok deh sahabat lansung aja kita praktekkan cara ampuh ini sahabat.


Apakah ada trik agar bisa upload gambar ukuran besar di blogger? jawabannya ada dan terbilang sangat mudah. Penasaran? begini caranya

:

* Silahkan upload gambar yang berukuran lebih dari 400 pixel ke blogger.
* Jika gambar sudah tampil di blog sahabat, klik kanan pada gambar tersebut lalu pilih Copy Image Location untuk mendapatkan alamat gambar tersebut.
* Paste pada program text editor seperti "Notepad", "WordPad' atau text editor lainnya. Contoh : alamat gambar yang saya dapatkan seperti ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUwwlGsgYwoOupelkHax87L3ciycrwY-KRos5DDSlN0sVWO4y6-Ypq1C6NilkNKEJIA71Be4PtNY7XAMblOaGgNYka3hvQYn7UAgSu03K6lU8d-izGaCGK38ERUKzS5QfQjE-Laytfm4/200/Pc..jpg


* Perhatikan kode yang saya cetak merah, kode tersebutlah yang membatasi gambar besar yang kita upload menjadi kecil. Agar gambar bisa tampil maksimal, maka kita hanya cukup mengubah nilainya menjadi s800 ( jika gambar yang di upload kurang dari 800 pixel ) atau di ganti dengan s1600 ( jika gambar yang di upload melebihi 800 pixel ). Contoh, kodenya jadi seperti ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUwwlGsgYwoOupelkHax87L3ciycrwY-KRos5DDSlN0sVWO4y6-Ypq1C6NilkNKEJIA71Be4PtNY7XAMblOaGgNYka3hvQYn7UAgSu03K6lU8d-izGaCGK38ERUKzS5QfQjE-Laytfm4/s800/Pc..jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUwwlGsgYwoOupelkHax87L3ciycrwY-KRos5DDSlN0sVWO4y6-Ypq1C6NilkNKEJIA71Be4PtNY7XAMblOaGgNYka3hvQYn7UAgSu03K6lU8d-izGaCGK38ERUKzS5QfQjE-Laytfm4/s1600/Pc..jpg

Mudah sekali bukan? mau bukti, silahkan klik link di bawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3Olzx4RoRImcEklyuv8-tx8UHE_lVhlCkVzr_gqbKe0Rgr-2ICxmRyTJeUfvmModIPo0WnJJ6SBWuXyxiVLycTD15lLbYWXc2imbUYnkQZ2cEIgJfNDUsAu04k0hE99QsSlr0y4CJbvd/s400/blog-aing.jpg

Coba bandingkan dengan yang ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3Olzx4RoRImcEklyuv8-tx8UHE_lVhlCkVzr_gqbKe0Rgr-2ICxmRyTJeUfvmModIPo0WnJJ6SBWuXyxiVLycTD15lLbYWXc2imbUYnkQZ2cEIgJfNDUsAu04k0hE99QsSlr0y4CJbvd/s800/blog-aing.jpg

Bandingkan juga dengan yang ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3Olzx4RoRImcEklyuv8-tx8UHE_lVhlCkVzr_gqbKe0Rgr-2ICxmRyTJeUfvmModIPo0WnJJ6SBWuXyxiVLycTD15lLbYWXc2imbUYnkQZ2cEIgJfNDUsAu04k0hE99QsSlr0y4CJbvd/s1600/blog-aing.jpg

Format kode gambar di atas adalah apabila anda mengupload gambar langsung melalui post edtor blogger. Apabila anda mengupload melalui Windows Live Writer seperti yang biasa kang Rohman lakukan, maka format gambar yang di hasilkan adalah seperti ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-9T761yryuhUSKXRnYEYqaBgT27x1YLu6Zt8hFuIuJAD5jt0ctKlUjV8k2eX_iUztuWaYPMCOnBZId-5zqn-hE04tKIFem_xCIt2C6z66VwxIl_O4jCh1FqSzjD2x23NHwFzw0TDBBs/?imgmax=800

Terlihat bahwa gambar yang di tampilkan di batasi hanya 800 pixel, agar mendapatkan gambar yang maksimal, cukup dengan mengubah angka 800 dengan angka 1600, sehingga kodenya jadi seperti ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-9T761yryuhUSKXRnYEYqaBgT27x1YLu6Zt8hFuIuJAD5jt0ctKlUjV8k2eX_iUztuWaYPMCOnBZId-5zqn-hE04tKIFem_xCIt2C6z66VwxIl_O4jCh1FqSzjD2x23NHwFzw0TDBBs/?imgmax=1600

Trik mengubah nilai pixel ini berlaku juga untuk posting gambar secara umum, anda hanya perlu masuk dulu ke edit HTML, lalu ubah kode pixelnya.

post





















Ternyata kita bisa upload gambar dalam ukuran besar ke blogger bukan?


Cara Upload Gambar Ukuran besar di blogger