Rian Blog: CSS

Tutorial cara membuat sitemap blogger otomatis ini bisa sobat lakukan dengan mudah dan cepat. Halaman sitemap / daftar isi berisikan list artikel atau post yang akan dikelompokkan berdasarkan label, karena pada blogspot tidak ada kategori seperti blog di wordpress.com, namun label sama fungsinya dengan kategori tersebut. Otomatis dalam artian setiap artikel yang baru dipublish maka akan masuk dalam kelompok sesuai dengan label yang digunakan untuk artikel tersebut.

Dengan menggunakan halaman sitemap atau daftar isi maka akan memudahkan bagi visitor bila ingin mengetahui isi seluruh artikel berikut label yang ada pada sebuah blog. Baiklah, langsung saja sobat simak langkah-langkah berikut ini untuk proses cara membuat sitemap otomatis blogspot.

Untuk membuat halaman sitemap setelah login ke akun blogger, pilih pada menu pages (laman). Pada title pages bisa sobat gunakan sesuai selera apakah sitemap atau daftar isi.

Lalu pilih pada format HTML, selanjutnya copy kode script dibawah ini:



<script src="http://me-sitemap.googlecode.com/files/mysitemap.js" type="text/javascript"></script>





<script src="http://bagoesrian.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti link yang saya beri warna merah dengan link blog sobat, selanjutnya pindahkan ke format Compose dan silahkan Publish halaman tersebut. Untuk contoh atau hasilnya bisa sobat lihat disini

Bagaimana, mudah bukan mengikuti langkah-langkah cara membuat sitemap blogger / blogspot ? Semoga ulasan singkat ini bisa berguna dan selamat mencoba.

Hello,kali ini saya akan berbagi Widget CSS Dropdown Menu,yaitu Menu dengan css yang sederhana yang dilengkapi dengan fungsi Dropdown dan Sub menu .Penggunaanya sangat praktis dan mudah untuk dimodifikasi.Contohnya kalian bisa melihat langsung dibawah ini.Ohh,saya ingatkan sebelum mencoba widget ini,ada baiknya membackup/download template kamu agar tidak terjadi sesuatu yang diinginkan.

DEMO :

Untuk memasang menu seperti diatas,pertama login ke account blogger kamu,lalu pilih menu template,pilih edit html, lalu copy-paste CSS dibawah ini tepat diatas kode ]]></b:skin>

CSS

#menujohanes{
width: 100%; /* panjang menu */
margin: auto; /* posisi menu auto */
background: #fafafa; /* warna background */
height: 49px; /*tinggi menu*/
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border: 1px solid #ddd;
text-transform: uppercase; /* Huruf besar */
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);
z-index: 99;} 
#menujohanes ul{
list-style-type: none;
z-index: 9;
width: 1000px; /* panjang menu */
margin: auto;} 
#menujohanes ul li{
float: left;
position: relative;
padding: 12px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;} 
#menujohanes ul li:hover{
background:#557FFF; /* warna background ketika diarahkan*/
box-shadow: 0px 3px 0px rgba(0,0,0,0.2);} 
#menujohanes ul li a:hover {
color:#fafafa;} /* warna text ketika diarahkan */
#menujohanes ul li a{
color: #666; /* warna text */
padding: 0 10px; 
line-height:25px; 
font-size:11px; /* ukuran text */
display:block; 
text-decoration:none;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-shadow: 0px 2px 0px rgba(0,0,0,0.1);} 
#menujohanes ul li ul li{float: none;position: relative;} 
#menujohanes ul li ul{
position: absolute; 
top:49px;
left:0; 
display: none; 
box-shadow: inset 0 4px 3px rgba(0, 0, 0, 0.3), 0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2); 
width:150px;
border-radius: 0px 0px 5px 5px;
background: #fff;} 
#menujohanes ul li:hover > ul{display: block;} 
#menujohanes ul li ul li a{line-height:25px;} 
#menujohanes ul li ul li ul{
position: absolute; 
top:0; left:150px; 
display: none; 
box-shadow:0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
border-radius:5px; 
width:150px;
background: #fff;} 
#menujohanes ul li.selected{color: #000;border-left: 1px solid #ddd;border-right: 1px solid #ddd;}

Selanjutnya,copy-paste HTML dibawah ini diantara kode <body>...</body> tergantung anda ingin meletakan posisi menu ini.

HTML

<div id="menujohanes"> 
<ul> 
<li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li> 
<li><a href="#">Download</a> 
<ul> 
<li><a href="#">Naruto</a> 
<ul>
<li><a href="#">Episode 1</a></li> 
<li><a href="#">Episode 2</a></li> 
<li><a href="#">Episode 3</a></li> 
</ul> 
</li>
<li><a href="#">Date A Live</a> 
<ul>
<li><a href="#">Episode 1</a></li> 
<li><a href="#">Episode 2</a></li> 
<li><a href="#">Episode 3</a></li> 
</ul> 
</li> 
<li><a href="#">Devil Survivor2</a> 
<ul>
<li><a href="#">Episode 1</a></li> 
<li><a href="#">Episode 2</a></li> 
<li><a href="#">Episode 3</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="#">Contact</a> 
<ul> 
<li><a href="#">Twitter</a></li> 
<li><a href="#">Facebook</a></li> 
<li><a href="#">Blogger</a></li> 
<li><a href="#">Google plus</a></li> 
</ul> 
</li> 
<li><a href="#">Multi sub</a>
<ul>
<li><a href="#">Episode 1</a>
<ul> 
<li><a href="#">Episode 2</a>
<ul>
<li><a href="#">Episode 3</a></li>
<li><a href="#">Episode 4</a></li>
</ul> 
</li> 
<li><a href="#">Episode 5</a></li> 
</ul>
</li>
<li><a href="#">Episode 6</a></li> 
<li><a href="#">Episode 7</a></li> 
</ul> 
</li> 
<li><a href="#">Clients</a></li> 
<li><a href="#">Email</a></li> 
</ul></div>

*Ganti tanda pagar dengan url link,dan namae link'a

Setelah selesai, simpan,dan lihat hasinya.jika sudah berhasil,tahap selanjutnya adalah mengatur isi menu dan link url pada menu anda.

Setting HTML

1. Normal menu.

ANIME

;

2. Drop down menu.

DOWNLOAD

3. Sub menu.

DOWNLOAD

4. Multi Sub menu.

DOWNLOAD

Selamat mencoba dan semoga bermanfaat,terima kasih.

Rian Blog

Cara Membuat Sitemap Blogger

CSS Dropdown Menu