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.