5/21/2017

Membuat Biodata Sederhana dengan HTML

Membuat Biodata Sederhana dengan HTML

Membuat Biodata Sederhana dengan HTML - Kali ini akan berbagi ilmu baru yaitu bagaimana caranya Membuat Biodata Sederhana dengan HTML. Aplikasi yang saya gunakan kali ini adalah Atom.

Aplikasi Sub Editor tidak hanya Atom, namun bisa juga Sublime Text, Adobe Dreamweaver, Notepad++ dan masih banyak lagi. Langsung saja bagaimana cara membuat biodata sederhana ini. Bahasa yang saya pakai bahasa dasar yaitu HTML dan CSS. Sehingga tidak terlalu sulit untuk dilakukan dan mudah dipahami.

Membuat Biodata Sederhana dengan HTML

1. Buka Aplikasi Sub Editor yang disukai.
2. Buatlah sebuah file baru dengan format biosederhana.html atau bisa dibuat dengan sesuka hati.
3. Copy kode di bawah dan taruh didalm sub editor
<!DOCTYPE html>
<html>
<head>
 <title>Biodata Sederhana</title>

<meta charset="utf-8">

<!-- CSS -->

<style type="text/css">

/* INI CSS */

</style>

</head>
<body>

<center><h1>Biodata Mahasiswa</h1></center>

<img src="d:\WAHYU\alin.jpg">

<h3>Informasi Pribadi</h3>
<table class="kotak" border="1">
<tr>
 <td>Nama</td>
 <td>Agustin Amanda Zatalini</td>
</tr>
<tr>
 <td>TTL</td>
 <td>Ngawi, 21 Agustus 1998</td>
</tr>
<tr>
 <td>Alamat</td>
 <td>Ngawi, Indonesia</td>
</tr>
<tr>
 <td>Agama</td>
 <td>Islam</td>
</tr>
</table>

<h3>Pendidikan</h3>
<table class="kotak" border="1">
<tr>
 <td>SD</td>
 <td>SDN Karang Tengah V Ngawi undefined2004 - 2010)</td>
</tr>
<tr>
 <td>SMP</td>
 <td>SMPN 2 NGAWI undefined2010-2013)</td>
</tr>
<tr>
 <td>SMA</td>
 <td>SMAN 2 NGAWI undefined2013-2016)</td>
</tr>
<tr>
 <td>UNVIERSITAS</td>
 <td>Universitas Dian Nuswantoro undefined2016-Sekarang)</td>
</tr>
</table>

<h3>Skill</h3>
<table class="kotak" border="1">
<tr>
 <td>Microsoft Office</td>
 <td>85%</td>
</tr>
<tr>
 <td>Graphic Design</td>
 <td>60%</td>
</tr>
<tr>
 <td>Web Design</td>
 <td>65%</td>
</tr>

</table>

</body>
</html>

4. Copy kode di bawah dan taruh tepat di bawah <style type="text/css">  .
h3{
 font-size: 140%;
 position: relative;
 margin: 0 0 10px;
 padding: 10px 0;
 border-bottom: 2px solid #e0e0e0;
 font-weight: 500
 letter-spacing: 1px;
}

body {
  font-family: Montserrat, sans-serif;
  color: #444;
  background: #eee;
}

.kotak{
 width: 100%
 
}
td{
 border-width: 3px;
 padding: 5px;
    
 
}

img{
 display: block;
 width: 50%;
 margin: auto;
 height: auto;
}

Atau jika ingin dijadikan satu bisa seperti ini.
<!DOCTYPE html>
<html>
<head>
 <title>Biodata Sederhana</title>

<meta charset="utf-8">

<!-- CSS -->

<style type="text/css">

h3{
 font-size: 140%;
 position: relative;
 margin: 0 0 10px;
 padding: 10px 0;
 border-bottom: 2px solid #e0e0e0;
 font-weight: 500
 letter-spacing: 1px;
}

body {
  font-family: Montserrat, sans-serif;
  color: #444;
  background: #eee;
}

.kotak{
 width: 100%
 
}
td{
 border-width: 3px;
 padding: 5px;
    
 
}

img{
 display: block;
 width: 50%;
 margin: auto;
 height: auto;
}

</style>

</head>
<body>



<center><h1>Biodata Mahasiswa</h1></center>

<img src="d:\WAHYU\alin.jpg">

<h3>Informasi Pribadi</h3>
<table class="kotak" border="1">
<tr>
 <td>Nama</td>
 <td>Agustin Amanda Zatalini</td>
</tr>
<tr>
 <td>TTL</td>
 <td>Ngawi, 21 Agustus 1998</td>
</tr>
<tr>
 <td>Alamat</td>
 <td>Ngawi, Indonesia</td>
</tr>
<tr>
 <td>Agama</td>
 <td>Islam</td>
</tr>
</table>

<h3>Pendidikan</h3>
<table class="kotak" border="1">
<tr>
 <td>SD</td>
 <td>SDN Karang Tengah V Ngawi undefined2004 - 2010)</td>
</tr>
<tr>
 <td>SMP</td>
 <td>SMPN 2 NGAWI undefined2010-2013)</td>
</tr>
<tr>
 <td>SMA</td>
 <td>SMAN 2 NGAWI undefined2013-2016)</td>
</tr>
<tr>
 <td>UNVIERSITAS</td>
 <td>Universitas Dian Nuswantoro undefined2016-Sekarang)</td>
</tr>
</table>

<h3>Skill</h3>
<table class="kotak" border="1">
<tr>
 <td>Microsoft Office</td>
 <td>85%</td>
</tr>
<tr>
 <td>Graphic Design</td>
 <td>60%</td>
</tr>
<tr>
 <td>Web Design</td>
 <td>65%</td>
</tr>

</table>

</body>
</html>
Untuk bagian img atau gambar, bisa menggunakan daerah folder masing-masing. Jadi silahkan untuk menyesuaikan.

Selamat mencoba, tidak ada sesuatu yang sulit apabila sesuatu tersebut tidak pernah dilakukan bahkan dipelajari.
Read More

5/10/2017

Perbedaan PRINTF dan PUTS dalam Bahasa C

Perbedaan PRINTF dan PUTS dalam Bahasa C

Perbedaan PRINTF dan PUTS dalam Bahasa C - Buat kamu yang ingin menjadi calon programmer atau yang sedang ingin memasuki dunia perkuliahan. Pasti setiap kampus atau universitas akan memberikan materi dasar tentang pemrograman yaitu bahasa C atau PASCAL.

Namun, kali ini saya akan membahas bahasa C. Karena tempat kampus saya memberikan materi bahasa C bukan PASCAL. Buat kamu yang ingin sudah lulus dan melanjutkan kuliah tidak ada salah nya belajar terlebih dahulu. Agar nanti saat perkuliahan berlangsung sudah tidak bingung.

Dalam bahasa C saat ingin mencetak sebuah data harus menggunakan metode Printf dan Puts. Namun, biasanya rata-rata para programmer lebih cenderung menggunakan Printf ketimbang menggunakan Puts.

Format penggunaan printf dan puts

Printf

printf("Menggunakan Printf");

Puts

puts("Menggunakan Puts");

Lalu apa perbedaannya?

Perbedaannya berada di hasil pencetakan, apabila saat Printf dijalankan programnya maka dia tidak akan membuat baris baru. Akan tetapi berada di baris tersebut. Sedangkan untuk Puts akan membuat baris baru dan tidak perlu ada tambahan "\n". Apabila masih kebingungan, saya akan memberikan sebuah contoh.

printf("Menggunakan Printf");
printf("Menggunakan Printf");
printf("Menggunakan Printf");

Output

Menggunakan PrintfMenggunakan PrintfMenggunakan Printf.

Jika menggunakan puts akan otomatis membuat baris baru dan tidak dalam satu baris.
puts("Menggunakan Printf");
puts("Menggunakan Printf");
puts("Menggunakan Printf");

Output

Menggunakan Printf
Menggunakan Printf
Menggunakan Printf.

Bagaimana sudah mengerti perbedaannya? Semoga bermanfaat dan bisa dibagikan ke teman-teman yang lain. Jangan malu untuk bertanya kepada siapapun, karena dengan bertanya kita akan mendapatkan ilmu dan mengerti ilmu baru.
Read More

3/28/2017

Cara Menerima Semua Permintaan Teman di Facebook 2017

Cara Menerima Semua Permintaan Teman di Facebook - Buat kamu yang dulu suka sekali bermain facebook, lalu sekarang sudah bosan dan pindah ke media sosial lainnya. Namun, tidak ada salahnya untuk sekali-kali membuka akun facebook kamu.

Saat kamu membuka akun facebook dan ternyata banyak sekali permintaan temannya, tentu hal ini akan memakan waktu yang lama jika harus klik "Konfirmasi" secara manual. Maka dari itu, setiap program itu pasti ada celah dan ada fitur otomatis atau manual.

Kali ini saya +Wahyu Perwira akan membagikan bagaimana caranya menerima permintaan teman facebook secara otomatis. Berikut caranya.

Cara Menerima Semua Permintaan Teman di Facebook

1. Pastikan sudah masuk ke dalam akun facebook
2. Buka link ini https://www.facebook.com/reqs.php dan akan tampil seperti ini



3. Setelah itu tekan CTRL+SHIFT+J atau tekan F12 di keyboard masing-masing.
4. Akan tampak tulisan elements, console, source dan lain-lain.
5. Pilih tab "Console" lalu masukkan kode berikut.
var field = document.getElementsByClassName("_42ft _4jy0 _4jy3 _4jy1 selected _51sy");
for (i = 0; i < field.length; i++)field[i].click() ;
Setelah itu tunggu saja hasilnya, setiap kode yang berjalan akan otomatis menerima permintaan sebanyak 50 teman. Ulangi terus menerus sampai permintaan teman habis.

Bagaimana cukup mudah bukan? Selamat mencoba, apabila tidak paham silahkan untuk bertanya. Karena, dengan bertanya akan membuat orang yang sebelumnya tidak tahu menjadi tahu.
Read More

3/22/2017

Kampus Indonesia dengan Basis Teknologi Yang Sudah Mendunia

Kampus Indonesia dengan Basis Teknologi Yang Sudah Mendunia - Kampus atau Universitas adalah sebuah tempat dimana para mahasiswa untuk menimba ilmu dan menentukan cita-cita atau masa depan yang menjadi lebih baik.

Namun, menurut Wikipedia sendiri.
Dalam pengertian modern, kampus berarti, sebuah kompleks atau daerah tertutup yang merupakan kumpulan gedung-gedung universitas atau perguruan tinggi. Bisa pula berarti sebuah cabang daripada universitas sendiri. Misalkan Universitas Indonesia di Jakarta, Indonesia memiliki 'kampus Salemba' dan 'kampus Depok', atau Universitas Bunda Mulia memiliki 'kampus Lodan'..

Hampir setiap anak-anak yang menduduki bangku SMA/SMK terutama kelas 3 akan melanjutkan ke studi selanjutnya. Mulai dari kerja, kuliah dan sebagainya tergantung kebutuhan masing-masing siswa tersebut.

Namun, kali ini saya akan membahas tentang dunia perkuliahan, bukan pekerjaan atau hal-hal lainnya. Disini saya akan mengajak teman-teman untuk melanjutkan kuliah dan mendapatkan sebuah gelar. Karena, saat ini perusahaan / kantor-kantor persayaratan untuk masuk kerja harus memiliki gelar Sarjana atau Diploma.

Apa Itu Udinus?

Tak lupa saya akan memperkenalkan kampus di pulau Jawa dan letaknya berada di kota Semarang, kampus apa itu? Bagus atau abal-abal? Nama kampus tersebut adalah Udinus. Udinus sendiri merupakan kampus dengan dominan warna biru di setiap gedungnya.



Dimana foto diatas merupakan Gedung H. Gedung ini tingginya 7 lantai dan di lantai 3 ada sebuah taman kecil yang sejuk, sangat direkomendasikan untuk melakukan selfie, foto bersama dan nongkrong bersama teman-teman.

Udinus sendiri memiliki banyak fakultas, dimana fakultasnya rata-rata sudah Terakreditasi B dan A. Sehingga, jangan khawatir untuk kuliah di Udinus. Karena, banyak perusahaan atau kantor yang mencari akreditasi kampus yang tinggi.

Udinus sendiri ada beberapa fakultas yang tidak kalah hebat dengan universitas lainnya. Berikut beberapa fakultas yang ada di Udinus.

Fakultas :

  • Fakultas Ilmu Komputer
  • Fakultas Ekonomi dan Bisnis
  • Fakultas Teknik
  • Fakultas Kesehatan
  • Fakultas Ilmu Budaya

Untuk selengkapnya kamu bisa membuka website udinus langsung di www.dinus.ac.id atau bisa lihat juga foto yang ada di bawah ini agar lebih jelas.



Saya sendiri mengatakan kalau Udinus ini tidak kalah dengan kampus unggulan lainnya seperti ITB, UGM, kenapa? Karena di Udinus sendiri fasilitas teknologi nya sangat bagus dan memumpuni untuk dalam media pembelajaran.

Selain itu, Udinus juga merupakan kampus berbasis teknologi dan kewirausahaan. Maksudnya adalah kampus Udinus merupakan kampus yang mendukung dalam bidang teknologi. Dimana teknologi saat ini sangat dibutuhkan, selain itu Udinus juga mendukung kewirausahaan. Hal ini ditujukan, agar para mahasiswa bisa memulai membuka usaha dan tidak tergantung dengan kantor-kantor.

Keuntungan Kuliah di Udinus?

Keuntungannya sangatlah banyak sekali. Mulai dari kos sampai teknologi pun sepertinya lengkap. Berikut keuntungan-keuntungan jika kuliah di Udinus :

  1. Kos sekitar kampus sangatlah banyak
  2. Dekat dengan objek wisata
  3. Kampus yang luas dan tingkat
  4. Tiap kelas sudah berisi AC semua. Sehingga tak perlu khawatir jika kepanasan
  5. Parkir yang nyaman, apabila kunci tertinggal akan diamankan oleh penjaga parkir.
  6. Dapat blog pribadi dengan server udinus langsung.
  7. Dekat dengan warteg ( warung tegal )
  8. Dan masih banyak lagi

Buat kamu adek-adek yang berada di bangku SMA. Sekarang jangan bingung dan khawatir, kalau universitas swasta pun kualitasnya tidak kalah dengan yang negeri. Maka dari itu, jangan terlalu banyak pilih memilih sehingga membuat bingung dan tidak jadi sekolah.

Masa depan ada di tangan kita masing-masing, orang lain hanyalah sebuah perantara atau membantu perjalanan kita. Jangan lupa untuk selalu berdoa kepada Allah agar bisa mendapatkan yang terbaik.

Udinus Menurut Saya

Setelah diatas saya mempromosikan kampus saya yaitu Udinus. Dengan berbagai fasilitas dan keuntungan-keuntungan yang ada. Saya akan berbagi pengalaman saja selama kuliah di Udinus. Kalau di Udinus itu dosennya ramah dan asik diajak untuk bercanda juga.

Selain itu, ada fasilitas untuk saling tukar pikiran dan bertanya antara kakak tingkat. Dimana, saat kita tidak paham bisa langsung bertanya dan Insya Allah pasti akan dijawab apabila mengerti. Kekeluargaan di Udinus sendiri sangat tinggi.

Perlu kamu ketahui, Udinus merupakan kampus anti narkoba loh! Jadi, buat kamu yang suka mengkonsumsi narkoba, mulai sekarang berhenti dan jangan bikin malu almamater kampus dan keluarga kamu.


Read More

2/05/2017

Cara Melihat Foto Profil Instagram Teman dengan Mudah

Cara Melihat Foto Profil Instagram Teman dengan Mudah

Cara Melihat Foto Profil Instagram Teman dengan Mudah - Siapa yang tidak mengenal media sosial Instagram? Media sosial yang memfokuskan untuk berbagi foto dan video, serta ada pula fitur like, komentar dan membagikan.

Namun, apakah kamu pernah sadar dan mengetahui? Kalau foto profil di Instagram itu tidak bisa kita lihat secara jelas atau besar? Hanya sebagian kecil yang sudah dipotong saja? Berbeda dengan media sosial lainnya seperti Facebook, Twitter, Whatsapp, Line dan lain-lain.

Nah, kali ini jangan khawatir, karena saya +Wahyu Perwira akan membagikan caranya agar bisa melihat foto profil orang lain dengan kualitas baik. Namun cara ini digunakan melalui desktop / pc / laptop / notebook ya.

Cara Melihat Foto Profil Instagram Teman dengan Mudah

1. Buka browser teman-teman
2. Pilih akun instagram yang ingin dituju. Misal saya memilih akun https://www.instagram.com/shaniamh_/
Cara Melihat Foto Profil Instagram Teman dengan Mudah


3. Klik kanan pada foto profil
4. Pilih "Open Image In New Tab". Penampakannya seperti ini
Cara Melihat Foto Profil Instagram Teman dengan Mudah


5. Cek linknya "https://scontent-sit4-1.cdninstagram.com/t51.2885-19/s150x150/16122986_920342201436740_1159215714754625536_a.jpg"

6. Di dalam link tersebut ada angka 150x150. Nah angka tersebut dihapus saja, sehingga akan menghasilkan seperti ini "https://scontent-sit4-1.cdninstagram.com/t51.2885-19/s/16122986_920342201436740_1159215714754625536_a.jpg"


Cara Melihat Foto Profil Instagram Teman dengan Mudah

7. Sekarang kamu bisa menyimpan foto tersebut.

Jangan lupa saat menghapus angka 150x150 reload kembali halaman tersebut.
Bagaimana cukup mudah bukan? Sekarang kamu bisa kepoin foto profil teman-teman kamu, selamat mencoba dan jangan lupa sebarkan teman-teman kamu agar tahu.
Read More

1/20/2017

Meta Tag SEO 2017 Agar Blog Berada di Halaman Pertama

Meta Tag SEO 2017 Agar Blog Berada di Halaman Pertama

Meta Tag SEO 2017 Agar Blog Berada di Halaman Pertama - Para blogger pasti ingin sekali apabila blog yang dibangun atau dibuatnya berada di halaman pertama, kenapa? Karena setiap orang mencari sesuatu di mesin pencari misal Google. Pasti akan membuka yang berada di halaman pertama, maka dari itu konten nangkring di halaman pertama sangatlah penting.

Kali ini saya +Wahyu Perwira akan membagikan rahasia jitu. Rahasia ini yaitu dengan cara menggunakan meta tag seo. Seperti yang kita ketahui, dalam meta tag seo terdapat kata kunci dan deskripsi agar memudahkan Google menganalisa blog kita.

Meta Tag SEO 2017 Agar Blog Berada di Halaman Pertama

1. Buka blogger teman-teman.
2. Masuk ke tab menu template > edit HTML.
3. Cari kode <head> dan copy kode di bawah ini, tepat dibawah <head>.
<!-- KODE RAHASIA META TAG SEO AGAR BANYAK PENGUNJUNG -->
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='YOUR, KEYWORDS, HERE' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/></b:if></b:if></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/></b:if>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/GOOGLE+ID/posts' rel='publisher'/>
<link href='https://plus.google.com/GOOGLE+ID/about' rel='author'/>
<link href='https://plus.google.com/GOOGLE+ID' rel='me'/>
<meta content='GOOGLE-WEBMASTER-CODE' name='google-site-verification'/>
<meta content='BING-WEBMASTER-CODE' name='msvalidate.01'/>
<meta content='ALEXA-VERIFY-CODE' name='alexaVerifyID'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='YOUR-NAME' name='Author'/>
<meta content='general' name='rating'/>
<meta content='Indonesia' name='geo.country'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta name="language" content="english"/>
<meta content='https://www.facebook.com/facebookkamu' property='article:author'/>
<meta content='https://www.facebook.com/facebookkamu' property='article:publisher'/>
<meta content='FACEBOOK-APP-ID' property='fb:app_id'/>
<meta content='FACEBOOK-ADMIN-ID' property='fb:admins'/>
<meta content='@twitterkamu' name='twitter:site'/>
<meta content='@twitterkamu' name='twitter:creator'/>
<!-- KODE RAHASIA META TAG SEO AGAR BANYAK PENGUNJUNG -->

4. Simpan
Disitu ada tulisan XXXXX harap digantikan dengan blog masing-masing.
Demikian tutorial yang bisa dibagikan. Selamat mencoba, apabila ada yang ingin ditanyakan, silahkan untuk bertanya.
Read More

1/12/2017

Cara Membuat Catatan Seperti Arlina Design


Cara Membuat Catatan Seperti Arlina Design - Nah saat mengunjungi blog Arlina Design pasti akan melihat sesuatu yang unik dan baru serta bikin orang terkagum dengan karya-karyanya. Kali ini saya +Wahyu Perwira akan membagikan, bagaimana cara membuat catatan seperti Arlina tersebut? Sebagai contohnya, silahkan lihat demo dibawah ini

Ini Catatan yang ada di Arlina Design. Ingin blog kamu tampil indah dan elegan seperti ini? Ikuti tutorialnya dibawah.

Bagaimana mirip dan bagus bukan? Jika kamu berminat, silahkan simak tutorial berikut. Ikuti secara teliti, agar tidak terjadi kesalahan.

Cara Membuat Catatan Seperti Arlina Design

1. Buka blogger.com
2. Masuk ke template > edit HTML
3. Cari tulisan ]]></b:skin> atau </style>
4. Copy kode CSS dibawah, dan taruh diatas ]]></b:skin> atau </style>
/* BLOCKQUOTE WREP17 */
.post-body blockquote{background:#6591c2;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px}
.post-body blockquote:before{position:absolute;content:&#39;Catatan&#39;;background:rgbaundefined255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#6591c2}
.post-body blockquote:after{position:absolute;content:&#39;\f027&#39;;right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgbaundefined255,255,255,.6)}
.post-body blockquote a,.post-body blockquote a:hover {color:#fff;}

5. Setelah itu klik simpan.
6. Buatlah sebuah postingan dan menggunakan fitur quote atau blockquote.
7. Selamat sudah jadi

Bagaimana mudah bukan tutorialnya? Selamat mencoba dan selamat memodifikasi kembali fitur catatan tersebut agar lebih paham dan sesuai dengan keinginan. Apabila masih kebingungan, silahkan untuk bertanya di komentar. Selamat mencoba

Referensi Arlinadesign
Read More