Cara memasang Variable Definition pada Blogspot

Cara memasang variable definition pada platform blogger/blogspot sebenarnya cukup simple, hanya saja terkadang seseorang dibuat pusing jika melihat kode-kode pada template blogspot yang dia dapatkan. Maka dari itu, mari kita pasang variable definition pada blog anda yang berplatform blogspot.

Sebelumnya apakah anda tahu yang dimaksud dengan variable definition itu? Singkatnya, variable definition adalah serangkaian kode css yang disusun sedemikian rupa agar bisa merubah tampilan web (warna, huruf atau layout) melalui dashboard tanpa otak-atik kode template. Gak kebayang jika anda yang masih awam dengan kode-kode css harus merubahnya melalui template, pasti sangatlah memusingkan kepala. Silahkan simak cara memasang kode variable definitions pada blogger ini.

Cara mudah memasang Variable Definition pada Blogspot

 

1. Kode variable definition adalah seperti dibawah ini :

<Group description=“A">  
 <Variable name=“B" description=“C" type="color" default=“D" value=“E"/>
 <Variable name=“B" description=“C" type="color" default=“D" value=“E"/>
</Group>

Keterangan dari kode diatas adalah sebagai berikut

Keterangan Variable Definitions:
A : Nama Group
B : Nama variable – Dipakai untuk kode CSS
C : Deskripsi – Muncul di dashboard
D : Warna default – Tampilan website
E : Warna yang tampil default di dashboard

Contoh variable definition yang sudah saya rubah sebagai berikut :

<Group description="Backgrounds">   
<Variable name="body.background.color" description="Body Background" type="color" default="#fc8f44" value="#fc8f44"/>
<Variable name="menu.background.color" description="Menu Background" type="color" default="#fafafa" value="#fafafa"/>
</Group>

Pasang kode diatas dibawah tag <b:skin><![CDATA[

2. Mengaplikasikan variable name di CSS
Lihat kode css pada salah satu template yang saya gunakan dibawah ini :
body{color:#555;background-color:$(body.background.color);font-size:14px;line-height:24px;}

Pada bagian yang berwarna merah diatas sudah diaplikasikan variable definitionnya.

2 poin diatas saja yang harus anda perhatikan untuk memasang kode variable definition pada template blogspot anda. Dengan demikian,maka anda bisa merubah warna background tidak terbatas (unlimited colors) dari dashboard.

Penampakan variable definition pada blogger adalah seperti dibawah ini :

4 Cara simple merubah template blogspot menjadi Responsive

Untuk merubah template blogspot menjadi responsive sebenarnya caranya cukup simple. Tidak diperlukan kode-kode yang aneh-aneh atau kode yang njlimet. Tentu anda juga tahu alasan kenapa template website layak dirubah menjadi responsive.

Seiring dengan berkembangnya dunia teknologi termasuk didalamnya dalam dunia Smartphone, jika tampilan website kita tidak menyesuaikan pada tampilan smartphone, tentu saja pengunjung lama-kelamaan akan beralih ke website yang tampilannya sudah menyesuaikan dengan media yang digunakan untuk mengaksesnya.

Tabiat orang itu pengennya dimanjakan, apa maksudnya? Jika website anda yang belum responsive dikunjungi katakanlah si A. Si A ini tidak mungkin bisa membaca secara langsung dari artikel pada website anda, karena website anda belum responsive, maka tampilan akan diperkecil. Mau tidak mau pengunjung harus memperbesar tampilan website anda. Dalam hal ini bisa dikatakan tidak user friendly.

Nah untuk memanjakan pengunjung website anda, sudah selayaknya website anda langsung bisa dibaca manakala pengunjung klik website anda. Salah satu caranya ya harus merubah template yang anda gunakan menjadi responsive. Untuk itu silahkan simak cara merubah template blogspot menjadi responsive dibawah ini.

Cara mudah merubah template blogspot menjadi Responsive

Bagi anda yang pernah membeli template blogspot tetapi belum responsive, atau anda suka dengan template tertentu tetapi belum responsive, mungkin beberapa poin ini bisa anda coba praktekkan untuk merubah template tersebut menjadi responsive.

1. Meta Viewport
Silahkan tambahkan kode dibawah ini :
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Catatan : Kode diatas dipasang diantara tag <head> dan </head>

2. Image responsive code
Silahkan tambahkan kode CSS dibawah ini :
img{display-block; max-width:100%;height:auto;}

Catatan : Kode diatas dipasang diantara tag <b:skin><![CDATA[ dan ]]></b:skin>

3. width dirubah menjadi max-width
Silahkan anda cari #outer-wrapper atau #outer dan cari properti "width", kemudian rubah menjadi "max-width"

4. @media responsive
ini digunakan untuk menyesuaikan tampilan pada media seperti desktop, IPAD, Smartphone, dll.
Biasanya yang dipakai adalah seperti beberapa dibawah ini :

@media(max-width:1200px){
CSS Code
}
@media(max-width:768px){
CSS Code
}
@media(max-width:480px){
CSS Code
}
@media(max-width:360px){
CSS Code
}

Pada huruf merah diatas yaitu pada kata CSS Code, adalah tempat untuk meletakkan CSS kodenya.

Minimal ada 4 poin penting untuk merubah template blogspot menjadi responsive. Dan tentunya kode suatu template sangatlah berjibun, ratusan, ribuan dan bahkan jutaan dengan kode-kode yang berbeda. 4  poin diatas hanyalah dasarnya saja, silahkan sesuaikan dengan template yang akan anda rubah menjadi responsive.

Apa itu bahasa pemograman CSS ?

Apa itu bahasa pemograman CSS ?

Apakah anda sudah mendengar tentang CSS? Apa itu dan seperti apa kode-kodenya? CSS kepanjangan dari Cascading Style. Jika kita ingin belajar membuat website, ada baiknya kita mengerti tentang bahasa pemograman CSS meski sedikit. Hampir semua website menggunakan bahasa CSS.

Bahasa pemograman CSS adalah suatu susunan kode-kode yang berfungsi untuk membuat tampilan website jadi keren, seperti tata letak ataupun warna website itu sendiri. Seiring dengan kemajuan teknologi, bahasa CSS juga mengalami perkembangan. Yang tadinya dari CSS1, CSS2 dan hingga artikel ini ditulis sudah mencapai CSS3.

Tentunya kode-kode CSS berdiri diatas bahasa HTML seperti yang sudah saya paparkan pada artikel ini. Anda akan menemui kode CSS pada tag <head> dan </head>. Biasanya didahului dengan kode <style> dan </style> atau jika pada template blogspot berada di antara kode <b:skin><![CDATA[ dan ditutup dengan kode ]]></b:skin>.

Kode bahasa pemograman CSS

Jenis kode bahasa pemograman CSS sangatlah banyak dan tidak mungkin kami tulis semua kode-kode CSS tersebut. Beberapa kode dibawah hanyalah contoh saja. Silahkan baca lebih lanjut!

width

width adalah sebuah kode CSS yang berfungsi untuk menentukan ukuran lebar website. Satuannya adalah px (pixel). Contoh penggunaannya seperti dibawah ini.

#outer-wrapper{width:940px;}

Outer-wrapper merupakan ID pada tata letak tertentu. Dan biasa dipakai pada tata letak terluar yang mencakup semua ID lainnya.

margin

Margin adalah kode CSS yang berfungsi untuk menentukan jarak suatu area terhadap area lain. Berlaku diluar ID.

padding

Padding adalah sebuah kode CSS untuk memberikan suatu jarak terhadap ID didalamnya.

float

Float juga termasuk salah satu kode CSS dimana berfungsi untuk menentukan dimana suatu ID akan ditempatkan. Biasanya digunakan pada beberapa ID pada satu baris. Misalnya ID = content-wrapper dan ID sidebar. content-wrapper akan kita letakkan di sebelah kiri dan sidebar akan kita letakkan di sebelah kanan. Maka kode CSS-nya seperti dibawah ini :

#content-wrapper{float:left;}

#sidebar{float:right;}

background-color

Kode yang satu ini nampaknya sudah jelas. Seperti namanya yaitu background-color, maka fungsinya juga seperti namanya yaitu untuk memberikan warna background website anda. Value yang bisa digunakan bisa kode HTML atau namanya langsung. Misalnya :

body{background-color:#ffffff;}

body{background-color:white;}

Kedua kode diatas akan memberikan output yang sama yaitu warna background website anda adalah putih. Kode yang atas adalah kode HTML sedangkan kode yang dibawah adalah namanya langsung dengan bahasa inggris.

color

Untuk kode color, adalah berlaku untuk warna text. Jadi untuk warna ada background-color dan color. Ingat itu.

font-family

font-size

Kedua kode CSS diatas nampaknya juga sudah jelas dari namanya. Dimana font-family merupakan jenis huruf yang digunakan. Ada banyak jenis huruf yang bisa anda gunakan pada website anda seperti arial, verdana, dan lain-lain. Sedangkan font-size merupakan ukuran font pada website anda.

font-weight

Untuk kode CSS adalah kode untuk ketebalan huruf pada website anda. Biasanya valuenya adalah bold atau bisa dengan angka yaitu 400,500,600 atau 700.

Nah kesembilan kode CSS diatas adalah kode-kode yang sering digunakan dalam pembuatan website. Jadi sebisa mungkin anda pahami dan kalau bisa diingat.

Mengenal kode dasar bahasa HTML

Anda tahu bahasa pemograman HTML? HTML kepanjangan dari HyperText Markup Language. Bahasa HTML adalah bahasa pemograman dasar yang digunakan pada sebuah website. Selain HTML, sebuah website bisa menggunakan bahasa pemograman yang bermacam-macam seperti XML, Javascript, JQuery, dan lain-lain masih banyak lagi. Akan tetapi semua bahasa pemograman tersebut tetap berpijak diatas HTML. Artinya sebuah website tidak mungkin disusun tanpa pemograman bahasa HTML, kecuali jika ada bahasa pemograman website yang super canggih nantinya.

Untuk itu, jika anda ingin coding sebuah website, yang pertama harus anda perhatikan adalah dasar dari bahasa HTML itu sendiri. Seperti apa kode dasar bahasa HTML itu? Lihat kode dibawah ini !

<html>

</html>

2 kode diatas adalah kode HTML pembuka pada baris pertama dan kode HTML penutup pada baris dibawahnya. Silahkan lihat website manapun pasti diawali dengan kode HTML pembuka yaitu <html> dan diakhiri dengan kode HTML penutup </html>.

Kemudian kode dasar selanjutnya yaitu

<html>

<head>

</head>

</html>

Kode selanjutnya yaitu kode untuk menuliskan kode perintah suatu website. Semua kode perintah suatu website berada diantara kode <head> dan </head>. Sebuah website bisa diperintah dengan beberapa bahasa pemograman. Yang paling sering digunakan yaitu CSS dan Javascript atau JQuery.

Untuk CSS maka kode harus berada diatara kode <style> dan </style>, jadi akan menjadi seperti ini :

<html>

<head>

<style>

Kode perintah CSS disini

</style>

</head>

</html>

Akan tetapi jika berbicara pada template blogspot agak sedikit berbeda. Untuk CSS pada template blogspot berada pada kode <b:skin><![CDATA[ dan ditutup dengan kode ]]></b:skin>.

Jadinya seperti ini :

<html>

<head>

<b:skin><![CDATA[

Kode perintah CSS disini

]]></b:skin>

</head>

</html>

Sedangkan untuk kode perintah yang berupa javascript atau JQuery maka kode harus berada diantara kode <script> dan </script>, jadi akan menjadi seperti ini :

<html>

<head>

<script> Kode perintah Javascript / JQuery disini </script>

</head>

</html>

Nah kode dasar HTML terakhir yang perlu anda ketahui adalah kode body. Apa itu? Kode ini adalah kode untuk menampilkan semua konten website. Kodenya adalah seperti ini :

<html>

<head>

<style>

Kode perintah CSS disini

</style>

</head>

<body>

Konten website

</body>

</html>

Jadi semua konten website berada diantara kode <body> dan </body>.

Sekali lagi kode-kode HTML diatas wajib anda pelajari dan sebisa mungkin anda hafal jika anda ingin menjadi seorang developer website yang handal. Semoga bermanfaat.

Memilih template blogspot untuk blog dummy

Hello sobat, jika anda sudah cukup lama berbisnis online khususnya yang bermain blog/website, tentunya anda tidak akan jauh-jauh dari yang namanya SEO. Betul bukan? Yup, jika anda bermain SEO tentu juga tidak luput dari backlink.

Saat kita bermain backlink tentunya akan memiliki web/blog pembantu atau bisa juga kita namakan web support. Sebagian yang lain menamakan blog dummy. Oke, apapun namanya yang penting sama tujuannya yaitu untuk mendukung web utama kita menempati peringkat atas di mesin pencari google.

Saat kita membuat blog dummy diweb 2.0 seperti misalnya blogspot.com atau wordpress.com, di kedua platform tersebut adalah platform web 2.0 papan atas yang banyak digunakan oleh para pemain SEO guna menanam backlink. Maka dari itu, banyak developer template yang secara cuma-cuma mendevelop template blogspot ataupun template wordpress. Dari sekian banyak template yang disediakan, entah itu template gratis ataupun template berbayar, tentunya anda harus pintar-pintar memilih template mana yang bagus digunakan sebagai blog dummy.

Memilih template blogspot untuk blog dummy

Untuk hasil yang maksimal saat anda membuat blog dummy, tentunya anda tidak boleh sembarangan terutama saat pemilihan template blogspot. Menurut hemat saya, minimal ada 2 poin yang harus anda perhatikan saat memilih template blogspot untuk blog dummy anda. Apa itu?

1. Pilih artikel ada di sisi kiri (Sidebar kanan)

Tata letak sebuah website bermacam-macam. Ada yang menempatkan artikel di sisi kanan ada juga yang menempatkannya disisi kiri. Anda harus tahu bahwa google bot melakukan crawler pada sebuah halaman urut dari atas dan kiri. Artinya jika artikel anda diletakkan disebelah kiri tentunya akan lebih ter-crawler google bot daripada isi dari sidebar anda.

2. Hindari paragraf/artikel yang terpotong

Di satu sisi, tampilan website yang menampilkan artikel terpotong akan tampil lebih elegant dari pada sebuah website yang menampilkan artikel semua. Tapi jangan salah, apa tujuan anda membuat blog tersebut. Jika itu merupakan web utama, maka tak masalah anda memotong artikel anda. Sebalinya jika blog tersebut adalah blog dummy, maka hindari artikel yang terpotong. Mengapa?

Penggunaan summary mengharuskan artikel terpotong secara otomatis, dengan demikian maka link yang anda tanam pada blog dummy tersebut tidak akan muncul di homepage, melainkan muncul di inner-page. Padahal kekuatan homepage jauh lebih besar jika dibandingkan inner-page.

Anda mau template blogspot yang bisa menampilkan full artikel pada homepage? 

Menentukan type template blogspot

Jika persiapan awal membuat template blogspot sudah oke, kini saatnya anda menentukan type template blogspot yang akan anda buat. Sebelum anda memulai aktivitas untuk membuat template blogspot, anda harus tentukan terlebih dahulu type template yang akan dibuat. Hal ini nantinya berhubungan dengan layout / tata letak. Dan secara umum type-type template atau tampilan website ada beberapa diantaranya seperti dibawah ini.

Type template blogspot (Jenis tampilan website)

Beragam jenis tampilan website dapat kita lihat saat kita berkunjung ke marketplace produk digital seperti themeforest.net. Disana anda bisa menemukan berbagai desain yang profesional dan harganya lumayan mahal. Nah dari banyak desain tersebut, secara garis besar saya bagi kedalam 4 kategori. Kategori ini urut dari tampilan website yang banyak digunakan diinternet.

1. Blogging style
Tidak diragukan lagi bahwasannya website dengan tampilan blogging paling banyak digunakan oleh para blogger. Salah satu alasannya karena tampilan ini cukup simple dan ringan jika diakses. Rata-rata pengguna tampilan blogging style adalah personal bukan suatu badan usaha.

2. Magazine
Tampilan magazine menduduki peringkat dibawah tampilan blogging style. Pengguna tampilan ini kebanyakan suatu instansi media seperti detik, berita satu, suara merdeka dan lain-lain.

3. Online Shop
Jelas untuk tampilan magazine style banyak digunakan oleh para UKM. Mereka yang memiliki toko offline sekarang semakin banyak yang mencoba ekspansi ke toko online. Tampilan online shop lebih mengedepankan gambar dari pada penjelasan gambar. Karena gambar yang menarik tentu saja akan menarik simpatik dari pengunjung di website tersebut.

4. Landing page
Tampilan ini biasanya hanya memiliki satu kolom. Kolom itulah yang digunakan untuk menulis sales letter. Tampilan landing page bisa untuk menjual produk fisik ataupun produk digital.
Walaupun website dengan tampilan landingan page menempati urutan terbawah, tapi jangan salah karena sekarang semakin banyak digunakan untuk menjual satu produk.

Nah, dari ke-4 type tampilan website diatas, anda harus menentukan terlebih dahulu template type mana yang akan dibuat. Jika anda sudah tentukan, maka langkah selanjutnya harus membuat layout yang akan digunakan.

Silahkan anda pelajari dan pikirkan terlebiih dahulu mengenai type template blogspot yang akan dibuat nantinya.

Persiapan awal membuat Template Blogspot

Bagi anda yang ingin membuat Template Blogspot ada baiknya mempersiapkan terlebih dahulu poin-poin penting yang berhubungan dalam hal desain maupun coding nantinya. Saya yakin setiap desainer memiliki standard persiapan yang berbeda-beda. Berikut adalah beberapa persiapan awal sebelum kita membuat template blogspot/blogger menurut versi saya.

Persiapan pembuatan Template Blogspot

Pastikan anda mempersiapkan beberapa hal dibawah ini sebelum mengoprek ataupun membuat template blogspot dari awal.

1. Jenis Template

Maksudnya adalah jenis template yang akan anda buat. Banyak jenis-jenis template diantaranya untuk Blogging, Toko online, Corporate, Landing page, dan lain-lain masih banyak. Nah sebelum anda membuat template tentukan dahulu kearah mana tujuan anda, blogging atau toko online atau yang lainnya. Jika tahap ini anda abaikan, dikhawatirkan ditengah jalan nantinya anda akan bingung kearah mana template blogspot akan dibuat.

2. Desain Template

Jika anda sudah menentukan jenis template yang akan dibuat, langkah selanjutnya sebaiknya anda tentukan juga perihal desainnya atau tampilannya. Misalnya anda ingin membuat template blogspot untuk blogging, maka anda harus tentukan pula hal-hal lain seperti :

- Penempatan sidebar, apakah dikanan ataupun dikiri

- Berapa lebar template yang diinginkan

- Penempatan iklan yang diinginkan

- dan lain-lain yang berhubungan dengan tampilan

Nah jika anda persiapkan terlebih dahulu hal-hal ini, maka akan mempercepat proses pembuatan template nantinya.

3. Tool - tool pendukung

Untuk mempercepat proses pembuatan template blogspot nantinya, perlu juga mempersiapkan beberapa tool-tool atau alat pendukung lainnya. Diantara tool-tool yang saya maksud diantaranya :

- Firebug,
Ini berupa add on mozila. Saya bilang ini tool wajib bagi seorang developer web. Dengan tool ini, anda bisa dengan mudah mengetahui tampilan web yang kurang presisi, bagian mana yang perlu dilakukan editing, dan lain-lain. Anda bisa langsung mencari referensi di internet akan fungsi tool ini.

- Web Referensi,
Web referensi terutama untuk pemahaman bahasa pemograman HTML, Javascript dan CSS. Dan rekomendasi web referensi yang bagus adalah w3school.com. Bahasa pemograman memiliki cakupan yang sangat luas. Meski seorang yang ahli dalam bidang coding sekalipun, ada kala juga mengalami kesulitan untuk code-code tertentu. Untuk itulah web tersebut untuk membantu atau sebagai referensi disaat anda mengalami kesulitan coding. Apalagi jika anda seorang pemula, maka sangat dibutuhkan banyak web referensi.

Nah, minimal ada 3 poin tersebut diatas yang sangat diperlukan dalam persiapan awal sebelum membuat template blogspot.