Membuat Slide Menu

1. Login
2. Rancangan
3. Edit Html
4. Expand Template Widget
5. Cari </head> dan ganti kode dibawah ini

<style type='text/css'>
ul.slide-menu-drop-down{
    list-style:none; 
    position:absolute;
    right:30px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaYLxwnZiUEBvs0CehApAaCRaJBB76j6g5A_SKGg2IPpGo4E6UTANYBViMIrbb3RHCiMHcC7uDJhSLW8LbjVwex3Oy_OfV0jRLaRbUx6Xwl5ft0Ga8GCVZDmaNHUOofmHd3S8xHw9qEAk/s1600/background-image.jpg) no-repeat top left;
background-repeat:no-repeat;
    cursor:pointer;
    border:2px solid #ddd;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
z-index:99999;
}

ul.slide-menu-drop-down li{
    float:right;
    width:55px;
    height:55px;
    margin:10px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#000;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
}

ul.slide-menu-drop-down li:hover{
    float:right;
    width:300px;
    height:250px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}


ul.slide-menu-drop-down li .judul{
    background-color:#fff;
    padding:10px;
    margin-top:300px;
    margin-left:55px;
    opacity:0.9;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    font-size:14px;
    color:#444;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
}

ul.slide-menu-drop-down li:hover .judul{
    background-color:#52C941;
    padding:10px;
    margin-top:5px;
margin-left:55px;
}


.sub-menu{
text-align:right;
font-size:10px;
font-family: Cambria, serif;
font-weight:bold;
line-height: 1em;
width:280px;
height:100%;
padding:5px 10px 10px;
 margin:10px 0px 40px;
background-color:#fff;
-moz-box-shadow:1px 3px 15px #aaa;
-webkit-box-shadow:1px 3px 15px #aaa;
box-shadow:1px 3px 15px #aaa;
opacity:0.7;
}

.sub-menu p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#333;
text-decoration:none;
font-size:10px;
font-family: Cambria, serif;
line-height: 1em;
}

.sub-menu p a:hover{color:#347D29;}
</style>
<style type='text/css'>
ul.slide-menu-drop-down li.bg-icon1{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimPtpbw8l20ROUZUGjwT8lxjHRyUyimliz5yZ9VOq-eekjcB36ZsdLRpG4RI9WzFQdQQWQDmgeSbqbDBPzrAA4z0kLCXQ-aiGLZWSNjffkhh2OUzhBt6YU4hgFdgmNFsld7YmdzI02Q7s/s1600/photos.png) no-repeat;
}

ul.slide-menu-drop-down li.bg-icon2{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiByI9c4pkgVR-T6m-6J4kuf9EPxiJz7F6AeIO27Dr0WqZ0VxJCauz-lIIltChT9YO_HbmGr7TQexG0Jl9piVLlbP5KSuEzWzksxZ0z8Nvm5QqejVvwE2gch9px-4bjerOQ8k86eUFKmc/s1600/find.png) no-repeat;
}


ul.slide-menu-drop-down li.bg-icon3{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLLf78ZA67XP4wEDAwdP93IO8ft19NtE0d_PkuBVc4xy9fQpkEAHUIAj1joIWMKDa7ytE55xHhDUXC60vvg25y3_P18lM8Hl-r3I1AEjKsS4Bt_Rq9R0W2fXdpM1MIpz8AT9STCeq6Xyw/s1600/mail.png) no-repeat;
}

ul.slide-menu-drop-down li.bg-icon4{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR3jEwMgky2-bf5ePEejgpb6YEw4ow65JHTBs1iH4Na6iiWpr0l3ODhfN4LVVwlCJxVNW4Bn_8ao1hBoOQk30SgwV25MrfmTMBHrRnyVZwdsfso7W-RcXNPh6Kjc-3HNG7-VPOyQQnIz0/s1600/about.png) no-repeat;
}

ul.slide-menu-drop-down li.bg-icon5{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIlI3slqdHDCFHdGjfPdYMnTQ4n9Kywog2ddf7DTZNEZuFzMDoxzBL-ac4auFffxGT4cjD_LYcX-4MQe5E7RfWDldbxDskpIKA5vwkd0jDzSw7dlMFgcAkCAMb2H3JPuli2zhYRJRaJBg/s1600/home.png) no-repeat;
}
</style>
</head>

Save.
Kemudian buat elemen halam baru
Tambah Gadget
Pilih HTML/JavaScript dan masukkan kode dibawah ini

<ul class="slide-menu-drop-down" id="slide-menu-drop-down">

<li class="bg-icon1">
<div class="judul">Album</div>
<div class="sub-menu"><p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 6</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 7</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 8</a></p>
</div>
</li>

<li class="bg-icon2">
<div class="judul">Explorer</div>
<div class="sub-menu"><p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>

<li class="bg-icon3">
<div class="judul">Kontak</div>
<div class="sub-menu"><p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>

<li class="bg-icon4">
<div class="judul">About Me</div>
<div class="sub-menu"><p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>

<li class="bg-icon5">
<div class="judul">Home</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>

</ul>

Save