Cara Membuat Jumlah Harga Di Samping Post

Bagikan :

Tweet

Hai Sobat, kali ini saya akan share " Cara Membuat Jumlah Harga Di Samping Post ". Cara ini cocok bagi anda yang ingin membuat harga template / barang lainnya dengan mudah.
Mau tau caranya... Langsung Ke Tutorialnya...

Cara Membuat Jumlah Harga Di Samping Post

1. Masuk Ke Beranda Blogger > Template > Edit HTML

2. Cari Kode <div id='sidebar-wrapper Atau <aside id='sidebar-wrapper' Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F

3. Masukkan Kode Di Bawah Ini Di Atas Kode <div id='sidebar-wrapper Atau <aside id='sidebar-wrapper'

<a name='details'/>
<div class='clear'/>

4. Kemudian Cari Kode ]]></b:skin>, Letakkan Kode Di Bawah Ini Di Atas Kode ]]></b:skin>

/* CSS StoreStyle Cak Yit */
#store-style{overflow:hidden;font-family:'Open Sans',sans-serif;background:#fff;border:1px solid #ddd;padding:25px 10px 10px;margin-bottom:20px}
#store-style .storebutton{background:#07ACEC;color:#fff;font-weight:bold;border-radius:3px;text-align:center;transition:all .4s ease-in-out;position:relative}.rio-ss{padding-top:15px;overflow:hidden}.idb{line-height:1.5;padding:25px 0 5px}
#store-style .storebutton:hover{background:#333;color:#fff}.but1{padding:10px 95px}.but2{padding:10px 84px}
.storelist{padding:12px 10px;border-bottom:1px solid #ddd;width:100%;float:left}
.storelist:last-child{border-bottom:none}
.storelist:before{content:"\f05d";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:400;padding:5px}

5. Kemudian Cari Kode </head>, Letakkan Kode Di Bawah Ini Di Atas Kode </head>

<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){ 
$('a[name="details"]').before($('#Theme-details').html()); 
$('#Theme-details').html(''); 
}); 
/*]]>*/
</script>

6. Klik Simpan

Cara Menerapkan

1. Masuk Ke Beranda Blogger > Buat Entri
2. Pilih Mode HTML
3. Masukkan Kode Di Bawah Ini Ke Dalam Kotak Yang Sudah Disediakan

<div style="display:none">
<div id="Theme-details">
<div id="store-style">
<center><a class="storebutton but1" href="#LINK-DEMO" target="_blank">Live Preview</a></center>
<div class="rio-ss idb">
See it live with all the features that exist, both on the homepage and the page posts.</div>
</div>
<div id="store-style">
<center><a class="storebutton but2" href="#LINK-PURCHASE" target="_blank">$5.20 - Buy Now</a></center>
<div class="rio-ss">
<span class="storelist">Support Template Update</span>
<span class="storelist">Remove Footer Credits</span>
<span class="storelist">For Unlimited Domains</span>
<span class="storelist">No Encrypted Scripts</span>
<span class="storelist">Support Color Change</span>
<span class="storelist">And Much More...</span>
</div>
</div>
<div style="clear:both">
</div>
</div>
</div>

4. Klik Publikasikan

Tag : CSS, HTML, Javascript, Tutorial Blog, Widget