MUET Tips and Trick

Assalamualaikum dan hi semua... Kali ini saya ingin bercerita tentang Malaysian University English Test aka MUET.

Apa itu MUET?
The Malaysian University English Test (MUET) is a test of English language proficiency, largely for university admissions. The test is set and run by the Malaysian Examinations Council (which also runs the Sijil Tinggi Persekolahan Malaysia examination). MUET is largely recognised only in Malaysia and Singapore. However, a small number of universities outside Malaysia and Singapore do recognise MUET.

Most candidates who sit for MUET do so to apply for admissions in public and private universities and colleges. MUET is a prerequisite in applying for admissions into all public universities and colleges in Malaysia. MUET is also accepted for admissions into most universities in Singapore.
Source.

MUET test akan dihadapi oleh pelajar Matrikulasi, Asasi, Tingkatan 6, dan juga Diploma.Result MUET bertahan selama 5 tahun sahaja sekiranya tempoh tamat, kenalah Re-take test MUET.
MUET dinilai berdasarkan "BAND" bermula dari band 1 sehingga band 6. Band 1 merupakan band minima dan band 6 merupakan band maksima.

Band 1- Penguasaan bahasa Inggeris yang amat lemah dan hampir tidak dapat menguasai bahasa Inggeris.
Band 2- Penguasaan bahasa yang terhad. Kurang ekspresi, kefasihan dan ketepatan. Selalunya menyebabkan salah dalam komunikasi dalam bahasa Inggeris.
Band 3 – Pemahaman yang sederhana tentang bahasa inggeris dan konteks. Berfungsi dengan sederhana dalam bahasa.
Band 4- Pengguna yang fasih dan dapat menguasai bahasa inggeris. Dapat berfungsi dengan kompeten
Band 5- Pengguna yang bagus dan penguasaan yang bagus. Pemahaman yang baik dalam bahasa inggeris
Band 6- Penguasaan bahasa inggeris yang sangat bagus dan hampir-hampir tiada kesilapan dalam penguasaan MUET.

Alhamdulillah Band saya bagi MUET yg pertama kali saya ambil adalah Band 4.

Apa yang diuji dalam MUET ?
All your english skill ( Speaking , Writing, Listening and Reading ).

Mengapa MUET penting ?
Salah satu syarat wajib untuk layak memohon UPU bagi melanjutkan pelajaran ke peringkat ijazah adalah mengambil ujian MUET. Kalau nak sambung peringkat Degree, kenalah ambil ujian ini. Bagi setiap kos yang kita mohon untuk UPU, ada syarat minima yang diletakkan ke atas keputusan MUET pemohon.

Bahasa Inggeris merupakan bahasa Lingua franca ( Bahasa yg kita gunakan untuk bercakap dengan orang yg tidak faham bahasa kebangsaan kita ). Kalau MUET kita result tak okay, kita tak layak memohon untuk menyambung pelajaran ke luar negara.

Baiklah, saya akan kongsikan pengalaman saya mengambil MUET, dan bagaimana cara untuk lulus MUET ( Samalah macam cara nak tingkatkan kebolehan Bahasa Inggeris).

Lulus MUET : Sekurang- kurangnya perlu dapat Band 2 untuk lulus MUET. Tapi, bagi kami pelajar sains Band 3 merupakan band minima. Mengapa? kerana kebanyakan kos sains dan kos kejuruteraan yang ditawarkan di Universiti awam memerlukan sekurang- kurangnya Band 3 untuk MUET. Ianya
bergantung kepada syarat yg ditetapkan oleh setiap Universiti.

Saya ni bukanlah cikgu English yang pro dalam bab ini tetapi, ini hanyalah sekadar perkongsian berdasarkan apa yang telah saya pelajari.

Tips lulus MUET :

1. Mengetahui aspek-aspek yang akan diuji iaitu bentuk dan format peperiksaan.
2. Perlu tahu cara pemarkahan untuk setiap aspek.
3. Mahirkan dengan bentuk soalan dan format peperiksaan ( Banyakkan buat latihan past year MUET  )
4. Persediaan dari segi grammar atau tatabahasa. ( Banyakkan membaca buku English )
5. Persediaan dari segi vocabulary atau kosa kata.
6. Persediaan dari segi perbualan. ( Banyakkan bercakap dalam Bahasa Inggeris dengan kawan-kawan )
7. Latih tubi yang berterusan.

Tips untuk ujian reading :

1. Baca soalan dahulu baru baca text yg panjang tu. ( Supaya kita tahu apa yg perlu dicari dalam teks )
2. Kalau nak baca text dahulu boleh juga tetapi, baca hanya sekali lintas. ( Jangan baca terlalu lama )
3. Untuk pilihan objektif, potong pilihan jawapan yg anda rasa paling tak masuk akal. ( Potong jawapan yg paling salah / tak logik )
4. Tinggalkan jawapan yg terbaik. Pilih jawapan yg ada kena mengena dengan teks ( yg paling logik. )
5. Jangan malas membaca teks dan jangan jawab sambil lewa. Peruntukkan masa untuk memilih jawapan yg betul.
6. Semak jawapan ( Jangan keluar dewan awal, jangan over-confident )

Tips untuk ujian writing :

1. Cari frasa-frasa menarik BI di dalam buku atau laman web kemudian, cuba hafalkan dan fahamkan.
2. Jangan buat karangan panjang berjela tapi, isi tak ada.
3. Senaraikan isi-isi yg dapat dikeluarkan setelah membaca tajuk soalan.
4. Tulis isi dan kembangkan dalam bentuk mind map.
5. Jawab soalan berdasarkan WH question. What ? Why ? When ? Who? Where ?

Tips untuk ujian speaking :

1. Buat latihan speaking dengan ahli group yg ditetapkan untuk MUET sebenar.
2. Tulis isi penting berdasarkan tajuk perbincangan. 
3. Jangan tulis huraian panjang sebab nanti kita akan baca apa yg kita tulis tanpa cuba keluarkan hujah yg spontan. ( Ini ujian speaking bukan reading).
4. Beri perhatian semasa candidate lain sedang berhujah. ( Jangan potong hujah mereka )
5. Gunakan bahasa formal. ( Jangan guna Harsh word like bit**, fu** )

Tips untuk ujian listening :

1. Pastikan telinga berfungsi dengan baik sebelum test listening. XD ( Bersihkan telinga dengan cotton bud ).
2. Banyakkan tonton movie yg menggunakan Bahasa Inggeris. ( Without subtitle )
3. Fokus sepenuhnya kepada speaker.
4. Senaraikan isi-isi penting berdasarkan audio di kertas jawapan. ( Penting supaya kita dapat ingat balik apa yang kita dengar ).

Itulah dia serba sedikit tips untuk menghadapi MUET. Mana yang anda rasa membantu bolehlah diamalkan.Untuk mendapatkan panduan yg lebih sahih bolehlah merujuk pada buku-buku MUET atau merujuk pada guru yang bertauliah.

4 Style Box Hover Effect

Assalamualaikum and hi people.. I am back with another tutorial. This box can be use as a blog skin preview box or anything you want it to be. I learnt it from HERE.

• 1. Firstly, Log in your blogger account.
• 2. Go to Dashboard > Page > Make new page / Edit already created page.
• 3. Click on HTML  
• 4. Copy any code below based on the style that you want and paste it on the HTML section.
• 5. You can also copy and paste the code anywhere you want it to appear by adding HTML/Javascript widget and paste the code on the widget.

Style 1 [ Click for Preview ]

<link href="https://fonts.googleapis.com/css?family=Cherry+Cream+Soda" rel="stylesheet">
<style>
.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   border: 7px dotted #EEEEEE;
   outline: 3px solid #DDDDDD;
   overflow: hidden;
   display:inline-block;
   position:relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #DDDDDD;
   -moz-box-shadow: 1px 1px 2px #DDDDDD;
   box-shadow: 1px 1px 2px #DDDDDD;
   background:url(https://i961.photobucket.com/albums/ae92/Jurishi/Backgrounds/dot02_pink.gif) repeat center center;
}
.view-one img {
  padding: 0px;
  border: 0px solid #FFFFFF;
  -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   -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;
}
.view-one .mask {
   background-color: rgba(255,223,91,0.3);
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -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;
}

.view-one:hover .mask {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-one:hover img {
   -webkit-transform: translateY(200px);
   -moz-transform: translateY(200px);
   -o-transform: translateY(200px);
   -ms-transform: translateY(200px);
   transform: translateY(200px);
}
.view-one:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   text-align: center;
   position: relative;
   font: 18px 'Cherry Cream Soda';
   padding: 10px;
   background: #bcd7ff;
   color: #FFFFFF;
   text-shadow:1px 1px 3px #222222;
   -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   margin: 25px 0 0 0;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 10px 10px;
   font:17px century gothic;
   background: #ff96aa;
   color: #FFFFFF;
   margin-top:50px;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #FF899C;
   -moz-box-shadow: 0 0 1px #FF899C;
   box-shadow: 0 0 1px #FF899C;
}
.view a.info:hover {
   -webkit-box-shadow: 0px 3px 13px #FF899C;
   -moz-box-shadow: 0px 3px 13px #FF899C;
   box-shadow: 0px 3px 13px #FF899C;
}
.nice {
height: 200px; padding: none; width: 300px;
}
</style>
<center>
<div class="view view-one">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<div class="view view-one">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<br />
<div class="view view-one">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<div class="view view-one">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<br />
</center>

Style 2 [ Click for Preview ]

<link href="https://fonts.googleapis.com/css?family=Cherry+Cream+Soda" rel="stylesheet">
<style>
.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   border: 7px dotted #EEEEEE;
   outline: 3px solid #DDDDDD;
   overflow: hidden;
   display:inline-block;
   position:relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #DDDDDD;
   -moz-box-shadow: 1px 1px 2px #DDDDDD;
   box-shadow: 1px 1px 2px #DDDDDD;
   background:url(https://i961.photobucket.com/albums/ae92/Jurishi/Backgrounds/dot02_pink.gif) repeat center center;
}
.view-two img {
  padding: 0px;
  border: 0px solid #FFFFFF;
  -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
   -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;
}
.view-two img {
   -webkit-transition: all 0.4s ease-in-out 0.2s;
   -moz-transition: all 0.4s ease-in-out 0.2s;
   -o-transition: all 0.4s ease-in-out 0.2s;
   -ms-transition: all 0.4s ease-in-out 0.2s;
   transition: all 0.4s ease-in-out 0.2s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-two .mask {
   background-color:rgba(255,223,91,0.3);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0) rotate(-180deg);
   -moz-transform: scale(0) rotate(-180deg);
   -o-transform: scale(0) rotate(-180deg);
   -ms-transform: scale(0) rotate(-180deg);
   transform: scale(0) rotate(-180deg);
   -webkit-transition: all 0.4s ease-in;
   -moz-transition: all 0.4s ease-in;
   -o-transition: all 0.4s ease-in;
   -ms-transition: all 0.4s ease-in;
   transition: all 0.4s ease-in;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
}
.view-two h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-two p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-two a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-two:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view-two:hover img {
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-two:hover h2,
.view-two:hover p,
.view-two:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}

.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   text-align: center;
   position: relative;
   font: 18px 'Cherry Cream Soda';
   padding: 10px;
   background: #bcd7ff;
   color: #FFFFFF;
   text-shadow:1px 1px 3px #222222;
   -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   margin: 25px 0 0 0;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 10px 10px;
   font:17px century gothic;
   background: #ff96aa;
   color: #FFFFFF;
   margin-top:50px;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #FF899C;
   -moz-box-shadow: 0 0 1px #FF899C;
   box-shadow: 0 0 1px #FF899C;
}
.view a.info:hover {
   -webkit-box-shadow: 0px 3px 13px #FF899C;
   -moz-box-shadow: 0px 3px 13px #FF899C;
   box-shadow: 0px 3px 13px #FF899C;
}
.nice {
height: 200px; padding: none; width: 300px;
}
</style>
<center>
<div class="view view-two">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<div class="view view-two">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<br />
<div class="view view-two">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<div class="view view-two">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<br />
</center>

Style 3 [ Click for Preview ]

<link href="https://fonts.googleapis.com/css?family=Cherry+Cream+Soda" rel="stylesheet">
<style>
.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   border: 7px dotted #EEEEEE;
   outline: 3px solid #DDDDDD;
   overflow: hidden;
   display:inline-block;
   position:relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #DDDDDD;
   -moz-box-shadow: 1px 1px 2px #DDDDDD;
   box-shadow: 1px 1px 2px #DDDDDD;
   background:url(https://i961.photobucket.com/albums/ae92/Jurishi/Backgrounds/dot02_pink.gif) repeat center center;
}
.view-three .mask {
   background-color: rgba(255, 255, 255, 0.7);
   top: -200px;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-out 0.5s;
   -moz-transition: all 0.3s ease-out 0.5s;
   -o-transition: all 0.3s ease-out 0.5s;
   -ms-transition: all 0.3s ease-out 0.5s;
   transition: all 0.3s ease-out 0.5s;
}
.view-three h2 {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.1s;
   -moz-transition: all 0.2s ease-in-out 0.1s;
   -o-transition: all 0.2s ease-in-out 0.1s;
   -ms-transition: all 0.2s ease-in-out 0.1s;
   transition: all 0.2s ease-in-out 0.1s;
}
.view-three p {
   color: #333;
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.2s;
   -moz-transition: all 0.2s ease-in-out 0.2s;
   -o-transition: all 0.2s ease-in-out 0.2s;
   -ms-transition: all 0.2s ease-in-out 0.2s;
   transition: all 0.2s ease-in-out 0.2s;
}
.view-three a.info {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.3s;
   -moz-transition: all 0.2s ease-in-out 0.3s;
   -o-transition: all 0.2s ease-in-out 0.3s;
   -ms-transition: all 0.2s ease-in-out 0.3s;
   transition: all 0.2s ease-in-out 0.3s;
}
.view-three:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   top: 0px;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: bounceY 0.9s linear;
   -moz-animation: bounceY 0.9s linear;
   -ms-animation: bounceY 0.9s linear;
   animation: bounceY 0.9s linear;
}
.view-three:hover h2 {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-three:hover p {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view-three:hover a.info {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
    0% { -moz-transform: translateY(-205px);}
    40% { -moz-transform: translateY(-100px);}
    65% { -moz-transform: translateY(-52px);}
    82% { -moz-transform: translateY(-25px);}
    92% { -moz-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
    0% { -webkit-transform: translateY(-205px);}
    40% { -webkit-transform: translateY(-100px);}
    65% { -webkit-transform: translateY(-52px);}
    82% { -webkit-transform: translateY(-25px);}
    92% { -webkit-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}

.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   text-align: center;
   position: relative;
   font: 18px 'Cherry Cream Soda';
   padding: 10px;
   background: #bcd7ff;
   color: #FFFFFF;
   text-shadow:1px 1px 3px #222222;
   -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   margin: 25px 0 0 0;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 10px 10px;
   font:17px century gothic;
   background: #ff96aa;
   color: #FFFFFF;
   margin-top:50px;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #FF899C;
   -moz-box-shadow: 0 0 1px #FF899C;
   box-shadow: 0 0 1px #FF899C;
}
.view a.info:hover {
   -webkit-box-shadow: 0px 3px 13px #FF899C;
   -moz-box-shadow: 0px 3px 13px #FF899C;
   box-shadow: 0px 3px 13px #FF899C;
}
.nice {
height: 200px; padding: none; width: 300px;
}
</style>
<center>
<div class="view view-three">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<div class="view view-three">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<br />
<div class="view view-three">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<div class="view view-three">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<br />
</center>

Style 4 [ Click for Preview ]

<link href="https://fonts.googleapis.com/css?family=Cherry+Cream+Soda" rel="stylesheet">
<style>
.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   border: 7px dotted #EEEEEE;
   outline: 3px solid #DDDDDD;
   overflow: hidden;
   display:inline-block;
   position:relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #DDDDDD;
   -moz-box-shadow: 1px 1px 2px #DDDDDD;
   box-shadow: 1px 1px 2px #DDDDDD;
   background:url(https://i961.photobucket.com/albums/ae92/Jurishi/Backgrounds/dot02_pink.gif) repeat center center;
}
.view-four img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.view-four .mask {
   background-color: rgba(255, 231, 179, 0.3);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-four h2 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   color: #333;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-four p {
   color: #333;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-four a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-four:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-four:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-four:hover h2,.view-four:hover p,.view-four:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   text-align: center;
   position: relative;
   font: 18px 'Cherry Cream Soda';
   padding: 10px;
   background: #bcd7ff;
   color: #FFFFFF;
   text-shadow:1px 1px 3px #222222;
   -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   margin: 25px 0 0 0;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 10px 10px;
   font:17px century gothic;
   background: #ff96aa;
   color: #FFFFFF;
   margin-top:50px;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #FF899C;
   -moz-box-shadow: 0 0 1px #FF899C;
   box-shadow: 0 0 1px #FF899C;
}
.view a.info:hover {
   -webkit-box-shadow: 0px 3px 13px #FF899C;
   -moz-box-shadow: 0px 3px 13px #FF899C;
   box-shadow: 0px 3px 13px #FF899C;
}
.nice {
height: 200px; padding: none; width: 300px;
}
</style>
<center>
<div class="view view-four">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<div class="view view-four">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<br />
<div class="view view-four">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<div class="view view-four">
<img class="nice" src="IMAGE URL" />
                    <br />
<div class="mask">
<h2>
TITLE</h2>
<a class="info" href="POST URL">Skin detail</a>
                    </div>
</div>
<br />
</center>

Now done, PREVIEW AND SAVE ^^

You can freely edit the code by your own.. ;-)

Navigation Bar stay on top

Assalamualaikum and hello buddies.. ;-) Well, the title seem weird though..huhu Don't mind it
What I really mean about the navigation bar is it will stay on top of the webpage when you scroll your blog passing the navigation bar. If you had no idea what's I am talking about, VIEW IT HERE.

I don't know how to make a tutorial about this actually, because the code required your self modification to make it work for your blog.
If the navigation does not seem  to perfectly suit your blog, you may need to edit the position, margin, size, or padding.

1. Firstly, Log in your blogger account.
2. Go to Dashboard > Layout > Add  a Gadget ( Below header ) > HTML/JavaScript

Copy below code and paste it on the HTML/Javascipt content.
If you wish to customize it first, paste it here first.Next, paste the edited code to the HTML/Javascript

<head></head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// If you have jQuery directly, then skip next line
google.load("jquery", "1");
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#nav-anchor').offset().top;
if (window_top > div_top)
$('#sticky').addClass('nav')
else
$('#sticky').removeClass('nav');
}
// If you have jQuery directly, use the following line, instead
// $(function() {
// If you have jQuery via Google AJAX Libraries
google.setOnLoadCallback(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
<style>
/* Custom Tabs
----------------------------------------------- */
#navigation {
    left: 0px;
    position: absolute;
    background-color: #F7CDFF;
    background-image:url( http://colourlovers.com.s3.amazonaws.com/images/patterns/3827/3827607.png);
    width: 100%;
    margin-top: 0px;
    text-align: center;
    z-index: 999;
    height: 40px;
}

#nav {
    left: 0px;
    position: absolute;
    width: 100%;
    padding-top:5px;
    text-align: center;
    z-index: 999;
}

#nav a {
font-weight:bold;
width:90px;
background-color: #B4E3C8;
border: 2px solid #F1D5CF;
font:12px century gothic;
text-align:center;
Text-decoration:none;
color:#222222;
display:inline-block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
padding-top:5px; padding-bottom:5px;
display:inline-block;
}

#nav a:hover {
    border: 2px solid #DFA3A3;
    color: #B49F80;
    background-color: #C7F4E0;
}

#sticky {
    background-color: transparent;
    padding: 0px;
    width: 100%;
}

#sticky.nav {
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: .5;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#sticky.nav:hover{
    opacity: 1;
}
</style>
<center>
<div id="navigation"><div id="nav"><div id="nav-anchor"><div id="sticky">
<a href="https://LINK">HOME</a>
<a href="https://LINK">ABOUT</a>
<a href="https://LINK">TUTORS</a>
<a href="https://LINK">EXTRAS</a>
<a href="https://LINK">THEME</a>
<a href="https://LINK" >LINKIES</a>
</div></div></div></div>
</center>

After you paste the code, save it.

The Note :
Color code here

Red Text : Background URL find HERE
Blue Text : Background Color
Orange Text : Border Color
Fuchsia Text : Text Color
Green Text : Link URL
Purple Text : Link Title

All done now, see the result on your blog
Do comment dear for any inquiries or request ^^,

Bacelor Dietitic Interview

Assalamualaikum dan hai semua.. (^^,)/ Kali ni saya nak bercerita tentang temuduga saya untuk Ijazah iaitu bagi kos Dietetik.
Kos Dietetik ini merupakan pilihan pertama dan kedua saya bagi UPU untuk UKM dan UPM dan merupakan pilihan pertama saya bagi USM. Alhamdulillah, saya dapat panggilan temuduga bagi ketiga-tiga tempat yang saya mohon tu.Tapi ceritanya, yang USM tu saya tak pergi sebab panggilannya awal sangat ( seminggu selepas tamat matrik ) lepastu, tempat temuduganya boleh tahan jauhnya ( Kubang Kerian, Kelantan ). Dari Pasir Gudang, Johor nak ke situ lebih kurang 10 jam lah kalau guna lebuh raya naik kereta. Untuk UKM dengan UPM tu Alhamdulillah berkesempatan datang dan sertai temuduga.

Apa itu Kos Dietetik ?

Kos Dietitik ini dibawah Fakulti Sains Kesihatan. Dietetik merujuk kepada aplikasi terapi pemakanan mengikut status kesihatan individu atau kumpulan. Kurikulum Dietetik direka dengan kursus asas seperti biokimia, anatomi, fisiologi, imunologi, farmakologi, mikrobiologi dan kursus berkaitan dengan bidang dietetik seperti perkhidmatan makanan, terapi pemakanan perubatan, perkhidmatan dietetik komuniti, penyelidikan dietitik, perkhidmatan dietetik luar dan dalam wad supaya dapat menyediakan latar belakang sains untuk memahami konsep dalam makanan, pemakanan dan dietetik. Maklumat lanjut boleh baca di laman web ini http://www.ukm.my/fsk/ms/pusat-pengajian/pusat-pengajian-sains-jagaan-kesihatan/program-dietetik

Baiklah, sekarang saya akan bercerita tentang temuduga yang saya hadiri di UKM dan USM.

Temuduga Dietetik di UKM.

Tarikh temuduga UKM adalah pada 28.5.2016. Masa dari 8 pagi sehingga 12.30 tghari.Tempat : Klinik audiologi dan sains pertuturan,UKM KL. Saya bertolak dari Johor jam 5.30 pagi, sampai sana pukul 10 lebih rasanya sebab sesat. huhu
Dapat giliran no 86 daripada 100 lebih kot yang dapat kos tu.Masa saya datang tu tengah giliran no 30 something.Lepas ambil nombor, duduklah tunggu giliran bawah khemah ( ingatkan sekejap je ). Selepas dah pergi beli air, makan buah, makan roti, pergi surau solat zuhur, Tunggu punya tunggu, sampai lepas zuhur pukul 3 ptg baru sampai giliran saya. Padahal sepatutnya saya ada temuduga pemakanan jugak kat tempat sama dari 12.30 tghari sampai 2.30 ptg jadi, ceritanya saya tak pergilah temuduga pemakanan tu lagipun kos pemakanan ni ramai yang mohon dan dapat ( dalam 200 lebih ).Dietetik ni susah lagi kot nak dapat.

Suasana semasa temuduga.
Dia panggil 3 orang untuk setiap sesi temuduga, penemuduga 2 orang, temuduga di dalam sebuah bilik tertutup. Masatu saya temuduga dengan seorang kawan saya dan seorang gadis bangsa Cina lepasan STPM.
Temuduga dalam Bahasa Melayu dan Inggeris tapi, penemubual lontarkan soalan dalam Bahasa Inggeris. ( Kena fahamlah soalan dengan betul )

Soalan yang dikemukakan kepada kami :

Dia tanya apa pilihan 1-4 UPU

• 1. Introduce yourself. ( Terangkanlah pasal diri, keluarga,hobi )
• 2. Why choose dietitic course. ( Jawablah ikut logik akal ) Saya jawab : sebab minat bab pemakanan, minat makan, masak. haha ( panjang sebenarnya jawapan saya XD )
• 3. Your strength and weakness. ( Promotlah diri tu, kelemahan diri tu buat ayat yang meyakinkan bahawa anda akan cuba perbaikinya atau kelemahan kalian yang nampak macam kelebihan. Contoh : Saya tak pandai memasak tapi, saya rajin belajar masak.
• 4. Cocuriculum achievement. ( Kalau ada masuk public speaking, syarahan, debat atau apa-apa yg sewaktu dengannya bagitahu lah yer tak kesah lah walaupun kalian masuk masa darjah 1 hahaha. Sebab kos ni memang memerlukan seseorang yg pandai bercakap.
• 5. What will you see yourself as in 10 years from now. ( A dietician )
• 6. Dia ada juga tanya pasal UKM. Bila ditubuhkan, nama ketua Jabatan, Dean list UKM. Yang ni saya tak dapat jawab sebab tak expect pon dia tanya pasal UKM T.T (sobs )

Itu sahaja rasanya soalannya. Temuduga saya tu dalam 10 minit jer dah siap. Tunggu giliran punyalah lama.

Temuduga Dietetik di UPM.

Tak sangka dapat jugak kat sini. Sebab UPM ambil kira result SPM jugak.Tarikh temuduga UPM adalah pada 31.5.2016. Masa jam 2.30. Tempatnya di Fakulti Perubatan dan Sains Kesihatan, UPM Serdang ( Sebelah Hospital Serdang je tempatnya ).
Sampai sana pukul 2.30 tepat. huhu ( punctual kan ). Tapi kan, dah ramai dah yang datang lagi awal..huhu saya ni kira giliran yg hampir last. haha tak tahu lah kenapa org lain datang awal  sangat. Lepastu bila dah sampai, tanya lah kat akak UPM tu mana tempatnya. Dah jumpa tempat, kena tunggu giliran. Pukul 3 nak ke 4 ptg sampailah ke giliran saya.
Satu sesi temuduga dia panggil dalam 5 orang, penemuduga 2 orang. Temuduga dalam Bahasa Inggeris ( Question and answer fully English ). Saya temuduga dengan 3 orang perempuan Melayu dan seorang gadis bangsa Cina ( Semua perempuan ) Tak ramai lelaki yg minat kos macam ini.

Soalan yang dikemukakan kepada kami :

Dia tanya pilihan 1-4 UPU

• 1. Introduce yourself.
• 2. Pointer matriculation / STPM/ Asasi
• 3. How you promote healthy eating lifestyle. ( Become volunteer, promote individually, promote by group )
• 4. How to attract child attention to eat healthy food. ( Decorate the food to look colorfull and cute )
• 5. What's your opinion on vaccin for children. ( Is it good or bad ) Yg ni dia tak tanya saya.. Syukur :D
• 6. Soalan KBAT dalam Bahasa Melayu. Lebih kurang begini lah soalannya : Aktiviti luar sekolah boleh menyebabkan pencapaian akademik terjejas. Bincangkan.

Ada ke patut dia suruh berdebat masa temuduga.. Berhuhuhu jela mampu. Saya pembangkang jadi saya jawablah tak setuju sebab, aktiviti luar sekolah ni boleh mencerdaskan otak, cergaskan badan, Tak menjejaskan akademik pun kalau pandai urus masa.

Itu je kot soalannya. Dalam 20 minit jugaklah temuduganya.

Bagi saya personally, UPM punya interview lagi mencabar. ( seriously ).
Pastikan lah kalian sediakan segala borang, dokumen yg diperlukan semasa temuduga. Kang tak pasal-pasal tak boleh daftar giliran. ( Susun dokumen kemas-kemas ) Curriculum Vitae aka Resume sediakan untuk ceritakan latar belakang anda. Kad pengenalan jangan tak bawak pulak.
Susun dalam fail yang kita senang nak keluarkan isinya.
Pasal dokumen ni UKM lagi titik beratkan daripada UPM. UPM tak perlu CV aka Resume.
Answer scheme and marking I tak sure lah right or wrong. Wallahualam. Tanyalah penemuduga tu yer macam mana dia menilai.
Rasanyalah dia akan tengok jugak penampilan diri. Baju tu jangan tak seterika pulak. Pastikan baju tak mencolok mata, sopan ( pakai baju kurung bagi wanita melayu )
Keyakinan diri. Suara jangan perlahan sangat tapi, jangan kuat sangat. Jangan potong apa orang cakap, jangan gagap-gagap, getar-getar, malu-malu kucing.

Kalau kalian berminat nak ambil kos ini untuk Ijazah, kenalah masuk Matrikulasi kos Sains ( Modul 1 atau Modul 3 ) modul 2 tak ambil Biologi tak boleh lah rasanya tapi kalau USM boleh dapat kalau SPM Biologi okay
@ Ambil asasi kos Sains @ Ambil STPM ( Form 6 ) kos sains.

SPM mesti ambil sains tulen ( Biologi wajib ). Biologi dan kimia SPM mesti B or above ( B, B+, A-, A)
Pointer matrikulasi sem 1 diambil kira untuk kelayakan temuduga. Yg ni tak pasti minimum berapa pointer. Lepas 3.5 dah okay kot dan Biologi dan kimia mesti perform well.
Syarat kelayakan kalau nak dapatkan maklumat yang sahih, kena tengoklah kat laman web rasmi Universiti.

By the way, kos bertemuduga setakat ini hanyalah
1. kos kritikal ( Perubatan ( Doktor ),Veterinar ( doktor haiwan), Farmasi, Pergigian ( Dentistry ).
2. Kejuruteraan ( tak semua jenis jurutera )
3. kejururawatan, dietetik untuk UKM semua kos bawah Fakulti Sains Kesihatan
4. Perakaunan ada juga temuduga ( yg bahagian luar dari Kos Sains saya tidak pasti )
.....dan sbgainya

Mohon jasa baik kalian untuk mendoakan saya agar diberikan tawaran melanjutkan pelajaran di Universiti yang terbaik untuk diri saya dan untuk kos yang paling sesuai untuk diri saya. Amin.
Kalau tak dapat kos dietetik ini pun tak apa.. Perancangan Allah kan yang terbaik. :-) Kita merancang, Allah juga merancang dan dia adalah sebaik-baik perancang.

P/S: 10/8/2016 ni result UPU keluar
Baiklah setakat disini sahaja laporan saya untuk kali ini. Ciau \o/

Add Recent Post Widget

Assalamualaikum and hi everyone. I will make a tutorial on how to add recent post widget for your blog. If you are wondering how the widget look like, take a look at the screenshot above.
This widget will show your blog newest to the oldest post.Okay, let's get started.

1. Firstly, Log in your blogger account.
2. Go to Dashboard > Layout > Add  a Gadget > HTML/JavaScript

Copy below code and paste it on the HTML/Javascipt content.
If you wish to customize it first, paste it here first.Next, paste the edited code to the HTML/Javascript

<script type='text/javascript'>
var numfeed = 4;
var startfeed = 0;
var urlblog = "https://kawaiilady.blogspot.com/";
var charac = 50;
var urlprevious, urlnext;

function cyberghost(ghost, banget) {
  var showfeed = ghost.split("<");
  for (var i = 0; i < showfeed.length; i++) {
    if (showfeed[i].indexOf(">") != -1) {
      showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">") + 1, showfeed[i].length);
    }
  }
  showfeed = showfeed.join("");
  showfeed = showfeed.substring(0, banget - 1);
  return showfeed;
}

function showterbaru(json) {
  var entry, posttitle, posturl, postimg, postcontent;
  var showblogfeed = "";
  urlprevious = "";
  urlnext = "";
  for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
      urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
      urlnext = json.feed.link[k].href;
    }
  }
  for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) {
      break;
    }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    } else {
      postcontent = "";
    }
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = "http://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif";
    }
    showblogfeed += "<div class='cg-elemen'>";
    showblogfeed += "<a =href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
    showblogfeed += "<p>" + cyberghost(postcontent, charac) + "...</p>";
    showblogfeed += "</div>";
  }
  document.getElementById("terbaru").innerHTML = showblogfeed;
  showblogfeed = "";
  if (urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
  } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
  }
  if (urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
  } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
  }
  showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
  document.getElementById("cg-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url) {
  var p, parameter;
  if (url == -1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
  } else if (url == 1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
  } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
  }
  parameter += "&callback=showterbaru";
  incluirscript(parameter);
}

function incluirscript(parameter) {
  if (startfeed == 1) {
    removerscript();
  }
  document.getElementById("terbaru").innerHTML = "<div id='cg-loading'></div>";
  document.getElementById("cg-navigasifeed").innerHTML = "";
  var archievefeed = urlblog + "/feeds/posts/default" + parameter;
  var terbaru = document.createElement('script');
  terbaru.setAttribute('type', 'text/javascript');
  terbaru.setAttribute('src', archievefeed);
  terbaru.setAttribute('id', 'MASLABEL');
  document.getElementsByTagName('head')[0].appendChild(terbaru);
  startfeed = 1;
}

function removerscript() {
  var elemen = document.getElementById("MASLABEL");
  var parent = elemen.parentNode;
  parent.removeChild(elemen);
}
onload = function() {
  navigasifeed(0);
}
</script>
<style>
/*Recent Post Navigation*/

.terbaru-container {
  background: #EAE1BB;
  width: 220px;
  padding: 5px;
}

#cg-terbaru {
  border: 1px solid #DDDDDD;
  width: 200px;
  margin: 0 auto;
}

#terbaru {
  margin: 0px;
}

.cg-elemen {
  margin-bottom: 5px;
  padding: 6px;
  height: 75px;
  background: #FFF5C6;
  border:2px solid #E5D89E;
  overflow: hidden;
  padding-bottom: 5px;
}

.cg-elemen img {
  padding: 0;
  float: left;
  height: 50px;
  margin-right: 10px;
  width: 50px;
  border:1px solid #888888;
}

.cg-elemen h6,
.cg-elemen h6 a {
  font-size: 11px!important;
  font-weight: bold;
  margin: 0;
  text-decoration:none;
  text-shadow:0px 0px #fff;
  color: #A77676;
  font-family:century gothic;
  letter-spacing:1px;
  text-transform: uppercase;
  text-align:left;
}
.cg-elemen h6 a:hover {
color:#666666;
}
.cg-elemen p {
  font-size: 12px;
  font-family: candara;
  text-align: left;
  color: #999999;
  line-height: normal;
  margin: 5px 0;
}

#cg-loading {
  color: #75b695;
  font-family: inherit;
  font-size: 100px;
  letter-spacing: -10px;
  text-align: center;
  text-shadow: -5px 0 1px #444;
  background: #FFF7D2 url(http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif) no-repeat 50% 50%;
  height: 406px;
}

#cg-navigasifeed {
  color: #888888;
  font-family: candara;
  font-size: 12px;
  text-align: center;
  margin: 0px;
}

#cg-navigasifeed a {
  color: #888888!important;
  font-family: inherit!important;
  font-size: 12px!important;
  font-weight: 400!important;
  display: block;
  padding: 5px 10px;
}

#cg-navigasifeed span {
  padding: 5px 10px;
}

#cg-navigasifeed .next {
  float: right;
}

#cg-navigasifeed .previous {
  float: left;
}

#cg-navigasifeed .home {
  text-align: center;
}

#cg-navigasifeed a:hover,
#cg-navigasifeed span.noactived {
  color: transparant!important;
}
@media screen and (max-width:700px) {
    .terbaru-container, #terbaru, #cg-navigasifeed {
        width:auto;
    }
}


@media screen and (max-width:300px) {
    .cg-elemen img {
        display:none;
    }
}


Lanjut, Sekarang Tinggal Memasukan Javascriptnya.
Cari

</style>
<center><div class="terbaru-container">
    <div id="terbaru"></div>
    <div id="cg-navigasifeed"></div>
  </div></center>

After you paste the code, save it.

The Note :
color code here

Red Text : Your blog url ( with HTTPS )
Orange Text : Number of character for post
Blue Text : Number of post to be shown per page
Fuchsia Text : Background and border color
Green Text : Color of text
Purple Text : Width of widget

All done now, see the result on your blog
Do comment dear for any inquiries or request ^^,

My life as a Matrics Student

Assalamualaikum dan hai semua.. :) Okay tajuk tu macam tajuk essay BI tapi entri kali ini dalam BM yer
kang tak pasal-pasal seminggu tak siap post nie,,huhu

Matriculation program in Malaysia : Dah lama jugaklah ditubuhkan di Malaysia. Sejak tahun 1999 rasanya..  (Bab sejarah nie hang google lah sendiri ) Ada 9 Kolej Matrikulasi di Malaysia
Saya merupakan salah seorang graduan dari Kolej Matrikulasi Negeri Sembilan ( antara matrikulasi tertua di Malaysia ) bagi batch 15/16. Program Matrikulasi ni setahun saja. Tak sampai satu tahun pun sebenarnya, 10 bulan jer.
Walaupun tak lama, banyak sangat pengalaman pahit manis yang saya lalui semasa program ni. Dah lebih 3 bulan sebenarnya tamat program ni, sejak bulan 4 lagi. Tapi disebabkan lepas habis Matrik tu saya agak busy dengan interview for degree, tak berkesempatan lah nak menaip panjang kat keyboard ni. ( Pasal interview ni kita citer kat entri lain yer )

First week of Matriculation :

Okay yang ini time MPPB (Minggu Pengurusan Pelajar Baru) aka minggu orientasi lah. Not bad laa time minggu nie, happening je takda stressnya. Takdela rasa macam pergi kem tentera.
Fasilitator pon baik hati dan friendly. Bangun pagi fasi kejut, nak gerak pergi mana-mana fasi tunjuk jalan, hari-hari fasi akan tanya kalau ada pelajar sakit nak pergi klinik. Aktiviti pun best.

After one week / First semester of Matriculation.

Time awal-awal waktu ni rasa agak lain macam. Kelas start pukul 8 pagi, pukul 5 pagi dah mandi takut berebut bilik air XD padahal tak berlaku pon.  Masa first week class huru-hara hidup nak cari kelas sebab tak pusing kolej time orientasi tu ( Kena cari kawan satu praktikum untuk sama-sama cari kelas ).
Saya pelajar kos Sains Modul 1 ambil subjek ( Kimia, Biologi, Fizik dgn Matematik ). Time first week kelas budak lain sibuk dgn hal pertukaran modul, ada yg nak masuk modul 2 sebab tak suka bio ( lelaki biasanya ), ada yg nak masuk modul 2 sebab tak suka fizik ( yg ni gegirl ).
Disebabkan saya malas nk kusutkan kepala pasal tukar modul, saya stay jer la modul 1 yg khabarnya paling extreme berbanding modul lain. Modul 2 dan 3 ada ambil Sains komputer ganti subjek bio atau fizik. Sains komputer ni boleh dikatakan senang lah nak skor.
Lagi satu ada kos Akaun (yg aliran ni ramai jugak yg cemerlang) senang kot kalau dah minat kan.
Masa awal-awal waktu ni memang rajin betul pergi Library, tapi tak sampai sebulan kat matrik dah malas dah nak pergi..

Second semester of Matriculation.

Time sem 2 ni saya dah mula degil .Pukul 7 pagi baru bangun..hahaha tak sengaja kay. Terlajak tidur sebab buat assignment ( terpaksa stay up ). Lecturer matrik saya garang jugak lah. Tapi kalau kita tak buat hal memang no hal la. Diaorg okay jer. Bila sem 2 ni kan hubungan dengan kawan-kawan, cikgu, acik cafe ( pon bole :D ) makin akrab. Sayang jadinya nak tinggalkan Matrik.
Bila dah nak habis matrik semua emo semacam mengenangkan nasib hidup selepas tamat matrik..haha

Busy tak matrik ni ?

Bagi budak program 1 tahun jurusan Sains Modul 1 memang sangat BUSYYY kay. Hampir tiap minggu ada kuiz. Dengan presentation, assignment for every subject ( Banyak dan mencabar soalannya ). Kelas start 8 pagi habis pukul 4 ptg (hari-hari okay) ni pon dikira awal biasanya extend smpai pukul 5 ptg jaranglah lecturer cancel kelas. Kalau ada cancel pon akan diganti balik. Sebab setahun je kan ( Memang pack giler laa ).
Time management and stress management korang kena mantap laa.

Pemarkahan macam mana ?

Kitorang exam 4 kali time matrik, UPS 1, PSPM 1, UPS 2, PSPM 2. Ada jugak kuiz bila-bila masa cikgu nak buat.Amali ada lah dalam 10 kali dalam satu sem per setiap subjek sains ( Kimia, Biologi, Fizik ). UPS ni mcm ujian pertengahan tahun, PSPM pulak exam akhir tahun.

Overall markah keseluruhan bagi sesuatu subjek dalam tsatu sem dia kira 70% dari ujian bertulis PSPM, 10% dari markah UPS, 10% dari markah amali, dan lagi 10% dari markah kuiz. Markah keseluruhan kemudiannya ditukar kepada gred. Setiap gred merujuk kepada pointer yg berlainan. Contoh : gred A 4.00 pointer, gred A- 3.67 pointer.

PNGS (Purata Nilai Gred Semester ) merupakan pointer overall bagi satu sem. Maknanya, dia akan kira average pointer yg kita dapat bagi tiap subjek yg kita ambil.
Contoh :
Kimia : 4.00 (A)
Biologi : 4.00 (A)
Matematik : 3.67 (A-)
Fizik : 3.33 (B+)
Jadi, PNGS nya adalah ( 4 + 4 + 3.67 + 3.33) / 4 = 3.75

PNGK (Purata Nilai Gred Keseluruhan )  matrik dia kira berdasarkan kedua-dua semester.Dia kira purata. Campur pointer PNGS 1 dengan PNGS 2 lpastu dia bahagi 2.
Contoh :
PNGS 1 : 3.68
PNGS 2 : 3.75
Jadi, PNGK nya adalah ( 3.68 + 3.75 ) / 2 = 3.72

Matrik ni susah ke tidak?

Kalau tanya pendapat saya lah kan... Rasanya tak susah mana pon. Kalau minat subjek yg korang pelajari tu senang je nak skor. We only learn the basic of each subject only.

Subjek apa paling susah?

Depend on each of us lah. As for me I think mathematic lah yang agak susah saya nak catch up. Idk why la.. Tapi result Math PSPM tu okay jer..Tak teruk pon. Sebab dia turunkan gred barangkali.

Pakaian ke kelas macam mana ?

Untuk perempuan Melayu :

Hanya boleh pakai baju kurung sahaja untuk pergi ke kelas. Kasut PVC/Kulit warna hitam dan berstoking. Tudung jenis apa-apa pon boleh ( Pilihlah warna yg matching dgn baju ).

Untuk perempuan Non-Muslim :

Kalau nak pakai baju kurung boleh jugak. Kalau tak nak, Pakailah kemeja / Blaus / Kurti / Sari yg ada lengan dan nampak sopan. Pakai seluar slack sahaja ataupun pakai kain skirt paras bawah lutut.
Kasut PVC/Kulit warna hitam dan berstoking.

Untuk lelaki Melayu atau lelaki Non-Muslim :

Pakai baju kemeja dengan seluar slack. Jeans tak boleh pakai.Kasut PVC/ Kulit warna hitam dan berstoking.Tie pun wajib pakai. Pakai belt warna gelap biar kemas dan macho.

Untuk kelas sukan, korang pakai baju koko matrik, kasut sukan dan seluar track. ( Koko satu sem sahaja )

Pakaian luar waktu kelas pulak ?

Kalau luar dari waktu kelas takpela pakai baju apa-apa. Matrik tak wajibkan pakai tudung, tapi Islam wajibkan kan?

Nasihat untuk junior yg akan atau sedang berada dalam program matrikulasi.

• Jangan buang masa dengan percintaan monyet yang sia-sia. Budak yg couple kat matrik ni biasanya sampai habis matrik jer terus putus. ( Serious laa ) Tak sempat kay nak dating apa semua.Pelik jugakla bila nampak ada budak dating di kafe time tengah sibuk study week. Like, seriously ? :/ Dgn on call semua, text hari- hari. Tak sempat okay untuk budak matrik. Nanti masa kat Universiti 3 tahun carila bakal isteri / suami awak tuw.haha. Jangan couple taw, masuk minang terus.

• Disebabkan PNGK dia kira dari result sem 1 dan sem 2,  buatlah betul-betul dari semester 1. Jangan main-main.Yang paling penting jangan MALAS. Jangan lah study last minute. ( Ain't like I didn't do so XD ) Learn from mistake okay.. :D

• Jangan ponteng kelas tanpa sebab. Dalam 1 kali lecture tu boleh habis satu topik taw lecturer tu ajar. Bayangkanlah berapa banyak topik korang kena cover walaupun hanya sehari tak datang kelas. Alhamdulillah, saya kehadiran penuh time matrik ( bangga pulak haih ;-p )

• Jangan kurang ajar dgn cikgu.Restu cikgu tu penting taw. Kalau cikgu tak restukan ilmu yg dia beri, tak tenang hidup awak. Kalau selalu tak datang kelas pon boleh buat cikgu terasa taw. ( ingat tu )

• Ibadah wajib jangan tinggal walau korang busy macam mana pon. Ibadah sunat macam solat tahajud, puasa sunat amalkanlah jugak. Allah akan bantu hambanya yg sentiasa mengingatiNya.

Panjang sangat dah ni saya menaip. Cukup lah tu yer. Kalau ada soalan pasal matrik ni boleh lah tanya saya. Jumpa kat entri lepasni pulak.. Sayonara everybody \o/

Numbered Page Navigation

Assalamualaikum and hai readers... Okay, actually I had received many request for this tutorial.. So, I decided to end it here and make a tutorial about it..The default blogger theme will only have the older / newer / home link..By following this tutorial, people can navigate freely through your blog page number to view your old post / return to first page / go to last past and etc.

This is how it will look like

Okay, let's follow this tutor...

• 1. Log in your blogger account.
• 2. Go to Dashboard > Template > Edit HTML.
• 3. Back up your template. ( Optional = In case you want to save your previous code )
• 4. Click ctrl + F and search for  ]]></b:skin>
• 5. Copy below code and paste it above / before ]]></b:skin>

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

• 6. Then, Click ctrl + F and search for  </body>
• 7. Copy below code and paste it above / before </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=3;
    var numPages=3;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";

if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}
pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}
if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}
if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}
if(pageStart>2){html+=' ... '}
for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}
if(pageEnd<lastPageNo-1){html+='...'}
if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}
var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}
if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}
var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}
if(pageArea&&pageArea.length>0){html=''}
if(blogPager){blogPager.innerHTML=html}}
function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}
function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}
if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}
if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}
document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}
function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}
function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}
location.href=pAddress}

  /*]]>*/
</script>
</b:if>
</b:if>

Preview and save

The Notes :
Color code here
Red text : Color of text
Blue text : Color of background
Orange text : Number of post on each page. The number should be the same as the number of post shown in your main page. To change the setting of post in main page :
Settings > Formatting > Show at Most > Choose the number that you want
Green text : Number of pages shown in page navigation
Credit

Okay done..Do comment if you're done or if you do not understand something.