Senin, 12 September 2016

Cara Membuat Widget Iklan Dengan Fungsi Refresh

Halo Sobat blogger!! kali ini Laros akan berbagi tutorial tentang Cara Membuat Widget Iklan Dengan Fungsi Refresh

Tutorial  berhubungan dengan widget kotak iklan yang biasa sobat pasang dengan HTML. Pada tutorial ini Laros akan memberikan tutorial cara memasang kotak iklan dengan metode Javascript yang ringan untuk blog.


Cara kerja kerja dari script widget ini mirip dengan scrip google adsense. Yaitu banner iklan akan muncul bergantian secara otomatis ke banner lainnya setelah sobat memuat ulang/merefresh halaman. Dalam kode ini Laros menyediakan 3 penempatan banner yang nantinya bisa sobat tambahkan sendiri sesuai kebutuhan.

Berikut tutorial tentang Cara Membuat Widget Iklan Dengan Fungsi Refresh

1. Login ke Blogger > Tata Letak > Buat Widget baru kemudian tambahkan kode ini pada widget baru tersebut.

<script type="text/javascript">
var arldgzn_id = 3;
var arldgzn_now = new Date()
var detik = arldgzn_now.getSeconds()
var arldgzn_place = detik % arldgzn_id;
arldgzn_place += 1;
if (arldgzn_place == 1) {
url = "LINK TUJUAN";
alt = "DESKRIPSI IKLAN";
title = "JUDUL IKLAN";
banner = "BANNER IKLAN";
width = "300";
height = "250";
}
if (arldgzn_place == 2) {
url = "LINK TUJUAN";
alt = "DESKRIPSI IKLAN";
title = "JUDUL IKLAN";
banner = "BANNER IKLAN";
width = "300";
height = "250";
}
if (arldgzn_place == 3) {
url = "LINK TUJUAN";
alt = "DESKRIPSI IKLAN";
title = "JUDUL IKLAN";
banner = "BANNER IKLAN";
width = "300";
height = "250";
}
document.write('<a href=\"' + url + '\" target=\"_blank\" rel=\"nofollow\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('title=\"' + title + '\" alt=\"' + alt + '\"></a>');
</script>
Silahkan isi dengan keterangan sobat. Untuk menambah banner silahkan tambahkan kode dibawah ini didalam kode diatas.
Misal Laros akan menambahkan kode banner menjadi empat
Ganti Code var arldgzn_id = 3; dengan arldgzn_id = 4;

var arldgzn_id = 4;

if (arldgzn_place == 4) {
url = "LINK TUJUAN";
alt = "DESKRIPSI IKLAN";
title = "JUDUL IKLAN";
banner = "BANNER IKLAN";
width = "300";
height = "250";
}
Untuk mengganti ukuran banner, silahkan tentukan ukuran width = "300"; dan height = "250"; pada kode diatas sesuai kebutuhan.
 
2. Simpan widget dan lihat hasilnya
Cukup mudah bukan? Demikian tutorial tentang Cara Membuat Widget Iklan Dengan Fungsi Refresh pada blog ini. Semoga bermanfaat



Referensi: http://www.arlinadzgn.com/2015/10/memasang.widget.kotak.iklan.dengan.fungsi.refresh.html


Read More

Mohon Review Tampilan Logo Baru dari Situs Kami

Halo sobat Laros mungkin beberapa saat yang lalu blog ini adalah blog wisata dan mungkin anda juga sempat kaget kenapa dari blog wisata kok bisa berpindah ke blog Design? bukannya saya tidak mau posting lagi tentang destinasi wisata di blog ini karena menurut saya domain ini cocoknya untuk blog pribadi dan jika digunakan untuk blog wisata saya rasa kurang cocok dan pada akhirnya semua konten wisata yang ada di blog ini saya pindahkan ke cafewisata,com mungkin demain cafewisata.com lebih relefan jika digunakan untuk blog wisata.

Oh iya gaesss sampek lupa, tujuan posting saya kali ini hanya sekedar memberitahukan kepada anda jika saya baru saja membuat logo untuk blog ini karena menurut saya logo adalah salah satu identitas dari blog ini, sedangkan penampakan logonya sendiri kalian bisa lihat di nav bar. 

Munngkin jika berkenan saya mau minta penilaian pembaca sekalian, kira - kira berapa nilai dari logo buatan saya ini, untuk memberikan penilaian anda bisa tulis di Komentar. Dan untuk penilaiannya sebelumnya saya ucapkan terima kasih.


Read More

Minggu, 11 September 2016

Cara Membuat Flat Button Demo dan Download


Halo sobat Laros, selamat merayakan hari raya Idul Adha ya buat semua pembaca yang beragama muslim semoga di hari raya ini kita senantiasa diberikan rahmat dan hidayahnya. amiiin..

Oh iya dalam kesempatan kali ini saya akan berbagi tips tentang Cara Membuat Flat Button Demo dan Download pada blogger. Oke langsung aja ya.

Memasang Flat Button Demo dan Download seperti yang ada di blog ini sangatlah mudah, anda cukup menambahkan kode CSS dan HTML dibawah ini:

Sebelumnya anda seharusnya anda sudah memasang Font Awesom pada template yang anda gunakan, jika belum silahkan link dibawah ini sebelum </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Buka Template > Edit HTML > Terapkan kode dibawah ini sebelum </style>

/* CSS Button Laros */
.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);
}
1. Bagi yang menggunakan tag <br>
Terapkan kode HTML berikut dipostingan pada tab HTML (bukan compose)

<div class="whitebuttondemo">
<a href="http://laros.web.id" target="_blank">Demo</a><br>
<span class="up">click to view</span></div>
<br>
<div class="whitebutton">
<a href="http://laros.web.id" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">1.6MB .rar</span></div>
2. Bagi yang menggunakan tekan "Enter" untuk baris baru
Terapkan kode HTML berikut dipostingan pada tab HTML (bukan compose)

<div class="whitebuttondemo">
<a href="http://laros.web.id">Demo</a>
<span class="up">click to begin</span>
</div>

<div class="whitebutton">
<a href="http://laros.web.id">Download</a>
<span class="up">click to begin</span>
<span class="down">1.6MB .rar</span>
</div>
Lalu isikan link tautan anda pada kode yang saya tandai warna merah,   Selesai

Demikian tips dari saya tentang Cara Membuat Flat Button Demo dan Download, semoga bermanfaat :)
Read More

Cara Membuat Flat Multi Tab Sidebar Responsive

Hai all,
Dalam kesempatan kali ini saya akan share Cara Membuat Flat Multi Tab Sidebar Responsive di blogger /blogspot. multi tab maksudnya widget atau isi sidebar blog berupa tabber yang berisi tiga widget, misalnya Popular Post, Latest Post, dan Label, yang sejajar dalam satu space.

Tabber ini menghemat sidebar sehingga lebih efektif dan user friendly, tidak memanjang ke bawah. dan dibawah ini adalah steep by steepnya:

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


/* Multi Tab Laros */
#sidebar-tab h2{display:none;}
#select-tab{margin:0 auto 10px}
#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:53px;display:block;background-color:#425967;color:white;font-size:15px;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#E74C3C}
#sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0}
#sidebar-main{overflow:hidden}

2. KODE HTML
Simpan di bawah kode
<aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>


<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Posts</a></li>
<li class='tab2'><a href='#tab2'>Latest Posts</a></li>
<li class='tab3'><a href='#tab3'>Labels</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'>
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'>
<b:section class='sidebar' id='tab2-latest-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab3-labels' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>

3. Save Template!
4. Klik "Layout".

Akan muncul tiga widget bertuliskan tab1, tab2, tab3. Jika belum muncul, refresh (tekan F5). Silakan isi dengan widget yang akan ditampilkan. Beres!

Demikian Cara Membuat Flat Multi Tab Sidebar Responsive di blogger semoga tutorial yang saya buat ini bisa bermanfaat & terima kasih sudah berkunjung ke blog sederhana Laros ini. Selamat mencoba :)
Read More

Sabtu, 10 September 2016

Download Update Lapax Theme Versi 1.1.2, 10 September 2016

Halo gan sebelumnya saya sudah posting tentang Download Lapax Update versi 1.2.1 dan Download Lapax Theme Update Terbaru Versi 1.2  kali ini Laros ingin share lagi update terbaru dari Lapax Theme yaitu versi 1.2.2 dan sesuai judul template ini baru saja di update pada tanggal 10 september 2016 dibawah ini beberapa update dari template Lapax Theme


Penyebab update lagi katanya empunya sih gara - gara ada bug pada versi sebelumnya. Dan empunya berusaha memberikan layanan terbaik untuk para clientnya dengan melakukan perbaikan pada Lapax Theme sehingga rilislah update versi 1.2.2

Selain perbaikan bug pada versi sebelumnya, empunya juga menambahkan beberapa fitur baru yang DAHSYAT untuk mengoptimalkan konversi penjualan website toko online Anda. Apa sih point-point update Lapax Theme kali ini? Check this out!

Lapax Theme V1.2.2 – update (10-09-2016)
  • Fix bug keranjang belanja (ERROR 500)
    Bug ini sudah hilang dari peredaran
  • Add fitur cek/tracking resi
    Yup, sudah tersedia halaman cek resi pada website toko online Anda.
  • Add fitur Quick Order Mobile (SMS/Call/BBM)
    Apabila dibuka dari mobile (HP/Tablet), maka akan muncul tombol sms, telpon dan invite bbm. Ini sangat cocok bagi customer Anda yang malas pakai shopping cart.
  • Add fitur input & hapus no.resi pesanan
    Setelah orderan Anda proses kirim via kurir, dapat no. resi, input pada halaman invoice.
  • Add fitur kirim Email resi
    Ada fitur otomatis kirim no.resi kepada customer Anda via email. Tinggal klik!
  • Add fitur kirim SMS resi
    Ada fitur otomatis kirim no.resi kepada customer Anda via sms. Tinggal klik!.
  • Add fitur hapus konfirmasi
    Ada request  fitur hapus konfirmasi, maka kami hadirkan untuk Anda.
  • Add fitur ganti text select menu pilihan
    Ganti teks default “Pilih Ukuran/Model” menggunakan kata-kata Anda tanpa coding.
  • Add fitur ganti text produk tanpa harga
    Ganti teks default “Harga hubungi CS” menggunakan kata-kata Anda tanpa coding.
  • Add fitur widget blog artikel pada sidebar
    Artikel blog dapat ditampilkan di sidebar agar lebih informatif.
  • Penyesuaian style css
Nah itulah beberapa fitur tambahan dari lapax theme yang baru saja di update oleh empunya, jadi tunggu apalagi silahkan langsung aja di download :) dibawah ini sudah saya sediakan link downloadnya.

Read More