Sunday, 12 January 2020

How to Make Cool Shortcode Buttons

How to Make Cool Shortcode Buttons

How to Make Cool Shortcode Buttons
Sunday, 12 January 2020

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
4/ 5
Oleh

Comments