Membuat menu dropdown

Membuat menu dropdown

Menu multi dropdown seperti ini pasti sangat di butuhkan jika sebuah blog memang mempunyai banyak kategori yang terkait atau bisa juga untuk meringkas artikle yang terkait yang di masukan ke menubar tersebut. jika anda ingin menerapkan menubar ini di blog anda,silahkan ikuti tutorialnya.

Cara Membuat Menu Bar Multi Dropdown.

1. Buka akun blogger anda.
2. Pilih menu template > klik Edit Html
3. Lalu letakan kode css di bawah ini tepat di atas kode ]]></b:skin> atau</style>

nav {
    display: block;
    margin-top: 100px;
    background: #374147;
}

.menu {
    display: block;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    font-weight: 600;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #9ca3da;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #9ca3da;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 149px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover {
    background: #374147;
    color: #fff;
    text-decoration: none;
}

a.homer {
    background: #9ca3da;
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }

    .menu ul {
        top: 37px;
    }

    .menu li a {
        font-size: 12px;
    }

    a.homer {
        background: #374147;
    }
}

@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

    .menu {
        display: none;
    }

    .responsive-menu {
        display: block;
        margin-top: 100px;
    }

    nav {
        margin: 0;
        background: none;
    }

    .menu li {
        display: block;
        margin: 0;
    }

    .menu li a {
        background: #fff;
        color: #797979;
    }

    .menu li a:hover,.menu li:hover>a {
        background: #9ca3da;
        color: #fff;
    }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }

    .menu ul ul {
        left: 0;
        transform: initial;
    }

    .menu li>ul ul:hover {
        transform: initial;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}

4. Selanjutnya letakan kode html di bawah ini tepat di bawah kode </header>

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a> 
<ul class="menu">
<li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
<ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a></li>
<li><a href="#">Sub-Menu 3</a></li>
<li><a href="#">Sub-Menu 4</a></li>
<li><a href="#">Sub-Menu 5</a></li> 
</ul>
</li>
<li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li>
<li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
<ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a>
<ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li> 
</ul>
</li>
<li><a href="#">Sub-Menu 3</a>
<ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li> 
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
<li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
<ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a>
<ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li> 
</ul>
</li>
<li><a href="#">Sub-Menu 3</a>
<ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li> 
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
<li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
<li><a href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
</ul>
</nav> 
<

5. Langkah terakhir simpan kode di bawah ini tepat di atas kode</body>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){ 
var touch = $('#resp-menu');
var menu = $('.menu');

$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});

$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});

});
//]]>
</script>

6. Jika sudah, silahkan klik pertinjau terlebih dahulu,kalo sudah ok, save template anda

0

ARTIKEL TERBARU

Saturday, June 2, 2018

Artikel Terbaru

IKLAN ANDA

Cara membuat fanspage FB

Cara membuat fanspage FB

Untuk membuat code script fanspage facebook sebelumnya anda harus mempunyai halaman facebook terlebih dahalu. Apabila sudah membuat halaman facebook ikuti langkah – langkah membuat kode scriptnya dibawah ini.

Cara Membuat Code Script Fanspage Facebook

Langkah pertama, anda harus login terlebih dahulu pada akun Facebook yang anda miliki.

Kemudian kunjungi situs Developer Facebook untuk membuat kode scriptnya. Klik link ini https://developers.facebook.com/docs/plugins/page-plugin/.

Lakukan pengisian mulai dari url halaman facebook, ukuran widget, warna, dll.

Petunjuk pengisian :

Facebook Page URL : Tulis dengan url halaman facebook anda, misalnya seperti http://www.facebook.com/3inetworksindonesia/
Width : Tulis dengan ukuran lebar widget yang anda inginkan.
Height : Tulis dengan ukuran tinggi widget yang anda inginkan.
Tabs : Bisa anda tulis dengan timeline, messenger, atau ivent.
Show Friend's Faces : Checklist untuk menampilkan wajah para pengguna facebook yang telah like halaman anda.
Use Small Header : Checklist untuk menampilkan header dengan ukuran kecil.
Hide Cover Photo : Checklist untuk menyembunyikan cover foto.

Apabila semua data telah terisi secara lengkap, kemudian klik “Get Code”. Maka code fanspage  facebook anda akan tampil. Code script siap anda copy dan siap untuk anda pasang pada blog kesayangan anda. 

Cara Memasang Widget Fanspage Facebook Di Blog

1. Langkah pertama, anda harus login terlebih dahulu pada akun blogger anda.

2. Masuk pada menu Tata Letak/ layout, kemudian klik 

3. Tambahkan Widget/Gadget.

4. Pilih widget HTML/JavaScript,

lalu pastekan semua code script fanspage facebook yang telah anda buat. 

Klik simpan untuk mendapatkan hasilnya

0

ARTIKEL TERBARU

Artikel Terbaru

IKLAN ANDA

Mempercantik Blog

Mempercantik Blog

Mempercantik blog atau membuat suatu blog atau website dengan tampilan sederhana tanpa menggannggu kualitas seo blog atau website dan menarik yang beda dari yang lain merupakan keinginan, tujuan, prioritas, dambaan bagi para blogger.

Blog yang menarik harus memperhatikan kinerja SEO blog juga karena tujuan kita membuat blog menarik dan mempercantiknya juga bertujuan agar kualitas seo dan serp blog bisa meningkat dan banyak pengunjung atau visitor tentunya.

Dalam urusan di atas tidak ada kata mustahil untuk para senior atau mastah mempercantik blog mereka dalam tujuan seo dan pemikatan pengunjung agar datang berkunjung kembali ke blog mereka di kemudian hari.

Aspek tampilan blog merupakan salah satu langkah menuju suatu kata yaitu blog bisa menarik di mata pemilik dan pengunjung yaitu untuk pertama berupa tampilan blog terlebih dahulu, tampilan yang menarik dan enak di pandang.

Banyak platform untuk pembuatan blog dan website, baik gratis dan berbayar ( Hosting dan Domain Premium) contohnya blog dari Blogger(Blogspot) dan berbayar Wordpress.org

Aspek Kecantikan Blog atau Website

Setidak nya ada tiga aspek yang anda harus perhatikan untuk seorang blogger pemula untuk membuat blog atau website yang kalian kelola bisa menarik dan cantik.

Theme

Theme/template/tema ( Mobile Friendly, Seo Friendly, Responsive , dan bisa anda download secara gratis dan berbayar (premium)

Widget (Tata letak, pewarnaan, Kelengkapatan, kecepatan akses widget, uuran, gambar, dan lain-lain)

Domain ( Top Level Domain atau TLD ) Domain TLD bisa di dapat dengan membeli (Harga super murah (Promo) dan harga normal atau di berikan secara gatis oleh penyedia layanan domain.

Template Merubah atau menggonta-ganti template secara berkala atau keseringan merupakan hal mutlak bagi seorang blogger pemula atau newbie karena mereka masih plin-plan.

Banyak sekali desainer template indonesia yang didalam template hasil mendesainnya sudah terdapat tata letak peletakan widget sehingga anda tinggal mengikuti saran tersebut.

Wigdet

• Popular Post
• Recent Post
• About Us
• About Me
• TOS
• Disclaimer
• Related Post
• Label
• Arsip Blog
• Sitemap
• Contact
• Privacy

Domain

Berikut langkah yang perlu di perhatikan dalam pemilihan domain untuk blog kesayangan anda jika anda masih menggunakan domain gratis dari penyedia platform blog.

Order Domain di penyedia layanan pembelian domain yang sudah teruji kualitasnya

Pilih domain yang mudah diingat dan simpel tapi berkelas

Hindari penggunaan nama domain yang alay

Untuk pemilihan nama domain, survei dahulu juga d anjurkan

Keyword on Domain bisa di jadikan alternatif

Tidak hanya kualitas artikel saja yang diperhatikan akan tetapi hal di atas juga menjadi prioritas kedua bagi seorang blogger.

0

ARTIKEL TERBARU

Artikel Terbaru

IKLAN ANDA

Memasang Widget pada blog

Memasang Widget pada blog

1. Login ke Blogger dahulu
2. Pilih Tata Letak atau Layout
3. Pilih posisi yang akan ditempatkan oleh widget, misalnya anda ingin menampilkannya di sidebar maka pilih gadget yang berada di samping layar. Kalau mau pasang di tengah pilih gadget yang berada di tengah.

4. Setelah itu klik "Tambahkan Gadget", maka akan terbuka , setelah itu silahkan pilih widget yang ingin dipasangkan di blog Anda. Saya ambil contoh gadget pengikut google+ baru yang akan saya pasangkan ke blog.

5. Klik tanda ' + '  , dan akan masuk menu tampilan sementara yang dapat disetting sesuai dengan warna blog.

Kemudian "Simpan" .

0

ARTIKEL TERBARU

Artikel Terbaru

IKLAN ANDA

Memasang gambar header

Memasang gambar header

Memasang gambar pada header blog sangatlah mudah , berikut langkah langkahnya :

Yang harus kita persiapkan adalah : File / Gambar dengan Type JPG, JPEG, PNG, GIF dengan ukuran sesuai tampilan Template Blog (Widget Headernya).

1. Bukalah Akun Blogger Anda
2. Masuklah ke Elemen Tata Letak atau Layout
3. Pilih / Klik Widget Header

4. Klik Pilih File (lihat gambar di bawah lingkaran warna merah) lalu masukkanlah File Gambar yang telah anda sediakan tadi.

5. Bila koneksi Anda cepat, maka File Gambar akan langsung masuk. Bila koneksi lambat ya sabar-sabar saja dulu sampai gambar tampil seperti di bawah ini.

6. Apabila File Gambar Anda sudah masuk / tampil seperti gambar di atas, maka jangan lupa untuk Centang Selain Judul dan Keterangan

7. Lalu Simpan Widget dengan mengklik tanda Simpan

8. Selesai dan lihat hasilnya.

0

ARTIKEL TERBARU

Artikel Terbaru

IKLAN ANDA

Membuat Web Responsive

Membuat Web Responsive

Mengapa harus membuat Web Responsive ?

Perlu di ketahui pengguna internet sekarang ini lebih banyak menggunakan ponsel , sehingga jika ingin web kita dapat diakses dimanapun dan kapanpun tidak lain hanya dengan menggunakan web yang responsive . Artinya ketika laman web di akses melalui layar 1080px maka akan tampak 2 kolom atau 3 kolom . Namun jika di akses menggunakan layar dengan lebar dibawah 760px , akan menjadi satu kolom .

Cara Membuat Web Responsive Pertama Buat Script HTML

Pertama kita akan mulai dengan membuat struktur HTML nya, terdiri dari 3 class utama, dan karena kita akan membuat 3 kolom maka pada class .main akan kita bagi menjadi 3 class yaitu .left, .middle dan .right, setiap class nanti diberi ukuran tertentu dan diberi properti float agar membentuk kolom.
1. class header
2. class main ( terdiri dari class “.left”, “.middle” dan “.right”
3. class footer

<div class="container">
 <div class="header">Untuk bagian header...</div>
 <div class="main">
  <div class="left">Untuk kolom bagian Kiri...</div>
  <div class="middle">Untuk kolom bagian tengah...</div>
  <div class="right">Untuk kolom bagian kanan...</div>
 </div>
 <div class="footer">Untuk bagian footer...</div>
</div>

Untuk bagian head dari HTML jangan lupa di beri tag meta viewport, tag nya seperti ini:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sisipkan meta viewport didalam tag< head>

Mengatur Layout Dengan CSS

Struktur HTML telah selesai kita buat, namun layout nya belum terbentuk. Maka selanjutnya kita beri tambahan kode CSS agar membentuk layout yang terdiri dari 3 kolom, potongan kode css nya seperti berikut ini.

.container{
 max-width: 1080px;
 margin: 20px auto;
 background: #fff;
 overflow: hidden;
 padding: 10px;
}

.header{
 border: 1px solid #dedede;
 padding: 10px;
 margin: 10px;
}

/* Main */
 .left{
  width: 250px;
  border: 1px solid #dedede;
  background: #e5e5e5;
  padding: 10px;
  margin: 10px;
  float: left;
 }

 .middle{
  width: 500px;
  border: 1px solid #dedede;
  padding: 10px;
  margin: 10px;
  float: left;
 }
  .middle img{
   max-width: 100%;
   height: auto;
  }

 .right{
  width: 250px;
  border: 1px solid #dedede;
  padding: 10px;
  margin: 10px;
  float: left;
 }

.footer{
 clear: both;
 border: 1px solid #dedede;
 padding: 10px;
 margin: 10px;
}

Mengatur Gambar Agar Menyesuaikan Layout

Gambar biasanya menjadi masalah jika ukuran nya lebih lebar dibanding layout, oleh karena itu kita harus tentukan script untuk gambar ini, kita buat gambar berukuran 100%, dengan begini maka gambar tidak akan pernah lebih lebar dibanding ukuran layout penampungnya.

.middle img{
 max-width: 100%;
 height: auto;
}

Menjadi 2 Kolom Ketika di Tablet.

Layout akan kita buat berubah ketika ukuran layar 1080px, untuk ukuran 1080px ini sebenarnya bisa anda sesuaikan dengan kebutuhan, bisa saja 960px, atau 1000px, tergantung keinginan anda saja. Tapi sebenarnya kalau bisa sesuai dengan ukuran perangkat-perangkat yang banyak dipakai seperti iPad, Amazon kindle atau Galaxy Tab. Kode untuk merubah layout menjadi 2 kolom adalah seperti dibawah ini, kita bisa lihat bahwa untuk merubahnya kita menggunakan bantuan media query @media screen and (max-width: 1080px) yang artinya ketika ukuran layout maksimal 1080 maka tentukan CSS nya, CSS ini inherit dari kode CSS sebelumnya.

@media screen and (max-width: 1080px) {
 
 .container {
  width: 100%;
 }
 .left {
  width: 25%;
  background: #fff000;
 }
 .middle {
  width: 68%;
  float: right;
 }
 
 .right {
  clear: both;
  padding: 1% 4%;
  width: auto;
  float: none;
 }
}

Kode CSS diatas bukan hanya untuk mengatur jumlah kolom, namun juga bisa melakukan perubahan-perubahan lain seperti merubah kolom kiri menjadi berwarna kuning, atau bisa juga merubah ukuran font, bahkan warna font, seperti yang kita lihat di class .left, ditambahkan background: #fff000; untuk merubah background menjadi warna kuning.

Menjadi Satu Kolom Ketika di Ponsel

Layout untuk tablet tidak bisa kita pakai untuk mengakomodir ponsel, oleh karena itu ketika ukuran layar lebih kecil kita tentukan lagi css berikutnya, masih tetap dengan media query, kami merubahnya menjadi satu kolom pada ukuran 780px kebawah. Script nya adalah sebagai berikut.

@media screen and (max-width: 780px) {
 
 .header, 
 .footer{
  text-align: center;
 }
 .left {
  width: auto;
  float: none;
 }
 
 .middle {
  width: auto;
  float: none;
 }
 
 .right {
  width: auto;
  float: none;
 }

}

Pada kode css diatas tidak ditentukan lagi lebar kolom, semua div dibuat width: auto yang artinya dibuat memenuhi lebar layar, akhirnya terbentuk lah layout yang hanya satu kolom. Begitulah cara sederhana membuat layout responsive, kami hanya menjelaskan prinsip dasar nya agar mudah dimengerti, jadi layoutnya dibuat sangat sederhana. Untuk project yang serius anda bisa mengembangkan lagi dengan elemen-elemen yang lain.

0

ARTIKEL TERBARU

Artikel Terbaru

IKLAN ANDA

Belajar membuat blog gratis

Belajar membuat blog gratis

Sebelum mulai membahas cara membuat blog gratis ada baiknya perhatikan beberapa hal berikut untuk jangka panjang :

  1. Tentukan mau membuat blog tentang apa?
Sebenarnya hal ini bebas-bebas saja terserah Anda mau nulis tentang apapun, Tapi kalau boleh saya sarankan untuk jangka panjang usahakan sebisa mungkin Anda menulis tentang materi yang disukai, sebisa mungkin bukan blog gado-gado dan serius mempelajari blog jika ingin sukses di blog. Di dunia ini setiap hari selalu ada yang membuat blog baru, apalagi yang namanya artikel pasti lebih banyak lagi. Fakta menunjukkan bahwa lebih dari 2 juta konten diterbitkan setiap hari. Tetapi tidak sampai 50% dari keseluruhan jumlah tersebut dapat mencapai 10000 pengunjung setiap bulan.

2. Mengelola blog perlu waktu
Jangan berharap bahwa setelah tahu cara bikin blog lalu buat beberapa artikel terus bisa menjadi sukses dan mendapatkan penghasilan. Mengelola blog perlu waktu yang tidak sedikit... Ya.. sebuah blog tidak akan bisa eksis dalam pencarian hanya dalam tempo singkat. Blogging perlu waktu, tenaga, fokus dan kesabaran. Terutama bagi Anda yang berniat mencari uang lewat blog harus mengeluarkan energi ekstra lagi.

Langsung saja ke cara membuat blog gratis sebagai berikut :

1. Buat Email Gmail

Kenapa harus menggunakan Email Gmail ? Kenapa tidak menggunakan Email Yahoo ? Kita tahu bahwa Blogger dan Gmail adalah sama-sama produk keluaran Google jadi pihaknya mensyaratkan harus menggunakan Email Gmail.

Selain itu sebuah email sangatlah penting, Karena hampir semua produk internet memerlukan email sebagai alat untuk memulainya (login). Misalnya : Facebook, Intagram, Twitter dan lain-lain.

Setelah Anda mempunyai email sebaiknya dicatat kemudian simpan USERNAME dan PASSWORD ditempat yang aman.

2. Ketik di browser Anda, www.blogger.com kemudian tekan ENTER. Akan terbuka menu baru untuk login ke blogger.

3. Silahkan isikan EMAIL Anda dan PASSWORD yang sudah dibuat sebelumnya, kemudian tekan ENTER atau klik Sign In. Perhatikan juga huruf-huruf yang digunakan, Karena login sangatlah sensitif, Bila ada 1 huruf saja yang tidak sama persis maka tidak akan bisa login.

4. Akan terbuka layar baru , klik saja kotak bertuliskan "Blog Baru" kemudian tekan ENTER

5. Anda akan memasuki layar baru, silahkan isi JUDUL BLOG, buatlah judul yang sesuai dengan thema blog, upayakan jangan terlalu panjang.

6. Isi alamat blog
Buatlah alamat blog yang tidak terlalu panjang agar mudah mengingatnya, kapasitas yang diijinkan adalah 15 karakter lebih dari itu tidak akan bisa.

Jika alamat blog yang anda ketikan belum ada yang miliki / gunakan maka akan tampil "alamat ini tersedia" , tetapi jika alamatnya sudah ada yang menggunakannya maka akan ada pesan " maaf, alamat ini tidak tersedia" dan tanda seru (!) berwarna kuning maka Anda harus mencoba alamat baru lagi.

Tips : jika tidak memungkinkan Anda bisa menyisipkan angka atau tanda strip ( - )

7. Pilih TEMPLATE yang menurut selera Anda.

Pilih salah satu yang sesuai dengan keinginan kemudian klik saja "buat blog!", Karena Anda baru belajar cara membuat blog maka saran saya gunakan yang pertama ( tipe sederhana) saja, template ini berfungsi sebagai tampilan atau boleh dikatakan sebagai kulit dari sebuah blog. Nantinya template ini dapat Anda ganti sesuai dengan kehendaki.

0

ARTIKEL TERBARU

Friday, June 1, 2018

Artikel Terbaru

IKLAN ANDA