Hi dear,
it is not news that the blogging era has made a comeback. We are here and we are here to stay!!!!!
I have made a list of some cool widget codes that helped me get started when I was customizing my blog. If you have any questions, please feel free to leave them below. And come back often for updates :)
Well, here they are:
1. feed the fish
<iframe width="350" height="250" frameborder="2" src="https://cdn.abowman.com/widgets/fish/fish.html?up\_backgroundColor=8ae7ea&up\_numFish=5&up\_fishColor1=f45540&up\_fishColor2=e1549f&up\_fishColor3=625ce1&up\_fishColor4=e0c31e&up\_fishColor5=f45540&up\_fishColor6=f45540&up\_fishColor7=f45540&up\_fishColor8=f45540&up\_fishColor9=f45540&up\_fishColor10=f45540"></iframe>
2. "About me" animated sticky note
(some items require additional customization, like changing text, adding images. You can also edit the fonts, size and color of the note!) For those, I will leave them highlighted for you to see them better)
<style>
@import url('https://fonts.googleapis.com/css2?family=Emilys+Candy&family=Crafty+Girls&display=swap');
.sticky-note {
background-color: #a8e6e0;
padding: 30px 25px;
border-radius: 2px;
box-shadow: 3px 5px 10px rgba(0,0,0,0.3);
transform: rotate(-2deg);
transition: transform 0.3s ease;
position: relative;
max-width: 320px;
font-family: 'Emilys Candy', cursive;
}
.sticky-note:hover {
transform: rotate(0deg) scale(1.03);
}
.sticky-note::before {
content: "";
background-image: url("PASTE IMAGE OF PUSHPIN OR STICKER ETC");
background-size: contain;
background-repeat: no-repeat;
width: 30px;
height: 30px;
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.sticky-note h2 {
color: #2d7a74;
margin-top: 0;
margin-bottom: 15px;
font-family: 'Crafty Girls', cursive;
font-size: 34px;
}
.sticky-note-content {
display: flex;
align-items: center;
}
.sticky-note img {
width: 110px;
margin-right: 15px;
border-radius: 4px;
flex-shrink: 0;
}
.sticky-note a {
color: #1d5c9e;
font-weight: 600;
text-decoration: underline;
}
.sticky-note a:hover {
color: #123f6e;
}
.sticky-note .tagline {
font-size: 13px;
display: block;
margin-top: 6px;
}
</style>
<div class="sticky-note">
<h2>[ABOUT ME]</h2>
<div class="sticky-note-content">
<img src="PASTE AVATAR IMAGE HERE" />
<p>
<a href="[link to your about me page]">[name]</a>
<span class="tagline">[add a cute tagline]</span>
</p>
</div>
</div>
3. For a A chat box, visit this site!
https://www.cbox.ws/admin?snippet
- create an account, follow the instructions and voila! copy the embed code and paste it onto your gadget box
4. get a pet!
https://gify.pet/#getapet
-design your pet, copy the code and paste it onto your gadget box
5. Status Box! (This is fully customizable as well, look within the code for the chengeable text to make it your own:))
<div class="status-badge">
<div class="badge-header">Currently 🏷️</div>
<div class="status-item"><b>Mood:</b> 🍵 Inspired</div>
<div class="status-item"><b>Reading:</b> "The god of little things" by Arundhati Roy </div>
<div class="status-item" style="border:;"><b>Listening:</b> Sustainable Minimalist podcast</div>
</div>
<style>
.status-badge { width: 160px; padding: 10px; background: tag:#F7F2E8; border: 2px dashed #tag:#31473A; border-radius: 10px; font-family: 'Courier New', monospace; font-size: 11px; margin: 0 auto; box-shadow: 3px 3px 0px ##78866b; }
.badge-header { font-weight: bold; color: #b73046; font-size: 18px; margin-bottom: 4px; text-align: center; border-bottom: 1px solid #tag:#B86F52; padding-bottom: 4px; }
.status-item { padding: 8px 0; color: #4c0519; border-bottom: 1px dotted #8b8878; text-align: left; overflow: hidden; text overflow: ellipsis; white-space: }
.status-item b { color: #a17a74; }</style>
And always, let me know if you have any issues and I will do my best to help!!!!
Please be patient with me, I am still learning (aren't we all!) Let's learn together <3