Rabu, 31 Juli 2013

tutorial bar "top kontak" di majakaniaceh.com

kalau anda berkunjung kesitus majakaniaceh.com, maka anda akan melihat ada bar khusus yang berisikan kontak, whatsapp, sms, bbm, dan email cs majakaniaceh.com, mari kita sebut saja bar "top kontak".

bar top kontak dibuat untuk memudahkan pengunjung situs untuk melihat kontak pemilik toko. karna pada template/theme jejualan sendiri informasi kontak berada dibawah kiri, sehingga kurang terlihat, maka dengan bantuan top kontak ini pengunjung anda lebih terbantu mencari kontak situs anda tanpa susah2,,

jika anda berminat untuk membuat top kontak ini, silahkan ikuti tutorial berikut ini;

1. Login ke admin panel situs jejualan anda.
2. klik konfigurasi, >> tampilan, dan pilih "template editor"
3. klik "selecet file" pilih "style.css"

temukan kode dibawah ini,, (biasanya dibagian paling atas)

body {


sematkan kode dibawah ini diantara{  }  ,, atau edit kode padding yang sudah ada di file css anda.

padding-top: 30px;

sehingga akan terlihat seperti ini:

body {
padding-top: 30px;

kemudian,,

letakkan kode dibawahini  di file style.css anda.. tarok saja di baris kode paling bawah,, 

#topcs {position:fixed;height:30px;top:0px;width:960px;background: #FAFEED;border-bottom:1px dashed #C2CD43;z-index: 99999;}.topbar {width:900px;margin-left:30px;color:#595959;font-weight:bold ;}.bg {background-image: url(http://majakaniaceh.com/userfiles/4/0/13540/themes/bening/assets/topcs.png);background-repeat: no-repeat;}.closebar img:hover{opacity:0.5;cursor: pointer;}.closebar img:active{top:9px;}

keterangan: 
#FAFEED = kode warna background.. sesuaikan dengan thema anda
#C2CD43 = garis pembatas top kontak bar,, sesuaikan dengan thema anda.
(untuk melihat kode warna, silahkan search digoogle, dengan kata kunci "kode warna html")

Kemudian save file style css anda (klik tombol save di pojok atas)

setelah itu pilih lagi "select file" , pilih file "menu-top.html"

masukan kode dibawah ini, diatas kode2 yg terdapat di file menu-top.html



<div id="topcs">

<div class="topbar">

<table width="900" height="30" border="0" cellpadding="0" cellspacing="0">

  <tr>
    <td class="bg" style="background-position: 0px 1px; width: 25px; height: 25px" >&nbsp;</td>
    <td width="185">Whatsapp : 087792493231</td>
    <td class="bg" style="background-position: 0px -32px; width: 25px; height: 25px" >&nbsp;</td>
    <td width="185">SMS Center : 085761808008</td>
    <td class="bg" style="background-position: 0px -67px; width: 25px; height: 25px" >&nbsp;</td>
    <td width="185">BB Messenger : 29F004BC</td>
    <td class="bg" style="background-position: 0px -103px; width: 25px; height: 25px; background-repeat: no-repeat;" >&nbsp;</td>
    <td width="185">majakaniaceh@yahoo.co.id</td>
     <td><div class="closebar"><img src="http://majakaniaceh.com/userfiles/4/0/13540/themes/bening/assets/close.png" id="remove-bar" height="21" width="22" onclick="javascript:removeCookie()" /
     /></div></td>
  </tr>
</table>
</div>
</div>


keterangan: ubah tulisan berwarna biru, sesuaikan dengan informasi anda.
kemudian klik save,

langkah terakhir,,

pilih select file >> layout.html
kemudian masukkan  kode dibawah ini,, sebelum kode </head>, pada file layout.html anda

<script type="text/javascript">
function removeCookie(){
    var name = '';
$('#topcs').slideUp(400).remove();
$('body').css('paddingTop','0');
}
</script>

kemudian klik save,

coba lihat toko online anda

lakukan dengan hati2,, tidak ada kode2 yg dihapus disini, jangan sampai ada kode yg terhapus,,  kesalahan tanggung sendiri ya :D


klo ragu silahkan ditanya,, 

4 komentar:

  1. nice info...
    tapi bagian yg ini "...{background-image: url(http://majakaniaceh.com/userfiles/4/0/13540/themes/bening/assets/topcs.png)..." perlu diganti gak mas..?

    BalasHapus
  2. itu letak filenya, gak perlu diganti, klo diganti nanti filenya tidak muncul,
    klo mau ganti, upload dulu filenya, trus ganti alamat file diatas tadi sama alamat file yang baru diupload.. klo gak mau ribet pakai saja alamat diatas. :D

    BalasHapus
  3. thanks bro :D udah sukses
    btw ane pake themes langit biru kok kotak searchnya ilang yah? tau cara munculin lg gak bro?

    sama kalau mau bikin kotak artikel kaya masbro + flying box fb gmn yah?

    BalasHapus
  4. @kios Baju Korea;

    btw theme langit biru tanpa modif, apa search boxnya muncul sendiri? atau memang di disablekan dari sananya?

    klo hilang karna salah edit coba dibandingkan sama kode theme bening, karna mirip2, (bandingkan file yang udah diedit aja)

    kotak artikel dan flying box nanti saya buat tutornya ya,
    flying box saya belum jadi tuh, karna gak ada photoshop, jadi gambarnya masih kosong. hehehe

    artikel dikit didepan itu sebenernya buat seo mas, karna halaman depan majakani kurang kata-kata,, jadi saya buat sedikit pengantar dan list artikel disana,,

    BalasHapus