::AcikLiena::Berikan Ku nur Cahaya-Mu...

Tutorial : Cara Membuat Kotak Blockquote

Assalamualaikum...

Whatapps yooo!!!

Okeyh...untuk menghabiskan mase lapang ni..acik nak ajar cara nak buat Blockquote pada blog anda2 semua..Kotak BlockQuote ni bertujuan untuk kita highlight tulisan atau info2 yang korang rase agak penting..atau maybe untuk tonjolkan lagi apa yang korang nak tonjolkan...

Tengok ni..cantikkan kotak blockquote acik..ok!sabar2 jangan gelojoh2...

aduhhh!jom kita belajar macam mane nak tonjol2kan tulisan..eyaahhh!untuk info tambahan..kalau nak buat blockquote,u allz juz highlight tulisan yang ingin ditonjolkan kemudian tekan jer simbol blockquote..

Cara 1 : untuk blogger yang xpernah buat blockquote

1.Login ke Blogspot, clik design/ layout > Edit HTML

2. Lepas itu, sila cari code di bawah.. gunakan Ctrl F untuk memudahkan pencarian

.post-body {

3. Sila Copy code di bawah dan paste kan di ATAS code .post-body { seperti yang u all cari tadi

.post blockquote { background-image:url(URL GAMBAR BACKGROUND BLOCKQOUTE); -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; padding: 6px; Border: 3px solid #FF0080; margin:1em 20px; }

4. Code yang acik warnakan MERAH, boleh la ditukar mengikut citarasa.

5. 3px adalah ketebalan : lagi banyak nombor lagi tebal, solid boleh diubah kepada dashed atau dotted.

6. URL GAMBAR BACKGROUND BLOCKQOUTE boleh la direplace dengan URL u all

7. Save

Disebabkan acik ni baik hati orangnya..acik sediakan u all background cumil2..juz copy n paste!

http://www.mycutegraphics.com/backgrounds/bpw/bpw38-background.html

http://dl2.glitter-graphics.net/pub/676/676882cl2optzoga.gif

http://dl3.glitter-graphics.net/pub/2534/2534973e8665ew8um.jpg

http://dl2.glitter-graphics.net/pub/2823/2823402tmkg7xaqi2.gif

# Kalau background yang acik bagi ni xcantik kan..korang p cari sendiri nah kat GLITERR GRAPHIC..
Selamat mencubaa..

Tutorial : Kotak Blockquote Ber-Shadow Bila Cursor Menyentuh

Assalamualaikum!!

Whatappszzz2x!!!

Aishh...nak cantekkan blockquote yang macam ade shadow2..tapi tak tau acane codingnye..otey2!dont fening2 yeahh..arini acik nak kongsikan sedikit ilmu kepada kamu semua..mari kite mulekan tutorial sekarang..

1. Log in > Dashboard > Design > Edit Html

2. Tekan Ctrl F serentak , dan cari kod ini :

blockquote:hover {

3. Ada takk ? Kalau tak jumpa , cari kod ini :

.post blockquote { atau .post blockquote:hover{

4. Kemudian pastekan jer di bawah kod yang korang cari tadi blockquote:hover {

border:2px dashed #000000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-box-shadow: 0 0 18px #FF3399 ;
-webkit-box-shadow: 0 0 18px #FF3399 ;
}

5.tulisan BIRU warna border,MERAH plak warna shadow u allzz..boley tukar mengikut citarase..

6. Then , korang tekan PREVIEW dulu . Kalau tak de error , boleh lah korang SAVE . Kalau ada ERROR jugak . Cekk semula kat mana kesilapannya..

7. SAVE bila semuanya dah siap !

Tutorial : Floating button facebook,twitter

Assalamualaikum..

Alhamdulillah..cuace hari ni nak kate panas tak panas,sejuk pon taki sejuk..di sebabkan cuace pon cantik harini..mud untuk membuat tutorial juga sangat cantik..hari ni agak sawan sebab acik dah terlepas dari seksaan final exam..sakit otak wooo!jabatan akademik buat susunan schedule exam kami sangat pack dengan subjek2 yang agak taffff!okeyh..juz iklan jer tadi..Now,acik nak buat tutorial mengenai Floating button..Adakah anda tahu apakah floating button???taraaa!inilah button acik y sangat sweettt gtuh..

Ikot baik-baik step2 yang acik buat..jom ikuti tutorial acik sekarang...

1. Sign in blogger > > Design > Add Gadget > Html/Java Script

2. Copy coding di bawah dan paste ke dalam Html/Java Script

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:140px; left:-12px;'>

<a class='linkopacity' href='http://www.facebook.com/acik.liena' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://i1078.photobucket.com/albums/w481/acikliena/facebook-1.png" /></a><br />

<a class='linkopacity' href='https://twitter.com/acikliena92' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://i1078.photobucket.com/albums/w481/acikliena/twitter-1.png" /></a><br />

<a class='linkopacity' href='http://acikliena.blogspot.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Blogger'><img border="0" src="http://i1078.photobucket.com/albums/w481/acikliena/blogger-1.png" /></a><br />

</div>

3. Tulisan warna merah ialah link url korang ( contoh, Facebook, Twitter ), dan link purple cerah link url gambar/icon. Kalau nak tambah lagi button copy tanda ni je sebelum code </div>

left boleh tukar kepada right kalau suka.
# Tulisan hijau tuh ubah mengikut nama link korang..
4. Faham tak? dan SAVE je.

kat bawah ni acik sertakan link icon2 yang korang perlukan..if korang nak juz copy link..kalau tak mau amek..abaikan..^_^