- Code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Raleway:400,900" rel="stylesheet"><style>.siggy{height:100px;width:300px;margin:0 auto;background:#ebebeb;padding:10px;font-family:'Raleway',sans-serif;border:3px solid #e4e4e4;position:relative;box-sizing: initial;}.siggy * { box-sizing: content-box; }.siggy-img{box-sizing: initial;width:100px;height:100px;border-top:3px dotted #9F1225;border-right:1px solid #ebebeb;border-bottom:3px dotted #9F1225;border-left:1px solid #ebebeb;border-radius:50%;transition:all .3s linear;-webkit-animation:spinit 2s linear infinite;-moz-animation:spinit 2s linear infinite;animation:spinit 2s linear infinite;text-align:center;line-height:100px;transform:rotate(-35deg);float:left}.siggy-img img{border-radius:50%;border:10px solid #ebebeb;transform:rotate(35deg);width:80px;height:80px}.siggy h2{display:inline-block;text-transform:uppercase;font-weight:400;color:#e3304d;vertical-align:top;margin:0;font-size: 25px;font-family:'Raleway',sans-serif;}.siggy .siggy-links{padding:20px 0 0 20px;display:inline-block;box-sizing: initial;}.siggy-links a{display:inline-block;height:30px;width:40px;border-radius:50%;background:#fff;border:5px solid #e4dddd;text-align:center;color:#e3304d;margin-right:9px;font-size:20px;transform-origin:50% 50%;box-shadow:inset 0 0 1px #000;padding-top: 10px;}.siggy-links a:hover{animation-name:pulse;animation-duration:2000ms;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes pulse{0%{transform:scale(1)}30%{transform:scale(1)}40%{transform:scale(1.08)}50%{transform:scale(1)}60%{transform:scale(1)}70%{transform:scale(1.05)}80%{transform:scale(1)}100%{transform:scale(1)}}.siggy-credit{width:100%;text-align:center;position:absolute;left:0;bottom:-20px;text-decoration:none!important;text-transform:uppercase;font-size:7px;letter-spacing:1px;color:#ccc!important}</style>
<div class="siggy"><div class="siggy-img"><img src="http://images6.fanpop.com/image/photos/36200000/Girl-s-Day-image-girls-day-36208992-100-100.gif"></div><h2><b>Hey</b>it'sme!</h2><div class="siggy-links"><a href="#"><i class="ion-chatbubble-working"></i></a><a href="#"><i class="ion-person"></i></a><a href="#" target="_blank"><i class="ion-heart"></i></a></div><a href="http://terrible.forumactif.org/" target="_blank" class="siggy-credit">Awful</a></div>
Pour héberger votre HTML, le plus simple est d'avoir son propre forum. Dans votre panneau d'administration, allez dans Modules > HTML & JAVASCRIPT > Gestion des pages HTML. Collez le code et enregistrez. L'URL de votre page s'affiche dans la liste de vos pages.
Vous n'aurez plus qu'à la coller dans votre iframe :
- Code:
<iframe style="margin: 0 auto; display: block;" scrolling="no" height="150" width="350" frameborder="0" src="VOTRE URL"></iframe>