Thursday, 29 November 2012

TUTORIAL: Sidebar Title

Hi There...

Selamat Malam. Kali ni mau share lagi tutorial untuk kamurang. Hihi... Hari tu ada blogger yang request macam mana buat sidebar title macam yang ada di blog saya sekarang ni... Sebenarnya simple saja ne. Hehe... 


(sidebar title tu macam ni bentuknya ^ ^)

 *New Blogspot Dashboard :) 

1. More Options > Template > Edit Html > Proceed.
2. Tekan F3 untuk cari code :
.sidebar h2 {

3. Then, delete anak-anak code di bawah .sidebar h2 { .
Bagi yang belum edit, anak-anak code tu macam ni:
 margin: 1.6em 0 .5em;
 padding: 4px 5px;
 background-color: $sidebarTitleBgColor;
 font-size: 100%;
 color: $sidebarTitleTextColor;  
-dan kalau ada code sidebar title sebelum ni, delete jea.
- Jangan delete simbol ( } ) nii yeaa.. heehe

4. Copy Code di bawah ni dan Pastekan  di bawah code .sidebar h2 {
 -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
margin: 1.6em 0 .5em;
padding: 5px;
background: #FFFFFF;
border-bottom: 4px solid #FFFFFF;
text-align: center;
font-size: 14px;
font-family: Century Gothic;
5.  Customize lah ikut pilihan kamu :)
 * Warna Background
 * Warna garisan di bahagian bawah.
>>CODE WARNA boleh cari SINI

6. Tekan Preview dulu, kalau  takda ERROR dipersilakan SAVE ! hihi

Menjadi takk? Jangan Lupa letak Komen ehhh ^ ^






Wednesday, 28 November 2012

Tutorial : Letak Button Follow Twitter Di Blog

Hi There bloggers :)


Kali ni nak shared tutorial berkenaan dengan Twitter lah pulak. Hihi.. Mesti ramai yang da buat tutorial ni kan? But nevermind, saya tetap nak shared juga. Hehe.. Mana tau ada new blogger yang tak tau kan?. 
Siapa ada Account Twitter di sini? Angkat Jari laju-laju.. hehe... Tutorial tu macam ni...tengok di bawah ne ehh... : >


1. Pergi ke link ini --> KLIK SINI

2. Letak Username Twitter kamu... Tengok gambar di bawah ni kalau tak faham..


3. Copy code yang ada anak panah tu...

4. Blogger.com > Layout > Add a gadget > Html/Javascript

5. Pastekan code yang kamu copy tadi di ruangan Html/Javascript 

6. Tekan Save !

Menjadi kaa??? Komen sikit... Hihi.. jangan lupa follow saya ehh...

Tuesday, 27 November 2012

Freebies : Template Denim Original (Non Edit )

Hi There Bloggers. :D


Perasan tak dalam dashboard blogspot yang baru ni template Washed Denim sudah takda?. Mest ramai yang sibuk tercari-cari ke mana hilangnya template ituu, kan? HAHA :p Ok saya nak bagi Freebies Original codes Template Denim nii.. Yang NON EDIT punya. Sebelum tu, saya da minta kebenaran dari adik Faqihah Husni untuk copy codes template denim ni.


Sebelum tu...
- Tolong BACK UP Template kamu yang sebelumnya.
Template > Edit HTML > Proceed > Tick Expand Widgets Template > Copy semua codes > Paste di mana-mana (Notepad/MOW/New Post) > Save.

Cara nak guna code Denim
1. Blogger.com > Dashboad > Template > Edit Html > Proceed
2. Tolong Delete semua code template kamu yang sebelum ni.
3. Copy Codes Template Washed Denim yang ada di bawah ni.
4. Kemudian, Pastekan Codes tu di dalam ruangan edit tu.
5. Tolong Preview dulu, kalau takda Error boleh SAVE !

 Kalau ada WARNING, kamu just click KEEP WIDGET.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Denim
Designer: Darren Delaye
URL:      www.DarrenDelaye.com
Date:     11 Jul 2006
-----------------------------------------------
*/

/* Variable definitions
   ====================
 <Variable name="bgColor" description="Page Background Color"
           type="color" default="#efefef" value="#efefef">
 <Variable name="textColor" description="Text Color"
           type="color" default="#333333" value="#333333">
 <Variable name="linkColor" description="Link Color"
           type="color" default="#336699" value="#336699">

 <Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="transparent" value="transparent">

 <Variable name="mainBgColor" description="Main Background Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="borderColor" description="Border Color"
           type="color" default="#cccccc" value="#cccccc">
 <Variable name="dateHeaderColor" description="Date Header Color"
           type="color" default="#999999" value="#999999">

 <Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
           type="color" default="#ffd595" value="#ffd595">
 <Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color"
           type="color" default="#333333" value="#333333">

 <Variable name="bodyFont" description="Text Font"
           type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">
 <Variable name="headerFont" description="Page Header Font"
           type="font" default="normal normal 210% Verdana, Arial, Sans-serif;" value="normal normal 210% Verdana, Arial, Sans-serif;">

   <Variable name="startSide" description="Start side in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="End side in blog language"
             type="automatic" default="right" value="right">
*/

body {
  background: $bgColor;
  margin: 0;
  padding: 0px;
  font: x-small Verdana, Arial;
  text-align: center;
  color: $textColor;
  font-size/* */:/**/small;
  font-size: /**/small;
}
a:link {
  color: $linkColor;
}
a:visited {
  color: $linkColor;
}
a img {
  border-width: 0;
}

#outer-wrapper {
  font: $bodyFont;
}

/* Header
----------------------------------------------- */
#header-wrapper {
  margin:0;
  padding: 0;
  background-color: $headerCornersColor;
  text-align: $startSide;
}

#header {
  width: 760px;
  margin: 0 auto;
  background-color: $headerBgColor;
  border: 1px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}

h1.title {
  padding-top: 38px;
  margin: 0 14px .1em;
  line-height: 1.2em;
  font-size: 100%;
}

h1.title a, h1.title a:visited {
  color: $headerTextColor;
  text-decoration: none;
}

#header .description {
  display: block;
  margin: 0 14px;
  padding: 0 0 40px;
  line-height: 1.4em;
  font-size: 50%;
}
                                                         
/* Content
----------------------------------------------- */

.clear {
  clear: both;
}


#content-wrapper {
  width: 760px;
  margin: 0 auto;
  padding: 0 0 15px;
  text-align: $startSide;
  background-color: $mainBgColor;
  border: 1px solid $borderColor;
  border-top: 0;
}
#main-wrapper {
  margin-$startSide: 14px;
  width: 464px;
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
  margin-$endSide: 14px;
  width: 240px;
  float: $endSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

/* Headings
----------------------------------------------- */
h2, h3 {
  margin: 0;
}

/* Posts
----------------------------------------------- */
.date-header {
  margin: 1.5em 0 0;
  font-weight: normal;
  color: $dateHeaderColor;
  font-size: 100%;
}
.post {
  margin: 0 0 1.5em;
  padding-bottom: 1.5em;
}
.post-title {
  margin: 0;
  padding: 0;
  font-size: 125%;
  font-weight: bold;
  line-height: 1.1em;
}
.post-title a, .post-title a:visited, .post-title strong {
  text-decoration: none;
  color: $textColor;
  font-weight: bold;
}
.post div {
  margin: 0 0 .75em;
  line-height: 1.3em;
}

.post-footer {
  margin: -.25em 0 0;
  color: $textColor;
  font-size: 87%;
}

.post-footer .span {
  margin-$endSide: .3em;
}

.post img, table.tr-caption-container {
  padding: 4px;
  border: 1px solid $borderColor;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
  margin: 1em 20px;
}
.post blockquote p {
  margin: .75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
  margin: 1em 0;
  color: $dateHeaderColor;
}
#comments h4 strong {
  font-size: 110%;
}
#comments-block {
  margin: 1em 0 1.5em;
  line-height: 1.3em;
}
#comments-block dt {
  margin: .5em 0;
}
#comments-block dd {
  margin: .25em 0 0;
}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%;
}
#comments-block dd p {
  margin: 0 0 .75em;
}

.deleted-comment {
  font-style:italic;
  color:gray;
}

.feed-links {
  clear: both;
  line-height: 2.5em;
}

#blog-pager-newer-link {
  float: $startSide;
 }

#blog-pager-older-link {
  float: $endSide;
 }

#blog-pager {
  text-align: center;
 }

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
 margin: 1.6em 0 .5em;
 padding: 4px 5px;
 background-color: $sidebarTitleBgColor;
 font-size: 100%;
 color: $sidebarTitleTextColor;
}
                                                         
.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar li {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: .5em;
  padding-$startSide: 15px;
  text-indent: -15px;
  line-height: 1.5em;
}
.sidebar {
  color: $textColor;
  line-height:1.3em;
}
.sidebar .widget {
  margin-bottom: 1em;
}

.sidebar .widget-content {
  margin: 0 5px;
}

/* Profile
----------------------------------------------- */
.profile-img {
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $borderColor;
}

.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight: bold;
  line-height: 1.6em;
  font-size: 78%;
}

.profile-datablock {
  margin:.5em 0 .5em;
}

.profile-textblock {
  margin: 0.5em 0;
  line-height: 1.6em;
}

                                                         
/* Footer
 ----------------------------------------------- */
#footer {
  clear: both;
  text-align: center;
  color: $textColor;
}

#footer .widget {
  margin:.5em;
  padding-top: 20px;
  font-size: 85%;
  line-height: 1.5em;
  text-align: $startSide;
}
]]></b:skin>
  </head>

  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

  <div id='outer-wrapper'><div id='wrap2'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Hanis fanfic (Header)' type='Header'/>
</b:section>
    </div>

    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'/>
      </div>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
      </div>

      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>

    </div> <!-- end content-wrapper -->

    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>

  </div></div> <!-- end outer-wrapper -->
  <b:include data='blog' name='google-analytics'/>
</body>
</html>


Jangan segan-segan nak tanya kalau ada yang tak faham eh ? :) Komen tauu ~
Tolong Creditkan kepada adik Faqihah Husni Adik Hanis eh :) 




Freebies Cute Icon Newer & Older post

Hi There bloggers sekalian :) Hihi


Tadi masa search dekat google, sandra jumpa beberapa Icon yang comel-comel. Jadi nak share kan lah untuk kamurang ! Hehe Sharing is Caring. Tapi Icon ni saya creditkan kepada : (photobucket/glitter). 



     

    

   

     

         

     

      



TUTORIAL : Scroll Bar (Macam sandra)

Hi There pretty and handsome :P Hihi


Hari ni nak share tutorial. Semalam ada satu blogger yang tanya tentang tutorial ni. So, without wasting any time mari buat ! Hihi.. . Tutorial ni pasal scroll bar di blog. Nak tahu macam mana bentuk dia? Meh tengok gambar di bawah ne..  heehe

(ni dia rupa sebenar scroll bar yang kurus kering! haha )



*New Blogspot Dashboard :) 
1. More Options > Template > Edit Html > Proceed.
2. Tekan F3 untuk cari code :
/* Header

3. Copy code di bawah ni dan PASTE di ATAS code /* Header tadi tuu.
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track-piece  {
background-color: #FFFFFF;
border: 3px solid #FFFFFF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}


4. Customize code di atas tu ikut pilihan kamu.
*** Code warna untuk background scroll bar. ( Boleh ambil code warna di SINI)

5. Tekan Preview dulu . Kalau takda Error boleh SAVE.. :) 
P/s: Setahu saya Pengguna Google Chrome ja yang boleh tengok scroll bar macam ni. :) So, jangan terkejut pulak lah ya kalau tutorial ni tak nampak kalau kamu guna selain Google Chrome. 

Tanya eh kalau takk jadi. Kalau Menjadi letak lah komen. HAHA :)


Friday, 16 November 2012

Quote : Life need move on!

Hi There.



Another Quote. Hehe... I made that doodle. What do you think ? Haha.. I always love quotes. Yeah. Their are wonderful and Inspiration for me to keep alive. haha... Now the saying at the picture above was made originally by Me. HAHA.. 

All know that everybody do make mistakes in their life including me.  We are not Perfect! Some peoples had their worst past in their life and some were good in handling whatever comes to them. But, life is to short to think about it. STOP THINKING AND REGRETTING ABOUT YOUR PAST AND MISTAKES! How wonderful is it if there is a Life time machine. You can undo and Redo your life. ^ ^ But unfortunately there is NO! 

I dedicate this Quote to myself. Yeah. I am the one who stuck in my past and Mistakes. Everyday I reminder myself to Forget and Forgive my own mistakes. There is no Point living with all the worst memories. I do pray to God for giving me strength in my life. Sometimes when I am all alone I remembered all about the past. Then all of a sudden my tears fall.  =.=

I know everything happens for a reason. God had already planned our life. So, lets us avoid from doing any mistakes even  it is the  hardest thing to do. Do think before speak or doing something that will later bring you in trouble for a life time. :)

Oh. I think I'm enjoying writing this entry. This was I feel right now. I am glad that I have my little blog to express my feeling. Thanks for reading guys. I hope you enjoyed my writing. HUH. In the mode of : SAD :( 

ADIOS -



Monday, 5 November 2012

Freebies: Vintage Background

Hi There and Good Morning :P

Pagi-pagi nak bagi Freebies. Kali ni bukan sandra yang buat. Just Google ja tadi :) Kalau suka background ni jom ambik. Free ja. Haha...


http://4.bp.blogspot.com/-CHkSB6f3f0w/TkPM7xeaBGI/AAAAAAAABMQ/Xa9_S8TSx1o/s1600/vintagebackgroundblue.png

http://4.bp.blogspot.com/-RSG_bmmPFpw/TkPM86MAioI/AAAAAAAABMY/9XHA1Y04AI0/s1600/vintagebackgroundpeace.png

http://1.bp.blogspot.com/-QydSeoMf_AQ/TkPM9s053dI/AAAAAAAABMg/bzbd-GgGUXQ/s1600/vintagebackgroundpurple.png

http://2.bp.blogspot.com/-izuksavaB5w/TkPM8ZEODnI/AAAAAAAABMU/pxetsLBK0iA/s1600/vintagebackgroundgreen.png




Bye-bye :)

Saturday, 3 November 2012

Tutorial : Sidebar Background + Border

Hi There  :)


Tutorial again. Hehe.. Nampaknya hari ni post tutorial ja la yea. Haha.. Nampak kan gambar dia atas tu. Ni tutor macam mana mau buat sidebar ada background. Selalu tu warna putih ja kan ? Nah, sekarang mari bagi dia baju sikit. HAHAHA :p Tutor ni untuk template denim :)

*New Blogspot Dashboard :) 
1. More Options > Template > Edit Html > Proceed.

2. Tekan F3 untuk cari :  .sidebar .widget {

3. Di bawah code  .sidebar .widget {  tu ada code macam ni kan,
margin-bottom: 1em;
}


4. Copy and Replace ja code tu dengan code ni :
margin:1em;
padding:10px;
font-size: 95%;
background:url(URL BACKGROUND SINI);
border-radius:5px;
border:1px dotted  #000000;
line-height:1.9em;
}


*Ubah code yang saya warnakan tu ikut pilihan kamu.

5. Preview dulu, Kalau takda Error boleh save!




Tutorial : Shadow Around Blog

Hi There and Good Morning !

Want to share some tutorial. Tutor ni untuk pengguna Template Denim saja. Template lain saya tida tau lah kalau bole ka tidak. Pernah nampak tak blog yang around blog dia ada shadow? Nak buat juga? Hehe.. Mari ikut tutor ni. Semoga Berjaya eh! Hihi



*New Blogspot Dashboard :) 
1. More Options > Template > Edit Html > Proceed.

2. Tekan F3 untuk cari code : #content-wrapper {

3. Sudah jumpa ? Now, Copy code di bawah ni dulu.


-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-moz-box-shadow: 0 0 15px 5px #FFFFFF;
-webkit-box-shadow: 0 0 15px 5px #FFFFFF;
4. Paste kan code di atas tu di BAWAH code  #content-wrapper { 

5. Customize code tu ikut pilihan kamu.

6. Tekan Preview dulu. Kalau takda Error boleh lah Save.