Kumpul Tips Trik: 2012

Friday, 28 December 2012

Kumpul Tips Trik - Cara Mudah membuat Widget Di Atas Header - [kumpultipstrik.blogger.com]

Cara Mudah membuat Widget Di Atas Header
Pada umunya template blog bawaan tidak bisa menempatkan widget di atas header,Tapi kita sering melihat di blog lain Laman,Banner,Link dll berada di atas Header,Lalu bagaimana cara bisa membuat widget atau Gadget di atas header?Jawabannya adalah ayo kita simak cara-caranya berikut ^_^

1. Login > Template > Edit Template ,Lalu Cari kode:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

2. Lalu Hapus dan Ganti Menjadi

<b:section class='header' id='header' preferred='yes'>

3. Selesai deh,Mudah dan cepat

Hasilnya:

Wednesday, 19 December 2012

Kumpul Tips Trik - Cara Membuat Tab Menu laman Di Atas Header Blog - [kumpultipstrik.blogger.com]

Cara Membuat Tab Menu laman Di Atas Header Blog
Ketika membuat blog dengan menggunakan platform Blogger atau Blogspot, maka secara default di atas header akan ditampilkan bilah mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’ atau dapat pula disebut sebagai baris navigasi. Namun karena beberapa alasan (misalnya adalah untuk mempercantik tampilan halaman), maka tidak sedikit pengelola blog yang menyembunyikan bagian tersebut dengan cara menambahkan kode tertentu ke dalam template.

Lihat contoh gambar di bawah ini:

Atau lihat demo

jika tertarik silahkan ikuti langkah-langkah berikut ini:

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

#navbar-iframe {
  height:0px; visibility: hidden; display: none;
}

Keterangan:

Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.

Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin>

/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
--------------------------------------------------------------*/
.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kolom-utama {
  -moz-transition: all 0.2s linear 0s;
  width: 960px;
  height: auto;
  margin: 0px auto;
}

.kolom-menu {
  width: 521px;
  height: auto;
  margin: 0px 0px 0px -41px;
  float: left;
  display: inline;
}

.kolom-menu ul {
  height: auto;
  margin-top: 0px;
}

.kolom-menu ul li {
  float: left;
  position: relative;
  list-style: none outside none;
}

.kolom-menu ul li:first-child {
  border-left: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  position: relative;
  border-right: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125);
}

Keterangan:

Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.

Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.

<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://blogzafar.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXs80WbK6hlSned_jSR1Esc3XrJZ3Er78rrz1mVnbWbTFZ08HJILhHh3V24aZp-A-2uGoxueziZUTpP_UVyZITXwd7kwEDh3mBTht-Qm934-NoFu_Qix8mpMCo0ftnp6XV9_kijlfbGDY/s800/Beranda.png' width='20px'/></a></li>
        <li><a href='URL'>Menu Kiri 1</a></li>
        <li><a href='URL'>Menu Kiri 2</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>

Keterangan:

Ganti http://blogzafar.blogspot.com/ dengan URL blog Anda dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.

Kelima, simpan template.

Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>.

Semoga berguna dan bermanfaat.

Salam.

Tuesday, 27 November 2012

Kumpul Tips Trik - Cara Mengganti Tulisan Home,Next,Back Dengan Gambar - [kumpultipstrik.blogger.com]

Cara Mengganti Tulisan Home,Next,Back Dengan Gambar - Cara mengganti tulisan posting baru, home, posting lama dengan gambar. sesuai judul posting yang akan kita bahas kali ini. Maksud dari Tulisan Posting Lama, ada;ah Home, Posting Baru/posting lama adalah fitur next post / previous pos, kita akan menggantinya dengan dengan gambar. Letaknya Di bawah post . Jika ingin memasangnya ikuti langkah - langkah di bawah ini:

1. Login ke blogger

2. Lalu klik Rancangan

3. Edit HTML

4. Expand Template Widget

5. Untuk tulisan Postingan baru cari kode <data:newerPageTitle/> dan Ganti kode tersebut dengan kode

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Nx8zVbpuwa_6igqY4sji-JbNtdjprwt9GS-6eDkmuSyNjPOS_NlcwudzEIpj4-tA2pQSZsGnUerOr-ZXN_ltivEZR3Uld3HjSv3yoZHgK5X-7_-MUK5o-4ReAn5T95ETi7TnyDNB6MA/s400/icon+new.bmp'/>

6. Untuk tulisan Postingan lama cari kode <data:olderPageTitle/> dan ganti kode tersebut dengan kode

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8sdA3mnpyLDcQyA5ZLStICyUoq0UYQQaYOA7Xq7-kURLgYuWUqVeQCubet4J8HvOtMxd1W9fzstA_YlCCGZxz0qbbqhNFGs3y_DCkjAwa4bIFdUIIMsyNuuVmqUjdKnOkCFEPkCuZARg/s400/icon+back.bmp'/>

7. Untuk tulisan Home cari kode <data:homeMsg/> dan ganti kode tersebut dengan kode

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkQiQqRHp8dGS2_JgXm_WDJ2quFqa4b2Pk85dxUDDh52SAOiAnOiUTz6I966vlV8wCXqTYuksK2Fakl7JHfTLmFTuXs7RvNhW9IOpF1cyAoeSn0qK9ZqiS2PdmnHnT6rRQGV25eHGOOM/s400/icon+home.jpg' title='Halaman Awal'/>

8. Simpan Template dan lihat hasilnya

Catatan: ganti kode yang berwarna merah dengan icon gambar yang anda inginkan
semoga berhasil

Saturday, 10 November 2012

Kumpul Tips Trik - Cara Meng-Edit Memperlebar Halaman Blog - [kumpultipstrik.blogger.com]

Cara Meng-Edit Memperlebar Halaman Blog
Bagi sahabat yang suka otak atik template Mungkin artikel ini bisa membantu, agar tampilan blog kita sesuai dengan kemauan kita. Disini saya akan menjelaskan tentang Memperlebar Halaman Blog agar lebih dinamis dan nyaman untuk baca-baca, sebelum meng-edit Template kita saya akan menjelaskan sedikit tentang elemen yang perlu di lebarkan.

1. Body elemen/area yang ada di paling belekang yang mencakup keseluruhan sebuah template
2. #outer-wrapper elemen ini letaknya di depan body yang berisi elemen-elemen seperti #header, #main, #sidebar-wrapper, dan #footer-Wrapper
3. #header karena namanya header ya berarti kepala artinya tempat atau areanya ada di atas Template yang berisi Judul blog dan Deskripsi Blog
4. #main elemen yang satu ini isinya tentang artikel yang kita tulis atau post dan kotak komentar
5. #sidebar-wrapper klo elemen yang satu ini isinya ya widget-widget yang biasa sob pakai seperti buku tamu trus statistik dll.
6. #footer-wrapper elemen ini letaknya ada di paling bawah Template yang berguna untuk meletakkan Widget atau pun yang lain

Cara Memperlebar Halaman Blog, langkah-langkah nya di bawah ini :

1. Login ke blogger
2. Masuk ke Tata Letak Edit HTML
3. Sebelum meng-edit Backup dulu Template sahabat dengan cara Download Template Lengkap
4. Setelah selesai membackup Template cari kode yang akan di lebarkan, saya kasih contoh : #Outer-Wrapper, apabila sahabat menggunakan Mozilla tekan Shift+F3 agar lebih mudah dalam pencarian
5. Nah setelah ketemu akan ada tampilan kurang lebih seperti di bawah ini

#outer-wrapper {
background:#000;
width:973px;
margin:0 auto;
padding:0;
text-align:left;
border:2px solid #1A1A1A;}

6. Nah sobat perhatikan tulisan yang bercetak tebal merah, tulisan tersebut yang mempengaruhi lebar dari #outer-Wrapper. Apabila sahabat ingin di perlebar tinggal ganti saja angka yang bercetak Tebal dan merah menjadi angka yang lebih tinggi dari semula.
7. kalau kira-kira sudah cukup jangan dimpan dulu takut tidak sesuai keinginan klik Pratinjau
8. kalau sudah lihat dan sesuaikan dengan kenginan, setelah puas baru Simpan
9. untuk elemen yang lain yang ingin sahabat perlebar bisa coba sendiri meng edit nya, caranya sama sepertiyang di atas

Selamat mencoba semoga brhasil

Sunday, 21 October 2012

Kumpul Tips Trik - Cara Membuat Template Blog - [kumpultipstrik.blogger.com]

Cara Membuat Template Blog Bagaimana cara membuat template blog sendiri? itulah pertanyaan yang sering ditanyakan para blogger. Ada beberapa cara yang digunakan orang untuk mempercantik blog mereka. Salah satunya yatu dengan merubah tampilan blog mereka dengan mengganti template standard yang ada. Artikel kali akan membahas bagaimana cara membuat Template blog.

Cara membuat template blog sendiri :

1. Membuat template blog sendiri dengan menggunakan fasilitas Blogger Bloggerer
Cara Membuat Template Blog tipe ini sangatlah umum alias sudah banyak yang tahu dan caranya pun cukup mudah. Alangkah baiknya bila anda langsung praktek disana. Silahkan ikuti link ini

2. Membuat template blog sendiri dengan bantuan software atau aplikasi
Cara membuat template blog yang ini jarang digunakan orang untuk membuat template blog, kenapa? saya rasa jawabannya karena belum ada software gratisan untuk membuat template blog. Maksudnya, software untuk membuat template blog dijual dengan harga tertentu. Ya memang ada sebagian yang menggunakan software untuk membuat template blog sendiri.

3. Membuat template blog sendiri dengan cara editing Online
Cara membuat template blog inilah yang banyak digunakan, karena tidak perlu biaya dan kemungkinan besar sudah bisa dengan cepat untuk membuat template blog sendiri. Situs yang menyediakan fasilitas membuat template biasanya sudah menyediakan template template tertentu yang nantinya bisa anda edit sendiri. berikut ini situs yang menyediakan editing template secara online.

Situs membuat template blog sendiri secara online:

Profilebrand : menyediakan fasilitas edit template gratis, kebanyakan template yang disediakan untuk kita edit bertema jaringan sosial ( facebook, twitter, myspace dll )
Pimp my Profile : Nah untuk situs ini anda bisa membuat template blog, Myspace, dan friendster. Silahkan langsung saja ke situsnya.
Yvoschaap : Situs ini menyediakan fasilitas untuk membuat template blog sendiri hanya khusus wordpress.
DoTemplate : kalau yang ini lumayan bagus bagi kita yang belajar membuat template blog sendiri. Disana sudah disediakan beberapa template untuk kita edit sendiri. Template yang disediakan juga cukup banyak dan simpel. Setelah anda selesai membuat template blognya, anda bisa langsung mendownloadnya disana.
TemplateTr : Ini situs yang menyediakan fasilitas membuat template blog gratis dan cepat. Hanya dengan 4 langkah anda sudah bisa membuat template blog sendiri. Memang hasilnya simpel, tapi dengan karya hasil sendiri tentunya memiliki kebanggaan tersendiri.

Cara membuat template blog sendiri bukan hanya yang ada diatas. Anda juga bisa download template jadi dan langsung mengedit sampai berbeda dengan aslinya. Silahkan anda uji kemampuan dan imajinasi anda untuk menciptakan template yang berbeda dari yang lain.
selamat mencoba dan semoga sukses.

Wednesday, 17 October 2012

Kumpul Tips Trik - 15 Situs Penyedia Template Blog Gratis - [kumpultipstrik.blogger.com]

Situs Penyedia Template Blog Gratis - Jika Anda sudah bosan dengan tampilan blog Anda di Blogger dan merasa tidak puas dengan pilihan template yang disediakan Blogger, Anda bisa menggunakan desain template buatan pihak ketiga yang tersedia secara gratis. Jika Anda melakukan pencarian dengan Google, Anda akan dengan mudah menemukan situs-situs penyedia template blogger tersebut. Pada artikel kali ini, Diatasawam merekomendasikan 15 situs yang menyediakan template blogger dengan kualitas bagus secara gratis….
15 Situs Penyedia Template Blog Gratis
Untuk menggunakan template dari pihak ketiga ini, terlebih dahulu Anda harus mendownload file template yang disediakan situs-situs tersebut. Beberapa situs menyertakan file “readme.txt” yang berisikan petunjuk penggunaan template pada file yang Anda download tadi. Selanjutnya Anda akan mengupload file .xml ke dalam akun Blogger Anda. Tata cara pengunggahan ini ada pada artikel
Cara Memasang Template Blog Hasil Dwonload

Blogger Templates Blog
Styles
BTemplates
Theme Craft
Hook Up Your Blog
Deluxe Templates
Blogger Templates Free
Blogger Blog Templates
Blog Crowds
Zoom Template
Blog Template 4 U
Chica Blogger
Blogger-Templates
All Blogspot Templates
Mas Template

selamat mempercantik blog sahabt :)

Friday, 21 September 2012

Kumpul Tips Trik - Cara Menambah Widget/Gadget Di Blog - [kumpultipstrik.blogger.com]

Cara Menambah Widget/Gadget Di Blog - Untuk Cara Menambah Widget/Gadget Di Blog biasanya kalo kita ingin menambahnya di atas, bawah atau di samping blog yang tidak ada tulisan tambah gadget atau tambah widget di menu tata letak, cara-cara nya simpel dan mudah untuk di pelajari silahkan anda ikuti langkah-langkah Cara Menambah Widget/Gadget Di Blog di bawah:

masuk dulu ke blogspot atau blogger menggunakan akun kita

klik menu tata letak seperti gambar di bawah

setelah terbuka lalu klik menu tambah gadget seperti di bawah ini

lalu pilih HTML/java script seperti gambar berikut, dan isi script yang sahabat butuhkan ke dalamnya, entah itu untuk bener script atau scrip lainnya sesuai kebutuhan

setelah selesai mengisi script lalu tekan simpan, dan sekarang tinggal memindahkan nya ke tempat yang sahabat inginkan, cara memindahkannya tekan mous ke HTML/java script yang sahabat mau pindahkan lihat lingkaran merah di bawah, lalu arahkan ke tempat yang di tuju entah itu ke bagian pinggir blog atau ke atas,bawah,samping dll lihat tanda panah di bawah lalu lepaskan mous, jangan lupa simpan setelan di pojok atas dan lihat hasilnya

Jika sahabat ingin menghapus gadget/widget Lihat di
Cara Mudah Menghapus Widget/Gadget
Semoga bermanfa,at dan semoga berhasil.

Friday, 24 August 2012

Kumpul Tips Trik - Design Template Blog Geratis - [kumpultipstrik.blogger.com]

Design Template Blog Geratis - setelah kemaren membahas tentang cara memasang template blog hasil dwonload
kini saya mau berbagi tentang

Design Template Blog Secara Geratis

Buat disine blog tanpa ribet, ada banyak sekali tamplate blog gratis yang bisa di dwonload secara gratis yang mana menyediakan berbagai template yang sudah di disine sedemikian rupa tanpa kita harus ribet-ribet mengutak atiknya lagi tugas kita hanyalah memilih dan men dwonload template yang kita sukai,

di sana banyak sekali pilihan-pilihan yang menurut saya sangat bagus-bagus sampe-sampe saya pun bingung memilih yang mana saking banyak nya pilihan tak kalah menarik dengan template berbayar,

salah satunya adalah silahkan klik Disini untukmemilihnya dan memilihnya

klik dwonload dan untuk melihat tampilan blog penuh atau keseluruhan nya silahkan klik
VIEW DEMO

jika sahabat sudah selesai memilih dan mendwonload nya dan jika sahabat belum tau cara-cara menempelkan atau memasangnya ke blog maka sahabat bisa lihat cara-caranya Disini

disana anda akan di pandu step bay step cara memasangnya atau cara menempelkan template hasil dwonload tadi

setelah semuanya selesai maka anda tinggal menikmati hasilnya dengan tampilan template blog baru, semoga bermanfa'at yah bagi sahabat-sahabat yang sedang membutuhkan template nya

Lihat juga yang lain di 15 Situs Penyedia Template Blog Gratis dan terima kasih atas kunjungan nya

Thursday, 16 August 2012

Kumpul Tips Trik - Cara Memasang Template Blog Hasil Dwonload - [kumpultipstrik.blogger.com]

hi sahabat semua ketemu lagi bersama saya
dalam tulisan kali ini saya mau berbagi tentang cara memasang template blog hasil dwonload
bagi sebagian orang mungkin sangat di butuhkan cara cara ini
bagi sahabat yang punya tamplate hasil dwonloadan maka ikuti langkah-langkah di bawah ini

1. setelah anda mendwonload template nyamaka akan berbentuk buku yah biasa nya

2. tekan mous kanan di buku template itu seperti di bawah ini

3. kemudian klik extract here

4. login ke blog dan pilih tamplate seprti di bawah ini

5. pilih cadangkan/pulihkan

6. lalu tekan telusuri dan dwnload template seperti di bawah ini

kemudian lihat blog anda maka akan berubah menjadi apa yang anda inginkan atau sesuai dengan apa yang sahabat dwonload semoga bermanfa'at yah jangan lupa komentarnya :))

Monday, 6 August 2012

Kumpul Tips Trik - Cara Membuat Desine Judul Blog - [kumpultipstrik.blogger.com]

Buat para sobat Awanzo Blog'$ yang ingin mengganti tampilan Title Blog/Judul Blog, khususnya bagi sobat yang hobi di bidang menDESAIN Blog (Utak-Atik Tampilan Blog), tapi gak punya aplikasi desain di dalam perangkat sobat. Jangan berkecil hati....Sob ! Tenang, disini Awan akan kasih tahu caranya agar sobat semua masih bisa tetap berkreasi meskipun tidak ada aplikasi Desain di perangkat sobat. Okey...caranya adalah dengan kita menggunakan jasa generator Text Logo online sob.

Contohnya seperti punya saya ini:

Disini ada beberapa generator online yang bisa di gunakan oleh sobat semua.

1. www.textspace.net

Generator yang satu ini menawarkan beberapa bentuk model desain logo yang cukup memuaskan. Untuk contoh model text yang di tawarkan seperti misal: patterned text generator, glitter text generator, LCD text generator, marquee text generator, dan masih banyak lagi yang lainnya. Memiliki interface yang bersih dan waktu muat halaman yang cepat sehingga membuat kita semakin mudah dan cepat dalam membuat logo.

2. www.flamingtext.com

FLaming text memiliki banyak sekali koleksi design yang bermacam-macam dengan berbagai pilihan dari yang paling sederhana dan paling animatif. Membuat anda harus lebih jeli dan benar-benar fokus untuk membuat pilihan karena banyaknya design yang harus dipilih. Interface generator yang lengkap disertai live preview darihasil teks yang diedit sehingga tidak perlu lagi berpindah halaman untuk kembali mengedit.

3. cooltext.com

Sama halnya dengan flamingtext,cooltext memiliki banyak koleksi design dan memiliki interface editor yang mudah dan handy, sehingga siapapun dapat dengan mudah menggunakannya. Terdapat dua jenis design, yaitu logo dan button. Dilengkapi pula dengan puluhan jenis font menarik yang dapat dipilih dan disesuaikan dengan design blog.

4. simwebsol.com

Ketika membuka halaman web situs ini, anda akan masuk ke halaman text logo editor yang sederhana. Kostumisasi keseluruhan teks diserahkan kepada user, sehingga dapat membuat logo sesuai dengan kehendak. Pilhan style-nya tidak begitu banyak, namun masih cukup berharga mengingat hasil gambar dari online logo creator ini memiliki kualitas yang cukup baik.

5. www.logomatik.net

Design-design pada situs ini lebih menekankan pada koleksi design font yang menawan. Design yangdihasilkan dengan generator dapat dikostumisasi lebih, namun warna gambar hitam dan putih menurut saya adalah yang terbaik karena kesan vector-nya sangat kuat dan memukau.

6. www.thelogoshop.info

Cukup sederhana, atau bisa dibilang sangat sederhana, selainkarena situs ini hanya memiliki satu halaman, design-nya pun sangat terbatas. Namun, bagi anda yang sedang belajar dan dalam proses awal blogging dan design gambar, situs ini bisa menjadi awalan bagi anda untuk belajar membuat design logo .
Setelah mendapatkan logo blog, pasang logo tersebut untuk menggantikan title dan description pada header blog.

Monday, 25 June 2012

Cara Membuat Scroll Pada Kotak Komentar Blog

Sebelumnya Saya sudah pernah Posting tentang "Cara Membuat Scroll Pada Postingan Blog", dan kali ini Saya akan Posting tentang "Cara Membuat Scroll Pada Kotak Komentar Blog". OK, Saya tidak perlu menjelaskan tentang Tips ini kan, Toh Kalian juga sudah pada tahu tentang Tips ini. Kita langsung ke Langkah-Langkahnya.

[1]. LogIn dulu ke BLOG Kalian.

[2]. Kemudian dari Dasbor, cari Rancangan --> Edit HTML.

[3]. Lalu centang "Expand widget template", dan cari Code #comments-block{ atau #comments-block {.

[4]. Kalau sudah ketemu, sekarang CoPas Code di bawah ini tepat di BAWAH atau SETELAH Code di atas.

max-height:300px;border:1px solid #eee;overflow:auto;

KETERANGAN :

* Code yg berwarna Biru, Kalian bisa menggantinya dengan Tinggi Scroll-nya dan Warna Garis Pinggir-nya. Code Warna HTML..? Klik di SINI.

[5]. Kemudian terakhir, tinggal di SIMPAN dan lihat hasilnya.

Sekian Tips Blogger kali ini, semoga Tips kali ini bermanfaat buat Kalian semua.

Salam Blogger Indonesia.

Wednesday, 6 June 2012

Cara Membuat Tooltip/Info Tips Otomatis Di Blog

Hello sobat Blogger semua, kembali Saya Update Tips Blogger. Sesuai permintaan salah satu teman FB Saya, Saya Sahre Tips ini. Sebelumnya Kalian tahu apa itu Tooltip....? jika belum tahu, Saya akan jelaskan sedikit.

Tooltip atau yang disebut juga sebagai Infotip adalah sebuah informasi yang langsung muncul saat Kursor Mouse mengarahkan pada suatu Link, dan pada posting kali ini, Saya akan membagikan langkah - langkah membuat Tooltip Otomatis di Blog. Sebagai contoh Kalian bisa lihat di Blog Saya ini, atau pada SS di atas. OK kita masuk ke langkah-langkahnya.

[1]. Pertama pastinya LogIn dulu ke BLOG Kalian.

[2]. Lalu dari Dasbor, cari Template --> Edit HTML.

[3]. Kemudian centang "Expand Template Widget".

[4]. Lalu cari Code <body>. (Gunakan CTRL + F atau F3 untuk mempermudah pencarian).

[5]. Kalau sudah ketemu, sekarang CoPas Code di bawah ini tepat di BAWAH Code <body>.

<script src='http://jmkjs.googlecode.com/files/1.%20ToolTipJmK.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Blog-JmK </a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #778899;background:#dcdcdc}#ttcont{background:#000000; -moz-opacity: 0.1; opacity: 0.9; -khtml-opacity: 0.0; color:#00ff00}"
};
//]]></script><script src='http://jmkjs.googlecode.com/files/3.%20ToolTip%20JmK.js'/>
<script src='http://jmkjs.googlecode.com/files/2.%20JmKToolTip.js'/><div id='warungbebasautotooltip'>

KETERANGAN :

* Code yang berwarna BIRU, Kalian bisa menyesuaikanya dengan keinginan Kalian. Code Warna HTML, klik di SINI.

PERHATIAN :

KALIAN HANYA BOLEH MENGEDIT CODE YANG BERWARNA BIRU SAJA, APABILA KALIAN MENGEDIT CODE YANG LAINNYA, TOOLTIPNYA AKAN ERROR.

[6]. Lanjut, sekarang cari Code </body>, dan tambakan Code di bawah tepat di ATAS Code </body>.

</div><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>

[7]. Dan terakhir tinggal di SIMPAN dan lihat hasilnya.

Sekian dulu Tips Blogger kali ini, semoga Tips kali ini bermanfaat buat Kalian semua, dan buat Teman FB Saya semoga tanda tanyanya sudah terjawab. Dan jika ada pertanyaan tentang Tips ini, silahkan Kalian tulis pertanyaan Kalian di Kotak Komentar di bawah.

Salam Blogger Indonesia.

Tuesday, 5 June 2012

Cara Membuat Effect Bintang Pada Link Blog

Sebelumnya Saya sudah pernah Posting tentang "Cara Membuat Effect Pelangi Pada Link Blog", "Cara Membuat Effect Bayangan Api Pada Link Blog", dan "Cara Membuat Link Bergerak", dan kali ini Saya akan Posting tentang "Cara Membuat Effect Bintang Pada Link Blog". Sebenarnya Tips kali ini sudah pernah di Posting oleh Sobat2 Blogger yang lain, dan karena Saya baru sempat Update, maka Saya Share.

OK, kita langsung ke langkah-langkahnya saja.

[1]. Pertama pastinya LogIn dulu ke BLOG Kalian.
[2]. Kemudian, dari Dasbor cari Template --> Edit HTML.
[3]. Lanjut, sekarang cari Code a:link { atau a:link{. (Gunakan CTRL + F atau F3 untuk mempermudah pencarian).

Kira-Kira Codenya Seperti Gambar Di Bawah.

[4]. Nah kalau sudah ketemu, sekarang HAPUS semua Codenya. Dari Code a:link { atau a:link{ SAMPAI Code } dan ganti dengan Code di bawah.

a:hover {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi08WvBKAc6S1nIWVsPfSHKYi9itLoNHb9WnnfA28VO1d_RS9jn05WsrOk861EjBf-rlQclF_1SjW9DwABHC72bs3Xurbi4XIbxEcfCahPjPj2iY_KIMm4-TMGVA8v3t59QZnP-siElT_w/s1600/stars.gif);
}

Sehingga Menjadi Seperti Gambar Di Bawah.

[5]. Dan terakhir, tinggal di SIMPAN dan lihat hasilnya.

OK, sekian dulu Tips Blogger kali ini, semoga Tips kali ini bermanfaat buat para Blogger semua, dan jika ada pertanya tentang Tips ini, silahkan Kalian tinggalkan pertanyaan Kalian di Kotak Komentar di bawah.

Salam Blogger Indonesia.

Tuesday, 29 May 2012

Cara Membuat Text Area Dengan Fungsi One Klik Pada Blog

Text Area, hemm, Kalian tentunya sudah pada tahu apa itu Text Area, buat yang belum tahu, Saya akan jelaskan sedikit. Text Area adalah kumpulan Text atau Tulisan yang berada dalam kotak yang mempunyai fungsi scroll, ini dimaksudkan agar meminimalkan tempat atau tidak memakan tempat untuk penempatan Text atau Tulisan tersebut, dan dimaksudkan juga agar pengunjung Blog dapat dengan mudah meng-CoPas dari tulisan tersebut. OK, Kalian pasti sudah tahukan fungsi dari Text Area. Kita lanjut ke langkah-langkahnya saja.

[1]. Pertama, pastinya LogIn dulu ke BLOG Kalian masing2.

[2]. Lalu dari Dasbor, pilih Post, kemudian buat sebuat Postingan Baru.

[3]. Kalau sudah, sekarang CoPas Code di bawah ke dalamnya. (Pada Mode Edit HTML pada Postingan).

Kalau Kurang Jelas Menempatkan Codenya, Coba Kalian Lihat SS-nya Di Bawah.

Code-nya :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();"
type="button" value="Select All"> </div><div align="center"></div><p
align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt"
rows="100" wrap="VIRTUAL" cols="55">ISI DENGAN TEXT KALIAN / LINK DI SINI</textarea></p></div></form>

KETERANGAN :

* Code yang berwarna Biru, Kalian bisa sesuaikan dengan Tinggi dan Lebar pada Postingan Kalian.

* Dan tulisan yang berwarna Merah, ganti dengan Text atau Tulisan yang Kalian ingin di isi di Text Area.

[4]. Terakhir tinggal di Publikasikan saja Postingannya, dan lihat hasilnya.

Salam Blogger Indonesia.

Saturday, 5 May 2012

Cara Membuat Judul Widget (Gadget) Menjadi Di Tengah Pada Blog

Hello Sobat Blogger, bagaimana kabar Kalian semua, semoga TYME melindungi Kalian. Baik kita masuk ke Tips Blogger. Kali ini Saya akan Share "Cara Membuat Judul Widget (Gadget) Menjadi Di Tengah Pada Blog". Kalian sudah tahukan apa itu Widget atau biasa kita sebut Gadget, dan biasanya Judul Widget Blog Kita berada di sebelah kiri atau left, nah jika Kalian ingin merapikannya atau membuatnya menjadi di tengan atau center, Kalian bisa ikuti Tips berikut. Tips ini berguna untuk merapikan tampilan Widget Kalian. OK, itu sedikit penjelasannya, kini kita masuk ke langkah-langkahnya.

[1]. Pertama, LogIn dulu ke Blog Kalian.

[2]. Dari Dasbor, cari Rancangan --> Edit HTML.

[3]. Kemudian Centang "Expand Templte Widget".

[4]. Lalu cari Code ".sidebar h2 {" (Tanpa Tanda Petik).

[5]. Kalau sudah ketemu, sekarang tambahkan Code di bawah di belakangnya.

text-align:center;

* Apabila di gabungkan menjadi seperti di bawah.

.sidebar h2 {text-align:center;

KETERANGAN :

* Jika di Blog Kalian sudah ada Code seperti Code text-align:left; Kalian hanya perlu mengganti Code left menjadi center. Dan Kalian tidak perlu menambahkan Code di atas.

[6]. Terakhir tinggal di SAVE dan lihat hasilnya.

Bagaiman Tips di atas begitu simpel kan. Nah sekian dulu Tips Blogger kali ini, semoga Tips ini BERMANFAAT buat Kalian semua.

Salam Blogger Indonesia.

Monday, 30 April 2012

Cara Memasang Kotak Komentar Facebook Di Blog

Sebelumnya Saya sudah pernah Posting tentang "Cara Menambahkan Kotak Komentar Menarik Di Blogger", dan kali ini Saya akan Posting tentang "Cara Memasang Kotak Komentar Facebook Di Blog". Mungkin Tips ini sudah banyak yang di Share oleh Sobat2 Blogger yang lainnya, tapi tidak ada salahnya-kan, kalau Saya Nge-Sharenya juga. OK, kita langsung ke langkah-langkahnya saja.

[1]. Pertama, pastinya LogIn dulu ke Blog Kalian.

[2]. Kemudian Dari Dasbor, cari Rancangan --> Edit HTML.

[3]. Lanjut, Centang kotak "Expand Templte Widget".

[4]. Lalu cari Code di bawah.

</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>

[5]. Kalau sudah ketemu, sekarang Copy dan Paste-kan Code di bawah tepat di ATAS Code </b:includable>.

<b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/>
<script src=' http://connect.facebook.net/en_US/all.js#appId=323420961010532&xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='477'/>
</b:if>

Maka Keseluruhan Codenya Seperti Di Bawah.

<b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/>
<script src=' http://connect.facebook.net/en_US/all.js#appId=323420961010532&xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='477'/>
</b:if>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>

KETERANGAN :
* Tulisan yang berwarna Merah (477), adalah panjang Kotak Komentarnya, Kalian bisa menggantinya sesuai dengan kebutuhan Kalian.

[6]. Terakhir, tinggal di SAVE dan lihat hasilnya.

Sekian dulu Tips Blogger kali ini, semoga Tips ini bermanfaat buat Kalian.

Salam Blogger Indonesia.

Friday, 13 April 2012

Cara Membuat Tombol Up Down Pada Blog

Sebelumnya Saya sudah pernah Posting tentang "Cara Membuat Double Klik untuk Back To Top (Kembali Ke Atas) Pada Blog", dan "Cara Menambahkan Gambar Back To Top (Kembali Ke Atas) Pada Blog". Tips kali ini agak berbeda dengan sebelumnya, karena Tips kali ini Kalian tidak perlu meng-Klik gambar, tapi tinggal taruh Kursor Mouse Kalian pada gambarnya, dan Secara otomatis akan bergerak Ke Atas maupu Ke Bawah. Bagaimana, Kalian tertarik...? jika tertarik, silahkan ikuti langkah-langkah di bawah.

[1]. Pertama, Login dulu ke Blog Kalian.
[2]. Kedian dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Lalu cari Code </body>.
[4]. Kalau sudah ketemu, Copy dan Paste-kan Code di bawah ini, tepat di ATAS Code </body>.

<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
src="https://sites.google.com/site/rakasajmk/download-1/download-3/Up.png" border="0" /></a><br />
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
src="https://sites.google.com/site/rakasajmk/download-1/download-3/Down.png" border="0" /></a>
</div>

<script type='text/javascript'>
//<![CDATA[

var Hoffset=60
var Voffset=60
var thespeed=10 //Kecepatan

var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0

var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px"
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px"
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}

function scrollwindow(){
window.scrollBy(0,myspeed)
}

function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)

//]]>
</script>

KETERANGAN :
* Tulisan yang berwarna Biru, ganti dengan URL Gambar Kalian.

* Dan tulisan yang berwarna Kuning, menunjukan kecepatannya. Semakin besar angkanya, semakin cepat pula gerakannya.

[5]. Terakhir tinggal di SAVE, dan lihat hasilnya.

Semoga bermanfaat..

Wednesday, 11 April 2012

Cara Membuat Link Otomatis Ketika Postingan Di CoPas

Copy Paste, hemm setiap orang pasti suka MengCopy Paste-kan Postingan kita, dan sering kali mereka tidak menyertakan Sumbernya atau Link Blog yang di CoPas. Oleh sebab itu, Saya membuat Postingan ini buat para Blogger yang merasa Postingannya di CoPas tapi tidak di sertakan Sumbernya. OK, berikut langkah-langkahnya.

[1]. Pertama, pastinya Login dulu ke Blog Kalian.

[2]. Kemudian dari Dasbor, cari Rancangan --> Edit HTML.

[3]. Lalu cari Code <head>.

[4]. Setelah ketemu, Copy dan Paste-kan Code di bawah ini, tepat di BAWAH Code tadi.

<script type='text/javascript'>
if(document.location.protocol=='http:'){
var Tynt=Tynt||[];Tynt.push('cJE4D4kSKr4yYsacwqm_6l');Tynt.i={"ap":"Baca Selengkapnya Di :"};
(function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://jmk-js.googlecode.com/files/Link%20CoPas.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();
}
</script>

KETERANGAN :

* Tulisan yang berwarna Biru, ganti dengan kata-kata yang Kalian inginkan.

[5]. Kemudian Simpan Perubahan.

Sekarang, Coba Copy Paste Postingan Kalian untuk memastikan apakah cara ini berhasil atau tidak.

Semoga Bermanfaat.

Laman

Friday, 28 December 2012

Wednesday, 19 December 2012

Tuesday, 27 November 2012

Saturday, 10 November 2012

Sunday, 21 October 2012

Cara membuat template blog sendiri :

Situs membuat template blog sendiri secara online:

Wednesday, 17 October 2012

selamat mempercantik blog sahabt :)

Friday, 21 September 2012

Friday, 24 August 2012

Thursday, 16 August 2012

Monday, 6 August 2012

Monday, 25 June 2012

Wednesday, 6 June 2012

Tuesday, 5 June 2012

Tuesday, 29 May 2012

Saturday, 5 May 2012

Monday, 30 April 2012

Tuesday, 17 April 2012

Friday, 13 April 2012

Wednesday, 11 April 2012