Menghapus Variable Definitions Template Blog

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

Mengganti Warna Blog Untuk CSS Variable Definitions

Mengganti Warna Blog Untuk CSS Variable Definitions - Kemarin ada seorang teman blogger yang bertanya cara mengganti warna background blog untuk kode background-color:$headerBgColor yaitu mbak Imel D. Hafidania dengan pertanyaan seperti berikut ini:

"Mbak Ana, saya mau ganti warna font header di html editor, tapi di html, script nya tuh kyk gini: background-color: $headerBgColor;... itu apa maksudnya ya? soalnya isi html templatenya beda sama yg laen.. makasihh...

Beberapa template blog seperti yang terdapat didalam Blogger sendiri masih memiliki kode CSS Variable Definitions dan ada yang tidak memiliki atau tidak terpasang CSS Variable Definitions, misalnya template blog yang saya gunakan ini. Dengan adanya css definisi variable ini akan memudahkan dalam melakukan customisasi tampilan sebuah blog, khususnya untuk lebar, bentuk font blog, dan perubahan untuk warna blog, seperti warna background, warna teks dan warna yang lainnya. Dengan adanya CSS Variable Definitions ini, kita tidak perlu mengganti lebar blog dan warna blog secara manual dengan mengganti kode warna didalam CSS Template. Lalu bagaimana cara mengganti warna blog untuk CSS Variable Definitions ?

Misalnya pertanyaan yang diajukan oleh mbak +Imel D.Hafidania. Kode background-color: $headerBgColor; merupakan kode CSS Variable Definitions untuk Warna Background header blog yang jika ditulis kedalam bentuk CSS Template maka hasilnya seperti berikut ini:

.header {
background-color: $headerBgColor;
....
}

Jika kita atau mbak Imel mengganti mengganti warna Background untuk header blog secara manual dengan cara menghapus $headerBgColor menjadi kode warna maka tidak akan memberikan pengaruh apapun terhadap warna background header tersebut, malah yang terjadi adalah Header blog tidak akan memiliki warna

.header {
background-color: #444444;
....
....
....
}

Ingat! Kita tidak bisa mengganti Warna Background seperti kode CSS disamping jika didalam kode template blog sudah terdapat CSS Variable Definitions karena Kode CSS seperti disamping ini tidak akan menampilkan warna yang telah ditetapkan didalam kode definisi variable

Lalu bagaimana cara mengganti warna background untuk variable background-color:$headerBgColor tersebut?
Sebelum mengganti kode tersebut, sedikit saya jelaskan tentang Variable Definitions yaitu 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

Dimana Letak Variable Definitions Tersebut?
Definisi variabel berada didalam kode template blog dan Anda bisa mengetahui atau membukanya di menu Template >> Edit HTML dan Variable Definitions barada setelah kode <b:skin><![CDATA[

Untuk template yang ada didalam dashboard Blogger hampir semuanya menggunakan Variable Definitions, sedangkan untuk template-template buatan para master Template ada yang memasangnya dan ada yang tidak. Jika blog Anda menggunakan Template dengan kode Variable Definitions didalamnya maka Anda harus bersyukur karena akan lebih memudahkan dalam melakukan perubahan tampilan blog tanpa harus menguasai atau mengganti kode CSS untuk template blog tersebut

Namun perlu di ingat juga, untuk kode Variable Definitions setiap blog memiliki variable yang berbeda juga namun tetap bisa diubah-sesuaikan dengan keinginan dengan cara seperti berikut ini:
Klik menu Template >> Sesuaikan atau lihat pada contoh gambar bergerak berikut ini dalam Mengganti warna untuk Judul Blog

Pada gambar diatas Anda sebenarnya sudah masuk kedalam Perancang Template dan panduan penggunaanya sudah saya jelaskan di Cara Menggunakan Perancang Template Blogger

Jadi untuk kode background-color: $headerBgColor; pada Perancang Template Blogger, pilih poin Latar belakang untuk mengganti warna Background header tersebut

Bagaimana Jika Pada Perancang Template Blogger Tidak Sesuai dengan Pengaturan yang ada di kode Variable Definitions Template?
Ganti kode warna yang terdapat pada background-color: $headerBgColor; yang ada di kode Variable definitions secara manual dengan masuk ke Edit HTML
Contoh: Untuk contoh kode CSSnya saya ambil dari kode template bawaan Blogger dan bukan milik mbak Imel

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

Memiliki kode variable definitions seperti berikut:

<Group description="Blog Description" selector=".header .description">
<Variable name="description.text.color" description="Description Color" type="color"
default="#777777" value="#000000"/>
</Group>

Maka gantilah color value="#000000" sesuai dengan keinginan untuk mengganti warna font seperti pada contoh diatas. Jangan mengganti $(description.text.color); atau $headerBgColor; dengan kode warna karena tidak memberikan efek apapun, kecuali semua kode Variable Definitions didalam blog di hapus

Silahkan baca Cara menghapus variable definitions template blog

Hmmm.. intinya untuk mengganti warna blog pada template dengan CSS Variable Definitions, saya menyarankan lebih baik diganti secara manual saja karena saya sendiri lebih senang menggantinya secara manual seperti yang saya contohkan diatas. Namun jika tetap untuk menggunakan Perancang Template Blogger juga tidak apa-apa dan jika ada perubahan tampilan yang lain pada blog Anda jangan salahkan saya ya :)

Panduan Template Blog Ada Di Tumblr

Panduan Template Blog Ada Di Tumblr - Alternatif lain dalam membuat blog dan menuliskan artikel-artikel kita tidak hanya menggunakan Blogger, WordPress, Blogdetik atau LiveJournal saja tapi bisa juga menggunakan layanan lainnya yang saat ini sudah mulai banyak digunakan yaitu Tumblr. Dan Panduan Template Blog ini ada di Tumblr juga mengikuti perkembangan yang ada :)

Tumblr merupakan salah satu microblogging yang juga memiliki fungsi yang sama seperti halnya blog-blog yang lain yang banyak digunakan oleh para blogger. Tumblr juga memberikan space atau tempat bagi penggunanya untuk membuat Blog sesuai dengan keinginan mereka dalam memposting teks, membagikan foto, membuat kutipan, berbagi link, menyertakan musik, atau sekedar menayangkan video. Dan saya sendiri menggunakan Tumblr sudah sejak lama tapi yang saya buat di tumblr selama ini hanya dalam bentuk Link-link yaitu Link-link artikel blog ini saya pasang disana

Coba lihat blog saya di tumblr www.panduantemplateblog.tumblr.com

Selain sebagai konten managemen yang unik, tumblr juga memberikan kebebasan bagi penggunanya untuk menyesuaikan segala bentuk dari tampilan yang akan ditayangkan di tumblr seperti warna, bentuk font, atau pun element lainnya dari blog yang telah dibuat di tumblr. Jadi tumblr juga bisa di edit seperti halnya Blogger, kita bisa menambahkan kode-kode CSS kedalam template blog tubmlr kita, kalau untuk mengganti Theme, hampir semua layanan Blogging menyediakan komponen ini dan tidak semua theme yang didiganti bisa di edit secara bebas untuk kategori Blog Gratisan. Sebagai perbadingan, jika kita menggunakan blog dari Blogdetik, WordPress not self hosting, atau LiveJournal mungkin kita hanya bisa sedikit bisa merubah tampilannya tapi di tumblr kita bisa mengedit seluruh tampilan blog tumblr yang kita buat sesuai dengan keinginan kita, layaknya Blogger yang sangat mudah untuk dirubah

Baca juga Cara mengganti tampilan blog

Untuk mengedit CSS thema yang ada di tumblr hampir sama dengan yang ada di Blogger, ada kolom khusus yang telah disediakan untuk mengedit kode tersebut. Namun untuk melakukan semua itu memang dibutuhkan pengetahuan tentang CSS dan secara keseluruhan tetap mudah dilakukan seperti Panduan Template Blog yang ada di tumblr ini :)

Pengaruh Perubahan HTTP ke HTTPS Gambar Artikel Blog

Pengaruh Perubahan HTTP ke HTTPS Gambar Artikel Blog - Sudah pada tahu kan pada 4 hari terkahir ini Blogger kembali merubah tampilan protokol pada url, khususnya url gambar artikel blog dari HTTP menjadi HTTPS. Perubahan HTTP ke HTTPS pada link gambar ini mempengaruhi tampilan gambar yang ada di blog

Perubahan HTTP ke HTTPS ini sebenarnya sudah terjadi pada beberapa bulan Agustus yang lalu dan Google Webmaster sudah menjelaskannya, perubahan yang sama juga pernah terjadi pada tautan Permanen artikel blog yang pernah saya jelaskan di Tautan Permanen Blogger Tanpa Alamat Blog. Dan sekarang apa pengaruhnya jika HTTP berubah menjadi HTTPS khususnya pada artikel blog?

Saat ini jika kita melakukan upload sebuah gambar kedalam artikel blog maka kita akan mendapatkan sebuah link Gambar yang berbeda dari tampilan sebelumnya. Jika sebelumnya link gambar menggunakan Protokol hiperteks tersebut namun sekarang sudah tidak ada lagi dan kemungkinan Protokol lebih ditingkatkan ke versi yang lebih aman
Berikut perbedaan url pada gambar:
Versi lama: http//2.bp.blogspot.com/-HACnqyB71Zo/VGU6v1H2SvI/AAAAAAAAF_A/dS
Versi baru: //2.bp.blogspot.com/-HACnqyB71Zo/VGU6v1H2SvI/AAAAAAAAF_A/dS

Lalu Apap Pengaruh Perubahan HTTP ke HTTPS Gambar Artikel Blog?
Untuk tampilan langsung didalam Blog atau untuk artikel blog tidak ada pengaruh apapun kecuali jika didalam blog (misalnya di Widget) menggunakan script pihak ketiga seperti script recent post maka Thumbnail pada recent post tersebut tidak akan muncul seperti yang terjadi pada recent post blog ini

Baca juga Kenapa Gambar Blog Tidak Tampil?

Jadi tidak perlu khawatir dengan perubahan ini karena gambar blog tetap tampil dengan baik. Mungkin dengan adanya perubahan ini, pihak Google ini memberikan keamanan terhadap setiap konten yang terunduh kedalam server mereka. Untuk mengetahui tentang perbedaan antara HTPP dan HTTPS silahkan buka di Wikipedia. Sekali lagi, perubahan HTTP ke HTTPS pada gambar artikel blog tidak memberikan pengaruh pada tampilan gambar, gambar tetap muncul dengan baik :)

Memasang Facebook Open Graph META Tags

Memasang Facebook Open Graph META Tags - Untuk sebuah blog atau website memasang meta tag adalah suatu keharusan karena dengan adanya meta tag yaitu tag judul dan meta tag deskripsi dapat membantu meningkatkan peringkat blog di mesin pencari. Dan untuk memasang meta tag untuk blog saya yakin teman-teman blogger semua sudah pada tahu dan biasanya juga meta tag ini sudah terpasang didalam kode template blog dan sudah memiliki nilai SEO. Namun bagaimana jika ingin memasang Facebook open graph meta tags?

Untuk meta tag yang terdapat pada sebuah blog kita akan menemukan atau melihat beberapa tampilan di halaman pencarian sebuah blog yang secara lengkap menampilkan sebuah komponen yang terdapat pada satu artikel blog secara lengkap yang meliputi Judul artikel, Nama penulis, Keterangan terbit, Deskripsi artikel, Link artikel, Breadcrumbs, dan Gambar artikel atau Gambar penulis

Untuk GooglePlus sendiri juga sudah secara otomatis memberikan penjelasan yang lengkap pada suatu artikel yang telah terindeks oleh mesin pencari dengan tampilan seperti berikut ini

Bukankah hasil yang ditampilkan seperti contoh diatas merupakan Rich-Snippet dari sebuah artikel blog? Yups betul karena rich snippet terbentuk karena adanya pemasangan meta tag yang secara lengkpa sudah terdapat didalam sebuah kode template blog. Dan bagaimana dengan pemasangan facebook open graph meta tags?

Ketika Anda selesai melakukan update terhadap artikel blog dengan telah memperlakukan khusus pada blog Anda agar update artikel yang dilakukan secara otomatis langsung tayang di Media sosial seperti Facebook, maka hasilnya akan terlihat seperti yang terjadi pada salah satu contoh artikel blog saya berikut ini:

Tampilan pada gambar diatas tidak selalu terlihat seperti itu di halaman facebook. Facebook akan menampilkan jika didalam blog sudah terpasang Open Graph Meta Tags dan itu pun harus sesuai dengan CDN pada facebook. Apa itu CDN? Content delivery network dan bisa Anda baca di Wikipedia. Namun akan terlihat berbeda jika didalam blog belum terpasang Meta tag untuk facebook dan berbagi URL dari artikel blog atau blog Anda di Facebook, maka hasilnya akn terlihat seperti berikut ini:

Apa Pengaruhnya Memasang Facebook Open Graph Meta Tags Untuk Artikel Blog?
Perhatikan dua contoh tampilan gambar diatas, bagian atas memiliki Gambar, Judul serta Deskripsi dan pada bagian bawah hanya menampilkan Judul dan Deskripsi dari sebuah url artikel blog yang saya sebarkan di facebook. Padahal jika ada sesuatu yang unik yang disebarkan atau ditampilkan di sosial media seperti facebook akan menimbulkan respon yang sangat baik yang ingin diketahui oleh pengguna yang lain di facebook. Bagitu juga jika menyebarkan link url artikel blog di facebook dan memiliki tampilan yang lengkap dengan disertai gambar yang unik dan judul yang membuat pengguna penasaran untuk melakukan klik terhadap tautan yang kita bagi, bukan suatu kemustahilan Trafik melimpah akan datang dari facebook, bahkan akan mendorong para pengguna facebook untuk melakukan LIKE dan SHARE dengan url yang kita bagi

Baca juga Cara otomatis menampilkan artikel blog di Facebook

Demo: Facebook Open Graph META Tags
Untuk mengetahui fungsi secara langsung dari Meta tag pada artikel ini, silahkan Anda lakukan klik pada tombol SUKA atau BAGIKAN dibawah ini dan lihat hasilnya langsung di halaman facebook Anda (Semoga berhasil..)

<meta property="og:title" content="Memasang Facebook Open Graph META Tags"/>
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBroHIbBOpl1MU-oKpWBOAE7G_2X2QJhP_-lOtWDS3vHNRZDFDZPhC7Ns9z2fxP8Rzsm-2OdyBiinQi_eGx7k9gGO7ASMriMmmlpw93NCyF3LWcdGGP65CmpFwyOStnkfuMDbnGSTRC1g/s1600/facebook-meta-tag.png"/>
<meta property="og:site_name" content="Panduan Template Blog"/>
<meta property="og:description" content="Memasang Facebook Open Graph META Tags - Untuk sebuah blog atau website memasang meta tag adalah suatu keharusan karena dengan adanya meta tag yaitu tag judul dan meta tag deskripsi dapat membantu meningkatkan peringkat blog di mesin pencari. Dan untuk memasang meta tag untuk blog saya yakin teman-teman blogger semua sudah pada tahu dan biasanya juga meta tag ini sudah terpasang didalam kode template blog dan sudah memiliki nilai SEO"/>

Jadi dengan menggunakan tag META untuk facebook di blog bisa menjadi perbedaan dalam menarik beberapa pengunjung dari Facebook karena adanya keunikan yang membuat mereka untuk melakukan klik terhadap link tersebut

Baca juga Cara meningkatkan jumlah Visitor melalui Facebook

Lalu seperti apa dan bagaimana cara memasang Facebook open Graph META tags itu? Pada artikel ini memang saya tidak menjelaskan caranya, hanya sebatas memberikan penjelasan kalau memasang meta tag facebook di blog akan memberikan pengaruh besar terhadap trafik blog yang datang dari sosial media khususnya facebook. Untuk pemasangan serat kodenya akan saya jelaskan pada artikel berikutnya

Mengenal Google Doodle(s) Tampilan Unik Halaman Google

Mengenal Google Doodle(s) Tampilan Unik Halaman Google - Pada artikel ini sengaja saya tidak membuat artikel tentang Panduan Template Blog dikarenakan beberapa artikel yang saya buat selalu masuk kedalam daftar Draft. Kenapa selalu masuk kedalam Draft? Karena artikel-artikel tersebut tidak berfungsi sebagai mana mestinya yaitu ada kode script yang saya buat tidak berfungsi dengan baik. Okey yang penting dengan adanya artikel tentang Mengenal Google Doodle(s) Tampilan Unik Halaman Google ini sedikit mengurangi kepenatan saya dalam membuat artikel-artikel yang baru khusus untuk blog ini

Apa itu Google Doodle? Mungkin teman-teman blogger sudah pada tahu yaitu pada waktu-waktu tertentu di halaman depan Google, Google akan mengganti tampilan Logonya dengan menampilkan sebuah tampilan dengan gambar-gambar yang unik yang biasanya jika pada gambar tersebut di sorot dengan mouse maka akan muncul keterangan pada gambar tersebut, misalnya keterangan Ulang tahun, hari lahir, liburan atau peristiwa penting. Perubahan dari tampilan Logo Google inilah yang disebut dengan Doodle dan biasanya selalu berada diatas Kolom pencarian halaman depan Google. Yaitu perubahan logo Google yang asyik, mengejutkan, dan kadang spontan, untuk merayakan liburan dan peristiwa penting, serta memperingati kehidupan para seniman, pelopor, dan ilmuwan terkenal atau seperti pada hari ini Tanggal 12 November 2014, Google memasang Logo Hari Ayah atau Father's Day

Dan untuk tanggal 13 Novemebr 2014 Besok, Sepertinya Google akan menampilkan Doodle tentang Pendaratan Terkendali Pertama di Nukleus Komet dengan tampilan seperti berikut ini

Tentang Google Doodle
Google Doodle muncul karena adanya konsep Orat-aret (Corat-Coret) yang dilakukan oleh Larry dan Sergey saat mengganti Logo Google dengan coretan sederhana namun menggambar sebuah pesan komikal. Dengan adanya Orat-aret tersebut, Google pun menampilkannya di halaman depan pencarian web mereka.
Dan ternyata tampilan Doodle di beranda Google ini tidak hanya berasal dari dalam Google sendiri atau pembuat ilustrator doodle tersebut (Doodlers) tapi juga berasal dari permintaan Pengguna Google. Saat ini, membuat orat-oret menjadi tanggung jawab tim ilustrator berbakat (yang di sebut sebagai doodlers) dan insinyur. Bagi mereka, membuat orat-oret telah menjadi upaya kelompok untuk memeriahkan beranda Google dan membawa senyum ke wajah para pengguna Google di seluruh dunia dan sudah lebih dari 2000 doodle yang telah di tampilkan di beranda Google

Untuk membuat tampilan Google Doodle ini, secara rutin Google bertukar ide, pendapat, dan pikiran untuk menampilkan Google Doodle ini baik dengan karyawannya atau dengan pengguna Google. Dan proses pemilihan orat-oret bertujuan untuk merayakan ulang tahun serta perayaan yang menarik dan mencerminkan kepribadian maupun kecintaan Google akan inovasi

Jika kalian memiliki ide untuk menampilkan Doodle hasil karya kalian bisa mengirimkannya melalui email ke proposals@google.com dan untuk mengetahui tentang Goolge Doodle lebih lanjut, Anda bisa mempelajarinya di:
Tentang Google Doodle
Arsip Google Doodle
Google Doodle

Ternyata selama ini tampilan unik halaman Google adalah Doodle yang bisa kita nikmati setiap ada peristiwa penting dan jika Anda ingin menikmati lebih nikmat lagi tampilan Google Doodle ini bisa dengan sambil makan Dodol :)

Membuat Efek Berkilau Dengan CSS Di Blog

Membuat Efek Berkilau Dengan CSS Di Blog merupakan artikel terbaru yang saya buat setelah 2 minggu tidak melakukan update untuk blog ini. Tidak adanya update untuk blog ini dikarenakan ada kesibukan di offline yang tidak bisa dibiarkan dan harus fokus untuk dikerjakan, dan Alhamdulillah semuanya lancar dikerjakan dan akhirnya kembali ke blog ini dengan artikel membuat efek berkilau dengan CSS di blog :)

Membuat efek berkilau ini murni hanya dengan menggunakan kode CSS tanpa perlu menggunakan Script sehingga lebih memudahkan dalam pemasangannya di blog. Efek berkilau ini menggunakan efek transisi dari sebuah kode CSS yang dikombinasikan dengan penggunaan mouse-over atau efek hover yang ditimbulkan pada element jika pointer mouse diarahkan pada element tersebut

Baca juga Kumpulan efek mouse over atau Klik disini sehingga Anda menemukan efek seperti dibawah ini

Rugi kalau tidak dibaca..

DEMO Efek Berkilau

Dibwah ini adalah beberapa demo dari tampilan efek berkilau yang saya buat. Sorot pada masing-masing objek dan lihat hasilnya

Efek Berkilau Pada Teks

Jika Anda tertarik untuk membuat efek berkilau dengan CSS di blog tersebut didalam blog Anda khususnya untuk judul logo blog seperti yang terlihat pada DEMO diatas, caranya pun sangat mudah dengan menyalin kode CSS berikut ini kedalam kode template blog Anda

.mask-shine {
position:relative;
display:block;
width:150px;
height:64px;
text-align:center;
margin:0 auto;
background:none;
}
.mask-shine:after {
content: "";
position:absolute;
top:0px;
left:0px;
width:0%;
height:100%;
background:rgba(255,255,255,0.4);
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;}
.mask-shine:hover:after {
width:120%;
background-color:rgba(255,255,255,0);
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-ms-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}

Untuk markup HTML dibuat seperti berikut ini:
<div class="mask-shine">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpu629IOQ9KIcfl4B0iOZC_IYAx1OfMtt1t7-C05JQJSJXBwnhp0dklTPmSE5dfhEw5YmfYnaSDY1POx6KEDGvOrh7CcA0nDYq5KM-VtJe4wWZ4fLV4xjz4rhJEVBis-6NhOLGdA26_pw/s1600/logoku.png"/>
</a>
</div>
* Ganti url gambar

Sedangkna untuk membuat efek berkilau pada teks, untuk kode CSSnya sama saja. Hanya perlu menyesuaikan beberapa value seperti lebar, tinggi, warna background, url gambar, dan letak posisi. Silahkan berkreasi :)

Cukup mudah kok untuk membuat efek berkilau dengan CSS di blog seperti yang telah saya jelaskan diatas, hanya perlu mengedit beberapa kode saja untuk merubah tampilannya. Okey, terimakasih :)