Cara Memasang WIGDET Menu 3D Di blogger

Cara memasang menu 3d Di blogger

DEMO

• HOME
• ARCHIVE
• MENU 1
• MENU 1
• MENU 1
• MENU 1

masuk ke blogger sobat
1 . masuk ke blogger sobat

  2 . klik tataletak
3 . click tambahkan gadget Copy paste Kode di bawah ini


  <div dir="ltr" style="text-align: left;" trbidi="on"> <div class="dropdown" id="cssmenu"> <div dir="ltr" style="text-align: left;" trbidi="on"> <div class="dropdown" id="cssmenu"> <ul> <li><a data-title="PAGE" href="#">HOME</a></li> <li><a data-title="MENU 2" href="#">ARCHIVE</a></li> <li><a data-title="MENU 2" href="#">MENU 1</a></li> <li><a data-title="MENU 2" href="#">MENU 1</a></li> <li><a data-title="MENU 2" href="#">MENU 1</a></li> <li><a data-title="MENU 2" href="#">MENU 1</a></li> </ul> </div> <style> @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   font-family:Trebuchet Ms;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu #menu-button {   display: none; } #cssmenu {   width: auto;   font-family: Raleway, sans-serif;   line-height: 1; } #cssmenu > ul {   background: #3db2e1; } #cssmenu > ul > li {   float: left;   -webkit-perspective: 1000px;   -moz-perspective: 1000px;   perspective: 1000px; } #cssmenu.align-center > ul {   font-size: 0;   text-align: center; } #cssmenu.align-center > ul > li {   display: inline-block;   float: none; } #cssmenu.align-right > ul > li {   float: right; } #cssmenu > ul > li > a {   padding: 16px 20px;   font-size: 14px;   color: #ffffff;   letter-spacing: 1px;   text-transform: uppercase;   text-decoration: none;   background: #3db2e1;   -webkit-transition: all .3s;   -moz-transition: all .3s;   -o-transition: all .3s;   transition: all .3s;   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -webkit-transform-style: preserve-3d;   -moz-transform-style: preserve-3d;   transform-style: preserve-3d; } #cssmenu > ul > li.active > a {   color: #dff2fa; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: rotateX(90deg) translateY(-23px);   -moz-transform: rotateX(90deg) translateY(-23px);   transform: rotateX(90deg) translateY(-23px);   -ms-transform: none; } #cssmenu > ul > li > a::before {   position: absolute;   top: 100%;   left: 0;   z-index: -1;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   width: 100%;   height: 100%;   padding: 16px 20px;   color: #dff2fa;   background: #19799f;   content: attr(data-title);   -webkit-transition: background 0.3s;   -moz-transition: background 0.3s;   transition: background 0.3s;   -webkit-transform: rotateX(-90deg);   -moz-transform: rotateX(-90deg);   transform: rotateX(-90deg);   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -ms-transform: translateY(- -18px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before {   background: #3db2e1; } #cssmenu.small-screen {   width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul {   width: 100%;   text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center {   float: none;   display: block;   border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: none;   -moz-transform: none;   transform: none;   -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before {   display: none; } #cssmenu.small-screen #menu-button {   display: block;   padding: 16px 20px;   cursor: pointer;   font-size: 14px;   text-decoration: none;   color: #ffffff;   text-transform: uppercase;   letter-spacing: 1px;   background: #3db2e1; } #cssmenu.small-screen #menu-button:after {   content: "";   position: absolute;   right: 20px;   top: 17px;   display: block;   -webkit-box-sizing: content-box;   -moz-box-sizing: content-box;   box-sizing: content-box;   border-top: 2px solid #ffffff;   border-bottom: 2px solid #ffffff;   width: 22px;   height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after {   border-top: 2px solid #dff2fa;   border-bottom: 2px solid #dff2fa; } #cssmenu.small-screen #menu-button:before {   content: "";   position: absolute;   right: 20px;   top: 27px;   display: block;   width: 22px;   height: 2px;   background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before {   background: #dff2fa; } </style> <style> @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   font-family:Trebuchet Ms;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu #menu-button {   display: none; } #cssmenu {   width: auto;   font-family: Raleway, sans-serif;   line-height: 1; } #cssmenu > ul {   background: #3db2e1; } #cssmenu > ul > li {   float: left;   -webkit-perspective: 1000px;   -moz-perspective: 1000px;   perspective: 1000px; } #cssmenu.align-center > ul {   font-size: 0;   text-align: center; } #cssmenu.align-center > ul > li {   display: inline-block;   float: none; } #cssmenu.align-right > ul > li {   float: right; } #cssmenu > ul > li > a {   padding: 16px 20px;   font-size: 14px;   color: #ffffff;   letter-spacing: 1px;   text-transform: uppercase;   text-decoration: none;   background: #3db2e1;   -webkit-transition: all .3s;   -moz-transition: all .3s;   -o-transition: all .3s;   transition: all .3s;   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -webkit-transform-style: preserve-3d;   -moz-transform-style: preserve-3d;   transform-style: preserve-3d; } #cssmenu > ul > li.active > a {   color: #dff2fa; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: rotateX(90deg) translateY(-23px);   -moz-transform: rotateX(90deg) translateY(-23px);   transform: rotateX(90deg) translateY(-23px);   -ms-transform: none; } #cssmenu > ul > li > a::before {   position: absolute;   top: 100%;   left: 0;   z-index: -1;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   width: 100%;   height: 100%;   padding: 16px 20px;   color: #dff2fa;   background: #19799f;   content: attr(data-title);   -webkit-transition: background 0.3s;   -moz-transition: background 0.3s;   transition: background 0.3s;   -webkit-transform: rotateX(-90deg);   -moz-transform: rotateX(-90deg);   transform: rotateX(-90deg);   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -ms-transform: translateY(- -18px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before {   background: #3db2e1; } #cssmenu.small-screen {   width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul {   width: 100%;   text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center {   float: none;   display: block;   border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: none;   -moz-transform: none;   transform: none;   -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before {   display: none; } #cssmenu.small-screen #menu-button {   display: block;   padding: 16px 20px;   cursor: pointer;   font-size: 14px;   text-decoration: none;   color: #ffffff;   text-transform: uppercase;   letter-spacing: 1px;   background: #3db2e1; } #cssmenu.small-screen #menu-button:after {   content: "";   position: absolute;   right: 20px;   top: 17px;   display: block;   -webkit-box-sizing: content-box;   -moz-box-sizing: content-box;   box-sizing: content-box;   border-top: 2px solid #ffffff;   border-bottom: 2px solid #ffffff;   width: 22px;   height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after {   border-top: 2px solid #dff2fa;   border-bottom: 2px solid #dff2fa; } #cssmenu.small-screen #menu-button:before {   content: "";   position: absolute;   right: 20px;   top: 27px;   display: block;   width: 22px;   height: 2px;   background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before {   background: #dff2fa; } </style> <style> @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   font-family:Trebuchet Ms;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu #menu-button {   display: none; } #cssmenu {   width: auto;   font-family: Raleway, sans-serif;   line-height: 1; } #cssmenu > ul {   background: #3db2e1; } #cssmenu > ul > li {   float: left;   -webkit-perspective: 1000px;   -moz-perspective: 1000px;   perspective: 1000px; } #cssmenu.align-center > ul {   font-size: 0;   text-align: center; } #cssmenu.align-center > ul > li {   display: inline-block;   float: none; } #cssmenu.align-right > ul > li {   float: right; } #cssmenu > ul > li > a {   padding: 16px 20px;   font-size: 14px;   color: #ffffff;   letter-spacing: 1px;   text-transform: uppercase;   text-decoration: none;   background: #3db2e1;   -webkit-transition: all .3s;   -moz-transition: all .3s;   -o-transition: all .3s;   transition: all .3s;   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -webkit-transform-style: preserve-3d;   -moz-transform-style: preserve-3d;   transform-style: preserve-3d; } #cssmenu > ul > li.active > a {   color: #dff2fa; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: rotateX(90deg) translateY(-23px);   -moz-transform: rotateX(90deg) translateY(-23px);   transform: rotateX(90deg) translateY(-23px);   -ms-transform: none; } #cssmenu > ul > li > a::before {   position: absolute;   top: 100%;   left: 0;   z-index: -1;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   width: 100%;   height: 100%;   padding: 16px 20px;   color: #dff2fa;   background: #19799f;   content: attr(data-title);   -webkit-transition: background 0.3s;   -moz-transition: background 0.3s;   transition: background 0.3s;   -webkit-transform: rotateX(-90deg);   -moz-transform: rotateX(-90deg);   transform: rotateX(-90deg);   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -ms-transform: translateY(- -18px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before {   background: #3db2e1; } #cssmenu.small-screen {   width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul {   width: 100%;   text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center {   float: none;   display: block;   border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: none;   -moz-transform: none;   transform: none;   -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before {   display: none; } #cssmenu.small-screen #menu-button {   display: block;   padding: 16px 20px;   cursor: pointer;   font-size: 14px;   text-decoration: none;   color: #ffffff;   text-transform: uppercase;   letter-spacing: 1px;   background: #3db2e1; } #cssmenu.small-screen #menu-button:after {   content: "";   position: absolute;   right: 20px;   top: 17px;   display: block;   -webkit-box-sizing: content-box;   -moz-box-sizing: content-box;   box-sizing: content-box;   border-top: 2px solid #ffffff;   border-bottom: 2px solid #ffffff;   width: 22px;   height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after {   border-top: 2px solid #dff2fa;   border-bottom: 2px solid #dff2fa; } #cssmenu.small-screen #menu-button:before {   content: "";   position: absolute;   right: 20px;   top: 27px;   display: block;   width: 22px;   height: 2px;   background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before {   background: #dff2fa; } </style> <style> @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   font-family:Trebuchet Ms;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu #menu-button {   display: none; } #cssmenu {   width: auto;   font-family: Raleway, sans-serif;   line-height: 1; } #cssmenu > ul {   background: #3db2e1; } #cssmenu > ul > li {   float: left;   -webkit-perspective: 1000px;   -moz-perspective: 1000px;   perspective: 1000px; } #cssmenu.align-center > ul {   font-size: 0;   text-align: center; } #cssmenu.align-center > ul > li {   display: inline-block;   float: none; } #cssmenu.align-right > ul > li {   float: right; } #cssmenu > ul > li > a {   padding: 16px 20px;   font-size: 14px;   color: #ffffff;   letter-spacing: 1px;   text-transform: uppercase;   text-decoration: none;   background: #3db2e1;   -webkit-transition: all .3s;   -moz-transition: all .3s;   -o-transition: all .3s;   transition: all .3s;   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -webkit-transform-style: preserve-3d;   -moz-transform-style: preserve-3d;   transform-style: preserve-3d; } #cssmenu > ul > li.active > a {   color: #dff2fa; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: rotateX(90deg) translateY(-23px);   -moz-transform: rotateX(90deg) translateY(-23px);   transform: rotateX(90deg) translateY(-23px);   -ms-transform: none; } #cssmenu > ul > li > a::before {   position: absolute;   top: 100%;   left: 0;   z-index: -1;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   width: 100%;   height: 100%;   padding: 16px 20px;   color: #dff2fa;   background: #19799f;   content: attr(data-title);   -webkit-transition: background 0.3s;   -moz-transition: background 0.3s;   transition: background 0.3s;   -webkit-transform: rotateX(-90deg);   -moz-transform: rotateX(-90deg);   transform: rotateX(-90deg);   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -ms-transform: translateY(- -18px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before {   background: #3db2e1; } #cssmenu.small-screen {   width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul {   width: 100%;   text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center {   float: none;   display: block;   border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: none;   -moz-transform: none;   transform: none;   -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before {   display: none; } #cssmenu.small-screen #menu-button {   display: block;   padding: 16px 20px;   cursor: pointer;   font-size: 14px;   text-decoration: none;   color: #ffffff;   text-transform: uppercase;   letter-spacing: 1px;   background: #3db2e1; } #cssmenu.small-screen #menu-button:after {   content: "";   position: absolute;   right: 20px;   top: 17px;   display: block;   -webkit-box-sizing: content-box;   -moz-box-sizing: content-box;   box-sizing: content-box;   border-top: 2px solid #ffffff;   border-bottom: 2px solid #ffffff;   width: 22px;   height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after {   border-top: 2px solid #dff2fa;   border-bottom: 2px solid #dff2fa; } #cssmenu.small-screen #menu-button:before {   content: "";   position: absolute;   right: 20px;   top: 27px;   display: block;   width: 22px;   height: 2px;   background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before {   background: #dff2fa; } </style> <style> @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   font-family:Trebuchet Ms;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu #menu-button {   display: none; } #cssmenu {   width: auto;   font-family: Raleway, sans-serif;   line-height: 1; } #cssmenu > ul {   background: #3db2e1; } #cssmenu > ul > li {   float: left;   -webkit-perspective: 1000px;   -moz-perspective: 1000px;   perspective: 1000px; } #cssmenu.align-center > ul {   font-size: 0;   text-align: center; } #cssmenu.align-center > ul > li {   display: inline-block;   float: none; } #cssmenu.align-right > ul > li {   float: right; } #cssmenu > ul > li > a {   padding: 16px 20px;   font-size: 14px;   color: #ffffff;   letter-spacing: 1px;   text-transform: uppercase;   text-decoration: none;   background: #3db2e1;   -webkit-transition: all .3s;   -moz-transition: all .3s;   -o-transition: all .3s;   transition: all .3s;   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -webkit-transform-style: preserve-3d;   -moz-transform-style: preserve-3d;   transform-style: preserve-3d; } #cssmenu > ul > li.active > a {   color: #dff2fa; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: rotateX(90deg) translateY(-23px);   -moz-transform: rotateX(90deg) translateY(-23px);   transform: rotateX(90deg) translateY(-23px);   -ms-transform: none; } #cssmenu > ul > li > a::before {   position: absolute;   top: 100%;   left: 0;   z-index: -1;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   width: 100%;   height: 100%;   padding: 16px 20px;   color: #dff2fa;   background: #19799f;   content: attr(data-title);   -webkit-transition: background 0.3s;   -moz-transition: background 0.3s;   transition: background 0.3s;   -webkit-transform: rotateX(-90deg);   -moz-transform: rotateX(-90deg);   transform: rotateX(-90deg);   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -ms-transform: translateY(- -18px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before {   background: #3db2e1; } #cssmenu.small-screen {   width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul {   width: 100%;   text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center {   float: none;   display: block;   border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: none;   -moz-transform: none;   transform: none;   -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before {   display: none; } #cssmenu.small-screen #menu-button {   display: block;   padding: 16px 20px;   cursor: pointer;   font-size: 14px;   text-decoration: none;   color: #ffffff;   text-transform: uppercase;   letter-spacing: 1px;   background: #3db2e1; } #cssmenu.small-screen #menu-button:after {   content: "";   position: absolute;   right: 20px;   top: 17px;   display: block;   -webkit-box-sizing: content-box;   -moz-box-sizing: content-box;   box-sizing: content-box;   border-top: 2px solid #ffffff;   border-bottom: 2px solid #ffffff;   width: 22px;   height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after {   border-top: 2px solid #dff2fa;   border-bottom: 2px solid #dff2fa; } #cssmenu.small-screen #menu-button:before {   content: "";   position: absolute;   right: 20px;   top: 27px;   display: block;   width: 22px;   height: 2px;   background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before {   background: #dff2fa; } </style> <style> @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   font-family:Trebuchet Ms;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu #menu-button {   display: none; } #cssmenu {   width: auto;   font-family: Raleway, sans-serif;   line-height: 1; } #cssmenu > ul {   background: #3db2e1; } #cssmenu > ul > li {   float: left;   -webkit-perspective: 1000px;   -moz-perspective: 1000px;   perspective: 1000px; } #cssmenu.align-center > ul {   font-size: 0;   text-align: center; } #cssmenu.align-center > ul > li {   display: inline-block;   float: none; } #cssmenu.align-right > ul > li {   float: right; } #cssmenu > ul > li > a {   padding: 16px 20px;   font-size: 14px;   color: #ffffff;   letter-spacing: 1px;   text-transform: uppercase;   text-decoration: none;   background: #3db2e1;   -webkit-transition: all .3s;   -moz-transition: all .3s;   -o-transition: all .3s;   transition: all .3s;   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -webkit-transform-style: preserve-3d;   -moz-transform-style: preserve-3d;   transform-style: preserve-3d; } #cssmenu > ul > li.active > a {   color: #dff2fa; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: rotateX(90deg) translateY(-23px);   -moz-transform: rotateX(90deg) translateY(-23px);   transform: rotateX(90deg) translateY(-23px);   -ms-transform: none; } #cssmenu > ul > li > a::before {   position: absolute;   top: 100%;   left: 0;   z-index: -1;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   width: 100%;   height: 100%;   padding: 16px 20px;   color: #dff2fa;   background: #19799f;   content: attr(data-title);   -webkit-transition: background 0.3s;   -moz-transition: background 0.3s;   transition: background 0.3s;   -webkit-transform: rotateX(-90deg);   -moz-transform: rotateX(-90deg);   transform: rotateX(-90deg);   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -ms-transform: translateY(- -18px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before {   background: #3db2e1; } #cssmenu.small-screen {   width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul {   width: 100%;   text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center {   float: none;   display: block;   border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: none;   -moz-transform: none;   transform: none;   -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before {   display: none; } #cssmenu.small-screen #menu-button {   display: block;   padding: 16px 20px;   cursor: pointer;   font-size: 14px;   text-decoration: none;   color: #ffffff;   text-transform: uppercase;   letter-spacing: 1px;   background: #3db2e1; } #cssmenu.small-screen #menu-button:after {   content: "";   position: absolute;   right: 20px;   top: 17px;   display: block;   -webkit-box-sizing: content-box;   -moz-box-sizing: content-box;   box-sizing: content-box;   border-top: 2px solid #ffffff;   border-bottom: 2px solid #ffffff;   width: 22px;   height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after {   border-top: 2px solid #dff2fa;   border-bottom: 2px solid #dff2fa; } #cssmenu.small-screen #menu-button:before {   content: "";   position: absolute;   right: 20px;   top: 27px;   display: block;   width: 22px;   height: 2px;   background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before {   background: #dff2fa; } </style> <style> @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   font-family:Trebuchet Ms;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu #menu-button {   display: none; } #cssmenu {   width: auto;   font-family: Raleway, sans-serif;   line-height: 1; } #cssmenu > ul {   background: #3db2e1; } #cssmenu > ul > li {   float: left;   -webkit-perspective: 1000px;   -moz-perspective: 1000px;   perspective: 1000px; } #cssmenu.align-center > ul {   font-size: 0;   text-align: center; } #cssmenu.align-center > ul > li {   display: inline-block;   float: none; } #cssmenu.align-right > ul > li {   float: right; } #cssmenu > ul > li > a {   padding: 16px 20px;   font-size: 14px;   color: #ffffff;   letter-spacing: 1px;   text-transform: uppercase;   text-decoration: none;   background: #3db2e1;   -webkit-transition: all .3s;   -moz-transition: all .3s;   -o-transition: all .3s;   transition: all .3s;   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -webkit-transform-style: preserve-3d;   -moz-transform-style: preserve-3d;   transform-style: preserve-3d; } #cssmenu > ul > li.active > a {   color: #dff2fa; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: rotateX(90deg) translateY(-23px);   -moz-transform: rotateX(90deg) translateY(-23px);   transform: rotateX(90deg) translateY(-23px);   -ms-transform: none; } #cssmenu > ul > li > a::before {   position: absolute;   top: 100%;   left: 0;   z-index: -1;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   width: 100%;   height: 100%;   padding: 16px 20px;   color: #dff2fa;   background: #19799f;   content: attr(data-title);   -webkit-transition: background 0.3s;   -moz-transition: background 0.3s;   transition: background 0.3s;   -webkit-transform: rotateX(-90deg);   -moz-transform: rotateX(-90deg);   transform: rotateX(-90deg);   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -ms-transform: translateY(- -18px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before {   background: #3db2e1; } #cssmenu.small-screen {   width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul {   width: 100%;   text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center {   float: none;   display: block;   border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: none;   -moz-transform: none;   transform: none;   -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before {   display: none; } #cssmenu.small-screen #menu-button {   display: block;   padding: 16px 20px;   cursor: pointer;   font-size: 14px;   text-decoration: none;   color: #ffffff;   text-transform: uppercase;   letter-spacing: 1px;   background: #3db2e1; } #cssmenu.small-screen #menu-button:after {   content: "";   position: absolute;   right: 20px;   top: 17px;   display: block;   -webkit-box-sizing: content-box;   -moz-box-sizing: content-box;   box-sizing: content-box;   border-top: 2px solid #ffffff;   border-bottom: 2px solid #ffffff;   width: 22px;   height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after {   border-top: 2px solid #dff2fa;   border-bottom: 2px solid #dff2fa; } #cssmenu.small-screen #menu-button:before {   content: "";   position: absolute;   right: 20px;   top: 27px;   display: block;   width: 22px;   height: 2px;   background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before {   background: #dff2fa; } </style> <style> @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   font-family:Trebuchet Ms;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu #menu-button {   display: none; } #cssmenu {   width: auto;   font-family: Raleway, sans-serif;   line-height: 1; } #cssmenu > ul {   background: #3db2e1; } #cssmenu > ul > li {   float: left;   -webkit-perspective: 1000px;   -moz-perspective: 1000px;   perspective: 1000px; } #cssmenu.align-center > ul {   font-size: 0;   text-align: center; } #cssmenu.align-center > ul > li {   display: inline-block;   float: none; } #cssmenu.align-right > ul > li {   float: right; } #cssmenu > ul > li > a {   padding: 16px 20px;   font-size: 14px;   color: #ffffff;   letter-spacing: 1px;   text-transform: uppercase;   text-decoration: none;   background: #3db2e1;   -webkit-transition: all .3s;   -moz-transition: all .3s;   -o-transition: all .3s;   transition: all .3s;   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -webkit-transform-style: preserve-3d;   -moz-transform-style: preserve-3d;   transform-style: preserve-3d; } #cssmenu > ul > li.active > a {   color: #dff2fa; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: rotateX(90deg) translateY(-23px);   -moz-transform: rotateX(90deg) translateY(-23px);   transform: rotateX(90deg) translateY(-23px);   -ms-transform: none; } #cssmenu > ul > li > a::before {   position: absolute;   top: 100%;   left: 0;   z-index: -1;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   width: 100%;   height: 100%;   padding: 16px 20px;   color: #dff2fa;   background: #19799f;   content: attr(data-title);   -webkit-transition: background 0.3s;   -moz-transition: background 0.3s;   transition: background 0.3s;   -webkit-transform: rotateX(-90deg);   -moz-transform: rotateX(-90deg);   transform: rotateX(-90deg);   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -ms-transform: translateY(- -18px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before {   background: #3db2e1; } #cssmenu.small-screen {   width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul {   width: 100%;   text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center {   float: none;   display: block;   border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: none;   -moz-transform: none;   transform: none;   -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before {   display: none; } #cssmenu.small-screen #menu-button {   display: block;   padding: 16px 20px;   cursor: pointer;   font-size: 14px;   text-decoration: none;   color: #ffffff;   text-transform: uppercase;   letter-spacing: 1px;   background: #3db2e1; } #cssmenu.small-screen #menu-button:after {   content: "";   position: absolute;   right: 20px;   top: 17px;   display: block;   -webkit-box-sizing: content-box;   -moz-box-sizing: content-box;   box-sizing: content-box;   border-top: 2px solid #ffffff;   border-bottom: 2px solid #ffffff;   width: 22px;   height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after {   border-top: 2px solid #dff2fa;   border-bottom: 2px solid #dff2fa; } #cssmenu.small-screen #menu-button:before {   content: "";   position: absolute;   right: 20px;   top: 27px;   display: block;   width: 22px;   height: 2px;   background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before {   background: #dff2fa; } </style> <style> @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   font-family:Trebuchet Ms;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu #menu-button {   display: none; } #cssmenu {   width: auto;   font-family: Raleway, sans-serif;   line-height: 1; } #cssmenu > ul {   background: #3db2e1; } #cssmenu > ul > li {   float: left;   -webkit-perspective: 1000px;   -moz-perspective: 1000px;   perspective: 1000px; } #cssmenu.align-center > ul {   font-size: 0;   text-align: center; } #cssmenu.align-center > ul > li {   display: inline-block;   float: none; } #cssmenu.align-right > ul > li {   float: right; } #cssmenu > ul > li > a {   padding: 16px 20px;   font-size: 14px;   color: #ffffff;   letter-spacing: 1px;   text-transform: uppercase;   text-decoration: none;   background: #3db2e1;   -webkit-transition: all .3s;   -moz-transition: all .3s;   -o-transition: all .3s;   transition: all .3s;   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -webkit-transform-style: preserve-3d;   -moz-transform-style: preserve-3d;   transform-style: preserve-3d; } #cssmenu > ul > li.active > a {   color: #dff2fa; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: rotateX(90deg) translateY(-23px);   -moz-transform: rotateX(90deg) translateY(-23px);   transform: rotateX(90deg) translateY(-23px);   -ms-transform: none; } #cssmenu > ul > li > a::before {   position: absolute;   top: 100%;   left: 0;   z-index: -1;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   width: 100%;   height: 100%;   padding: 16px 20px;   color: #dff2fa;   background: #19799f;   content: attr(data-title);   -webkit-transition: background 0.3s;   -moz-transition: background 0.3s;   transition: background 0.3s;   -webkit-transform: rotateX(-90deg);   -moz-transform: rotateX(-90deg);   transform: rotateX(-90deg);   -webkit-transform-origin: 50% 0;   -moz-transform-origin: 50% 0;   transform-origin: 50% 0;   -ms-transform: translateY(- -18px); } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before {   background: #3db2e1; } #cssmenu.small-screen {   width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul {   width: 100%;   text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center {   float: none;   display: block;   border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover {   color: #dff2fa;   -webkit-transform: none;   -moz-transform: none;   transform: none;   -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before {   display: none; } #cssmenu.small-screen #menu-button {   display: block;   padding: 16px 20px;   cursor: pointer;   font-size: 14px;   text-decoration: none;   color: #ffffff;   text-transform: uppercase;   letter-spacing: 1px;   background: #3db2e1; } #cssmenu.small-screen #menu-button:after {   content: "";   position: absolute;   right: 20px;   top: 17px;   display: block;   -webkit-box-sizing: content-box;   -moz-box-sizing: content-box;   box-sizing: content-box;   border-top: 2px solid #ffffff;   border-bottom: 2px solid #ffffff;   width: 22px;   height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after {   border-top: 2px solid #dff2fa;   border-bottom: 2px solid #dff2fa; } #cssmenu.small-screen #menu-button:before {   content: "";   position: absolute;   right: 20px;   top: 27px;   display: block;   width: 22px;   height: 2px;   background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before {   background: #dff2fa; }




   Kalo sudah di copy tinggal merubah kode yang berwarna Catatan : 

 A . kode yang berwarna Biru itu untuk nama sebelum membalik

 B . kode # Yang berwarna merah itu untuk link sobat

 C . kode yang berwarna hijau yaitu untuk nama sesudah berbalik contoh seperti di atas coba arahin cursornya ke atas Demo itu

nah jadi kode yang berwarna itu gantilah sesuai selera jadi sekarang Terimakasih ats kunjunganya Salam  BLS-CYBER yang tida bisa atu ada yng salah dalam kode mohon lapor jangan diam saja