Membuat Tampilan Demo & Download Menarik plus Spoiler di Posting Blog

Baca Juga

Membuat Tampilan Demo & Download Menarik plus Spoiler di Posting Blog. Membuat Tampilan Demo & Download Menarik plus Spoiler di Posting Blog

Membuat Tampilan Demo & Download Menarik plus Spoiler di Posting Blog. Membuat Tampilan Demo & Download Menarik plus Spoiler di Posting Blog

Membuat Tampilan Demo & Download Menarik plus Spoiler di Posting Blog

Membuat Tampilan Demo & Download Menarik plus Spoiler di Posting BlogMembuat Tampilan Demo & Download Menarik plus Spoiler di Posting BlogMembuat Tampilan Demo & Download Menarik plus Spoiler di Posting Blog.

KODE CSS
Simpan di atas kode ]]</b:skin> atau </style>

SPOILER
<!-- CSS DEMO DOWNLOD -->
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download {padding:8px 12px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:&#39;Open Sans&#39;,sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;transition:all 0.3s ease-out;}
.demo {background-color:#555;}
.download {background-color:#fd554c;}
.demo:hover {background-color:#444;color:#fff;}
.download:hover {background-color:#df4840;color:#fff;}
button{font-size:100%;line-height:normal;vertical-align:baseline;}

SPOILER
<!-- CSS SPOILER -->
#flippy {text-align:center;}
#flippy button {margin:10px auto;cursor:pointer;font-weight:700;font-family:&#39;Open Sans&#39;,sans-serif;background-color:#555;color:#fff;padding:8px 12px!important;text-transform:uppercase;border:none;border-radius:3px;transition:all 0.3s ease-out;}
#flippy button:hover, #flippy button:focus {outline:none;background-color:#444;color:#fff;}
#flippanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e6e6e6;}
#flippanel {padding:24px;display:none;}
#flippanel img {background:#fff;margin:10px auto;}

Cara Menerapkan di Posting
1. MODE HTML
2. Masukkan KODE

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://cbgallery.blogspot.com/" target="_blank">DEMO</a></li>
<li><a class="download" href="http://cbgallery.blogspot.com/" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>

HASILNYA

• DEMO
• DOWNLOAD

MEMBUAT SPOILER

KODE

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

HASILNYA

.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;} .button ul {margin:0;padding:0} .button li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download {padding:8px 12px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;transition:all 0.3s ease-out;} .demo {background-color:#555;} .download {background-color:#fd554c;} .demo:hover {background-color:#444;color:#fff;} .download:hover {background-color:#df4840;color:#fff;} button{font-size:100%;line-height:normal;vertical-align:baseline;} #flippy {text-align:center;} #flippy button {margin:10px auto;cursor:pointer;font-weight:700;font-family:'Open Sans',sans-serif;background-color:#555;color:#fff;padding:8px 12px!important;text-transform:uppercase;border:none;border-radius:3px;transition:all 0.3s ease-out;} #flippy button:hover, #flippy button:focus {outline:none;background-color:#444;color:#fff;} #flippanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e6e6e6;} #flippanel {padding:24px;display:none;} #flippanel img {background:#fff;margin:10px auto;}

Membuat Tampilan Demo & Download Menarik plus Spoiler di Posting Blog. Membuat Tampilan Demo & Download Menarik plus Spoiler di Posting BlogMembuat Tampilan Demo & Download Menarik plus Spoiler di Posting Blog