Review Blog : Cik Fie (Pemenang) #4

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera


klik gambar kalau nak gi blog cik fie :3
  Hellooooo.. ^_^ Rasanya lama jugak tak review blog. Kali ni nak review blogger pemes. Aww! HAHAHA. Ini bukan hadifah pilih. Ini sebab kak Fie menang  segmen. Sebab hadifah ada sponsor satu segmen ni. *buat2 tak ingat segmen*. Argh!!! Asyik membebel sian kak fie. HAHAHAH XP..

  Okey2. Start. Blog kak fie ni simple and CUNG. Maybe sekarang ni dalam pembikinan or tak tahulah. Tpi, hadifah selalu datang blog akak ni dan selalu memerhatikan design baru beliau ^_^. Blog ni memang simple gila2. Serius ni. Muka serius >> -_- <<.. And then. And then. And then kak Fie selalu join segmen/GA orang. Dan mesti lah kak fie ni selalu menang *pepandai ja aku*.. Kak fie ni ada jugak buat tips2 yg menarik. Tutorial2 dalam blog kak Fie pon banyak jugak. Ya. Stalker no.1. Memang tahu segala-galanya. KAHKAHKAH :P.. Kak fie ni dah tukar domain. Untungnya ~.~.. OKey. hadifah pon dh tukar domain jugak -,-.. And then, apa lagi eh pasal blog kak fie ni? Rasa mcm tak puas lagi nak 'review'. Mwahaha. Rasanya tu ja. Sorry kalau saya tersalah cakap. Terkasar bahasa ._. 

Tutorial : Private Cbox Cara Senang

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera

LIVE PRIVIEW :
  Korang dah nampak kan? Okey. Tuto ni memang SENANG GILA.. Abaikan gila tu. HAHAHHA >.<. Mula2 korang log in cbox korang nak senang dan cepat tekan {SINI}. Lepastu, korang tekan 'PUBLISH'.. Tak tahu rujuk gambar kat bawah
tak nampak tekan gambo tu :P
  Okey, bila korang dah tekan publish, korang scroll sikit. Korang macam nampak kod2 cbox kan? So, kalau nak privatekan korang copy kod SEPARUH sahaja. Contoh ;

kalau tak nampok jugok tekang gambaq
  Okey. Itu sahaja. Bila dah copy kod tu pergi layout dan paste di html/java script. Itu BAGI PENGGUNA TEMPLATE DESIGNER.... Kalau blogskin, korang copy kod mcm kat gambar tu, paste kat mana2 yang patut kat tempat korang. :)... Oh ya! Kalau korang nak tengok mesej2. korang just buat gini ja
namaidcboxkorang.cbox.ws
  Nama ID cbox korang tu. Nama ID yang mula2 korang daftar cbox haritu :3. Kalau dah jadi BAGITAHU. kalau tak pon BAGITAHU jugak :P 

Tutorial : Letak Banner Giveaway di Sidebar

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera

  Ngee. Arini asyik buat tuto je. haha. biarkan. Kalau korang nak, korang boleh request arini. Esok hadifah publish. Esok, last hdifah buat tuto.{kalau ada orang request baru buat}.. Ngeh3 :B Okey. ni pon tadi ada orang request kalu idok,den tak buat. Btw, cara nak letak banner ni ada DUA JENIS eh.

Cara pertama dia begerak-gerak. CONTOH ;

>> layout >> html/java script bg pengguna template designer
>> template >> cari tempat korang nak paste kod bg pengguna blogskin

<marquee behavior="scroll" diretion="left" onmouseout="this.start();" onmouseover="this.stop();" scrolldelay="0">
<a href="LINK GIVEAWAY" target="_blank"><img height="200" src="URL GAMBAR" /></a>
<a href="LINK GIVEAWAY" target="_blank"><img height="200" src="URL GAMBAR" /></a>
<a href="LINK GIVEAWAY" target="_blank"><img height="200" src="URL GAMBAR" /></a></marquee>
MERAH ; LINK GA
BIRU ; WIDTH GAMBAR
OREN ; URL GAMBAR
kalau korang nak tambah kod, copy kod yg bawah ni.
<a href="LINK GIVEAWAY" target="_blank"><img height="200" src="URL GAMBAR" /></a> 
 paste SEBELUM kod </marquee>

Cara kedua benda tu ada scrollbar cntohnya ;


<div class='widget-content' style='overflow:auto; width:ancho; height:250px;'>
<center><a href="LINK BLOG" target="_blank"><img border="0" height="150" src="URL GAMBAR" width="150" /></a><br>
<a href="LINK BLOG" target="_blank"><img border="0" height="150" src="URL GAMBAR" width="150" /></a><br>
<a href="LINK BLOG" target="_blank"><img border="0" height="150" src="URL GAMBAR" width="150" /></a></center><br>
</div>
OREN ; KETINGGIAN SCROLLBAR KORANG {tk reti nak terang mcm mana}
MERAH ; LINK BLOG GA
HIJAU ; LEBAR DAN TINGGI GAMBAR
BIRU ; URL GAMBAR
kalau korang nak tambah kod, copy ni :
<a href="LINK BLOG" target="_blank"><img border="0" height="150" src="URL GAMBAR" width="150" /></a></center><br> 
Paste SEBELUM kod </div> .. Yeh! tamaaattt. Kalau dah jadi, komen, tak jadi pon komen. Tak faham, lg lah dialu-alukan komen. LOL XP

Tutorial : Tab Like Me

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera


 Again tutorial. LOL do I care? haha. Okey 'tab' ni sesuai untuk template designer sahaja.Kalau untuk classic template {blogskin} hadifah tak tahu lah pulak. :P. Okey2. Pergi layout,html/java script,copy kod ni
<div id='polskahekjor'>
<style type="text/css">
    div.P0L5K4 div.C0D3R
    {height: 24px; overflow: hidden;float:left; }
div.P0L5K4 div.C0D3R a:hover
    { background-color: #DBCEBF; }
div.P0L5K4 div.C0D3R a.Active{background:#AD793D;color:#fff;}
 div.P0L5K4 div.N0T4C0D3R
    { clear: both; border: 0px solid #bce8f6; overflow: hidden; background-color: #AD793D;}
    div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r
    { height: 100%; padding: 0px; overflow: hidden; }
    div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r div.BL0g3R
    { padding: 3px 5px; }
div.P0L5K4 div.C0D3R a
    { background:#8F765A; float: left;border-radius:11px 11px 0px 0px;
    display: block; width: 33%; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
    font-size: 12px; font-weight: 900; color: #151515;}
    </style>
<script type='text/javascript'>
    //<![CDATA[
    function P0L5K4_C0D3R(P4WN3D, id)
    {
      var P0L5K4 = document.getElementById(P4WN3D);
      var C0D3R = P0L5K4.firstChild;
      while (C0D3R.className != "C0D3R" ) C0D3R = C0D3R.nextSibling;
      var TT = C0D3R.firstChild;
      var i   = 0;
      do
      {
        if (TT.tagName == "A")
        {
          i++;
          TT.href      = "javascript:P0L5K4_J3R('"+P4WN3D+"', "+i+");";
          TT.className = (i == id) ? "Active" : "";
          TT.blur();
        }
      }
      while (TT = TT.nextSibling);
      var N0T4C0D3R = P0L5K4.firstChild;
      while (N0T4C0D3R.className != 'N0T4C0D3R') N0T4C0D3R = N0T4C0D3R.nextSibling;
      var h3ll0c0d3r = N0T4C0D3R.firstChild;
      var i    = 0;
      do
      {
        if (h3ll0c0d3r.className == 'h3ll0c0d3r')
        {
          i++;
          if (N0T4C0D3R.offsetHeight) h3ll0c0d3r.style.height = (N0T4C0D3R.offsetHeight-2)+"px";
          h3ll0c0d3r.style.overflow = "auto";
          h3ll0c0d3r.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (h3ll0c0d3r = h3ll0c0d3r.nextSibling);
    }
    function P0L5K4_J3R(P4WN3D, id) { P0L5K4_C0D3R(P4WN3D, id);
    }
    function P0L5K4_H4CKR3W(P4WN3D) { P0L5K4_C0D3R(P4WN3D,  1);
    document.write('');}
    //]]>
    </script>
<form action="P0L5K4.html" method="get">
<div id="P0L5K4" class="P0L5K4">
<div style="width: 100%;" class="C0D3R">
<a>TITLE 1</a> <a>TITLE 2</a> <a>TITLE 3</a></div><div style="width: 100%; height: 300px;color:#151515;" class="N0T4C0D3R">
<div class="h3ll0c0d3r" style='background:#fff;'>
<div class="BL0g3R">
<center><img border="0"src="http://1.bp.blogspot.com/-Qc7SgO_QmZI/ULlSThAy0GI/AAAAAAAACAU/i29iRvN7DHg/s1600/peserta+19.png" width="210" />
<center>
KOD TITLE 1</div>
</div>
<div class="h3ll0c0d3r" style='background:#fff;'>
<div class="BL0g3R">
<div class='widget-content' style='overflow:auto; width:ancho; height:250px;'>
KOD TITLE 2
</div></div>
</div>
<div class="h3ll0c0d3r" style='background:#fff;'>
<div class="BL0g3R">
KOD TITLE 3</div>
</div>
</div>
</div></form>
<script type="text/javascript">P0L5K4_H4CKR3W('P0L5K4');</script>
</div>
NOTE :
ORANGE : KOD COLOUR
RED : TAJUK TAB KORANG TU. CONTOH DISCLAIMER,GA OR WHATEVER
BLUE : KOD2 YG KORANG NAK TUNJUK.

Preview and save. Tolong bagitahu kalau kod ni rosak ye. hadifah rasa semacam pulak. LOL. Kalau korang tak faham bagitahu eh? huhu. okey dah. hadifah stop dah buat tuto untuk harini. bye2 ^_^

Tutorial : Customize Your Own Acc Ask.fm

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera



  hihi. actually, hadifah saja ja nak buat tuto tuh. Tarak orang pon tanya nak share jeee. hehe :B.. Okey jom ;

1. Log in korang punya akaun, pergi seetings, tekan widget


2. Dah? kat situ, korang tekan edit CSS ada kat bawah 'code' tuh. Dah? Okey.
3. Cari kod .askAnywhere-input { . kod ni untuk letak background
4. Delete anak-anak kod itu, dan gantikan dengan yang ini ;
display: block;
width: 100%;
max-width: 100%;
height: 55px;
max-height: 160px;
padding: 0px;
border: solid 1px #B87289;
font-size: 11px;
text-align: left;
overflow: auto;
background:url('URL BACKGROUND');
*solid tu korang boleh tukar kepada dotted or dashed. 1px tu kalau korag tambah no. border dia akan lebih tebal. lepastu kod warna, and lepastu url background.

5. Untuk button 'ask' pulak, korang tekan F3 search kod ni
.askAnywhere-button {
6. Dah jumpa, paste kod yg hadifah bg ni kat bawah kod yg korang search tadi

background: #B87289;
width: 260PX;
*adjust width. tukar kaler. kalau nak bolder, korang tambah kod ni >> border: solid 1px #B87289;

7.  Centerkan link ask.fm. kalau hadifah punya tu, ask.fm/hadifahsabri {rujuk gamba}. Dah tahu? ok. now, tekan F3 search kod .askAnywhere-username {

8. Kat bawah tu ada kod ni kan? border-bottom: solid 0px #000000; korang delete 1 tu dan letak 0. Tak pun delete terus ja.

9. Lepas tu, letak text-align:center;

10. Centerkan headline. Contoh kalau hadifah punya Tanya, Tanya, Tanyaaaaaaaaa ↓ . Tahu dah? OKey search kod ni .askAnywhere-slogan {

11. Dah jumpa, kopy kod text-align:center;

12. Hadifah punya headline tu warna cklat. nak tukar warna jugak? korang tambah kod ni >> color: #75401A;

13. Paste lah bawah .askAnywhere-username tu.. 

FUH! Tamat jugakkkk tuto ni. Gile susah nak buat. Tapi taangan menggatal jugak. KAH KAH KAH :p.. Kalau korang pandai godek2 kod tu, korang boleh edit sendiri :) . Lepas dah edit tekan save. Tapi korang kene banyak kali try lah. Oke. Kalau korang nak paste kod tu, copy kod hadifah bagi ni ;
<center><iframe src="LINK ASK.FM WIDGET KORANG?stylesheet=custom&lang=1" frameborder="0" scrolling="yes" width="100%" height="146" style="border:none;"></iframe></center>
kalau korang tak tahu nak cari link tu kat mana, ni hadifah tunjuk :
  Korang pergi widget, tengok bahagian kod, cari link tuh. copy and paste dekat kod yg difah bagi tadi :3.. Okey, tu je dari hadifah. Kalau tak faham komen. tuto ni actually dari Qihah but hadifah ada tambah2 lagi kod lain. hehehe ^_______^


Freebies : Blogskin 'Litta Story'

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera


LIVE PREVIEW HERE
  Wuuuuuuuuhuuuuuuuuuuuuuuuuu! New skins! oyeah! LOL. Alhamdulillah, Finally, siap jugok edit blogskins tu.... Header LITTA STORY tu hadifah dapaat inspiraton dri freebies aina hanani.. HAHA. Tajuk blogskins tu litta story lah ;* Okey nah :

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates' rel='stylesheet' type='text/css'>
<div style="display:scroll; position:fixed; top:5px; right:90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" /></a> <div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div></div>
<center><img src="http://i.imgur.com/x7jFI.png"/></center>
<title>LittaStorry;</title>
<!--------------------------------------
Blogger Classic Template
Name: LittaStory;
Designer: Hadifah Sabri
URL: http://hadifahsabri.blogspot.com/
*Do not remove this* or I'll make you shame! #serius
*Do not ripping* or I'll make you shame! #serius
--------------------------------------!>
<style type="text/css">
#navbar-iframe {
display: none;
}
body {
background:url(http://i1074.photobucket.com/albums/w419/amaninaonly/th_polkadotpink-1.gif);
background-attachment:fixed;
font-family: Century Gothic;
font-size: 11px;
text-align: left;
color: white;
}
a:link,a:visited{
text-decoration:none;'
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
border-bottom:2px solid transparent;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
color:#FF8FEE;
}
a:hover{
border-bottom:1px dotted #ED61D8;
}
a.navi {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;
background:#FF75CD;
width:50px;
text-decoration:none;
border:3px solid #fff;
color:#fff;
border-radius:30px;
display:inline-block;
text-align:center;
font:16px calibri;
box-shadow:1px 1px 3px #eee;}
a.navi:hover{
background:#000000;color:#fff;
}
.lee {
background: transparent;
border-top: 2px solid #000000;
letter-spacing: 2px;
border-bottom: 2px solid #FF6BD0;
text-align: center;
color:#2A0A12;
padding:2px;
-webkit-transition-duration: 1.0s;
font: 16px 'Montserrat Alternates';
text-align:center;
}
.teuk {
font-family: century gothic;
font-size:12px;
font-style: italic;
line-height:20px;
color: #000;
text-align: center;
margin-bottom:10px;
}
::selection {
background:#FF6699;
color: #000;
}
blockquote{
border-radius: 5px;
padding:5px;
color:black;
-webkit-transition:1s;
background:white;
border:1px solid #FF6699;
}
blockquote:hover {
border-radius: 10px;
padding:5px;
color:black;
-webkit-transition:1s;
background:white;
border:1px dotted #000;
text-align:right;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track-piece  {
background-color: #000;
border: 3px solid #FF7DCF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #FF7DCF;
border: 1px solid #000;
}
img{
border-radius: 10px;
filter: alpha(opacity="100");
opacity: 1;
-webkit-transition: 1s;
}
img:hover{
border-radius: 0px;
filter:alpha(opacity="50");
opacity: 0.5;
-webkit-transition:1s;
}
u {
border-bottom:2px solid #FF00A2;
}
u:hover {
border-bottom:2px solid #fff;
-webkit-transition: 1s;
}
b {
color: #000;
}
b:hover {
color: #FF00A2;
}
i {
color: #696969;
}
strike {
color: #FF00A2;
}
</style>
</head>
<table style="font-size: 12px; color: #000; line-height: 17px; background:#fff; border-radius:20px; padding-right:5px; border-top:50px solid #FF85D2; border-bottom:50px solid #FF85D2; border-left:5px solid #FF85D2; border-right:5px solid #FF85D2;" width="900" align="center" border="0" cellspacing="8">
<tbody><tr>
<td valign="top" style="line-height:15px; letter-font-size:10px; width:240px; padding-right:5px;">
<div class="lee">Helo!</div><br>
<center><img src="http://data.whicdn.com/images/46006341/tumblr_mexr39uS1f1r4jluco1_r1_500_thumb.png" width="240" height="auto"><br><br>
Hello people!. Welcome to my blog . I'm alien , the owner of this Blog . Be nice here and leave your footprints at my Tagboard .Thanks.
<br><br>
<div class="lee">Click-Click</div><br>
<center><img src="http://data.whicdn.com/images/46006182/343821752771854576_5ATJvWNr_c_thumb.jpg" width="240" height="auto"><br><br>
<center>
<a class="navi" onClick="document.getElementById('entry').innerHTML=document.getElementById('diary').innerHTML" title="Entry">Entry</a>
  <a class="navi" onClick="document.getElementById('entry').innerHTML=document.getElementById('about').innerHTML" title="Profile">Profile</a>
  <a class="navi" onClick="document.getElementById('entry').innerHTML=document.getElementById('link').innerHTML" title="Friends">Friends</a>
<a class="navi" onClick="document.getElementById('entry').innerHTML=document.getElementById('tutobies').innerHTML" title="Friends">Stuff</a>
<br><br>
<div class="lee">Walkie Talkie</div><br>
<center><img src="http://data.whicdn.com/images/46005871/223983781438496120_xXTL3tPh_c_thumb.jpg" width="230" height="150"><br><br>
Put Your Cbox Code here. Width must be "240"<br>
<br><br>
<div class="lee">Thanks!</div><br>
<center><img src="http://data.whicdn.com/images/45910873/tumblr_mew81vDlKi1rkvq9go1_500_thumb.jpg"><br>
<!----DONT REMOVE OR CHANGE CREDIT OR I CAN MAKE YOU SHAME!-----!>
Skin Made by <a href="http://hadifahsabri.blogspot.com/">Hadifah</a> <a href="http://www.blogskins.com/me/hadifahsabri">Sabri</a><br>
Header Inspiration by <a href="http://aina-hanani.blogspot.com/">Aina</a> <a href="http://aina-hanani.blogspot.com/2012/02/freebies-header-glitter.html">Hanani</a><br>
Background Founder by <a href="http://amaninajailani.blogspot.com/2012/01/freebies-tiny-polka-dot-background.html">Amanina</a><br>
Best view in <a href="http://www.google.com/">Google Chrome</a> only<br>
<!----DONT REMOVE OR CHANGE CREDIT OR I CAN MAKE YOU SHAME!-----!></div>
<td valign="top" style="width:600px; padding-left:5px; border-left:1px dotted #FF85D2; padding-left:10px; padding-left:10px;">
<div id="entry">
<blogger><div class="lee"><BlogItemTitle><span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span></BlogItemTitle></div>
<div class="teuk"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Dreamers</a></BlogItemCommentsEnabled></div>
<$BlogItemBody$></br>
</blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a></OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
</td></tr></tbody>
</table>
<div id="about" style="display: none;">
<div class="lee">The Webmaster Here</div><br>
<center><img src="http://data.whicdn.com/images/44299970/64454638368111e2844022000a1f9adf_7_thumb.jpg" width="250" height="auto"><br><br></center>
Name : Unknown<br>
Age : 2012<br>
Live in : planet earth<br></div>

<div id="diary" style="display: none;">
<blogger><div class="lee"><BlogItemTitle><span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span></BlogItemTitle></div>
<div class="teuk"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Choco</a></BlogItemCommentsEnabled></div>
<$BlogItemBody$></br>
</blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a></OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
<div id="link" style="display: none;">
<div class="lee">Let's Exchange Link</div><br>
Holla holla !!!<br>
<center>Wanna exchange link? tell me at cbox!<br><br></center>
♛ <a href="http://hadifahsabri.blogspot.com">Hadifahsabri</a><br>
♛ <a href="http://www.blogger.com/home">Friends</a><br>
♛ <a href="http://www.blogger.com/home">Friends</a><br>
♛ <a href="http://www.blogger.com/home">Friends</a><br>
♛ <a href="http://www.blogger.com/home">Friends</a><br>
♛ <a href="http://www.blogger.com/home">Friends</a><br>
♛ <a href="http://www.blogger.com/home">Friends</a><br>
♛ <a href="http://www.blogger.com/home">Friends</a><br>
♛ <a href="http://www.blogger.com/home">Friends</a><br>
♛ <a href="http://www.blogger.com/home">Friends</a><br>
♛ <a href="http://www.blogger.com/home">Friends</a><br>
<div id="tutobies" style="display: none;">
<div class="lee">Goodies and Tutorials</div><br>
<u>BLOG TUTORIALS</u><br><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br>
❁ Tutorial: <a href="http://www.blogger.com/home">Tutorial</a><br><br>
<u>Stuff</u><br><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
❁ Stuff: <a href="http://www.blogger.com/home">Freebies</a><br>
</div>
<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
<script type="text/javascript" src="scrolltopcontrol.js"></script>
</script>
</body>
</html>
  TU diaaa. HAHA. Tak tahu nak cakap apa. Anyway, sama tak  dengan blogskins kedua hadifah? >KLIK<.. Sama sangat ke? LOL. Tak kaan? tak kan? huhu. Takpe lah. Tak kisah.. Oh ye! kalau nak tukar blog ID, Tekan F3 search kod YOUR BLOG ID ;).. Itu sahaja kot. Okey dah. bye2. Hope Malaysia menang. amin #assalamualaikum :*

p/s ; semalam 12.12.12 tak bermakna apa2 pon? o.O.. LOL

Artis+Blogger = Artis Blogger?

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera

  KIH KIH KIH... Ya. Tadi jenjalan blog kak nabila. Hadifah nak share blog2 artis. Even diorang artis, diorang juga ialah blogger. Korang nak tahu link blog artis2 ni? Kejap eh :3..


  Ada artis kesukaan korang diatas? Visit and Follow!.. Kih kih kih. Ekteli, tarak tau nak hupdate apo arini. So, hadifah bagi lah link blog yg hadifah ambil dari kak Nabila Medan.. EH2! Hadifah dah mintaak izin okey? :P.. OK bye ^______________^

Tutorial : Highlight Neon

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera


  Harini tak tahu nak update apa, So, hadifah update tuto lah. Okey. Tengok gambar atas. Tu lah highlight neon.. Dia macam ada shadow. Sesetengah dah tahu.. Sesetengah lagi belum tahu. So, hadifah ambil kesempatan malam ni untuk uppdate tuto.

.Blogskins tekan F3 cari kod blockquote {
.Template designer tekan F3 cari kod a:link { atau /* Header

Copy kod ni 
::-moz-selection {
color:#57A0FF;
text-shadow: 2px 2px 3px #FF579A;
}
::selection {
color:#57A0FF;
text-shadow: 2px 2px 3px #FF579A;
}
Paste DI ATAS kod yg korang cari tadi.. ;D. Previe and save. Pepandai lah edit kod2 kaler tu. LOL. Ok. bye2 ^_______^

p/s :
  1. Akak pemes aka akak amalina follow saya. *bangga* lol
  2. Page tuto and freebies saya dah tukar link.. hehe
  3. Esok 12/12/12, but bg saya biasa je.. LOL tahun depan 11/12/13., Lagi cung tarikh tu.. KAH KAH KAH XD

Tutorial : Youtube Player Part I

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera


 >> Blogskin >> Template >> Cari tempat nak paste kod youtube yg hadifah akan bagi
>> Designer Template >> Layout >> Add a gadget >> HTML/JAVA SCRIPT
<center><object width="27" height="25"><param name="movie" value="http://www.youtube.com/v/EVI2E9LL-Gg?version=2&amp;autoplay=1&amp;hl=en_US&amp;color1=9000FF&amp;color2=DDB0FF" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/EVI2E9LL-Gg?version=2&autoplay=1&hl=en_US&color1=9000FF&color2=DDB0FF" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="25"></embed></object></center>
>> Copy kod tu dan save.

Note! ;
  • ABC ; LINK lagu youtube korang contoh :
  • ABC ; BORDER kod lagu korang
  • ABC ; WARNA kod lagu korang
  • ABC ; LEBAR youtube tu
Okey, Dah siap. Tak faham boleh tanya :* BTW, hadifah punya lagu tu a thousands year piano version (macam kat atas tulah).. Ok bye ;)

Tutorial : Cbox Mine version

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera


  Hi korang! harini nak ajjar korang cara letak cbox berbackground. BTW, dia ada dua cara tau. Okey. Yang first macam ni :

>> pergi kat html/java script bg template designer dan template bg blogskin
>> Copy kod ni ;
<div style="background:url(URL BACKGROUND); background-repeat:no-repeat; background-position:center;"><center>YOUR CBOX CODE</center></div>
>> preview dan save.

Cara kedua macam ni :


>> pergi kat html/java script bg template designer dan template bg blogskin
>> Copy kod ni ;
<div style="background:url(Your BC); background-repeat:repeat; background-position:center;"><center>YOUR CBOX CODE</center></div>
>> Preview dan save.

 Okey dah :D.. Background nye pepandai lah korang carik. LOL ;P. Btw, kod yang first tu macam gammbar kat atas. Kod yang kedua tu dia REPEAT BACKGROUND. Maksudnya macam background tu berdouble lebih kkurang gitu lah. Hadifah pon tk reti nak terangkan. Mwaahaha. Okey. Dah bye. Assalamualaikum :D

Credit tuto : Adilla Shahirah

Tutorial : Blockquote - Part Three -

Assalamualaikum|Salam Sejahtera

sebelum dihover
selepas dihover

  Okey. kod blockquote ni asal dia dari akak Fatin. Hadifah just tambah yang blockquote hover je. Lagipon, ada orang request. Huhu ^_^. Okey jom.

.Blogskin tekan F3 cari blockquote {
.Washed Denim/Denim tekan F3 cari .post blockquote {

 Okey. Blogskin copy kod ni eh :
blockquote {
background: white;
padding:4px;
color:#ccc;
background-image:url(http://i.imgur.com/U45ZY.png);
background-size:200px;
background-position:bottom right;
background-repeat:no-repeat;
border:1px dashed #cecece;
-webkit-transition: 1.0s;
}
blockquote:hover {
background: white;
padding:4px;
color:#000;
background-image:url(http://i.imgur.com/EkNfy.png);
background-size:200px;
background-position:bottom right;
background-repeat:no-repeat;
border-radius:20px;
-webkit-transition: 1.0s;
} 
  Yang lain2 tu, pepandai lah edit :b..

Okey. Untuk Washed denim pulak :
 .post blockquote {background: white;
padding:4px;
color:#ccc;
background-image:url(http://i.imgur.com/U45ZY.png);
background-size:200px;
background-position:bottom right;
background-repeat:no-repeat;
border:1px dashed #cecece;
-webkit-transition: 1.0s;
}
.post blockquote:hover {
background: white;
padding:4px;
color:#000;
background-image:url(http://i.imgur.com/EkNfy.png);
background-size:200px;
background-position:bottom right;
background-repeat:no-repeat;
border-radius:20px;
-webkit-transition: 1.0s;
}
Okey, Tu je.. babai ^_^..

9 Golongan Manusia Yang Solat Tidak Diterima Allah

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera


  9 Golongan Manusia Yang Solat Tidak Diterima Allah | Solat merupakan tiang agama bagi seseorang mukmin. Ibarat sebuah rumah, jika tiada tiang yang kukuh maka akan roboh lah rumah itu. Rasulullah S.A.W. telah bersabda yang bermaksud: “Sesiapa yang memelihara solat, maka solat itu sebagai cahaya baginya, petunjuk dan jalan selamat dan barangsiapa yang tidak memelihara solat, maka sesungguhnya solat itu tidak menjadi cahaya, dan tidak juga menjadi petunjuk dan jalan selamat baginya.” (Tabyinul Mahaarim)
Solat lah walau dimana sahaja kamu berada
Rasulullah S.A.W telah bersabda bahwa : “10 orang solatnya tidak diterima oleh Allah S.W.T, antaranya :
  1. Orang lelaki yang solat sendirian tanpa membaca sesuatu.
  2. Orang lelaki yang mengerjakan solat tetapi tidak mengeluarkan zakat.
  3. Orang lelaki yang menjadi imam, padahal orang yang menjadi makmum membencinya.
  4. Orang lelaki yang melarikan diri.
  5. Orang lelaki yang minum arak tanpa mahu meninggalkannya (Taubat).
  6. Orang perempuan yang suaminya marah kepadanya.
  7. Orang perempuan yang mengerjakan solat tanpa memakai tudung.
  8. Imam atau pemimpin yang sombong dan zalim menganiaya.
  9. Orang-orang yang suka makan ‘riba’.
  Sabda Rasulullah S.A.W yang bermaksud : “Barang siapa yang solatnya itu tidak dapat menahannya dari melakukan perbuatan keji dan mungkar, maka sesungguhnya solatnya itu hanya menambahkan kemurkaan Allah S.W.T dan jauh dari Allah.

Hassan r.a berkata : “Kalau solat kamu itu tidak dapat menahan kamu dari melakukan perbuatan mungkar dan keji, maka sesungguhnya kamu dianggap orang yang tidak mengerjakan solat. Dan pada hari kiamat nanti solatmu itu akan dilemparkan semula ke arah mukamu seperti satu bungkusan kain tebal yang buruk.” Wallahualam.

Freebies : Denim Sweet-Sour

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera


klik gambaq kalau korang nak tengok secara live. LOL XD

  Okey. Sebenarnya, ni design lama blog hadifah. Hadifah Tak guna dah. So, hadifah bagi lah korang ;).. Okey. Mesti korang nak cara2 dia kan? Okey jom

Template --> TICK expand widget templates --> Proceed --> Klik kanan --> Tekan select all --> Copy kod dibawah ---> Paste --> --> Preview --> Save

WARNING!Kalau dia ada tanya apa2, korang tekan je KEEP WIDGETS. Kalau tak, memang akan hilang lah sesetengah menda dalam blog korang tu.
<?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>
<link href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css'/>
        <b:include data='blog' name='all-head-content'/>
        <title><data:blog.pageTitle/></title>
        <b:skin><![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name:     Washed Denim
    Designer: Hadifah Sabri
    URL:      http://hadifahsabri.blogspot.com/
    Date:     5 Dec 2012
    -----------------------------------------------
 #navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
    /* Variable definitions
       ====================
     <Variable name="bgColor" description="Page Background Color"
               type="color" default="#ffffff" value="#ffffff">
     <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="borderColor" description="Border Color"
               type="color" default="#ffffff" value="#ffffff">
     <Variable name="dateHeaderColor" description="Date Header Color"
               type="color" default="#999999" value="#999999">
     <Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
               type="color" default="#ffffff" value="#ffffff">
     <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">
     <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: url(http://2.bp.blogspot.com/-jvLKd8szEy0/TsdDNRo4_3I/AAAAAAAAADg/L8BUKQmM4vs/s1600/backgroundorange.png);
        background-attachment: fixed;
        background-repeat: repeat;
        margin: 0;
        padding: 0px;
        font: x-small Verdana, Arial;
        text-align: center;
        color: #000000;
        font-size/* */:/**/small;
        font-size: /**/small;
        letter-spacing:1px;
font-family: Verdana;
        }
::-moz-selection {
background:orange;
color:#000;
}

::selection {
background:orange;
color:black;
}
    a:link {
     cursor: crosshair;
text-decoration: none;
color: #FFB361;
}
    a:visited {
cursor: crosshair;
text-decoration: none;
color: #FF8400;
}
a:hover{
-webkit-background-clip: text;
color: white;
-webkit-transition: 1.0s;
-webkit-text-fill-color: transparent;
background-image:-webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
background-image:-webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:-moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:-ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:-o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
}
i {
text-decoration: none;
color: #F57E00;
}

b {
text-decoration: none;
color: #F57E00;
text-shadow: 0px 0px 1px grey;
}

u {
text-decoration: none;
border-bottom: 3px solid #F57E00;
}

u:hover {
text-decoration: none;
border-bottom: 3px dotted #F57E00;
}
a img {
  border-width: 0;
}
#outer-wrapper {
font: $bodyFont;
    }
    /* Header
    ----------------------------------------------- */
    #header-wrapper {
      margin:0;
      padding: 0;
      background-color: $headerCornersColor;
      text-align: $startSide;
    }
    #header {
      width: 900px;
      margin: 0 auto;
      background-color: $headerBgColor;
      color: $headerTextColor;
      padding: 0;
      font: $headerFont;
margin-bottom:-10px;
    }
    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 {
border-radius: 30px;
width: 900px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: #fff;
border-top: 0px ;
}
#main-wrapper {
padding-top:10px;
margin-$startSide: 14px;
width: 600px;
float: left;
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 */
font-size: 88%;
}
#sidebar-wrapper {
font-size: 88%;
padding-top:10px;
width: 270px;
float: right;
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 {
text-align: center;
margin: 0;
padding: 0;
font-size: 100%;
font-weight: bold;
color: orange;
}
margin: 1.5em 0 0;
font-weight: normal;
color: #0000ff;
font-size: 100%;
}
.post {
font: normal 12px century gothic;
margin: 0 0 1.5em;
padding-bottom: 1.5em;
}
.post-title {
margin: 1.00em 0 0;
font: normal 12px century gothic;
background:#FFB383;
border: 4px solid #FF893F;
font-family:14px Century Gothic;
text-align:center;
border-bottom:4px solid #FF893F;
border-left:4px solid #FF893F;
border-right:4px solid #FF893F;
font-weight:bold;
color: #000;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: #000000;
font-weight: bold;
}
.post div {
margin: 0 0 .75em;
line-height: 1.3em;
}
    .post-footer {
      color: $textColor;
 margin: 5px;
padding: 5px;
font-color: #000000;
text-align: center;
background: #FFE8C5;
border-radius: 5px;
   }
    .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 {
 -webkit-user-select:text;-moz-user-select:text;
margin: 5px;
padding: 0 0 0 20px;
background: #ffffff ;
border: 1px solid #FF9A00;
border-left: 10px solid #FF9A00;
font-weight: bold;
color: #ccc;
border-radius:5px;
padding: 3px;
-webkit-transition: 1.0s;
-moz-border-radius: 30px 10px / 10px 30px;
border-radius: 30px 10px / 10px 30px;
}
blockquote:hover {
 -webkit-user-select:text;-moz-user-select:text;
padding: 3px;
color: black;
border-right: 10px solid #FF9A00;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 15px #000;
-webkit-transition: 1.3s;
}
.post blockquote p {
margin: .75em 0;
}
    /* Comments
    ----------------------------------------------- */
    #comments h4 {
margin: 1em 0;
font-size: 94%;
color: #000;
}
#comments h4 strong {
font-size: 94%;
color: #000;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
padding: 2px;
background-color: #FFDCA6;
border-radius: 15px 15px 0px 0px;
color: #000;
font-weight:bold;
font-size: 86%;
}
#comments-block dd {
-webkit-user-select:text;-moz-user-select:text;
padding: 2px;
background-color: orange;
color: #fff;
font-size: 95%;
font-weight:bold;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 82%;
font-weight:bold;
padding: 2px;
background-color: #FFDCA6;
border-radius: 0px 0px 15px 15px;
color: #fff;
}
#comments-block dd p {
-webkit-user-select:text;-moz-user-select:text;
padding: 2px;
background-color: orange;
color: #fff;
font-weight:bold;
font-size: 95%;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: $startSide;
font-size: 93%;
 }
#blog-pager-older-link {
float: $endSide;
font-size: 93%;
}
#blog-pager {   
text-align: center; 
font-size: 87%;
}
    /* Sidebar Content
    ----------------------------------------------- */
    .sidebar h2 {
text-align:center;
background-color: #FFB86B;
border-radius: 10px 10px 0px 0px;
border-top: 9px solid #FFB86B ;
border-left: 9px solid #FFB86B ;
border-right: 9px solid #FFB86B ;
margin: 0.00em 0 0;
font-weight: normal;
color: #000;
font-size: 14px;
text-transform: uppercase;
}
                                                               
    .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 {
padding: 5px;
border: 2px solid #FFB86B; 
}
.sidebar .widget {
margin:1.5em;
}
    /* 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: 2px;
      font-size: 85%;
      line-height: 1.5em;
      text-align: $startSide;
}
/* Rainbow Popular Post by http://hzndi.blogspot.com*/#PopularPosts1 ul li 
a:hover{
color:#fff;
text-decoration:none
}
#PopularPosts1 ul li
 a {-webkit-text-size-adjust: auto;
 -webkit-text-stroke-width: 0px;
  color: #000;
 display: block;
 font-family: Century Gothic; 
font-size: 13px; 
font-style: normal; 
font-variant: normal;
 font-weight: normal;
 letter-spacing: normal; 
line-height: 18px; 
margin: 0px 40px 0px 0px;
 min-height: 30px;
 orphans: 2; 
padding: 0px; 
text-align: -webkit-auto;
 text-decoration: none !important;
 text-indent: 0px; 
text-transform: none; 
white-space: normal;
 widows: 2;
 word-spacing: 0px;
}
#PopularPosts1 ul li .item-thumbnail{
float:right;
border:0;
margin-right:10px;
background:transparent;
padding:0;
width:51px;
height:51px
}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
position:absolute;
top:10px;
right:5px;
border-radius:50%;
border:2px solid #ccc
;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px
}
    ]]></b:skin>
      </head>
      <body>
      <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='SWEET-SOUR (Header)' type='Header'>
<b:includable id='main'>

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
</b:widget>
</b:section>
        </div>
        <div id='content-wrapper'>
          <div id='crosscol-wrapper' style='text-align:center'>
            <b:section class='crosscol' id='crosscol'>
<b:widget id='Navbar1' locked='false' title='Navbar' type='Navbar'>
<b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
        gapi.load(&quot;iframes-styles-bubble&quot;, function() {
          if (window.iframes &amp;&amp; iframes.open) {
            iframes.open(
                &#39;//www.blogger.com/navbar.g?targetBlogID\075226413549294964488\46blogName\75SWEET-SOUR\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75DISABLED\46layoutType\75LAYOUTS\46searchRoot\75http://alyasorfina.blogspot.com/search\46blogLocale\75en_GB\46v\0752\46homepageUrl\75http://alyasorfina.blogspot.com/\46vt\75-2218524821056246458&#39;,
                {
                  container: &quot;navbar-iframe-container&quot;,
                  id: &quot;navbar-iframe&quot;
                },
                {
                });
          }
        });
      &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
</b:widget>
</b:section>
          </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:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>
<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
</b:includable>
<b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  comment.displayTime = entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>
<b:includable id='backlinks' var='post'>
  <a name='links'/><h4><data:post.backlinksLabel/></h4>
  <b:if cond='data:post.numBacklinks != 0'>
    <dl class='comments-block' id='comments-block'>
      <b:loop values='data:post.backlinks' var='backlink'>
        <div class='collapsed-backlink backlink-control'>
          <dt class='comment-title'>
            <span class='backlink-toggle-zippy'>&#160;</span>
            <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
            <b:include data='backlink' name='backlinkDeleteIcon'/>
          </dt>
          <dd class='comment-body collapseable'>
            <data:backlink.snippet/>
          </dd>
          <dd class='comment-footer collapseable'>
            <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
            <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
          </dd>
        </div>
      </b:loop>
    </dl>
  </b:if>
  <p class='comment-footer'>
    <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'><data:post.createLinkLabel/></a>
  </p>
</b:includable>
<b:includable id='mobile-main' var='top'>
    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-index-post'/>
        </b:loop>
      <b:else/>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-post'/>
        </b:loop>
      </b:if>
    </div>

   <b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='post' var='post'>
  <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

    <div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

    <b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
      <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span>

      <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span>

      <span class='reaction-buttons'>
        <b:if cond='data:top.showReactions'>
          <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
            <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
              <span class='reactions-label'>
              <data:top.reactionsLabel/></span>&#160;</td>
            <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
           </tr></table>
        </b:if>
      </span>

      <span class='star-ratings'>
        <b:if cond='data:top.showStars'>
           <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
        </b:if>
      </span>

      <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span>

       <!-- backlinks -->
       <span class='post-backlinks post-comment-link'>
         <b:if cond='data:blog.pageType != &quot;item&quot;'>
           <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
             <b:if cond='data:post.showBacklinks'>
               <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
             </b:if>
           </b:if>
         </b:if>
       </span>

      <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>

      <!-- share buttons -->
      <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>

      </div>

      <div class='post-footer-line post-footer-line-2'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>
      </div>

      <div class='post-footer-line post-footer-line-3'>
      <span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span>
      </div>
    </div>
  </div>
</b:includable>
<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
      <b:else/>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>
<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>
<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>
<b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments' style='overflow:auto; width:ancho; height:500px;'> 
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>

    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <img src='//www.blogger.com/img/icon_delete13.gif'/>
    </a>
  </span>
</b:includable>
<b:includable id='mobile-nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div class='mobile-link-button' id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;lsaquo;</a>
      </div>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <div class='mobile-link-button' id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&amp;rsaquo;</a>
      </div>
    </b:if>

    <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </div>

    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
    </div>

  </div>
  <div class='clear'/>
</b:includable>
<b:includable id='mobile-post' var='post'>
  <div class='date-outer'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <div class='date-posts'>
      <div class='post-outer'>

        <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
          <b:if cond='data:post.thumbnailUrl'>
            <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
          </b:if>
          <meta expr:content='data:blog.blogId' itemprop='blogId'/>
          <meta expr:content='data:post.id' itemprop='postId'/>

          <a expr:name='data:post.id'/>
          <b:if cond='data:post.title'>
            <h3 class='post-title entry-title' itemprop='name'>
              <b:if cond='data:post.link'>
                <a expr:href='data:post.link'><data:post.title/></a>
              <b:else/>
                <b:if cond='data:post.url'>
                  <b:if cond='data:blog.url != data:post.url'>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  <b:else/>
                    <data:post.title/>
                  </b:if>
                <b:else/>
                  <data:post.title/>
                </b:if>
              </b:if>
            </h3>
          </b:if>

          <div class='post-header'>
            <div class='post-header-line-1'/>
          </div>

          <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
            <data:post.body/>
            <div style='clear: both;'/> <!-- clear for photos floats -->
          </div>

          <div class='post-footer'>
            <div class='post-footer-line post-footer-line-1'>
              <span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if>
              </span>

              <span class='post-timestamp'>
                <b:if cond='data:top.showTimestamp'>
                  <data:top.timestampLabel/>
                  <b:if cond='data:post.url'>
                    <meta expr:content='data:post.url' itemprop='url'/>
                    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
                  </b:if>
                </b:if>
              </span>

              <span class='post-comment-link'>
                <b:if cond='data:blog.pageType != &quot;item&quot;'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                    <b:if cond='data:post.allowComments'>
                      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                        <data:post.commentLabelFull/>:
                      </a>
                    </b:if>
                  </b:if>
                </b:if>
              </span>
            </div>

            <div class='post-footer-line post-footer-line-2'>
              <b:if cond='data:top.showMobileShare'>
                <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                  <a href='javascript:void(0);'><data:shareMsg/></a>
                </div>
              </b:if>
              <b:if cond='data:top.showDummy'>
                <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
              </b:if>
            </div>

          </div>
        </div>

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
      </div>
    </div>
  </div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>
</b:includable>
<b:includable id='main' var='top'>
  <b:if cond='data:mobile == &quot;false&quot;'>

    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
    </div>

    <!-- navigation -->
    <b:include name='nextprev'/>

    <!-- feed links -->
    <b:include name='feedLinks'/>

    <b:if cond='data:top.showStars'>
      <script src='//www.google.com/jsapi' type='text/javascript'/>
      <script type='text/javascript'>
        google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
        function initialize() {
          google.annotations.setApplicationId(<data:top.blogspotReviews/>);
          google.annotations.createAll();
          google.annotations.fetch();
        }
        google.setOnLoadCallback(initialize);
      </script>
    </b:if>

  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>

  <b:if cond='data:top.showDummy'>
    <data:top.dummyBootstrap/>
  </b:if>

</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
        <img src='//www.blogger.com/img/icon_delete13.gif'/>
      </a>
    </b:if>
  </span>
</b:includable>
<b:includable id='feedLinks'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
    <b:if cond='data:feedLinks'>
      <div class='blog-feeds'>
        <b:include data='feedLinks' name='feedLinksBody'/>
      </div>
    </b:if>

    <b:else/> <!--Post feed links -->
    <div class='post-feeds'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.allowComments'>
          <b:if cond='data:post.feedLinks'>
            <b:include data='post.feedLinks' name='feedLinksBody'/>
          </b:if>
        </b:if>
      </b:loop>
    </div>
  </b:if>
</b:includable>
<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>
<b:includable id='mobile-index-post' var='post'>
  <div class='mobile-date-outer date-outer'>
    <b:if cond='data:post.dateHeader'>
      <div class='date-header'>
        <span><data:post.dateHeader/></span>
      </div>
    </b:if>

    <div class='mobile-post-outer'>
      <a expr:href='data:post.url'>
        <h3 class='mobile-index-title entry-title' itemprop='name'>
          <data:post.title/>
        </h3>

        <div class='mobile-index-arrow'>&amp;rsaquo;</div>

        <div class='mobile-index-contents'>
          <b:if cond='data:post.thumbnailUrl'>
            <div class='mobile-index-thumbnail'>
              <div class='Image'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
            </div>
          </b:if>

          <div class='post-body'>
            <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
          </div>
        </div>

        <div style='clear: both;'/>
      </a>

      <div class='mobile-index-comment'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <b:if cond='data:post.allowComments'>
            <b:if cond='data:post.numComments != 0'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </div>
    </div>
  </div>
</b:includable>
<b:includable id='iframe_comments' var='post'>

  <b:if cond='data:post.allowIframeComments'>
    <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
    <div class='cmt_iframe_holder'/>

    <b:if cond='data:post.embedCommentForm == &quot;false&quot;'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
  </b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
  <div class='feed-links'>
  <data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>
</b:includable>
<b:includable id='comments' var='post'>
  <div class='comments' id='comments' style='overflow:auto; width:ancho; height:500px;'> 
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4><data:post.commentLabelFull/>:</h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
              &#160;
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
              &#160;
          </b:if>

          <data:post.commentRangeText/>

          <b:if cond='data:post.hasNewerLinks'>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </b:if>
        </span>
      </b:if>

      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=5851315402131124861&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply?]</a></span>
              </span>
            </dd>
          </b:loop>
        </dl>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
</b:widget>
</b:section>
          </div>
          <div id='sidebar-wrapper'>
            <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Testing' type='Profile'>
<b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile -->
      <ul>
        <b:loop values='data:authors' var='i'>
          <li><a class='profile-name-link' expr:href='data:i.userUrl' expr:style='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'><data:i.display-name/></a></li>
        </b:loop>
      </ul>

    <b:else/> <!-- normal blog profile -->

      <b:if cond='data:photo.url != &quot;&quot;'>
        <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
      </b:if>

      <dl class='profile-datablock'>
        <dt class='profile-data'>
          <a class='profile-name-link' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>
            <data:displayname/>
          </a>
        </dt>

        <b:if cond='data:showlocation == &quot;true&quot;'>
          <dd class='profile-data'><data:location/></dd>
        </b:if>

        <b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
      </dl>
      <a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
    </b:if>

     <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>
</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 -->
    <center>All Right Reserved To Me.Template Designed by <a href='http://hadifahsabri.blogspot.com/'><b>Hadifah Sabri</b></a></center>
    </body>
    </html>

Oh ya! Header kan? Okey nah :
tekan gambar untuk mendapatkan url sebenar. WARNING!
Itu sahaja :). Maaf sekiranya blog dan header tu buruk. :)