Menghapus Variable Definitions Template Blog - Pada artikel sebelumnya saya sudah membuat artikel tentang mengganti warna blog di Variable Definitions dan pada artikel ini yang merupakan artikel lanjutan, saya akan membahas bagaimana menghapus variable definitions template blog yang rata-rata masih digunakan untuk template-template baru atau pun terdapat pada template lama
Baca juga Cara mengganti warna blog di Variable Definitions
Apa itu Variable Definitions?
Pada artikel sebelumnya saya sudah menjelaskannya secara singkat yaitu, Variable Definitions adalah suatu cara yang digunakan untuk mendefinisikan jenis warna, ukuran lebar blog, jarak, atau bentuk font sesuai dengan keingininan untuk mengubah variabel-variable tersebut secara langsung didalam Dashboard Blogger tanpa harus mengganti kode CSS atau HTML didalam template blog. Variable definitions berada didalam kode template blog dengan cara membuka menu Template >> Edit HTML dan Variable Definitions berada setelah atau sebelum kode <b:skin><![CDATA[
Bolehkah Menghapus Variable Definitios Template Blog?
Boleh-boleh saja dan tidak ada yang melarang meskipun template yang digunakan adalah template premium yang penting tidak menjual ulang atau membaginya secara gratis template yang telah dirubah atau diganti kodenya tersebut dan masih mencantumkan link kredit untuk sumber pembuat template tersebut. Untuk menghapus variable definitions yang ada didalam template blog harus mengetahui tentang kode CSS karena value untuk kode yang ada di CSS berada didalam kode yang diterapkan di Variable Definitions. Jika menghapus seluruh kode Variable definitions tanpa memperbaiki atau mengganti value yang ada di kode CSS maka tampilan blog akan berantakan karena didalam kode Variable definitions berbeda dengan kode yang ada di CSS karena value untuk kode CSS sudah terpasang atau sudah ditentukan didalam kode Variable definitions
Perhatikan contoh kode berikut ini
Pada kode dibawah ini merupakan kode value dari komposisi yang ada di kode body yang terdapat didalam Variable definitions yang meliputi Background, Jenis Font, Warna Font dan Jarak Letak pada layer atau Padding
<Group description="Backgrounds" selector=".body">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#ffffff"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
</Group>
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" value="0"/>
<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" value="0"/>
<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" value="0"/>
<Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>
Dan dibawah ini adalah penerapan pada kode CSS untuk komposisi value pada body dengan menggunakan definisi variabel untuk value yang telah ditetapkan seperti kode diatas
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
Perhatikan pewarnaan pada masing-masing kode Variable dan Value warna yang telah saya tandai untuk Variable Definitions dan pada CSS diatas. Jika Variable definitions ingin di hapus maka harus mengganti variabel dari masing-masing value yang ada didalam CSS
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
menjadi
body {
font: normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
color: #666666;
background: #ffffff;
padding: 0 0 0 0;
}
Untuk mengganti value pada CSS tidak harus menyesuaikan dengan value yang ada di Variable definitions tapi bisa diganti sesuai dengan keinginan Anda, namun tetap memperhatikan value pada layer (margin atau padding) yang diberikan pada masing-masing elemnent. Untuk mengganti value pada CSS agar tidak mengganti secara satu per satu, gunakan Notepad++ dan lakukan replace pada masing-masing kode value yang akan ditetapkan
Itulah cara menghapus variable definitions pada template blog, intinya hapus semua kode variable Definitions yang ada didalam template blog dan ganti masing-masing variable yang ada di CSS dengan kode value yang diinginkan. Terkahir sebagai catatan, jika Anda menghapus Variable definitions template blog kemungkinan besar code CSS template blog akan semakin bertambah. jadi pertimbangkan dahulu sebelum menghapus definisi variabel template blog ini
Baca juga Cara mengganti warna blog di Variable Definitions
Apa itu Variable Definitions?
Pada artikel sebelumnya saya sudah menjelaskannya secara singkat yaitu, Variable Definitions adalah suatu cara yang digunakan untuk mendefinisikan jenis warna, ukuran lebar blog, jarak, atau bentuk font sesuai dengan keingininan untuk mengubah variabel-variable tersebut secara langsung didalam Dashboard Blogger tanpa harus mengganti kode CSS atau HTML didalam template blog. Variable definitions berada didalam kode template blog dengan cara membuka menu Template >> Edit HTML dan Variable Definitions berada setelah atau sebelum kode <b:skin><![CDATA[
Bolehkah Menghapus Variable Definitios Template Blog?
Boleh-boleh saja dan tidak ada yang melarang meskipun template yang digunakan adalah template premium yang penting tidak menjual ulang atau membaginya secara gratis template yang telah dirubah atau diganti kodenya tersebut dan masih mencantumkan link kredit untuk sumber pembuat template tersebut. Untuk menghapus variable definitions yang ada didalam template blog harus mengetahui tentang kode CSS karena value untuk kode yang ada di CSS berada didalam kode yang diterapkan di Variable Definitions. Jika menghapus seluruh kode Variable definitions tanpa memperbaiki atau mengganti value yang ada di kode CSS maka tampilan blog akan berantakan karena didalam kode Variable definitions berbeda dengan kode yang ada di CSS karena value untuk kode CSS sudah terpasang atau sudah ditentukan didalam kode Variable definitions
Perhatikan contoh kode berikut ini
Pada kode dibawah ini merupakan kode value dari komposisi yang ada di kode body yang terdapat didalam Variable definitions yang meliputi Background, Jenis Font, Warna Font dan Jarak Letak pada layer atau Padding
<Group description="Backgrounds" selector=".body">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#ffffff"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
</Group>
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" value="0"/>
<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" value="0"/>
<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" value="0"/>
<Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>
Dan dibawah ini adalah penerapan pada kode CSS untuk komposisi value pada body dengan menggunakan definisi variabel untuk value yang telah ditetapkan seperti kode diatas
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
Perhatikan pewarnaan pada masing-masing kode Variable dan Value warna yang telah saya tandai untuk Variable Definitions dan pada CSS diatas. Jika Variable definitions ingin di hapus maka harus mengganti variabel dari masing-masing value yang ada didalam CSS
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
menjadi
body {
font: normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
color: #666666;
background: #ffffff;
padding: 0 0 0 0;
}
Untuk mengganti value pada CSS tidak harus menyesuaikan dengan value yang ada di Variable definitions tapi bisa diganti sesuai dengan keinginan Anda, namun tetap memperhatikan value pada layer (margin atau padding) yang diberikan pada masing-masing elemnent. Untuk mengganti value pada CSS agar tidak mengganti secara satu per satu, gunakan Notepad++ dan lakukan replace pada masing-masing kode value yang akan ditetapkan
Itulah cara menghapus variable definitions pada template blog, intinya hapus semua kode variable Definitions yang ada didalam template blog dan ganti masing-masing variable yang ada di CSS dengan kode value yang diinginkan. Terkahir sebagai catatan, jika Anda menghapus Variable definitions template blog kemungkinan besar code CSS template blog akan semakin bertambah. jadi pertimbangkan dahulu sebelum menghapus definisi variabel template blog ini
walahh saya gak terlalau mudeng soal ginian mbak hehe jadi saya izin Baca pelan pelan yah mbak :)
BalasHapusbaca yg keras mas
HapusBila perlu pakai TOA ya Mas Ainnul+Mas Yanto biar
HapusPemahaman artikel Mbak ana jadi lebih mudah hh *senyum
ditempelin mulutnya
Hapusheheheeee.. aja-aja ada mas-mas nich... :D :P
Hapusbaca lagi mas, kalau bisa pinjam kaca mata syahrini
Hapusmendadak ada bintang diatas kepala nih baca kode2an mbak
BalasHapushadeuh
Saya juga kurang paham Mas Yanto dengan kode yu sama sama belajar sama Mbak Ana
Hapusheheheeee,, yang nulis artikel juga muncul bintang tujuh mas Yanto... :P
Hapussini mbak saya sembuhin
Hapus:D :D hehehee
Hapusjadi variable definitions yang ada di template itu ternyata udah boleh di hapus atau di modivikasi ya...saya ko' malah baru ngeh...kemana aja saya ya
BalasHapusheheheee.. iya mas boleh-boleh saja di edit... saya juga tidak tahu mas, mas kemana.. heheeee
Hapusedit boleh, tapi ngga tau saya kemana ajah..gimana sih bu...bingung saya jadinya :D
Hapusheheheeee... :D
Hapushehehe.. biar kodenya gak terlalu banyak yaa mba ;)
BalasHapussalah satunya iya mas, untuk mengurangi jumlah kode dengan syarat tidak menambah kode css lagi..
Hapustutorial bermanfaat.
BalasHapussalam kenal :D
salam kenal blaik mas,, terimakasih banyak.. :)
HapusCara yang efektip nih Mbak Ana. saya coba langsung praktek pada template blog saya nih.. ijin ambil pengalaman di artikel ini ya Mbak Ana terima kasih sudah berbagi :)
BalasHapussilahkan mas, semoga bermanfaat dan hati-hati mas jangan sampai ada kode yang error.. :)
HapusKalau dilihat memang agak ringan kalau dihapus ya mba variable definisionl pada template blog, tapi kalau meleng masangnya jadi lumayan nih. He,, he, he,, :D
BalasHapusiya mas tapi selama tidak ada penambahan kode css yang lain bisa membuat loading lebih cepat.. nah itu dia mas, kalau tidak hati-hati bisa bikan error.. :)
Hapussaya pahami dulu, sebelum bertindak menghapus Variable Definitios Template Blog
BalasHapusiya mas, pelan-pelan saja .. :)
HapusIlmu baru nih mbak ana, makasih yaa udah bantu sharing nih :)
BalasHapussama-sama mbak Wida, ilmu lama tapi bari saya posting, semoga bermanfaat ya mbak :)
Hapusini cocok sekali buat yg hobi oprek template bawaan blogger yg biasanya pakai css Variable Definitions :)
BalasHapuskira-kira siapa ya mas yang hobi oprek template.. ? :)
Hapusmantap tutornya, berguna banget
BalasHapusalhamdulilah,, terimakasih banyak mas.. :)
Hapusblajar lagi disini ah
BalasHapuspumpung fikiran lg fresh nih mbak
heheheeee,,alhamdulilah kunang-kunangnya sudah pergi ya mas.. :)
Hapusmakasih infonya mbak :)
BalasHapussama-sama mas Bagus, terimakasih kembali...
Hapussmoga bermanfaat ya mas... hehehe
HapusSalut nih sama mbak ana
BalasHapusFamiliar banget sama masalah kode2an :)
heheheee.. biasa saja mbak, saya masih tahap belajar untuk kode template,,, :)
Hapusbetul ya mbak susi...mbak ana memang cerdas dan pandai sekali soal beginian... :)
Hapuspusing mas :P
HapusSalam Malam Mbak Ana kunjungan Rutin sambil Ronda malam
BalasHapusKEMBALI SIMAK DAN BACA POST Caa menghapus variable
Definition template, sangat bermanfaat sekali tutorialnya nih Mbak Ana :)
Mengapa di hapus Bu variable definitions template nya ?. Kalau menurut saya sich sebaiknya tidak perlu dihapus, karena ini memudahkan kita setting background, jenis, ukuran, dan warna font, dan masih banyak lagi yang lainnya tanpa perlu masuk ke HTML Template blogger. Cukup masuk ke layout dan pilih kata Template Desaigner atau Desiner Template di sebelah kanan atas tampilan layout blogger. Di situ kita bisa atur sesukanya semua yang sudah disediakan oleh team blogger.
BalasHapusKalau variable definitions template nya di hapus di CSS, maka kita tidak bisa atur lewat cara yang sudah di sediakan team blogger tersebut.
Jika hubungannya dengan kecepatan loading blog kita, saya rasa tidak terlalu berpengaruh Bu sebelum kita menghapus variable definition dan setelah kita menghapus nya. Karena variable definition bukan termasuk isu minor, medium atau pun major dalam google speed insights.
Tapi by the way ini juga salah satu artikel unik dan berkualitas dari Bu Ana. Saya cek artikel ini nangkring di posisi teratas search result google untuk cara menghapus variable definition. Great job Bu Ana.
perlu banget nich..apalagi tidak perlu mengkotak katik css ..tutorialnya sederhana namun mudah dipahami....keep happy blogging always..salam dari Makassar :-)
BalasHapussaya pelototi dan saya renungi dulu mbak...saya harus memudengkan otak saya dulu kalau urusan kode-kode begini...hehe
BalasHapusdi blog saya tidak ada mbak variable-variable yang ribet seperti itu mbak... lebih ke CSS saja mbak biar lebih mudah lagi...
BalasHapusmbak ini kode kode diapain yah.. pake sambal ya, pinter deh mba ini..
BalasHapussekarang mah udah tak mudah tergoda untuk edit-edit daleman HTML deh saya mah...sebabnya kalau udah di mulai suka merembet kemana-mana...apalagi kalau kudu menghapus variable definitions template..hu...cape deh..:D
BalasHapuswah saya kebetulan nggak begitu paham sama kode template buk, jadi izinkan saya belajar dulu ya biar bisa menerapkan tutorial ini :)
BalasHapusBlogku masih bawaan blogger. hampir separuhnya aku rubah variabelnya. biar tampil beda dan tidak ada yang nyamain. pokoknya sangat asek deh, otak-atik template, walau rambut ikut rontok tetap terasa hepi.
Hapus