Emilly Lee Template Premium Personal Template

Emilly Lee Personal Template - Sebagai pebisnis, memiliki kartu nama adalah hal yang wajib dimana ini berfungsi untuk mempermudah membangun relasi dengan orang-orang baru yang akan menjadi relasi potensial untuk mengembangkan bisnis. Begitu juga dengan pebisnis internet, memiliki kartu nama virtual atau yang biasa disebut dengan V-Card website akan memudahkan calon klien atau relasi untuk mengenali profil lengkap kita untuk meningkatkan kepercayaan sehingga lebih mudah dalam mengembangkan bisnis kedepannya.

Sudahkah anda punya V-Card Website ?

Jika belum, maka sudah saatnya untuk membuatnya. Dan untuk membuat V-Card Website tentu tidak bisa asal menggunakan desain yang sembarangan, agar lebih pas, maka gunakan V-Card Template yang sudah di desain khusus untuk V-Card Website profesional.

Features	Availability
Responsive	True
SEO Friendly	True
Google Testing Tool Validator	True
Mobile Friendly	True
Personal Blog	True
Dynamic Heading	True
2 Column Grid View	True
Dark Base Theme Color	True
Carousel Slider	False
Auto Read More with Thumbnail	True
Responsive Ad Slot	True
Breadcrumbs	True
Related Posts with Thumb	True
Search Box	False
Social Share Button Top	True
Social Share Button with Counter	False
Top Navigation	False
Responsive Dropdown Menu	False
Numbered Page Navigation	True
Smooth Scroll back To Top	True
Custom 404 Page	True
Custom Contact Form Widget	True
Custom Subscribe Box Widget	True
Social Links Widget	True
Recent Posts Widget	True
Random Posts Widget	False
Recent Comments Widget	False
Author Box	True
More SEO	True
Well Documentation	True

Screenshot :

Perbedaan dan Penggunaan Selector ID dan Class

Perbedaan dan Penggunaan Selector ID dan Class - Untuk mengintegrasikan HTML dan Css yakni memberikan aturan styling pada HTML di blog kita, maka kita perlu menggunakan selector ID dan Css.

ID dan Class yang sering kita temui dalam setiap elemen website sebenarnya dapat diartikan sebagai variabel, yaitu sebuah nama yang mempunyai isi atau nilai, atau bisa juga diartikan sebagai nama dari elemen, ya walaupun ada sendiri property "Name" yang khusus mengatur nama dari elemen tersebut.

ID

Selector ID adalah selector yang hanya bisa dimiliki oleh satu elemen pada halaman website, sama halnya seperti National ID, atau nomor KTP yang hanya dapat dimiliki oleh satu orang saja. Berikut ini syarat menggunakan selector ID.
Pemberian ID pada suatu elemen boleh menggunakan kata atau angka apa saja

1. Tidak boleh ada ID lebih dari satu
2. Tidak boleh diawali oleh angka
3. Tidak boleh mengandung special characters (~ ! @ # $ %)

Penulisan pada HTML contohnya seperti :

<div id="header">

Pada contoh diatas menggunakan id "header".

Penulisan style atau CSS contohnya seperti :

#header{propertycss: valuecss;}

Yaitu diawali dengan karakter "#" pagar kemudian diikuti ID nya.

CLASS

Selector Class adalah selector yang digunakan untuk grup elemen, atau penamaan yang bisa di gunakan dilebih dari satu elemen. Berikut ini syarat menggunakan selector Class.
Pemberian Class pada suatu elemen boleh menggunakan kata atau angka apa saja

1. Class bisa digunakan dilebih dari satu elemen
2. Bisa menggunakan lebih dari satu nama Class pada satu elemen
3. Tidak boleh diawali oleh angka
4. Tidak boleh mengandung special characters

Penulisan pada HTML contohnya seperti :

<div class="sidebar sidebar1">Sidebar ke-1</div>

<div class="sidebar sidebar2">Sidebar ke-2</div>

Yaitu dapat menggunakan lebih dari satu nama Class sekaligus dalam satu elemen, pada contoh class="sidebar sidebar1".

Penulisan pada CSS contohnya seperti :

.sidebar{float: left; background: white;}

.sidebar1{width: 100px}

.sidebar2{width: 200px}

Pada contoh kode CSS diatas, elemen dengan selector Class "sidebar" menggunakan float left; dan background: white;. Kode CSS tersebut diterapkan pada selector "sidebar1" dan "sidebar2" karena kedua nya termasuk dalam grup class "sidebar". Sedangkan properti CSS width:100px; hanya dikhususkan untuk Class "sidebar1" saja, begitu juga dengan properti CSS width: 200px; hanya dikhususkan untuk Class "sidebar2".

Penulisan Class pada CSS diawali oleh "." titik diikuti oleh selector Class nya.

Memberikan style pada tag HTML tertentu memang bisa dilakukan tanpa selector ID maupun Class, hanya saja akan terlihat tidak rapi dan terbatas.

Pengertian HTML, Css, JavaScript dan jQuery

Pengertian HTML, Css, JavaScript dan jQuery - Sebelum kita merambah pada pembahasan materi Bedah Template Blogger setidaknya kita harus mengerti komponen dan format apa saja yang digunakan pada struktur template blogger itu sendiri.
Pada dasarnya setiap template atau halaman website dibangun dengan tiga komponen dasar yakni HTML,Css, dan JavaScript. Adapun pengembangannya akan kita bahas di materi selanjutnya.
Lalu apa itu HTML, Css dan JavaScript?

Pengertian HTML, Css dan JavaScript

HTML : HyperText Markup Language adalah sebuah markah dasar untuk membentuk sebuah website, dalam hal ini bisa disebut dengan frame/ kerangka sebuah object. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa)

CSS : Cascading Style Sheet merupakan aturan untuk mengendalikan sejumlah komponen pada sebuah website sehingga menjadi lebih teratur dan seragam. Css bukanlah merupakan bahasa pemrograman. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

JavaScript : Adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.

jQuery : adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL.
jQuery merupakan sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak.
jQuery ukurannya cukup kecil, sehingga tidak memperlambat proses loading blog yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser – cross browser.
Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti JQuery UI (User Interface) semakin memudahkan kita mengembangkan blog yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang semakin memperkaya kemampuan jQuery.

Dengan mengetahui dasar-dasar dari penyusun template akan mempermudah kita dalam mengelola dan mengcustom template yang akan dibahas dalam materi seputar template di bab berikutnya.

Membuat Gambar post Responsive dan Valid HTML5

Membuat Gambar post Responsive dan Valid HTML5 - Memberi gambar pada artikel menurut saya adalah wajib, setidaknya satu gambar pembuka. Selain sebagai infographic gambar pada artikel/postingan juga memiliki banyak fungsi, antara lain sebagai penghias, kata kunci pada pencarian gambar Google, pemberi jeda pada artikel yang panjang, serta berfungsi juga sebagai panduan ketika kita menulis tutorial.

Selain penggunaan gambar yang tepat seperti yang sedikit disinggung di materi Tips Menulis SEO Friendly,format gambar juga harus diperhatikan. Kemudian penamaan gambar sebelum di upload ke dalam artikel juga harus disesuaikan dengan materi yang disampaikan.

Kemudian mengenai ukuran gambar, ukuran gambar sangat bermasalah ketika kita menggunakan ukuran dengan resolusi tinggi melebihi ukuran lebar halaman posting yang nantinya akan berdampak buruk pada penampilan aritikel. Dan jika kita harus terus menerus menyesuaikan gambar melalui image editor tentu akan sangat merepotkan. Kemudian mengenai validasi HTML5 dimana sekarang semua situs disarankan untuk valid HTML5, kita juga harus men-setup terlebih dulu sebelum melakukan publish dan tidak bisa asal publish gambar yang kita upload.
Dan untuk mengatasi hal tersebut yang perlu kita lakukan adalah membuat ukurannya terus menyesuaikan dengan halaman posting dengan sekali setup.

Simak penjelasan yang akan disampaikan dibawah ini.

Membuat Gambar Post Menjadi Responsive
Perhatikan kode Css dibawah ini...
Letakkan kode Css dibawah ini tepat sebelum kode </head> pada HTML template editor.

/* Membuat gambar menjadi responsive */

.separator{background:#f5f5f5;border:1px solid #e5e5e5;float:none;max-width:100%; height: auto; width: auto; padding:20px 20px 12px;margin:20px auto 10px;text-align:center !important}

.separator img, .separator a img{max-width:100%; height: auto; width: auto;margin:0; padding:0;text-align:center !important;}

Dan harap perhatikan bahwa setup diatas tidak berlaku untuk gambar yang menggunakan caption.

Membuat Gambar Post Valid HTML5

Perhatikan setup yang diberikan dibawah ini.

1. Setelah gambar berhasil diunggah ke dalam artikel, klik gambar tersebut dan kemudian klik "Original size"
2. Kemudian klik "Properties" dan buatlah text title dan text alt pada gambar tersebut.
3. Selanjutnya klik "HTML" di bagian kiri atas post editor, kemudian cari kode dimana gambar itu berada dengan diawali dengan <div class="separator"....>
4. Hapus border="0" dan hapus juga bagian yang ditandai seperti pada gambar.
5. Selanjutnya Publikasikan artikel.

Dengan melakukan tips diatas artikel yang kita buat menjadi lebih SEO friendly dan valid HTML5.