Cara pasang menu bar dengan drop down versi pink

Untuk memasang menu bar dengan drop down versi pink ,hanya ikut beberapa langkah yang di tunjukkan di bawah.

p/s: Sila save script template anda.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML.

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl+F dan taip atau paste kod ]]></b:skin> . Seterusnya, tekan Enter.

Langkah 3

Salin kod berwarna biru di bawah dan paste di atas atau sebelum kod ]]></b:skin> (rujuk langkah 2)

#pinkmenubar{
/*float: left;*/
/*width: 100%;*/
margin: 0 0 10px 0 ;
padding: 2px 2px 2px 20px;
height: 28px;

background-color: #FEE4F6;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt76WJ_yLUFwXLcfXhQNkTDya7xo17-2ATxYPbZe-8awl934_ZpY4SnFfnQ08Mc1xc1SUee0Pp63qaxbDhUL1jgezU8Zaw_2JsOqmjE9nQMVrNMNGWRtiUUuBezqpOrSCHwjzCBR1rf8Y/s400/navbg.png");
background-repeat: repeat-x;
background-position: bottom;
border-color: #E3099E;
border-width: 1px 0 1px 0;
border-style: solid;
text-transform: lowercase;
line-height: 100%;
width: auto;

}

#pinkmenubar > li{
float: left;
width: 130px;
height: 28px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

#pinkmenubar > li > a{
display: block;
width: 99px;
height: 15px;
padding: 5px 24px 8px 7px;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqK8n-3f5jrEDdcYVDoiYxBdFTJF27AAKx5BhXF2367FklPmi7T9WXrt79vk6v-CTsCZSsOAZTNBFfMhAtmXfond92dUk6JA3BdQU70bh5gpk-NTpWfgSqwQZm-10hxkWi5f0Ued9NvIY/s400/buttonbg.png");
font-size: 13px;
color: #FA69CC;
text-decoration: none;
font-family: Trebuchet MS;

}
#pinkmenubar > li:hover > a{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEDvzFeiDaTcu64xdTAkRPaKYJXBfksJFsFV7NV1_ChgOXzcoaSs_2J-ra7XeWAOylAybtf3CoE1vX5nSLsqlCa2TH2XVTS_0C8AxKrrp8vxiIPVGARziA5mL73TJuwDteu9EMcYZNeE/s400/buttonbghover.png");
color: #E3099E; 

}

ul#pinkmenubar > li > ul{

/*

position: absolute;
right: 5px;
top: 4px;


*/

float: right;
width: 17px;
height: 20px;


margin-top: -24px;
margin-right: 5px;



padding: 0;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkcwQ-cKysy7Un1BjS370nxLEPuHgQiz0wnRvo37NKcYr9YvSStDkpCCrXz7CcUSKt7uPGJXwqcDYI0uzGiczb32kIsN-DM6fNfr4AyU_SwihWW6oRUkudlHPRCm7XVzT3d4fef_OPaU/s400/dropdown.png");
z-index: 50;

overflow: hidden;

}
ul#pinkmenubar > li > ul:hover{

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7g6D7hjFJtOTkhQEjcN5m0tHONGOVZwxr-QfARwFELszO6PbPVNmlth0OPAa29DV-45N9VpolS9fwzGT9QerTHuWUAJ_6iRZqXgIPEWZ-_aaCe1BYoubctZAEXJIjDNV9SpiPoDYPWE4/s400/dropdownhover.png");
overflow: visible;

}


ul#pinkmenubar li ul li{
position: absolute;
margin-left: -9000px; 
} 
ul#pinkmenubar > li > ul:hover > li{
display: block;
width: 117px;
margin: 0 0 0 -99px;
padding: 0;
position: relative;
z-index: 500;

}

ul#pinkmenubar > li > ul:hover > li:first-child{
margin-top: 18px;
padding-top:3px;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYPAZfSkR3xPEZMN-DWjwviUc-SEDBTYvMycsuKt494veSyqAkA2-WHRjI8cQ7_cEH9FkR3lR208fqXhA0QuDwBQasMNPdrceH_tHx-PogUGmwvHYAo0L6d8wm9uOJYhmq4YOjyzMH1Q/s400/topsubmenu.png");
background-repeat: no-repeat;
background-position: 100% 0;

}
ul#pinkmenubar > li > ul:hover > li:last-child{

padding-bottom:3px;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmLJ3nRxry1B9NHe0vdiBX2EOaIUa4JpnP2PgTMis-thkiLvDb2zxYzWhwWcVgmIP9dBjeP9JADacsnUPQiIYCD-HyfEVVT0UFsYEunKhVUiu3ZFDcR_ynMDyTBftFFg32Mk6DrNkKtHo/s400/bottomsubmenu.png");
background-repeat: no-repeat;
background-position: 0 100%;

}
ul#pinkmenubar > li > ul:hover > li:last-child:hover{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKL-MSV215pbgXzVNSyvzC2eJUMMXgfxoMikI8FeH-jn1oigaogJDEvKZ0aU6AkG2RVRZrIusBLaJP7DY01Bzzp9-hMxpsbpVl5QJxypqr68IyLCKBoQIIj7k_cTg1HyjSwf-GdJeC9xw/s400/bottomsubmenuhover.png");
}

ul#pinkmenubar > li > ul:hover > li > a{
display: block;
background-color: #FFF5FC;
border-color: #E3099E;
border-width: 0 1px 0 1px;
border-style: solid;
padding: 1px 4px 1px 4px;
margin: 0;
font-family: Trebuchet MS;;
text-decoration: none;
font-size: 12px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWd7xjtmfQQKwGft7coby6rfDGrAQndRuTOwlotFAtIsRyKl1myW3x8YOTVtXFDFckcCtIqDT4a8NkctL3yfkTUF_Awkgn8IHgVXZIZQcndYlkSoua4h8GEHw28DbkbREID2WtnIlyVOc/s400/submenubutton.png");
color: #E3099E;
}
ul#pinkmenubar > li > ul:hover > li > a:hover,
ul#pinkmenubar > li > ul:hover > li:hover > a{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFigEDf9h65j4ZFfz8zwmgsP5bmEjk274n_uBsaHRkYvZsbl2V4tHgkm_9LxaLqveSrwJIVvj8dAe2kOXG7l2CV74qHgHfmKRX77J2Vug1U3G9mr5gB2ECCOZx_V-MUT_dxG8yuNEB4w/s400/submenubuttonhover.png");
}

code.pre {
white-space: pre;
background-color: #f8f8f8;
display: block;
line-height: 140%;
}

Langkah 4

Salin kod berwarna merah di bawah dan paste pada notepad. Edit kod yang di bold dengan menggantikan URL dan title anda.

<ul id='pinkmenubar'>

<li ><a href='masukkan URL di sini'>HOME</a></li>

<li ><a href='masukkan URL di sini'>about</a>

<ul>

<li><a href='masukkan URL di sini'>Squirrel?</a></li>

<li><a href='masukkan URL di sini'>Seamus</a></li>

<li><a href='masukkan URL di sini'>Portfolio</a></li>

<li><a href='masukkan URL di sini'>Contact</a></li>

</ul>

</li>

<li ><a href='masukkan URL di sini'>play ground</a>

<ul>

<li><a href='masukkan URL di sini'>css play</a></li>

<li><a href='masukkan URL di sini'>xsl&lt;/a></li>

<li><a href='masukkan URL di sini'>backgrounds</a></li>

<li><a href='masukkan URL di sini'>flash</a></li>

</ul>

</li>

<li ><a href='masukkan URL di sini'>rants</a></li>

</ul>

Langkah 5

Sekali lagi, dengan menggunakan keyboard, taip atau paste kod <div id='content-wrapper'>

Langkah 6

Salin kod yang telah siap di edit pada langkah 4 tadi dan paste kod tersebut di bawah atau selepas kod <div id='content-wrapper'>

Akhir sekali klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.


p/s:

Jika kod <div id='content-wrapper'> tiada pada script template anda, gantikan dengan <div id='header-wrapper'> . Seterusnya cari penutup kod <div id='header-wrapper'> iaitu </div>

Contoh:

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

Paste kod yang telah siap di edit pada langkah 4 tadi dan paste di bawah atau selepas </div>
sumber...http://maribinablog.blogspot.com

Read more »

Cara pasang menu bar versi 2

Untuk memasang menu bar dibawah header), sila ikut beberapa langkah yang di tunjukkan di bawah.

p/s: Sila save script template anda.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML.

Langkah 2

Dengan menggunakan keyboard, taip atau paste kod ]]></b:skin> pada ruang Find. Seterusnya tekan Enter.

Langkah 3

Salin kod berwarna biru di bawah dan paste di atas atau sebelum kod ]]></b:skin> ( rujuk langkah 2)

p/s: Anda boleh edit kod warna yang di bold mengikut keseuaian blog anda jika perlu.

.invertedshiftdown{

padding: 0;

width: 100%;

border-top: 5px solid #000;

background: transparent;

voice-family: "\"}\"";

voice-family: inherit;

}

.invertedshiftdown ul{

margin:0;

margin-left: 40px;

padding: 0;

list-style: none;

}

.invertedshiftdown li{

display: inline;

margin: 0 2px 0 0;

padding: 0;

text-transform:uppercase;

}

.invertedshiftdown a{

float: left;

display: block;

font: bold 12px Arial;

color: black;

text-decoration: none;

margin: 0 1px 0 0;

padding: 5px 10px 9px 10px;

background-color: white;

-moz-border-radius-bottomleft: 5px;

border-bottom-left-radius: 5px;

-moz-border-radius-bottomright: 5px;

border-bottom-right-radius: 5px;

}

.invertedshiftdown a:hover{

background-color: #000;

padding-top: 9px;

padding-bottom: 5px;

color: white;

}

.invertedshiftdown .current a{

background-color: #D10000;

padding-top: 9px;

padding-bottom: 5px;

color: white;

}

Langkah 4

Salin kod merah di bawah dan edit pada notepad. Gantikan kod merah yang di bold dengan URL dan teks pilihan anda.

<div class='invertedshiftdown'>

<ul>

<li><a href='masukkan URL di sini'>Link 1</a></li>

<li class='current'><a href='masukkan URL di sini'>Link 2</a></li>

<li><a href='masukkan URL di sini'>Link 3</a></li>

<li><a href='masukkan URL di sini'>Link 4</a></li>

<li><a href='masukkan URL di sini'>Link 5</a></li>

<li><a href='masukkan URL di sini'>Link 6</a></li>

</ul>

</div>

<br style='clear: both;'/>

Langkah 5

Dengan menggunakan keyboard, taip atau paste kod <div id='content-wrapper'> pada ruang Find dan seterusnya tekan Enter.

Langkah 6 

Salin kod berwarna merah yang telah di edit (rujuk langkah 4) dan paste kod tersebut di bawah atau selepas kod <div id='content-wrapper'> (rujuk langkah 5)


Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save
Sumber...http://maribinablog.blogspot.com

Read more »

Cara backup template dan posting di blogspot

Selepas memperkenalkan beberapa fetures yang baru kepada blogger yang berplatform blogspot, dalam masa yang sama,  blogger.com sedang giat mengemaskini hosting mereka dengan menghapuskan blog-blog yang dikategorikan sebagai melanggar syarat.

Perkara paling penting yang perlu anda elakkan adalah membina banyak blog dengan hanya menggunakan satu akaun. 

Sebagai mengambil langkah berjaga-jaga, anda di nasihatkan supaya membuat backup pada template dan juga entri yang di post.


Untuk membuat backup pada template yang sedang kita gunakan, caranya adalah sangat mudah.

Langkah 1

Log in blog => Dashboard => Layout =>  Edit HTML

Langkah 2

Klik pada Download Full Template (rujuk gambar diatas). Kemudian, tandakan pada Save file dan seterusnya klik Save.


Untuk membuat backup pada entri yang di post pada blog.


Langkah 1

Log in blog => Dashboard => Settings

Langkah 2

Pada bahagian Blog Tools, klik pada Export Blog(rujuk gambar diatas), seterusnya klik pula pada button DOWNLOAD BLOG.
Sumber...http://maribinablog.blogspot.com

Read more »