Tips Memilih Warna untuk Blog

     Memilih warna blog memang bukan hal yang diperhatikan dalam desain blog. Tetapi, sebenarnya warna memberi efek besar pada blog kita. Misalnya, warna netral sangat identik dengan formalitas seperti blog usaha, tugas, dll. Sedangkan warna Cerah biasanya ada pada blog bebas atau blog pribadi.

    Sayangnya, memilih warna yang tepat tak semudah yang kita bayangkan. Kadang, kelompok warna yang kita pilih bisa dibilang ‘norak’. Misalnya warna gelap dipadu dengan bermacam warna komplemen yang aneh. Oleh karena itu, kita butuh panduan dalam memilih kumpulan warna (skema warna) untuk blog. Berikut adalah beberapa cara yang terbukti ampuh dan sudah diuji di ITB dan IPB oleh admin sendiri.

Warna yang beragam terkadang membuat kita bingung untuk memilih warna

Tapi, sebelumnya kalian harus memperhatikan hal hal berikut ini

1. Kalian sudah memiliki skema warna? Kalau Sudah, apakah butuh diganti?

    Biasanya, perubahan warna kalian butuhkan kalau kalian merubah imej blog kalian. Jangan seperti admin yang dikit-dikit ganti warna kalau ketemu yang bagus :v

2. Apa fungsi Blog kalian?

    Seperti sudah diulas diatas, tema sangat menentukan warna yang dibutuhkan. Kalian bisa mengira-ngira apa warna yang dibutuhkan blog kalian.

3. Apakah blog kalian memiliki Tema atau gambar tertentu yang menjadi simbol blog kalian?

    Tema blog tentunya jadi hal penting dalam pemilihan warna blog. Apalagi jika tema itu sudah menjadi identitas blog kalian. Selain tema, gambar juga bisa digunakan. Kalian bisa pakai aplikasi internet ini.

    Jika memang perubahan skema warna dibutuhkan, mari kita mulai cara memilih skema warna untuk blog, ini dia diantaranya

1. The 60-30-10 Rule

   Yang dimaksud dari 60-30-10 disini adalah dalam bentuk persen (%). 60% nya adalah warna netral, 30% warna eksentrik yang masih berhubungan dengan si 60%, Sedangkan 10%nya warna yang cerah. Misalnya si 60% adalah hitam, dan warna yang kita inginkan adalah Pink, maka 30% nya adalah Pink campur hitam, sedangkan 10% sisanya adalah pink asli tanpa dicampur, boleh sama dengan yang dicampur dengan warna netral, boleh yang berbeda. 

Jadi, yang harus kita lakukan jika menggunakan rumus ini yaitu; 

1.Mencari Warna netral dan Warna utama

2.Mencampur Warna netral dengan warna utama. 

   Sebenarnya, rumus ini sangat mudah. Tetapi, menurut saya rumus ini terlalu mengekang. Sehingga saya kembangkan yang lain.

2. Gunakan Warna yang kalian sukai

   Inilah yang saya maksud tadi, Teori 60-30-10 yang saya kembangkan. Sebenarnya, warna yang dipakai tidak harus warna yang disukai, bisa juga warna yang sesuai dengan tema blog anda. Konsep ini mengharuskan kalian memilih setidaknya 2 dari warna yang kalian sukai atau sesuai tema. Kalian bisa mencari di Internet, di Paint, atau dimana saja, tapi saya menyarankan untuk memilih di sini.

   Setelah mendapatkan warna yang dimaksud, kalian bisa memberi gelap-terang (Shades) pada warna tersebut. Hal ini dimaksudkan supaya kita mendapatkan warna yang enak dipandang mata, tidak terlalu ngejreng, tapi tetap menarik. Pilih warna yang sudah diberi gelap terang setidaknya 3 tiap skemanya. Buat beberapa skema dan tanyakan pada kerabat atau teman untuk memilih yang paling cocok.

    Cara lain, jika kalian ingin mencari warna yang lebih fresh, dan lebih cocok, kalian bisa menggunakan photoshop. Caranya, dari warna kesukaan atau sesuai tema, kalian masukkan tiap warna ke photoshop. Beri layer secara berturut turut, dari yang diberi kesan gelap, warna asli, dan kesan cerah. Setelah itu, buat layer lagi di atasnya, dan beri warna merah, biru, atau hijau ASLI. Lalu beri opacity secukupnya. Pilih salah satu warna dari tiap kelompok warna. Kalian akan menemukan warna yang kaya, fresh dan cocok satu sama lain.

Cara Membuat Dropdown Menu

Tab Menu atau Bar menu merupakan sebuah daftar link/pages yang ditujukan kepada link/pages yang penting. Namun, seperti kita ketahui, Menu Bar ini memiliki batas panjang sepanjang tampilan seluruh blog. Oleh karena itu, beberapa ahli desain grafis membuat kepanjangan dari menu, yaitu dropdown menu. Namun, bagi blogger amateur seperti saya, hal itu sangatlah susah.

Namun, kita bisa berlega sejenak. Kita bisa membuat dropdown menu dengan sangat mudah, dengan menggunakan CSS Menu Maker. Berikut langkah-langkahnya.

1.Buka CSS Menu Maker.
2.Pilih style yang diinginkan.
3.Klik Customize/Download. Silahkan edit dropdown menu kalian sesuai keinginan.
4.Buka Blogger >> Template >> Edit HTML
5.Centang Expand Widget Template. Caranya.
6.Cari kode </head> ,letakkan kode berikut diatas </head>

<link href='/menu_assets/styles.css' rel='stylesheet' type='text/css'/>link&gt;

7. Pada CSS Menu Maker, pilih tab HTML
8. Copy semua kode, pastekan dibawah kode <div class='tabs-outer'>
9. Simpan Template.
10. Buka Blogger >> Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan kode CSS
11. Pada CSS Menu Maker, pilih tab CSS
12. Copy semua kode, lalu paste pada kotak Tambahkan CSS.

Selesai! Dropdown Menu telah muncul pada blog anda. Dan saya sarankan untuk menghapus Laman bawaan dari blogger. Mungkin juga, dropdown tidak muncul ketika anda mencobanya. Jangan khawatir, karena itu hanya karena koneksi internet yang lambat.

Cara Membuat Widget hanya Muncul pada Posting

Widget adalah tambahan/pemanis pada blog kita. Biasanya, widget tampil di setiap halaman, baik itu homepage sampai post. Sayangnya, beberapa dari Widget butuh untuk ditampilkan hanya pada post, tidak pada halaman lain. Contohnya adalah widget you might also like dari LinkWithin. Tetapi, bagaimana caranya? Meletakkan kode satu per satu di setiap artikel? siapa yang mau melakukannya? Nah, pada posting kali ini, benediktif mau berbagi cara membuat widget hanya tampil di Post. Berikut Caranya!

1. Login ke Blogger.

2. Buka Template >> Edit HTML

3. Centang Expand  Widget Template. caranya.

4. Klik lompat ke widget, Pilih widget yang ingin ditampilkan hanya pada post.

5. Cari kode <b:includable id='main'> (Jangan cari dengan Ctrl+F, cukup cari perlahan di antara kode widget yang dipilih) pastekan kode berikut di bawah <b:includable id='main'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

6. Cari kode <b:include name='quickedit'/> (Sama seperti sebelumnya, jangan cari dengan Ctrl+F) lalu pastekan kode berikut dibawah <b:include name='quickedit'/> 

</b:if>

7. Simpan.

Berikut contoh jika kalian bingung : 

<b:widget id='HTML6' locked='false' title='Teknologi' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

Nah, Demikian cara membuat widget hanya muncul pada posting. Semoga Bermanfaat!

Cara Mengetahui Kata Kunci Populer Google

Sebagai blogger, bukan hanya tampilan blog yang harus diperhatikan, artikel atau posting yang bermutu, dan terbit secara rutin juga merupakan hal yang perlu diperhatikan agar traffic blog berjalan deras seperti guyuran hujan.
Tetapi, tak sedikit kendala yang ditemukan saat kita akan membuat posting. Salah satunya adalah kehabisan ide untuk posting. Nah, pada artikel kali ini, benediktif akan memberi tau kalian cara-cara mengetahui kata kunci populer google. Berikut Cara-caranya

1. Soovle.com
Tools ini sangat mudah digunakan, selain itu loading pagenya juga ringan. Di soovle.com, kalian bisa mengetikkan kata kunci yang ingin dicari. soovle.com akan memunculkan frase yang berhubungan, yang sedang populer. Tak hanya google, Soovle juga menunjukkan Kata kunci populer dari yahoo, bing, dll. (soovle.com)

2. Google Insight
Google Insight adalah tool yang disediakan Google untuk mencari kata kunci yang populer. Cara menggunakannya pun cukup mudah (google insight).
Google Insight juga memiliki beberapa kelebihan, antara lain

• Keyword populer Search Terms, disini sobat akan diberikan option kata kunci / keyword apa yang sobat cari.
• Keyword populer Regional Location berdasarkan kata kunci / keyword. Bisa sobat gunakan untuk mencari kata kunci / keyword yang sedang populer di negara tertentu bahkan sedunia.
• Keyword populer Time Range, disini sobat akan dipersilahkan memilih rentan waktu yang diinginkan. Misalkan keyword yang sobat cari sedang populer saat ini atau setahun sebelumnya bahkan all time.

3. Google AdWord

Ini adalah tool yang paling sering digunakan dalam mencari kata kunci populer. Kelebihannya adalah Google AdWord menunjukkan peta persaingan kata kunci yang diincar dan Kata kunci berhubungan. (google adword)

4.Google Trends

Satu lagi dari google, Google Trends. Google Trends sangat mudah digunakan. Pertama masuk ke Google Trends (here). Lalu kalian bisa melihat beberapa kata kunci yang sedang populer. Kalian juga bisa mengatur beberapa hal seperti lokasi, waktu, dan kategori

5. Ketik di google.com

Apa maksudnya? Maksudnya, anda bisa mengetik bebas, lalu lihat lah pilihan yang muncul dibawah. Semakin atas, berarti Semakin populer.

6.Cari di google.com, Footer!

Yang ini juga sedikit aneh. Namun membantu juga. Cari lah kata kunci apapun. Selesai mencari, pergi ke bagian paling bawah. Maka anda akan menemukan beberapa kata kunci terkait yang sedang populer.

7. Twitter trending topics

Yang ini sangatlah mudah. Tanpa penjelasan pun, pasti sudah mengerti.

Demikian Cara Mengetahui Kata Kunci Populer Google. Semoga Bermanfaat.

benediktif.

Cara Membuat Widget Facebook dan Twitter Berdampingan

Blog anda punya fanspage facebook?atau punya akun Twitter Blog? Biasanya orang-orang akan mempromosikan fanspage facebook dan akun twitter nya di blog. Tetapi, terkadang itu membuat tampilan blog penuh, serta membuat blog terlalu 'berat'. Sebenarnya sudah ada solusinya yaitu membuat widget melayang. Tetapi itu akan membuat blog terlihat berantakan!. Duh Gimana dong?

Nah, untuk memecahkan masalah tersebut, kali ini saya akan berbagi tentang Cara Membuat Widget Facebook dan Twitter Berdampingan seperti yang ada di benediktif. Berikut caranya.

1. Login ke Blogger

2. Buka Tata Letak >> Tambahkan Gadget >> HTML/ Javascript

3. Copy kode dibawah lalu Paste di HTML/Javasript

<table><tr><td><a href="http://facebook.com/Benediktif" title="Like us on Facebook" target="_blank"><img src="http://imageshack.com/a/img560/5314/v943.png"/></a></td><td><a href="http://twitter.com/Benediktif" title="Follow us on Twitter" target="_blank"><img src="http://imageshack.com/a/img11/4622/5fm0.png"/></a></td></tr></table>

Note :

~Tulisan berwarna biru adalah link facebook dan twitter anda. Silahkan mau diganti atau tidak,   kalo enggak nanti nyambungnya ke facebook ama twitter benediktif :p

~Tulisan berwarna hijau adalah tulisan yang muncul ketika mouse berada di atas kursor. Boleh   diganti jika kalian tidak suka tulisan yang sudah ada.

~Tulisan berwarna oranye adalah link / URL dari gambar. Jika kalian tidak suka gambar yang   ada bisa diganti sesuka kalian.

~Jika kalian ingin menambahkan yang lain, misal Google+ dll, tambahkan kode berikut sebelum </tr></table>

<td><a href="MASUKKAN LINK" title="MASUKKAN TEKS SAAT MOUSE OVER" target="_blank"><img src="MASUKKAN GAMBAR"/></a></td>

nb : maaf tidak ada screenshot dari widget ini. Kuota admin sedang habis sehingga internetnya tidak kuat untuk load gambar. Admin sendiri sebetulnya belum lihat hasil widget ini:p. Kalian bisa lihat widget ini di sidebar benediktif.Namun jika ada keluhan kalian bisa berkomentar dibawah.

Demikian Cara membuat widget facebook dan twitter berdampingan. Semoga Bermanfaat!

Cara Menambah Fungsi Scroll pada Widget Archive

Seperti pada label , Archive/Arsip biasanya terlalu panjang dan membuat blog tampak tidak rapi. Nah, di artikel kali ini saya akan Berbagi cara membuat fungsi Scroll pada Widget Archive. Berikut caranya

1. Login ke Blogger
2. Buka Template >> Edit HTML
3. Centang Expand template Widget, caranya lihat disini.
4. Cari Kode <div id='ArchiveList'>.  Lalu pastekan kode di bawah setelah kode <div id='ArchiveList'>

<div style='overflow:auto; width:auto; height:250px;'>

     5. Cari kode <b:include name='quickedit'/>  Lalu pastekan kode </div>  diatas <b:include          name='quickedit'/> . Simpan.

Hasilnya seharusnya seperti ini :

<div class='widget-content'> 
<div style='overflow:auto; width:ancho; height:250px;'> 
<div id='ArchiveList'> 
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'> 
<b:if cond='data:style == &quot;HIERARCHY&quot;'> 
<b:include data='data' name='interval'/> 
</b:if><b:if cond='data:style == &quot;FLAT&quot;'> 
<b:include data='data' name='flat'/> 
</b:if> 
<b:if cond='data:style == &quot;MENU&quot;' 
<b:include data='data' name='menu'/> 
</b:if> 
</div>  
</div> 
</div> 
<b:include name='quickedit'/>

Note : 

~Kode berwarna biru diatas mengatur tinggi widget, bisa diganti sesuai keinginan

~Jika tidak ada kode <div id='ArchiveList'> ,maka yang harus dilakukan adalah :

     1. Klik lompat ke widget, pilih Archive anda.

     2. Letakkan kode <div style='overflow:auto; width:auto; height:250px;'> Diantara kode <div class='widget-content'>  dan <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'> 

Sekian cara membuat fungsi scroll pada Archive. Semoga Bermanfaat.

benediktif.

Cara Memberi Fungsi Scroll pada Widget Label

Sebelumnya, tutorial ini membutuhkan centang Expand Widget Template. Baca dulu Cara Expand Widget Template di tampilan blogger baru.

Tampilan label yang hanya 2, yaitu Cloud dan List, seperti membuat sebuah Garis Pemisah ; Tampilan Cloud untuk blog non-formal, dan tampilan List untuk blog formal. Masalahnya, terkadang Label kita sudah terlalu banyak, sehingga tampilan menjadi Panjang. Nah di artikel kali ini, kita akan menyelesaikan masalah tersebut hanya dalam 5 langkah. Berikut langkahnya.

1. Login ke blogger terlebih dahulu.
2. Buka Template >> Edit HTML
3. Pastikan anda sudah mencentang Expand Widget tempalte. Cara-caranya tertera dalam link diatas.
4. Cari kode ]]></b:skin> ,untuk mempercepat, gunakan Ctrl+F
5. Copy kode dibawah dan letakkan di atas ]]></b:skin> ,lalu simpan

#Label1 .widget-content{

height:200px;

width:auto;

overflow:auto;}

Selesai sudah, Label anda kini seharusnya memiliki fungsi Scroll. Semoga Bermanfaat.

benediktif.

Cara Expand Widget Template di Tampilan Blogger Baru

Baru-baru ini, blogger mengganti tampilan lamanya ke tampilan baru. Seperti biasa, ketika ada sesuatu yang baru, maka kita butuh waktu untuk menyesuaikan diri terlebih dahulu, begitu pula dengan tampilan blogger yang baru.

Seperti yang kita ketahui, di tampilan blogger yang baru, kotak centang "Expand Widget Template" di Template >> Edit HTML  dihapus. Hal ini membuat beberapa orang frustasi (termasuk saya) karena kebanyakan perubahan HTML memerlukan "Expand Widget Template".

Nah, Setelah beberapa hari putus asa, akhirnya saya menemukan cara untuk 'mencentang' kotak "Expand Widget Template", yang ternyata cukup mudah. Berikut cara-caranya.

1. Pertama, Login ke blogger terlebih dahulu.
2. Masuk ke Template >> Edit HTML
3. Setelah selesai memuat, klik di sembarang tempat di kotak HTML.
4. Klik Ctrl+A
5. Klik Ctrl+C
6. Klik tombol delete
7. Klik  Ctrl+V

Taraa!! Meskipun lebih rumit dari sebelumnya, setidaknya kita masih bisa centang Expand Widget Template untuk melakukan perubahan pada HTML.

Sekian dulu Cara Expand Widget Template di Tampilan Blogger Baru . Semoga Bermanfaat.

benediktif.