Cara membuat blogskin tahap 2

03:56:00

klik untuk memperbesar gambar

hai minna-san!
oke , lansung aja ya , ini adalah tahap membuat blogskin yang ke 2


  • untuk sidebar
cari kode a:hover{ , dan paste kode dibawah ini dibawah kode tersebut , untuk lebih jelasnya silahkan lihat gambar dibawah ini

.title {
color: #fff;
font-family: trebuchet ms;
font-size:10px;
line-height:17px;
text-align: center;
background: #666;
text-transform: uppercase;
letter-spacing: 1px;
}

kode diatas silahkan dulu diubah warna dan jenis font nya ya!

  • next , apa kalian lihat blog ryoko atau blog skin buatan ryoko engga?

nah , yang begini nih yang ada pada bagian atas blog

nah , berikut caranya:
  •       cari kode  </style>
  •       copy kode dibawah dan paste dibawah kode  </style>


<div style="text-align: center; border-bottom: 1px solid #666; border-top: 1px solid #666; margin-top: -16px; padding-top: 6px;padding-bottom: 6px;">
<a class="nav" onClick="document.getElementById('entry').innerHTML=document.getElementById('diary').innerHTML" title="">Entry</a> |
<a class="nav" onClick="document.getElementById('entry').innerHTML=document.getElementById('about').innerHTML" title="">About</a> |
<a class="nav" onClick="document.getElementById('entry').innerHTML=document.getElementById('stuff').innerHTML" title="">Stuff</a> |
<a class="nav" onClick="document.getElementById('entry').innerHTML=document.getElementById('linkies').innerHTML" title="">Affies</a>
</div><br></div>
</div></div>
<br>


  •       selanjutnya cari kode </table> 
  •       copy kode dibawah ini dan paste diatas kode </table>
<div id="entry" style="display: none;">

<blogger><div class="tit"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<$blogitembody$><div class="com"><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<br>
<hr/><center>Thanks for reading <img src="http://i596.photobucket.com/albums/tt44/ainurnajwastory/smile.gif"></center><hr/>
</blogger>
<br>

</div>


<div id="linkies" style="display: none;">
<div class="tit"><img src="http://media.tumblr.com/b0cf34c37279b551e3cabb8f66578f19/tumblr_inline_mg2m65sBW51qdlkyg.gif" />My Secret Admire </div><br>
<center><img src="http://data.whicdn.com/images/13369570/large.png"></center><br>
Hi. Wanna be next? Tell me at Cbox. bla bla bla<br /><---- exchange with your words ----><br>
<br>
<a class="linkies"  href="http://ryoko-rin.blogspot.com">Ryoko Rin</a>
<a class="linkie"  href="http://blogspot.com/">Next</a>
<a class="linkie"  href="http://blogspot.com/">Next</a>
<a class="linkie"  href="http://blogspot.com/">Next</a>
<a class="linkie"  href="http://blogspot.com/">Next</a>
<a class="linkie"  href="http://blogspot.com/">Next</a>
<br>


<div id="about" style="display: none;">
<div class="tit"><img src="http://media.tumblr.com/tumblr_m89hiaQDCS1qdlkyg.gif" /> About Me   </div>
<center><img src="https://33.media.tumblr.com/ea313abcda156f3d5b503dd1bf462659/tumblr_mobt4fw9JX1s9m4lro1_500.gif"></center><br>
<br />
<ul>
<li><b style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">Name</b><span style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">&nbsp;: Ryoko Rin</span></li>
<li><b style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">Nickname</b><span style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">&nbsp;: ryoko</span></li>
<li><b style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">Still young?</b><span style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">&nbsp;: of course!</span></li>
<li><b style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">When your birthday?</b><span style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">&nbsp;: 00</span></li>
<li><b style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">Hobby</b><span style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">&nbsp;: create a blog, blogwalking, playing games, etc.</span></li>
<li><b style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">Occupation</b><span style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">: owner this blog ^^</span></li>
<li><b style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">Like</b><span style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">: Chocolate, ice cream, candy and anything that tastes sweet. Yummy: p&nbsp;</span></li>
<li><b style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">Dislike</b><span style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">: the wicked: v, enemies, which often reference to profanity, etc. lol lol</span></li>
<li><b style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">Love</b><span style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">: Family, Friend, Boyfriend, and my ex</span></li>
<li><b style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">Kind of?</b><span style="background-color: white; color: #b7b7b7; font-family: 'Patrick Hand', cursive; font-size: 14px; line-height: 17px;">&nbsp;: Beautiful, simple and friendly&nbsp;</span></li>
</ul>



<div id="diary" style="display: none;">

<blogger><div class="tit"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<$blogitembody$><div class="com"><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<br>
<hr/><center>Thanks for reading <img src="http://i596.photobucket.com/albums/tt44/ainurnajwastory/smile.gif"></center><hr/>
</blogger>
<br>

</div>


<div id="stuff" style="display: none;">
<div class="tit"> Tutorial and Freebies for you <img src="http://media.tumblr.com/93476052c73d3bd6e52ba94a0d601359/tumblr_inline_mg1a7tu16w1qdlkyg.gif"/></div><br>
<center><img src="http://i483.photobucket.com/albums/rr197/neesiwoof/tumblr_mvli56R26e1sq7d75o1_r1_500_zpsmy2closm.gif"></center><br>
<center><u/ >Tutorial </u/ ></center>
<div>
<ul>
<li><a href="https://www.blogger.com/">Tutorial</a></li>
<li><a href="https://www.blogger.com/">Tutorial</a></li>
<li><a href="https://www.blogger.com/">Tutorial</a></li>
<li><a href="https://www.blogger.com/">Tutorial</a></li>
<li><a href="https://www.blogger.com/">Tutorial</a></li>
</ul>
</div>

<br />
<br />
<center><u/ >Freebies </u/ ></center>
<div>
<ul>
<li><a href="https://www.blogger.com/">Freebies</a></li>
<li><a href="https://www.blogger.com/">Freebies</a></li>
<li><a href="https://www.blogger.com/">Freebies</a></li>
<li><a href="https://www.blogger.com/">Freebies</a></li>
<li><a href="https://www.blogger.com/">Freebies</a></li>
</ul>
</div>
<div>

<!-- code for turning all non-blog links to new page links -->
<script type="text/javascript" language="javascript">
var arr = document.getElementsByTagName("a"); //get all links in the page
for(var i = 0; i < arr.length; i++)
{
if(arr[i].href.indexOf("URL") < 0 //not links that are 'inside' blog
&& arr[i].href.indexOf("javascript:") < 0) //not javascript links
arr[i].target = "_blank";
}
</script>

nah , selanjutnya untuk scrollbar dan mengubah warna teks yang diblok

warna teks akan berubah jika diblok

scrollbar terletak pada ujung sebelah kanan blog dan dibawah blog

nah , berikut caranya:
  •       cari kode body { dan paste setelah bait kode tersebut , seperti pada gambar


  •       berikut untuk kodenya


::-webkit-scrollbar {
height:8px;
width: 8px;
background: #000;
}
::-webkit-scrollbar-thumb {
background-color: #000;;
-moz-border-radius: 12px;
border-radius: 12px;
}
     ::-moz-selection {
background: transparent;
color:#000;
}
::selection {
background: transparent;
color:#666;
}

  • nah , mungkin cuma itu yang bisa ryoko post kali ini , kalau ada yang mau ditanya silahkan bilang di Cbox ya! kalo ada yang ga ngerti tanya aja di Cbox atau kirim ke gmail ryoko, jangan malu untuk bertanya ya! ^^ ryoko selalu siap untuk membantu ^^

Share This Story

Tags: ,

You Might Also Like

0 Cute Ota

Penting!!
*blog ini butuh saran & kritik jadi diharapkan semua memberi komentar
*gunakanlah kalimat yang sopan dan baik
*jangan berkata kasar atau kotor
*jangan bikin spam