Friday, 27 February 2015

Edit simple template ( My Style )

10 Comments so far

Assalamualaikum and hello peeps..The first thing that come in my mind before making this post is the fact that it gonna be a long and hard tutorial to make..But,never mind, I will write this tutorial to help you guys..^^

This tutor is all in one tutorial of basic things that I customize in my template

  1. How to add header ?
  2. How to add border like mine ?
  3. How to add footer ?
  4. Most basic things here
ALERT THIS First of all, back up your current template because all customization that you had made will gone.

Choose a new simple  template ( like the example below ) if you had already use simple template revert it to default.

Go to template --> customize

Let's add background.. Background --> Choose File --> Done

Adjust width as you like

Remove blog title (time to move) by :
Click on advance --> Blog title --> Size 0px , color Transparent

How to add header ?
Go to Layout

Choose your header file

After uploading your header, save it.

Then, go to Template --> Edit HTML
Search using ctrl + F
To remove shadow around blog.
Search  .content-outer {
remove the following code below it
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $( #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  margin-bottom: 1px;
And replace it with 
  margin-bottom: 0px;

Basic things to be edit.

1.  Search  /* Header
then, add  below code above it
.header-outer, .content-inner { background-color: transparent;}.main-outer, .tabs-outer { background-color: $(content.background.color);}.tabs-inner .widget ul { margin: 0px -15px;}.content-inner{padding: 0px;}

2.  Search  .header-outer {
Then remove the following code below it

 background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
3. Search .Header .description {
add this code below it
display:none !important;

How to add main background with border.

search .main-outer {
paste this code below it.
background:url(MAIN BACKROUND URL);

( Change it with your MAIN BACKROUND URL )

How to remove attribution ( Powered by Blogger )
Click jump to widget and choose ATTRIBUTION1

Then, you can see this code
  <b:widget id='BlogArchive1' locked='true' title='Blog Archive' type='BlogArchive'>

Change true  to  false

Next, go to layout and edit attribution widget

Now you can remove it.. try it many time if it does not work on the first time.

How to add footer image ?
Search  /* Accents
Add below code above it.
footer {
background: url(FOOTER URL);
background-repeat: no-repeat;

( Change it with your FOOTER URL , 80px can be change with the size and suitability of footer )

To remove gray line between footer and post, search  .footer-outer {
Delete the following code below it
  border-top: $(footer.bevel) dashed #bbbbbb;

Change it with    border-top:none;

Okay, now everything is done !! finally... ^^,

Other thing are up to you on how to customize it.
Do comment if u don't understand or if it doesn't work..
Mind to follow and credit my blog after using this tutor?
Refer to this tutor to help you make a suitable header, post background and footer.

How to make header,post background and footer

5 Comments so far

Assalamualaikum and hello visitor...This is a tutorial on how to make header,post background and footer mine version..

You should own Adobe Photoshop in your PC to follow my tutor..
Download link here  ( as for me, I use CS3 )

  1. Open adobe photoshop
  2. File --> new --> choose width and height --> OK
We will make a header first..
Choose header width according to your blog width.

Choose color (refer the image below) then, click shape --> choose rectangle shape with curve

Then draw first rectangle on the canvas ( like below picture )

Now, let's draw second layer
choose color first

Then, make a new layer and move the new layer below the first layer

Repeat the step to draw third and last layer
( choose color --> make new layer --> move the layer under the previous layer --> Draw shape)

Now we're done drawing the base of header

Other stuff can be added to your header to beautify it.
Click on text to add text
Click on shape to add shape
To add image to your header :
Click file --> Open --> Choose picture that u want --> click ctrl +A on the image and ctrl+C to copy the image --> Paste it on header canvas by clicking ctrl+V

Then save your header by clicking File--> Save as --> Format PNG --> save

Okay, now let's make post background.

Refer below image
Right click on the first header base layer then choose merge down.
Merge down until all header base combined in one same layer

Then, on the layer of header base that had become one, click ctrl +A and ctrl+C to copy

Click file --> New --> choose same width with header and a smaller height

On the new main background canvas click ctrl + V to paste the background that you had copied and adjust it like below picture

Now, your post background are done, you can save it.

Lastly, let's make footer.

File--> New --> width same like header height lower than header..

On the new canvas press ctrl + V to paste the base color of header that you had copy ( same as main background )
Then, click edit--> transform--> flip vertical

Add any text / deco on the footer and you can save it when you're done..
After you done creating your header,post background and footer, upload it here Imgur or photobucket...
Refer to  this tutor on how to add all this stuff that you had made into your blog...

Wednesday, 25 February 2015

Freebies : Blogskin Page

13 Comments so far

Assalamualaikum and hello everyone..Like what I had promised on my previous post, I'm gonna give a blog page for a blogskin as a freebies for you guys...

This is how the skin look

I type the code all by myself and it took me a long time to finish coding it.. So, I hope you guys will appreciate my effort and follow below rule before using this skin..

The Rules :
My first blog skin preview skin... hope you'll like it...don't remove the credit ! don't use this skin as a base code! don't copy anything in this skin without proper credit...
Edit this skin as much as you want as long as the credit remains...

How to use this skin?
Firstly make a new Blog skin blog...Then, revert the blog into classic template (at the bottom of template page) Then, copy and paste the code of this skin into the template code box...
Lastly,preview and save...

How to Edit this skin ?
Click ctrl + F on your keyboard and search for
IMAGEURL then, replace the text with your blogskin thumbnail URL
TITLE then, replace the text with your blogskin name
DESCRIPTION then replace the text with skin description
PREVIEWURL then replace the text with your skin preview URL
POSTURL then replace the text with skin entry URL

Do comment if u are using this skin

Monday, 23 February 2015

My Graphic Arts

Be the first to comment!
Creepy Cake with creepy handwritten

Because I'm hungry right now and want to eat something sweet.. ^^
Assalamualaikum, selamat petang and hi guys and babe...7 more days till SPM result... <(=,=">
In case I have a lot of free time right now before I further my study to a high school later, I have filled some of my leisure time to draw doodles using Paint Tool Sai app..

I'm still in a beginner level of doodle artist since I'm lack of experience in drawing or coloring doodle..There's some doodle that I want to share with you guys and maybe it will become a photo memory when I'm become an expert in graphic designing one day...( well who knows right ? )

Chocolate ice cream with hazel nut and chocolate sauce ;-p

You can take this if you want because I forgot to add watermark

Beginner level of chibi making

Girl wearing 'peplum' dress ( How to spell peplum? )
Latest artwork..

I draw all the doodle using mouse except the last one.. I draw the sketch in a paper first then I redraw the line using paint tool sai...So how? leave your comment okay...Right now I'm planning to draw my own doodle to be use as my blog header...
I also planned to make a new blog page that can be use as a blog skin gallery as a freebies for, coming soon..Okay see you next time... ( waving hand )

Tuesday, 17 February 2015

Customize search box 2

7 Comments so far

This is a tutorial on how to customize search box mine version..Actually many people ask me in for this tutorial...Sorry for the late update..

For template designer : --> layout --> add gadget --> HTML/Javascript

For blogskin : --> template


Copy the code below :

<br /><center>
<form action="/search" id="searchThis" method="get" style="display: inline;">
<input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="background:#FFFFE5; border-bottom-left-radius: 10px 10px;border-top-left-radius: 10px 10px;border: #FFEEEE solid 3px;color: #666666; font-size: 11px;font-family:century gothic; width:135px;padding:3px;padding-left:5px; " type="text" value="Enter some keyword" vinput="" /> <input id="searchButton" style="background:#FFF7F7;border-bottom-right-radius: 10px 10px;border-top-right-radius: 10px 10px; border: #FFEEEE solid 3px;color: #444444; font-size: 11px;font-family:century gothic;padding:2px;width:50px;" type="submit" value="Search" /></form>
</center><br />

For template designer : Paste the code in the HTML/Javascript box...
For blogskin : Paste the code everywhere you want it to appear in your sidebar code...

The Notes :
Blue text : Background and border color
Fuchsia text : Font color
Red text : Width of search box
Purple text : Text on search box and button

Kalau tak faham tanyalah

Sunday, 15 February 2015

Comeback 2015

2 Comments so far

Assalamualaikum dan hai semua...!!
Akhirnya setelah sekian lama menghilang dapat jugak kembali menaip di laman blog kesayanganku ini... \o/ Rasanya agak lewat untuk saya mengucapkan selamat tahun baru 2015 dan tidak terlalu awal untuk saya mengucapkan selamat tahun baru Cina yang akan datang pada 19 haribulan 2 kepada mereka yang meraikannya...

Kenapa dah lama tak online ? Banyak sebenarnya sebabnya...antaranya ialah kekangan internet, Kekangan masa, dan rasa macam tak ada mood nak update blog nie... Disebabkan dah lama tak bukak blog nie ( lebih kurang setahun jugak lah ) banyak code2 yang saya dah lupa.Time nak edit blog pown kena bukak tutorial dari banyak blog...

Untuk 2015 nie saya telah mengubah suai blog saya nie...Tapi sebenarnya banyak lagi yang saya nak edit...Sekarang nie baru siap ubah sikit-sikit tapi, rasa macam belum berpuas hati lagi dengan keadaan blog yang sekarang nie

Insyaallah... Kalau mood untuk buat tutor datang saya akan update.. sekarang ni sedang dalam proses recover and remind segala code2 yang telah dilupakan selama ini...Rasa terkilan sebenarnya bila bukak document laptop nak check ada ke tak code-code penting yang saya simpan sebab memang hampir semua saya dah padam sebab tak nak bagi laptop ni berat... sobs...sobs... Y,Y

Kepada yang ada komen di post2 blog ni terima kasih banyak2...Maaf sangat2 sebab tak dapat nak balas komen anda...Yang ada post kat cbox pown mintak maaf sebab mungkin saya tak terbaca post anda...

So, sementara saya ada masa terluang dalam bulan 2 nie kalau ada kemusykilan mengenai blog bolehlah tanya saya...Kalau tanya pasal blogskin mungkin saya tak berapa tahu sebab dah lama tak guna blogskin...Kalau pasal benda asas yang ada kat template designer mungkin saya boleh tolong...

Azam saya untuk 2015 ni saya nak jadi lebih matang...Tak nak cari musuh dalam dunia blog ni.. Kalau korang ada copy tutor atau re-freebies dari blog ni takpelah saya halalkan..Ilmu kan sepatutnya dikongsikan...

Okay, itu sahaja yang saya nak taip buat masa ni... Tak lama lagi 3.3.2015 result peperiksaan SPM keluar...So, korang tolong doakan saya yer... Doakan saya dapat keputusan yang cemerlang dalam SPM...Aamiin Thanks kepada yang mendoakan... ^^,