Wednesday, 5 December 2012

Tutorial: Letak widget Instagram di blog

Hi There pretty and handsome :)


Nak share satu tutorial ni untuk kamurang!. Siapa ada account Instagram di sini ? Mesti ramai yang da sign up kan. Instagram ni boleh letak dekat blog. Jom follow tutorial ni. Sebelum tu, bentuk widget  tu macam di bawah ni : 

Follow @sandramiyus


<center><iframe src="http://widget.stagram.com/in/id_instagram?s=100&w=2&h=2&b=1&p=5" allowtransparency="true" frameborder="0" scrolling="no" style="border:none;overflow:hidden;width:230px; height: 227px" ></iframe>
<center><a class="followgrambutton" username="id_instagram" rel="232149750" href="http://followgram.me/id_instagram">Follow @id_instagram</a><script type="text/javascript" src="http://external.followgram.me/v1/follow/js/"></script></center></center>


Untuk Template Designer

1. Blogger > Layout > Add a gadget > HTML/Javascript
2. Copy Codes di atas dan paste di ruangan HTML/Javascript
3. Ubah  id_instagram dengan id akaun kamu.
4. Save


Untuk Classic Template

1. Blogger > Template
2. Cari ruangan yang sesuai untuk kamu letak widget ini
3. Ubah  id_instagram dengan id akaun kamu
4. Save

Senang kan? Jom letak widget ni di blog. Rugi la kalau ada account Instagram tapi tak di kongsi bersama. hehe... Jangan lupa follow saya yahh ^ ^ 
Letak komen yep !

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.



Thursday, 25 October 2012

FREEBIES: Strips Background

Hi There pretty and handsome. haha :P


Hari ni nak kasi free freebies strips background. Semua nya saya buat sendiri dengan bantuan dua tangan dan mata. Haha.. Oke laa siapa yang berminat nak ambil, sure. Ambil lah. Saya bagi free. Hihi. Saya buat banyak colours. It just a simple background. :)

Cara nak ambil Url : Ctrl+C untuk ambil url image.


 
http://2.bp.blogspot.com/-2czQk4eXVBY/UIj6tVJE7PI/AAAAAAAABjg/S91FsMdoaV0/s1600/sandra+blue.png

  
http://2.bp.blogspot.com/-R0AkiVicvvs/UIj6v3hGXLI/AAAAAAAABjw/Yj11iGAWO0I/s1600/sandra+green.png

http://1.bp.blogspot.com/-_8WJD3QYy1k/UIj6ww7ilyI/AAAAAAAABj4/oaDJ-BjCQZI/s1600/sandra+grey.png

 
http://4.bp.blogspot.com/-N38pQanMB1k/UIj6u3hWEjI/AAAAAAAABjo/5T2fIAiduHo/s1600/sandra+brown.png

 
http://2.bp.blogspot.com/-j4uKClLAkNo/UIj6y9jKcaI/AAAAAAAABkI/0bsSE6enK2M/s1600/sandra+pink.png

http://3.bp.blogspot.com/-8mW95HyvsF4/UIj6x1IMvjI/AAAAAAAABkA/OznxX87WhWo/s1600/sandra+orange.png

http://4.bp.blogspot.com/-eEby61DL9sk/UIj6z0Gr5AI/AAAAAAAABkQ/RQPT89vFTt8/s1600/sandra+purple.png


Tolong credit dan komen lepas ambil yea. Hehe
PEACEEEEE !



Friday, 14 September 2012

Tips: Hiaskan Blog :)

Hi There and selamat petang. 



Jom baca ! Saya nak share macam mana nak mencantikkan blog. Saja je mau share biarpun blog sandra tidak lah cantik meletup mana pun. Hehe.. Manalah tau kan ada blogger baru yang berminat mau baca.. 
Semua ni berdasarkan pendapat dan pengalaman sandra ja sebagai seorang blogger.

1. Template 
Template ni benda asas yang perlu kalau nak buat blog kan. Seboleh-boleh nya pilihlah template blog yang sesuai dan senang nak edit. Selalu nya orang akan guna template blogskin untuk hasil blog yang cepat dan cantik. Tapi blogskin ni susah sikit kalau nak edit bagai.. Berbanding dengan template Washed denim dan Template Designer yang senang nak edit. 

2. Tema warna dan Background
Blogger selalu nya akan pilih tema warna yang light contoh nya pink,biru, purple,hijau dan lain-lain. Jarang lah orang gunakan tema warna blog hitam. Mungkin ada tapi tak banyak. Kalau nak pilih background  seboleh-bolehnya jangan pilih yang corak crowded sangat sampai lambat nak loading. Just pilih warna yang soft dan sesuai dengan tema warna kamu.  

3. Header
Header tuu kira benda penting juga lah kalau dalam blog ni. Kalau takda header nampak macam lain ja blog kan. Header pun memainkan peranan yang penting juga tauu ! HHE . Letak lah header di blog biarpun header tu simple. 

4.  Tuliasan (FONT)
Di nasihatkan supaya tidak memilih font yang bertulisan sambung yang 5 minit baru faham maksud huruf tu (Nahh.. ambikk ayat saya..HHA) Guna font Trebuchet, Times atau Arial. Senang nak baca. Saiz font tu letak saiz 12 atau 14 lah. Tak terlalu besar dan terlalu kecil. 

5. Hiasan Tambahan
Bagi sandra hiasan tambahan ni macam border sidebar, Title sidebar, Footer Blog dll. Kalau nak blog yang cantik letak lah benda-benda tu di dalam blog. Biar blog kemas sikit.  Tak susah pun sudah sekarang. Ada ramai blogger termasuk saya yang menyediakan Tutorial blog. HEHE. 


Rasanya itu saja lah tips yang dapat sandra kongsikan. Kalau nak yang terbaik tu mestilah ada usaha kan. Sama lah dengan blog. Kalau rajin nak edit blog dan kacau-kacau coding tu mesti boleh punya. Macam sandra lah. Dulu langsung tak tau apa-apa pun cara nak design blog bagi cantik.. Ngeee.. HEHE...
Sandra harap tips ni sedikit sebanyak membantu kamu. 


Saturday, 25 August 2012

Tutorial : Border luar blog

Hi There ^ ^

Ni tutor yang saya nak share dengan kamu :D


Lama tidak buat tutorial kan.. So, siapa mau try buat bah mari lah. hehe.. 

1. Design > Edit Html 

2. Tekan F3 cari : #content-wrapper {

3. Copy code ni : border: 3px solid #ffffff;

4. Paste di bawah code yang kamu cari tadi tuu. 

5. Customize code tadi tuu ikut pilihan kamu.

6. Tekan preview dulu, kalau takda error boleh lah save.


Letak comment kalau da berjaya :) hehe

Friday, 10 August 2012

Tutorial Post Background

 Hi There ^ ^

       Jom buat tutorial ni. Untuk Kasi comel-comel blog kamu tu sikit ! hihi

TEMPLATE DENIM 


1. Design > Edit HTML

2. Search code di bawah ni ( Tekan F3)
.post {

3. Sudah jumpa kan ? Lepas tu copy code dibawah ni lagi dan paste kan di bawah code .post {  



width: 650px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: #FFFFFF;
background-image: url(http://i1125.photobucket.com/albums/l597/cotcet96/20070320_313973.gif);
border: 1px solid transparent;
-webkit-border-radius: 40px;
}

4. Kalau kamu perasan di bawah .post {  tu ada code ni kan ?  Tolong buang code tu ya :)
 margin: 0 0 1.5em;
  padding-bottom: 1.5em;
}

5. Tekan Preview dan kalau tiada error boleh SAVE !


Menjadi tak ? Letak komen selepas baca . kikiki


Saturday, 4 August 2012

TUTORIAL : divider bawah post

Hi There ^ ^

Tutorial untuk divider bawah post. Tutorial ni tak menjadi di blog sandra. Tak tau lah kenapa. Mungkin di blog kamu menjadi. Cuba lah try dulu. hihi

Washed Denim Template.

1. Design > Edit HTML > Tick Expand widgets 

2. Search code di bawah ni  di Edit Html (Tekan F3)
<div class='post-footer-line post-footer-line-3'/>

3.  Copy code di bawah ni dan paste sebelum code yang kamu cari tadi tu.
<center><img height='20' src='URL DIVIDER'/></center>

4. Masukkan Url image di URL DIVIDER tu.

5. Preview dulu lepas tu SAVE kalau menjadi.

 ** Ni saya ada ambil sikit Freebies dekat Glitter Graphic.


http://sl.glitter-graphics.net/pub/439/439872zev6untzyt.gif

 
http://sl.glitter-graphics.net/pub/909/909935t2qtku99z7.gif


http://sl.glitter-graphics.net/pub/1147/1147480t6phl13g44.gif

 
http://sl.glitter-graphics.net/pub/634/634950t7vde8eg7v.gif

 
http://sl.glitter-graphics.net/pub/229/229250skrgjfpbac.gif

Comment yah kalau guna tutor ni. hihi **

Friday, 3 August 2012

Tutorial Letak CCTV dalam blog

Heyy There..

Lama sudah saya tida buat tutor kan. hihi.. so, sekarang mau share lah dulu ni tutorial. Gadget ni sekadar perhiasan blog saja. Tidak bole detect pun apa-apa. hihi.. Tahu kan macam mana bentuk CCTV tu? Macam ni :



1. Design > Page Elements > Add a gadget > Html/Javascript

2. Copy code di bawah ni:

<div style="position: fixed; top: 0px; right: 0px;">
<center><img src="http://1.bp.blogspot.com/-jyICA3F7eOo/TbBE4YBgbpI/AAAAAAAAAEM/XU9sJQnzGvU/s1600/cctv.gif"/></center></div>

3. Paste kan di ruang Html/Javascript tu.

4. Save and enjoy with your blog CCTV !hihi



Menjadiii takk ? 


Thursday, 26 July 2012

Tutorial letak signature di bawah post

26.Julai. 2012


Mari try letak signature di bawah post. senang ja caranya . hikhik

1. Design > Edit Html > Tick Expand Widget Templates

2. Tekan F3 dan cari kod ni:
<data:post.body/>

3. Copy code dibawah ni  dan Pastekan url Gambar Signature kamu di BAWAH kod yang kamu cari tadi.
 <img src="Url Signature " />


4. Preview dulu. Kalau takda error boleh lah SAVE !



Menjadii takk ? hikhik


Tutorial Cute MP3 Player

26.Julai.2012


Itu Mp3 Player yang saya maksudkan.  Mari cuba try test  letak gadget ni di blog kamu.. haha

1. Click Link ni : flash mp3 player


2. Tekan button Generator yang ada di sebelah kanan tu.


3. Tukar Url lagu yang di box hitam tu. Klik sini untuk cari code lagu: http://irondj.net/

4.  Taip  lagu yang kamu mau di search button bahagian atas tu.


5. Klik pada tajuk lagu yang kamu pilih tu. contoh :


6.  Lepas tu dia keluar macam ni kan ?


Copy code dalam box tu. Tapi hanya copy kod yang macam ni ja.. 
*yang ada tajuk dia di belakang tu. Tengok bagus-2 dekat code tu yaa :)
http://media.irondj.net/mix/file/24121/Britney_Spears_-_Criminal__Lyrics_.mp3

7. Sudah. Buka kembali tab kamu yang ni.. dan paste kan di tempat ruangan mp3 tu
*Tukarkan 1 kalau mau lagu tu autoplay dan 0 kalau non-autoplay.


8. Kalau mau tukar warna boleh pilih button di category tu dan tekan colors.
9. Sudah siap? sekarang copy semua code di HTML Code yang bahagian bawah tu dan pastekan ke 
Add a Gadget -> HTML/Javascript.

10. Save ! 


 Menjadii takkk ? hihi 



Monday, 9 July 2012

Tutorial : Tabbed content widget

Hi There  ^ ^

Tutor ni telah di request oleh Nabila Medan. Mari tengok apa tu Tabbed Content Widget.


Widget ni boleh Save ruang untuk blog kita. Kalau nak buat, mari tengok step di bawah. sebelum tu, ikut step betul-betul ya sebab tutor ni boleh membingungkan anda. Hehehe :)

Step 1. 
Design > Add a gadget > Html/Javascript

Step 2.
Copy kod di bawah ni dulu. 

<style type="text/css">.tabber { padding: 0px !important; border: 0 solid #bbb;}.tabber h2 { float: left; margin: 0 1px 0 0; font-size: 12px; padding: 3px 5px; border: 1px solid #bbb; margin-bottom: -1px; /*--Pull tab down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0; cursor:pointer;}html .tabber h2.active { background: #fff; border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/}.tabber .widget-content { border: 1px solid #bbb; padding: 10px; background: #fff; clear:both; margin:0;}.codewidget, #codeholder { display:none;}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script><script type="text/javascript">$(document).ready(function() { $('#codeholder').bloggerTabber ({  tabCount : 3 });});</script>
<!-- to make sure the widget works, do not alter the code below --><div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>


Step 3.
Paste kan kod tu di ruangan Html/Javascript

Step 4. 
Ubah kod yang diwarnakan mengikut kesesuaian kamu.
*** Warna widget colour,tab background dan bottom border

*** Jumlah widget yang mau di gabungkan. 

Step 5. 
Drag Tab widget yang tadi DI ATAS widget yang ingin digabungkan.
Contoh macam sandra punya Tabbed Widget ni: 



***Ingat ! Setiap widget yang ingin di gabungkan mesti letak Tajuk/Nama. :)

Step 6.
Save :)

Harap kamu faham dengan tutor ni. First time buat tutor ni pun 
memang bingung. Hahahaa :P