Friday, 22 May 2015

Freebies Header,Background and footer

14 Comments so far

Assalamualaikum and hello you all...How was your day..
Okay, since I'm gonna be quite busy starting this Sunday I decided to give this last freebies before I further my study at Matriculation..

I would like to give you guys some customize able header.. What can you customize on this header is adding text on the header.. I had leave some space on the header for you to add text..I also made matching background and footer for the header...

There are 7 set that I made...Random color..

Width: 970 px

Tutorial on how to add it to your blog ( Simple Template / Template designer )

Click on each image to see the actual header, background and footer.








Okay, do leave your comment if you use it.. Hope you like it.. This gonna be the last post before I further my study... I'm gonna miss this blog a lot T,T Unfortunately I don't bring my laptop along with me... sobs sobs..huhu
See you again on my semester break.. ;-)

Wednesday, 20 May 2015

Freebies: Boy Doodle

Be the first to comment!


Assalamualaikum and hello people wherever you are.. ^^, Thanks for visiting this blog...

Okay, today I would like to give a boy doodles as a freebies for you guys.. Actually,I had drawn this doodle a few month ago but, I forgot to publish it here..I colored it with only a base color since I'm quite lazy to do  color mixing and apply shadow.

Before taking this doodle, make sure you followed and obeyed a few rule below first :

  1. Make sure you already follow my blog, follow my blog first if you haven't.
  2. Don't re-draw my doodle and claim it as yours.
  3. Don't re-freebies my doodles.
  4. Use it for personal only, not for commission purpose.
How to get the image URL?
For chrome : Click picture for bigger size > Right click >  Choose (copy image URL)
For mozilla : Click picture for bigger size > Right click >  Choose (copy image location)

How to save the image?
Click picture for bigger size > Right click >  Save image as...










 Do take it if you want.. ^^, Do leave your comment..See you on my next post... :-*

Tuesday, 19 May 2015

Add Comment Count Below Post Title

11 Comments so far

Assalamualaikum and hi everyone... Actually there are a lot of request on this tutorial and I had planned to make this tutor since a long time ago but I'm to lazy to type the tutorial...huhu
This tutor is about how to put the number of comment on a post below your post title ( Floating comments number ).

Okay, let's follow this tutor...
  • 1. Log in your blogger account.
  • 2. Go to Dashboard > Design > Edit HTML.
  • 3. Back up your template. ( Optional = In case you want to save your previous code )
  • 4. Click Ctrl + F and look for  <div class='post-header-line-1'/> code.
  • 5. If this code appeared twice, use the second code.
  • 6. Copy any of below code then, paste it after <div class='post-header-line-1'/> code.

 Style No. 1

 <span class='post-comment-link' style='Float:right;padding:5px;width:200px;letter-spacing:1px;margin-right:20px; margin-bottom:10px;background:#EEEEEE;font:12px century gothic;text-align:center;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(http://media.tumblr.com/tumblr_ll7x3bnod91qi6qow.gif) no-repeat;padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
    </span>

Style No. 2

     <span class='post-comment-link' style='Float:right;border-radius:5px;border:2px solid #FFFFFF;padding:5px;width:200px;letter-spacing:1px;margin-right:20px; margin-bottom:10px;background:#EEEEEE;box-shadow:2px 2px 1px #DDDDDD;background:url(http://1.bp.blogspot.com/-otfzZ5Yz8J8/Uj0wBb6rkKI/AAAAAAAAB5s/q5KCep1RX6M/s1600/polkadotgrey.gif);font:12px century gothic;text-align:center;'>
            <b:if cond='data:blog.pageType != &quot;item&quot;'>
              <b:if cond='data:post.allowComments'>
                <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(http://media.tumblr.com/tumblr_ll7x3bnod91qi6qow.gif) no-repeat;padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
              </b:if>
            </b:if>
        </span>

 Style No. 3

         <span class='post-comment-link' style='Float:right;border-radius:0px 10px 10px 0px;border-left:10px solid #D3E7FF;padding:8px;width:150px;letter-spacing:1px;margin-right:20px;margin-bottom:10px;background:#FFDCE3;font:12px century gothic;text-align:center;'>
                <b:if cond='data:blog.pageType != &quot;item&quot;'>
                  <b:if cond='data:post.allowComments'>
                    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(http://media.tumblr.com/tumblr_ll7x3bnod91qi6qow.gif) no-repeat;padding-left:20px;'><b:if cond='data:post.numComments == 0'>No Comment<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment<b:else/><data:post.numComments/> Comments</b:if> </b:if></a>
                  </b:if>
                </b:if>
            </span>


 Style No. 4

<span class='post-comment-link' style='Float:right;box-shadow:0px 3px 4px #F4DFD0;padding:5px;width:150px;letter-spacing:1px;margin-right:20px;margin-bottom:10px;background:#F4DFD0;background:url(http://24.media.tumblr.com/tumblr_mb6hlsZL5r1rhin2xo1_250.jpg);font:12px century gothic;text-align:center;'>
                <b:if cond='data:blog.pageType != &quot;item&quot;'>
                  <b:if cond='data:post.allowComments'>
                   <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' ><b:if cond='data:post.numComments == 0'>0 Comment<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment<b:else/><data:post.numComments/> Comments</b:if> </b:if></a>
                  </b:if>
                </b:if>
            </span>

......... PREVIEW AND SAVE.........
I HAD UPDATED THE CODE SO, THE ERROR HAD BEEN FIXED

The Notes :
Orange Text : Color code Find it Here.
Red Text : Width of the comment count.
Blue Text : URL of the small icon beside comment count. HERE
Purple Text : URL off the background image. HERE
Fuchsia Text : Text display when there's no comment on a post.
Green Text : Text display when there's one comment on a post.
Turquoise Text : Text display when there are more than one comment.

Okay, do try it...That's all...See you next time ^^, Do comment if you think this tutor is helpful...

Note : I'll be very busy later... So, I don't accept any request from you guys.. I hope you all can understand my situation.

Thursday, 14 May 2015

Sambung belajar ( Matrikulasi atau Diploma )

17 Comments so far


Assalamualaikum dan hai semua...Okay harini nak cerita pasal pilihan melanjutkan pelajaran..

Keputusan matrikulasi dan UPU dah keluar pada 13 April 2015 dan 8 Mei 2015.

Alhamdulillah...Bersyukur sangat-sangat sebab saya dapat kedua-dua tawaran tuh... Untuk matrik saya dapat peluang menyambung pelajaran di Kolej Matrikulasi Negeri 9...

Untuk tawaran UPU iaitu tawaran ke Institut Pengajian Awam...Saya dapat tawaran menyambung pelajaran di UiTM Kuala Pilah, Course yang saya dapat adalah Teknologi Makanan..

Masa baru dapat tawaran UPU tu memang dilema lah sebab tak tau nak pilih mana satu... Setiap pilihan tu ada kelebihan dan kekurangan masing-masing..Saya tak dapat asasi..huhu T,T kalau dapat asasi memang takkan ku lepaskan peluang itu..

Okay jadi, untuk membuat pilihan antara dua tempat tu banyak aspek yang saya dah kaji dan bandingkan.
Antara aspeknya ialah :

1.   Tempoh pengajian
Matrikulasi ni tempohnya singkat ( 1 tahun sahaja ) , kalau diploma tempohnya lama ( 3 tahun ).
=  Kelebihan kepada matrik.

2.   Tahap kesukaran
Oleh kerana tempoh matrik singkat, ditambah dengan subjeknya yang sukar iaitu sains tulen matrik dianggap lebih sukar dari diploma. Course diploma yang saya ambil nampak lebih mudah dan tidak terlalu membebankan.
=  Kelebihan kepada Diploma.

3.  Kos pengajian
Untuk Matrik, kosnya kurang membebankan hanya RM580 bagi 2 semestar (1 Tahun) + Elaun sebanyak RM1250 untuk setahun.
Bagi Diploma, tiada biasiswa diberikan perlu buat pinjaman untuk sambung belajar ( Hutang lebih belasan ribu untuk 3 tahun ).
=  Kelebihan kepada Matrikulasi

4.  Sijil Matrik VS Sijil Diploma
Sijil Matrik tidak laku ( tidak boleh digunakan untuk mencari kerja ).
Sijil Diploma laku kerana boleh digunakan untuk mencari kerja.
=  Kelebihan kepada Diploma.

UPDATE : Sijil matrikulasi telah laku mulai tahun 2016 tetapi, bukan senang nak dapat kerja dengan kelulusan matrik sahaja.

5. Jarak tempat belajar ke rumah
Lebih kurang sama jaraknya, dua-dua di Negeri 9.

Sebenarnya banyak lagi aspek pemilihan...Tapi, dah lupa..huhu
Jadi, apakah pilihan saya ??

Saya pilih Matrikulasi.. Sebabnya, 
  1. Nak dapat Ijazah cepat. ( Nak kahwin cepat ) hehe.
  2. Tak nak hutang sebab masih muda ( Takut bimbang pasal kos )
  3. Nak dapatkan biasiswa untuk sambung Degree ( Boleh dapat kalau pointer lebih 3.7 )
  4. Nak rehat dulu selepas 1 tahun ( Tamat Matrik )
Jadi, 24.5.2015 ni saya akan pergi ke Kolej Matrikulasi Negeri 9 untuk mendaftar. Harap-haraplah ini keputusan terbaik untuk diri saya...Mohon jasa baik kalian untuk mendoakan kejayaan saya... Semoga Allah memberikan kejayaan kepada diriku, keluargaku, sahabatku, dan seluruh umat Islam...Aaminn

Monday, 4 May 2015

How to Make Cute Link List With Title

12 Comments so far


Assalamualaikum and hello peeps...See you again with a brand new tutorial..Today's tutorial is about how to make cute  tutorial / freebies list with title.

Okay, here we go...

  • 1. Firstly, Log in your blogger account.
  • 2. Go to Dashboard > Page > Make new page / Edit already created page.
  • 3. Click on HTML   
  • 4. Copy below code and paste it on the HTML section.
<style>
.non-semantic-protector { position: relative; z-index: 1; }
.tape {
 font:18px Tahoma !important;
 width: 390px;
 position: relative;
 background: #c2deff;
 color: #FFFFFF;
 text-align: center;
 padding: 5px 3px;
 margin: 15px auto 0px;
}
.tape:before, .tape:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1.0em;
 border: 1.0em solid #b7d8ff;
 z-index: -1;
}
.tape:before {
 left: -1.8em;
 border-right-width: 1.7em;
 border-left-color: transparent;
}
.tape:after {
 right: -1.8em;
 border-left-width: 1.7em;
 border-right-color: transparent;
}
.tape .tape-content:before, .tape .tape-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #9cc9ff transparent transparent transparent;
 bottom: -1.0em;
}
.tape .tape-content:before {
 left: 0;
 border-width: 1.1em 0 0 0.9em;
}
.tape .tape-content:after {
 right: 0;
 border-width: 1.0em 0.9em 0 0;
}
a.aa {
font:11px century gothic;
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
color:#222222;padding:3px;
background:#FFFFD9;
width:355px;display:block;
border-bottom:2px solid #E1F3FF;
border-right:2px solid #E1F3FF;
border-left:2px solid #E1F3FF;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

a.aa:hover{
background:#E1F3FF;
}
</style>

<div class="non-semantic-protector">
<h1 class="tape">
   <b class="tape-content">POST CATEGORY</b>
</h1>
</div>
<center>
<div class="bc">
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
</div>
</center>

<div class="non-semantic-protector">
<h1 class="tape">
   <b class="tape-content">POST CATEGORY</b>
</h1>
</div>
<center>
<div class="bc">
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
</div>
</center>

<div class="non-semantic-protector">
<h1 class="tape">
   <b class="tape-content">POST CATEGORY</b>
</h1>
</div>
<center>
<div class="bc">
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
<a class="aa" href="http://kawaiilady.blogspot.com/">TITLE POST</a>
</div>
</center>
<br />


The Notes :
Red Text : Background color.
Fuchsia Text : Text color.
Blue Text : Border color.
Orange Text : Link Category.
Purple Text : Post Link.
Yellow Text :  Post Title.

  • 5. Click on Compose 
  • 6. Then, Publish your page.
Okay, done...Comment if you're using this tutorial.Comment if you don't understand.

Friday, 1 May 2015

Auto Read more with Thumbnail

6 Comments so far


Assalamualaikum and Hello guys...Tadi ada orang request tutorial pasal post summary with thumbnail..

Thanks for the request,Tiara...
Okay,let's get started...
  • 1. Log in your blogger account.
  • 2. Go to Dashboard > Design > Edit HTML.
  • 3. Back up your template. ( Optional = In case you want to save your previous code )
  • 4. Click ctrl + F and look for </head> code.
  • 5. Add the Read More code below right before that line.

<!-- Auto read more script Start -->
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 150;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->


  • 6. After that, find this line: <data:post.body/>
  • 7. Delete the code and replace it with below code

<!-- Auto read more Start -->
<!-- http://www.BloggerSentral.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

If you want to use image instead of the read more text :

Replace Read more ...  with :

<img src='IMAGE URL' style='border:none;box-shadow:0px 0px #ffffff;margin-top:10px;margin-right:10px;'/>

The Notes :

Blue Text : Specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
Red Text : Specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
Fuchsia Text : Specify the thumbnail height.
Green Text : Specify the thumbnail width.
Orange Text : You can change the words “Read more” with your own.


Okay, Done... Preview and save
Do comment...