Kacoeng Kampret

Cara Membuat Navigasi Halaman pada Home Page Blogspot

Di blogger, secara default, aku melihat yang ada hanya tulisan Posting Lama, Posting Baru dibagian bawah halaman yang berfungsi untuk menavigasi ke posting lain dari blog-ku. Masalahnya adalah pengunjung sulit melihat posting yang lebih baru dan lebih lama di blog-ku ini. Jadi, untuk meningkatkan tampilan halaman blog aku menggunakan Page Number atau disebut juga Navigasi Halaman dengan menggunakan nomor atau angka.

Demo

Order Detail

INI HANYA DEMO UNTUK LINK SAJA

MARI KITA KEMBALI...!

Cara Membuat Link

Order Detail

Aku yakin bahwa link adalah di atas segala-galanya dan wajib hukumnya bagi seorang blogger, berbeda dengan website pada umumnya, seorang blogger untuk bertukar link (link exchange) dengan blog lain itu suatu hal yang umum dan suatu keharusan, kalau tidak bisa membuat link jelas aku akan dicuekin oleh blogger lain karena dianggap pelit dalam memberi link (padahal aku nggak bisa buat link..hihihi). Ok deh mari kita belajar sama-sama;

Cara Membuat blog di Blogspot

Order Detail

Kalau aku pingin membuat blog di blogger/blogspot.com maka aku kunjungi situs http://www.blogger.com/ setelah halamannya terbuka aku login pakai gmail-ku, bukan gmail Anda, kalau belum punya klik disini caranya, trus aku ubah bahasa English ke bahasa Indonesia yang letaknya di pojok kanan atas, dan aku klik tombol yang bertuliskan "CIPTAKAN BLOG ANDA" maka tampil form isian yang harus diisi judul blog, alamat blog (URL) dan lain sebagainya. isian yang terakhir aku isi Verifikasi kata dan klik "LANJUTKAN"

Cara Memasang Google Adsense di Tengan Posting

Order Detail

.showpageArea a { 
text-decoration:underline; 
background: #ffffff; 
padding: 10px 10px 10px 10px; 
} 
.showpageNum a { 
text-decoration:none; 
border: 1px solid #cccccc; 
border-top: 1px solid #cccccc; 
margin:0 3px; 
padding:3px; 
} 
.showpageNum a:hover { 
border: 1px solid #cccccc; 
background-color:#cccccc; 
} 
.showpagePoint { 
color:#333; 
text-decoration:none; 
border: 1px solid #cccccc; 
background: #cccccc; 
margin:0 3px; 
padding:3px; 
} 
.showpageOf { 
text-decoration:none; 
padding:3px; 
margin: 0 3px 0 0; 
} 
.showpage a { 
text-decoration:none; 
border: 1px solid #cccccc; 
padding:3px; 
} 
.showpage a:hover { 
text-decoration:none; 
} 
.showpageNum a:link,.showpage a:link { 
text-decoration:none; 
color:#333333; 
}

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#main-wrapper{float:right}
#sidebar-wrapper{float:left}
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#main-wrapper{float:right}
#sidebar-wrapper{float:left}
</style>
</b:if>

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkG_qHAkRlX_Kitrrmf-i4bng5zXG_TH7HstEuZpnVJLlbXCXt9UZP-23_88EzyB_B-XXMH3xHNi91mX7fh3LoMuP3QqHf898W1hFYuwccELVgseSpJWJURK-fVTmWmXNGN0UXFQdZCP6b/

http://lh6.ggpht.com/_pt7i0nbIOCY/TKnUUWcHN_I/AAAAAAAAC6g/k3-hywXPw-s/browsers_thumb%5B3%5D.png

http://lh4.ggpht.com/_pt7i0nbIOCY/TKnQuO-2IAI/AAAAAAAAC54/zZ0zQDGKfH8/Downloads_thumb%5B1%5D.png

Create the HTML codes for the icons, e.g.:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkG_qHAkRlX_Kitrrmf-i4bng5zXG_TH7HstEuZpnVJLlbXCXt9UZP-23_88EzyB_B-XXMH3xHNi91mX7fh3LoMuP3QqHf898W1hFYuwccELVgseSpJWJURK-fVTmWmXNGN0UXFQdZCP6b/" alt="tutorial" />

<img src="http://lh6.ggpht.com/_pt7i0nbIOCY/TKnUUWcHN_I/AAAAAAAAC6g/k3-hywXPw-s/browsers_thumb%5B3%5D.png" alt="browser" />

<img src="http://lh4.ggpht.com/_pt7i0nbIOCY/TKnQuO-2IAI/AAAAAAAAC54/zZ0zQDGKfH8/Downloads_thumb%5B1%5D.png" alt="download" />

And the final codes will be added with:

<div class=’icon’> image code </div>

So, the codes that are ready to be installed would be:

<div class='icon'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkG_qHAkRlX_Kitrrmf-i4bng5zXG_TH7HstEuZpnVJLlbXCXt9UZP-23_88EzyB_B-XXMH3xHNi91mX7fh3LoMuP3QqHf898W1hFYuwccELVgseSpJWJURK-fVTmWmXNGN0UXFQdZCP6b/" alt="tutorial" />
</div>

<div class='icon'>
<img src="http://lh6.ggpht.com/_pt7i0nbIOCY/TKnUUWcHN_I/AAAAAAAAC6g/k3-hywXPw-s/browsers_thumb%5B3%5D.png" alt="browser" />
</div>

<div class='icon'>
<img src="http://lh4.ggpht.com/_pt7i0nbIOCY/TKnQuO-2IAI/AAAAAAAAC54/zZ0zQDGKfH8/Downloads_thumb%5B1%5D.png" alt="download" />
</div>

Test 4

Order Detail

Headings SamplesLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This is a H1 HeadingLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis

Vector In Package : 3

Size : 75 KB

Source : Free Logo downloads

[Download]

Google Chrome

Order Detail

Cara Membuat Navigasi Halaman pada Home Page Blogspot

Demo

Cara Membuat Link

Cara Membuat blog di Blogspot

Cara Memasang Google Adsense di Tengan Posting

Test 4

Test 3

Test 2

Test 1

Limbat

Deddy Cobuserrrr

Aryo Penangsang

Permadi

Joko Bodo

Gendeng Pamungkas

Kacoeng kampret

Coca-Cola

Google Chrome

Category Products

Arsip Blog

Random Product

Template Information

Sekapur Sirih