1
0
Home  ›  Creating a Blogger Code Box

Blogger Kod Kutusu Oluşturma

12345678910111213
/* Codebox by Fineshop Design */ .cBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:20px;margin:30px 0 30px} .cBox .cBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px} .cBox .cBoxH span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem} .cBox .cBoxB{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#056aff;transition:all .3s ease;-webkit-transition:all .3s ease} .cBox .cBoxB:hover{opacity:.8} .cBox .cBoxB .icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:center} .cBox .cBoxB.copied{background:#2dcda7} .cBox .cBoxB.copied .icn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>")} .cBox pre{min-height:350px;margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch} .cBox pre::before, .cBox pre::after{content:''} .darkMode .cBox{background:#2d2d30} .darkMode .cBox pre{background:#252526;color:#fffdfc}

123456
/* Toast Notification by Fineshop */ .tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards} @media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}} @keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}} @-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}} .darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}

Baca juga Blogger Kod Kutusu Oluşturma


12
<!--[ Toast Notification by Fineshop ]--> <div id='toastNotif' class='tNtf'></div>

1
<script>/*<![CDATA[*/ /* Codebox Script by Fineshop Design */ function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Copied to Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
<!--[ Code Box 1 ]--> <div class='cBox'> <div class='cBoxH'> <!--[ Heading ]--> <span>HTML</span> <!--[ Copy Button ]--> <button id='copy1' class='cBoxB' onclick="copyC('copy1','code1')"> <i class='icn'></i> </button> </div> <!--[ Content ]--> <div id='code1'> <pre>Your_codes_here</pre> </div> </div> <!--[ Code Box 2 ]--> <div class='cBox'> <div class='cBoxH'> <!--[ Heading ]--> <span>CSS</span> <!--[ Copy Button ]--> <button id='copy2' class='cBoxB' onclick="copyC('copy2','code2')"> <i class='icn'></i> </button> </div> <!--[ Content ]--> <div id='code2'> <pre>Your_codes_here</pre> </div> </div> <!--[ Code Box 3 ]--> <div class='cBox'> <div class='cBoxH'> <!--[ Heading ]--> <span>JS</span> <!--[ Copy Button ]--> <button id='copy3' class='cBoxB' onclick="copyC('copy3','code3')"> <i class='icn'></i> </button> </div> <!--[ Content ]--> <div id='code3'> <pre>Your_codes_here</pre> </div> </div>
Serkan Gündoğdu
Bilgisayar ve Yazılım Programları Hakkında En Güncel Bilgiler Bu Blog'da Bizi Takip Etmeyi Unutmayın.
Related Post
Blogger Kod Kutusu Oluşturma
Blogger Kod Kutusu Oluşturma /* Codebox by Fineshop Design */ .cBox{position:relative;background…
إرسال تعليق
Additional JS