Background by Freepik

How to create a frame in my post

So most bloggers use frames and text areas in their post where they have a piece of text, HTML codes, etc. I for one use frames mostly in my blog posts where I type in information about the synopsis of a book, a quote, or anything else really.
I use text areas to put in my HTML codes, for example when I want to share my button and want to a have the pre-made HTML ready for my readers who simply want to copy and past the code from my blog to theirs.

Meme name:  



Grab the code :)

Description from Goodreads: Sparks are igniting, flames are spreading and the Capitol wants revenge.

Against all odds, Katniss has won the Hunger Games. She and fellow District 12 tribute Peeta Mellark are miraculously still alive. Katniss should be relieved, happy even. After all, she has returned to her family and longtime friend, Gale. Yet nothing is the way Katniss wishes it to be. Gale holds her at an icy distance. Peeta has turned his back on her completely. And there are whispers of a rebellion against the Capitol-- a rebellion that Katniss and Peeta may have helped create.

Much to her shock, Katniss has fueled an unrest she's afraid she cannot stop. And what scares her even more is that she's not entirely convinced she should try. As time draws near for Katniss and Peeta to visit the districts on the Capitol's cruel Victory Tour, the stakes are higher than ever. If they can't prove, without a shadow of a doubt, that they are lost in their love for each other, the consequences will be horrifying.

In Catching Fire, the second novel of the Hunger Games trilogy, Suzanne Collins continues the story of Katniss Everdeen, testing her more than ever before... and surprising readers at every turn..

Grab the code :)

The concept of both the frames above are exactly the same except for the different fill in and border color, different edges and different shadow effects. The simple 'naked palette'  HTML code to use in this case is:

<div style="background-color: #FFFFFF; border: 1px solid black;"> TEXT HERE</div>

If you want to personalize your frame, all you need to do is change the following:
  • "#FFFFFF" - to your favorite color (use HEX codes)
  • "1px solid black"
    - You can play around with the thickness of your border by changing the "1px"
    - You can change the type of border you want from solid, to dashed, to dotted
    - You can also change the color of your border (if you want a specific shade of color use a HEX code)
  • "TEXT HERE"- And then the easy part, add your text! 
  • If you want to learn to put it into different effects click HERE.{Coming soon}
  • If you want to make life easy for yourself and get a PREMADE frame, then click here {Coming soon}


It is really simple! All you have to do is use the following HTML code, and past it into your blog post, or in your sidebar wherever you prefer:

<textarea>YOUR TEXT/HTML CODE HERE</textarea>

Simply replace the "YOUR TEXT/HTML CODE HERE" with your own text/html and voila! 

I hope this helped! If you have any questions, please do not hesitate to ask them in the comment section below and I will be happy answer them as soon as possible!

If you have any other questions regarding to 'How the heck I did that?!', then please let me know in the comment section below or feel free to email me in person (contact details below)

Have a lovely peachy day!