Cara membuat Tombol Demo dan Download slider

Kali ini saya akan membagikan tutorial membuat Tombol Demo dan Download slider.Biasanya tombol ini sering kita jumpai pada saat mendownload film,atau template blog anda.Code ini saya ambil dari blog arlina design dengan modifikasi sedikit dari saya.Ok simak tutor nya...

Buka blog anda>>Klik Template>>klik edit HTML

Cari kode ]]></b:skin> Atau </style> lalu terapkan code dibawah ini.

body {
margin: 100px;
font-family: helvetica, sans-serif;
background: #fff;
}
#wrap {
margin: 20px auto;
text-align: center;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}

Agar Tombol Demo Dan download nya rapi,Sebaiknya gunakan Tekan "Enter" Untuk baris baru Di setelan entri>>pilihan.

Untuk membuat tombol nya,berikan code dibawah.Letakan pada Posting HTML.

<div id="wrap">
<a href="#" class="btn-slide">
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2">
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Note:Warna merah ganti sesuai keinginan anda ,Warna biru ganti dengan link anda

Ok gampang kan,Jangan lupa comment ya.

No Comments

Read More

Cara Membuat Syntax Highlighter Mudah

Cara Membuat Syntax Highlighter Mudah-Mungkin anda sudah tidak asing dengan tampilan disamping kan?Syntax Highlighter berguna untuk menempatkan Code CSS,Javascript atau HTML.

Syntax Highlighter juga memberikan warna pada code tertentu,Seperti hijau,merah,kuning Dan biru.Sebenarnya tampilan Syntax Highlighter sangat banyak,anda dapat mencari nya di GOOGLE.COM Atau Gihub.com.Tetapi kali ini saya akan membagikan dengan code yang saya dapatkan dari http://blog.lagioke.com/.Gak usah lama-lama,langsung dipraktekan aja yuksss... :

Letakan CSS Dibawah Ini Sebelum Kode ]]></b:skin> Atau </style> 

pre,i[rel="pre"] { padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;color:#839496;font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space: pre;word-wrap: normal;white-space:pre;overflow:auto }}}}padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;color:#839496;font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space: pre;word-wrap: normal;white-space:pre;overflow:auto }}}}}pre.line-number { background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWcynySNahAQQogqlCedh-NrkAKDQ28Y6zTGi1EigurEmtjmqCmPdx02tPbUSwuKIHrLoOkvaoqfSkOQdhybhCHflgSsF31NeOcIheM7r2dODRqFH9SKr_SBF4pOEeu1U8SP5FhT_pgM/s1600/new-line-number.png)no-repeat top left; padding-left:54px; border-left:none; }background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWcynySNahAQQogqlCedh-NrkAKDQ28Y6zTGi1EigurEmtjmqCmPdx02tPbUSwuKIHrLoOkvaoqfSkOQdhybhCHflgSsF31NeOcIheM7r2dODRqFH9SKr_SBF4pOEeu1U8SP5FhT_pgM/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;}background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWcynySNahAQQogqlCedh-NrkAKDQ28Y6zTGi1EigurEmtjmqCmPdx02tPbUSwuKIHrLoOkvaoqfSkOQdhybhCHflgSsF31NeOcIheM7r2dODRqFH9SKr_SBF4pOEeu1U8SP5FhT_pgM/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;}background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWcynySNahAQQogqlCedh-NrkAKDQ28Y6zTGi1EigurEmtjmqCmPdx02tPbUSwuKIHrLoOkvaoqfSkOQdhybhCHflgSsF31NeOcIheM7r2dODRqFH9SKr_SBF4pOEeu1U8SP5FhT_pgM/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;}background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWcynySNahAQQogqlCedh-NrkAKDQ28Y6zTGi1EigurEmtjmqCmPdx02tPbUSwuKIHrLoOkvaoqfSkOQdhybhCHflgSsF31NeOcIheM7r2dODRqFH9SKr_SBF4pOEeu1U8SP5FhT_pgM/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;}pre.line-number:after{ content:""; width:35px; height:8px; background-color:#39424e; bottom:0; left:0; position:absolute; }content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute;}content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute;}content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute;}content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute;}pre[data-codetype="CSS"]{border-left-color:#5fbbba}pre[data-codetype="HTML"]{border-left-color:#4fc1eb}pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}pre[data-codetype="JQuery"]{border-left-color:#99c262}pre.line-number[data-codetype]:before { content:attr(data-codetype); display:block; margin:-11px -13px 10px -54px; padding:8px 12px; font-family:Oswald,Arial,Sans-serif; font-size:12px; text-transform:uppercase; background-color:#41749f; color:white }content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white }}content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white }}}content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white }}}}content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white }}}}}pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}code { font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace; font-size:13px; color: #d14; }font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color: #d14;}font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color: #d14;}font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color: #d14;}font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color: #d14;}#comments code { color:#bbbb6d; }color:#bbbb6d;}color:#bbbb6d;}color:#bbbb6d;}color:#bbbb6d;}pre code { padding:0 !important; color: #a3a49a; background: none !important; border:none !important; display:block; }padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}pre .line-number { float:left; margin:0 1em 0 -1em; color:#61686d; background-color:#39424e; text-align:right; min-width:2.5em; padding-right:4px; }float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .pi, pre .lisp .string, pre .javadoc { color: #586e75; font-style: italic; }color: #586e75;font-style: italic;}color: #586e75;font-style: italic;}color: #586e75;font-style: italic;}color: #586e75;font-style: italic;}pre .keyword, pre .winutils, pre .method, pre .addition, pre .css .tag, pre .request, pre .status, pre .nginx .title { color: #859900; }color: #859900;}color: #859900;
}color: #859900;}color: #859900;}pre .number, pre .command, pre .string, pre .tag .value, pre .rules .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor { color: #7195a3; }color: #7195a3;}color: #7195a3;}color: #7195a3;}pre .title, pre .localvars, pre .chunk, pre .decorator, pre .built_in, pre .identifier, pre .vhdl .literal, pre .id, pre .css .function { color: #569dcf; }color: #569dcf;}color: #569dcf;}color: #569dcf;}pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type { color: #aa985a; }color: #aa985a;}color: #aa985a;}color: #aa985a;}pre .preprocessor, pre .preprocessor .keyword, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata, pre .clojure .title, pre .css .pseudo { color: #509a55; }color: #509a55;}color: #509a55;}color: #509a55;}pre .deletion { color: #dc322f; }color: #dc322f;}color: #dc322f;}color: #dc322f;}pre .tex .formula { background: #073642;}background: #073642;}background: #073642;}background: #073642;}

Setelah itu anda harus memasukan script dibawah sebelum code </head>

<script src='//googledrive.com/host/0B0gvaxdyU-3BS3E4V0VZUVAta0U' type='text/javascript'/><script>hljs.initHighlightingOnLoad();</script>

Yang terakhir anda harus ke tempat posting>>klik HTML(Bukan Compose)

<pre data-codetype="CSS"><code> Isi code atau teks </code></pre>

Jika anda ingin memasang pada comment,anda harus menemabahkan code JS. ini sebelum code </body> 

<script type='text/javascript'>$(&#39;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {    return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;); }); });</script>

Mudah bukan?Jangan lupa comment nya ya...

No Comments

Read More