Blog Mas-Yudha: HTML

Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Membuat Halaman Business Card Simple dan Keren

Halaman Bussines Card  adalah Halaman informasi bisnis tentang perusahaan atau individu mengenai Anda. dan kali ini<a href="http://maseyudha.blogspot.com/" target="_blank"> Blog Mas-Yudha</a> akan berbagi artikel tentang html dan css lagi yaitu  <a href="http://maseyudha.blogspot.com/2014/12/membuat-halaman-business-card-simple.html" target="_blank">Membuat Halaman Bussines Card Simpel dan Keren.</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-fz0_5GhKDDc/VJsPAEYZWnI/AAAAAAAABss/DZ1XvM0_xt4/s1600/bisnis%2Bcard.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="membuat halaman business card simple dan keren" border="0" height="220" src="http://2.bp.blogspot.com/-fz0_5GhKDDc/VJsPAEYZWnI/AAAAAAAABss/DZ1XvM0_xt4/s1600/bisnis%2Bcard.png" title="business card" width="320" /></a></div>
<br />
<br />
<div class="whitebuttondemo">
<a href="http://jsfiddle.net/MasYudha/g4L6z0mg/1/embedded/result/" target="_blank">Demo</a><br />
<span class="up">click to view</span></div>
 Langsung saja masuk ke pengcodingan CSS dan HTMLnya :
<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css"> @import url(http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700);

@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);

@import url(http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css);

::selection {

color: #fff;

background: #2a2b39;

}

::-moz-selection {

color: #fff;

background: #2a2b39;

}

body, html {

font-family: 'Raleway', sans-serif;

background-image: url(http://imgh.us/bg_1.svg);

-webkit-background-size: cover;

-moz-background-size: cover;

background-size: cover;

margin: 0;

padding: 0;

width: 100%;

height: 100%;

overflow: hidden;

z-index: 9;

}

p {

padding: 0;

margin: 0;

display: inline-block;

}

a {

color: #2a2b39;

text-decoration: none;

-moz-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

a:hover {

color: #6acd79;

}

.bussinesscard {

height: 320px;

width: 427px;

overflow: hidden;

box-shadow: 0px 0px 43px -10px black;

position: absolute;

left: 50%;

top: 50%;

-moz-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.bussinesscard .flip {

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

-webkit-transition: all 0.5s ease;

transition: all 0.5s ease;

}

.bussinesscard .front {

z-index: 11;

width: 100%;

position: absolute;

height: 100%;

background: #fff;

box-shadow: 0px 0px 33px -1px rgba(0, 0, 0, 0.45);

-moz-transform: scale(1, 1);

-ms-transform: scale(1, 1);

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

-moz-transition: all 0.6s ease;

-o-transition: all 0.6s ease;

-webkit-transition: all 0.6s ease;

transition: all 0.6s ease;

}

.bussinesscard .front .top {

height: 50%;

background: #2a2b39;

}

.bussinesscard .front .top:after {

position: absolute;

content: '';

pointer-events: none;

}

.bussinesscard .front .top:after {

left: 50%;

width: 2em;

height: 2em;

-moz-transform: translateX(-50%) rotate(45deg);

-ms-transform: translateX(-50%) rotate(45deg);

-webkit-transform: translateX(-50%) rotate(45deg);

transform: translateX(-50%) rotate(45deg);

bottom: 9em;

z-index: 10;

background: inherit;

}

.bussinesscard .front .top .logo {

display: inline-block;

background: #6acd79;

color: #fff;

z-index: 11;

padding: .16em;

border: 8px solid #fff;

position: relative;

pointer-events: none;

-moz-transform: translateX(-50%);

-ms-transform: translateX(-50%);

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

left: 50%;

margin-top: .4em;

font-size: 4em;

}

.bussinesscard .front .top .logo .fat {

font-weight: 800;

}

.bussinesscard .front .top .logo .skinny {

font-weight: 100;

}

.bussinesscard .front .nametroduction {

margin-top: 2.4em;

-moz-transform: translateY(0);

-ms-transform: translateY(0);

-webkit-transform: translateY(0);

transform: translateY(0);

z-index: 8;

}

.bussinesscard .front .name {

color: #2a2b39;

font-weight: 400;

font-size: 3.2em;

text-align: center;

position: relative;

margin-bottom: .35em;

}

.bussinesscard .front .name:after {

content: '';

position: absolute;

top: 1.3em;

width: 20%;

left: 40%;

right: 40%;

height: 1px;

background: #2a2b39;

}

.bussinesscard .front .introduction {

text-align: center;

color: #2a2b39;

font-family: 'Old Standard TT', serif;

font-style: italic;

}

.bussinesscard .front .contact {

color: #2a2b39;

margin-left: 1.7em;

font-weight: 300;

font-size: 1.6em;

-moz-transform: translateY(400%);

-ms-transform: translateY(400%);

-webkit-transform: translateY(400%);

transform: translateY(400%);

}

.bussinesscard .front .contact span {

color: #2D3244;

font-size: 1.7em;

width: 1.3em;

display: inline-block;

}

.bussinesscard .front .contact a {

position: relative;

bottom: .24em;

}

.bussinesscard .back {

width: 100%;

height: 100%;

background: #fff;

backface-visibility: hidden;

position: absolute;

}

.tooltip {

position: absolute;

left: 1em;

bottom: 1em;

color: #fff;

font-weight: 300;

padding: .4em;

background: #2a2b39;

}

/* HOVER ANIMATIONS */

.front .top .logo, .front .top, .front .top:after, .front .nametroduction, .front .contact {

-moz-transition: 0.7s all ease-in-out;

-o-transition: 0.7s all ease-in-out;

-webkit-transition: 0.7s all ease-in-out;

transition: 0.7s all ease-in-out;

}

.flip:hover .front .top .logo {

margin-top: .28em;

font-size: 1.3em;

border: 3px solid #fff;

margin-left: .15em;

-moz-transform: translateX(0);

-ms-transform: translateX(0);

-webkit-transform: translateX(0);

transform: translateX(0);

left: 0;

}

.flip:hover .front .top {

height: 15%;

}

.flip:hover .front .top:after {

width: 1.5em;

height: 1.5em;

bottom: 16.3em;

}

.flip:hover .front .nametroduction {

-moz-transform: translateY(400%);

-ms-transform: translateY(400%);

-webkit-transform: translateY(400%);

transform: translateY(400%);

}

.flip:hover .front .contact {

-moz-transform: translateY(-52%);

-ms-transform: translateY(-52%);

-webkit-transform: translateY(-52%);

transform: translateY(-52%);
}</code></pre>
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <section class="bussinesscard">
  <div class="flip">
<div class="front">
<div class="top">
<div class="logo">
<span class="fat">Y</span><span class="skinny">D</span></div>
</div>
<div class="nametroduction">
<div class="name">
Yudha dhesockerz</div>
<div class="introduction">
Blogger Newbie Asal Malang</div>
</div>
<div class="contact">
<div class="website">
<span class="ion-earth"></span>
      <a href="#">maseyudha.blogspot.com</a>
     </div>
<div class="twitter">
<span class="ion-social-twitter"></span>
      <a href="#">@yudhadhesockerz</a> 
     </div>
<div class="phone ">
<span class="ion-ios7-telephone"></span> 
      <a href="#">0118 999 7253</a> 
     </div>
<div class="email ">
<span class="ion-paper-airplane"></span>
      <a href="#">yudhadhesockerz@gmail.com</a>
     </div>
</div>
</div>
<div class="back">
</div>

  </div>
</section>
 <section class="tooltip">
  Hover over the card to see the back.

</section>
</code></pre>
<br />
Note:<br />
Ganti "<span style="color: red;">YD</span>" dengan logo anda sendiri<br />
ganti tanda "<span style="color: red;">#</span>" dengan Url<br />
<ul>
</ul>
<br />
Selamat Berkreasi

Membuat Halaman Business Card Simple dan Keren

Halaman Bussines Card adalah Halaman informasi bisnis tentang perusahaan atau individu mengenai Anda. dan kali ini Blog Mas-Yudha akan be...

+ Baca selengkapnya »

Membuat Iklan Teks Seperti Google AdSense

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-HIEU2_YkFzw/VInB97mnpII/AAAAAAAABos/pcFyawmz5L8/s1600/google%2Badsense.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="140" src="http://4.bp.blogspot.com/-HIEU2_YkFzw/VInB97mnpII/AAAAAAAABos/pcFyawmz5L8/s1600/google%2Badsense.png" width="320" /></a></div>
<a href="http://maseyudha.blogspot.com/2014/12/membuat-iklan-teks-seperti-google.html" target="_blank">Blog Mas-Yudha - Google AdSense</a> ? siapa sih yang tidak mengenal google adsense karna sebagian besar para penggemar blogger ataupun dunia internet pasti sudah mengenal salah satu advertising dari google dengan pembayaran yang cukup menarik yaitu dengan US Dollar $ untuk setiap reveralnya.<br />
<br />
Tapi .. kali ini saya tidak akan membahas tentang Google Adsense itu, tapi melainkan adalah iklan teks yang dimodifikasi mirip dengan aklan GA tersebut. kira-kira tampilannya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-x3FXqvZ4V1Y/VInN9rCHBSI/AAAAAAAABo8/FU-79HgPtz4/s1600/iklan.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-x3FXqvZ4V1Y/VInN9rCHBSI/AAAAAAAABo8/FU-79HgPtz4/s1600/iklan.png" /></a></div>
<br />
<div class="whitebuttondemo">
<a href="http://jsfiddle.net/MasYudha/yerLfLy6/1/embedded/result/" target="_blank">Demo</a><br />
<span class="up">click to view</span></div>
<br />
<b>Berikut langkah-langkah pemasangannya</b> :<br />
simpan kode dibawah ini dan letakkan diatas <button></head></button><br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"><script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/></code></pre>
<br />
lalu simpan script dibawah ini diatas kode <button>]]></b:skin></button> atau <button></style></button><br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css">/* Iklan Teks

----------------------------------------------- */

#iklan-teks {

width:304px;

height:259px;

background-color:white;

position:relative;

overflow:hidden;

margin:0 auto;

}

#iklan-teks h2.iklan-header {

cursor:pointer;

background-color:white;

background-image:none;

font:normal 20px Verdana, Tahoma,Serif;

color:blue;

border-top:1px solid #d8d8d8;

padding:10px;

margin:0 0;

position:relative;

text-transform:none;

letter-spacing:0;

}

#iklan-teks h2.iklan-header:first-child {

border-top:none;

}

#iklan-teks h2.active {

display: none;

}

#iklan-teks h2.iklan-header:before{

content:"";

width:0;

height:0;

position:absolute;

top:20px;

right:15px;

border:5px solid transparent;

border-color:#b2b2b2 transparent transparent;

}

#iklan-teks div {

height:100px;

padding:10px 70px 10px 10px;

font:normal 13px Verdana, Tahoma,Serif;

color:white;

border-top:1px solid #d8d8d8;

}

.judul {

font:normal 20px Verdana, Tahoma,Serif;

color:blue;

margin:0 0 5px 0;

}

a.judul{

font:normal 20px Verdana, Tahoma,Serif !important;

color:blue !important;

text-decoration:none;

display:inline-block;

}

a:hover.judul {

font:normal 20px Verdana, Tahoma,Serif !important;

color:blue;

text-decoration:underline;

}

.isi-iklan a{

font:normal 13px Verdana, Tahoma,Serif;

color:green;

text-decoration:none;

display:block;

margin-bottom:10px;

}

.isi-iklan a:hover{

color:green;

text-decoration:none;

}

.isi {

padding-top:15px;

color:#222;

text-align:left !important;

}

.panah-besar {

background: #4d90fe;

border-radius: 50%;

cursor: pointer;

height: 34px;

float: right;

margin-right: -60px;

margin-top: -40px;

width: 34px;

text-align: center;

line-height: 34px;

}

.panah-besar:hover {

background: #4472bd;

}

.info-icon {

width:15px;

height:15px;

position:absolute;

top:0;

right:0;

cursor:pointer;

}

.info-iklan {

background:#d3d3d3;

width:100px;

height:15px;

border-bottom-left-radius:4px;

position:absolute;

top:0;

right:0;

color:#000;

font:normal 11px Arial,Sans-Serif;

text-align:left;

overflow:hidden;

padding-right:19px;

padding-left:5px;

display:none;

}</code></pre>
<br />
terakhir simpan kode berikut sebagai <button>widget HTML/Javascript</button><br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <div id="iklan-teks">
    
    <div data-header="Blogger Tutorial" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='http://maseyudha.blogspot.com' target='_blank'>Blogger Tutorial</a>
            <a href='maseyudha.blogspot.com' target='_blank'>Blog Mas-Yudha</a>
        <span class='isi'>Share about internet, blogging, and seo tips.</span>
            <a class='panah-besar' href='maseyudha.blogspot.com' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cZHFJifESQNNoHwY7BEVBr50FdphsFm0kM6Ggh7sIb1VbA91TpDDs5Sg4f5BIuTdx-oV-kT7v7hyqEzeu7lmW6s931ZKTGvlmY6SgepLpaOaqjXLf2bTt6YyfvjsQKLgslkPlelzESo/s1600/icon_chevron_white.png'/></a>
        </span>
    </div>
    
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'>Blog Mas-Yudha</a>
            <span class='isi'>Pasang iklan Anda di sini, Harga Promo
            <a class='panah-besar' href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cZHFJifESQNNoHwY7BEVBr50FdphsFm0kM6Ggh7sIb1VbA91TpDDs5Sg4f5BIuTdx-oV-kT7v7hyqEzeu7lmW6s931ZKTGvlmY6SgepLpaOaqjXLf2bTt6YyfvjsQKLgslkPlelzESo/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'>Blog Mas-Yudha</a>
            <span class='isi'>Pasang iklan Anda di sini, Harga Promo
            <a class='panah-besar' href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cZHFJifESQNNoHwY7BEVBr50FdphsFm0kM6Ggh7sIb1VbA91TpDDs5Sg4f5BIuTdx-oV-kT7v7hyqEzeu7lmW6s931ZKTGvlmY6SgepLpaOaqjXLf2bTt6YyfvjsQKLgslkPlelzESo/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'>Blog Mas-Yudha</a>
        <span class='isi'>Pasang iklan Anda di sini, Harga Promo
            <a class='panah-besar' href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cZHFJifESQNNoHwY7BEVBr50FdphsFm0kM6Ggh7sIb1VbA91TpDDs5Sg4f5BIuTdx-oV-kT7v7hyqEzeu7lmW6s931ZKTGvlmY6SgepLpaOaqjXLf2bTt6YyfvjsQKLgslkPlelzESo/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    
    <span class='info-iklan'>Iklan oleh Yudhadhesockerz</span>
    <span class='info-icon'><a href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgODBRBSEzZAGKWjmqqSBFDTlbigEZbHgn2Aemj4mMr5MbZC03tqDkGyEeWqvD81gu1dmIGGQa59QOogutaPDqVvtdaT1bq53PsC9U4Az7qj2lCQfBNq8abzDy_htYx6KYf9QRDUGowpx8/s1600/info-iklan.png'/></a></span>     
</div>
 </code></pre>
terakhir silahkan edit judul dan link sobat<br />
<br />
Sekian !! bagaimana ? jika sobat masih bingung sobat bisa ajukan pertanyaan dikotak komentar dibawah

Membuat Iklan Teks Seperti Google AdSense

Blog Mas-Yudha - Google AdSense ? siapa sih yang tidak mengenal google adsense karna sebagian besar para penggemar blogger ataupun dunia ...

+ Baca selengkapnya »

Cara Membuat Icon Social Share dengan Tooltip

<span class="up">click to begin</span>

</div>
Malam ini saya akan berbagi kepada sobat bagaimana cara  menambahkan satu lagi Icon Social Share untuk blog sobat. Icon Social Share ini sedikit berbeda karena memiliki <a href="http://maseyudha.blogspot.com/2014/12/cara-membuat-icon-social-share-dengan.html" target="_blank">efek hover tooltip</a> di dalamnya. Widget ini terbuat dari CSS murni tanpa menggunakan gambar atau JavaScript.<br />
<br />
Konsep di balik widget ini cukup sederhana. Ada empat Icon Social Share di mana sobat dapat menambahkan URL yang sobat inginkan sendiri. Orang dapat melihat tooltip muncul dengan bantuan transisi dan transformasi CSS. Ikon-ikon ini benar-benar eye-catching dan memiliki tampilan yang menarik.<br />
<br />
Menambahkan HTML / CSS di Template sobat.<br />
<br />
Untuk menambahkan widget ini terlebih dahulu masuk ke Blogger → Tata Letak → Tambah Widget → HTML / JavaScript dan paste kode dalam kotak di bawah.<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"><div class="container">

<li>

<span class="tooltip">Follow</span>

</a>

</li>

<li>

<span class="tooltip">Circle us</span>

</a>

</li>

<li>

</a>

</li>

<li>

<span class="tooltip">Subscribe</span>

</a>

</li>

</ul>

</div></code></pre>
<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css"><style>

@charset "utf-8";

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */

[class*="zocial-"]:before {

font-family: 'zocial', sans-serif;

}

/* ---------- GENERAL ---------- */

a { text-decoration: none; }

ul {

list-style: none;

margin: 0;

padding: 0;

}

.clearfix { *zoom: 1; }

.clearfix:before, .clearfix:after {

content: "";

display: table; }

.clearfix:after { clear: both; }

.container {

display: block;

height: 64px;

position: relative;

width: 256px;

}

/* ---------- Action Bar ---------- */

.action-bar li {

float: left;

}

.action-bar a {

-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);

box-shadow: inset 0 -2px rgba(0, 0, 0, .5);

color: #e7e7e7;

display: block;

font-size: 32px;

height: 64px;

line-height: 64px;

position: relative;

text-align: center;

-webkit-transition: background .3s;

-moz-transition: background .3s;

-ms-transition: background .3s;

-o-transition: background .3s;

transition: background .3s;

width: 64px;

}

.action-bar a:hover .tooltip {

margin-top: 16px;

opacity: 1;

}

.tooltip {

border-radius: 3px;

font-size: 14px;

height: 28px;

left: 50%;

line-height: 28px;

margin: 0 0 0 -50px;

opacity: 0;

position: absolute;

top: 100%;

-webkit-transition: margin-top .3s, opacity .3s;

-moz-transition: margin-top .3s, opacity .3s;

-ms-transition: margin-top .3s, opacity .3s;

-o-transition: margin-top .3s, opacity .3s;

transition: margin-top .3s, opacity .3s;

width: 100px;

}

.tooltip:before {

content: "";

height: 8px;

left: 50%;

margin: -4px 0 0 -4px;

position: absolute;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

width: 8px;

}

.like,

.like .tooltip,

.like .tooltip:before { background: #65B1F8; }

.like:hover { background: #65B1F8; }

.favourite,

.favourite .tooltip,

.favourite .tooltip:before { background: #c93037; }

.favourite:hover { background: #b02b32; }

.comment,

.comment .tooltip,

.comment .tooltip:before { background: #43438e; }

.comment:hover { background: #393978; }

.share,

.share .tooltip,

.share .tooltip:before { background: #FF8000; }

.share:hover { background: #FF8000; }

</style></code></pre>
<br />
Ganti <button>USERNAME</button> pada code html dengan URL yang sobat inginkan dan <button>BLOG-SOBAT</button> dengan URL blog yang di tuju<br />
<br />
Selamat Mencoba

Cara Membuat Icon Social Share dengan Tooltip

Demo click to begin Malam ini saya akan berbagi kepada sobat bagaimana cara menambahkan satu lagi Icon Social Share untu...

+ Baca selengkapnya »

Membuat Tombol Demo dan Download Keren

<a href="http://maseyudha.blogspot.com/2014/12/membuat-tombol-demo-dan-download-keren.html" target="_blank">Cara membuat Tombol Demo dan Download Keren</a> - Kali ini saya akan berbagi tips bagaimana Cara Memasang Tombol/Button Demo ataupun Download seperti yang digunakan blog ini, Cukup mudah kok,,anda hanya perlu menambahkan kode CSS dan HTML di bawah ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-M8Z82oNbVY4/VHygdlolDMI/AAAAAAAABjU/eeh1h2hdSx4/s1600/Simple%2BButton%2BDemo%2Bdan%2BDownload.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="169" src="http://1.bp.blogspot.com/-M8Z82oNbVY4/VHygdlolDMI/AAAAAAAABjU/eeh1h2hdSx4/s1600/Simple%2BButton%2BDemo%2Bdan%2BDownload.png" width="320" /></a></div>
<br />
Sebelumnya anda sudah memasang font awesome pada template, jika belum silahkan tambahkan link dibawah ini sebelum <button></head></button><br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> 
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/></code></pre>
<br />
Buka Template > Edit HTML > Terapkan kode di bawah ini sebelum <button></style></button><br />
<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css"> 
.whitebutton {

margin: 20px auto;

padding: 20px 0;

width: 200px;

}

.whitebutton a {

background: #fff;

color: #666;

display: block;

font-size: 17px;

font-weight: 700;

font-family: 'Arial',Verdana,sans-serif;

height: 50px;

line-height: 50px;

text-align: center;

text-decoration: none;

text-transform: uppercase;

width: 200px;

position: relative;

z-index: 2;

}

.whitebutton a:before {

content: '\f019';

font-family: FontAwesome;

font-weight: normal;

padding: 8px;

margin-left: -12px;

margin-right: 6px;

}

.whitebutton span {

background: #444;

color: #fff;

display: block;

font-size: 12px;

font-family: 'Arial', Verdana,sans-serif;

height: 40px;

line-height: 40px;

text-align: center;

width: 200px;

z-index: 1;

text-transform: uppercase;

font-weight: bold;

}

.whitebutton .up {

background: #e25734;

margin: -25px auto;

opacity: 0;

border-radius: 0 0 5px 5px;

transform: translate(0,-50px);

transition: 350ms;

}

.whitebutton .down {

margin: -30px auto;

opacity: 0;

border-radius: 5px 5px 0 0;

transform: translate(0,-50px);

transition: 350ms;

}

.whitebutton .down:before {

content:'\f14a';

font-family: FontAwesome;

font-weight: normal;

margin-right: 6px;

color: #aaa;

}

.whitebutton:hover .up {

opacity: 1;

transform: translate(0,0);

}

.whitebutton:hover .down {

opacity: 1;

transform: translate(0,-90px);

}

.whitebuttondemo {

margin: 20px auto;

padding: 20px 0;

width: 200px;

}

.whitebuttondemo a {

background: #e25734;

color: #fff;

display: block;

font-size: 17px;

font-weight: 700;

font-family:'Arial',Verdana,sans-serif;

height: 50px;

line-height: 50px;

text-align: center;

text-decoration: none;

text-transform: uppercase;

width: 200px;

position: relative;

z-index: 2;

transition: 350ms;

}

.whitebuttondemo a:before {

content:'\f002';

font-family: FontAwesome;

font-weight: normal;

padding: 8px;

margin-left: -12px;

margin-right: 6px;

}

.whitebuttondemo a:hover {

color: #fff;

}

.whitebuttondemo span {

background: #444;

color: #fff;

display: block;

font-size: 12px;

font-family: 'Arial', Verdana,sans-serif;

height: 40px;

line-height: 40px;

text-align: center;

width: 200px;

z-index: 1;

text-transform: uppercase;

font-weight: bold;

}

.whitebuttondemo .up {

background: #444;

margin: -25px auto;

opacity: 0;

border-radius: 0 0 5px 5px;

transform: translate(0,-50px);

transition: 350ms;

}

.whitebuttondemo:hover .up {

opacity: 1;

transform: translate(0,0);

}</code></pre>
<br />
<br />
<br />
1. Bagi yang menggunakan <button>Gunakan tag <br></button><br />
<br />
Terapkan HTML berikut di postingan pada tab <button>HTML</button> (bukan compose)<br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> 
<div class="whitebuttondemo">

<span class="up">click to view</span></div>

<br>

<a href="#" target="_blank">Download</a><br>

<span class="up">click to begin</span><br>

<span class="down">1.6MB .rar</span></div></code></pre>
<br />
2. Bagi yang menggunakan <button>Tekan "Enter" untuk baris baru</button><br />
<br />
Terapkan HTML berikut di postingan pada tab <button>HTML </button>(bukan compose)<br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> 
<div class="whitebuttondemo">

<span class="up">click to begin</span>

</div>

<a href="#">Download</a>

<span class="up">click to begin</span>

</div></code></pre>
<br />
Kemudian isikan link tautan anda pada kode yang saya tandai "#", selesai.<br />
<br />
<div style="text-align: center;">
<b>Hasilnya akan tampil seperti di bawah ini</b></div>
<div class="whitebuttondemo">
<a href="https://www.blogger.com/blogger.g?blogID=3535554213633977957#" target="_blank">Demo</a><br />
<span class="up">click untuk Melihat</span></div>
<br />
<div class="whitebutton">
<a href="https://www.blogger.com/blogger.g?blogID=3535554213633977957#" target="_blank">Download</a><br />
<span class="up">click untuk Mulai</span><br />
<span class="down">5.3MB .rar</span></div>
Cukup mudah bukan, silahkan dikreasikan kembali dan selamat mencoba.

Membuat Tombol Demo dan Download Keren

Cara membuat Tombol Demo dan Download Keren - Kali ini saya akan berbagi tips bagaimana Cara Memasang Tombol/Button Demo ataupun Download s...

+ Baca selengkapnya »

Memasang Prism Syntax Highlighter di Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-J3r1kBuZ2Ao/VHmMDKa1HuI/AAAAAAAABi0/9LJLiVawtAo/s1600/Memasang%2BPrism%2BSyntax%2BHighlighter%2Bdi%2BBlogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="314" src="http://3.bp.blogspot.com/-J3r1kBuZ2Ao/VHmMDKa1HuI/AAAAAAAABi0/9LJLiVawtAo/s1600/Memasang%2BPrism%2BSyntax%2BHighlighter%2Bdi%2BBlogger.png" width="320" /></a></div>
<a href="http://maseyudha.blogspot.com/2014/11/memasang-prism-syntax-highlighter-di.html" target="_blank">Memasang Prism Syntax Highlighter di Blogger</a> - Bagi Anda yang sering berbagi tutorial tentunya sudah tidak asing lagi dengan istilah Syntax Highlighter.<br />
<br />
Syntax Highlighter ini pertama kali saya lihat di blog Arlina design Tempatnya Berbagi Template dan Tips Seputar Blogger dan kini saya telah menerapkan kode tersebut sebagai fitur pendukung blog ini.<br />
<br />
Ok langsung saja, silahkan buka Blogger > Template > Edit HTML > Kemudian salin dan terapkan kode di bawah ini sebelum <button></style></button><br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css">/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}</code></pre>
<br />
Setelah itu simpan 3 kode di bawah ini tepat sebelum <button></body></button> atau <button></head></button><br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"><script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/></code></pre>
<br />
<br />
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript"><script>

$('pre').attr('class', 'line-numbers');

Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})

</script></code></pre>
<br />
<br />
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript">
<script type='text/javascript'>

var pres = document.getElementsByTagName(&quot;pre&quot;);

for (var i = 0; i &lt; pres.length; i++) {

pres[i].addEventListener(&quot;dblclick&quot;, function () {

var selection = getSelection();

var range = document.createRange();

range.selectNodeContents(this);

selection.removeAllRanges();

selection.addRange(range);

}, false);

}

</script></code></pre>
<br />
<br />
Simpan template.<br />
<br />
<br />
Selanjutnya saat Anda membuat post baru, terapkan kode pemanggil di bawah ini pada postingan (Tab HTML)<br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"><pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>

<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre></code></pre>
<span style="font-size: x-small;">source : http://arlinadesign.blogspot.com/2014/11/memasang-prism-syntax-highlighter-di-blogger.html</span>

Memasang Prism Syntax Highlighter di Blogger

Memasang Prism Syntax Highlighter di Blogger - Bagi Anda yang sering berbagi tutorial tentunya sudah tidak asing lagi dengan istilah Synt...

+ Baca selengkapnya »

Cara Mudah Membuat Widget Daftar Isi (Plus Scroll) di Blog

<a href="http://maseyudha.blogspot.com/2014/11/cara-mudah-membuat-widget-daftar-isi.html" target="_blank"> Cara Mudah Membuat widget Daftar Isi (Plus Scroll) di Blog</a> –  kali ini saya akan berbagi bagaimana cara membuat daftar isi atau daftar artikel/post di sidebar blog. Keunggulan dari widget daftar isi ini adalah adanya scroll bar, yang membuat tampilan daftar isi ini menjadi lebih rapi. Tentu saja, dengan adanya widget ini, pengunjung dapat dengan mudah menjelajahi isi blog Anda, termasuk membuka – buka posting lama, dan efeknya page view blog akan meningkat.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/--cBX4mDTE3I/VFUKTDxfYyI/AAAAAAAABb0/DMMtoM-CDDI/s1600/daftar%2Bisi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/--cBX4mDTE3I/VFUKTDxfYyI/AAAAAAAABb0/DMMtoM-CDDI/s1600/daftar%2Bisi.png" width="286" /></a></div>
Oke, langsung saja. Berikut ini cara memasang / membuat daftar isi (plus scroll) di blog.<br />
1.    Login ke akun Blogger Anda, lalu klik Tata Letak -> Tambahkan Gadget -> HTML Javascript.<br />
2.    Pastekan script berikut, dan isikan judul sesuai dengan keinginan Anda pada kolom Judul.<br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"> <div style="border: 0px solid rgb(0, 0, 0); height: 300px; overflow: auto;">

</script>

var numposts = 1000;

var showpostdate = false;

var showpostsummary = false;

var numchars = 100;

var standardstyling = true;

var shownumposts = true;

</script>

</script></div>

<a href="http://maseyudha.blogspot.com" style="color: black;" target="_blank">Tips SEO + Blog</a></div></code></pre>
3.    Terakhir, klik Simpan, dan lihat hasilnya.

Selamat mencoba! jangan lupa untuk meninggalkan komentar pada kolom komentar. Terima kasih, dan salam Blogger!

Cara Mudah Membuat Widget Daftar Isi (Plus Scroll) di Blog

Cara Mudah Membuat widget Daftar Isi (Plus Scroll) di Blog – kali ini saya akan berbagi bagaimana cara membuat daftar isi atau daftar art...

+ Baca selengkapnya »

Widget Artikel Terbaru Super Ringan

<a href="http://maseyudha.blogspot.com/2014/10/widget-artikel-terbaru-atau-sering.html" target="_blank">Widget Artikel Terbaru</a> atau sering disebut juga <a href="http://maseyudha.blogspot.com/">Recent Post</a> adalah widget yang menampilkan postingan kita yang baru, yah namanya saja artikel terbaru masak mau menampilkan posting yang lama. :P<br />
Sebenarnya saya juga pernah share artikel yang serupa yaitu mengenai Recent Post dengan menu navigasi, namun sepertinya widget tersebut sedikit berat untuk dipasang pada blog, dan kalau yang ini sudah sangat pasti responsive.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-adnkmU2Rcy8/VE5fCy1gZXI/AAAAAAAABZw/2zHxC9vx_m0/s1600/artikel-terbaru.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-adnkmU2Rcy8/VE5fCy1gZXI/AAAAAAAABZw/2zHxC9vx_m0/s1600/artikel-terbaru.png" width="274" /></a></div>
<br />
<span style="font-size: large;"><b>Cara Memasang Widget Artikel Terbaru</b></span><br />
1. Masuk ke Tata Letak => add gadget => HTML/JavaScript.<br />
2. Copy semua kode dibawah ini ke kolom yang tersedia, beri judul terserah saja. :)<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css"><style type='text/css' scoped='scoped'>

#recent-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

</style></code></pre>
<br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"><div id='recent-posts'>
<script type='text/javaScript'>

var rcp_numposts=5;

var rcp_snippet_length=150;

var rcp_info='yes';

var rcp_comment='Comments';

var rcp_disable='T?t Nh?n xét';

</script>

</div></code></pre>
<br />
3.Simpan Template.

Widget Artikel Terbaru Super Ringan

Widget Artikel Terbaru atau sering disebut juga Recent Post adalah widget yang menampilkan postingan kita yang baru, yah namanya saja arti...

+ Baca selengkapnya »

Cara Membuat Random Post Bergerak Ala Mas-Yudha

Kali ini saya akan share tentang<a href="http://maseyudha.blogspot.com/2014/10/cara-membuat-random-post-bergerak-ala.html" target="_blank"> cara membuat random post bergerak</a> pada sidebar blog Sobat,,dengan menambahkan Widget Random Post tentu saja akan memudahkan pengunjung untuk menemukan Artikel kita,,terlebih lagi kalau widget tersebut dibuat bergerak tentunya akan semakin menarik untuk dilihat Contohnya seperti dibawah ini<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-qnGkQbyuy3k/VEKXuCxlg7I/AAAAAAAABUM/hvPLEnfnEko/s1600/random.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-qnGkQbyuy3k/VEKXuCxlg7I/AAAAAAAABUM/hvPLEnfnEko/s1600/random.png" width="308" /></a></div>
<br />
<b>Langkah-langkah membuat random post bergerak :</b><br />
<br />
<ol>
<li>Login ke blogger</li>
<li>Pilih Rancangan kemudian Tambah Gadget</li>
<li>Pilih HTML/JavaScript</li>
<li>Masukan Semua kode HTML dibawah</li>
</ol>
<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css">
<div style="margin-bottom: 15px;">

#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}

#rp_plus_img ul{list-style-type:none;margin:0;padding:0}

#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}

#rp_plus_img li{height:70px;padding:1px;list-style:none;}

#rp_plus_img a{color:#3366ff;}

#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:14px;}

#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#282828;text-align:justify;}

#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}

</style></code></pre>
<br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

var speed = <span style="background-color: blue;">450</span>;

var pause = <span style="background-color: red;">4000</span>;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

var numposts = <span style="background-color: magenta;">30</span>;

var numchars = 60;

</script>

</ul>

</div></code></pre>
Catatan :<br />
<br />
*. Kode <button>var speed</button> adalah kecepatan untuk berpindahnya post ke post lain, sobat bisa ganti nomornya sesuai dengan keinginan sobat.<br />
*. Kode <button>var Pause</button> adalah waktu berhentinya post/di pause.., sama seperti diatas sobat bisa merubahnya sesuai dengan keinginan sobat.<br />
*. Kode <button>var numposts</button> adalah jumlah post yang akan di tampilkan di recent post. sobat bisa mengubahnya sesuka hati..<br />
<br />
5.Kemudian tinggal di save dan sobat lihat hasilnya..