The Best Typography Tips And Script for Bloggers: How to Make Your Posts Cool is a must-read for any blogger looking to take their writing to the next level. Typography is an essential aspect of blog writing, and it can make or break the success of your posts. By following the best typography tips and script, you can make your posts stand out, increase engagement, and drive more traffic to your blog.
Make Your Blog Post Cooler with this code
By following these tips and scripts, you can make your blog posts more visually appealing, more easily readable, and more engaging for your readers. So, take some time to learn more about typography and start experimenting with different techniques to see what works best for your blog.
All Stylish Heading Code Html Blogger
I have 6 Stylish Best Heading CSS for Blogger codes that allow you to make your website article more attractive and stunning. You understand headings are the most extreme basic piece of blog content, so for what reason do you're making it dull? Surely, imitate beneath CSS codes and glue them into your submit proofreader segment. This CSS Will makes posts more attractive
Here we have imparted my fulfillment to the excellent 6 smart heading CSS codes. You could physically exchange the varieties, text style length, shadows, and something you really want.
Top 5 Stylish Social Media Icon Html Code
Bloggers use social media to inform and entertain their readers. However, many blogs lack social media presence. This makes it difficult for people to directly communicate with a blog. Responsive design allows users to access a blog from any device, whereas social media icons allow readers to interact with the blog directly. By incorporating social media functionality into your blog, you'll build loyal re
A social media icon Widget for bloggers is an image or set of images that appear on social networking websites such as Facebook and Twitter. A responsive design is a web design method that adapts itself to different device sizes. In other words, a responsive design
Click Here to view the full blog Post
Image with Scroll Layout blogger
Same as the image layout above, it's just that on the mobile display the images will be arranged in parallel with the additional side scroll function on the mobile display. We also added a smooth scroll effect to this feature. Please try opening this page on your mobile device:
Writing Code
<div class='psImg scImg scrlH'>
<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
</div>
YOUR-IMAGE-LINK-HERE - change this with your image link.
Manual related post blogger script HTML
Writing Code
<div class='pRelate notranslate'>
<b>Related Post:</b>
<ul>
<li><a href='YOUR-POST-LINK'>YOUR-POST-TITLE</a></li>
<li><a href='YOUR-POST-LINK'>YOUR-POST-TITLE</a></li>
<li><a href='YOUR-POST-LINK'>YOUR-POST-TITLE</a></li>
</ul>
</div>
YOUR-POST-LINK - change this with your image link.
YOUR-POST-TITLE - put your post title here.
Paragraph with Drop cap blogger post
This is a paragraph with dropcap. Is a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of the descending limit is usually two or more lines.
Writing Code
<p><span class='dropCap'>L</span>orem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Id faucibus nisl tincidunt
eget nullam non. Diam vulputate ut pharetra sit amet
aliquam id. Phasellus vestibulum lorem sed risus. </p>
Blockquote Writing blogger
Live as if you were to die tomorrow. Learn as if you were to live forever.
—Mahatma Gandhi
Another Blockquote Style You Can Use:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
- Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.
- Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.
Writing Code
<!-- Style 1 -->
<blockquote><i>YOUR-QUOTE<br/><br/>
—NAME</i></blockquote>
<!-- Style 2 -->
<blockquote class='s-1 notranslate'>
<div>YOUR-QUOTE
<ul>
<li>LINE</li>
<li>LINE</li>
</ul>
</div>
</blockquote>
Table HTML Blogger Post
| No | Column_1 | Column_2 | Column_3 | Column_4 | Column_5 |
|---|
| 1 | Data_table_1 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
| 2 | Data_table_2 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
| 3 | Data_table_3 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
| 4 | Data_table_4 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
Writing Code
<div class='table'>
<table style='white-space: nowrap;'>
<thead>
<tr>
<th>No</th>
<th>Column_1</th>
<th>Column_2</th>
<th>Column_3</th>
<th>Column_4</th>
<th>Column_5</th>
</tr>
</thead>
<tbody>
<tr>
<th>No</th>
<th>Column_1</th>
<th>Column_2</th>
<th>Column_3</th>
<th>Column_4</th>
<th>Column_5</th>
</tr>
<tr>
<th>No</th>
<th>Column_1</th>
<th>Column_2</th>
<th>Column_3</th>
<th>Column_4</th>
<th>Column_5</th>
</tr>
</tbody>
</table>
</div>
Syntax Highlighter
<!DOCTYPE html>
<html dir='ltr' lang='en'>
<head>
<title>Sample Page</title>
</head>
<!--[ <body> open ]-->
<body>
<p>Sample content here!</p>
</body>
<!--[ </body> close ]-->
</html>
Writing Code
<div class="pre html">
<pre>
Write Code Here [ Wait You Need to Use HTML Encoder ]
</pre>
</div>
Change highlighted text accroding to your code language.
Encode your HTML code before puting syntaxbox - HTML Encoder
MultiTab Syntax Highlighter
Writing Code
<div class='pre tb'>
<input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
<input class='prei hidden' id='preT-2' type='radio' name='preTab'>
<input class='prei hidden' id='preT-3' type='radio' name='preTab'>
<div class='preH tbHd scrlH'>
<label for='preT-1' data-text='HTML'></label>
<label for='preT-2' data-text='CSS'></label>
<label for='preT-3' data-text='JS'></label>
</div>
<div class='preC-1'>
<pre>html here</pre>
</div>
<div class='preC-2'>
<pre>css here</pre>
</div>
<div class='preC-3'>
<pre>JS here</pre>
</div>
</div>
Answer:
Writing Code
<details class='sp notranslate'>
<summary data-show='Show' data-hide='Hide'>Answer:</summary>
<p>This is your answer</p>
</details>
Accordion / Toggle Menu add blogger post
Accordion First Title
Accordion Second Title
Accordion Third Title
Accordion Fourth Title (alt)
Writing Code
<div class='showH'>
<!--[ Accordion line 1 ]-->
<details class='ac'>
<summary>Accordion First Title</summary>
<div class='aC'>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</div>
</details>
<!--[ Accordion line 2 ]-->
<details class='ac'>
<summary>Accordion Second Title</summary>
<div class='aC'>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</div>
</details>
<!--[ Accordion line 3 ]-->
<details class='ac'>
<summary>Accordion Third Title</summary>
<div class='aC'>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</div>
</details>
<!--[ Accordion line 4 ]-->
<details class='ac'>
<summary>Accordion Fourth Title</summary>
<div class='aC'>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</div>
</details>
</div>
Note Block blogger post HTML
This is a note paragraph.
Warning!
This is a note paragraph with warning status!
Writing Code
<p class='note notranslate'>This is a note paragraph.</p>
<p class='note wr notranslate'><b>Warning!</b><br> This is a note paragraph with warning status!</p>
All Download Button Style Script Blogger
Writing Code
<a class='button' href='YOUR-LINK-HERE'>Standard_button</a>
Writing Code
<a class='button ln' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
Writing Code
<a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
Writing Code
<a class='button' href='YOUR-LINK-HERE'><i class='icon demo'></i>Demo</a>
Writing Code
<div class='btnF'>
<a class='button ln' href='YOUR-LINK-HERE'>Demo</a>
<a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
</div>
Writing Code
<div class='btnF'>
<a class='button' href='YOUR-LINK-HERE'><i class='icon demo'></i>Demo</a>
<a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
</div>
Writing Code
<div class='dlBox'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<span class='fT' data-text='zip'></span>
<div class='fN'>
<!--[ File name ]-->
<span>file_name.zip</span>
<span class='fS'>200kb</span>
</div>
<!--[ Download link (change href='...' atribute to add link download) ]-->
<a class='button' aria-label='Download' href='YOUR-LINK-HERE'><i class='icon dl'></i></a>
</div>
Conclusion
In conclusion, By mastering the art of typography and script, you can make your blog posts more visually appealing, more easily readable, and more engaging for your readers. This will help you to increase engagement, drive more traffic to your blog, and ultimately make your posts cool.
.png "Best Stylish social icon widget")
Comments
Post a Comment