Cara Memasang Circle System Menu Pada Blog

Gimana kabarnya nih sobat blogger? Mudah-mudahan sobat dalam keadaan baik-baik saja. Sobat pada puasa gak nih….? hehehe jangan sampai bolong ya puasanya ^_^ . Pusing juga nih mau bikin artikel apaan mungkin karena gak ada ide mau bikin artikel apa atau mungkin kondisi yang kurang fit nih huft.

Walaupun begitu saya akan tetap mencoba menghadirkan hal-hal yang baru dan segar buat sobat agar tetap setia untuk berkunjung ke blog Juned al~Bughisy. Pada postingan kali ini kita akan sedikit membahas tutorial yang tidak rumit-rumit amat agar sobat juga tidak kebingungan nantinya yaitu bagaimana cara memasang Circle System Menu pada blog.

Bagaimana sih tampilan dan fungsi dari circle system menu ini langsung saja sobat praktekin pada blog sobat dijamin deh bikin ngiler hahaha. Untuk lebih lengkapnya ikuti tutorialnya di bawah ini.

1. Login ke blogger atau klik disini»
2. Pilih template » Edit Html » Lanjutkan.
3. Cari code di bawah ini. Tekan ctrl+F untuk mempermudah pencarian.

]]></b:skin>

4. Setelah ketemu copy code CSS di bawah ini dan letakkan di bawah code di atas (]]></b:skin>).

.hapus:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
.hapus { display: inline-block; }
* html .hapus { height: 1%; }
.hapus { display: block; }
ul.system-menu {
margin: 0 auto 10px;
padding: 0;
position: relative;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 390px
}
ul.system-menu li {
list-style-type: none;
margin: 0 5px 0 0;
padding: 0;
float: left;
position: relative;
width: 70px;
height: 80px;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
transition: all 500ms linear
}
ul.system-menu li a {
position: absolute;
margin: -30px 0 0 -43%;
text-decoration: none;
font: bold 13px/40px Arial, sans-serif;
padding: 0;
background: #21D319;
color: transparent;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
display: block;
width: 50px;
height: 50px;
text-align: center;
top: 45%;
left: 50%;
outline: none;
border: 5px inset #F8FBFC;
-moz-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
-webkit-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
-moz-transition: all 100ms linear;
-o-transition: all 100ms linear;
-webkit-transition: all 100ms linear;
transition: all 100ms linear
}
ul.system-menu li a:hover {
line-height: 130px;
color: #000;
border-color: #C5B386;
background: #FAC800;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s
}
ul.system-menu li span.pembuka {
position: absolute;
left: 50%;
margin: 0 0 0 -29%;
top: 11px;
width: 25px;
height: 30px;
background: #949596;
-moz-box-shadow: 3px -3px 0 0 #ECECEC;
-webkit-box-shadow: 3px -3px 0 0 #ECECEC;
box-shadow: 3px -3px 0 0 #ECECEC
}
ul.system-menu li span.satu, ul.system-menu li span.dua, ul.system-menu li span.tiga {
position: absolute;
background: #F0F0F0;
padding: 2px;
width: 15px;
left: 3px
}
ul.system-menu li span.satu {
top: 5px
}
ul.system-menu li span.dua {
top: 13px
}
ul.system-menu li span.tiga {
top: 22px
}
.empat, .lima, .enam {
position: absolute
}
.empat {
border: 15px solid;
border-color: transparent transparent #EEE transparent;
top: -7px;
left: 10px
}
.lima {
padding: 4px;
background: #EEE;
height: 5px;
top: 22px;
left: 14px
}
.enam {
padding: 4px;
background: #EEE;
height: 5px;
top: 22px;
left: 28px
}
.abot, .abit {
position: absolute;
left: 15px
}
.abot {
width: 20px;
height: 20px;
background: #EEE;
top: 20%;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px
}
.abit {
border: 10px solid;
border-color: transparent transparent #EEE transparent;
top: 33%
}
.a, .b, .c, .d {
position: absolute;
padding: 5px;
background: #FFF7F7;
top: 26%
}
.a {
left: 25px;
background: #39FF13
}
.b {
top: 27px;
left: 13px;
background: #0070FF
}
.c {
left: 25px;
top: 27px;
background: #FFE000
}
.d {
left: 13px
}
.e, .f {
position: absolute
}
.e {
width: 15px;
height: 17px;
background: rgb(171, 185, 163);
top: 35%;
left: 32%;
border: 2px solid rgb(255, 255, 255)
}
.f {
border: 10px solid;
border-color: transparent transparent rgb(255, 255, 255) transparent;
top: -2px;
left: 30%
}
ul.system-menu:hover li:not(:hover) {
-moz-transform: rotate(360deg) scale(0.7);
-ms-transform: rotate(360deg) scale(0.7);
-o-transform: rotate(360deg) scale(0.7);
-webkit-transform: rotate(360deg) scale(0.7);
transform: rotate(360deg) scale(0.7)
}

5. Simpan template.
6. Kembali ke dashboard dan kemudian pilih tata letak » Tambah Gadget » Html/JavaScript.
7. Copy code Html di bawah ini.

<ul class=system-menu hapus>
<li><a href="#">
<span class=empat></span>
<span class=lima></span>
<span class=enam></span>Depan</a></li>
<li><a href="#"><span class=pembuka>
<span class=satu></span>
<span class=dua></span>
<span class=tiga></span></span>Artikel</a></li>
<li><a href="#"><span class=abot></span><span class=abit></span>Tentang</a></li>
<li><a href="#">
<span class=a></span>
<span class=b></span>
<span class=c></span>
<span class=d></span>Kategori</a></li>
<li><a href="#"><span class=e></span><span class=f></span>Coretan</a></li>
</ul>

8. Dan yang terakhir simpan dan kemudian lihat hasilnya.

Selamat mencoba dan selamat berkreatifitas.