Social Items

Home / Hasil penelusuran untuk cara-membuat-banner
Salah satu cara membuat tampilan blog kita menjadi Cara Membuat BannerSalah satu cara membuat tampilan blog kita menjadi indah dan menarik adalah dengan menghiasinya menggunakan banner. Mata pengunjung akan langsung tertuju kepada banner tersebut karena penampilannya yang indah. Apalagi bagi anda yang menjadikan blog anda sebagai sarana promosi bisnis anda, maka banner memegang peranan yang sangat penting demi kesuksesan usaha anda itu.

Membuat banner, kan susah. Harus menguasai desain grafis terlebih dulu untuk bisa membuat sebuah banner? Lalu bagaimanakah cara membuat banner yang gampang? Adakah cara membuat banner yang gratis di internet?

Jangan khawatir. Pada saat ini telah banyak terdapat situs penyedia pembuatan banner dengan mudah bahkan gratis.Contohnya saja:

Addesigner.com
Cooltext.com
123-banner.com/
Bannerbreak.com
Neobanners.com
Dll.

Berikut ini adalah cara membuat banner pada situs http://www.addesigner.com:

Silakan kunjungi situsnya http://www.addesigner.com. Lakukan pendaftaran. Gratis, lhoo.
Isilah data yang dipinta pada kotak isian. Setelah selesai, silakan periksa email anda untuk mendapatkan password yang telah diberikan oleh mereka.

Kembalilah ke situs addesigner.com dan lakukanlah login menggunakan email dan password tadi.
Pilih design banner anda dengan mengklik tulisan Select an ad style.
Setelah anda menemukan design banner kesukaan anda, kini anda hanya tinggal mengganti tulisan pada banner itu yang terdapat pada kotak isian.
Silakan download banner anda dengan mengklik kanan pada gambar banner dan pilih save image as.
Banner anda siap untuk ditaruh pada blog kebangggan anda.
Selesai.

Kalau ada cara yang mudah kenapa harus memilih yang sulit?

Related Posts:

Cara Menambahkan Situs Pada Google
Tukaran Link Yuk
Cara Mengefektifkan Ruang Postingan Dengan Membuat Drop Down Menu
Trik Baru Nan Praktis Posting Blog di Blogger dan Wordpress
Cara Membuat Readmore Pada Posting Blogger
Cara Membuat Kotak Komentar Pada Blogger

Cara Membuat Banner

DomaiNesia? .......

Sebelum membahas DomaiNesia dan layanan yang diberikan, saya mau sedikit cerita, flash back dulu tentang diri saya, biar pembaca juga mengenal saya.

Perkenalkan saya Agustinus Suseno, saat ini pekerjaan saya sebagai karyawan di sebuah dealer mobi di Yogyakarta, dan kerja sambilan saya adalah pembuat blog dan web, saya sendiri bukan lulusan dari IT atau sekolahan yang jurusannya ke bidang dunia internet.

Awal tahun 2008 saya mulai mengenal internet lewat teman-teman kantor yang sudah lebih dulu pandai ber internet.   Mulanya hanya untuk mengirim email saja, kemudian mulai browsing beberapa berita, lanjut ke media sosial Facebook.

Kemudian tertarik dengan blogspot, terutama karena dengan blog dapat menghasilkan uang, lalu saya mencari tutorial bagaimana cara membuat blog dengan blogspot. Dari e book yang saya beli, saya pelajari dan pahami, dari situ saya mulai mengenal yang namanya Blog.


Tidak puas dengan Blogspot, saya mulai mempelajari Wordpress, di kantor saya gunakan untuk mencari tutorial Wordpress, akhirnya dapat yang lengkap, kalo di print bisa jadi 500 halaman.

Setiap pagi berangkat kantor lebih awal, buat ngeprint tutorial tersebut, dan biar tidak ketahuan sama yang lain.

Baru baca halaman satu sudah mulai pusing, ternyata wordpress beda dengan blogpsot, terutama di tampilan dashboardnya, rasa TAKUT salah dalam menggunakan wordpress sempat menghentikan niat saya untuk belajar wordpress.

Tapi karena pengen cari duit dari wordpress, maka cara belajarnya saya rubah, setiap baca langsung di praktekkan, dan akhirnya bisa juga, seperti biasa kalo sudah bisa pasti yang ada di otak saya adalah "GENE YO MUNG KOYO NGENE" (Ternyata Cuma gitu doang).

Di e book tersebut ada tawaran untuk membuat web marketing online, karena ketertarikan saya yang tidak bisa di bendung lagi, maka saya ikuti tutorialnya, dari membuat e book sendiri, sampai membeli hosting, domain dan script.

Dari situlah saya mulai mengenal bagaimana cara membuat website, dengan menggunakan Dream Weaver, mengupload menggunakan FTP, dan seterusnya nya.


Lanjut karena rasa KEPO yang belum kelar, saya mulai belajar membuat website sendiri dengan wordpress. Kebetulan saya mendapat satu order untuk membuat web untuk toko bunga di Jogja.  Rasanya senang dan deg-deg an.

Mulailah mencari layanan hosting yang ada di seputaran kota Jogja, biar simpel dan mudah ngurusnya. Terus terang saya belum paham dengan yang namanya hosting dan kapasitasnya, makanya hosting yang saya beli waktu itu kapasitasnya 25 mbps serta satu domain.

Untuk membuat theme, saya menggunakan program Artister (bajakan), cara belajarnya juga sama dengan saat mempelajari wordpress. Mulailah membuat web untuk toko tersebut, dengan susah payah dan rasa kawatir akhirnya jadi juga.

Satu-persatu order masuk, awalnya menggunakan layanan penyedia domain dan hosting yang ada di tengah kota Jogja, karena pelayanannya kurang baik, akhirnya saya putuskan untuk pindah ke penyedi layanan di daerah Sleman.

Dengan penyedia domain hosting yang berada di Sleman ini, kerjasamanya cukup lama, hampir lima tahun, dari tahun 2009 sampai dengan 2014.  Tetapi lama kelamaan pelayanannya mulai kendor, beberapa website saya sering mengalami down, sehingga tidak bisa dibuka, atau bahkan susah untuk di upgrade jika ada pembaharuan plugin atau wordpress.

Karena sering di komplain sama klien akhirnya saya musti putar otak untuk mencari penyedia domain dan hosting sebagai pengganti, yang bisa memberikan layanan yang lebih baik.

Sempat mendapat satu penyedia yang memberikan hosting unlimited yang juga ada di Jogja, tapi sekali lagi, mengecewakan karena website saya sering down...alias jika dibuka hanya loading terus.

Secara tidak sengaja saya melihat banner iklan DomaiNesia yang terpasang di salah website, iseng-iseng buka banner tersebut, dan yang pertama kali saya lihat adalah alamat kantornya, .....nah kebetulan ada di Jogjakarta..cocok.

Kebetulan juga saya mendapat order untuk membuat website profil perusahaan minyak kelapa sawit, untuk mengetahui kredibilitas dari DomaiNesia, saya musti berkunjung ke kantornya.   Di sabtu sore hari saat saya berkunjung ke kantor DomaiNesia, saya bertemu dengan satu orang karyawan yang memang sudah menunggu saya (sudah janjian sebelumnya).

Ok juga, walaupun kantornya tidak begitu besar, dan di berikan penjelasan bahwa DomaiNesia memberikan pelayanan yang terbaik untuk saya, saya putuskan untuk order yang perdana.

Ternyata....dan ternyata, pelayanan dari DomaiNesia sangat berbeda dengan penyedia yang sebelumnya saya gunakan...DomaiNesia lebih cepat , baik di prosesnya, upload ke website dan saat website dibuka juga lebih cepat.

Pilih salah satu app favorit anda dan nikmati kemudahan instalasi dalam sekali klik!

Setiap saya ada keluhan juga cepat tanggapannya, dan tidak mesti dengan membuat ticket (jika yang tehnis sekali baru menggunakan ticket), langsung mendapat tanggapan.

Satu persatu website saya buat dengan menggunakan layanan DomaiNesia, dari Desember 2015 hingga saat ini sudah ada sekitar 20 website yang saya daftarkan melalui DomaiNesia.

Mengapa saya setia menggunakan layanan DomaiNesia? Berikut kelebihan yang dimiliki oleh DomaiNesia :

  1. Harganya terjangkau
  2. Discount yang berlaku untuk seterusnya
  3. Banyak pilihan untuk layanan hosting
  4. Proses yang cepat, tidak perlu menunggu sapai satu hari
  5. Kita dapat memilih lokasi servernya
  6. Belum pernah server down
  7. Jika ada komplain cepat di tangani
  8. Jika ada keluhan cepat diatasi
  9. Setiap ada pembaharuan di wordpress cepat prosesnya
  10. Dashboard untuk member juga mudah digunakan

Oleh karena itu, sekarang jika saya ingin mengkreasikan dan menciptakan website selalu menggunakan layanan dari DomaiNesia.  Bagaimana dengan kamu?   

Kreasikan dan Ciptakan Websitemu dengan DomaiNesia


Soracart adalah template blogger responsif dan premium untuk situs eCommerce. Terbaik di kelas dan sarat dengan banyak fitur, dibutuhkan blog Anda ke tingkat berikutnya. Soracart dilengkapi dengan berbagai widget yang akan membantu Anda mempublikasikan blog Anda secara lebih profesional. 

Sora Films tersedia dalam versi free template, tetapi tentunya ada keterbatasan dimana Anda tidak dapat memodifikasi secara keseluruhan template.  Untuk melihat demo dan mengunduh template, Anda bisa melihat di SoraCart Blogger Template

Untuk mempermudah dalam mengatur template , di bawah ini telah ada dokumentasi cara seting template. 

Top Navigation

Akses Layout/Tata Letak blog > klik Edit link pada widget Top Menu.


Contact Menu (Contact Details)

Akses Layout/Tata Letak blog > klik Edit link pada widget Contact Details.


Bagaimana cara menambahkan ikon di top navigasi?

Pilih ikon >> FontAwesome <<, Contoh <i class = "fa fa-download"> </ i>

Example: <i class="fa fa-download"></i>Download this Theme

Top Social Widget

Akses Layout/Tata Letak blog > klik Edit link di Top Social Widget.

Icons Avaliables { facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen }


Main Menu/ Mega Menu

Akses Theme blog > klik Edit Html> dan kemudian cari pengkodean berikut.

<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>Fashion</a>
<ul>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/mens'>MEN</a></li>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/women'>WOMEN</a></li>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/kids'>KIDS</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>Electronics</a>
<ul>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/mobile'>SMARTPHONE</a></li>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/laptop'>LAPTOP</a></li>
<li><a href='http://sora-cart-soratemplates.blogspot.in/search/label/smartwatch'>Smartwatch</a></li>
</ul></li>
<li><a href='#'>Features</a></li>
<li><a href='#'>Documentation</a></li>
<li><a href='#'>Download This Template</a></li>
</ul>
Pada kode diatas ada dua jenis menu yang pertama yaitu menu Normal dan lainnya adalah menu mega.
Kode biru itu normal dan kode merahnya adalah menu mega.

http://sora-cart-soratemplates.blogspot.in/search/label/mobile 
http://sora-cart-soratemplates.blogspot.in/search/label/laptop
http://sora-cart-soratemplates.blogspot.in/search/label/smartwatch
Ganti tautan di atas dengan url label Anda.

Membuat normal link 
<li><a href='#'>Features</a></li>
Kode diatas akan muncul sebagai link normal ganti saja # dengan link anda dan Features dengan teks anda.

Membuat Menu mega dengan Image
<li><a class='menu-target' href='#'>Your-primary-Label</a><ul><li><a href='Your-Label-Url'>Your-Label-Text</a></li><li><a href='Your-Label-Url'>Your-Label-Text</a></li><li><a href='Your-Label-Url'>Your-Label-Text</a></li></ul></li>
Kode di atas akan muncul sebagai menu mega cukup ganti Your-Label-Url dengan link anda dan Your-Label-Text dengan teks anda.

Catatan:-
  1. Label utama Anda: - Ini adalah label utama dari menu mega, label lain akan muncul di bawah ini. Contoh Electronics (Smartphone, Laptop, Smartwatch). Dalam contoh ini "Electronics" akan menjadi label utama Anda
  2. Your-Label-Url: - Ini adalah link dari label sekunder dari tempat posting yang muncul. Contoh http://yourblogurl.blogspot.com/search/label/LABELNAME. Dalam contoh ini "http://yourblogurl.blogspot.com" adalah url blog anda. Dan "LABELNAME" adalah label sekunder Anda.
  3. Your-Label-Text: - Ini adalah label sekunder dari menu mega, itu akan muncul di bawah label utama. Contoh Electronics (Smartphone, Laptop, Smartwatch). Dalam contoh ini "(Smartphone, Laptop, Smartwatch)" akan menjadi label sekunder Anda

Vertical Icon Menu

Akses Layout/Tata Letak blog > klik Edit link pada widget Top Menu.


Bagaimana cara menambahkan ikon di top navigasi?

Pilih ikon >> FontAwesome <<, Contoh <i class = "fa fa-download"> </ i>

Example: <i class="fa fa-download"></i>Download this Theme

Slider Widget

Akses Layout/Tata Letak blog > klik Add a Gadget> HTML / JavaScript di Slider Widget Section, lalu tambahkan salah satu dari berikut ini

Recent Posts: <div class="latestposts" data-no="5"></div>
Label / Tag Ex: <div class="tagpost" data-label="Break" data-no="5"></div>

Responsive Ads

Akses Layout/Tata Letak blog > klik Add a Gadget> HTML / JavaScript di Bagian Responsive Ads, lalu tambahkan salah satu dari berikut ini

<div id="banner-1" class="banner">  <a class="banner__permalink" href="#">  <span class="screen-reader-text">Introducing the Vacation Collection — Up to 50% Off</span> </a>  <div class="banner__inside-wrapper"> <div class="banner__inside">  <div class="banner__content">      <h3 class="banner__title">Introducing the Vacation Collection — Up to 50% Off</h3>           </div>    <div class="banner__overlay"></div>      <div class="banner__bg_image"></div>   </div> </div></div><style type="text/css">.banner {    position: relative;    color: #fff;} #banner-1 {    min-height: 130px;    background-color: #c6b78b;}#banner-1 .banner__title {    font-size: 28px;    letter-spacing: 0px;}#banner-1 .banner__subtitle {    font-size: 14px;    color: rgba(255, 255, 255, 0.85);}#banner-1 .banner__inside {    height: 130px;    padding: 8px;}#banner-1 .banner__content {    border-width: 2px;    border-color: rgba(255, 255, 255, 0.5);}#banner-1 .banner__sep {    margin-top: 8px;    margin-bottom: 8px;    width: 20%;}#banner-1 .banner__bg_image {    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs76BKrBdHDA_0msoxRPEV_LauywsaKrkKxp3Zuxfw3xJIQRFdq_sL0gVh6OP9cghVAR9PMOwa5TMdcKBCijXcXxdnRUtl6ZVzYY_mMNXed6PADWUE4biymZffHju1aEcWeGiINdb6mj0/s1600/d.png');}#banner-1 .banner__overlay {    background-color: #0a0000;    opacity: 0.3;}.banner__bg_image {    position: absolute;    top: 0;    bottom: 0;    right: 0;    left: 0;    background-position: center center;    background-repeat: no-repeat;    -webkit-background-size: cover;    background-size: cover;    z-index: 1;    -webkit-transition: -webkit-transform 1s ease-in-out;    -o-transition: -o-transform 1s ease-in-out;    transition: transform 1s ease-in-out;    will-change: transform;}.banner__overlay {    background: #000;    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    z-index: 2;}.banner__content {    word-break: break-all;    padding: 18px 30px;    display: table-cell;    vertical-align: middle;    border: 2px solid #fff;    text-align: center;    position: relative;    z-index: 3;}.banner__title {    color: inherit;    margin: 0;}.banner__inside {    display: table;    width: 100%;    box-sizing: border-box;}.banner__inside-wrapper {    overflow: hidden;    position: relative;}.banner__permalink {    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    z-index: 4;}.screen-reader-text {    clip: rect(1px, 1px, 1px, 1px);    height: 1px;    overflow: hidden;    position: absolute !important;    width: 1px;}.banner:hover .banner__bg_image, .banner__permalink:focus .banner__inside-wrapper .banner__bg_image {    -webkit-transform: scale(1.1);    -ms-transform: scale(1.1);    -o-transform: scale(1.1);    transform: scale(1.1);}</style>
Anda bisa menggunakan kode diatas atau menempelkan kode adsense anda sendiri.

Description Tiles

Akses Theme blog > klik Edit Html> dan kemudian cari pengkodean berikut.

<div class="special-wrap row"><!-- First --><div class="special-tiles"><div class="special-tiles-wrap"><span class="special-icons"><i aria-hidden="true" class="fa fa-support"></i></span><h6 class="special-heading">24/7 Customer Care</h6><p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p></div></div><!-- First One Ends --><!-- Second --><div class="special-tiles"><div class="special-tiles-wrap"><span class="special-icons"><i aria-hidden="true" class="fa fa-money"></i></span><h6 class="special-heading">Cash On Delivery</h6><p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p></div></div><!-- Second Ends --><!-- Third --><div class="special-tiles"><div class="special-tiles-wrap"><span class="special-icons"><i aria-hidden="true" class="fa fa-clock-o"></i></span><h6 class="special-heading">One Day Shipping</h6><p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p></div></div><!-- Third Ends --><!-- Fourth --><div class="special-tiles"><div class="special-tiles-wrap"><span class="special-icons"><i aria-hidden="true" class="fa fa-plane"></i></span><h6 class="special-heading">Worldwide Shipping</h6><p class="special-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </p></div></div><!-- Fourth Ends --></div>
Inilah hal-hal yang perlu Anda ubah.

  1. <h4>We Specialize in</h4> - Main Title.
  2. <i aria-hidden='true' class='fa fa-heart-o'/> -Icon (fontawesome - http://fontawesome.io/cheatsheet/)
  3. <h6 class='special-heading'>Wedding Photography</h6> -Tiles title
  4. <p class='special-text'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s. </p> -Description

Featured Product

Akses Layout/Tata Letak blog > klik Tambahkan Gadget> HTML / JavaScript di Bagian Produk Unggulan, lalu tambahkan salah satu dari berikut ini. (Anda bisa menambahkan hingga 3 widget)

<span class="labelpost" data-label="mobile" data-no="4"></span>


Random Product

Akses Layout/Tata Letak blog > klik Tambahkan Gadget> HTML / JavaScript di Bagian Produk Unggulan, lalu tambahkan salah satu dari berikut ini

<span class="randomposts" data-no="4"></span>


Cara menambahkan harga dalam produk

Akses posting blog > klik New Post> Labels, di label masukkan price_ $ 120 (Dimana $ 120 adalah harga produk)

Catatan: - rubah simbol $, jika Anda menggunakan mata uang lainnya.
Contoh Gambar:


Setelah menambahkan, klik publish.

Cara menambahkan lencana diskon pada produk

Akses posting blog > klik New Post> Label, di label masuk dari @ -75% (di mana -75% diskon pada produk)
Contoh Gambar:


Setelah menambahkan, klik publish.

Popular Product

Akses Layout/Tata Letak blog > klik Edit link pada widget produk Populer.

Recent reviews

Akses Layout/Tata Letak blog > klik Tambahkan Gadget> HTML / JavaScript di Bagian Produk Unggulan, lalu tambahkan salah satu dari berikut ini

<span class="recentcomments" data-no="4"></span>

Cart Page

Akses Page Blog > klik Halaman Baru> Judul, dalam judul masukkan "cart" (tanpa tanda petik).

Catatan: - halaman keranjang tidak akan bekerja jika Anda tidak memasukkan judul dengan benar, setelah menambahkan judul link halaman Anda harus terlihat seperti ini.
http://sora-cart-soratemplates.blogspot.com/p/cart.html or http://www.xyz.com/p/cart.html
Checkout Page

Akses Page blog > klik Halaman Baru> Judul, pada judul masukkan "checkout" (tanpa tanda petik).

Catatan: - halaman checkout tidak akan bekerja jika Anda tidak memasukkan judul dengan benar, setelah menambahkan judul link halaman Anda harus terlihat seperti ini.
http://sora-cart-soratemplates.blogspot.com/p/checkout.html orhttp://www.xyz.com/p/checkout.html
Catatan: - Untuk membuat form checkout bekerja anda harus menambahkan contact widget di blog anda. Untuk menambahkan widget ikuti langkah-langkah di bawah ini.

Akses tata letak blog > klik tambahkan gadget> Gadget lainnya, Tambahkan widget kontak.

Cara Menambahkan "Quick overview" ke Produk

Untuk menambahkan ikhtisar singkat pada produk Anda lakukan seperti yang disebutkan di bawah ini

Go to Blogger >> Settings >> Search preferences >> Description >> Edit >> Yes >> Save
Go to ke Blogger >> Tambah Posting baru >> Cari Deskripsi
Dalam Deskripsi Pencarian masukkan teks yang ingin Anda tampilkan sebagai ikhtisar produk. Setelah semuanya selesai, tekan "Publikasikan" dan produk Anda siap untuk dijual

Paypal Email dan Currency

<script>//<![CDATA[$(document).ready(function () {  simpleCart({   checkout: {     type: "PayPal" ,     email: "templatemania@yahoo.com"    }  }); simpleCart.currency( "USD" );}); //]]></script>
Ubah templatemania@yahoo.com ini dengan email anda sendiri.
Ubah USD dengan mata uang Anda sendiri (Hanya Mata Uang di Bawah yang didukung).
"USD" - Currency Name  ("US Dollar")  "AUD" - Currency Name  ("Australian Dollar")  "BRL" - Currency Name  ("Brazilian Real")  "CAD" - Currency Name  ("Canadian Dollar")  "CZK" - Currency Name  ("Czech Koruna")  "DKK" - Currency Name  ("Danish Krone")  "EUR" - Currency Name  ("Euro")  "HKD" - Currency Name  ("Hong Kong Dollar") "HUF" - Currency Name  ("Hungarian Forint") "ILS" - Currency Name  ("Israeli New Sheqel") "JPY" - Currency Name  ("Japanese Yen") "MXN" - Currency Name  ("Mexican Peso") "NOK" - Currency Name  ("Norwegian Krone") "NZD" - Currency Name  ("New Zealand Dollar") "PLN" - Currency Name  ("Polish Zloty") "GBP" - Currency Name  ("Pound Sterling") "SGD" - Currency Name  ("Singapore Dollar") "SEK" - Currency Name  ("Swedish Krona") "CHF" - Currency Name  ("Swiss Franc") "THB" - Currency Name  ("Thai Baht")"BTC" - Currency Name  ("Bitcoin")
Pagenavigation Results

<script type='text/javascript'>  /*<![CDATA[*/    var perPage=8;    var numPages=6;    var firstText ='First';    var lastText ='Last';    var prevText ='« Previous';    var nextText ='Next »';    var urlactivepage=location.href;    var home_page="/";  /*]]>*/</script>
Ubah nilai var perPage = 8; Dari 8 ke angka yang kamu mau (Archive).

Selamat berkarya, dan sekali lagi untuk melihat demo dan mengunduh template, Anda bisa melihat di SoraCart Template 

Cara Setup Template Blogger Online Shop SoraCart

Langganan: Postingan (Atom)

Subscribe Our Newsletter