tag:blogger.com,1999:blog-34209095366990059982024-02-07T16:28:10.437-08:00Glitch SugarfreeA+ Retrofitted Blogger v2 TemplateCreative Commonshttp://www.blogger.com/profile/11256994501847507410noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-3420909536699005998.post-4206255278523915412020-08-01T06:39:00.004-07:002022-01-08T00:19:19.647-08:00Showcase – Markup, Gallery and Hero-Header<div class="separator cover-item small-cover light-text-color center-text-align large-text-size" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxG3vT8lo4JtFImQh_lfjJ7-2uNWQ2OgHoNhP2yF9DI-Tknev6ROgq21oML6O4wZywVEp166T7Tz3f1AF2VJlbEwa2q3ABJjP2nJvXlxiOoxfnClYcLFycZLJNJMSyejSaKt7yIw94Puo/s1600/landscape_gray_8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="547" data-original-width="820" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxG3vT8lo4JtFImQh_lfjJ7-2uNWQ2OgHoNhP2yF9DI-Tknev6ROgq21oML6O4wZywVEp166T7Tz3f1AF2VJlbEwa2q3ABJjP2nJvXlxiOoxfnClYcLFycZLJNJMSyejSaKt7yIw94Puo/w800-h400-p-k-no-nu/landscape_gray_8.png" /></a></div><h2> Blog template capabilities </h2>To change overall blog appearance Blogger allows its users to choose from various provided blog themes or import custom made blog templates like Gelati Sugarfree<br /><br />Blogger provides a WYSIWYG blog post-editor which enables its users to express multiple markup elements like headings, paragraph, image, list, quote and video. This blog template expands that feature set with beginner friedly CSS-triggered generation of hero-image variations and Javascript-configurable gallery and carousel <a href="http://www.menucool.com">components</a>, powered by third-party integrations from <strong>menucool.com</strong><br /><br /><div class="separator content-block" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GFV79mFRJX7LxYuJnP8e6jR2PWuHkMfjrnTgA5obhlDSfVK8p9sthIFOxGvDe9BDUsSOY1xc-9dZP-qow4aND8ZvIg83uEkeLSk8VzouEYqzVbIVVhBjgTorCNX5bjDGnlqbOLeoMgkE/s1600/icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GFV79mFRJX7LxYuJnP8e6jR2PWuHkMfjrnTgA5obhlDSfVK8p9sthIFOxGvDe9BDUsSOY1xc-9dZP-qow4aND8ZvIg83uEkeLSk8VzouEYqzVbIVVhBjgTorCNX5bjDGnlqbOLeoMgkE/s200/icon.png" width="200" height="200" data-original-width="200" data-original-height="200" /></a></div><hr class="separator content-block small-width content-spacer"/><h2> Let's start with some Headings </h2><h3> H3 Heading </h3><h4> H4 Heading </h4>The paragraph is the default markup type. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. <br /><br />This paragraph is left aligned. <br /><br /><div style="text-align: center;"> <i>This italic paragraph is centered.</i></div><br /><div style="text-align: right;"> This paragraph is right aligned.</div><hr class="separator content-block small-width content-spacer"/><div class="separator content-block content-spacer" style="clear: both; text-align: center;"><div imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><figure><img border="0" data-original-height="547" data-original-width="820" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmHIDiEuNnyUnFwetYVhT4ApD0Whv0k9dQRt3AFZLM6IQMQQwEcLO8AJ4TvF3k9y90y0CEdCYcDWuEUY0I85W_Cxkmt2BXt5rSxMobv8uMDbWmuCjlJY1ZSUWz0OYm1dKRWIHQuivqqOKa/s320/landscape_gray_4.png" /><figcaption style="width: 320px;"><a href="#">Even</a> before the internet was a thing, people already used Filler Text. </figcaption></figure></div></div><span style="color: blue;"><span style="background-color: #f9cb9c;">This paragraph is colorful, with a orange background and blue text. Colored content should have a high enough contrast, so that the text is readable.</span></span><br /><br /><span style="font-size: x-small;">This paragraph prefers Jazz over Justin Timberlake. It also uses the small font size.</span><br /><br /><span style="font-size: large;">This paragraph has something important to say: It has a large font size, which defaults to 36px. </span><br /><br /><span style="font-size: x-large;">The huge text size defaults to 46px, but the size can be customized. </span><br /><br /><div style="text-align: justify;"> <b>Neither of these paragraphs care about politics, but this one is bold, medium sized and has a drop cap.</b></div><hr class="separator content-block small-width content-spacer"/>Ordered list<br /><ol> <li>Orderd List <b>Item </b>1</li> <li>Orderd List <i>Item </i>2</li> <li>Orderd List <u>Item </u>3</li> <li>Orderd List <strike>Item </strike>4</li></ol>Unordered list<br /><ul> <li>Unorderd List 👀 1</li> <li>Unorderd List 👽 2</li> <li>Unorderd List 👻 3</li> <li>Unorderd List 👍 4</li></ul><br /><br /><div id="a2_ninja-slider" class="full-width"><div><div class="slider-inner"><ul><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VGU-5IZg6TCOkM6slkm1BoVmxV5KtSKlNrlA8M89XoWiGOWDHE0uUjGsurFTcCSxNzh_ypYU4B_fOXseO-O6tdgqUhecNlMbeo2N5BnUG2LsAvhJnqD8E9eAMb2Srw7vopmE8DkcHR-V/s1600/landscape_color_1.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VGU-5IZg6TCOkM6slkm1BoVmxV5KtSKlNrlA8M89XoWiGOWDHE0uUjGsurFTcCSxNzh_ypYU4B_fOXseO-O6tdgqUhecNlMbeo2N5BnUG2LsAvhJnqD8E9eAMb2Srw7vopmE8DkcHR-V/s400/landscape_color_1.png" data-screen="0-479"></a><div class="caption">1.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsWJ7IZ65k0IWEPqjbT6GIlA0sGR6r623Mt5z-c_YCwMVc02wEsp6olfYaEnUVl8OXqphQCQtRl-uPbvWXJFTb-MFqPmoGBNtLwKpaZKpjLa9I-2R7n-4cIpFfsC-z_pzbT9MESpaRFoGE/s1600/landscape_gray_2.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsWJ7IZ65k0IWEPqjbT6GIlA0sGR6r623Mt5z-c_YCwMVc02wEsp6olfYaEnUVl8OXqphQCQtRl-uPbvWXJFTb-MFqPmoGBNtLwKpaZKpjLa9I-2R7n-4cIpFfsC-z_pzbT9MESpaRFoGE/s400/landscape_gray_2.png" data-screen="0-479"></a><div class="caption">2.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQQ_AK4OWWKJ-WSDwTIvUnetK7E8kFeCypCjoq1poZLAfvQkKircc0GCZ-X1pv9IegRtb8xcVkaWtwQ6NVTke94KxiV9fRYe864gPmxurUR7jDFT7HyvDimYqDMR7yIiuE3Ang8PLPmfr/s1600/landscape_color_3.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQQ_AK4OWWKJ-WSDwTIvUnetK7E8kFeCypCjoq1poZLAfvQkKircc0GCZ-X1pv9IegRtb8xcVkaWtwQ6NVTke94KxiV9fRYe864gPmxurUR7jDFT7HyvDimYqDMR7yIiuE3Ang8PLPmfr/s400/landscape_color_3.png" data-screen="0-479"></a></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuuIVMbC7d9CrrP9fTq90YQzLWFzLilkoLULBDyRq1mCOUaZSYRUlKjZXlyUYXbAM8nWAqU_xVWSKRz5H-MsEED8rSEkwlXm3vW9O7ct-zVXVUiSp4gfF1eC741RkAXh7yVAATV8B2ffIv/s1600/landscape_color_4.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuuIVMbC7d9CrrP9fTq90YQzLWFzLilkoLULBDyRq1mCOUaZSYRUlKjZXlyUYXbAM8nWAqU_xVWSKRz5H-MsEED8rSEkwlXm3vW9O7ct-zVXVUiSp4gfF1eC741RkAXh7yVAATV8B2ffIv/s400/landscape_color_4.png" data-screen="0-479"></a><div class="caption">4.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTyQtsFnxfaGyobCy7D17mpBYVrTn8LMlFhCuz1-JkiniiRJmj-2IlbLk_LPYN1NiuzH_9dElvDIa55jYLbEpo4GsIDewjk4l_K22d4ThofsTZPyO8S3skLwH7mbJwF4OgvGaq4ZgKOd_/s1600/landscape_color_5.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTyQtsFnxfaGyobCy7D17mpBYVrTn8LMlFhCuz1-JkiniiRJmj-2IlbLk_LPYN1NiuzH_9dElvDIa55jYLbEpo4GsIDewjk4l_K22d4ThofsTZPyO8S3skLwH7mbJwF4OgvGaq4ZgKOd_/s400/landscape_color_5.png" data-screen="0-479"></a><div class="caption">5.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireFsY5TzvxSNNy4nVdTRgJzY7Xi2K-78yst5yYxbxuM5Z_RHbxwSUq9HWJQqbc-WrZPyP_W7Qirr9WpVVQHoILLTdmY19Pvp73OtiLVLmJPBqzFLSDP02THT96r4IvSEl4g2FHTSgSm7h/s1600/landscape_color_6.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireFsY5TzvxSNNy4nVdTRgJzY7Xi2K-78yst5yYxbxuM5Z_RHbxwSUq9HWJQqbc-WrZPyP_W7Qirr9WpVVQHoILLTdmY19Pvp73OtiLVLmJPBqzFLSDP02THT96r4IvSEl4g2FHTSgSm7h/s400/landscape_color_6.png" data-screen="0-479"></a><div class="caption">6.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaAo-x1eWtNmm4G2xQ3s34d9XIpPN_b0DUPND2ImslDMO2sBcgzrHopjR89JFfjYezMx7j1UQV162l6g5NbaOff5URDikRSnoeSJA7PIveU2zduBuV9by6WwMLvnA1pZGumxc35yuzkRUn/s1600/landscape_color_7.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaAo-x1eWtNmm4G2xQ3s34d9XIpPN_b0DUPND2ImslDMO2sBcgzrHopjR89JFfjYezMx7j1UQV162l6g5NbaOff5URDikRSnoeSJA7PIveU2zduBuV9by6WwMLvnA1pZGumxc35yuzkRUn/s400/landscape_color_7.png" data-screen="0-479"></a><div class="caption">7.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfj8NNhuOgedgmn61m-kyisiw9KI6Ezb3z0T4VmFuWWv79WF2_CYDYGEllH3_cQ_DMrrXbSZ9jGbSor5TmLQCajVFh5VN_o414hBnpxgqtnlksZ9LShAAvyso2Hv7Gg7KkPNoQ6dEi2mY/s1600/landscape_color_8.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfj8NNhuOgedgmn61m-kyisiw9KI6Ezb3z0T4VmFuWWv79WF2_CYDYGEllH3_cQ_DMrrXbSZ9jGbSor5TmLQCajVFh5VN_o414hBnpxgqtnlksZ9LShAAvyso2Hv7Gg7KkPNoQ6dEi2mY/s400/landscape_color_8.png" data-screen="0-479"></a><div class="caption">8.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li></ul><div class="fs-icon" title="Expand/Close"></div></div><div id="a2_thumbnail-slider"><div class="inner"><ul><li><a class="thumb" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VGU-5IZg6TCOkM6slkm1BoVmxV5KtSKlNrlA8M89XoWiGOWDHE0uUjGsurFTcCSxNzh_ypYU4B_fOXseO-O6tdgqUhecNlMbeo2N5BnUG2LsAvhJnqD8E9eAMb2Srw7vopmE8DkcHR-V/s400/landscape_color_1.png"></a><span>1</span></li><li><a class="thumb" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsWJ7IZ65k0IWEPqjbT6GIlA0sGR6r623Mt5z-c_YCwMVc02wEsp6olfYaEnUVl8OXqphQCQtRl-uPbvWXJFTb-MFqPmoGBNtLwKpaZKpjLa9I-2R7n-4cIpFfsC-z_pzbT9MESpaRFoGE/s400/landscape_gray_2.png"></a><span>2</span></li><li><a class="thumb" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQQ_AK4OWWKJ-WSDwTIvUnetK7E8kFeCypCjoq1poZLAfvQkKircc0GCZ-X1pv9IegRtb8xcVkaWtwQ6NVTke94KxiV9fRYe864gPmxurUR7jDFT7HyvDimYqDMR7yIiuE3Ang8PLPmfr/s400/landscape_color_3.png"></a></li><li><a class="thumb" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuuIVMbC7d9CrrP9fTq90YQzLWFzLilkoLULBDyRq1mCOUaZSYRUlKjZXlyUYXbAM8nWAqU_xVWSKRz5H-MsEED8rSEkwlXm3vW9O7ct-zVXVUiSp4gfF1eC741RkAXh7yVAATV8B2ffIv/s400/landscape_color_4.png"></a><span>4</span></li><li><a class="thumb" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTyQtsFnxfaGyobCy7D17mpBYVrTn8LMlFhCuz1-JkiniiRJmj-2IlbLk_LPYN1NiuzH_9dElvDIa55jYLbEpo4GsIDewjk4l_K22d4ThofsTZPyO8S3skLwH7mbJwF4OgvGaq4ZgKOd_/s400/landscape_color_5.png"></a><span>5</span></li><li><a class="thumb" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireFsY5TzvxSNNy4nVdTRgJzY7Xi2K-78yst5yYxbxuM5Z_RHbxwSUq9HWJQqbc-WrZPyP_W7Qirr9WpVVQHoILLTdmY19Pvp73OtiLVLmJPBqzFLSDP02THT96r4IvSEl4g2FHTSgSm7h/s400/landscape_color_6.png"></a><span>6</span></li><li><a class="thumb" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaAo-x1eWtNmm4G2xQ3s34d9XIpPN_b0DUPND2ImslDMO2sBcgzrHopjR89JFfjYezMx7j1UQV162l6g5NbaOff5URDikRSnoeSJA7PIveU2zduBuV9by6WwMLvnA1pZGumxc35yuzkRUn/s400/landscape_color_7.png"></a><span>7</span></li><li><a class="thumb" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfj8NNhuOgedgmn61m-kyisiw9KI6Ezb3z0T4VmFuWWv79WF2_CYDYGEllH3_cQ_DMrrXbSZ9jGbSor5TmLQCajVFh5VN_o414hBnpxgqtnlksZ9LShAAvyso2Hv7Gg7KkPNoQ6dEi2mY/s400/landscape_color_8.png"></a><span>8</span></li></ul></div></div></div></div><script type="text/javascript"> var nsOptions2 = JSON.parse(JSON.stringify(nsOptions)); nsOptions2.sliderId = "a2_ninja-slider"; nsOptions2.aspectRatio = "default"; nsOptions2.before = function (currentIdx, nextIdx, manual) { if (manual && typeof mcThumbnailSlider2 != "undefined") mcThumbnailSlider2.display(nextIdx); }; var nslider2 = new NinjaSlider(nsOptions2); window.addEventListener("DOMContentLoaded", function(e) { nslider2.init(0); }); var thumbnailSliderOptions2 = JSON.parse( JSON.stringify(thumbnailSliderOptions) ); thumbnailSliderOptions2.sliderId = "a2_thumbnail-slider"; thumbnailSliderOptions2.before = function (currentIdx, nextIdx, manual) { if (typeof nslider2 != "undefined") nslider2.displaySlide(nextIdx); }; var mcThumbnailSlider2 = new ThumbnailSlider(thumbnailSliderOptions2); window.addEventListener("DOMContentLoaded", function(e) { mcThumbnailSlider2.init(0); }); </script><hr class="separator content-block small-width content-spacer"/><div id="a7_ninja-slider"><div class="slider-inner"><ul><li><div class="video"><iframe allowfullscreen="" frameborder="0" src="https://player.vimeo.com/video/435708237"></iframe></div><a class="ns-img" href="https://i.vimeocdn.com/video/919975710.jpg?mw=1200&mh=675&q=70"></a><div class="caption">Supports Youtube, Vimeo and HTML video/audio</div><div class="video-playbutton-layer"></div></li><li><div class="video"><iframe allowfullscreen="" data-autoplay="false" frameborder="0" src="https://www.youtube.com/embed/vTezm7btK-Q?enablejsapi=1&start=10&rel=0&showinfo=0&iv_load_policy=3&modestbranding=1"></iframe></div><a class="ns-img" href="https://i.ytimg.com/vi/vTezm7btK-Q/maxresdefault.jpg"></a><div class="caption">This video starts from 0:10</div><div class="video-playbutton-layer"></div></li><li><div class="video"><video controls="" width="100%"><source src="https://gelatistatic.sugar3.io/v1/media/video.mp4" type="video/mp4"></source></video></div></li><li><a class="ns-img" href="https://gelatistatic.sugar3.io/v1/media/picture.jpg"></a><div class="video" style="background-color: transparent; bottom: 0px; height: auto; top: auto;"><audio controls="" data-autoplay="1"><source src="https://gelatistatic.sugar3.io/v1/media/audio.mp3" type="audio/mpeg"></source></audio></div></li></ul><div class="fs-icon"></div></div></div><script type="text/javascript"> var nsOptions7 = JSON.parse(JSON.stringify(nsOptions)); nsOptions7.sliderId = "a7_ninja-slider"; nsOptions7.transitionType = "slide"; nsOptions7.transitionSpeed = "default"; nsOptions7.pauseOnHover = false; nsOptions7.aspectRatio = "16:9"; nsOptions7.keyboardNav = false; nsOptions7.before = null; var nslider7 = new NinjaSlider(nsOptions7); window.addEventListener("DOMContentLoaded", function (e) { nslider7.init(0); }); </script><br /><br />Video components have settings for showing and hiding the playback controls. Use autoplay and playback controls responsibly. <br /><br /><blockquote> Quote <br /> <br /> The Verse block <br /> <br /> A block for haiku?<br /> Why not?<br /> Blocks for all the things! </blockquote>Creative Commonshttp://www.blogger.com/profile/11256994501847507410noreply@blogger.com0Wien, Österreich48.2081743 16.373818947.8696338 15.728371899999999 48.546714800000004 17.0192659tag:blogger.com,1999:blog-3420909536699005998.post-54538294571497084572020-07-31T06:48:00.002-07:002022-01-08T00:20:17.902-08:00Showcase – Extensive Markup, Image Handling and Hero-Image<div class="separator cover-item full-cover center-text-align large-text-size" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfj8NNhuOgedgmn61m-kyisiw9KI6Ezb3z0T4VmFuWWv79WF2_CYDYGEllH3_cQ_DMrrXbSZ9jGbSor5TmLQCajVFh5VN_o414hBnpxgqtnlksZ9LShAAvyso2Hv7Gg7KkPNoQ6dEi2mY/s1600/landscape_color_8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfj8NNhuOgedgmn61m-kyisiw9KI6Ezb3z0T4VmFuWWv79WF2_CYDYGEllH3_cQ_DMrrXbSZ9jGbSor5TmLQCajVFh5VN_o414hBnpxgqtnlksZ9LShAAvyso2Hv7Gg7KkPNoQ6dEi2mY/w800-h400-p-k-no-nu/landscape_color_8.png" /></a></div><div class="separator content-block" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfj8NNhuOgedgmn61m-kyisiw9KI6Ezb3z0T4VmFuWWv79WF2_CYDYGEllH3_cQ_DMrrXbSZ9jGbSor5TmLQCajVFh5VN_o414hBnpxgqtnlksZ9LShAAvyso2Hv7Gg7KkPNoQ6dEi2mY/s1600/landscape_color_6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfj8NNhuOgedgmn61m-kyisiw9KI6Ezb3z0T4VmFuWWv79WF2_CYDYGEllH3_cQ_DMrrXbSZ9jGbSor5TmLQCajVFh5VN_o414hBnpxgqtnlksZ9LShAAvyso2Hv7Gg7KkPNoQ6dEi2mY/,60004000FFFFFFFF-cc-c0x00000000/landscape_color_6.png" width="200" height="200" data-original-width="200" data-original-height="200" /></a></div><h2> Blog post styling </h2><p> <strong>Tacit</strong> is a general purpose <a href="https://github.com/yegor256/tacit">CSS framework</a>. A customized version is provided along with this blog template, specifically configured to address only blog post-related CSS rules to prevent unintended interactions with blog's overall layout. </p><hr class="separator content-block small-width content-spacer"/><p> You should <strong>not</strong> use any CSS classes to make your HTML code look nice. Just make sure it is <a href="https://www.w3.org/TR/html5/">HTML5</a> compliant and you'll be fine. Again, <mark>no classes</mark>, just standard HTML elements, like <code><table></code> and <code><input></code>. Check the source code of this page. </p><pre class="swipeable-item"><br /> /* b:comment: customize blogtemplate - blogpost css (start) */<br /> body.article-view .post-body .content-item input,body.article-view .post-body .content-item textarea,body.article-view .post-body .content-item select,…<br /> /* b:comment: customize blogtemplate - blogpost css (end) */<br />]]></b:skin><br /><b:template-skin><br /></pre><p> By the way, Tacit is compliant with W3C validator requirements: <a href="https://validator.w3.org/check?uri=https%3A%2F%2Fyegor256.github.io%2Ftacit%2F&doctype=Inline">HTML</a> and <a href="https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fyegor256.github.io%2Ftacit%2F&profile=css3">CSS</a>. </p><hr class="separator content-block small-width content-spacer"/><h2>Forms</h2><form method="get" action="#"> <fieldset> <legend>Here is a simple form with <code><fieldset></code>:</legend> <label for="email">Your email:</label> <input name="email" type="text" id="email" size="25" placeholder="must be unique" /> <label for="sex">Your gender:</label> <select name="sex" id="sex"> <option value="none">don't want to say</option> <option value="female">female</option> <option value="male">male</option> </select> <label for="age">Your age:</label> <label><input type="radio" id="under" name="age" value="under" /> I'm under 18</label> <label><input type="radio" id="over" name="age" value="over" /> I'm over 18</label> <label for="food">Your favorite food:</label> <select multiple="multiple" name="food" id="food"> <optgroup label="Italian"> <option value="1">Pizza</option> <option value="2">Spaghetti</option> </optgroup> <optgroup label="Asian"> <option value="4">Sushi</option> </optgroup> <option value="3">Hamburger</option> <option value="5">Borsht</option> </select> <label for="address">Your full address:</label> <textarea name="address" id="address" placeholder="PO box is not allowed"></textarea> <label><input type="checkbox" name="consent" id="consent" value="test" />I agree with all possible terms and conditions</label> <button type="submit">Subscribe</button> <button type="reset">Reset</button> <button disabled>Can't click</button> </fieldset></form><p>This is a one-line form without <code><fieldset></code>:</p><form> <label>Add funds:</label><input type="text" size="10" placeholder="e.g. $10" /><button type="submit">Pay</button></form><hr class="separator content-block small-width content-spacer"/><h2>Tables</h2><p> A simple table would look like this: </p><table> <thead> <tr> <th>Make</th> <th>Price</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>BMW X6</td> <td>$75,000</td> <td>2013</td> </tr> <tr> <td>Mercedes-Benz E350</td> <td>$52,700</td> <td>2014</td> </tr> </tbody></table><h2>Headings</h2><p>Just use standard <code><h1></code>...<code><h6></code> tags: <h1>This is <h1></h1><p>Use a heading of the highest level once per page.</p><h2>This is <h2></h2><p>Use <code><h2></code> for sections of the page.</p><h3>This is <h3></h3><p>Use <code><h3></code> for sub-sections.</p><h4>This is <h4></h4><p>I would recommend to avoid this type of heading at all.</p><h5>This is <h5></h5><p>I would recommend to avoid this type of heading at all.</p><h6>This is <h6></h6><p>I would recommend to avoid this type of heading at all.</p><p>Sup<sup>®</sup> and Sub<sub>®</sub> Elements</p><hr class="separator content-block small-width content-spacer"/><h2>Lists</h2><p>Just use standard <code><ul></code>, <code><ol></code> and <code><dl></code> tags: <ul> <li>Orange</li> <li> Apple <ol> <li>First</li> <li> Second <ul> <li>Blue</li> <li>Yellow</li> <li>Green</li> <li>Red</li> </ul> </li> <li>Third</li> </ol> </li> <li>Apricot</li></ul><dl> <dt>Banana</dt> <dd>A yellow fruit that is easy to peel.</dd> <dd>Which also grows on a tree.</dd> <dt>Cashew</dt> <dd>A tan nut without a peel.</dd> <dt>Cherry</dt> <dd>A red fruit that is hard to peel.</dd></dl><h2>Blockquote</h2><blockquote> Use this to emphasize a quote <footer>— Author Name, Publication</footer></blockquote><h2>Aside</h2><aside> Use this to emphasize a content related to the main content. </aside><p>main content</p><h2>Keyboard</h2><p>Sometimes you want to let people know they should press a keyboard command like <kbd>ctrl + l</kbd>.</p><hr class="separator content-block small-width content-spacer"/><h2>Media</h2><p> It's recommended to add <code>.content-block</code> css-class to image, video and embedded elements to acquire a better responsive behavior. </p><p> To scale images, append an additional <strong>css-class</strong> to provide aligned and floating images a coherent layout, including mobile views. </p><div class="separator content-block full-width" style="clear: both; text-align: center;"><div imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><figure><img border="0" data-original-height="267" data-original-width="800" src="https://via.placeholder.com/1200x400.png" /><figcaption><a href="#">Even</a> before the internet was a thing, people already used Filler Text as a filler in printing tests.<br /><br /><code>.content-block.full-width</code></figcaption></figure></div></div><br /><br /><div class="separator content-block small-width" style="clear: both; text-align: center;"><div imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><figure><img border="0" data-original-height="267" data-original-width="800" src="https://via.placeholder.com/1200x400.png" /><figcaption><a href="#">Even</a> before the internet was a thing, people already used Filler Text as a filler in printing tests.<br /><br /><code>.content-block.small-width</code></figcaption></figure></div></div><p></p><p> As an alternative use Blogger's standard sizinig method, e.g. <strong>img-attribute</strong>. Hint: Blogger adapts image width and alignment for mobile requests. </p><div class="separator content-block" style="clear: both; text-align: center;"><div imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><figure><img border="0" data-original-height="267" data-original-width="800" src="https://via.placeholder.com/1200x400.png" /><figcaption style="width: 100%"><a href="#">Even</a> before the internet was a thing, people already used Filler Text as a filler in printing tests.<br /><br /><code>.content-block img:not([width])</code></figcaption></figure></div></div><br /><br /><div class="separator content-block" style="clear: both; text-align: center;"><div imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><figure><img border="0" src="https://via.placeholder.com/1200x400.png" width="440" height="134" data-original-width="800" data-original-height="267" /><figcaption style="width: 440px"><a href="#">Even</a> before the internet was a thing, people already used Filler Text as a filler in printing tests.<br /><br /><code>.content-block img[width="400"]</code></figcaption></figure></div></div>Creative Commonshttp://www.blogger.com/profile/11256994501847507410noreply@blogger.com0tag:blogger.com,1999:blog-3420909536699005998.post-68548876486568584222020-07-27T11:48:00.005-07:002022-01-08T00:21:54.151-08:00Article HowTo – Hero-Header<div class="separator cover-item small-cover light-text-color" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTyQtsFnxfaGyobCy7D17mpBYVrTn8LMlFhCuz1-JkiniiRJmj-2IlbLk_LPYN1NiuzH_9dElvDIa55jYLbEpo4GsIDewjk4l_K22d4ThofsTZPyO8S3skLwH7mbJwF4OgvGaq4ZgKOd_/s1600/landscape_color_5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTyQtsFnxfaGyobCy7D17mpBYVrTn8LMlFhCuz1-JkiniiRJmj-2IlbLk_LPYN1NiuzH_9dElvDIa55jYLbEpo4GsIDewjk4l_K22d4ThofsTZPyO8S3skLwH7mbJwF4OgvGaq4ZgKOd_/w800-h400-p-k-no-nu/landscape_color_5.png" /></a></div><hr class="separator content-block small-width content-spacer"/><p> Even before the internet was a thing, people already used Filler Text as a filler in printing tests. The actual root of that text, however, dates back nearly 2000 years to a guy named Cicero. Today, it’s mostly used for digital design before real content is added. But here’s the thing with Filler Text: it’s not the only option. </p><pre class="swipeable-item"><br /><div class="separator cover-item small-cover light-text-color" style="clear: both; text-align: center;"><br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTyQtsFnxfaGyobCy7D17mpBYVrTn8LMlFhCuz1-JkiniiRJmj-2IlbLk_LPYN1NiuzH_9dElvDIa55jYLbEpo4GsIDewjk4l_K22d4ThofsTZPyO8S3skLwH7mbJwF4OgvGaq4ZgKOd_/s1600/landscape_color_5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /> <img border="0" data-original-height="512" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTyQtsFnxfaGyobCy7D17mpBYVrTn8LMlFhCuz1-JkiniiRJmj-2IlbLk_LPYN1NiuzH_9dElvDIa55jYLbEpo4GsIDewjk4l_K22d4ThofsTZPyO8S3skLwH7mbJwF4OgvGaq4ZgKOd_/w800-h400-p-k-no-nu/landscape_color_5.png" /><br /> </a><br /></div><br /></pre><br /><code>cover-item</code> <code>small-cover</code> <code>light-text-color</code><hr class="separator content-block small-width content-spacer"/><p> Even before the internet was a thing, people already used Filler Text as a filler in printing tests. The actual root of that text, however, dates back nearly 2000 years to a guy named Cicero. Today, it’s mostly used for digital design before real content is added. But here’s the thing with Filler Text: it’s not the only option. </p>Creative Commonshttp://www.blogger.com/profile/11256994501847507410noreply@blogger.com0tag:blogger.com,1999:blog-3420909536699005998.post-60538398523207868632020-07-18T07:19:00.000-07:002021-07-29T00:36:40.174-07:00Image-Gallery – Unobtrusive Captions<p>Even before the internet was a thing, people already used Filler Text as a filler in printing tests. The actual root of that text, however, dates back nearly 2000 years to a guy named Cicero. Today, it’s mostly used for digital design before real content is added. But here’s the thing with Filler Text: it’s not the only option.</p><div id="a6_ninja-slider" class="clean-slider"><div class="slider-inner"><ul><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuevb3BRck-rhkVypMLSpFR4ySzhtc_rbh4S_FzhUeNFyANxE7cCHfFxbi2o8axu-4ehiEzSTcrBJC7df3Y41zOw61w1O08cc3VqpzncpMVX0bHwzPMrVP-y3drfYX6iCd2vblYm5E3aKN/s1600/landscape_gray_1.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuevb3BRck-rhkVypMLSpFR4ySzhtc_rbh4S_FzhUeNFyANxE7cCHfFxbi2o8axu-4ehiEzSTcrBJC7df3Y41zOw61w1O08cc3VqpzncpMVX0bHwzPMrVP-y3drfYX6iCd2vblYm5E3aKN/s400/landscape_gray_1.png" data-screen="0-479"></a><div class="caption">1.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_sc3X52Gcr2TApAbonsQywxAZgp0EP5doHokuULp9fS2popRL55FMGgomaDqImIXL8CHkimXnhtPDmA-yfrvlugt8Lwgvv1ir1aCtf2ff-MUaHPnfzBKXrre6zJvkaHH68HWL-x1eu6ns/s1600/landscape_color_2.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_sc3X52Gcr2TApAbonsQywxAZgp0EP5doHokuULp9fS2popRL55FMGgomaDqImIXL8CHkimXnhtPDmA-yfrvlugt8Lwgvv1ir1aCtf2ff-MUaHPnfzBKXrre6zJvkaHH68HWL-x1eu6ns/s400/landscape_color_2.png" data-screen="0-479"></a><div class="caption">2.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8r-NVemvNGRtumTRRIHt_YOs_GOdeYIPSQJsQak5VZXuo3iq44sl7cmHX15K6AQTtvYD3eFpK5OU77N8Vojkfk0mc7rGPG-pPxsg-AnPvB1ZyoKNM66vVU0in4-DNt6LG-7v3LWo05Fe4/s1600/landscape_gray_3.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8r-NVemvNGRtumTRRIHt_YOs_GOdeYIPSQJsQak5VZXuo3iq44sl7cmHX15K6AQTtvYD3eFpK5OU77N8Vojkfk0mc7rGPG-pPxsg-AnPvB1ZyoKNM66vVU0in4-DNt6LG-7v3LWo05Fe4/s400/landscape_gray_3.png" data-screen="0-479"></a><div class="caption"></div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmHIDiEuNnyUnFwetYVhT4ApD0Whv0k9dQRt3AFZLM6IQMQQwEcLO8AJ4TvF3k9y90y0CEdCYcDWuEUY0I85W_Cxkmt2BXt5rSxMobv8uMDbWmuCjlJY1ZSUWz0OYm1dKRWIHQuivqqOKa/s1600/landscape_gray_4.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmHIDiEuNnyUnFwetYVhT4ApD0Whv0k9dQRt3AFZLM6IQMQQwEcLO8AJ4TvF3k9y90y0CEdCYcDWuEUY0I85W_Cxkmt2BXt5rSxMobv8uMDbWmuCjlJY1ZSUWz0OYm1dKRWIHQuivqqOKa/s400/landscape_gray_4.png" data-screen="0-479"></a><div class="caption">4.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsPaOd_OBu3oNU9CFTjfFxka0i1fDD2fN3yWLFsFcIucork640ygRbkxtNNdvRkW9lMpBjUNFswe21-ELut5S_ROYpX7ep5Yp0MAb1bv81bb7BbM_BYSW5cQZSg4wCgeipyYUfA6nmFAlO/s1600/landscape_gray_5.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsPaOd_OBu3oNU9CFTjfFxka0i1fDD2fN3yWLFsFcIucork640ygRbkxtNNdvRkW9lMpBjUNFswe21-ELut5S_ROYpX7ep5Yp0MAb1bv81bb7BbM_BYSW5cQZSg4wCgeipyYUfA6nmFAlO/s400/landscape_gray_5.png" data-screen="0-479"></a><div class="caption">5.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1-RI25SiyG97Gr5IxVUPNrX5SNu11_oHFmLc_CcQo3SQSbWkRX-DK-iSfIrDdt_1cdd9NcKZyxazIUqStDFnI972vnyRn-mLofxJZcqVRLaw9lP30qYpq-eOxBkXXFUrjrmhoN58n84S5/s1600/landscape_gray_6.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1-RI25SiyG97Gr5IxVUPNrX5SNu11_oHFmLc_CcQo3SQSbWkRX-DK-iSfIrDdt_1cdd9NcKZyxazIUqStDFnI972vnyRn-mLofxJZcqVRLaw9lP30qYpq-eOxBkXXFUrjrmhoN58n84S5/s400/landscape_gray_6.png" data-screen="0-479"></a><div class="caption">6.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIzvDB2nul18X_nJ5XaDLx1EnwTIwP9ECQZHih32jJRrq7qvjp7s7dKcJ2XSIAe0U6SLWLYvGlax1G7aqUmACm4zEsmgZDWhc7VSNHEXJ5PkVEK6XC_doJNV6ZWU0T7d0UrPNIt89XdM_O/s1600/landscape_gray_7.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIzvDB2nul18X_nJ5XaDLx1EnwTIwP9ECQZHih32jJRrq7qvjp7s7dKcJ2XSIAe0U6SLWLYvGlax1G7aqUmACm4zEsmgZDWhc7VSNHEXJ5PkVEK6XC_doJNV6ZWU0T7d0UrPNIt89XdM_O/s400/landscape_gray_7.png" data-screen="0-479"></a><div class="caption">7.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li><li><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxG3vT8lo4JtFImQh_lfjJ7-2uNWQ2OgHoNhP2yF9DI-Tknev6ROgq21oML6O4wZywVEp166T7Tz3f1AF2VJlbEwa2q3ABJjP2nJvXlxiOoxfnClYcLFycZLJNJMSyejSaKt7yIw94Puo/s1600/landscape_gray_8.png" data-screen="480-max"></a><a class="ns-img" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxG3vT8lo4JtFImQh_lfjJ7-2uNWQ2OgHoNhP2yF9DI-Tknev6ROgq21oML6O4wZywVEp166T7Tz3f1AF2VJlbEwa2q3ABJjP2nJvXlxiOoxfnClYcLFycZLJNJMSyejSaKt7yIw94Puo/s400/landscape_gray_8.png" data-screen="0-479"></a><div class="caption">8.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests. </div></li></ul><div class="fs-icon" title="Expand/Close"></div></div></div><script type="text/javascript"> var nsOptions6 = JSON.parse(JSON.stringify(nsOptions)); nsOptions6.sliderId = "a6_ninja-slider"; nsOptions6.aspectRatio = "auto"; nsOptions6.before = null; var nslider6 = new NinjaSlider(nsOptions6); window.addEventListener("DOMContentLoaded", function(e) { nslider6.init(0); }); </script><p>Even before the internet was a thing, people already used Filler Text as a filler in printing tests. The actual root of that text, however, dates back nearly 2000 years to a guy named Cicero. Today, it’s mostly used for digital design before real content is added. But here’s the thing with Filler Text: it’s not the only option.</p>Creative Commonshttp://www.blogger.com/profile/11256994501847507410noreply@blogger.com0