Monday, 4 May 2015

How to Make Cute Link List With Title

12 Comment(s) 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 Comment(s) 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...

Tuesday, 28 April 2015

Draw doodle Eye using Paint Tool Sai

10 Comment(s) so far

Assalamualaikum...Hi ! How are you doing today? Okay, this is a post of a tutorial on how to draw doodle / chibi eye using Paint Tool Sai Software..I decided to make this tutor because in my opinion drawing doodle eye is the hardest step in drawing doodle..

First of all, you should own Paint Tool Sai application. Here where you can download it.
Download Here 

  • 1. Firstly, open your Paint Tool Sai application.
  • 2. Click File --> Open --> Open doodle that you want to add eye
  • 3. Make a new layer for eye
  • 4. You can re-name the layer by clicking twice on the layer name.
  • 5. Choose Marker with a big size and choose color of the eye.( I choose dark brown )
  • 6. Draw two big dotted on the doodle face.

  • 7. Make a new layer
  • 8. Move the layer below previous layer
  • 9. Draw white circle around the dark chocolate eye

  • 10. Now, we gonna draw the eye line
  • 11. Make new vector layer ( Refer below picture )
  • 12. Choose curve tool
  • 13. Choose size

  • 14. Draw line around the eye like below image
  • 15. Use pressure tool to thinning every corner of the line (Just click on some point of the line then move the cursor to the right or left to increase or decrease the size)
  • 16. You can also add eyelashes to the doodle (I don't add it because I drew boy chi bi)


  • 17. Next, make new layer --> Choose lighter brown color --> Use brush tool ( Min size 50%, Density 50% ) --> Draw curve like below


  • 18. Now, let's draw lens on the eye. Make new layer --> Choose more lighter brown --> Use AirBrush tool ( Min size 1% , Density 40% ) --> Draw circle above the curve.


  • 19. Make new layer --> Choose white color --> Use Marker Tool --> Draw 3 dotted on the eyes with different size.

  • 20. Finally, we had done drawing the eyes... File --> Save as.. to save your doodle..

Okay, that's it for today's tutorial... If you have any inquires or tutorial request on doodle drawing just comment on this post.. See you later.. (^^,)

Sunday, 26 April 2015

Freebies : Kawaii Lady

7 Comment(s) so far


Assalamualaikum, Hello world ;) Okay, on my previous post I had stated that I will post doodle as a freebies for you guys... So, this is the first collection that I would like to give.

This is a doodle of the anime character for this blog. Named Kawaii Lady. I make this doodle specially for my blog reader and follower as a thank you gift for all of you.. ^,^

Before taking this doodle, make sure you follow 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...







Actually, I only change the colour of the clothes only XD Sorry for that...I hope you love it although the eyes are not-quiet-successfully-drawn..Bye-bye see you later ( waving hand )

Chit Chat Time ;-)

4 Comment(s) so far

Assalamualaikum, selamat sejahtera, Hello, Annyeonghesayo, Konichiwa, Bonjour, Holla peeps !!!
I'm back ( finally) ada sesiapa yang rindu saya tak kat sini ? (^.^,) Okay, tak ada.. u,u

Saya masih dalam fasa holiday paanjannng sekarang ni ( cuti after SPM 2014 ) dah dekat 6 bulan kot cuti dari 25 November 2014..Tak kerja ke? Hurm..Takpon malas. Bukan malas kerja tapi malas nak cari kerjalah.. =,='

Best ke cuti? Tak best pon sebab duduk rumah jer ( No vacation or function at all ) bosan pon ada..
Kau ni time sekolah dulu kata sekolah bosan, tak sabar nak habis sekolah...Sekarang dah duduk rumah pon kau rasa lifeless.. \o/ Biasalah...manusia memang macam ni bila ada tak suka bila tak ada rindu...kan?

So,bila saya nak sambung belajar? InsyaAllah kalau tiada aral melintang bulan 5 nanti saya sambung belajar...
Belajar kat mana? Hurm, tak tahu lagi sebenarnya Ha! saya nak cakap yang saya dapat offer matrikulasi..Alhamdulillah aku dapat tawaran ke Kolej Matrikulasi Negeri 9...Tapi, tak confirm lagi terima atau tak sebab nak tunggu result UPU dulu...

Masa saya tak berblogging saya guna masa tu untuk melukis doodle guna Paint Tool Sai...Banyak yang saya dah belajar tentang lukis doodle ni dari doodler yang pro..

Nak tengok tak hasil tangan ku sendiri?

Ha, Inilah dia ! Teknik warna tu berubah-ubah.. (Klik untuk besarkan)

Saya ada jugak buat freebies doodle nak kasi kat korang...Nantilah saya post yer ^^, banyak sebenarnya awaiting post yang akan dipost lepas ni..Jadi, nantikan lah yer ( coming soon )

Okay, puas dah cakap sorang-sorang ? cukuplah kot sepatah dua kata untuk membuktikan kewujudanku di laman blog ini..Chaw dulu.. Babai... (Lambai tangan)

Saturday, 28 March 2015

40 Pelajaran oleh Nabi Muhammad SAW

2 Comment(s) so far


01. Menahan diri daripada tidur diantara waktu fajar dan ishraq, asar dan maghrib, maghrib dan isya.
02. Menghindarkan diri mendekati orang yang mempunyai bau yang kurang menyenangkan.
03. Jangan tidur diantara manusia yang berkata buruk sebelum tidur.
04. Jangan makan atau minum menggunakan tangan kiri.
05. Jangan memakan kembali makanan yang telah dikeluarkan dari celah gigi anda.
06. Jangan mematah-matahkan jari anda.
07. Periksa kasut anda sebelum memakainya.
08. Jangan mendongak ketika sedang solat.
09. Jangan meludah didalam tandas.
10. Jangan membersihkan gigi anda dengan arang.
11. Duduk ketika sedang memakai seluar/kain
12. Jangan memecahkan benda yang keras/sukar menggunakan gigi anda.
13. Jangan meniup makanan yang sedang panas, sebaliknya anda boleh mengipasnya.
14. Jangan mencari kesalahan orang lain.
15. Jangan bercakap diantara waktu azan dan iqamat.
16. Jangan bercakap didalam tandas.
17. Jangan berkata dongeng(palsu) tentang rakan anda.
18. Jangan mengganggu ketenteraman rakan anda.
19. Jangan memandang belakang secara kerap apabila sedang berjalan.
20. Jangan menghentakkan kaki ketika sedang berjalan.
21. Jangan mencurigai tentang rakan anda.
22. Jangan menipu sepanjang masa.
23. Jangan menghidu makanan ketika anda sedang makan.
24. Berkata dengan jelas, agar orang lain boleh faham apa yang anda katakan.
25. Hindarkan berjalan sendirian.
26. Jangan membuat keputusan sendiri, tapi rujuk pada yang arif.
27. Jangan bangga(riak) akan diri sendiri.
28. Jangan mencela makanan anda.
29. Jangan bermegah(sombong).
30. Jangan menghalau pengemis.
31. Layan tetamu anda dengan ikhlas dan baik.
32. Sabar ketika dalam kesusahan.
33. Membantu dengan tujuan yang baik.
34. Muhasabah diri dan bertaubat.
35. Berbuat baik pada mereka yang berbuat jahat padamu.
36. Berpuas hati dengan apa yang anda ada saat ini.
37. Jangan tidur berlebihan-ini akan menyebabkan penyakit lupa.
38. Bertaubat sekurang-kurangnya 100 kali sehari (istighfar).
39. Jangan makan dalam gelap.
40. Jangan makan dengan mulut yang penuh.


 Hantarkan pada yang lain, untuk mengingati mereka. Semoga Allah merahmati kamu ! Amin :)