Sugar kissed Letters

♡ Fun Fact Gadget ♡

A cute little gadget that shows a different fun fact every time you click the image! ♡
You can use any character, doll, plushie or picture you like. 🎀

♡ preview ♡

<div id="fun-fact-widget"> <div id="fun-fact"></div> <img id="fun-fact-image" src="PASTE YOUR IMAGE LINK HERE" alt="Fun fact" onclick="newFunFact()" > <div class="fun-fact-hint"> ♡ click me ♡ </div> </div> <style> #fun-fact-widget { width: 250px; margin-left: -15px; margin-right: auto; text-align: center; font-family: "Cardo", serif; } /* ================================ FACT SPEECH BUBBLE ================================ */ #fun-fact { display: none; position: relative; background: #fff0f7; border: 1.5px solid #f3bfd5; border-radius: 15px; padding: 10px 13px; margin: 0 auto 12px auto; color: #c783a3; font-family: "Cardo", serif; font-size: 11px; line-height: 1.45; width: 190px; box-sizing: border-box; } /* SPEECH BUBBLE TAIL */ #fun-fact:after { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #f3bfd5; } /* ================================ IMAGE ================================ */ #fun-fact-image { width: 150px; height: auto; cursor: pointer; display: block; margin: 0 auto; transition: transform 0.2s ease; } #fun-fact-image:hover { transform: scale(1.04); } /* ================================ CLICK TEXT ================================ */ .fun-fact-hint { color: #d889aa; font-family: "Cardo", serif; font-weight: bold; font-size: 11px; margin-top: 3px; } </style> <script> var funFacts = [ "Your own fun fact ♡", "Your own fun fact ♡", "Your own fun fact ♡", "Your own fun fact ♡", "Your own fun fact ♡", "Your own fun fact ♡", "Your own fun fact ♡", "Your own fun fact ♡", "Your own fun fact ♡", "Your own fun fact ♡" ]; var currentFunFact = 0; function newFunFact() { var bubble = document.getElementById( "fun-fact" ); bubble.innerHTML = funFacts[currentFunFact]; bubble.style.display = "block"; currentFunFact++; if ( currentFunFact >= funFacts.length ) { currentFunFact = 0; } } </script>

♡ by Sugar Kissed Letters ♡

♡ QUICK TUTORIAL ♡

01. choose your image ♡

Find:
src="PASTE YOUR IMAGE LINK HERE"

Replace it with the direct image link of whatever you want to use!

This can be a character, plushie, photo, PNG, GIF or anything else you like. 🎀


02. add your own fun facts ♡

Find:
var funFacts = [

Replace "Your own fun fact ♡" with your own facts.

Keep each fact inside quotation marks and separate each one with a comma.

You can also use:
<br>
to create a line break inside a fact.


03. that's it! ♡

Save the code and add it to your blog. Clicking your image will show a different fun fact each time! 🎀

♡ have fun decorating your blog! ♡