Tutorial : Scroll Box di Post Entry

Assalamualaikum!
Hai korang.

Aku nak share sikit cara aku letak scroll box dalam post. Kalau korang tak dapat bayang lagi macam mana boleh ziarah sini dulu.

Tutorial ni bagi aku complicated sikit lah. Kalau tak biasa memang akan rasa payah.

Apa-apa pun, apa salahnya korang cuba dulu. Mana tahu aku sorang je dalam alam ni yg rasa susah. Hahaha.

1. Dashboard - New Post - HTML

2. Copy code ni :

<center>
<div style="background:  #FFFFFF ; border: 2px solid #FFFFFF; height: 150px; overflow: auto; width: 400px;">
TEKS KORANG
</div></center>

3. Paste dalam ruangan HTML bukan Compose ya.

4. Ubah :

MERAH : warna background scroll box
BIRU : ketebalan garisan border scroll box
UNGU : warna border
PINK 1 & 2 : tinggi dan lebar scroll box

5. Klik Compose, dan korang sepatutnya akan nampaklah macam mana scroll box korang. Dan dalam tu ada tertulis "TEKS KORANG" kan? So, korang buang ayat aku tu dan ganti dengan ayat korang sendiri.

6. Dah siap, PUBLISH !!

Alhamdulillah.

Mudah ke senang? Ehh?
Hehehe.

Tutorial : Popular Posts yg Comel

Assalamualaikum!
Hai korang.

Hari ni aku nak share cara buat  Popular Post korang nampak gempak!
Siapa yg tak tahu lagi cara dia macam mana teruskan membaca ya.

Tapi first of all, korang kena ada gadget Popular Post dulu tau.
Dah ada? Ok proceed.

1. Dashboard - Theme - Edit HTML - ctrl + F

2. Search code ni :

]]></b:skin>

3. Dah jumpa, korang copy pulak codes kat bawah ni :

#PopularPosts1 h2{

width:100%;

font-size:1.3em;

text-indent:-12px;

font-size:14px;

text-align:center;

color: #000000;

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:8px 0px 1px;

left:-7px;

width:290px;

}

#PopularPosts1 li{

position:relative;

margin:0 0 10px 0;

padding: 3px 2px 0 17px;

left:-5px;

width:285px;

}

#PopularPosts1 ul li{

background: #000000;

position: relative;

display: block;

padding: .4em .2em .4em 2em;

*padding: .2em;

margin: .5em 0;

background: #000000;

border:2px solid #000000;

width: 180px;

text-decoration: none;

border-radius: .3em;

transition: all .3s ease-out;

}

#PopularPosts1 ul li:before{

content: counter(li);

counter-increment: li;

position: absolute;

top: 50%;

margin: -1.3em;

height: 2em;

width: 2em;

line-height: 2em;

font-size: 15px;

color: #000000;

background: #000000;

border:2px solid #000000;

-webkit-box-shadow: 0 8px 5px -7px #888;

-moz-box-shadow: 0 8px 5px -7px #888;

box-shadow: 0 8px 5px -7px #888;

text-align: center;

font-weight: bold;

border-radius: 2em;

position: absolute;

left: 0;

transition: all .3s ease-out;

}

#PopularPosts1 ul li:hover{

background: #000000;

}

#PopularPosts1 ul li:hover:before{

transform: rotate(360deg);

}

#PopularPosts1 ul li a{

font: 12px Arial, serif;

text-shadow: 0 -1px 2px #fff;

color: #444;

display:block;

min-height:25px;

text-decoration:none;

text-transform: uppercase;

}

#PopularPosts1 ul li a:hover{

color: #444;

}

4. Then, aku suggest korang paste dulu dalam Microsoft Word dengan mengekalkan warna codes tu, supaya senang korang nampak apa yang perlu tukar : MERAH 1 : warna tajuk Popular Posts
MERAH 2 & 3 : warna background Popular Posts
BIRU 1 : warna border Popular Post
BIRU 2 : warna nombor

BOLD : kelebaran Popular Posts

UNGU 1 : warna background nombor
UNGU 2 : warna border nombor

PINK 1 : warna hover Popular Posts
PINK 2 & 3 : saiz dan jenis font di Popular Posts

***Nak HTML colour codes tekan sini !!

5. Dah settle tukar apa yg perlu tukar, copy codes tersebut dan paste di atas code dalam Step 2.

6. PREVIEW.
Kalau dah puas hati, then SAVE cepat-cepat !!

Alhamdulillah.

Pheww...!
Panjang betul tutorial kali ni.

Tutorial : Tukar Warna Highlight (Shadow Version)

Assalamualaikum!
Hai korang.

Kalau korang baca post aku yg sebelum ni mesti korang senang je follow tutorial aku kali ni. Seperti yg korang baca daripada tajuk tu, aku nak share cara tukar warna highlight style aku.

Kalau korang tak tahu macam mana rupa style aku tu, cer korang highlightkan mana-mana teks dalam post ni sekarang.
Hah. Faham dah?

Yeay. Jom buat jugak !!

1. Dashboard - Theme - Edit HTML - ctrl + F

2. Search code ni :

a:link {

3. Seterusnya, korang copy codes ni :

::-moz-selection {
text-shadow: 2px 2px 3px #000000; 
}
::selection {
text-shadow: 2px 2px 3px #000000; 
}

4. Paste di atas code dalam Step 2.

5. Ubah yg aku merahkan tu ikut shadow colour yg korang nak. Pastikan satu warna je tau. Jangan atas lain bawah lain pulak. Nak colour code klik sini !!

6. PREVIEW dulu, kalau no error then klik SAVE ganas-ganas !!

Alhamdulillah.

Any inquiry, feel free to ask eh :)

Tutorial : Shadow Link Hover

Assalamualaikum!
Hai korang.

Korang nampak apa-apa perubahan tak kat blog aku sekarang?
Tak nampak? Yelah yelah.

Sebelum ni kan kalau korang move cursor dekat link dalam blog ni, mesti akan ada double dashed hover kan? Tulah, aku dah bosan sebenarnya sebab dah hampir 8 tahun kut aku guna style yg sama. So kali ni aku nak bertukar angin lah orang kata.

Nampak bershadow pulak kan link hover aku?

Tapi tulah, aku cari jugak tutorial untuk jadi macam ni. Malangnya tak jumpa!
Pelik jugak.

So, aku terfikir satu cara yg biasa dan mudah. Then aku decide nak try je lah. Tak jadi takpe.
Poofff...!!

MENJADI LAH KORANG !!

And now of course aku nak share lah apa lagi.

1. Dashboard - Theme - Edit HTML - ctrl + F

2. Search code ni :

a:hover {

3. Copy code ni :

text-shadow: 2px 2px 3px #000000;

4. Paste di bawah code pada Step 2. Tapi kalau korang dah ada hover lain sebelum ni, contoh macam double dashed macam aku dulu, korang buang dulu code tu tau. Takut bertindih. So, akan jadi macam ni :

a:hover {
text-shadow: 2px 2px 3px #000000;
color: $(link.hover.color);
}

5. Ubah yg aku merahkan tu dengan colour code pilihan korang. Meh terjah sini untuk colour code korang.

6. PREVIEW dulu dan tengok kalau takde error, then baru SAVE tau.

Alhamdulillah.
Sonang bona kan? Hehehe.

Tutorial : Cara Tukar Older/Newer Post To Cute Icon

Assalamualaikum!
Hai korang.

Dah baca tajuk kan?
Faham kan? Okay proceed.

Hahaha.

Takdelah, gurau je. Macam ni, bila korang scroll sampai bawah blog korang, mesti korang rasa tak best tengok perkataan Older Post + Home + Newer Post tu kan?
Macam hambar je.

Dan sebab tulah hari ni aku nak share cara tukar semua tu dengan icon yg comel kiut-miut macam aku korang. Nak, follow tak nak, babai !!

Sebelum tu, this tutorial belongs to Nemi. Korang pergi la blog dia, lawa woo !! (iklan tak berbayar)
Aku refer dia punya sebab aku lupa nak copy kat word dulu sebelum tukar.


1. Dashboard - Theme - Edit HTML - ctrl + F

2. Search code ni :

<data:newerPageTitle/>

3. Gantikan code tadi dengan code ni :

<img src="IMAGE URL"/>

*MERAH : image url/address/link korang

4. Search code ni :

<data:olderPageTitle/>

5. Gantikan code tadi dengan code ni :

<img src="IMAGE URL"/>

*MERAH : image url/address/link korang

6. Search code ni :

expr:href='data:blog.homepageUrl'><data:homeMsg/>

7. Gantikan code yg aku birukan tadi dengan code ni :

<img src="IMAGE URL"/>

*MERAH : image url/address/link korang

8. Untuk icon tu, korang boleh design sendiri ataupun nak senang dapatkan di sini !!

9. PREVIEW dulu. Takde error then SAVE !!

Alhamdulillah.

Menjadi ke korang? 

Bolehlah komen sikit. Nak tengok jugak korang punya icon macam mana.

Tutorial : Cara Meletakkan Cute Icon Dalam Blog Archive

Assalamualaikum!
Hai korang.

Apa? Korang malas nak membaca?
Yeay, aku pun malas nak menulis panjang.

So, direct terus ke topik kita hari ni.

Hah! Comelkan Blog Archive aku. Apa? Tak comel? Alaa, korang jelous je tu aku faham.
Nak jugak macam tu jom baca lagi!

***First and foremost, of course korang kena ada Blog Archive dulu tau.
***Second important point is korang kena set style Blog Archive korang Hierarchy.


1. Dashboard - Theme - Edit HTML - ctrl + F

2. Search code ni :

<b:includable id='posts' var='posts'>

3. Then, korang nampak tak sebelah kiri code tu ada nombor dan arrow? So, aku nak korang klik pada arrow no 2294.

4. Lepas korang klik, akan muncul beberapa codes kat bawah code di Step 2 yg sebelum ni takde kan? Contohnya :

<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='post'>
      <li><a expr:href='data:post.url'><data:post.title/></a></li>

5. Seterusnya, copy code ni :

<img src='IMAGE URL'/>

6. Paste ke dalam codes yg aku merahkan dalam Step 4. So, nanti akan jadi macam ni :

<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='post'>
      <li><a expr:href='data:post.url'><img src='IMAGE URL'/>
<data:post.title/></a></li>

7. Ubah perkataan yg aku birukan dengan image url korang. Nak senang cari kat sini !!

8. PREVIEW dulu, kalau menjadi dan takde error, so korang SAVE laju2 !! (excited punya pasal)

Alhamdulillah.

Aku faham tutorial kali ni agak complicated, bukan dari segi cara, tapi keberkesanannya disebabkan berlainan HTML code dan template korang.
So, ada apa-apa soalan silakan komen di bawah.

Tutorial : Cara Meletakkan Image/Picture/Gambar di Sidebar

Assalamualaikum!
Hai korang.

Malam ni saja je aku nak share something.

Tutorial ni very simple. And aku rasa malu nak share sebenarnya, sebab terlalu mudah kan. Nanti korang gelakkan pulak.

Yelah, mustahil blogger tegar macam korang tak tahu pasal ni.

Tapi kan, aku fikir baik aku buat jugak. Bukan untuk korang pun, untuk aku je. Sebab aku takut lupa nanti. So boleh refer balik. Maklumlah, aku ni bukan org IT. So, semua benda pasal codings ni hanya cebisan pengalaman aku je selama hampir 8 tahun (seriously?!) ber-blogging.

Hehehe.

Mesti korang curious a-p-e-k-e-b-e-n-d-a-l-a-h aku merepek daripada tadi.
Actually, aku nak share html codes untuk masukkan gambar dengan mudah dalam blog.
Especially sidebar lah.

Now, jom usha sikit caranya.

Sidebar :

1. Dashboard - Layout - Add a Gadget - HTML/JavaScript

2. Copy code ni dan paste di ruangan tersebut :

<center><img src="IMAGE URL KORANG" /><center></center> 

3. Ubah yg aku merahkan tu dengan image url/address/link korang.

4. SAVE !!

Alhamdulillah.

Baguslah korang yg baca sampai habis tutorial kacang macam ni.
Tata~

Tutorial : Cara Mencantikkan Image Border di Post

Assalamualaikum!
Hai korang.

Hari ni pelik rasa. Tiba-tiba aku jadi terlebih rajin mendesign blog.
Dan nak dijadikan cerita, aku rasa tak bestlah dengan default image border sekarang.

Korang faham tak ni? Cuba korang publish satu post yg ada gambar. Pastu korang akan nampak pada gambar-gambar tu ada border warna kelabu asap tu betul tak? Dan sedikit shadow ala-ala berbayang.

So, aku pun rasa macam nak tukarlah.
Akhirnya, jadilah macam yg korang tengok sekarang.
Meh aku letak satu gambar supaya korang boleh nampak.

See, lawa la sikitkan border yg kat atas ni.
Apa lagi, jom aku ajar korang !!

1. Dashboard - Theme - Edit HTML - ctrl + F

2. Search kod ni :

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

Kalau tak jumpa, try search :

.BlogList .item-thumbnail img {

3. Then, korang akan jumpa macam ni :

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);
background: $(image.background.color);

border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

4. Seterusnya, korang buang codes yg aku merahkan di Step 3, dan gantikan dengan codes ni :

border: 1px solid #000000;

5. Sebelum tu, korang kena tukar :

OREN : ketebalan garisan

BOLD : jenis garisan 

BIRU : warna garisan

***Cari kod warna di sini.

***Jenis garisan : solid | dashed | dotted

6. Kalau dah settle, PREVIEW dulu. No error then baru korang SAVE !!

Alhamdulillah.

Kalau jadi feel free to share. Kalau tak jadi pulak silakan bertanya di ruang komen. InsyaAllah, aku reti aku jawab.

My Sakura's Story

Assalamualaikum!
Hai korang.

Malas nak menaip.
So, let the pictures speak...

                             

Tutorial : Cara Remove Attribution (Powered by Blogger)

Assalamualaikum!
Hai korang.

Korang tahu tak apa benda tu Attribution?
Tak tahu?

Okaylah. Meh sini aku bagitahu korang.
Secara ringkas yg aku boleh cakap, attribution ni kalau dalam istilah ilmu hadith dorang panggil "ISNAD" atau dalam bahasa melayunya macam "SANDARAN" atau "PENISBAHAN".

Hah. Faham dah?
Alhamdulillah.

So, apa tujuan entri aku kali ni eh?
Hehe.

Sebelum tu aku ada satu permintaan. Cehh.

Cuba korang scroll blog aku sekarang sampai bawah sekali.
Nampak tak apa yg selalu korang nampak kat blog korang?

Ya. Yg tulah aku cakap.

Template by ***. Powered by Blogger.

Hah takdekan?
So, entri kali ni aku nak share la cara aku buang attribution tu.

Apahal pulak nak buang?
Takde apa-apa hal lah, cuma ada sesetengah orang rasa serabut. Kalau macam aku, aku nak buang sebab AKU YANG POWER BUKAN BLOGGER.
Hahaha.

Dahlah. Panjang pulak bercakap.
Jom try buat!

1. Dashboard - Theme - Edit HTML - Jump to widget - Attribution1

2. Lepas tu, korang akan nampak perkataan Attribution1 tu dihighlightkan. Kod yg korang nampak lebih kurang macam ni :

<b:widget id='Attribution1' locked='true' title=" type='Attribution'>

3. Seterusnya, perkataan true yg aku merahkan dalam Step 2 tu, korang tukar kepada perkataan false.

4. So, nanti akan jadi macam ni :

<b:widget id='Attribution1' locked='false' title=" type='Attribution'>

5. Then, PREVIEW dulu. Kalau takde apa-apa error, baru korang SAVE !!

6. Ehh. Belum siap lagi ni. Korang pergi kat Layout. Pastu korang scroll sampai bawah, dan korang akan nampak satu gadget yg bernama Attribution.

7. Apa lagi, buka dan tekan Remove.

8. Lastly, tekan Save Arrangement.

Alhamdulillah.
Senang je kan?

Tapi, kalau ada yg kurang faham korang boleh je komen kat bawah ni.
InsyaAllah aku jawab.

Tutorial : Cara Membuat & Menghias Blockquote

Assalamualaikum!
Hai korang.

Korang tengah buat apa tu? Aku tengah design blog.
So, berdasarkan blog aku yg lepas, aku nak ajar korang cara untuk mencantikkan blockquote.

Tapi, first of all,
Korang mestilah kena tahu apa benda blockquote tu.
Kalau korang dah tahu, dipersilakan untuk skip.

Blockquote.
Block? Kotak.
Quote? Alaa yg tanda "..." tuu!

So, katakanlah korang nak post sesuatu entri.
Then, misalnya korang mengarang cerpen ke. Or korang tengah bercerita ke.
Mesti korang ada masukkan dialog seseorang kan?

So bila korang nak tulis dialog/apa2 jelah dalam blockquote, korang enter dulu untuk selang sebaris.
Pastu korang tulislah apa2 yg korang nak tulis.

And lastly, highlightkan dan klik pada lambang quote tu.
Pastu jangan lupa untuk enter once again sebelum korang sambung tulis benda yg korang tak nak quote kan.

Faham dah? Alhamdulillah.

Next, aku nak share cara untuk mencantikkan/mencomelkan/melawakan kotak a.k.a blockquote tu.
This style we called it as flash blockquote.
Lepas korang dah buat nanti baru korang faham kenapa aku namakan macam tu.

HAHA.

Okay, let's do it now.

1. Dashboard - Theme - Edit HTML - ctrl + F

2. Search :

.post-body {

3. Bila dah jumpa, korang copy yg bawah ni.

.post blockquote {
background: #000000;;
    -moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
    padding: 6px;
    Border: 2px dashed #000000;
    margin:1em 20px;
    }
.post blockquote:hover {
background: #000000;
-moz-box-shadow: 0 0 2px 2px #000000;
-webkit-box-shadow: 0 0 2px 2px #000000;
box-shadow: 0 0 8px 5px #000000;
    -webkit-transition-duration: 2.0s;
 }

4. Lepas copy, korang paste dekat atas perkataan di Step 2.

5. Belum habis lagi!!! Korang kena tukar dulu warna :

MERAH : warna background sebelum kena cursor
UNGU : warna border
BOLD : jenis garisan border
BIRU : warna background bila kena cursor
PINK : warna shadow di sekeliling border bila kena cursor

***Cari kod warna di SINI
***Jenis garisan : solid | dashed | dotted

6. Dah siap ubah? Korang boleh PREVIEW dulu.

7. Takde error? SAVE !!

Alhamdulillah. Tahniah kepada yg berjaya.
Kepada yg tak berjaya pula, maaf.
Mungkin codes ni tak sesuai untuk template korang.

____________________________________________________________

PERHATIAN :

Saya tidak bertanggungjawab atas sebarang kerosakan pada laman web anda.
Terima kasih.

A New Leaf

Assalamualaikum!
Hai korang.
Sihat ke?

Hari ni aku buat blog baru. Sempena bermulanya new chapter dalam hidup aku. Yep. I'm going to university! Oh, yeah!

Hehehe.

Actually, aku dah pernah ada blog pun. Tapi fikir punya fikir, aku rasa better aku buat blog baru. Hmm. Rasa rugi jugaklah, yelah aku dah hias blog tu kemain lawo kut ! (vomit)
Tapi tulah, I just want a fresh start, once again in my life.

And seperti biasa, semua blogger ada tujuan yg tersendiri kenapa join blogging ni. Sama jugak macam aku.

TUJUAN aku yg sebenar-benar-benarnya kali ni hanya sebagai story-teller about life. It's not just about my life, it also can be about someone's life. But the most important thing is, aku nak kembalikan self-confidence aku ke level tinggi semula.

YES. I AM JUST A LITTLE IMMATURED KID BEFORE. That's what people see in me.
But, only the Almighty knows about what I've been through during my so called childhood.

Of course I won't tell about those painful stories here.

Let bygones be bygones.

Now, I am turning to a new leaf. To a greener leaf.

Eh, jap! Asal tiba-tiba aku speaking ni?
Hahaha.

Takpelah. Lagipun, aku kena belajar speaking. Tak kisahlah korang nak kecam aku punya grammar ke apa, yg penting aku try.

So, kalau salah, TAK SALAH kan kalau korang yg hebat ni tegur. So that I can learn from my mistakes.

Let me introduce about myself shortly.

My name is *** *********** (HAHA)
Sweet 18.
Muslim.
Malay.
Malaysian.

That's me.