Saturday 28 July 2012

Navbar Hover

Assalammualaikum
Smiley ^_^


Navbar hover ?? Apa pula tu ? Alahai , macam ni lh.


Nampak ? Jom buat

1) Design > Edit HTML > F3 and search this code.
body {
2) Copy and paste kat ATAS dia tau.
#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}
3) Preview dan save.


Remove Navbar

Assalammualaikum
Smiley ^_^


Jom remove navbar. Navbar tu yang ni


1) Design > Edit HTML > Copy and paste kat Edit HTML
#navbar-iframe {
display: none !important;
}
2)  Paste kod kat atas tu macam kat bawah ni tau !

-----------------------------------------------
Nurul Template Design
Name:     Cupcake's Blog
Designer: Nurul
URL:      http://www-duniaphotoscape.blogspot.com
Date:     18/1/2012
-----------------------------------------------
#navbar-iframe {
display: none !important;
}
3) Preview and save.



Border At Post Tittle & Sidebar

Assalammualaikum
Smiley ^_^


Nak buat macam kak bawah ni ? Jom ikut step Nurul.




POST TITTLE

1) Design > Edit HTML > Tick Expand Widget > F3 and search this code.
SIMPLE TEMPLATE ATAU SEANGKATANYA
h3.post-title, .comments h4 { 
or
h3.post-title {
or
h3.post-title, h4 {
DENIM TEMPLATE
.post-title {
MINIMA TEMPLATE
.post h3 {

2) Kat bawah tu ada kod ni kan ? TOLONGLAH DELETE !!
Simple Template
font: $ (post.title.font);
margin: .75em 0 0;
}


Denim Template
margin: 0;
padding: 0;
font-size: 125%;
font-weight: bold;
line-height: 1.1em;
 3) Lepas korang buang tu. korang gantikan dengan kod ni.
font-family:arial;
color: #000000;
font-size:14px;
text-align:center;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-top-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom: 8px solid #000000;
background : #FFFFFF;
padding: 3px; margin: 20px ;
}
4) Preview dulu baru save.

ABC : Ketebalan border yang warna hitam tu
ABC : Tukarlh kalau rasa nak tukar. solid/dashed/dotted
ABC : Kalau nak tukar , tukarlah.
ABC : background post tittle korang. Cari warna kat sini.

SIDEBAR
1) F3 and search this code.
SIMPLE TEMPLATE
h2 {
DENIM TEMPLATE
.sidebar h2 {
MINIMA TEMPLATE
h2 {
2) Tolonglah delete kod kat bawah ni kalau korang ada jumpa kat bawah code yang Nurul suruh cari.
SIMPLE TEMPLATE
margin: 0 0 1em 0;
font: $(widget.title.font);
colour: $(widget.title.text.colour);
text-transform: uppercase;
}
DENIM TEMPLATE

margin: 1.6em o .5em;
padding: 4px 5px;
background-colour: $sidebarTitleBgColour;
font-size: 100%;
colour: $sidebarTitleTextColour;
}
3) Gantikan dengan kod kat bawah ni.

text-align:center;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-top-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom: 5px solid #000000;
background : #D8D8D8; font-size:14px;
padding: 2px;
margin: 5px
}
4) Preview and save.

ABC : Ketebalan border kat bawah
ABC : Just choose one : solid/dashed/dotted
ABC : Warna border kat bawah
ABC : Warna background
ABC : Size font korang
ABC : saiz border. Semakin besar no. semakin besar border korang

Maaflah sebab entry ini panjang berjela. Jemput-jemputlah komen.






Accrodian Navbar

Assalammualaikum
Smiley ^_^


Dah lama tak buat tutorials. Accordian Navbar tu menu tab. Bila kita touch dia pakai cursor ,
automatik dia akan jatuh. Bukan jatuh terhempap tu !

BEFORE


AFTER


1) Dashboard > Design > Edit HTML > F3 search this code.
]]></b:skin>
2) Copy and paste atas code ]]></b:skin> .

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 300px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 150px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 300px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
3)  Belum siap ! Copy and paste code ni kat bawah code ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function() {
$(&quot;.tab_content&quot;).hide(); //Hide all content
$(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show(); //Activate first tab
$(&quot;.tab_content:first&quot;).show(); //Show first tab content
//On Click Event
$(&quot;ul.tabs li&quot;).click(function() {
$(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;); //Remove any &quot;active&quot; class
$(this).addClass(&quot;active&quot;); //Add &quot;active&quot; class to selected tab
$(&quot;.tab_content&quot;).hide(); //Hide all tab content
var activeTab = $(this).find(&quot;a&quot;).attr(&quot;href&quot;); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});</script>
4) Preview dulu baru save. WAIT ! Belum habis lagi. Pergi Page Elements > Add Gadget > HTML/Javascript > Copy and paste code kat bawah ni kat dalam HTML/Javascript.

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFB6D6;
margin:1px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5>
<div class="msg_body">
<center>
Isi dalam tajuk 1</div>
<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
Isi dalam tajuk 2
</div>
<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
Isi dalam tajuk 3</div>
</div> 


ABC :  untuk warna tulisan navbar
ABC :  background navbar
ABC :  background isi navbar
ABC :  pilihlah tajuk apa yang korang nak letak
ABC :  letaklah segala kod yang korang nak





Friday 27 July 2012

GA | Mega Giveaway By Cik Fie , Anisah dan Aiman

Assalammualaikum
Smiley ^_^









<center><a href="http://mynameishafizah.blogspot.com/2012/07/mega-giveaway-by-cik-fie-anisah-n-aiman.html" /><img height="478" src='http://1.bp.blogspot.com/-t8UzQkFxR8I/UA1d6R4txeI/AAAAAAAAC0M/_MRgZdo7h7Y/s1600/MEGA-GA-BY-CIK-FIE-,-ANISAH-N-AIMAN.gif' width="569" /></a></center>


Mari join ! Banyak hadiah menanti korang. Rebut cepat !!! Bukan saya yang
buat GA ini tapi Cik Fie



SYARAT PENYERTAAN (WAJIB)
1) Folow blog INI | INI | INI.
2) Like Fanpages INI.
3) Wajip terjah sponsor INI | INI | INI | INI.
4) Ajak rakan seramai yang boleh untuk join GA ini.
5) Ambil kod banner GA di atas dan letakkan di entry korang.
6) Tinggalkan link blog di komen blog Cik Fie bukan di blog Nurul.

PEMENANG
~ 100% Top Referral. So , wajib promote mati-matian ! Suruh orang klik banner korang

HADIAH 
~ Lomo Camera x4 pemenang
~ Domain e.g www.blablablabla.com
~ Perfume x2 pemenang
~ Contact lens x2 pemenang
~ Baju couple x2 pemenang
~ Edit blog
~ COMING SOON
~ COMING SOON

TARIKH TUTUP
~ Belum ditetapkan lagi. Akan di-updatekan.

Cik Fie , saya join GA akak walaupun saya tahu yang saya tak akan menang :)


Saturday 21 July 2012

SEGMEN | Kenangan Ramadhan

Assalammualaikum
Smiley ^_^



Nak join ? Klik je banner kat atas tu tapi sampai 12 tengah malam je tau !

Kenangan yang tak dapat di lupakan adalah bila kawan-kawan Nurul yang gedik
pantang nampak budak lelaki kat bazar Ramadhan. Mulalah nak suruh Nurul mintakan no. phone dia orang.
Menyampah ! (¬_¬)
Sorry my friend because called your all GEDIK But it's true , right ?

DETAILS DOODLE
☂Nama : Nurul
☂Warna : #FF9292

MY FRIENDS
Miera


Wednesday 4 July 2012

Senarai Peserta Segmen | Cari Dunia Photoscape ??

Assalammualaikum
Smiley ^_^


Hehe .. tak sangka ada juga orang jumpa perkataan Dunia Photoscape ye :) Anyway , Nurul nak ucapkan thanks sebab join segmen Nurul ni. Nak join segmen juga ? klik SINI.



SEGMEN | Cari Dunia Photoscape ??

Assalammualaikum
Smiley ^_^


Hehe .. Nurul buat segmen ni. Hadiah tak berapa lumayanlah sebab Nurul calon UPSR. Jadi tak boleh buat hadiah banyak-banyak macam blogger lain.

Okey , siapa yang dapat cari perkataan DUNIA PHOTOSCAPE kat header Nurul , dia dapat hadiah. Hadiahnya :
Edit blog full
2x doodle *bergantung kepada jantina doodle yang korang nak


Okey tak ?

Cara-cara Penyertaan

1) Buat satu entry yang bertajuk " SEGMEN | Cari Dunia Photoscape ?? "
2) Kat entry tu korang tulis nak edit blog macam mana , nak doodle macam mana. Jangan lupa , tag kawan korang sekali. Pastikan dia tahu !
3) Korang tunjukkan bukti yang korang jumpa perkataan Dunia Photoscape. Kalau tak jumpa , korang taip perkataan " TAK JUMPA !!! " besar-besar.
4) Dah siap publish entry korang , letak link segmen korang kat komen.
5) Penyertaan akan tutup pada 4 Ogos 2012. Bergantung kepada peserta. Kalau peserta sikit , maka terbatallah segmen ini.  BATAL !!!!

Syarat-syarat Penyertaan

1) Like fanpage Nurul kat bawah sekali. [kalau nak dapat bonus like ler~]
2) Follow this blog. Ouh ye ! Tunjukkan bukti yang korang follow Nurul sekali kat dalam entry tadi.
3) Follow Twitter Nurul. Ada kat bahagian sidebar : Tweet Me
Nak join ? Join ler~ Tak membazir apa-apa pun. Cuma membazir tenaga korang untuk menaip.


m
e
s
s
a
g
e

 
This blog+author+design fully edited and the designer is Nurul. Don't steal my design !