Dark
    Template Updates

    Featured Post

    Documentation aMP
    1. Beranda
      2. »
    2. Unlabelled
      3. »
    3. Cara Membuat Tombol Shortcode Keren

    Cara Membuat Tombol Shortcode Keren

    Langsung aja ya Kita terapkan  : Cara Membuat Tombol Shortcode - Demo, Download , Spoiler , Blockquote dan Membagi konten Keren Complite , Gk usa pajang Lebar

    Langkah Yang Pertama
    Login ke Blogger dan Klik TEMA > Edit TEMA

    Pada bagian Edit Tema Cari]]></b:skin>atau<style>setelah ketemu masukan kode ini tepat di atas code]]></b:skin>atau dibawah code<style>

     Style 1

    /* Shortcode */
    .post-body .button{width:100%;padding:0!important;list-style:none;margin:10px auto!important}.post-body .button li{display:inline-block;width:49%;line-height:normal;margin:0}.post-body .button li a{position:relative;display:block;padding:12px 15px;margin:5px;color:#fff;text-align:center;border:0;text-transform:uppercase;font-weight:700;border-radius:99em;background-size:300% 100%;box-shadow:0 4px 15px 0 rgba(49,196,190,0.75)}.post-body .button li a.demo{background-image:linear-gradient(to right,#eb3941,#f15e64,#e14e53,#e2373f)}.post-body .button li a.download{background-image:linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed)}.post-body .button li a.demo:hover,.post-body .button li a.download:hover,.post-body .button li a.demo:active,.post-body .button li a.download:active{background-position:100% 0;box-shadow:0 0 5px 0 rgba(49,196,190,0.5)}.bagidua{-webkit-column-count:2;-moz-column-count:2;column-count:2}.bagitiga{-webkit-column-count:3;-moz-column-count:3;column-count:3}.bagiempat{-webkit-column-count:4;-moz-column-count:3;column-count:4}.bagidua img,.bagitiga img,.bagiempat img{-webkit-backface-visibility:hidden;margin-bottom:20px;max-width:100%}.post-body .bagidua .separator:nth-of-type(n+2),.post-body .bagitiga .separator:nth-of-type(n+2),.post-body .bagiempat .separator:nth-of-type(n+2) img{margin:0 auto}.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.post-body blockquote{background:#f1e791;color:#222;padding:1em 15px;border-radius:10px;position:relative;margin:.5em auto;text-align:left}blockquote:before{content:&#39;&#39;;display:block;height:2em;position:absolute;bottom:-.9em;left:0;top:auto;background:transparent;border:1em solid transparent;border-left-color:#f1e791;opacity:1}.post-footer-line{margin:30px auto;font-size:14px}.post-labels{float:left}.post-labels a{color:#000;padding:0 5px}.post-timestamp{float:right;color:#000}.post-timestamp a{color:#000}.post-labels a:hover,.post-labels a:active,.post-timestamp a:hover{color:#aaa}#flippy{text-align:center}#flippy button{background:#ff6348;background-image:linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed);box-shadow:0 4px 15px 0 rgba(49,196,190,0.75);color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:12px 22px;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border:0;background-size:300% 100%;border-radius:99em;transition:all .3s}#flippy button:hover,#flippy button:focus{background-position:100% 0;outline:none;box-shadow:0 0 5px 0 rgba(49,196,190,0.5)}#flippanel{padding:20px;display:none;text-align:left;background:#f7f7f7;border:0}


     Style 2

    /* Shortcode */
    .post-body .button{width:100%;padding:0!important;list-style:none;margin:10px auto!important}.post-body .button li{display:inline-block;width:49%;line-height:normal;margin:0}.post-body .button li a{position:relative;display:block;padding:12px 15px;margin:5px;color:#fff;text-align:center;border:0;text-transform:uppercase;font-weight:700;border-radius:99em;background-size:300% 100%;box-shadow:0 4px 15px 0 rgba(49,196,190,0.75)}.post-body .button li a.demo{background-image:linear-gradient(to right,#eb3941,#f15e64,#e14e53,#e2373f)}.post-body .button li a.download{background-image:linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed)}.post-body .button li a.demo:hover,.post-body .button li a.download:hover,.post-body .button li a.demo:active,.post-body .button li a.download:active{background-position:100% 0;box-shadow:0 0 5px 0 rgba(49,196,190,0.5)}.bagidua{-webkit-column-count:2;-moz-column-count:2;column-count:2}.bagitiga{-webkit-column-count:3;-moz-column-count:3;column-count:3}.bagiempat{-webkit-column-count:4;-moz-column-count:3;column-count:4}.bagidua img,.bagitiga img,.bagiempat img{-webkit-backface-visibility:hidden;margin-bottom:20px;max-width:100%}.post-body .bagidua .separator:nth-of-type(n+2),.post-body .bagitiga .separator:nth-of-type(n+2),.post-body .bagiempat .separator:nth-of-type(n+2) img{margin:0 auto}.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.post-body blockquote{background:#f1e791;color:#222;padding:1em 15px;border-radius:10px;position:relative;margin:.5em auto;text-align:left}blockquote:before{content:&#39;&#39;;display:block;height:2em;position:absolute;bottom:-.9em;left:0;top:auto;background:transparent;border:1em solid transparent;border-left-color:#f1e791;opacity:1}.post-footer-line{margin:30px auto;font-size:14px}.post-labels{float:left}.post-labels a{color:#000;padding:0 5px}.post-timestamp{float:right;color:#000}.post-timestamp a{color:#000}.post-labels a:hover,.post-labels a:active,.post-timestamp a:hover{color:#aaa}#flippy{text-align:center}#flippy button{background:#ff6348;background-image:linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed);box-shadow:0 4px 15px 0 rgba(49,196,190,0.75);color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:12px 22px;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border:0;background-size:300% 100%;border-radius:99em;transition:all .3s}#flippy button:hover,#flippy button:focus{background-position:100% 0;outline:none;box-shadow:0 0 5px 0 rgba(49,196,190,0.5)}#flippanel{padding:20px;display:none;text-align:left;background:#ecf0f1;border:0}


     Style 3

    /* Shortcode */
    .post-body .button{width:100%;padding:0!important;list-style:none;margin:10px auto!important}.post-body .button li{display:inline-block;width:49%;line-height:normal;margin:0}.post-body .button li a{position:relative;display:block;padding:12px 15px;margin:5px;color:#fff;text-align:center;border:0;text-transform:uppercase;font-weight:700;border-radius:99em;background-size:300% 100%;box-shadow:0 4px 20px 0 rgba(49,196,190,0.75)}.post-body .button li a.demo{background-image:linear-gradient(to right,#f6d365 0%,#fda085 51%,#f6d365 100%)}.post-body .button li a.download{background-image:linear-gradient(to right,#a1c4fd 0%,#c2e9fb 51%,#a1c4fd 100%)}.post-body .button li a.demo:hover,.post-body .button li a.download:hover,.post-body .button li a.demo:active,.post-body .button li a.download:active{background-position:right center;box-shadow:0 0 5px 0 rgba(49,196,190,0.5)}.bagidua{-webkit-column-count:2;-moz-column-count:2;column-count:2}.bagitiga{-webkit-column-count:3;-moz-column-count:3;column-count:3}.bagiempat{-webkit-column-count:4;-moz-column-count:3;column-count:4}.bagidua img,.bagitiga img,.bagiempat img{-webkit-backface-visibility:hidden;margin-bottom:20px;max-width:100%}.post-body .bagidua .separator:nth-of-type(n+2),.post-body .bagitiga .separator:nth-of-type(n+2),.post-body .bagiempat .separator:nth-of-type(n+2) img{margin:0 auto}.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.post-body blockquote{background:#f1e791;color:#222;padding:1em 15px;border-radius:10px;position:relative;margin:.5em auto;text-align:left}blockquote:before{content:&#39;&#39;;display:block;height:2em;position:absolute;bottom:-.9em;left:0;top:auto;background:transparent;border:1em solid transparent;border-left-color:#f1e791;opacity:1}.post-footer-line{margin:30px auto;font-size:14px}.post-labels{float:left}.post-labels a{color:#000;padding:0 5px}.post-timestamp{float:right;color:#000}.post-timestamp a{color:#000}.post-labels a:hover,.post-labels a:active,.post-timestamp a:hover{color:#aaa}#flippy{text-align:center}#flippy button{background:#fbc2eb;background-image:linear-gradient(to right,#fbc2eb 0%,#a6c1ee 51%,#fbc2eb 100%);box-shadow:0 4px 20px 0 rgba(49,196,190,0.75);color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:12px 32px;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border:0;background-size:300% 100%;border-radius:99em;transition:all .3s}#flippy button:hover,#flippy button:focus{background-position:100% 0;outline:none;box-shadow:0 0 5px 0 rgba(49,196,190,0.5)}#flippanel{padding:20px;display:none;text-align:left;background:#f7f7f7;border:0}


    Selan Jut nya Cari kode :</body> Seletelah Ketemu Letakan kode di bawah di atas kode tersebut

    <b:if cond='data:blog.pageType != &quot;index&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    // Youtube Responsive
    setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
    // Double Click
    $('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
    function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawcdn.githack.com/Indzign/theme/9cb6e56a/highlightprox.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
    $(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})});
    //]]>
    </script>
    </b:if>


    Menambahkan demo dan download button.

    <div style="text-align: center;">
    <ul class="button">
    <li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
    <li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
    </ul>
    </div>
    <div class="clear"></div>


    Spoiler

    <div id="flippy"><button>Spoiler</button></div>
    <div id="flippanel">
    --- TAMBAHKAN KONTEN DISINI ---
    </div>


    Membagi konten post menjadi tiga


    <div class="bagitiga">
    --- TAMBAHKAN KONTEN DISINI ---
    </div>


    Memasang Video Youtube di Postingan
    Tambahkan kode di bawah ini di dalam postingan blog pada tab HTML dan ganti link video youtube ini ymq1WdGUcw8 dengan link video youtube Anda

    <div class="videoyoutube">
    <div class="video-responsive">
    <div class="video-youtube loader" data-src="//www.youtube.com/embed/ymq1WdGUcw8">
    </div>
    </div>
    </div>


    Menambahkan Kode Highlighter di Postingan

    Tambahkan kode di bawah ini di dalam postingan blog pada tab HTML dan ganti tulisan ini --PASTE KODE DI SINI-- dengan tulisan kode HTML/JavaScript/CSS Anda

    <pre><code>--PASTE KODE DI SINI--</code></pre>


    Setiap yang saya tandai warna merah ganti sesuai kebutuhan anda

    Sekian Pembahasn : Cara Membuat Tombol Shortcode - Demo, Download , Spoiler , Blockquote dan Membagi konten Keren + Memasang Video Youtube di Postingan  , Semoga Bermanfaat
    Share Share Share Share

    KLIK
    DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi Anda membantu Admin untuk lebih giat lagi dalam membagikan template blog yang berkualitas. Terima kasih.
    Postingan Lebih Baru Postingan Lebih Baru Postingan Lama Postingan Lama

    Komentar

    Posting Komentar