How to Make Cool Shortcode Buttons


How to Make Cool Shortcode Buttons


Immediately, let's apply it: How to Make Shortcode Buttons - Demo, Download, Spoilers, Blockquote and Share Complite Cool Content, Not Show Us

First Step Width
Login to Blogger and Click THEME> Edit THEMES

In the Edit Theme Search section ]]></b:skin>or <style>after finding the input code this is right above the code ]]></b:skin>or below the 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}


</body>Next Search for code: After found Place the code below above the code

<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>


Add a demo and 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>


Spoilers

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


Divide the post content into three


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


Install Youtube Videos in Posts
Add the code below in a blog post on the HTML tab and replace this youtube video linkymq1WdGUcw8 with your youtube video link

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


Adding Code Highlighter in Posts

Add the code below in the blog post on the HTML tab and replace this post --PASTE CODE HERE-- by writing your HTML / JavaScript / CSS code

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


Every thing that I mark in red changes according to your needs


So the discussion: How to Make Shortcode Buttons - Demo, Download, Spoilers, Blockquote and Share Cool Content + Install Youtube Videos in Posts   , Hopefully Helpful
How to Make Cool Shortcode Buttons How to Make Cool Shortcode Buttons Reviewed by bloghint on January 11, 2020 Rating: 5

No comments:

Powered by Blogger.