Her Era Diaries: V's Codes

Welcome to V’s Code Corner! This is where I keep the little details that make a blog feel like your space. You’ll find codes you can copy and add to your own blog, plus links to websites with more widgets and ideas.

Take a look around, try something that catches your eye, and make it your own.

XOXO, V.

Website blog codes

https://indigenousdivadiary.blogspot.com/p/blog-codes.html

https://lotusofmysoul.blogspot.com/p/codes-copy-okay-divas-currently.html

https://keepingupwithkeke222.blogspot.com/search/label/blog%20codes

What's in My Bag Widget

Make a clickable bag for your blog. When a visitor clicks it, all the items rise out together. Click again to close it.

How to use it

Make two transparent PNGs: one showing your bag and one showing all your items arranged together.
Upload both images to Blogger and copy each image's direct URL.
Copy the code below. Replace YOUR_ITEMS_IMAGE_URL and YOUR_BAG_IMAGE_URL with your links.
In Blogger, go to Layout → Add a Gadget → HTML/JavaScript, paste the customized code, and save.

<div class="v-bag-widget" id="vBagWidget">
  <div class="v-bag-title">what's in my bag?</div>
  <div class="v-bag-subtitle" id="vBagSubtitle">click to open</div>

  <button
    id="vBagButton"
    class="v-bag-stage"
    type="button"
    aria-label="Open the bag"
    aria-expanded="false">
    <span class="v-bag-items"></span>
    <span class="v-bag-photo"></span>
  </button>
</div>

<style>
  .v-bag-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 320px;
    margin: 20px auto;
    text-align: center;
  }

  .v-bag-title {
    color: #c95586;
    font: italic 19px Georgia, serif;
  }

  .v-bag-subtitle {
    margin: 5px 0;
    color: #604337;
    font: 11px "Courier New", monospace;
    letter-spacing: 1px;
  }

  .v-bag-stage {
    position: relative;
    display: block;
    flex: none;
    width: 100%;
    height: 300px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: height .5s ease;
  }

  .v-bag-stage:focus-visible {
    outline: 2px solid #c95586;
    outline-offset: 3px;
  }

  .v-bag-items,
  .v-bag-photo {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 320px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .v-bag-items {
    top: 0;
    z-index: 1;
    opacity: 0;
    background-image: url("YOUR_ITEMS_IMAGE_URL");
    transform: translateY(140px);
    transition: transform .5s ease-out, opacity .2s ease;
  }

  .v-bag-photo {
    bottom: 0;
    z-index: 2;
    background-image: url("YOUR_BAG_IMAGE_URL");
  }

  .v-bag-widget.is-open .v-bag-stage {
    height: 480px;
  }

  .v-bag-widget.is-open .v-bag-items {
    opacity: 1;
    transform: translateY(-35px);
  }

  @media (prefers-reduced-motion: reduce) {
    .v-bag-stage,
    .v-bag-items {
      transition: none;
    }
  }
</style>

<script>
(function () {
  var widget = document.getElementById("vBagWidget");
  var button = document.getElementById("vBagButton");
  var subtitle = document.getElementById("vBagSubtitle");

  if (!widget || !button || !subtitle) return;

  button.addEventListener("click", function () {
    var open = widget.classList.toggle("is-open");

    button.setAttribute("aria-expanded", String(open));
    button.setAttribute(
      "aria-label",
      open ? "Close the bag" : "Open the bag"
    );

    subtitle.textContent = open ? "click to close" : "click to open";
  });
})();
</script>

Clickable Filing Cabinet

Create a 2 × 2 grid of clickable images for your blog. Each image can lead to a different page, such as Beauty, Fashion, Influencers, and Lifestyle.

How to use it

Make or choose four images for your cabinet.
Upload the images to Blogger and copy their direct image URLs.
Create the four Blogger pages you want the images to open.
Copy the code and replace each IMAGE_URL and PAGE_URL placeholder with your own links.
Paste your customized code into a Blogger HTML/JavaScript gadget.

<div style="
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
">

  <!-- TOP LEFT -->
  <a href="BEAUTY_PAGE_URL" style="display: block; text-decoration: none;">
    <img
      src="BEAUTY_IMAGE_URL"
      alt="Beauty"
      style="display: block; width: 100%; height: auto; border: 0;"
    />
  </a>

  <!-- TOP RIGHT -->
  <a href="FASHION_PAGE_URL" style="display: block; text-decoration: none;">
    <img
      src="FASHION_IMAGE_URL"
      alt="Fashion"
      style="display: block; width: 100%; height: auto; border: 0;"
    />
  </a>

  <!-- BOTTOM LEFT -->
  <a href="INFLUENCERS_PAGE_URL" style="display: block; text-decoration: none;">
    <img
      src="INFLUENCERS_IMAGE_URL"
      alt="Influencers"
      style="display: block; width: 100%; height: auto; border: 0;"
    />
  </a>

  <!-- BOTTOM RIGHT -->
  <a href="LIFESTYLE_PAGE_URL" style="display: block; text-decoration: none;">
    <img
      src="LIFESTYLE_IMAGE_URL"
      alt="Lifestyle"
      style="display: block; width: 100%; height: auto; border: 0;"
    />
  </a>

</div>

Her Era Diaries

V's Codes

What's in My Bag Widget

How to use it

Clickable Filing Cabinet

How to use it

1 comment:

Hey Sisters! Never Miss a Page

V's Codes

What's in My Bag Widget

How to use it

Clickable Filing Cabinet

How to use it

1 comment:

Hey Sisters! Never Miss a Page

Subscribe To V