ClearMag is a clean and elegant, user friendly, Template Designer compatible and search engine optimized magazine blogger theme with a 100% responsive design. It has options to change main background image, colors and fonts of many elements within few seconds. ClearMag Blogger Template has a featured posts slider, beautiful post summaries, related posts with thumbnails, social profile widget and footer social buttons, post sharing buttons, multi-level navigation menus, right sidebar, scroll to top button and more.
ClearMag Theme Features
- 100% Responsive Layout
- Optimized for Search Engines
- Many Colors Options / Unlimited Colors
- Many Fonts Options / Hundreds of Fonts
- Background Image Support
- Desktop/Mobile Multi-level Navigation Menus
- Featured Posts Slider
- Related Posts with Thumbnails
- Automatic Posts Summaries
- Social Profile Widget
- Footer Social Icons
- Post Share Buttons
- Facebook and Twitter Meta Data Included
- Structured Data Included
- Many More Features…
How To Configure Main Navigation Menu
Find this in “Edit HTML”:
<ul class='menunbt' id='clearmag-primary-menu'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='#'>Business</a> <ul class='sub-menu'> <li><a href='#'>Internet</a></li> <li><a href='#'>Market</a></li> <li><a href='#'>Stock</a></li> </ul> </li> ... </ul>
Replace “#” marks with real URLs and change anchor texts as you like.
How To Configure Mobile Navigation Menu
Find this in “Edit HTML”:
<ul class='menunbt' id='header-left-navnbt'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='#'>Business</a> <ul class='sub-menu'> <li><a href='#'>Internet</a></li> <li><a href='#'>Market</a></li> <li><a href='#'>Stock</a></li> </ul> </li> ... </ul>
Replace “#” marks with real URLs and change anchor texts as you like.
How To Configure Featured Posts Slider
This slider widget automatically displays posts from a given label name. Go to “Layout” page.
Click on the edit link of “Top Featured Posts Widget” widget and add this code:
<script src='https://YOURBLOGNAME.blogspot.com/feeds/posts/default/-/LABELNAME?alt=json-in-script&callback=clearmagfeaturedslider&max-results=6'/></script>
Replace “https://YOURBLOGNAME.blogspot.com” with your real blog address.
Replace “LABELNAME” with the real label name you want to retrieve posts.
Replace “6” with the number of posts you need to load in the slider.
Example:
<script src='https://clearmag-nbt.blogspot.com/feeds/posts/default/-/Print Design?alt=json-in-script&callback=clearmagfeaturedslider&max-results=6'/></script>
How To Configure Social Profile Widget
Find this in “Edit HTML”:
<div class='widget clearmag-widget-social'> <h2>Follow & Subscribe</h2> <ul> <li><a href='https://twitter.com/' rel='nofollow' target='_blank' title='Twitter'><span class='screen-reader-text'>Twitter</span></a></li> <li><a href='https://www.facebook.com/' rel='nofollow' target='_blank' title='Facebook'><span class='screen-reader-text'>Facebook</span></a></li> <li><a href='https://plus.google.com/' rel='nofollow' target='_blank' title='GooglePlus'><span class='screen-reader-text'>GooglePlus</span></a></li> <li><a href='https://www.pinterest.com/' rel='nofollow' target='_blank' title='Pinterest'><span class='screen-reader-text'>Pinterest</span></a></li> <li><a href='https://www.linkedin.com/' rel='nofollow' target='_blank' title='Linkedin'><span class='screen-reader-text'>Linkedin</span></a></li> <li><a href='https://www.instagram.com/' rel='nofollow' target='_blank' title='Instagram'><span class='screen-reader-text'>Instagram</span></a></li> ... </ul> </div>
Add your own social links replacing default social profile URLs.
How To Configure Footer Social Buttons
Find this in “Edit HTML”:
<ul class='clearmag-social-networks'> <li><a href='https://twitter.com/' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a></li> <li><a href='https://www.facebook.com/' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/></a></li> <li><a href='https://plus.google.com/' rel='nofollow' target='_blank' title='GooglePlus'><i class='fa fa-google-plus'/></a></li> <li><a href='https://www.pinterest.com/' rel='nofollow' target='_blank' title='Pinterest'><i class='fa fa-pinterest'/></a></li> <li><a href='https://www.linkedin.com/' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'/></a></li> <li><a href='https://www.instagram.com/' rel='nofollow' target='_blank' title='Instagram'><i class='fa fa-instagram'/></a></li> ... </ul>
Add your own social links replacing default social profile URLs.
ClearMag Blogger Template Responsive View
