Codes to Copy

Okay Divas (currently watching s7 e11 of TVD as I write this) I finally have time to share some codes for you all <3 Each code can be customized to your hearts content! Each code is ready to copy and paste into your blog.
I have learned so much since starting a literal website! If you have any questions, leave a comment or message me on tiktok @lotusofmysoul. I will share and update codes as often as I can! However the Diva Dress Up , I would love to share, but keep the Dress up code unique to Lotusofmysoul, something I worked days and days on to share with you all! If you figure out the code, feel free to use it as I have already seen some blogs inspired by my code <3 But for now I will share all the quicker codes that you can update quickly and add to your blog!

☆

Below are some helpful sites you may try out to help with your codes, that I have found very useful<3

HTML/Code Tester Site- Highly suggested,This site allows you to test your code over and over again, change anything you want to see what happens without posting to your blog first!

Find Hex Color - This site allows you to grab a color hex code which is important to change the colors these of your codes to match your blog!

Those two sites will become your best friends!

Helpful Code Tips (skip if you fathom coding diva):

1. Your code consist of three main parts. The Div Style Script,
usually in that order (it's okay if you see a code and it is not, don't worry)
sometimes your code is simple and does not have all parts either!

2. Think of Div as a box, nothing to do yet.(the code does nothing yet) Think of the Style as the design of the box(make it cute, dark, add a border font etc) and think of Script as the box's controls (this make your code move, controls where it goes, what it does)

3. Css( I am still learning) but think is this as the style controls of your whole blog. Not just your codes.
If you go to your blogger.com > theme > advanced > css - this controls your header, tabs, post box, side panels, widget titles etc.
You can do anything, move your header tabs, make all your post backgrounds look the same, add a cool effect to your blog titles.

4. Coding becomes repetitive in a way(from what I have learned),
you will learn more as you edit your code! So...get familiar if you can and the next code you do with become easier!

You can add any of these codes to your side panels through

Layout > Add HTML/Javascript or to a post itself.

As of now each code is kind of to match my theme, pink.

That is an easy color hex code fix in the code!

So once you copy, go to a new tab and open the HTML test site and paste the code.

Find each hex code and test it through the Hex code site and change each one from there!

The text are also pretty straight forward and show up as black text in the HTML test box.

Coding is partially color so you'll get familiar with what colors go with each type of code so it is easier to find where to edit parts!

Codes to Copy + Paste

Tip: For this code, the image i used is made on canva with a png image from pinterest (search the slap pear phone) you MUST have a picture to add to this code. Once you customize your pear phone make sure you have a transparent background > save > to blogger.com > MAKE A POST > switch to html mode > UPLOAD PHOTO FROM COMPUTER > COPY BOTTOM URL IMAGE ONLY > go to the html test site > insert the url where it says!

Tip 2: This code consist of the pink background glow - background sparkles - the popup bubble + text - and the main text - and a shake animation you can edit however you choose

LotusofmySoul CODE ♡

<div class="pear-phone-wrapper" style="text-align: center; width: 100%; margin: 0 auto;">
 
  <link rel="stylesheet" href="https://googleapis.com">

 <div class="pear-container" id="pearPhoneWidget">
    <img class="pear-img" src="IMAGE_URL_HERE" alt="Pear Phone" />
    
    <!-- statusbubble.lotusofmysoul-->
    <div class="pear-popup" id="pearPopup">
      slap update divas <br /> click me ♡
    </div>

    <!--NAME HERE.lotusofmysoul-->
    <div class="pear-top-text" id="pearTop">
      NAME_HERE
    </div>

    <!-- maintext.lotusofmysoul -->
    <div class="pear-center-screen" id="pearScreen">
      This is is where you<br /> 
      place your text,<br /> 
      try it out!
    </div>

    <!-- feelingtext.lotusofmysoul -->
    <div class="pear-feeling-text" id="pearFeeling">
      HAPPY
    </div>
  </div>


  <style>
   
    .pear-container {
      position: relative;
      display: inline-block; 
      margin: 0 auto;        
      cursor: pointer;
      user-select: none;
      text-align: center;
    }

   
    .pear-img {
      width: 300px; 
      height: auto;
      display: block;
      margin: 0 auto;
      filter: drop-shadow(0 20px 25px rgba(255, 150, 200, .4));
      animation: floatPear 3s ease-in-out infinite;
      position: relative;
      z-index: 2; 
    }

    
    .pear-container.shake .pear-img {
      animation: shakePhone .45s ease;
    }

    
    .pear-popup {
      position: absolute;
      top: -30px;
      right: 0px; 
      background: #fff1f8;
      border: 2px solid #ffadc9;
      border-radius: 18px;
      padding: 10px 15px;
      width: 120px;
      font-family: 'Georgia', sans-serif;
      font-size: 10px;
      font-weight: normal;
      color: #ffadc9;
      text-align: center;
      box-shadow: 0 5px 15px rgba(255, 150, 200, .25);
      z-index: 10;
      pointer-events: none;
      opacity: 1; 
      transform: translateY(0) scale(1);
      transition: opacity 0.4s ease, transform 0.4s ease; 
    }

    
    .pear-popup.hide-bubble {
      opacity: 0 !important;
      transform: translateY(-15px) scale(0.8) !important;
    }

    .pear-popup:after {
      content: "";
      position: absolute;
      bottom: -8px;
      left: 30px;
      width: 15px;
      height: 15px;
      background: #fff1f8;
      border-right: 2px solid #ffadc9;
      border-bottom: 2px solid #ffadc9;
      transform: rotate(45deg);
    }

    /* pop uptxt.lotusofmysoul */
    .pear-top-text {
      position: absolute;
      top: 43px; 
      left: 35%; 
      transform: rotate(-1.5deg); 
      font-family: 'Orbitron', sans-serif; 
      font-size: 8px; */
      font-weight: 700; 
      color: #9b00e8; 
      text-align: left; 
      letter-spacing: 0.5px; 
      opacity: 0;
      z-index: 5;
    }

    .pear-top-text.show {
      opacity: 1;
      animation: typingEffect 0.5s steps(10) forwards, glowEffect 1.5s infinite alternate;
    }

    /* maintxt.lotusofmysoul */
    .pear-center-screen {
      position: absolute;
      top: 50px; 
      left: 52%; 
      transform: translateX(-50%) rotate(-1.5deg); 
      width: 110px; 
      height: 40px; 
      font-family: 'Tahoma', sans-serif;
      font-size: 8px; 
      font-weight: normal; 
      line-height: 12px; 
      color: #000;
      text-align: center; 
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      z-index: 5;
    }

    .pear-center-screen.show {
      opacity: 1;
      animation: typingEffect 1.5s steps(40) forwards, glowEffect 1.5s infinite alternate;
    }

    /* bottomtxt.lotusofmysoul */
    .pear-feeling-text {
      position: absolute;
      top: 100px;
      left: 48%;  
      transform: rotate(-1.5deg); 
      font-family: 'Tahoma', sans-serif;
      font-size: 8px; 
      font-weight: normal; 
      color: #9b00e8; 
      opacity: 0;
      z-index: 5;
      white-space: nowrap; 
    }

    .pear-feeling-text.show {
      opacity: 1;
      animation: typingEffect 1.5s steps(10) forwards, glowEffect 1.5s infinite alternate;
    }

    /* backgroundsprkl.lotusofmysoul */
    .pear-sparkle {
      position: absolute;
      pointer-events: none;
      background: #ffb2d6;
      border-radius: 50%;
      width: 16px; 
      height: 16px; 
      z-index: 1; 
      box-shadow: 0 0 12px #fff;
    }

    /* just animations */
    @keyframes floatPear {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    @keyframes shakePhone {
      0% { transform: rotate(0); }
      25% { transform: rotate(-4deg); }
      50% { transform: rotate(4deg); }
      75% { transform: rotate(-2deg); }
      100% { transform: rotate(0); }
    }

    @keyframes typingEffect {
      from { clip-path: inset(0 100% 0 0); }
      to { clip-path: inset(0); }
    }

    @keyframes glowEffect {
      from { filter: drop-shadow(0 0 2px #ffc4df); }
      to { filter: drop-shadow(0 0 6px #ff9fc8); }
    }
    
  </style>

  <script>
    let pearPhone = document.getElementById("pearPhoneWidget");
    let pearPopup = document.getElementById("pearPopup");
    let pearTop = document.getElementById("pearTop");
    let pearScreen = document.getElementById("pearScreen");
    let pearFeeling = document.getElementById("pearFeeling");

    const sparkleColors = ['#ffb2d6', '#ff1f8b', '#008080', '#fff7fb'];

    function createSparkleBurst() {
      for (let i = 0; i < 18; i++) {
        let sparkle = document.createElement("div");
        sparkle.classList.add("pear-sparkle");
        sparkle.style.left = "50%";
        sparkle.style.top = "50%";
        sparkle.style.backgroundColor = sparkleColors[Math.floor(Math.random() * sparkleColors.length)];
        
        let angle = Math.random() * Math.PI * 2;
        let velocity = Math.random() * 140 + 50; 
        let destinationX = Math.cos(angle) * velocity;
        let destinationY = Math.sin(angle) * velocity;
        
        pearPhone.appendChild(sparkle);
        
        let animation = sparkle.animate([
          { transform: 'translate(-50%, -50%) scale(1)', opacity: 1 },
          { transform: `translate(calc(-50% + ${destinationX}px), calc(-50% + ${destinationY}px)) scale(0)`, opacity: 0 }
        ], {
          duration: Math.random() * 900 + 500,
          easing: 'cubic-bezier(0.1, 0.8, 0.3, 1)'
        });
        
        animation.onfinish = () => sparkle.remove();
      }
    }

    pearPhone.onclick = function() {
      
      pearPopup.classList.add("hide-bubble");

      
      pearPhone.classList.remove("shake");
      void pearPhone.offsetWidth; 
      pearPhone.classList.add("shake");

      
      pearTop.classList.remove("show");
      void pearTop.offsetWidth;
      pearTop.classList.add("show");

      pearScreen.classList.remove("show");
      void pearScreen.offsetWidth;
      pearScreen.classList.add("show");

      pearFeeling.classList.remove("show");
      void pearFeeling.offsetWidth;
      pearFeeling.classList.add("show");

      
      createSparkleBurst();
    };
  </script>
</div>

5 comments:

KISHIA BEESeptember 17, 2026 at 1:07 AM
how to do this in my blog please
when i search my blog its so boring
NevaehSeptember 17, 2026 at 6:39 PM
what size did you use on canva to make the image for the code
Mongol WhimsiesSeptember 19, 2026 at 4:22 AM
Do you mind also giving a tutorial on the whats in my bag? I've been at my wits end trying to figure it out and your blogs so cute

LotusofmySoul

Codes to Copy

5 comments:

✿ Pages

✿ Find me here!

translate!

Report Abuse