Cara membuat kartu Profile blogspot keren dalam bentuk kartu animasi

Gambar kartu profile blogspot baru

Halooo guys,
Aku Anissa, sudah lama vacum gak menulis,  awalnya bingung mau nulis apa ya soalnya blog ini tutor dan teknis. Namun setelah baca baca akhirnya kutemukan bahannya, sederhana saja. Cara membuat kartu profile beda dengan efek animasi. Kebetulan aku kan suka utak atik HTML CSS dan JavaScript juga. Jadi cucoklah :D.

Ini sebenarnya hanyalah manipulasi daripada link profile asli  profile kita namun dibuat agar lebih keren dan beda. Seperti yang telah kita ketahui blogger itu telah menyediakan gadget profile atau widget bawaan (default) yang tinggal dipasang saja disidebar atau dimana saja yang kita inginkan (tinggal di geser, drag pake mouse).

Nah berdasarkan kode yang telah dibuat oleh pemilik blog ini (editblogtema) yang ditulisnya dengan judul:

MEMBUAT KARTU PROFILE: PERANAN CSS DAN HTML DALAM DESAIN WEB 

Aku mencoba memodifikasi agar tampilannya tampak lebih keren, diantara hal hal yang aku edit adalah:

1. Warna CSS-nya
2. Link URL dan image profile ke profile asli blogspot kita
3. Manipulasi border-dash untuk membentuk kartu (persegi, bundar, bulat dll)

Ini hanyalah bentuk kreasi, anggap saja teman teman sedang menggambar dengan bentuk dan warna warni, begitu juga dengan memodifikasi tampilan visual suatu objek melalui HTML.

Mari kita lanjutkan. Aku menggunakan tablet dan sering melakukan pengeditan kode yang telah ada tersebut melalui aplikasi Android Dcoder. Kalau teman teman mau mendownloadnya silahkan ikut link berikut resmi kok dari Play Store Android klik saja gambar dibawah ini:

Zaman serba mudah ya teman teman, belajar saja sudah bisa dan mudah melalui mobile. Dari sana aku mengedit seluruh kode scriptnya, jangan kuatir kode kodenya sudah dalam bentuk jadi kok, teman teman tinggal menggunakannya saja.
Namun sebenarnnya aku juga memanfaat CodePen untuk belajar utak atik script dan koding.

Langkah pertama Menambahkan blanko widget HTML/JavaScript

1. Masuk kepengaturan blog
2. Pilih Lay out atau tataletak
3. Pilih tambahkan gagdet/widget
4. klik widget HTML JavaScript

Akan muncul kotak widget dalam bentuk blanko kosong dengan kolom judul diatasnya, oke tulis saja misalnya "My Profile" sebagai judul, contohnya:

widget blanko kosong HTML/JavaScript

Langkah kedua menambahkan kode modifikasi HTML/Java Script

Nah pada blanko kosong diatas pastekan kode yang telah aku modifikasi diabawah ini:

<style>body { font-family: Arial, Helvetica, sans-serif;}.flip-card { background-color: transparent; width: 150px; height: 150px; perspective: 1000px;}.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border: solid; border-radius:180px;color: #E9967A; background: #E9967A;}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg);}.flip-card-front, .flip-card-outer { position: absolute; width: 100%; height: 100%; backface-visibility: hidden;}.flip-card-back { background-color: transparent; color: white;}.flip-card-front { background-color: #E9967A; color: blue; transform: rotateY(180deg);}</style>

<div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <a href="https://www.blogger.com/profile/01675010269156057449"><img src="https://1.bp.blogspot.com/-XqdFpHFx8Vc/XPmXOUYz-nI/AAAAAAAAmVk/u7_NPPE1WzkDYEf2HnWmurUNPaCUdVsuACLcBGAs/s113/Screenshot_20190607-054314.jpg" alt="Avatar" style="width:150px;height:auto;" /></a> </div> <div class="flip-card-back"> <p>Touch me</p> <p>If you want to see</p> <p>My Profile</p> </div> </div></div>

Tunggu, jangan di save dulu! Teman teman perhatikan untaian kode yang aku sorot (highlight) warna warni:

• Hijau itu kode warna background border-dash dan background muka kartu
• Ganti kode yang disorot Kuning itu dengan link URLprofile blogger milik teman teman sendiri
• Sedangkan yang aku sorot merah harus di ganti dengan link URL  image atau gambar profile profile blogger milik teman teman sendiri.

Kita abaikan yang disorot warna hijau. Mari mari kita bahas link URL profile dan link gambarnya saja.

Langkah ketiga Cara menambahkan URL atau link profile blogger milik sendiri:

1.  Langsung saja akses halaman blog teman teman, pada bagian bawah konten atau artikel lihat kebagian komentar. 
2. Klik profile teman teman sendiri

contoh:

Image profile kita pada komentar blog.

Begitu profile di klik, teman teman akan masuk ke URL atau link profile milik sendiri copy alamat pada bar, contoh milik aku:

URL profile blogspot

Hapus kode yang aku sorot pada langkah kedua diatas ganti dengan alamat URL profile blogger teman teman sendiri.

Langkah keempat menambahkan URL atau Link image/gambar blogspot ke kartu

Selanjutnya adalah cara  mengambil link atau URL image/gambar dari profile blogspot diri kita sendiri agar kartu yang kita buat memiliki gambar profile asli blogspot.

Masih melalui edit profile pada bagian bawah image atau gambar profile klik tampilkan layar ukuran penuh

Maka akan muncul tab atau halaman baru perhatikan bagian atas bar alamat URL copy link tersebut

URL link gambar atau image disorot kuning

Perhatikan baik baik link gambar formatnya harus diawali https://1.bp.blogspot.com/...dst.... gunanya ya untuk menampilkan image profile
Ganti link yang aku sorot merah diatas  pada langkah kedua dengan link teman teman sendiri melalui cara ini.

Save template

Untuk melengkapi tutorial aku telah buatkan contoh pada video berikut:

Contoh profile aku ada dibawah konten artikel ini.

Contoh di atas juga telah aku "CodePen" di CodePen, jadi jangan kuatir up to date banget guyssss....Dibawah ini adalah CdePen aku:

Selamat mencoba teman teman....sampai jumpa lagi.

See the Pen Profile blogger blogspot alternative by Anissa Auliasari (@anissa-auliasari) on CodePen.

SHARE YA:

CSS BISA JADI MIMPI BURUK DESAINER TEMPLATE

Ambil hape sobat mulailah ngeblog,  apa sih susahnya menulis dan membuat konten melaui hape? Perhatikan baik baik,  mulai hari ini robah pradigma laptop dan Macbook. Manfaatkan hape sobat.

Lihat speks hape zaman now,  mereka mampu mengakses browser sampai dikedalaman tertentu web dan kalau sudah mampu akses hingga sejauh itu sobat pasti mampu mengakses dasbor blog. Well konten ini sedang ditulis menggunakan hape Made In China merek Oppo A83. Apalagi hape zaman next.

Saya mulai terbiasa dan sepertinya ada masa masa Mcbook tidak saya butuhkan untuk sementara.

Jadi saya ingin cerita sedikit soal css (Cascading Style Sheet ):

CSS: satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file.

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

Jelas bukan.

Seorang desainer sebut seorang desainer template blogger tentu mengerti hal ini. Karena desain blog itu adalah visual, sebuah bentuk seni terstruktur sedemikian rupa sesuai dengan keinginan pembuat dan yang lebih penting mengikuti keinginan dan selera PENGGUNANYA.

Jadi ceritanya begini suatu hari saya tunjukan hasil desain saya kepada teman di tempat kerja, secara terpisah saya berkata kepada mereka:

"Kamu lihat melalui hape kamu dan kamu lihat melalui laptop kamu"

Saya harus menunggu, jaringan  tidak cepat, namun  masih lumayan sudah ada ikon "4G" - nya.

Dan saya bertanya kepada yang memegang hape iphone 5s: "sudah dibuka editblogtema-nya?"

Dia menangguk,
"Mana biar saya lihat"

Dan ketika saya melihat melalui iPhone 5S dengan layar 4,7 dahi saya pasti berkerut kerut kusut, kok tampilannya berantakan? Padahal pada setiap hape teman teman lain di tempat kerja tampilannya solid banget lho...namun tampilan pada hape layar 5" kebawah ber platform iOS ini membuat saya jadi malu.

Belum lagi sempat saya menjadi lebih kecewa karena iPhone jadul ini, teman  yang lain menunjukan laptopnya, astagaaaa...kok Navigasi menunya putih semua???

Saya mengambil alih laptop itu dan menyadari: Laptop tua dengan browser Internet Explorer yang belum di update. Ternyata browser ini tidak bisa baca kode CSS pengolah warna gradient contempo hybrid buatan saya!

Sobat mengertilah betapa terpukul dan merasa bodohnya saya, selama ini pada iPad yang memiliki platform sama dengan iPhone yakni iOS tampilan hasil desain saya baik baik saja, dan selama ini dari berbagai merek laptop windows dan Macbook tampilan desain saya tampak begitu elegan. Tapi ternyata bagi sebagian pengguna PC dan ponsel di kampung pasti menurut mereka tampilan desain template blog saya sangat "berantakan"

CSS RESET
Saya memutuskan memperbaiki  kode kodenya secara manual dan mengujinya hingga keperangkat paling jadul, memperbaiki aba aba CSSnya. Awalnya saya tidak menggunakan CSS reset. Tapi mungkin karena pengatahuan CSS saya masih mentah saya gagal. Akhirnya saya mencoba beberapa teknik dengan memasang kode reset CSS, sebagian berhasil namun memperlambat loading template...

Bayangkan, jika suatu ketika sobat membeli sebuah template sangat indah dibuka melaui browser Chrome,  tau taunya berantakan sekali saat dibuka melalui browser safari Apple. Atau jadi kurang pas saat dibuka melaui Microsoft edge dan Firefox. Barabe sekali bukan.

Saya belum tahu bagaimana standard browser masa depan ditetapkan ketika seharusnya sama pada saat menampilkan halaman website kita...

SHARE YA:

APAKAH TEMPLATE CONTEMPO HYBRID ITU?

1.PERBEDAAN LAY OUT PADA OPSI DESAINER BLOGGER
Saya jelaskan karena banyak yang mengira Contempo Hybrid itu adalah Contempo default. Walaupun dibuat berdasarkan Tema Contempo, contempo hybrid memiliki banyak sekali perbedaan dengan contempo default bahkan beberapa orang yang telah menggunakannya menyangka Contempo Hybrid adalah template klasik blogger.

Lay out Contempo Hybrid, sudah beda dengan contempo asli, perhatikan baik baik lay outnya contempo asli:

Blog post berada disebelah kanan, sedangkan pada Contempo Hybrid Blog Post dipindah kesebelah kiri, lay out sebelah kanan berubah fungsi menjadi sidebar. Perhatikan lay out contempo hybrid yagn kami buat dibawah ini:

Dan perombakan besar besaran dilakukan terhadap:

1. Lay out blogger Contempo menjadi Hybrid
2. Heading blogger Contempo menjadi Hybrid
3. Menu Navigasi Contempo menjadi samasekali baru dan berbeda menjadi: Navigasi Hybrid
4. Merombak elemen CSS HTML untuk tampilan skin
5. Menambah kode css untuk merobah lay out
6. Membuang beberapa widget dan gagdet bawaan contempo dan menambahkan gagdet gagdet atau widget widget baru.
7. Menghapus dan mengganti background tema contempo asli dengan hybrid

Lihat perbandingan tampilan contempo asli dan hybrid:

Apakah Contempo Hybrid premium? Jawabannya Ya

Apakah Contempo Hybrid punya credit? Jawabannya TIDAK

Apakah Contempo Hybrid gratis? Jawabannya 100% gratis

Mengapa? Jawabannya misterius kalau sobat tidak percaya bahwa kami tidak ada jawaban apa apa. Kami hanya membuatnya dan membuat beberapa model lagi yang jauh berbeda baik dari segi tampilan maupun penggunaannya.

2.CARA MERAPIKAN LAY OUT TEMPLATE CONTEMPO.

Masuk ke pengaturan blogger contempo >>pilih Tema>>Pilih editHTML

Lalu cari kode <b:skin><![CDATA[ pada Contempo Hybrid letaknya persis dibawah kode ]]></b:skin> jika sobat bertemu dengan dua kurung siku sperti ini: >...< dengan tiga buah titik ditengahnya, double klik saja tepat pada titik tersebut sampai kode [CDATA[ muncul, dan pastekan kode dibawah ini tepat dibawah <b:skin><![CDATA[ tadi.

body#layout .outer-wrapper {width:970px}
body#layout .content-wrapper {width:970px}
body#layout #header {width:450px;float:left;margin-top:30px}
body#layout #header2 {width:450px;float:right}
body#layout .main-wrapper {width:750px}
body#layout .sidebar-wrapper,.sidebar1-wrapper {width:330px;float:right}
body#layout #footer {width:800px}
.footer {width:215px;float:left}
body#layout ul {display: none}

Perhatikan angka angka ukuran yang saya sorot kunig, anda dapat mengejasnya sambil membuka dasbor blogger pada jendela lain browser, akan tetapi untuk Contempo Hybrid kode diatas sudah cukup memadai.

Jangan meletakan kode diatas ]]></b:skin> atau </style> karena kode diatas tidak akan berfungsi pada posisi skin diatas. Pada template contempo anda dengan mudah akan mendapatkan kode <b:skin><![CDATA[ dan meletakan kode tersebut dibawahnya.

3. PERFORMA DAN KECEPATAN

Performa Contempo tentu saja meningkat setelah berubah menjadi hybrid, jelas lebih responsive, lebih user friendly karena tampilannya yang semi klasik, semua widget dapat tampil baik dilayar PC yang luas maupun dilayar hape yang lebih kecil dengan responsive.

Kecepatan PC saat test di PageSpeed Insight adalah 100 sama dengan contempo asli, sedangkan pada hape masih sekitar 78 namun sudah jauh lebih cepat daripada kebanyakan rata rata template yang ada. Dan kecepatan template mobile adalah PR kami yang masih harus dikerjakan sampai saat ini. Kami tidak akan berhenti sebelum kecepatan menjadi seimbang: PC 100, Mobile 100.

Jika template bawaan atau Contempo asli memiliki tampilan terbatas, maka Template Contempo Hybrid juga dapat diberdayakan untuk berbagai jenis personal blog: Kemampuan lay out gambar yang responisve membuatnya cocok untuk niche wisata, kuliner hingga fashion. Tampilan juga bisa dirobah menjadi blogger berita, gagdet, teknologi dst. Support tentu saja akan tersedia selagi kami masih ngeblog he he he....

4. PEMASANGAN IKLAN

Untuk sementara pemasangan iklan dapat sobat lakukan menggunakan cara konvensional yang telah banyak ditulis oleh para blogger hebat seperti Arlina, Sugeng, Bung Frenky, Om Ridwan, CB blog dll. Browsing saja.  Kedepannya kami akan membuatkan widget khsusus pemasangan iklan otomatis sehingga pengguna dapat meletakan iklan:

• Ditengah postingan diantara pragrap tulisan
• Dibawah Judul
• Di atas Judul samping header

Tanpa harus mengedit HTML, kami belum dapat memasang widget tersebut karena terbukti sangat signifikan mengurangi speed loading. Kami sedang bekerja memecahkan kode kodenya.

Jika sobat melakukannya dengan benar tidak akan terjadi error atau terjadi kode "corrupt" pada template buatan kami. Kami telah memastikan dan setiap waktu mengirimkan link untuk validitas mobile function ke Google.

Contempo Hybrid is dedicated for speed and high performance. Base in contempo blogger default create become more different! We assure your confident.

SHARE YA:

CONTOH BAGAIMANA CARANYA MEMBUAT BLOG SENDIRI

Tutorialkhusus

Sebelumnya kita telah membahas cara pembuatan website secara umum. Sekarang kita mencoba membahas cara membuat blog plus demo HTMLnya melalui blog ini:

Perhatikan image dibawah ini dibuat berdasarkan HTML sehingga anda dapat mengeksplorasinya:

EB

Judul heading

deskripsi judul, 24 Nov 18

Image

Tulisan..
Bla bla bla bla bla bla.

Saya

GBR

Tulis disini bla bla bla bla..

Popular Post

GBR

GBR

GBR

follow

Tulisan..

Footer

Contoh kode diatas diatas adalah sebagai berikut:

1. CONTOH TATALETAK:

<div class="header">
<h2>Blog Name</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg"style="height:200px;">Image</div>
<p>Some text..</p>
</div>
<div class="card">
<h2>JUDUL HEADING</h2>
<h5>Title description, 24 nov 18</h5>
<div class="fakeimg"style="height:200px;">Image</div>
<p>Some text..</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg"style="height:100px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>

<div class="footer">
<h2>Footer</h2>
</div>

2. CONTOH MENAMBAHKAN CSS:

body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;
}

/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}

.leftcolumn {
float: left;
width: 75%;
}

/* Right column */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}

/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}

/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}

@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}

Apakah anda mendapatkan gambarannya?

SHARE YA:

MEMBUAT WEBSITE SENDIRI ITU MUDAH

Tutorial khusus

PRAKATA
Dulu, sewaktu baru mulai membuat blog saya juga berfikir membuat website sendiri itu pasti susah banget. Jadi saya hanya ikut ikutan menggunakan tema tema dan cara standar yang ada. Saya fikir itu tidak memuaskan. Bukankan tidak semua orang memiliki cara berfikir yang sama?

Akan tetapi berusaha membuat web kita sendiri dan belajar keras adalah sebuah nilai lebih dan tentu saja akan sangat berguna untuk diri kita dan secara pribadi saya telah merasakannya. Ternyata sulit atau tidak sulit itu hanyalah pikiran atau cara berfikir kita sendiri.

MEMBUAT WEB SENDIRI?
Membuat suatu halaman web pada dasarnya adalah seperti contoh dibawah ini (image dibawah ini dibuat berdasarkan HTML, jadi anda bisa menyentuhnya untuk melihat reaksinya):

EB

editblogtema.

Beranda Link Link

perihal

Gambar kami:

Gambar

Teks:Bla bla bla bla bla bla bla bla bla bla..

TExt disini

Bla bla bla bla bla bla.

Gambar

Gambar

Gambar

JUDUL KEPALA

Keterangan judul, 24 nov 2018

Gambar

Teks disini...
Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla.

Footer

BAGAIMANA CARA KERJANYA?

Perhatikan strukturnya:

<html lang="en">

<head>

<title>Page Title</title>

<style>

* {

box-sizing: border-box;

}

/* Style the body */

body {

font-family: Arial, Helvetica, sans-serif;

margin: 0;

}

/* Header/logo Title */

.header {

padding: 80px;

text-align: center;

background: #1abc9c;

color: white;

}

/* Increase the font size of the heading */

.header h1 {

font-size: 40px;

}

.navbar {

overflow: hidden;

background-color: #333;

position: sticky;

position: -webkit-sticky;

top: 0;

}

/* Style the navigation bar links */

.navbar a {

float: left;

display: block;

color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

}

/* Right-aligned link */

.navbar a.right {

float: right;

}

/* Change color on hover */

.navbar a:hover {

background-color: #ddd;

color: black;

}

/* Active/current link */

.navbar a.active {

background-color: #666;

color: white;

}

/* Column container */

.row {

display: -ms-flexbox; /* IE10 */

display: flex;

-ms-flex-wrap: wrap; /* IE10 */

flex-wrap: wrap;

}

/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */

.side {

-ms-flex: 30%; /* IE10 */

flex: 30%;

background-color: #6495ED;

padding: 20px;

}

/* Main column */

.main {

-ms-flex: 70%; /* IE10 */

flex: 70%;

background-color: white;

padding: 20px;

}

/* Fake image, just for this example */

.fakeimg {

background-color: #aaa;

width: 100%;

padding: 20px;

}

/* Footer */

.footer {

padding: 20px;

text-align: center;

background: #6495ED;

}

@media screen and (max-width: 700px) {

.row {

flex-direction: column;

}

}

@media screen and (max-width: 400px) {

.navbar a {

float: none;

width: 100%;

}

}

</style>

</head>

<body>

<div class="header">

<h1>

EditBlogTema</h1>

A <b>responsive</b> kami membantu dengan tulus.<br />

</div>

<div class="navbar">

<a class="active" href="https://draft.blogger.com/blogger.g?blogID=3894474860842702694#">Beranda</a>

<a href="https://draft.blogger.com/blogger.g?blogID=3894474860842702694#">Link</a>

<a href="https://draft.blogger.com/blogger.g?blogID=3894474860842702694#">Link</a>

<a class="right" href="https://draft.blogger.com/blogger.g?blogID=3894474860842702694#">Link</a>

</div>

<div class="row">

<div class="side">

<h2>

perihal</h2>

<h5>

Gambar kami:</h5>

<div class="fakeimg" style="height: 200px;">

Image</div>

Some bla bla bla bla.<br />

<h3>

More Text</h3>

Lorem ipsum dolor sit ame.<br />

<div class="fakeimg" style="height: 60px;">

Image</div>

<br />

<div class="fakeimg" style="height: 60px;">

Image</div>

<br />

<div class="fakeimg" style="height: 60px;">

Image</div>

</div>

<div class="main">

<h2>

JUDUL KEPALA</h2>

<h5>

Keterangan judul, 24 nov 2018</h5>

<div class="fakeimg" style="height: 200px;">

Image</div>

Text disini..<br />

Bla bla bla bla<br />

<br />

<h2>

JUDUL KEPALA</h2>

<h5>

Penjelasan judul, 24 November 2018</h5>

<div class="fakeimg" style="height: 200px;">

Image</div>

Text disini..<br />

Blab bla bla bla bla bla.<br />

</div>

</div>

<div class="footer">

<h2>

Footer</h2>

</div>

</body>

</html>

Perhatian!:

1. Struktur ini tidak bisa langsung di masukan kedalam pengaturan blogger default melalui editHTML tanpa modifikasi, ini hanya standar penggunaan web biasa.
2. Opsi sticky, atau navigasi lengket di kepala blog tidak berlaku untuk browser yang lebih tua seperti Internet Explorer dst.
3. Anda dapat menerapkannya melalui postingan dengan memilih diantara 2 opsi: "compose" dan atau "HTML" jadi pilih saja HTML dan copy pastekan saja kode diatas lalu "view" untuk melihat hasilnya (lihat gambar)
   
4. Tutorial ini walaupun sifatnya gratis memiliki hak cipta "tersembunyi" yang  kami jalin dalam algoritma terbaru pada jaringan web terdalam dan mungkin akan berakibat buruk bagi blog yang mengkopi-paste-nya. Silahkan mengkopi setelah mendapatkan ijin dari kami melallui komenter dibawah ini.

SHARE YA: