Catatan Aisha: How To Make Cute Navigation (Blogskins)

Assalamu'alaikum. Hi readers! Kinan waktu itu req cara buat navigation ini. Langsung aja ya...

Masuk akun blogger > Dashboard > Template
Cari kode

<style>

Copy kode di bawah ini, dan paste DI BAWAH kode <style> tadi

.raejun{
width:60px;
padding:15px;
margin-top:15px;
box-shadow:2px 2px 4px #C2D6FA;
background:#C2D6FA;
border:2px solid #fff;
font:12px comfortaa;
text-align:center;
Text-decoration:none;
color:#fff;
text-transform:normal;
display:block;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
border-left:1px solid light blue;
-webkit-border-top-right-radius: 333px;
-webkit-border-bottom-right-radius: 333px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
.raejun:hover{
width:66px;
border-left:7px solid #CEECF5;
color:#000;
}

Kemudian, cari kode

</style>

copy kode ini dan paste DI BAWAH kode </style> tadi

<div style="position:fixed; top:100px;left:0px;width:100px; color:#aaa;">
<a class="raejun" onClick="document.getElementById('main').innerHTML=document.getElementById('o').innerHTML">Entry</a>
<a class="raejun" onClick="document.getElementById('main').innerHTML=document.getElementById('k').innerHTML">Owner</a>
<a class="raejun" onClick="document.getElementById('main').innerHTML=document.getElementById('p').innerHTML">Linkies</a>
<a class="raejun" onClick="document.getElementById('main').innerHTML=document.getElementById('stuffs').innerHTML">Stuffs</a>
</div>

Kemudian cari kode </blogger> yang di bawahnya ada kode </td>
Paste kode di bawah ini DI BAWAH kode </blogger> dan </td> tadi.

<td id="o" style="display: none;">
<Blogger><div class="h3"><$BlogItemTitle$></div><div class="arrien" style="float:center;text-align:left;"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> Idol(s)</a></BlogItemCommentsEnabled></div><br><$blogitembody$><br><br>
<center><OlderPosts><a href=<$OlderPosts$>>OLDER</a> </OlderPosts> <NewerPosts> • <a href=<$NewerPosts$>>NEWER</a></NewerPosts></center><br><br>
<itempage> <div id="comments" style="margin-top:5px;"> <blogitemcommentsenabled><a name="comments"></a><dl id="comments-block"><div style="width:470px; padding:5px;margin-top:20px;border:4px solid #fff;6px;background:#E5EEFF; box-shadow:0 0 3px #ddd;"> <$CommentPager$> <blogitemcomments><dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a> <$I18NCommentAuthorSaid$></dt><dd class="comment-body"> <p><$BlogCommentBody$></p><$BlogCommentDeleteIcon$> </dd> </BlogItemComments> <$CommentPager$> </dl></div><p class="comment-timestamp"><$BlogItemCreate$> </p></div></ItemPage>
</Blogger></div></td>
<td id="k" style="display: none;">
<div class="h3">About Myself</div><center><img style="border:1px solid #CEECF5; padding:5px;" src="http://data.whicdn.com/images/145711021/large.gif" width "250" /></center><br><u>Contact me:</u><br><br>About kamu<br></div>
</td>
<td id="p" style="display: none;">
<div class="h3">Exchange Links</div><center><img style="border:1px solid #CEECF5; padding:5px;" src="http://68.media.tumblr.com/815677532e17fd93d5afb22df27dc725/tumblr_npnghx4vIh1u7fin7o1_500.gif" width="400" ></center><br>
<center><input type="text" size="11" value="Your Name" style="width:180px;font:12px comfortaa;color:#666;border:1px solid #CEECF5;margin-right:6px;background-color:#ffffff;padding:2px;padding-left:4px;" onclick="this.focus()" onfocus="this.select()"><input type="text" size="11" value="Your Blog URL" style="width:180px;font:12px comfortaa;color:#666;border:1px solid #CEECF5;background-color:#ffffff;padding:2px;padding-left:4px;" onclick="this.focus()" onfocus="this.select()"></center><br><center><a class="navi" href="http://.blogspot.com/">Next?</a><a class="navi" href="http://.blogspot.com/">Next?</a><a class="navi" href="http://.blogspot.com/">Next?</a><a class="navi" href="http://.blogspot.com/">Next?</a><a class="navi" href="http://.blogspot.com/">Next?</a><br><br><a class="navi" href="http://.blogspot.com/">Next?</a><a class="navi" href="http://.blogspot.com/">Next?</a><a class="navi" href="http://.blogspot.com/">Next?</a><a class="navi" href="http://.blogspot.com/">Next?</a><a class="navi" href="http://.blogspot.com/">Next?</a><br><br><a class="navi" href="http://.blogspot.com/">Next?</a><a class="navi" href="http://.blogspot.com/">Next?</a><a class="navi" href="http://.blogspot.com/">Next?</a><a class="navi" href="http://.blogspot.com/">Next?</a><a class="navi" href="http://.blogspot.com/">Next?</a><br><br>
</center>
</td>
<td id="stuffs" style="display: none;">
<div class="h3">Extras Section</div>
<center><img style="border:1px solid #CEECF5; padding:5px;" src="https://68.media.tumblr.com/adc485db05f39824a8384ac0b9615a1c/tumblr_nke7suHGF61sox2y0o2_500.gif" width="400" ></center><br>
<center><blockquote>Replace With Your Own Stuffs</blockquote> </center><br>
<div class="h1">Tutorial</div><br><div style="border:1px dashed #CEECF5; width:530px; overflow-x:hidden; overflow-y:scroll;padding:10px; height:75px; ">
<a href="<$BlogItemPermalinkURL$>"><div class="me"><a href="">Coming Soon</a><br><a href="">Coming Soon</a><br><a href="">Coming Soon</a><br><a href="">Coming Soon</a><br><a href="">Coming Soon</a><br><a href="">Coming Soon</a><br><a href="">Coming Soon</a><br><a href="">Coming Soon</a><br><a href="">Coming Soon</a><br><a href="">Coming Soon</a><br><a href="">Coming Soon</a><br><a href="">Coming Soon</a><br><br></div></div><br></div>

Kode yang warna-warni ini adalah kode laman.

Merah Adalah bagian Beranda.

Hijau Bagian Biodata.

Biru Adalah Laman Exlink

Dan Pink adalah laman Stuff

Biar judul lamannya ada style/hiasannya, cari kode body {
Kemudian copas kode ini KE BAWAH kode tadi.

.h3 {
-webkit-transition: 1s;
-moz-transition: 1s;
background:url(http://68.media.tumblr.com/50159cb7f924386cc89fa729363192f0/tumblr_inline_mgpfvfGj9J1qdlkyg.gif);
background-repeat:no-repeat;
font-size:17px;
padding:5px;
font-family: Gloria Hallelujah;
color:#666;
text-align:center;
border-top:2px solid #95BAE7;
border-bottom:2px solid #95BAE7;
border-right:2px solid #CEE4FF;
border-left:2px solid #CEE4FF;
border-radius: 10px;
background-position: right;
}

Jika tutorial ini tidak berfungsi atau malah membuat blogskinsmu acakan-acakan, maaf ya, Aisha nggak tahu harus gimana.

kode skin ini bescode dari skinnya kak Revita, Tsabbita, dan Azzahra, yang Aisha ubah-ubah lagi kodenya.

How To Make Cute Navigation (Blogskins)

3 komentar: