killthecake | [1] Clouds & Blocks (Reply)

LEFT IMAGE is post code-push. RIGHT IMAGE is pre code-push.

LOREM IPSUM dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lacus enim, id laoreet nunc dapibus condimentum. Pellentesque ligula purus, pellentesque vel tellus rhoncus, viverra suscipit eros. Fusce dapibus magna ante, ut euismod quam placerat semper.

killthecake

Codes

Clouds/Round <!---RIGHT---> <center> <img src="ICONURL" style="margin-bottom: -115px; margin-right: -650px; border-radius: 50%; border: 15px double #828282;width: 100px; height: 100px;"> <div style="text-align: justify; width: 500px; padding-left: 25px; padding-right: 25px; margin-right: 10px; padding-top: 20px; padding-bottom: 20px; background: #e3e3e3; font-family: verdana; font-size: 11px; font-color: #848484; border-radius: 20px 20px 20px 20px;">LOREM IPSUM dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lacus enim, id laoreet nunc dapibus condimentum. Pellentesque ligula purus, pellentesque vel tellus rhoncus, viverra suscipit eros. Fusce dapibus magna ante, ut euismod quam placerat semper. <!---ADD METER HERE---> </div></center> <br /><br /> <!---LEFT---> <center> <img src="ICONURL" style="border-radius: 50%; border: 15px double #828282; margin-bottom: -110px; margin-left: -670px; width: 100px; height: 100px;"> <div style="text-align: justify; width: 500px; padding-left: 25px; padding-right: 25px; margin-right: 5px; padding-top: 20px; padding-bottom: 20px; background: #e3e3e3; font-family: verdana; font-size: 11px; font-color: #848484; border-radius: 20px 20px 20px 20px;">LOREM IPSUM dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lacus enim, id laoreet nunc dapibus condimentum. Pellentesque ligula purus, pellentesque vel tellus rhoncus, viverra suscipit eros. Fusce dapibus magna ante, ut euismod quam placerat semper. <!---ADD METER HERE---> </div></center> <br /><br />	Blocks/Square <!---RIGHT---> <center> <img src="ICONURL" style="width: 100px; height: 100px; border: 15px double #828282; margin-bottom: -110px; margin-right: -630px;"> <div style="text-align: justify; width: 500px; padding-left: 25px; padding-right: 25px; margin-right: 10px; padding-top: 20px; padding-bottom: 20px; background: #e3e3e3; font-family: verdana; font-size: 11px; font-color: #848484;">LOREM IPSUM dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lacus enim, id laoreet nunc dapibus condimentum. Pellentesque ligula purus, pellentesque vel tellus rhoncus, viverra suscipit eros. Fusce dapibus magna ante, ut euismod quam placerat semper. <!---ADD METER HERE---> </div></center> <br /><br /> <!---LEFT---> <center> <div style=""> <img src="ICONURL" style="width: 100px; height: 100px; border: 15px double #828282; margin-bottom: -110px; margin-left: -640px;;"> </div> <div style="text-align: justify; width: 500px; padding-left: 25px; padding-right: 25px; margin-right: 5px; padding-top: 20px; padding-bottom: 20px; background: #e3e3e3; font-family: verdana; font-size: 11px; font-color: #848484;">LOREM IPSUM dolor sit amet, consectetur adipiscing elit. Aliquam consectetur lacus enim, id laoreet nunc dapibus condimentum. Pellentesque ligula purus, pellentesque vel tellus rhoncus, viverra suscipit eros. Fusce dapibus magna ante, ut euismod quam placerat semper. <!---ADD METER HERE---> </div></center> <br /><br />
Round Meter <!---RIGHT---> <div style="float: right; margin-top: 12px; "> <img src="https://img.icons8.com/cotton/25/000000/like--v1.png"> </div> <div style="width: 93%; background: #fff; margin-top: 3px; margin-right: 25px; border: 2px solid #848484; border-radius: 20px 20px 20px 20px;"> <div style="width: NUMBER%; background: #ff0000; height: 10px; border-radius: 20px;"> </div></div> <!---LEFT---> <div style="float: left; margin-top: 12px; "> <img src="https://img.icons8.com/cotton/25/000000/like--v1.png"> </div> <div style="width: 93%; background: #fff; margin-top: 3px; margin-left: 25px; border: 2px solid #848484; border-radius: 20px 20px 20px 20px;"> <div style="width: NUMBER%; background: #ff0000; height: 10px; border-radius: 20px;"> </div></div>	Square Meter <!---RIGHT---> <div style="float: right; margin-top: 12px; "> <img src="https://img.icons8.com/cotton/25/000000/like--v1.png"> </div> <div style="width: 93%; background: #fff; margin-top: 3px; margin-right: 25px; border: 2px solid #848484;"> <div style="width: NUMBER%; background: #ff0000; height: 10px;"> </div></div> <!---LEFT---> <div style="float: left; margin-top: 12px; "> <img src="https://img.icons8.com/cotton/25/000000/like--v1.png"> </div> <div style="width: 93%; background: #fff; margin-top: 3px; margin-left: 25px; border: 2px solid #848484;"> <div style="width: NUMBER%; background: #ff0000; height: 10px;"> </div></div>
Credit <center><a href="https://killthecake.dreamwidth.org/420.html" style="text-decoration:none; font-variant: small-caps;color: #666; font-family: helvetica; font-size: 12px; font-weight: bold; letter-spacing: 1px;">killthecake</a>

Instructions

UPDATE 1/20/21: WOW THIS WAS OUT OF DATE. I fixed it so that the code will work with pre & post code-push. The readability is also way better. I even touched up the credit link.

UPDATE 1/20/21: Please make sure you check Disable Auto-Formatting before you post.

In the Clouds/Blocks, replace ICONURL with the image you want to use and replace the LOREUM IPSUM text with whatever you'd like to add.

Each code has a RIGHT and LEFT option.

To add in the Heart Meters, paste the code within the Clouds/Blocks code between the end of your customized text and the last DIV. You may need to hit enter a time or two to give yourself some space.

To change the meter amount, replace NUMBER with your preferred percentage. 0% will show nothing, 100% will fill it completely, 50% is half, etc.

If you have problems, leave a comment. I'm so new to this!!

Heavily inspired by this code.

To Change Colors

ICON BORDER:

#828282

BACKGROUND:

#e3e3e3

FILLED METER:

#ff0000

[1] Clouds & Blocks

Post a comment in response: