Mensaje "Circle 3D" + Menu!

VISTA PREVIA!¡

Para colocar este gadget, nos dirigimos a Diseño // Añadir un gadget // HTML/javascript donde pegamos el siguiente code:

<center>
<div style="border-radius:100%;padding:5px;">
<div id="mmC2-container"><div id="MMCircle">
<div class="mmC3"><br /><br /><br /><br /><center>
TU TEXTO AQUI!
</center></div>
<div class="mmC1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0hqFOt2rMFhNJykYzIEC2dUyJoq-O8qq0U0UvxsE9R24N4mqq1u36Cb7hCTg9XJWBxTQVQUBgdG2iOu3DNK26ClpHLa3r4ziMrY9EsltUT6lKuJtLCvupI9qDzkIk69isG92tSlqBCdT-/s1600/circle.png" style="width: 200px; height: 200px; border-radius:100%;" /></div>
</div></div>
</div>
<div class="menuSC">
<a href="LINK"> TITULO</a>
<a href="LINK"> TITULO</a>
<a href="LINK"> TITULO</a>
<a href="LINK"> TITULO</a>
<a href="LINK"> TITULO</a>
</div>
</center>
<style>
#MMCircle {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;
width: 200px;
height: 200px;
border-radius:33333px;
background: #eee; /* FONDO CIRCLE ESTATICO */
position: relative;
border: 1px dashed #000; /* BORDER CIRCLE ESTATICO */
}
.mmC3, .mmC1 {
position: absolute;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s ease-in;
width: 100%;
height: 100%;
font-family: calibri; /* ESTILO DE LETRA MENSAJE */
color: #000000; /* COLOR DE LETRA MENSAJE */
font-size: 13px; /* TAMAÑO DE LETRA MENSAJE */
border-radius:3333px;
}
.mmC3 {
-webkit-transform: rotateY(180deg);
background: #FFFFFF url(URL IMAGEN FONDO NRO2);
overflow: hidden;
 }
.mmC1 {background: #fff;}
#mmC2-container {display: inline-block;text-align: justify;}
#mmC2-container:hover .mmC3 {-webkit-transform: rotateY(0deg);}
#mmC2-container:hover .mmC1 {-webkit-transform: rotateY(-180deg);}
/* EDICIÓN DEL MENÚ, TUTORIAL: "Menu Shadow" */
.menuSC a{
font-family: arial;
font-size: 13px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 3px;
padding-left: 15px;
letter-spacing: 2px;
box-shadow: inset 9px 0 0px 0 #c3a9ca;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:block;
text-align: left;
background: #6b587f;
color: #c3a9ca;
width: 180px;
border-right:10px solid #fe7693;
border-left:10px solid #fe7693;
border-radius: 10px;
overflow: hidden;
text-decoration: none;
text-shadow: none;
}
.menuSC a:hover{
color: #e8ebed;
box-shadow: inset 1000px 0 0px 0 #c3a9ca;
padding-right: 15px;
text-align: right;
padding-left: 3px;
border-right:10px solid #6b587f;
border-left:10px solid #6b587f;
text-decoration: none;
text-shadow: none;
}
</style>

Editamos lo marcado. Para editar el menú, como allí indica, ve al tutorial "Menú Shadow" o "Crea tu menú" Donde te darán los pasos para poder editarlos a tu gusto.

NOTA IMPORTANTE

Una ves tenemos nuestro gadget, es muy posible que si tenemos una plantilla como "Fantástico, S.A." donde los gadget se muestran separados, nos quede algo molesto o desorganizado & se vera mucho mejor si el mismo gadget no tuviera fondo.
Para quitarle el fondo a nuestro gadget, nos vamos a Plantilla // Edición HTML & busca el nombre de tu widget {donde colocaste el code anterior} al final de tu plantilla:

EJEMPLO:

Una vez tenemos el nombre, lo remplazamos en el siguiente code donde nos indica "NOMBRE":

#NOMBRE {background: none;border: none;box-shadow: none;}
#NOMBRE h2{display: none;}

& listo! Tenemos nuestro mensaje "Efecto 3D" mas un bonito menú en combinación dentro de un gadget transparente!♥~