Hi Steemians! Hope you all are fine and enjoying steeming. Yesterday I published a post about how to beautify your posts and how to publish posts beautifully in different ways. If you have missed that post you may visit this link:
https://steemit.com/steemit/@itwithsm/making-steemit-posts-in-different-beautiful-ways-or-beautify-your-steemit-posts
Today I am going to tell you about:
- How to make a post with drop cap capability
- How to make a post with right to left direction (i.e. for languages written from right to left e.g. Urdu or Arabic languages)
How to make a post with drop cap capability:
To enable drop cap capability in a post we may use multiple column technique. Here is how a post looks like we simply use the column technique:
S
Here is the code for drop cap capability:
<div class="text-justify">
<div class="pull-left">
<div class="pull-left">
<div class="pull-left">
<h1>S</h1>
</div>
ee this is the drop capped part of a post. First column text goes here. First column text goes here. First column text goes here. First column text goes here. First column text goes here.
<div class="pull-right">
</div>
</div>
<div class="pull-right">
Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here.
</div>
</div>
<div class="pull-right">
<div class="pull-left">
Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here.
</div>
<div class="pull-right">
Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here.
</div>
</div>
</div>
The above part doesn't look much beautiful? Let's apply a little hack in this scenario. We will use a good graphics editing software like "Adobe Photoshop" and create a .png file with the letter being drop capped. In this case I am creating a .png image with transparent background So that it may suite every app and back ground (i.e. steemit.com, busy.org, esteemapp). I am not going in details for the creation of images in photoshop you may find many tutorials about this or you may ask us on our discord channel.
So, here is the result after creating a .png image in and inserting it into the column:
Here is the code for drop cap in a bit better way:
<div class="text-justify">
<div class="pull-left">
<div class="pull-left">
<div class="pull-left">
</div>
ee this is the drop capped part of a post. First column text goes here. First column text goes here. First column text goes here. First column text goes here. First column text goes here.
<div class="pull-right">
</div>
</div>
<div class="pull-right">
Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here.
</div>
</div>
<div class="pull-right">
<div class="pull-left">
Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here.
</div>
<div class="pull-right">
Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here.
</div>
</div>
</div>
How to make a post with a div in right to left direction:
To create a post with right to left direction we may use a div with class "text-rtl" which is already part of steemit CSS files. Here is how a right to left direction post looks like (I have used some words from arabic, urdu, Hebrew, syriac):
بائیں سے دائیں سمت کے ساتھ یہ پوسٹ ہے.
זה לכתוב עם שמאל לימין.
ܐܸܕܵܗܵܢܹܐ
Here is the code to do this (How to input a different language in a browser? You may find many tutorials about this or you may ask us on our discord channel.):
<div class="text-rtl">
هذا هو آخر مع اليسار إلى الاتجاه الصحيح.
بائیں سے دائیں سمت کے ساتھ یہ پوسٹ ہے.
זה לכתוב עם שמאל לימין.
ܐܸܕܵܗܵܢܹܐ
</div>
I hope you all liked my work. Thanks for stopping by.
Join our Discord channel for further queries and details:
https://discord.gg/QEv6HGT
Who we are?
Company Name: ITwithSM
Profile: We design and develop web/desktop/android/apple applications.
Future Plans: Drive some Investment to steemit from our costumers but before that steemit needs some cleaning (Stopping Spammers) and some good practices (Stop foolish flag wars between whales).
Website: https://www.itwithsm.com
Hey nice post, recently I've been frustrated with Steemit because its been forcing me to use Markdown because the raw html button and tool buttons completely disappeared on me. It was nice to have a refresher from you!
I've given you a follow, I appreciate you trying to make Steemit better. Would you mind criticizing my most recent blog entry, what would you do differently?
Thank you!
You welcome and thank you so much for the appreciation.. Your appreciation really means a lot...
i like this, keep up the good work....cheers
Thank you so much.. :)
wow fantastic, I want to try the Hebrew font. Upvoted, resteemed for future reference and as always your effort deserves a very juicy chicken nugget :D
Hahaha... Thank you so much... I wish I was close to you to get that juicy chicken nugget from you... :D
lol, oh i don't hand out nuggets, i'm just saying you deserve one. I do hand out flags though ;-}
LOLX... Then who will give my well deserved nugget.. :D
good point :D will have to figure the logistics
Great info, thanks I’m always looking for new ways to make my content stand out a little more! New follower from me andupvote too of course :)
Thank you so much dear...
This is dope... i had no idea about this, or how easy it seems to spice up your post.... thanks for the knowledge :)
Incredible, I love your work bro.