DASHBOARD HOME TUTORIAL TEMPAHAN MY DESIGN

Sidebar ada icon comel 2

Tuto nie khas untuk aku sahaja okey...Kalau korang nak cuba buat boleh jugak....

Cari bahagian widget..pastu letak kod kat bawah,di bawah kod yg korang cari tadi...

#sidebar-wrapper-left h2, #sidebar-wrapper-right h2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdHcJypAJ4rPb_jaK65rg_mJYMaNn4sAcO-Zvj602cRiZ4CzhIggjzw7kRPp2bxArNdFOR56MDamUdDbt7eVqaVXVjQOQqNg163w1v3eVwwwRJs0E3PUvKMqAc04dUdZ2hxekWprmAj_JV/s1600/sidebartitle.png) no-repeat left center;
color: #f64c83;
margin: 10px 0 5px;
line-height:50px;
border-bottom:2px dotted #fa32a9;
text-align:center;

Preview dulu baru save.
TERIMA KASIH SUDI BACA DAN KOMEN

Siapa Suka Icon Reben


TERIMA KASIH SUDI BACA DAN KOMEN

Tutorial : Sidebar Border Style [Special , Colourful , 2 Tones Colour!]

Tuto Nie aku copy Dari Blog Nabila Medan...Untuk Di kongsi bersama Korang...


Best tak? cantik kan? Nak cuba? Jom! :D

1.Dashboard > Design > Edit HTML > Tick Expand Widget
2.Click Ctrl + F , Search :
]]></b:skin>,Widget (untuk Template Picture) 
3.Copy code bawah ni dan paste di atas code yang korang cari :
.sidebar .widget {
background: #FFF;
border-top: 4px solid #F5A9BC;
border-bottom: 4px solid #A9BCF5;
border-left: 4px solid #A9BCF5;
border-right: 4px solid #F5A9BC;
  margin:5px 5px 1.0em;
  padding:0px 5px 1.0em;
border-radius: 10px;
 }
4.Preview Dahulu , Tak ada error? Save :)

Amacam? Jadi ke tidak? cun kan?! :D
Semoga Berjaya~

Code Merah dan ungu anda boleh tukar kaler apa yg korang nak okey...
Merah : Code Colour
Ungu : Lengkungan border

TERIMA KASIH SUDI BACA DAN KOMEN

Tutorial buat menu tab comel di background blog...

Tuto nie aku copy paste dari blog Fiza   Contoh macam bawah ni.Takpun korang click  Fizatue menuju ke blognya...
Disebabkan ada yang bertanya dan ada masa nak buat tuto simple ni.
So,Fiza akan buat tuto ni untuk dikongsi bersama.Dah mintak izin pada tuan punya tuto dan dia dah izinkan pun.Fiza buat ni pun dari tuto si dia[N comel] ni.Thanks a lot ye.^__^. OK,jomlah try jugak

[Sebelum mulakan tutor ni,save dulu template blog korang>>download]
1.Log in blogger>>Dashboard>>Design>>Edit HTML
2.Click pada expand widget templates
3.Cari code ]]></b:skin>
*tekan serentak ctrl+f dan masukkan code no 3 di dalam box untuk memudahkan pencarian
4.Copy code bawah ni
/* LIST #8 */
#list8 { }
#list8 ul { list-style:none;}
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px;margin:1px; }
#list8 ul li a { display:block; width:80px; height:28px; background-color:#000000; border-right:10px solid #FFFFFF; padding-left:40px;
text-decoration:none; color:#FFFFFF; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }
*Customize coding ikut kesesuaian blog,korang boleh tukar jenis font,warna font,size font,warna background dan position tab menu tu.
code warna[di sini]

5.Pastekan code no4 sebelum code  ]]></b:skin>
6.Cari code </body>
*tekan serentak ctrl+f dan masukkan code no 5 di dalam box untuk memudahkan pencarian
7.Copy code bawah ni
<div style='display:scroll; position:fixed; top:150px; left:-40px;'>
<div id='list8'>
<ul>
<li><a href='URL BLOG'>Home</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
</ul>
</div>
</div>
*letak link menu dan tajuk menu pada code di atas ni

8.Paste code no 7 sebelum code </body>
9.Preview
10.Kalau dah ok tekan SAVE


TERIMA KASIH SUDI BACA DAN KOMEN

Sidebar title kepada imej

.sidebar h2 {
color: #416c03;
letter-spacing:-1px;
line-height:20px;
padding: 30px 5px 18px 40px;
font-weight:bold;
margin-bottom: 10px;
background: url(http://www.raycreationsindia.com/blogger-template/greenLeaves/rightTitle.gif) no-repeat right top; 
}
TERIMA KASIH SUDI BACA DAN KOMEN

Main Untuk template picture Window

Cari kod di bawah...

/* Main
----------------------------------------------- */

pastu pastekan kod di bawah yg korang carik tadi..

.main-outer {
 background: url(http://www.raycreationsindia.com/blogger-template/greenLeaves/slRepeat.jpg) repeat-y;
  margin:0px;
  padding:0px;
}

.main-top {
 background: url(http://www.raycreationsindia.com/blogger-template/greenLeaves/sltop.png) left top no-repeat;
 height:60px;
 margin:0px;
 padding:0px;
}

.main-bottom {
 background: url(http://www.raycreationsindia.com/blogger-template/greenLeaves/slbottom.jpg) left bottom no-repeat;
 height:30px;
 margin:0px;
 padding:0px;
}

.main-inner {
  padding: 15px 20px 20px;
  margin:0px;
}

.main-inner .column-center-inner {
  padding: 0 0 0 0;
}

.main-inner .column-left-inner {
  padding-left: 0;
  margin:0px;
}

.main-inner .column-right-inner {
  padding-right: 0;
  margin:0px;
}

preview dulu sebelum save..
TERIMA KASIH SUDI BACA DAN KOMEN

Post Footer berwarna

Cari kod   kat bawah...

 /* Posts
----------------------------------------------- */

di bawah kod di atas ada kod seperti

.post-footer {

copy kod di bawah pastekan di bawah kod di atas..

background:#ffacda;
-moz-border-radius:7px 7px 7px 7px;
-webkit-border-top-left-radius:7px;
-webkit-border-top-right-radius:7px;
-moz-box-shadow:1px 1px 1px 1px #202020;
-webkit-box-shadow:2px 2px 2px 2px #202020;
border:1px solid #5978a5;
color:#999;
font:italic 12px/1.4em georgia;
letter-spacing:0;
margin:0.75em 0;
padding-left:5px;
padding-top:9px;
text-transform:none;
padding-bottom:15px;

sebelum save preview dulu..
TERIMA KASIH SUDI BACA DAN KOMEN

post title cantik...

Seperti biasa edit html cari kod

/* Posts
----------------------------------------------- */

dah jumpa cari kod nie pulak...

h3.post-title {

kod di bawah korang paste di bawah kod  h3.post-title {  yg korang carik tadi...

color:#56472f;
font-size:20px;
font-weight:normal;
line-height:1.4em;
margin:0.25em 0 0;
padding:0 0 4px;
border:1px solid #fa32a9;
background:#ffacda;
width:560px;
padding-left:20px;
padding-right:20px;
margin:30px 10px 0 -30px;

sebelum save preview terlebih dahulu okey...
TERIMA KASIH SUDI BACA DAN KOMEN

sidebar ada icon comel

Design,edit htm pastu cari kod widget atau si debar h2...dah jumpa letak kod di bawah tempat kod yg korang carik tadi...

.sidebar h2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9y-KdrXweYOJOQ7FYc4KISAlhvymQ55NagBxmFnMcRsDnYTWMw8QJETjV8rTEBGzgn-VrVrev7DZB2Mw4XqOehRXfDxRgUfS09wNDBffyDi4Q4AgLDlRN4I4eFcAqEHpWjqly-mnx-0g/s1600/pencil.png) right no-repeat;
border-bottom:2px dashed #fa32a9;
padding:10px;
margin:0em 0 .5em;
font: normal 100% 'Georgia',Trebuchet,Arial,Verdana,Sans-serif;
line-height: 1.4em;
text-transform:normal;
letter-spacing:0em;
text-shadow:0 1px 0 #000;
color:#252525;


preview dulu sebelum save..
TERIMA KASIH SUDI BACA DAN KOMEN

tutorial floating share button

macamana nak buat share button (facebook like and share, tweet, google+1) yang float kat blog macam ni:


macam ni caranya..

1. login akaun blogger korang > Layout > Add a Gadget > HTML/Javascript

2. kosongkan ruang title. copy kod kat bawah ni, paste kat ruang bawah title tu :

<style>
#pageshare {position:fixed; bottom:15%; left:135px; float:left; border: 1px solid #ffffff; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#ffffff;padding:0 0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="jom kongsi dengan kawan-kawan korang">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"></div></div>
penerangan kod:

a) 135 : adjust nilai ni untuk adjust kedudukan widget tersebut
b) left : kalau korang nak widget ni muncul kat sebelah kanan, just tukar left tu kepada right
c) #ffffff : warna border widget tu
d) #ffffff : warna background widget tu

3. tekan save... done!! :)

kredit by gary
TERIMA KASIH SUDI BACA DAN KOMEN

tutorial tukar ayat ‘post a comment’ kepada gambar

kepada pengguna pop up windows comment, biasanya kalau orang nak komen entri, dia kena klik perkataan ‘post a comment’ atau ‘tulis ulasan’ tuh kan?..
post a comment
tapi macamana nak tukar ayat tuh kepada gambar supaya nampak lebih menarik?..
gambar post a comment
macam ni…

1. login akaun blogger korang > Template > tekan ‘Backup/Restore’ > Download Full Template > Edit HTML > Proceed > tick Expand Widget Templates
2. tekan Ctrl+F atau F3 dan cari kod ni :
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
3. copy kod kat bawah ni, dan paste kod tu di bawah/selepas kod kat step 2 :
<center><img src='url image korang'/></center></a>
url image korang : gantikan dengan url gambar korang..
4. tekan ‘save template’..
Kredit By Gary

TERIMA KASIH SUDI BACA DAN KOMEN

tutorial letak gambar di bawah body blog

gambar bawah body blog
macamana nak letak gambar kat bawah tuh?.. macam ni…

1. login akaun blogger korang > Template > tekan ‘Backup/Restore‘ > Download Full Template > Edit HTML > Proceed > tick Expand Widget Templates
2. tekan Ctrl+F atau F3 dan cari kod ni :
</body>
3. copy kod kat bawah ni, then paste di atas/sebelum kod kat step 2 tadi :
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('
loading’,");}, 10);
</script><center>
<img src='url gambar korang' style='width: 999px; height: 204px;'/>
</center>
url gambar korang : tukar dengan url gambar yang korang nak dan
999 : ubahsuai mengikut lebar gambar korang…
204 : ubahsuai mengikut tinggi gambar korang…
4. preview dulu, kalau dah ok, ‘save template’ ok?..
 
Kredit By Gary

TERIMA KASIH SUDI BACA DAN KOMEN

Freebies Dari Blog Baby Doll

Cantik tak?hehehe kalau cantik boleh pilih yg mana berkenan...

                                                                                                                 


Barbie Marshmello Style

                                                                                                            


Mini Cute Icon

                                                                                                                                                                                                                                  


Barbie Pink Smile

                                                                                                                                                                                                                                                                                                                                                                       


Crayon Smiles



TERIMA KASIH SUDI BACA DAN KOMEN