TUTORIAL: Cara Mengedit Template Metro vCard Simple Responsive

Prima Share - Setelah mendownload template Metro vCard di sini. Diextract dulu bro [pass: http://primacheat311.blogspot.com] lalu akan ada file index.html,folder js,image, dan CSS.

klik untuk memperbesar

Sebelum edit index.html, edit javascript dulu yuk! buka folder js cari "script.js" lalu buka dengan notepad (disarankan menggunakan Notepad++ >> Download di sini!) lalu di baris 1 ada kode seperti ini. 

var twitterUsername='envato';//Your twitter username to fetch tweets.var latitude=37.775871;//Langitude and latitude of place that you want tobe shown in contact form.var longitude=29.07629;//Langitude and latitude of place that you want tobe shown in contact form.

yang tulisan envato berwarna merah, ganti dengan username twitter kamu (contoh: primamulia62). kalau angka yang warna merah silakan ganti dengan lokasi kamu (gunakan Google Maps). Kalau sudah silakan di save dan close.

OK kita lanjut mengedit index.html

Buka index.html dengan notepad dan cari kode ini (gunakan fitur search dengan shortcut ctrl+f) 

<title>Promo Metro Vcard</title>

Ganti tulisan yang berwarna merah dengan judul web kamu (contoh: Prima De Archer). Kalau sudah, cari kode 

<h1>//Metro vCard</h1>                    <div class="description">                        Professional Personal Metro Style vCard                    </div>

Kalau sudah ketemu ganti kode yang saya beri warna merah. OK kalau sudah lanjut ke tahap berikutnya...

Cari kode 

<a class="normal-link" href="#"></a>                                <i class="icon-blogger"></i>                                <div class="title">Blog</div>

Ganti simbol pagar dengan link Blogmu. Setelah selesai scroll lagi ke bawah dan kamu akan menemukan kode 

<div class="page-title"><h2>Profile</h2></div>

Nah jika sudah sampai sini berarti kita masuk ke menu profile dan silakan edit sendiri hehehe... Tinggal ganti tulisan lorem ipsum dan lainya kok!

OK setelah menu profile selesai, kita akan masuk ke menu social setelah menemukan kode 

<!--   ////////  socials page st0arts here -->

Disini cukup mudah tinggal edit link social media saja contohnya kode ini...

<a class="normal-link" href="#deviantart"></a>                                <i class="icon-deviantart"></i>                                <div class="title">Deviantart</div>

edit kode yang berwarna merah dengan URL untuk masuk ke profile devianART kamu...

lalu seterusnya ubah semua kode #facebook ,#flickr, #Google+, dan seterusnya...

lalu menu social diakhiri dengan kode

 <!-- //// socials page ends here-->

dan kita masuk ke menu Interest setelah memasuki kode 

<!--interests page-->

Ubah sendiri kata-kata yang ada seperti ini dengan kata-katamu sendiri 

<div class="title">Microsoft </div><div class="desc"> I Like Microsoft too. </div>

Sekarang save dulu index.html dan buka folder image. Ubah foto di dalam folder itu dengan foto-fotomu dan jangan lupa rename fotonya sesuai dengan foto defaultnya (seperti: slide1.jpg dan seterusnya)

Lalu buka lagi index.html di notepad dan cari kode 

<div class="page-title"><h2>Resume</h2></div>

Di menu ini kita akan mencoba mengedit menu Resume (lihat DEMO-nya)   kalau saya sih cukup edit experience aja sesuai aslinya gak usah lebay-lebay :)

Sekarang sudah 90% nih proses pengeditanya tinggal edit kode

<li><a class="normal-link"  href="#vCard">vCard</a></li><li><a class="normal-link" href="#Blog">Blog</a></li> 

lalu ubah tulisan yang saya beri warna merah   :) lalu save  sekarang tinggal upload ke hostingan-mu :D

Demikian posting tentang Cara Mengedit Template Metro vCard Simple Responsive   kalau ada kesalahan tolong di kritik dan jika ingin bertanya silakan di kotak komentar :)                            

                                               

                                                

                                                   

                                               

Untuk cara upload di cPanel silakan langsung ke sini