HomePosts filed under Widget
Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tag Kondisional Blogger

Tag Kondisional Blogger


 
Style posting versi HTML 
<style scoped="" type="text/css">
</style>
Tag Kondisional Halaman Utama 
<b:if cond='data:view.isHomepage'> 
… 
</b:if>

Versi 2 Halaman Utama 
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
… 
</b:if>

Tag Kondisional Halaman Label 
<b:if cond='data:view.isLabelSearch'> 
… 
</b:if>

Tag Kondisional Blogger

Cara membuat highlight text di blog

Cara membuat highlight text di blog

Kode CSS nya 
/* CSS Highligh Text */
.highlight-text{background:#ff9800;background:-webkit-linear-gradient( 145deg,#F44336 0%,#FF5722 25%,#E91E63 50%,#FFC107 100%) repeat;-webkit-background-clip:text;-ms-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-ms-text-fill-color:transparent;-moz-text-fill-color:transparent;text-fill-color:transparent;-webkit-animation-name:masked-animation;-webkit-animation-duration:100s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear}
@-webkit-keyframes masked-animation{0%{background-position:0 0}100%{background-position:-8000px -3000px}}
/* CSS Section Header */
.section-header{text-align:center;margin-bottom:25px;margin-top:40px;}
.section-header h3{font-size:30px;font-weight:600;color:#022b38;margin:0;margin-bottom:10px;text-transform:capitalize}
.section-header p{font-size:16px;color:#aaa;display:inline-block;line-height:26px;font-weight:300}

Kode HTML nya 
<div class='section-header'>
<h3><span class='highlight-text'>Explore</span> Our Link</h3>
<p>Deksripsi / Penjelasan</p>
</div>

Demo tampilan

Explore Our Link

Deksripsi / Penjelasan

Cara membuat highlight text di blog

Cara membuat service section di halaman utama blog
Cara membuat service section di halaman utama blog

 
Kode CSS nya : 
/* Service Section */
#intro-services-wrap{position:relative;float:left;width:100%;background-color:#f7f9fb;padding:80px 0;margin:50px auto;overflow:hidden}
#intro-services-wrap .container{position:relative;margin:0 auto}
#intro-services{display:block;margin:0 -20px}
.service-content{background:#fff;display:block;text-align:center;float:left;width:calc(100% / 3.2);box-sizing:border-box;padding:30px 20px;margin:0 15px;border-radius:7px;box-shadow:0 20px 25px -10px rgba(113,162,223,.2);transition:initial}
.service-content:nth-child(1){margin:0 15px 0 0}
.service-content:nth-child(3){margin:0 0 0 15px}
.service-content:hover{box-shadow:0 0 0 3px rgba(113,162,223,.2)}
.service-content:nth-child(1):hover{box-shadow:0 0 0 3px rgba(231,76,60,.5)}
.service-content:nth-child(2):hover{box-shadow:0 0 0 3px rgba(9,132,227,.5)}
.service-content:nth-child(3):hover{box-shadow:0 0 0 3px rgba(243,156,18,.5)}
.service-icon{display:inline-block;width:70px;height:70px;text-align:center;border-radius:100%;overflow:hidden}
.service-icon i{display:block;font-size:30px;color:#222;line-height:70px;font-weight:500;font-style:normal;margin:0}
.service-icon i.fa.fa-magic{color:#e74c3c}
.service-icon i.fa.fa-code{color:#0984e3}
.service-icon i.fa.fa-paper-plane-o{color:#f39c12}
.service-title{font-size:16px;color:#222;font-weight:700;margin:25px 0 15px}
.service-snippet{font-size:14px;line-height:24px;margin:0}

Kode HTML nya : 
<div id='intro-services-wrap'>
<div class='head-text section'>
<h3 class='title'>
            Services
         </h3>
<p>Lorem Ipsum has been the industry's standard dummy text</p>
</div>
<div class='clear'></div>
<div class='container row'>
<div class='service-content animatable bounceIn'>
<span class='service-icon'><i class='fa fa-magic'></i></span>
<h3 class='service-title'>Branding And Identity</h3>
<p class='service-snippet'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
</div>
<div class='service-content animatable bounceIn'>
<span class='service-icon'><i class='fa fa-code'></i></span>
<h3 class='service-title'>Web Development</h3>
<p class='service-snippet'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
</div>
<div class='service-content animatable bounceIn'>
<span class='service-icon'><i class='fa fa-paper-plane-o'></i></span>
<h3 class='service-title'>Social Media Marketing</h3>
<p class='service-snippet'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
</div>
</div>
</div>
<div class='clear'></div>

Cara membuat service section di halaman utama blog

Cara membuat box wrapper dihalaman utama blog
Cara membuat box wrapper dihalaman utama blog

 
Kode CSS : 
/* CSS box wrapper */
.c,.d{fill:#f9f9fc}
.b{clip-path:url(#a)}
.d{opacity:.5;isolation:isolate}
.content-amp{max-width:1100px}
.content-amp,.out-amp{position:relative}
.c,.d{fill:#fff}
.button-home a span.bus svg,.button-home a span.but svg{width:22px;fill:#373837}svg{vertical-align:middle}
.button-home a span.bus{font-size:13px;font-weight:600;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;padding:8px 20px;text-transform:uppercase;display:inline-block;text-align:center;position:relative;margin:20px auto 0;overflow:hidden;background-color:rgba(0,0,0,0.05);color:#fff;border:2px solid #fff;}
.button-home a span.bus svg,.button-home a span.but svg{width:22px;fill:#373837}svg{vertical-align:middle}
.button-home a span.but{font-size:13px;font-weight:700;background-color:#fff;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;padding:9px 20px;display:inline-block;text-transform:uppercase;text-align:center;position:relative;margin:20px 10px auto 0;overflow:hidden;color:#fd6458;}
.button-wrapper span{font-size:40px;font-weight:700;padding:5px 0;position:relative;margin:0;color:#fff}
.box-wrapper svg.wave{position:absolute;bottom:-1px;left:0;overflow:hidden;vertical-align:middle}
.coll span.bg1{background-size:100%;display:block;background-repeat:no-repeat;height:100%;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4lGwIaopo_hJfrCRh6DZh4ON9yTqWjMZJEkpNVwtvDZTYO8kTGf1xxE1DRa1vIX4vMrUp2BcPBRUDhOE21RPiFRlw08IH2EBQsFsQwNd44msFFbsdEZLcNO0bVxuwdC12ySJBXYuZ-e8/s16000/blogging.png)}
.box-wrapper .coll{right:0;box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;margin:35px 0;padding:0;z-index:10;width:500px;height:298px;position:absolute}.button-wrapper{display:block;margin:0;padding:10px 0}
.widget-wrap h2.heading-title{padding:0;color:rgba(255,255,255,.6);font-weight:400;z-index:1;font-size:20px;margin:0}
.widget-wrap{width:50%;float:left;margin:0;margin-top:5%;padding:0;position:relative;box-sizing:border-box;-webkit-box-sizing:border-box}
.content-amp{max-width:1100px}
.content-amp,.out-amp{position:relative}
.content-amp{margin:0 auto}
.box-wrapper{padding:1rem 0 5rem;position:relative;display:inline-block;background:#fd6458;background:linear-gradient(-50deg,#e74c3c,#e74c3c,#fd6458,#fd6458);background-size:cover;z-index:0;margin-top:-30px;margin-bottom:10px;width:100%}

Kode HTML : 
<b:if cond='data:view.isHomepage'>  
<div class='box-wrapper'>
<div class='content-amp'>
<div class='widget-wrap'>
<div class='button-wrapper'>
<h2 class='heading-title'>Hello, I&#39;m</h2>
<span>Asep Rukmana</span>
</div>
<h2 class='heading-title'>Visual System Designer</h2>
<div class='button-home'>
<a href='https://api.whatsapp.com/send?phone=6289502729200' target='_blank'><span class='but'>Learn More</span></a>
<a href='/p/contact.html' target='_blank'><span class='bus'>Contact</span></a></div>
</div>
<div class='coll'>
<span class='bg1'/>
</div>
</div>
<svg class='wave' height='50px' preserveAspectRatio='none' style='pointer-events: none' viewBox='0 0 1920 75' width='100%'>
<defs>
<clipPath id='a'>
<rect class='a' height='75' width='1920'/>
</clipPath>
</defs>
<g class='b'>
<path class='c' d='M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48'/>
</g>
<g class='b'>
<path class='d' d='M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10'/>
</g>
<g class='b'>
<path class='d' d='M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24'/>
</g>
<g class='b'>
<path class='d' d='M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150'/>
</g>
</svg>
</div>
</b:if>

Cara membuat box wrapper dihalaman utama blog

Langganan: Postingan (Atom)