Tutorial : Menu Tab ( Mine Version )

Hey ! Now Anna nak buat tuto menu tab macam kat blog Anna tuh. Act , ada kawan blogging tanya Anna sebab dia cakap nampak simple dan kemas. So thats why Anna nak buat tuto ni :) 

1. Go to Layout --> Add a Gadjet --> HTML/JavaScript

2. Paste kan code di bawah ni : 

<div style="background: #FAB6EF repeat; repeat; padding: 5px; border:2px solid #C3A5B4; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px;"><center></center>

<center><a href="http://www.blogger.com/" target="_blank"><img style="width: 150px; height: 40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPqbrEelj2EszDUML4H6AU3nr974zPlJ5NOmdUEDa2jEO96twhq-rNOLiI6DanB3IXDA1EY-KjK3bvUXGp_wZUvTW4sBNrDq_Vcw8yTph3yE8MfZBQ_IYY3po5v4CIIsYWBtJUIik3-eE/s1600/HOME2.jpg" border="0" /></a>

<a href="http://annamammamia.blogspot.com/2012/12/salam-perkenalan.html" target="_blank"><img style="width: 150px; height: 40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeHpPgzF_J0Az_p1bXR6rlbOlMPtta8Fr0O6RxNic_YAZDBu_GnlMeF6CNTR-4g9CcL1wHZa72JZp12baHsJ4IL6IzlxSiBS8mRDzCcDrRbl2-hBXZRVG3xZzqMFFkxtiWyvyND8cAo9E/s1600/MY2.jpg" border="0" /></a>

<a href="http://annamammamia.blogspot.com/2013/04/tutorial-by-anna.html" target="_blank"><img style="width: 150px; height: 40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-dIpEUV7QBi3R2EImVoeylqMGlnmYofFqRghSV9kuoh44CH1jyQeFaFZta9FwTYW6qYMZxGFHZUw_5xUbeO3Bvrym3CyxLFAZZbw6bWTXe7mFM49eKlitUyMXNsr6Zoi71G4_zuZYM8/s1600/images+(37).jpg" border="0" /></a>

<a href="http://annamammamia.blogspot.com/2013/04/info-by-anna.html" target="_blank"><img style="width: 150px; height: 40px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQEwVCe9DPEUNxcI7CxWH2Rlhtk4edWx2BONWut_845nC7wvFl1Yhv20qwia7899TnXrSuh-2dusmHH8yGx2VrmF035lxcJoX6bavd8_jsg3rhVDjgOpI7fVZFcK_a3XdzmrwCUIwE00/s1600/HOT2.jpg" border="0" /></a></center></div>

3. Done !

* Blue - URL link 
   Red - Link Gambar  

Tweet

---

- Thanks for Reading . Do Like and Comment :) -

---

Tutorial : Letak Bloglist

Hai Assalamualaikum :) Okay tadi ade blogger tanye anna macam mane nak buat bloglist. So anna tunjukkan laa yea. Walaupun anna taw da ramai yang taw kan. 
1 ) Go Layout --> Edit Widget . 
2 ) Pastu mesti kuar macam ni kan 

Scroll sampai jumpe BLOGLIST tuh . 

3 ) Click bloglist tu n akan kuar macam ni pulak kan .

Then click kat kotak merah tuh.

4 ) So akan kuar ni pulak .

Then just letak URL BLOG yang awak nak letak kat kotak merah tuh :)

Finally siap !

Tweet

---

- Thanks for Reading . Do Like and Comment :) -

---

Tutorial : Letak Button Follow Di Facebook

Hye apa khabar sume ? Dah lame rasenye Anna tak buat tutorial right? So today Anna nak buat satu tutorial yang berkaitan dengan Facebook. Haa sekarang Facebook dah pun menyediakan button subscribe atau yang latest sekarang dah ditukar kepada Follow pulak. Hahah nak tiru macam twitter laa tuh. So korang nak buat? Jom follow tuto bawah ni :)

Okay tuh laa rupe nye kalau yang belum ade button follow . 

Haa ni kalau yang dah ade button follow. So nampak tak perbezaannya ? Bagus :)

1. Pergi ke Account Setting korang.

2. Then kat bahagian tepi tuh ade button subcribers kan? Or maybe dia dah tuka ke follow ? 

3. Then tick bahagian atas sekali ..

4. So done ! 

But macam kawan Anna punye , dia takde button subscribe macam kat no. 2 tuh. So kalau korang takde button tuh, maaf laa. Anna tak leh nak tolong :( Lagipun button ni untuk yang berumur 18 tahun ke atas SAHAJA .

Tweet

---

- Thanks for Reading . Do Like and Comment :) -

---

Tutorial : Menu Tab di Sidebar

Hi tengah malam ni Anna nak share satu tuto lagi. Act akak Nao Mei ade tanya Anna macam mane nak buat  Tab Menu kat Sidebar. So i hve found this tuto and credit to : Fara :)

This picture Credit to : Fara :)

Akak , betul ke yang macam ni ? Anna harap betul laa yea ? Heheh :)

So jom follow tuto bawah ni :-

1. Go to Layout  >  Add a Gadjet  >  HTML/Java Script Box

2. Then copy code kat bawah ni n paste kan kat kotak HTML tadi .

<style>.kotak navigation {text-align:left;width:290px;color:#333333}a.navigation {cursor:vertical-text;background-image:url(URL BACKGROUND);width:75px;text-decoration:none;color:#333333;display:inline-block;border:2px outset #cecece;text-align:center;font:14px Yanone Kaffeesatz;letter-spacing:2px;-webkit-transition-duration:0.5s;}a.navigation:hover {border:2px ridge #cecece;background-image:url(URL BACKGROUND);background-position:50% 80%;background-size:400px;color:#fff;-webkit-transition-duration:0.5s;}#fh img { max-width:260px;} </style><center><div class="kotaknavigation"><a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('a').innerHTML" >TAB1</a><a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('b').innerHTML" >TAB2</a><a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('c').innerHTML" >TAB3</a></div></center><div id="fh" style="width:270px;color:#333333;font:12px verdana;"><br />ISI FRONT PAGE (SEBELUM tab 1 and etc)</div><div id="a" style="display: none;">ISI UNTUK TAB1</div><div id="b" style="display: none;">ISI UNTUK TAB2</div><div id="c" style="display: none;">ISI UNTUK TAB3</div>

3. Last Save ! 

*  Boleh ubah sendiri maklumat yang diperlukan macam URL BACKGROUND , CODE WARNA tu yea :)

* CODE WARNA DI SINI !

Tweet

---

- Thanks for Reading . Do Like and Comment :) -

---

Tutorial : Cara Dapatkan Coding Untuk Follower

Hi harini Anna nak buat tuto macam mane nak dapatkan coding untuk follower :)

1) Pergi ke Google Friend Connect

2) Klik setting >> masukkan nama dan url blog >> kemudian klik save your settings

3) Klik Gadgets >> Pilih Members 

4) Adjust width, colour dan font ikut citarasa yang anda mahu.

5) Dah siap adjust semua, klik Generate kod dan copy kod yang tertera.

6) SIAP !

Copy code tu kat sidebar korang. Tu pon kalau korang ade buat ape-ape perubahan kat sidebar korang :)

Tweet

---

- Thanks for Reading . Do Like and Comment :) -

---

Tutorial : Popular Post ( Colorful )

Hey harini Anna nak buat tuto pasal popular post tapi yang colorful punye laaa. Macam Anna punye ni haaa 

Haa daa taw ? Nak buat ? Meh follow bawah ni :-

1) Layout > Add A Gadget > Choose Popular Posts. 

2) SILA UNTICK IMAGE THUMBNAIL dan SNIPPET. Display up to korang boleh adjust, anna prefer buat 5 je.

3) SAVE.

4) Seterusnya, Template > Edit HTML > Proceed > Tick Expand Widget Templates.

5) Click CTRL+F, search this code :

]]></b:skin>

 6) Copy code ni dan paste kat ATAS code yang korang cari tu :

/* 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: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; 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:left;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}

  

7) Preview and Save ! 

Tweet

---

- Thanks for Reading . Do Like and Comment :) -

---

TUTORIAL BY ANNA

TUTORIAL 
Hi ! Sekarang ni Anna mula nak berjinak-jinak dalam tutorial. After dah 3 bulan Anna berblogging ni, Anna dah mula taw tentang kod html, tentang edit sana edit sini. Blog Anna yang sekarang ni pon memang jauh berbeza daripada first blog Anna dulu. Seriously ! So bile dah banyak kali Anna blogwalking sana sini, terasa macam nak buat tutorial jugak. So i hope korang boleh laa support Anna yea ? Thank you :)

Tutorial For Windows / etc :-

1. Tutorial : Tukar Background Google Chrome 2. Tutorial : Letak Button Follow Di Facebook 3. Coming Soon

Tutorial For Bloggers :-

1. Tutorial : Letak Conversation Tweets Di Blog 2. Tutorial : Popular Post ( Colorful ) 3. Tutorial : Cara Dapatkan Coding Untuk Follower 4. Tutorial : Menu Tab Di Sidebar 5. Tutorial :  Letak Bloglist Di Sidebar 6. Tutorial : Menu Tab ( Mine Version )

Freebies Background :-

1. Freebies : Beautiful Stripe  
2. Freebies : Vertical Stripe
3. Freebies : New Tribal
4. Freebies : Cute Kawaii
5. Freebies : Sweet Vintage

Tweet

---

- Thanks for Reading . Do Like and Comment :) -

---

Tutorial : Letak Conversation Tweets Di Blog

Hi hi hi ! Tengah - tengah petang camni , rase bosan plak kan . So Anna nak buat tuto pasal widget twitter macam Anna punye ni haaa : 

Haa amacam nak buat tak ? Hmm so cer tengok bawah ni :- 

1) Log In Twitter korang dulu.
2) Pergi Setting > Profile.
3) Sila letak URL blog korang under website tu. Look at this picture :

4) Okay now tekan Widgets pulak and Create New.

Dapat macam ni kan? Korang setting la apa yang patut. Height Anna cadangkan korang buat 350. Lepas dah puas hati tekan CREATE WIDGET.

5) Now from your blog, Layout > Add A Gadget > Choose HTML/Javascript.

6) Paste code yang korang dah copy tu kat ruangan HTML/Javascript tu.

7) Save and you're done! :D

SHARING IS CARING :)

Tweet

---

- Thanks for Reading . Do Like and Comment :) -

---

Tutorial : Tukar Background Google

Harini Anna tetiba rase nak buat tutorial plak. Tapi ni bukan tuto untuk blog yea. Ni untuk background google korang. 

See mine ? Cantik tak ? Cantik tak ? Hahah perasan ! Nak buat ? Jom follow tuto bawah ni yea ? 

Haa nampak tak yang Anna suh click tuh ? So bile dah click , dia akan keluar banyak option. But sory laa Anna tak boleh nak print screen. Bile dah kuar tuh , korang pilih option SETTING taw !

Then bile dah pilih SETTING , akan keluar macam tuh pulak . So click kat kotak GET THEMES yang Anna dah highlight kan tuh yea . 

Bile korang dah click GET THEMES tuh , keluar macam ni pulak . So korang pilih laaa mane mane themes yang korang suke . Macam contoh yang Anna tunjuk kat atas tuh , tu kalau korang dah halakan cursor korang kat themes yang korang suke , dia akan jadi macam tuh . So jz click CHOOSE THEME . 

Then bile dah habis download , cer korang REFRESH or bukak NEW TAB . See ? Cantik kan ? Takde laa bosan asep tengok tema yang same je kan kan ? Heheh . 

SELAMAT BERJAYA !

Tweet

---

- Thanks for Reading . Do Like and Comment :) -

---