OWNERHOMECONTACT

Friday, December 27, 2013

Tutorial : Simple Blockquote


Hai hai 
Hari ini aku mau posting tentang tutorial blockquote :)
Tau blockquote kan?
Yang seperti ini
Yang di dalam kotak biru itu adalah blockquote
Fungsi blockquote bagiku pribadi sih untuk memperindah postingan dalam blog hehe
Dan membedakan bacaan di dalam postingan sehingga tulisan di postingan itu terlihat mencondong ke dalam beberapa cm 
Ok langsung aja ya~~

① Pergi ke Dashboardmu, lalu : Pilih Template Edit HTML Proceed Centang Expand Widget Templates
*Mungkin kalian bingung kenapa ada kata yang di bold di atas. Kalau bagiku, yang di bold adalah intinya. Menurutku tidak perlu mencentang Expand Widget Templates nya, karna kalau kodenya tidak berhasil setelah di preview atau kalian save, kalian tinggal menekan tombol CTRL + Z saja di Edit HTML tadi. Maka kode yang tadi kalian paste kan akan hilang dan kembali ke kode kalian yang sebelumnya. Tapi bila kalian ingin memakai cara yang ctrl z itu, syaratnya ketika kalian mempaste kan kode di Edit HTML, kalian JANGAN meng-close Edit HTML nya, biarkan saja meskipun kalian sudah save. Kalian lihat dulu blog kalian apakah kode itu berhasil atau tidak, bila berhasil, kalian boleh mengclose nya. Aku dari dulu memakai cara ini, karna ini lebih simpel menurutku. Aku tau cara ini dari cara biasa ku mengerjakan tugas sekolah di Ms.Word, bila ada kalimat panjang yang salah, tinggal ctrl + z*
② Cari kode di bawah ini di HTML mu dengan menekan CTRL + F :
.post blockquote {
 Pilih dan copy code di bawah ini :)
[gunakan CTRL + C untuk mencopy code]
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyx9qQ-KrD9a_6piV_U5bcMF_PZqCv0U3QLaGmMATPc0mIFU6dLHfo6irU7ID3fhTmnbOPy2DR0F24sO_ioHSxOO2JsMqeOaNFzgfyChsJ1x_W9rVWcW2cLLviJ5jYdUuwQ9Q9Wl4Wizkf/s1600/pinkgrain.png);
color : #000000;
padding : 6px;
}
background : #FAD9D9;
Border : 2px dashed #DEB1B1;
color : #000000;
padding : 6px;
}
background : #FFD5D5;
padding : 6px;
margin : 2px 2px;
color : #ffffff;
border : 2px solid #FF9696;
-moz-border-radius : 25px 10px / 10px 25px;
border-radius : 25px 10px / 10px 25px;
}
background :#FFD5D5;
padding : 6px;
margin : 2px 2px;
color : #000000;
border-left : border-left:
border-right : 2px dashed #FFFFFF;
border-bottom : 2px dashed #FFFFFF;
border-top : 2px dashed #FFFFFF;
-moz-border-radius-bottomright : 7px;
border-top-right-radius : 7px;
border-bottom-right-radius : 7px;
}
background : #FAD9D9;
color : #000000;
padding : 6px;
margin : 2px 2px;
border :2px dashed #CC6BFF;
border-radius :10px
}
border : 3px
dashed #FFC6C6;
padding : 7px;
}
④ Kalau sudah kalian pilih & sudah di copy, preview dulu. Bila tidak eror, dan blockquote kalian berhasil,silahkan di save  hehe

#NOTE
- Merah : Warna~ Kalian bisa menggantikan code warna di atas dengan warna yang kalian mau hehe. Bisa di dapatkan disini
- Biru : Batas lebar pinggiran. Kalian bisa ganti lebarnya sesuka kalian
- Kuning : Ketebalan lapisan dan kalian bisa ganti sesuka hati
- Dan bentuk-bentuk nya ada berbagai macam lho :) Ada dotted, solid & dashed. Dotted artinya titik-titik (dott), sedangkan solid hanya garis lurus biasa, & dashed adalah garis putus-putus. Kalian bisa mengganti code bentuknya semau kalian hehe

Aku membuat blockquote dan melihat code ini, awalnya melihat code blockquoteku. Lalu ku buat saja sendiri karna aku sudah paham cara membuatnya, lalu ku utak atik code nya alias ku buat sendiri dengan mengganti warna & bentuk :')
Memakan waktu yang cukup banyak :dizzy:
Tapi aku senang, ini karya ku sendiri hiks hiks terharu :cry:
Oh ya kalau kalian perhatikan, itu semua berwarna pink lho blockquotenya hihi. Awalnya saat aku buat yang pertama kali itu, aku memakai code warna biru, hanya saja ku ganti jadi pink ahahahai ihh
Kalau kalian mau memakan blockquote nya, beritahu aku ya ^^
Sekian untuk postingan kali ini
Sampai jumpa~~ :hug:

1 comment:

ありがとうございます。 ^^