Hot Magazine - Blogger Template

<div dir="ltr" style="text-align: left;" trbidi="on"> <img border="0" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZorJzDPf5RmST_m0cqUjyXwhs6i5tbJu722-dFM98yEuBs7GulIgq3BECjpwtDqTq9BiuyK06iHMWeexWPPY8LcSs_SaSjo9Vi0hyphenhyphenXobHaN9iBzbcWK5Q73e8H3tXH4cvM1DzDotKGS3/s1600/Hot+Magazine+Blogger+Template.jpg" width="640" /><br /> <br /> <br /> <h3 style="text-align: left;"> <span style="color: blue;">Description:</span></h3> <div class="box_content"> <b>Hot Magazine</b> is the <b>minimalist Blogger magazine Theme</b>, crafted with care and attention to detail. It includes a minimalist design, coupled with beautiful visual effects. It has lots of different effects and layout modes which let you create the website easily. Hot Magazine is an excellent value Blogger themes for Magazine, Newspaper and Blog websites.</div> <div class="box_content"> <br /></div> <div class="box_content"> <div class="sb sb_blue"> <div class="box_title"> <h3 style="text-align: left;"> <span style="color: blue;">Features:</span></h3> <a href="http://www.bloggerdaddy.tk/2015/11/responsive-check.html" target="_blank">Responsive </a><br /><a href="http://www.bloggerdaddy.tk/2016/01/seo-search-engine-optimization-tools.html" target="_blank">SEO Friendly </a><br />Google Testing Tool Validator<br />Mobile Friendly<br />Custom 404 Page<br />Fast Loading<br />Minimal <br />Magazine <br />Colourful <br />Ads Ready <br />Clean Layout <br />Simple Design <br />Drop Down Menu <br />Social Sharing <br />HTML5 & CSS3 <br />Browser Compatibility</div> <div class="box_title"> <br /></div> <div class="box_title"> Ref: http://www.soratemplates.com</div> <div class="box_title"> <br /></div> <div class="box_title" style="text-align: center;"> <a href="http://hot-magazine-soratemplates.blogspot.com/" style="font-family: "times new roman"; font-size: x-large;" target="_blank">Demo</a><span style="font-family: "times new roman"; font-size: large; text-align: center;"> | </span><a href="https://app.box.com/s/i3kjzo4eo75fa1dg9jv0fv08rt7gx5z6" style="font-family: "times new roman"; font-size: x-large;" target="_blank">Download</a></div> <div class="box_title" style="text-align: center;"> <br /></div> <div class="box_title" style="text-align: left;"> <span style="font-size: large;"><a href="http://www.bloggerdaddy.tk/2017/02/the-essence-blogger-template.html" target="_blank">The Essence - Blogger template</a></span></div> <div class="box_title" style="text-align: center;"> <br /></div> </div> </div> </div>

Blogger Template Template Hot Magazine - Blogger Template

Description: Hot Magazine is the minimalist Blogger magazine Theme , crafted with care and attention to detail. It includes a mini...

Read more »

The Essence - Blogger template

<div dir="ltr" style="text-align: left;" trbidi="on"> <img alt="free blogger templates" border="0" height="430" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSXO75jO6M59QUzsBXaPQ5Xmg7IRIv0s2oRq0mzC1le5URrLKjKelTy5iRPlHRBGb859nx7Rm0G8HYkyiJ8Ig0dSgEpBmX2CvrSuUP38gDbAfDhhw29WJYkFJJCGwGiIC9eckvqZCziIf_/s640/The+Essence+Blogger+Template.png" title="free blogger templates" width="640" /><br /> <br /> <br /> <h3 style="text-align: left;"> <span style="color: blue;"> Description:</span></h3> <div class="box_content"> <b>The Essence</b> is a highly content focused, reader-friendly , modern, and clean, blogger theme. It is 100% responsive means it will fit in various device of different size. It supports all type of post format. It is simple and it’s elegant. Using The Essence you can setup a beautiful personal blog or fashion blog. Installing and customizing this theme is very easy. All required information are provided in documentation.</div> <div class="box_content"> <br /></div> <h3 style="text-align: left;"> <span style="color: blue;">Features:</span></h3> <div class="box_content"> <a href="http://www.bloggerdaddy.tk/2015/11/responsive-check.html" target="_blank">Responsive</a> </div> <a href="http://www.bloggerdaddy.tk/2016/01/seo-search-engine-optimization-tools.html" target="_blank">SEO Friendly</a><br />Google Testing Tool Validator<br />Mobile Friendly<br />Custom 404 Page<br />Fast Loading<br />Minimal Blogger Template <br />Ladies Blogger Template <br />Fashion Blogger Template <br />Ads Ready Blogger Template <br />Clean Layout Blogger Template <br />Simple Design Blogger Template <br />Drop Down Menu Blogger Template <br />Social Sharing Blogger Template <br />HTML5 & CSS3 Blogger Template <br />Browser Compatibility Blogger Template <div> <br /></div> <div> <br /> Ref: http://www.soratemplates.com</div> <div> <br /></div> <div style="text-align: center;"> <a href="http://the-essence-soratemplates.blogspot.com/" style="font-family: "times new roman"; font-size: x-large;" target="_blank">Demo</a><span style="font-family: "times new roman"; font-size: large; text-align: center;"> | </span><a href="https://app.box.com/s/jk55pa4nz42dia0w9l8cmxinrhh241e3" style="font-family: "times new roman"; font-size: x-large;" target="_blank">Download</a></div> <div style="text-align: center;"> <br /></div> <div style="text-align: center;"> <br /></div> <div style="text-align: left;"> <a href="http://www.bloggerdaddy.tk/2015/12/lovecraft-wordpress-theme.html" target="_blank"><span style="font-size: large;">Lovecraft - A WordPress theme</span></a></div> <div style="text-align: center;"> <br /></div> <div> <br /></div> </div>

Blogger Template Template The Essence - Blogger template

 Description: The Essence is a highly content focused, reader-friendly , modern, and clean, blogger theme. It is 100% responsive m...

Read more »

How to Create 3D Rolling Link Effect Using CSS in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <br /> <br /> Everything is possible with the power of CSS. You can do whatever you want using CSS. While customizing your template or adding effects to blog elements, everything you do for beautifying your blog is based on CSS and today we are also going to share a beautiful CSS effect known as 3D Rolling Link Effect. I hope that you'll love it and this effect will make your blog different and unique from other blogs. So without any further delay let’s install this 3D Rolling Link Effect. All you need is just to add the CSS code first and then the HTML for that link. See how it looks and play with it on <a href="http://jsfiddle.net/" rel="" target="_blank">jsfiddle.net</a>, hove the text in the results section to see how it looks.<br /> <br /> <div style="text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMBmcZWNJuMsdY8NnzHJvP4o3BMu_PfBERmnb64IT5ZzRkKkeLNSCyhMWHf72AbtneqtI0v_hLapYYi5CuoVu86V2UYLd59S-jywPBMxPH83DHIfD8DbMqZj0WCNtN-5mMMUnXXB8SdI/s1600/3D+Rolling.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMBmcZWNJuMsdY8NnzHJvP4o3BMu_PfBERmnb64IT5ZzRkKkeLNSCyhMWHf72AbtneqtI0v_hLapYYi5CuoVu86V2UYLd59S-jywPBMxPH83DHIfD8DbMqZj0WCNtN-5mMMUnXXB8SdI/s400/3D+Rolling.jpg" /></a></div> <h3>  Create 3D Rolling Link Effect Using CSS in Blogger</h3> First and foremost log in to your <b><span style="color: purple;">Blogger Account</span></b> >> <span style="color: purple;">Select your </span><b><span style="color: purple;">Blog</span> </b>>> <b><span style="color: purple;">Template</span></b> >> <span style="color: purple;">click<b> Edit HTML</b></span> >> click inside the code area and use <b><span style="color: purple;">Ctrl+F</span></b> to search and search for the following tag<br /> <br /> <blockquote class="tr_bq"> <b>]]></b:skin></b></blockquote> <b><br /></b> Now copy the below code and paste it just above/before it (<b>]]></b:skin></b> tag)<br /> <br /> <blockquote class="tr_bq"> .bgt-roll-link {<br />     color: #2aa4cf;<br />     text-decoration: none;<br />     font-weight:bold;<br />     display: inline-block;<br />     overflow: hidden;<br />     vertical-align: top;<br />  <br />     -webkit-perspective: 600px;<br />        -moz-perspective: 600px;<br />        -ms-perspective: 600px;<br />        perspective: 600px;<br />     -webkit-perspective-origin: 50% 50%;<br />        -moz-perspective-origin: 50% 50%;<br />        -ms-perspective-origin: 50% 50%;<br />        perspective-origin: 50% 50%;    <br /> }<br /> .bgt-roll-link:hover {text-decoration:none; color: #2aa4cf; font-weight:bold;}<br /> .bgt-roll-link span {<br />     display: block;<br />     position: relative;<br />     padding: 0 2px;<br />     -webkit-transition: all 300ms ease;<br />        -moz-transition: all 300ms ease;<br />        -ms-transition: all 300ms ease;<br />        transition: all 300ms ease;<br />  <br />     -webkit-transform-origin: 50% 0%;<br />        -moz-transform-origin: 50% 0%;<br />        -ms-transform-origin: 50% 0%;<br />        transform-origin: 50% 0%;<br />  <br />     -webkit-transform-style: preserve-3d;<br />        -moz-transform-style: preserve-3d;<br />        -ms-transform-style: preserve-3d;<br />        transform-style: preserve-3d;<br /> }<br /> .bgt-roll-link:hover span {<br />         background: #2aa4cf;      <br /> <br />         -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );<br />            -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );<br />            -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );<br />            transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );<br /> }<br /> .bgt-roll-link span:after {<br />     content: attr(data-title);<br />     display: block;<br />     position: absolute;<br />     left: 0;<br />     top: 0;<br />     padding: 0 2px;<br />     color: #fff;<br />     background: #2aa4cf;<br />     -webkit-transform-origin: 50% 0%;<br />     -moz-transform-origin: 50% 0%;<br />     -ms-transform-origin: 50% 0%;<br />     transform-origin: 50% 0%;<br />     -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );<br />     -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );<br />     -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );<br />     transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );<br />     a.roll-link:link, a.roll-link:visited{color:red;}<br /> }</blockquote> <br /> Hit the <span style="color: #38761d;"><b>Save Template</b></span> button. Now the HTML, copy the HTML code below and paste it where you want to use this effect.<br /> <br /> <blockquote class="tr_bq"> <a class="bgt-roll-link" href="<b><span style="color: #274e13;">http://bloggerdaddy.tk</span></b>"><span data-title=" <span style="color: #cc0000;"><b>Bloggerdaddy - A Guide for New Blogger</b></span>"> <span style="color: #cc0000;"><b>Bloggerdaddy - A Guide for New Blogger</b></span></span></a></blockquote> <br /> <b><span style="background-color: black; color: yellow;">Customization: </span></b><br /> <ul> <li>Replace <span style="color: #cc0000;"><b>Bloggerdaddy - A Guide for New Blogger </b></span>and  <b><span style="color: #20124d;">Bloggerdaddy - A Guide for New Blogger</span></b> with your Link text.</li> </ul> <ul> <li>Replace <b><span style="color: #274e13;">http://bloggerdaddy.tk</span> </b>with your Link.</li> </ul> <br /> To use this link effect in your blogger blog posts, switch your post editor to HTML mode and add the above HTML code where you want to use it.<br /> <span style="color: #38761d;"><b>Congratulations:</b></span> You've successfully added this 3D Rolling Link Effect to your blog.<br /> <h3> From Editors Desk</h3> <span style="font-family: inherit;">We hope this tutorial may have helped you in creating a 3D Rolling Link Effect for your Blog. Share this post with your friends and don't forget to subscribe us. </span><b style="font-family: inherit;">Got a Question? Let us know in the comments section below.</b><br /> <br /></div>

Widgets How to Create 3D Rolling Link Effect Using CSS in Blogger

Everything is possible with the power of CSS. You can do whatever you want using CSS. While customizing your template or adding effects ...

Read more »