How to add According menu in Blog Or Website

How to add According menu in Blog Or Website
if you want to make this please read the tutorial

HTML is he his
how to insert html insert button posted the same as or related share or etc.
its right after the code <data:post.body/>

Copy this Script after the code <data:post.body/>

<div class='japuh'> <!--star japuh--> <div class='ac-container'> <div> <input checked='checked' id='ac-1' name='accordion-1' type='radio'/> <label for='ac-1'>About article</label> <article class='ac-small'> ini untuk widget nya </article> </div> <div> <input id='ac-2' name='accordion-1' type='radio'> <label for='ac-2'>Related articles</label> <article class='ac-large'> ini untuk widget nya </article> </input> </div> <div> <input id='ac-4' name='accordion-1' type='radio'> <label for='ac-4'>Add new Comment</label> <article class='ac-large'> ini untuk widget nya </article> </input> </div> </div><!---End acc container--> </div> <!-- End japuh -->

then find the code ]]> </ b: skin>

copy this Script after ]]> </ b: skin>

.japuh{ width: 560px; position: relative; text-align: center; } .clr{ clear: both; } .ac-container{ width: 560px; margin: 10px auto 30px auto; padding:5px; text-align: left; background: #212121; border:1px solid #333; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .ac-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #1680e8; text-shadow: #333; line-height: 33px; font-size: 19px; background: #212121; background: -moz-linear-gradient(top, #292929 5%, #212121 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#cc0000), color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top, #292929 1%,#eaeaea 100%); background: -o-linear-gradient(top, #292929 1%,#eaeaea 100%); background: -ms-linear-gradient(top, #292929 1%,#eaeaea 100%); background: linear-gradient(top, #292929%,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#383737', endColorstr='#eaeaea',GradientType=0 ); box-shadow: 0px 0px 5px #121212; border-left:3px solid #333; border-right:3px solid #333; } .ac-container label:hover{ border-left:3px solid #1680e8; border-right:3px solid #1680e8; } .ac-container input:checked + label, .ac-container input:checked + label:hover{ background: -moz-linear-gradient(top, #313131 1%, #5c5c5c 50%); background: -webkit-linear-gradient(top, #313131 1%,#5c5c5c 100%); background: -o-linear-gradient(top, #313131 1%,#5c5c5c 100%); background: -ms-linear-gradient(top, #313131 1%,#5c5c5c 100%); background: linear-gradient(top, #313131 1%,#5c5c5c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#313131', endColorstr='#1680e8',GradientType=0 ); color: #ffffff; text-shadow: 0px 0px 10px #ffffff; box-shadow: 0px 0px 2px #333; border-left:3px solid #1680e8; border-right:3px solid #1680e8; } .ac-container label:hover:after, .ac-container input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYFgBaQSQzSod-EqHc6gKV090zrupHUjk0COoH6e2Lo0VzQB4Goo6jFojiu8qKTYlpuFGfhFJw6dLzfM4n3mwToxlTwlObf3fFeLJMuF0_tKWUgvj4hKZkYrgghCGQB7T77CmWDSWmg28/s800/arrow_down.png) no-repeat center center; } .ac-container input:checked + label:hover:after{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0T0HatHn-bLSR3TWeNojqTWbGYp5F7HLXS3yr3jEWTikCoj2w4eF0QzcWgNWkRgUQ38_Ou5BN5Jn3nr5d-ePwRHunl2-kDyzcsQy23vVQ6yR0Pni08plCO4uj5pxGQhSlVj5nl9ayF3g/s800/arrow_up.png); } .ac-container input{ display: none; } .ac-container article{ background: #212121; margin-top: -1px; overflow: hidden; height: 0px; position: relative; z-index: 10; -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; transition: height 0.3s ease-in-out, box-shadow 0.6s linear; border-left:3px solid #1680e8; border-right:3px solid #1680e8; } .ac-container article p{ font-style: italic; color: #ffffff; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } .ac-container input:checked ~ article{ -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; transition: height 0.5s ease-in-out, box-shadow 0.1s linear; border-bottom:3px solid #333; } .ac-container input:checked ~ article.ac-small{ height: 130px; } .ac-container input:checked ~ article.ac-medium{ height: 400px; } .ac-container input:checked ~ article.ac-large{ height: auto; }

than find the </head> and paste this script

<script src='http://natamp3.googlecode.com/files/modernizr.custom.29473.js' type='text/javascript'/>

According thus creating menus in your blog or website, good luck