Connect with us

Blogging

Saran Template Responsive Untuk Blog Toko Online

Avatar

Published

on

template legal vs ilegal

Akhir akhir ini banyak blogger ataupun marketing online yang mencoba menjual produknya di website sendiri dengan membuat website atau blog toko online. Hal yang harus diperhatikan dari blog toko online tersebut adalah keamanan transaksi dan keamanan data diri pengunjung blog dan calon pembeli.

 

Selain keamanan, tampilan blog toko online juga perlu diperhatikan, agar calon pembeli tertarik melihat produk yang di jual. Saya sendiri pun melihat kesadaran blogger toko online dengan banyak yang meminta saran template toko online yang keren dan responsive di group group blogger.
 
Sebenarnya template blog toko online sudah banyak beredar di internet, ada yang berbayar ada yang gratis. Harusnya sih berbayar ya, karena menyangkut keamanan, dan templatenya pun harusnya premium. Jadi harus hati hati dalam memilih templatenya jangan sampai mendapatkan template yang ilegal. Baca review saya tentang template legal vs ilegal.
 
Mungkin karena masalah di atas banyak blogger yang bingung memilih template. Tapi tap tenang  karena saya akan memberikan saran template blog toko online. Tapi disini saya hanya melihat dari segi keren dan responsive nya template toko online, untuk masalah keamanan tolong dicermati sendiri ya.

VIOTOKO

 

Siapa yang tak kenal dengan template Viomagz, template yang paling sering kita jumpai di dunia perbloggeran indonesia sejak tahun 2018. Semua terhipnotis karena viomagz merupakan template yang seo ready, ads ready, dan tentunya responsive meskipun tampilannya cukup standar sih.
 
Ternyata template ini ada versi template toko online nya juga loh, namanya VIOTOKO. Tampilan tidak jauh beda dengan template Viomagz hanya ada sedikit modifikasi agar cocok untuk dijadikan template toko online.
 
Menurut saya VIOTOKO kurang mengena untuk dijadikan sebagai template toko online, bagi saya ini tidak lebih seperti Viomagz template magazine. Meski begitu peminat template banyak juga loh, bagi yang fanatik dengan Viomagz pasti langsung suka dengan template satu ini.

Kelebihan dan Fitur VIOTOKO

  • Responsive 100%, dijamin responsive disemua ukuran layar.
  • SEO Ready, bagi kamu yang peduli dengan SEO sebuah website, template ini sudah dioptimalkan agar SEO.
  • Fast Loading, seperti halnya template lain buatan mas Sugeng, fast loading menjadi andalan.
  • Mendukung Fitur Designer Tema, mudah dikustomisasi tanpa harus masuk ke html editor.
  • Bisa Posting Produk dan Artikel, juga bisa posting artikel layaknya blog pada umumnya.
  • Menggunakan schema markup pada halaman produk dan artikel.
  • Tombol Chat Whatsapp, sms, dan telepon, untuk memudahkan calon pembeli menghubungi penjual.
Template dijual dengan harga 170.000 bisa beli langsung ke Mas sugeng

Toko Whatsapp


Ini salah satu template impian saya hehe, template ini di didesign khusus untuk memudahkan antara penjual dan pembeli melakukan jual beli lewat aplikasi whatsapp. Jadi, data pesanan yang sudah kita pilih di blog bisa langsung terkirim ke whatsapp si penjual. Data tersebut meliputi ukuran produk, warna, informasi pribadi, pembayaran dan detail pengiriman.

 
Untuk urusan tampilan, saya akui template toko whatsapp ini memang keren dan responsive, bahkan sekilas mirip dengan website toko online pada umumnya. Baik dikases melalui pc maupun mobile template ini cukup fast loading juga loh.
 
Fitur stock barang pun bekerja sempurna, jadi ketika barang dikasi label habis, maka secara otomatis barang tersebut tidak bisa diorder.

Fitur dan Kelebihan

  • Kode facebook pixel sudah di optimasi, saya kurang tahu sih apa fungsi dari ini.
  • Responsive, didesign untuk semua perangkat.
  • SEO Friendly
  • Lazy Load/ Fast loading
  • Live Edit, edit konten secara langsung.
  • Kategori + Jumlah produk.
  • Tombol pemberitahuan statis.
  • Produk sorting, terbaru, termurah, dan termahal.
  • Direct Marketplace, alternatif order.
  • Price Discount, tandai sebagai diskon dan persen diskon.
  • Sold out setting, tandai sebagai terjual / habis.
Template dijual dengan harga 300.000 untuk maksimal 2 domain, dan 2.000.000 untuk tanpa batas domain, bisa dibeli di seotemplate.web.id

Sora Store template


Jika diatas merupakan template toko online yang berbayar, lain halnya dengan ini, kamu bisa mendapatkan template sora store secara gratis, bisa juga membeli untuk yang versi premium.

 
Untuk masalah tampilan template ini cukup mumpuni untuk dijadikan sebagai template toko online, karena pada dasarnya ini memang template toko online. Template ini juga responsive loh, bisa diakses dengan baik menggunakan pc maupun mobile. Untuk masalah fast loading saya rasa kalah dengan template diatas.
 
Fitur jual beli yang dihadirkan dalam template ini adalah, one page checkout, jadi proses transaksi terjadi dalam satu laman yang sangat efisien. Selain itu juga terdapat fitur add to chart / tambahkan ke keranjang.
 
Kamu bisa mendapatkan template ini langsung di sora template

Blanter tokoshop


Template toko online yang satu ini mempunyai tamplan yang keren juga loh.  Sama seperti template toko whatsapp, template ini juga memiliki fitur checkout pemesanan menggunakan whatsapp dan gmail. Data pemesanan mulai dari jumlah, harga, nama, alamat, akan terisi otomatis dan akan dialihkan ke chat whatsapp ataupun gmail.

 
Ada juga fitur wish list dengan menggunakan local storage, jadi walaupun browser di close, produk yangdimasukkan kedalam wish list akan tetap muncul.
 
Untuk menambahkan produk terbaru kamu tidak perlu repot repot edit kode di post, karena sudah disediakan formulir untuk posting produk terbaru.

Fitur dan Kelebihan

  • Checkout produk mengunakan whatsapp dan email.
  • Data produk dan data pemesanan otomatis akan masuk ke whatsapp dan email.
  • Ada fitur keranjang belanja dengan checkout multi produk
  • Serba mudah, panduan lengkap dengan video tutorial pemasangan.
  • Status produk, promo, terlaris, stock habis.
  • Idblanter memang kerap memberikan template yang keren dan responsive, meskipun tampilan template idblanter hampir mirip mirip semua.
Kamu bisa mendapatkan template ini dengan harga 250.000 di idblanter.com
 
Nah itulah beberapa saran template toko online dari saya, semoga bisa menjadi pertimbangan bagi pembaca. Saya hanya melihat dari segi tampilan dan fitur yang ada ya, untuk maslah keamanan bisa dicermati sendiri. Sampai jumpa di artikel berikutnya.
Continue Reading
Advertisement
3 Comments

3 Comments

  1. Avatar

    Masbisor.com

    November 10, 2019 at 1:59 pm

    Terimakasih atas info tentang template toko online yang bagus.

  2. Avatar

    Ajat

    Februari 6, 2020 at 11:18 am

    Wahh saya suka template nya mas, kalau untuk template AMP Sudah ada mas? jika ada saya ingin mendownload nya.

    • Avatar

      albabbarrosa

      Februari 19, 2020 at 2:50 pm

      Untuk versi AMP kayaknya belum ada, mengingat blog atau website jual beli jarang yang pake AMP.

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Blogging

Apakah Trafik Dari Fb Ads Aman? Berikut Pendapat Expert Blogger

Avatar

Published

on

Trafik Fb Ads

Trafik dari fb ads saat ini menjadi perbincangan hangat di group blogger – Mendapatkan trafik adalah sebuah keharusan bagi seorang blogger. Karena dengan begitu artikel yang mereka buat bisa dibaca oleh penguna internet. Trafik blog sendiri merupakan lalu lintas yang terjadi di sebuah blog. Trafik tersebut bisa berasal dari berbagai macam.

3 macam Sumber Trafik Blog

Secara umum trafik yang menuju ke sebuah blog dibagi menjadi 3 macam, antara lain :

Trafik dari Organic Search. Trafik dari organic search berarti sumber lalu lintas yang berasal dari search engine. Search engine atau mesin pencari sendiri ada berbagai macam, antara lain : Google, Yahoo, Bing, yandex, Duckduckgo, dan beberapa mesin telusur lainnya yang mungkin jarang digunakan di indonesia.

Trafik dari organic search dianggap lebih berkualitas oleh google. Apalagi bagi blog yang memasang iklan adsense. namun, untuk mendapatkan trafik dari organic search ternyata tidak mudah, karena kita bersaing dengan blog lainnya untuk mendapatkan posisi di mesin pencari.

Trafik Dari Redirect. Redirect adalah pengalihan dari sebuah url ke url tertentu. Yang berarti sebelum sampai ke url tujuan, pengunjung harus mengklik url pengalihan yang sudah disiapkan.

Contoh dari trafik redirect antara lain : Trafik dari shortlink,safelink, trafik yang diarahkan dari fb, twitter dan media sosial lainnya. Trafik tersebut tidak melanggar kebijakan adsense (bagi yang menayangkan iklan adsense)

Trafik dari Referal. Bagi kalian yang sudah menghubungkan blog ke google analityc tentu tidak asing dengan istilah ini. Referal traffic adalah sebuah kunjungan yang berasal dari yang dari luar search engine. Trafik tersebut bisa berasal dari backlink, hyperlink, dan link anchor yang mengarah ke blog kamu.

lalu lintas tersebut terbilang bagus, bahkan dapat menaikkan trusted dari domain blog kita, asalkan link referal ditaruh ditempat atau situs yang tidak melanggar kebijakan google, atau kebijakan internet international.

Apa Itu Trafik fb Ads

fb Ads atau Facebook Advertising adalah sebuah layanan yang diberikan facebook bagi penggunanya untuk mengiklankan produk mereka. Produk tersebut bisa berupa : Barang dagang, Fanspage, dan Situs web. Kita bisa melakukan transaksi berdasarkan iklan yang mau kita tayangkan. Harga yang paling rendah untuk mengiklan di facebook adalah 36.000.

Trafik yang dijanjikan oleh facebook ketika beriklan pun lumyan tinggi. dengan membayar 36.000 untuk satu hari kita bisa mendapatkan trafik antara 1-2k perhari yang mengarah ke situs web kita. Bagi blogger yang memasang iklan diblognya, tentu traffik tersebut lumayan tinggi karena sudah mendapatkan keuntungan.

Strategi fb ads to adsense atau to site sudah lama digunakan oleh beberapa blogger yang mengandalkan pemasukan dari google adsense. Dengan trafik 2K sehari setidaknya dia sudah mendapatkan lebih dari 50rb perhari dari google adsense. Setidaknya mereka masih mendapatkan 14rb perhari

Apakah Trafik Fb Ads Aman?

pembahasan tentang fb ads to adsense pun sudah seringkali di bahas di group atau forum blogger. Di salah satu forum blogger, ada yang menyangakan tentang permasalahan tersebut.

” sekarangkan lagi banyak yang melakukan fb ads to blog adsense, apakah strategi model seperti itu aman? Kalau buat online shop memang bagus sih, tapi kalau untuk blog adsense gimana ya?” tanya salah satu anggota forum diskusi blogger. Berikut jawaban yang diberikan oleh beberapa blogger.

Expert di adsense forum mengatakn bahwa trafik dari fb ads merupakan salah satu sumber invalid klik. dan banyak akun adsense yang terkena banned karena invalid klik. Atau mungkin ada cara untuk mengakali hal tersebut?

Jawab seorang anggota forum. Invalid klik saat ini sedang kerap-kerapnya menimpa publisher adsense. Baca : Penyebab dan cara mengatasi pembatasan iklan adsense.

Kalau mau trafik dari facebook share artikel di group atau di fabspage biar lebih aman. Kalau dari fb ads ada kemungkinan terkena invalid trafik dan invalid klik.

Sementara anggota forum lainnya memberikan jawaban yang cukup lengkap.

Mengiklan di Facebook untuk apadulu mas? kalau diarahkan ke blog adsense, saya sudah dua kali kena invalid karena memsanag fb ads to adsense blog. dan 3 kali share ke fanspage dan group facebook masih aman-aman saja. Mungkin mastah lainnya punya metode tersendiri agar tidak terkena invalid kil. Google sendiri juga kurang spesifik dalam memberikan informasi tentang permasalahan tersebut.

Sementara anggota yang pro dengan fb ads mengatakan,” hal tersebut aman, teman saya sendiri pay Out sebesar 30juta perbulan dari satu acount hanya dengan fb ads 80%.”

Bukannya invalid klik itu terjadi karena pengunjung mengklik iklan tapi tidak ada action, atau hanya sebentar membuka iklan terus menutupnya?

Seperti itulah pembahasan mengenai fb ads to blog adsense. Pro dan kontra pasti selalu ada, tinggal bagaimana kita mengambillangkah yang lebih baik dan aman tentunya.

Setiap usaha pasti ada resikonya bukan? semakin besar usahamu semakin besar pula resiko yang ada. Jadi kita harus bisa bersikap ketika kita mendapatkan resiko tersebut. terimakasih sudah membaca, sampai jumpa di artikel berikutnya. – albabbarrosa

Sumber Gambar : Image by William Iven from Pixabay

Continue Reading

Blogging

3 Cara Membuat Daftar Isi Atau Table of Content

Avatar

Published

on

cara membuat table of content
Cara Membuat Daftar Isi / Table Of Content – Albabbarrosa.com

 SEO Off Page menjadi salah satu langkah seorang blogger agar blog atau website mereka bisa bersaing di halaman pertaman google, salah satu dari SEO Off Page adalah dengan membuat artikel berkualitas. Artikel berkualitas secara tidak langsung akan membantu menaikkan peringkat blog atau website di mesin pencari dalam jangka panjang. Bagaimana ciri-ciri artikel berkualitas? Secara lengkap kamu bisa membaca di artikel saya tentang Artikel Berkualitas.

 
Secara umum artikel berkualitas adalah artikel yang dibuat dengan terstruktur. Terdapat point-point utama pembahasan dan ditulis secara rapi. Agar pembaca mudah melihat point utama yang ada, maka kamu perlu menambahkan Daftar Isi di sebuah artikel. Yang bertujuan agar pembaca bisa melihat daftar isi dari point utama pembahasan.
 
Membuat daftar isi di sebuah artikel tidaklah sulit, kamu hanya perlu membuat sebuah daftar pembahasan, dan menaruh link agar menuju ke Sub pembahasan. Misalnya kamu membuat artikel dengan Sub Pembahasan :
 
Cara Membuat Jus Jambu
Manfaat Jus jambu
 
Maka kamu tinggal membuat daftar isi yang mengarahkan ke sub pembahasan tersebut (cara membuat jus jambu dan manfaat jus jambu).
 
Bagi kalian yang masih bingung dengan cara membuat daftar isi di artikel. Berikut saya berikan 3 cara membuat daftar isi atau table of content di artikel.

Cara Pertama Membuat Daftar Isi atau Table Of Content

Ini merupakan cara termudah dalam membuat daftar isi atau table of content. Sebelumnya, pastikan bahwa artikelmu terdapat beberapa sub pembahasan atau sub heading. Kalau tidak ada sub menunya daftar isi apa yang akan kamu sajikan.
  • Masuk ke setting > Edit Html
  • Cari kode ]]></b:skin>
  • Pastekan kode dibawah sebelum kode atau tepat di atas kode  ]]></b:skin>
 .dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
  • Stelah itu, simpan template.
  • Selanjutnya, Edit artikel yang ingin ditambahkan daftar isi
  • Edit artikel > Ubah tampilan compose menjadi Html
  • Pastekan kode dibawah dibagian paling atas artikel kamu, atau dimanapun, tapi yang terbaik adalah dibagian paling atas artikel.
 Kode
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
  • Ganti Link1, Link2, link 3 dan seterusnya dengan Sub Pembahasan artikel kamu. Ganti juga # dengan #subhead1 dan seterusnya. Jika di artikel terdapat lebih dari 3 sub pembahasan, tinggal tambahkan kode    <a href=”#”>Link 4</a>  dan seterusnya.
  • Masih di tampilan html. Cari Sub Pembahasan kamu atau Subheading kamu. Dan tambahkan kode id=”subhead1”setelah kode <span dan seterusnya pada setiap sub pembahasan kamu.
  • Klik pratinjau, setelah oke, baru klik perbarui.
DEMO

Cara Kedua Membuat Daftar Isi atau Table Of Content

Cara yang kedua ini dibilang hampir sama dengan cara yang pertama, hanya saja memiliki tampilan yang lebih bagu dan lebih variatif.
  • Pertama, Masuk ke Setelan Html Blogger Kamu > Pilih edit Html
  • Pastekan kode berikut sebelum kode </head> atau Sebelum kode ]]></b:skin>
 /* Versi Kedua */
.daftarisi {
    width:100%;
    border:1px solid #d3d3d3;
}
.daftarisi div {
    width:100%;
}
.daftarisi .daftar {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.daftarisi .content {
    display: none;
    padding : 5px;
}
    • Kemudian Pastekan kode berikut sebelum kode </body>
 <script>
$(".daftar").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Tutup" : "Daftar Isi";
        });
    });

});
</script>
  • Klik Simpan Template.
  • Selanjutnya, edit artikel yang ingin dikasih Tombol Daftar Isi
  • Ubah tampilan Compose menjadi html
  • Pastekan kode berikut dibagian paling atas artikelmu
 <div class="daftarisi">
    <div class="daftar"><span>Daftar Isi</span>

    </div>
    <div class="content">
        <ul>
            <li><a href="#subhead1">This is just some random content.</a></li>
            <li><a href="#subhead2">This is just some random content.</a></li>
        </ul>
    </div>
</div>
  • Jangan Lupa, ganti “This is random content” dengan Daftar pembahasan kamu
  • Masih di tampilan html. Cari Sub Pembahasan kamu atau Subheading kamu. Dan tambahkan kodeid=”subhead1” setelah kode <span dan seterusnya pada setiap sub pembahasan kamu.
  • Klik pratinjau, setelah oke, baru klik perbarui.

DEMO

Continue Reading

Blogging

Cara Membuat Menu Scroll Ke Samping Simpel di Blog

Avatar

Published

on

cara membuat menu scroll ke samping

Cara Membuat Menu Scroll Ke Samping – albabbarrosa.com

Halo sobat blogger semua, ketemu lagi dengan albabbarrosa. Kali ini saya akan memberikan tutorial lagi yah, lagi hobi banget bikin tutorial. Kemarin kemarin saya sudah memberikan tutorial tentang Sticky Nav sama Meni navigasi Sidebar. Kali ini saya akan memberikan tutorial tentang menu lagi, yaitu cara membuat menu scroll ke samping atau horizontal’s Scroll Menu.
 
Menu dengan tampilan scroll ke samping banyak kita temui di website website toko online. Selain itu google juga menggunakan menu scroll ke samping loh, ga percaya? Cek aja sendiri. Untuk web berita banyak juga yang menggunakan menu dengan gaya seperti itu, salah satunya adalah website liputan6.
 
Nah, kebetulan saya memiliki script menu scroll kesamping yang saya dapatkan dari template textrim buatan Igniel. Saya tertarik untuk menempatkan menu tersebut disalah satu blog saya, dan ternyata bagus juga tampilannya. Bagi kamu yang ga mau repot repot edit script di template textrim, berikut saya buatkan tutorial pemasangan menu scroll ke samping di blog, dan caranya sangat simpel sekali.
 
Pertama masuk ke Pengaturan > Tema > Edit Html.
 
Pastekan kode berikutdi bagian paling bawah rentetan kode html header, tepatnya di bawah kode </div>. sebenarnya bisa ditaruh dimana saja sesuai keinginan kamu.

Rentetan kode html header biasanya di awali dengan <div class=’header-menu’>, atau kode lain yang hampir mirip. Dan ditutup dengan tag </div>.

    <div class=’textrimMenu’>

 

      <div class=’inner’>
        <ul>
          <li><a href=’https://textrim.blogspot.com’ title=’Download Template’>Download Template</a></li>
          <li><a href=’#’ title=’Menu 1′>Menu 1</a></li>
          <li><a href=’#’ title=’Menu 2′>Menu 2</a></li>
          <li><a href=’#’ title=’Menu 3′>Menu 3</a></li>
          <li><a href=’#’ title=’Menu 4′>Menu 4</a></li>
          <li><a href=’#’ title=’Menu 5′>Menu 5</a></li>
        </ul>
      </div>
    </div>

 

 
Kemudian paste kode dibawah tepat di atas kode ]]></b:skin>.
 

 

.textrimMenu{
position:sticky;
position:-webkit-sticky;
top:0px;
z-index:2;
background-color:#fffdf2;
font:$(fontBold);
font-size:12px;
color:#1b1b1b;
}
.textrimMenu .inner{
color:#1b1b1b;
max-width:calc($(width.all) + 40px); /* 40px dari padding (20px x 2) */;
margin:auto;
}
.textrimMenu a{
color:#1b1b1b;
white-space:nowrap;
display:block;
padding:15px 0px;
}
.textrimMenu ul, .textrimMenu li{
list-style:none;
list-style-type:none;
padding:0px;
margin:0px;
}
.textrimMenu ul{
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-wrap:nowrap;
align-items:center;
overflow-x:auto;
}
.textrimMenu ul li{
padding:0px 20px;
cursor:pointer;
position:relative;
white-space:nowrap;
}
.textrimMenu ul li:hover{
background-color:rgba(0,0,0,.15);
}
.textrimMenu ul li ul{
background-color:#4d95ee;
position:absolute;
display:block;
top:45px;
left:0px;
min-width:100%;
 
 
}

 

 
Save dan coba lihat hasilnya.
 
Cukup itu doang tutorialnya, mudah sekali bukan.
 
 
Menu dengan scroll ke samping biasanya diisi dengan sub label yang ada di blog kamu. Misalnya blog kamu membahas tentang blogging, maka menu scroll ke samping diisi dengan sub label blogging, misalnya : Tutorial Blogging, Tips n Trick, Tips Adsense, dan lain sebagainya.
 
Akan sangat bagus jika blog kamu mempunyai banyak sub label, jadi menunya bisa kelihatan sangat menarik dan tentunya bisa digeser geser, kalau Cuma kamu isi dengan 3 label saja ya tidak bisa digeser menunya.
 
Nah itulah tutorial yang sangat singkat sekali tentang cara membuat menu scroll ke samping di blog. Semoga bermanfaat sampai jumpa di tutorial berikutnya.

 

Continue Reading

Trending