Kustom Kotak di Blogger

Cara Menambahkan Kotak Desain Bahan Kustom Di Blogger

]]></b:skin>

.saiful-box{position:relative;width:100%;background-color:#fefefe;box-shadow:0 5px 12px -2px rgb(0 0 0 / 12%);border:1px solid #eceff1;border-radius:25px;padding:10px;margin:20px 0;display:flex;align-items:center;font-size:13px;transition:all .2s ease}.saiful-box .saiful-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;background:#fff;border-radius:5px;border:1px solid transparent}.saiful-box .saiful-txt{flex-grow:1;width:calc(100% - 150px);padding:0 15px 0 5px;line-height:20px}.saiful-box .saiful-sw{position:absolute;padding:1px 3px;margin-top:0;margin-left:93%;width:30px;height:30px;background:red;border-radius:50%;border:1px solid #eceff1;transition:all .2s ease;z-index:1}#wc-check-dnt:checked ~ .saiful-box{padding-top:250px}#wc-check-dnt:checked ~ .saiful-box .saiful-hidden{visibility:visible;opacity:1}#wc-check-dnt:checked ~ .saiful-box .saiful-sw{margin-top:-550px}#wc-check-dnt:checked ~ .saiful-box .saiful-sw svg{transform:rotate(180deg)}#wc-check-dnt,#wc-check-bnk{display:none}#wc-check-bnk:checked ~ .saiful-st{visibility:hidden;opacity:0;position:absolute;margin-top:43px}#wc-check-bnk:checked ~ .saiful-pp{visibility:hidden;opacity:0;position:absolute;margin-top:-43px}#wc-check-bnk:checked ~ .saiful-rk{visibility:visible;opacity:1;position:absolute;margin-top:-350px}.saiful-hidden{position:absolute;width:100%;background-color:transparent;margin:-175px auto auto -10px;visibility:hidden;opacity:0;transition:all .2s ease}.saiful-hidden h2{font-size:20px;margin:0 auto -10px;text-align:center}.saiful-hidden span{font-size:17px;color:#767676;margin-left:35px}.saiful-trn,.saiful-pp,.saiful-rk,.saiful-pp,.saiful-st{display:inline-block;width:calc(100% - 50px);border:1px solid #999;background:#fefefe;border-radius:3px;margin:20px 25px 0;padding:10px;transition:all .2s ease}.saiful-st{margin:10px 25px 0}.saiful-pp{margin:10px 25px 0}.saiful-rk{margin:-10px 25px 0;visibility:hidden;opacity:0;transition:all .2s ease}.saiful-svg{width:25px;height:25px;position:absolute;fill:#767676;margin-top:0;padding-bottom:6px}.big{width:50px;height:50px}.saiful-sw svg,.saiful-svg.line{fill:none!important;stroke:#fff;stroke-width:2}.saiful-svg.line{stroke:#767676}@media screen and (max-width:500px){.saiful-box .saiful-sw{margin-left:89%}}@media screen and (max-width:455px){.saiful-box .saiful-sw{margin-left:89%;margin-top:0}#wc-check-dnt:checked ~ .saiful-box .saiful-sw{margin-top:43}}
.drK .saiful-box,.drK .saiful-rk,.drK .saiful-trn,.drK .saiful-pp,.drK .saiful-st,.drK .saiful-hidden span,.drK .saiful-icon{background-color:#2d2d30;color:#fefefe}.drK .saiful-svg{fill:#fefefe;stroke:#fefefe}.drK .saiful-box,.drK .saiful-sw,.drK .saiful-icon{border-color:rgba(255,255,255,.1)}.drK .boxdescription{background:#252526;border:unset}.drK .boxdescription{background:#252526;border:unset}.boxdescription{background:white;position:relative;margin:0 0;padding:10px 10px 0px 1px;border:1px solid rgba(230,230,230,1);border-radius:5px;box-shadow:0 2px 8px 0 rgba(0,0,0,0.3)}.boxdescription.boxmerah, .boxdescription.boxkuning, .boxdescription.boxungu, .boxdescription.boxbiru, .boxdescription.boxhijau{margin:40px 2px 0;padding: 20px 10px 10px;}.boxdescription h1{background:#25d366;border-radius:4px;padding:4px 12px!important;position:absolute;margin:0!important;font-size:17px!important;color:white;top:-20px;font-weight:300;left:10px;text-transform:capitalize}.boxmerah h1{background:#f7176a!important}.boxjingga h2{background:#ffa110!important}.boxkuning h1{background:#ffbf00!important}.boxhijau h2{background:#00c23a!important}.boxungu h1{background:#bf00ff!important}.boxbiru h1{background:#3291d1!important}#Details{font-weight:bold}.boxdescription h2{background:#25d366;border-radius:4px;padding:4px 12px!important;position:absolute;margin:0!important;font-size:17px!important;color:white;top:-20px;font-weight:300;left:10px;text-transform:capitalize}.boxmerah h2{background:#f7176a!important}.boxjingga h2{background:#ffa110!important}.boxkuning h2{background:#ffbf00!important}.boxhijau h2{background:#00c23a!important}.boxungu h2{background:#bf00ff!important}.boxbiru h2{background:#3291d1!important}#Details{font-weight:bold}

Referensi Fitur:

Tugasiswa

Jangan lupa support blog ini dengan cara berdonasi di Sociabuzz atau Trakteer.id