Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Dipertengahan bulan oktober 2016 ini ada yang baru dari tampilan Google Adsense (GA), google adsense berubah tampilan menjadi material design  terlihat lebih elegan, menarik dan sepertinya lebih nyaman. Tapi sepertinya baru tahap uji coba saja, melihat response dari user atas tampilan baru ini terlebih dahulu

Apa yang baru dari tampilan google adsense 2016?

Beberapa fitur baru yang saya temukan anda bisa drag & drop widgetnya, Card UI (anda bisa pin yang anda suka), menu hamburger (navigasi), anda juga akan mendapati halaman antarmuka baru dari website Google Adsense, dll. Berikut screenshot halaman baru Google Adsense.

  1. Menu Navigasi berpindah dari atas ke samping sebelah kiri
  2. BIsa Pin dan Unpin Widget
  3. Bisa drag Widget
  4. Dan perubahan-perubahan tampilan dan menu lainnya.


Bagaimana? Cukup keren kan seperti Material Design di Android. Sayangnya belum responsive ketika saya mencoba untuk mengecilkan window nya. 

Berikut beberapa screnshoot tampilannya :

















Membuat Toko Online dengan Blog

Pada kesempatan ini, saya akan sedikit berbagi tentang cara membuat toko online pakai blog. Kenapa pakai Blog? karena bisa kita buat secara gratis sehingga hal ini bisa menekan budget kita untuk membuat toko online.


Pembuatan blog bisa kita lakukan dengan menggunakan Blogger, Wordpress ataupun yang lainnya. Namun kali ini saya akan membahas cara membuatnya menggunakan Blogger. Karena saya sudah sangat familiar dengan platform ini, dibanding wordpress dan yang lainnya. Banyak yang mengatakan , untuk membuat toko online lebih baik menggunakan platform yang berbasis CMS seperti wordpress dan joomla, tapi entahlah kenapa saya masih setia menggunakan blogger milik google ini. Hee



Salah satu toko online yang saya buat dari blogger adalah tokosausan.com , web toko online usaha milik keluarga kecil saya yang menjual berbagai produk-produk syar'i, seperti gamis, jilbab dan yang lainnya. Blog tersebut sudah saya modifikasi sedemikian rupa agar menjadi toko online yang profesional.

3 kunci utama yang saya pakai dalam membuat toko online dari blogger. ke 3 kunci inilah yang saya maksimalkan sedemikian mungkin agar toko online tersebut bisa menjadi toko online yang baik.

  • Memilih Nama Domain yang Unik dan Relevan
Fungsi dari domain yang unik adalah agar web toko online kita bisa berbeda dengan toko online yang serupa lainnya dan juga agar  mudah diingat oleh prngunjung toko online kita. Karena biasanya saata pembeli merasa puas, ia akan mengunjungi kembai toko online kita. Dan ini alasan kenapa kita harus membuat nama domain yang mudah diingat.
  • Memakai Template Toko Online
saya menggunakan template yang memang benar-benar disiapkan untuk toko online, di google banyak tersedia template toko online yang bisa kita dapatkan secara gratis, namun bila kita menginginkan template yang lebih bagus dan profesional lebih baik menggunakan template premiun/berbayar. Memilih template jenis toko online bisa memudahkan kita mengatur tampilan dan bisa memanfaatkan menu-menu bawaan yang disediakan pembuat template tersebut. Dengan tampilan yang pas bisa menarik pengunjung untuk membeli di toko online milik kita. Tidak disarankan untuk memakai template yang berjenis berita/News karena kita akan mengalami kesulitan dalam mengedit template, karena banyak sekali menu-menu dan widget yang perlu kita perbaiki dan sebagainya.
  • Optimasi SEO di Toko Online
Bab ini wajib dipelajari oleh setiap blogger yang ingin sukses dalam dunia blog termasuk dalam membangun toko online. Hampir semua orang yang sukses mengurus blog, sebelumnya mempelajari SEO terlebih dahulu. SEO adalah kependekan dari Search Engine Optimization yaitu  serangkaian upaya yang dilakukan oleh seorang webmaster pada sebuah website yang bertujuan untuk meningkatkan visibilitas sebuah halaman website menjadi lebih baik di mesin pencari, terutama Google. (google) atau ringkasnya tentang optimasi blog/web/artikel agar mudah ditemukan di mesin pencari seperti google, yahoo dll.

Demikian sedikit tips membuat toko online dengan blog. Pada dasarnya jika kita ingin membuat toko online dari blog adalah dengan memulainya. Percuma kita baca puluhan artikel yang kita cari dan dapatkan kesana-kemari namun kita tidak memuainya untuk membuat blog maupun toko online. Setelah memulai dan kita buat blog atau toko online maka kita akan mengalami trial & eror dari sanalah kita dapat memahami dan belajar tentang ilmu membuat blog dan toko online.

Semoga dipraktekan!!!!

Bagaimanakah cara buat blog yang keren? Yang terlihat bagus, rapih dan menarik?. Salah satu hal yang perlu kita lakukan pada blog kita adalah dengan mengedit tampilan blog. Adapun Cara mengedit tampilan blog yang keren bisa dengan menggunakan menu sesuaikan template di menu template pada blogger atau juga dengan mengganti template bawaan dengan template yang kita download baik yang gratis maupun berbayar alias premium. Untuk mendapatkan template blog yang gratis bisa di search di Google disana terdapat banyak sekali template blogger yang bisa kita download secara gratis, untuk yang versi premiumpun banyak, tinggal kita search lagi.

Baik, kita lanjutkan pembahasan intinya. Setelah kita mendownload template eksternal blogger, hal yang wajib kita lakukan adalah mengedit tampilan blognya sesuai dengan keadaan blog kita. Karena biasanya berbeda antara konten dalam contoh template dengan tema konten kita, sebagai contoh terkadang kita tertarik dengan salah satu template akan tetapi dalam contoh template tersebut ternyata tema blognya tentang otomotif, sedangkan blog yang kita miliki adalah blog yang membahas tentang resep masakan, bisa dibayangkan menu apa yang tertulis pada template blog tersebut pastilah tertulis pada menu template tersebut seperti “Service” “Mobile” dll berbeda dengan menu yang kita inginkan sebagai blog resep makanan seharusnya menu yang ada di blog ini adalah menu “Masakan Jawa” “Masakan Sunda” “Masakan Padang” dll.

Baca Juga :  Tips membuat Logo Blog yang Bagus dan Mengesankan

Nah satu bagian yang pertama-tama kita edit adalah tombol menu navigasi horizontal ini yang ada di bar, biasanya menu ini berada di atas logo/nama blog ataupun dibawah logo/nama blog kita. Bentuknya ada yang horizontal maupun vertikal atau biasa kita sebut juga dengan menu dropdown dan da juga sub menu dropdown. Adapun cara mengedit menu di blog ini bisa kita lakukan dengan mudah memanfaatkan menu template dan edit HTML di blogger dengan rumus edit template versi bang Rian yaitu Copy, Find dan Paste biasa disebut juga CFP.

Adapun caranya sebagai beikut :

  • ·         Masuk Akun Blogger
  • ·         Pilih Menu Template
  • ·         Pilih Edit HTML

CFP Mode ON

Copy
Buka tab baru dan buka blog/situs kita dan lihat menu yang ada, pilih menu yang akan diganti dan silahkan di Copy kata-kata dalam menu tersebut

Find & Paste
Kembali ke tab awal di edit HTML itu, klik sembarang didalam kotak script html kemudian Find (ctrl+f) paste kata-kata pada menu yang tadi di kotak telusur find yang ada dipojok kotak html sebelah kanan. Setelah ketemu silahkan ganti kata-kata tersebut dengan Kata-Kata yang kita inginkan untuk tempil sebaga menu dalam blog kita. Untuk mengganti menu-menu yang lain silahkan ulangi rumus CFP dari awal sampai habis hingga selesai.

Setelah selesai, silahkan simpan hasil editan tersebut dengan memilih menu Simpan Template.
Buka blog/situs kita, \tampian menu sudah berubah terlihat lebih bagus, keren, maco dan kece..hee

Sebenarnya tahap ini belum selesai, karena kita belum mengisi link pada menu tersebut, pada tulisan berikutnya insyaAllah kita akan membahas tentang Cara mengisi link pada menu blog dengan menggunakan Rumus CFP, sebagai bocoran biasanya link menu berisi link salah satu postingan ataupun laman atau bisa juga diisi dengan link search Label (postingan berdasarkan label). Untuk blog Bang Rian sendiri kebanyaka menggunakan link Search Label sebagai link dalam menu.


Sebagai contoh saya sudah buatkan video tutorial Mengedit Menu di blog dengan HTML disini (ga sampe 2 menit) :






Mungkin sebagian kita sudah pernah mengunjungi blog ngawicybers.blogspot.co.id, blog yang berjalan sesuai dengan mottonya yaitu Informatif, Edukatif dan Religius. Yang berisi tentang informasi-informasi terbaru yang diselipkan dengan nilai-nilai edukasi dan religi. Bisa dikatakan blog ini berbasis berita, tapi berbeda dengan blog pemberitaan lainnya. Dalam blog ini bukan hanya nilai informasi yang didapatkan tapi juga ada nilai-nilai pendidikan didalamnya. Selain itu, setiap postingan disana juga selalu di Imbangi dengan nilai-nilai Agama Islam yang mulia. Berhubung saya menyukai dunia teknologi informasi juga, maka disana saya posting hal-hal yang berkaitan dengan dunia teknologi dan informasi seperti tentang Komputer, Laptop, Tablet, HP dan yang lainnya dan akhir-akhir ini saya sedang seru-serunya mempelajari dan mempraktekan dunia BIsnis baik offline maupun online juga. Maka saya masukan konten-konten yang berkaitan dengan dunia Bisnis. AL Hasil blog ini menjadi seperti blog gado-gado, blog yang membahas hal apapun yang berkaitan dengan diri saya, kesenangan, hobi dan minat saya. Blog gado-gado juga ga selau berkonotasi negative kok, kalau kita lihat dan rasakan gado-gado yang asli juga kan banyak campur-campuran gitu yah, tapi masih enak untuk dimakan dan dinikmatin bukan?. Hal ini sama saja dengan blog gado-gado walaupun isinya macam-macam tapi masih nikmat untuk dibaca dan diperhatikan.
  • Memilih Jalur Blogger Independen

Semenjak akun mendapatkan Persetujuan secara penuh oleh Google Adsense, semangat untuk ng-Blog mulai tumbuh lagi. Padahal sebelumnya sempat vakum beberapa tahun, karena beberapa kesibukan di dunia nyata yang tak bisa ditinggalkan. Kali ini admin berusaha untuk menyajikan blog ini untuk lebih baik dan professional lagi agar nilai-nilai sesuatu yang kita bagikan dalam blog ini bisa bermanfaat besar bagi siapapun, kapanpun dan dimanapun. Kami mohon ijin kepada beberapa pembaca setia untuk mengalihkan alamat domain blog dari ngawicybers.blogspot.co.idmenjadi BangRian.Net. hal ini admin lakukan Karena ada beberapa pertimbangan dan kami berharap dengan perubahan domain ini bisa menjadikan kami bisa berkembang lagi sebagai blogger independen yang tidak terikat dengan organisasi manapun dan tanpa kepentingan pihak manapun. Sesuatu yang baru saat ini saya lakukan bukanlah mengganti apa yang telah saya pegang erat di blog sebelumnya, karena pada intinya saya bukan merubah sesuatu yang baik sebelumnya akan tetapi mengembangkan kebaikan itu menjadi lebih baik lagi.


Salam Idependen





Bagi orang yang tidak mengenal dunia Blog, kata-kata ini terdengar asing dan Istimewa, tapi untuk seorang blogger kata-kata ini udah menjadi kerjaan dan makanan mereka setiap harinya.  Kata Riset, Analis dan Optimasi jadi senjata utama mereka, mau tidak mau dan suka tidak suka mereka harus melakukannya bila ingin nasib blognya lebih baik lagi.

Hal ini juga terlihat dari beberapa aplikasi pendukung ngeblog yang biasa digunakan oleh para blogger seperti Google keyword planner, Google analytics dll.

Seorang blogger memang dituntut untuk kreatif mencari peluang yang ada dan memahami keinginan para pencari berbagai solusi permasalahan dan berbagai informasi yang belum diketahui. Sebagai penyedia konten kita pun tidak bisa sembarangan dalam posting, apalagi sampai memberikan informasi yang salah dan menyesatkan harus ada referensi yang jelas dan bisa dipertanggungjawabkan.

Kitapun harus punya rencana dan target pemirsa kita, setelah memiliki rencana dan target maka mulailah kita melakukan riset atau penelitian kecil-kecilan. Hal ini dimaksudkan untuk mengetahui apa saja sih yang biasa dicari oleh orang di Google, nah setelah menentukan satu bahasan yang akan dibuat maka kita juga melakukan riset kata-kata atau keyword apa saja yang biasa digunakan para pencari informasi dan keyword apa saja yang relevan (berhubungan) dengan bahasan kita itu. Untuk urusan riset meriset banyak cara yang bisa dilakukan, seperti melakukan riset keyword di Google keyword planner contohnya, kita bisa mendapatkan banyak ide kata relevan dari bahasan yang akan kita bahas, tinggal bagaimana kota mengolah kata-kata tersebut supaya enak dibaca oleh pengunjung dan yang terpenting adalah sampainya informasi yang kita sampaikan melalui blog tersebut. Sebenarnya banyak metode riset yang lainnya, insyaAllah akan kita bahas nanti secara khusus tentang bagaimana cara riset keyword di blog?




Tugas kita belum selesai, setelah kita membuat konten/postingan satu bahasan yang sudah kita riset keyword nya, kita juga harus melihat perilaku pengunjung blog atau biasa kita sebut juga menganalisis, untuk menganalisa blog kita bisa menggunakan aplikasi milik Google juga yaitu Google Analytics disana kita bisa melihat berapa pengunjung kita dalam hari ini, bahkan bisa kita lihat juga jumlah pengunjung secara realtime. Selain itu kita juga bisa melihat berapa rata-rata durasi yang dihabiskan pengunjung dalam mengeksplore blog kita, tentu saja semakin lama durasi semakin bagus, karena itu salah satu tanda pengunjung kita betah dan tertarik untuk membaca tulisan-tulisan yang lainnya dalam blog kita.


Setelah menganalisa kita akan tau, apakah blog kita sudah optimal seperti yang kita harafkan atau belum. Kalau masih jauh dari target harapan maka kita lakukan Optimasi, beberapa optimasi yang harus kita lakukan adalah yang pertama itu tulisan, kita harus perbaiki tulisan kita perbanyak lagi tulisan supaya blog kita kaya akan informasi dan biasanya pengunjung suka dengan blog yang memberikan informasi secara lengkap tidak setengah-setengah dan bersambung-sambung. Apalagi bila blog kita juga dipakai untuk jualan, mungkin teman-teman bisa baca juga yang ini : Memaksimalkan Fungsi Blog Untuk Pemasaran Produk

Selain optimasi tulisan, kita juga perlu optimasi tata letak widget kita, kita tambah lagi widget-widget yang diperlukan tujuannya bukan hanya mempercantik blog tapi orientasi kita adalah kemudahan bagi pengunjung untuk mendapatkan informasi yang diinginkan dari blog kita. Dan widget yang bermanfaat dan kurang optimal lebih baik dihapus saja. Terakhir lakukan Optimasi tampilan blog dengan edit HTML, nah ini sedikit ruwet, kita harus berhati-hati bermain disini karena bila ada kesalahan maka template kita bisa berantakan. Tapi jangan takut juga coba aja untuk belajar edit HTML, karena jadi seorang blogger tuh perlu trial dan eror yang banyak, buat pengalaman dan pengetahuan kita.

Eet, belum selesai, nih baca Juga : Tips Membuat Logo Blog Yang Bagus dan Mengesankan

Oke saya rasa cukup dulu untuk saat ini, kalau ada pertanyaan silahkan tulis di kolom komentar'.







Awal saya mengenal blog sekitar tahun 2011, saat itu saya masih duduk di Bangku Sekolah Menengah Kejuruan (SMK) yang salah masuk jurusan, loh kok bisa?
Begini ceritanya...hee
Mungkin ada yang bertanya "elu kan lulusan Otomotif, kenapa sukanya sama bidang komputer, kenapa ga kerja atau buka bengkel aja".
Ketika lulus SMP orangtua melanjutkan saya ke sekolah SMK (sekolah menengah Kejuruan). Nah ketika itu sekolah ini baru buka beberapa jurusan peminatan baru diantaranya Otomotif, Elektro, dan Teknik Informatika. Dan saya memilih jurusan Teknik Informatika sebagai jurusan yang saya pilih.
Sejak SMP memang sudah suka dengan komputer dan ketika itu baru gencar-gencarnya dunia internet. Warnet juga masih bisa dihitung jari, mungkin dalam satu desa saja belum tentu ada 1 warnet dan Android juga belum muncul saat itu.
Tapi sayangnya jam praktek komputer di SMP sangat terbatas, kalaupun ada paling dapat jatah 1 komputer berdua, yang dari SD sudah belajar komputer biasanya yang megang kendali komputernya,nah yang di SD ga ada praktek Komputer (kaya saya), melongo aja ngeliatin yang lagi ngetik.
Karena gereget itulah saya pilih jurusan Teknik Informatika(TI). Pada hari pertama sekolah, ternyata siswa yang mengambil jurusan Teknik Informatika sangat sedikit, akhirnya pihak sekolah memutuskan membatalkan jurusan TI dan meleburkan calon siswa TI ke Jurusan lain, nah... ketika itulah saya terlempar ke Jurusan Otomotif dan menjalani hari-hari sekolah dengan jurusan yang tidak begitu diminati.
Tapi Alhamdulillah di sekolah ini masih bisa belajar komputer dan ketemu guru ganteng Gawi Bastian yang ngajarin Ilmu Komputer n sejak itulah saya buat blog http://bit.ly/2bJySDW yang memadukan antara ilmu informatika dan hobi menulis.
Di Tahun 2012-2013 saya sempat vakum nge-Blog karena saya kerja di Pabrik yang jarang banget liburnya, tapi Alhamdulillah kerja disana akhirnya saya punya Laptop sendiri yang awalnya saya harus bulak-balik ke warnet sekarang udah bisa online sendiri dirumah, itulah pertama kali saya punya Laptop sendiri, sekarang sudah rusak dan belum ada gantinya😂..hee
Baru awal-awal 2016 ini saya aktif ngblog lagi dan nyobain daftarin akun Google Adsense (iklan google) di Blog ini, awalnya mendapatkan penolakan karena tidak sesuai dengan ketentuan Google dsb. Saya optimasi lagi blognya saya perbaiki dan rapihkan lagi blognya saya posting setiap-hari dengan tulisan sendiri (original) dan diselingi copas-copas indah 😉.
Beberapa bulan kemudian saya daftarkan lagi blog ini tapi dengan akun Gmail yang berbeda dan Alhamdulillah beberapa Minggu kemudian ada email dari Google berupa Ucapan Selamat bahwa akun Google Adsense saya di setujui sepenuhnya. 😂 Ruaaar Biasaa...
Saya mengira ini adalah akhir dari perjuangan,hee. Setelah lihat hasil hariannya, ternyata ini adalah awal perjuangan. Ibarat main Game mungkin ini saya baru daftar akun dan level satu, masih banyak banget kekurangannya, tapi ya dari sini kita baru tau bahwa nge Blog itu bukan iseng-iseng tapi harus diseriusin (kita aja ga suka kan dimainin..hee) apalagi udah ada kesempatan buat ngasilin Pundi-Pundi Rupiah pasti kita lebih semangat.
Bagi temen-temen yang baru mulai ngeblog, jangan nyerah yang penting konsisten ngeblognya cari ide-ide baru buat optimasi blognya. Sama saya juga masih belajar dan kita masih sama-sama belajar sampai nantipun mungkin kita harus terus belajar.
Semoga menyemangatkan😎

Google Adsense adalah program Google yang memberikan penghasilan kepada blogger atau YouTuber melalui klik iklan yang dipasang di blog atau di youtube



Malam Ini saya kedatangan  seorang tamu yaitu sepupuh sekaligus sahabat lama saya. Adit namanya otong panggilannya (nama bagus-bagus dipanggil otong yah..hee) iya itulah panggilan orang betawi untuk anak laki-laki yang masih kecil dipanggilnya tong-tong –tong.
Kali ini dia ga datang sendiri, dia datang ditemani satu buah motor , seperangkat alat laptop dan sebungkus cakwe, yaah tetep aja dia sendiri ya. Kedatangannya sendiri bukan tanpa alasan. Dia sudah beristri namun saat ini istrinya tinggal di Cirebon bersama orang tuannya untuk mengurus bayinya yang masih kecil.
Kedatangannya adalah untuk melanjutkan pembicaraan dan pelajaran tentang Blog yang telah kita diskusikan sebelumnya. Saat ini dia sedang membuat dan mengembangkan blog karena salah satu tuntutan pekerjaan saat ini yang berkaitan dengan dunia pemasaran atau marketing.
Beberapa materi pelajaran yang ia tanyakan sebagian besar tentang tampilan blog, membuat logo blog, membuat banner promosi di blog dan cara mengaktifkan atau mengedit link menu navigasi, baik, kita bahas satu persatu.
  •    Membuat Logo Blog

Ini salah satu bagian terpenting dalam sebuah blog yaitu logo. Logo menjadi sebuah gambaran identitas blog yang mewakili keseluruhan isi blog, pembahasan tentang logo telah dibasah panjang lebar oleh Desainer-desainer grafis logo, maka kita harus sedikit banyak tahu tentang ilmu desain grafis juga ketika kita ingin membuatnya. Atau bila kita memiliki uang lebih bisa membeli atau meminta dibuatkan logo oleh desainer grafis dan harganya pun lumayan mahal. Jadi saran saya kalau untuk pemula lebih baik buat sendiri saja dan seadanya. Banyak juga blog-blog yang tidak memiliki logo, ia hanya menuliskan judul blog saja di blognya.
Pada kesempatan kali ini juga kita berdua membuat logo blog dengan menggunakan aplikasi/software CorelDraw X7. Untuk pebuatan logo memang sangat disarankan untuk memakai aplikasi pengolah gambar yang berbasis vector seperti coreldraw, Adobe Illustrator dll, tidak disarankan membuat blog dengan aplikasi berbasis bitmap seperti Adobe Photoshop, Adobe Ligththrom dll.
Saya juga sedikit menjelaskan cara membuat logo yang baik, menentukan ukuran logo yang pas untuk blog, membuat logo agar transparan dan cara export hasil logo di corel . 
Baca juga yang ini :  Membuat Logo Blog yang Mengesankan
  • Membuat banner Promosi di Blog dengan Baik

Beberapa orang mengalami kesulitan dalam masalah ini termasuk saudara saya, ia membuat banner blog dengan coreldraw tapi hasilnya kurang bagus dan pecah. Ada beberapa factor yang mengakibatkan gambar yang kita export dari coreldraw diantaranya :

  • ·         Resolusi / ukuran gambar terlalu kecil
  • ·         Kesalahan pada saat export hasil coreldram menjadi format gambar
  • ·         Kesalahan saat mengupload gambar ke Internet dan mengambil alamat gambar. Setelah kita praktekan bersama dan memperbaiki beberapa kesalahan diatas maka jadilah gambar promo blog yang lumayan bagus dan tidak pecah.
  • Mengaktifkan link Menu Navigasi di Blog


Baca Juga : Cara Mudah Mengedit Menu Blog dengan Edit HTML

Sebenarnya ini adalah masalah basic yang harus diketahui oleh seorang blogger walapukun kita hanya membuka menu Template Edit HTML tapi sebenarnya ilmu yang kita praktekan bukan 100% ilmu coding. Kita hanya memaksimalkan menu Copy, Find & Paste (Ilmu CFP). Kalau kita sudah paham ilmu CFP ini, maka insyaAllah kita bisa membedah apapun yang berkaitan dengan template dan tampilan blog. Untuk menu navigasi cara mengedit link nya sebgai berikut :


  • ·   Copy link yang akan dijadikan tujuan menu navigasi (biasanya menu label, atau laman khusus)
  • ·  Buka menu Template dan edit HTML dan Find kata yang ada di menu navigasi yang akan kita rubah (CTRL+F)
  • ·  Jika sudah ketemu ganti Url bawaan template (biasanya symbol #)  dengan url link yang telah kita copy tadi.

Setelah kita mengedit beberapa tampilan blog, dia bercerita bahwa penjulan produk melalui blog/web/market place sangat efektif pada saat ini.  Bahkan perusahaan induk tempat ia bekerja saat ini juga menggunakan website untuk melakukan promosi dan transaksi. Jadi saingan dia dalam bermain blog bukan hanya sesama marketing lainnya saja, tapi perusahaan tempat ia sendiri menjadi dalam optimasi blog. Mantaap… Semoga mangagumkan, hee^^


Sebelum kita membahas tentang blog kita abaca dahulu : Memaksimalkan Fungsi Blog untuk Pemasaran Produk 
oke lanjut kita bahas tentang logo blog.

Logo Blog adalah sebuah gambaran identitas suatu blog yang kita miliki. Logo blog merupakan sebuah symbol yang tidak bisa dibuat asal-asalan ataupun disepelekan. Jasa pembuatan logo blog juga tidak murah harganya bahkan sampai jutaan rupiah, karena memerlukan ide filosofi yang dalam agar sesuai dengan visi, misi dan tujuan blog tersebut.

Maka dari itu sebaiknya kita membuat blog sendiri saja, agar lebih mengesankan dan yeng terpenting adalah bisa menekan budget kita dalam membuat dan membangun blog. Pembuatan logo blog bisa kita lakukan dengan bantuan aplikasi atau software yang berbasis vector seperti CoreDraw dan Adobe Illustrator ataupun yang lainnya. Buatlah logo Blog yang sesederhana mungkin akan tetapi tidak mengurangi makna dari gambaran blog yang kita miliki.

Selain dengan symbol sebenarnya kita juga bisa membuat logo blog dengan teks saja. Cara ini mungkin lebih mudah , tidak membutuhkan ide yang begitu dalam, cukup dengan bermain jenis huruf dan font maka kita bisa langsung pakai pada blog yang kita miliki.

Agar logo blog teks terlihat lebih menarik buatlah logo blog yang berbentuk teks tranparan (tanpa Background) caranya :

  • ·         Buat teks judul blog di CorelDraw
  • ·         Export Hasil teks coreldraw dengan format PNG (CTRL+E)
  • ·         Sesuaikan ukuran dan resolusi di settingan eksport
  • ·         Klik Oke
  • ·         Selesai, logo siap dipasang di blog kita

Untuk contoh blog yang memakai teks transparansi adalag blog saya senidiri ini (ngawicybers) Cukup bagus, simple dan yang terpening adalah mengesankan.

Ok. Terimakasih sudah menyempatan membaca tulisan yang mengesankan ini, selamat mencoba.

Cara Mengatasi Navigasi Situs Sulit Adsense
Cara Mengatasi Navigasi Situs Sulit Adsense - Pada kali ini saya akan membahas cara mengatasi navigasi situs sulis adsense atau mengatasi penolakan adsense karena navigasi. Navigasi situs sulit merupakan bentuk penolakan dari google adsense disaat situs tidak memiliki manajemen link yg benar. Navigasi situs sulit sering dijumpai pada penolakan pengajuan adsense untuk situs dengan top level domain. Rata-rata permasalahan awal saat mengajukan permohonan adsense non-hosted adalah masalah navigasi. Ini karena pada saat membuat akun adsense hosted dari blogger, kemungkinan adsense tidak terlalu mempertimbangkan masalah navigasi. Bagi anda yg ingin mengatasi navigasi situs sulit pada penolakan adsense, berikut hal-hal yg harus anda lakukan.


Masalah Navigasi Situs Sulit Adsense

Dari email yg dikirim pihak google adsense kita bisa lihat, bahwa situs yg kita ajukan ke adsense sulit untuk dijelajahi, tautan rusak, pengalihan, akses terbatas, atau blog sedang dibuat. 
Cara Mengatasi Navigasi Situs Sulit Adsense

Tapi sebenarnya maksud dari adsense menurut saya bukan seperti itu, melainkan tidak ditemukan halaman-halaman penting untuk sebuah situs top level domain. Makanya google menolak permohonan kita dengan menulis navigasi situs sulit. Untuk mengetahui halaman penting apa yg harus ada sebelum mengajukan permohonan ke adsense, simak langkah-langkah di bawah.

Mengatasi Navigasi Situs Sulit Adsense

Setelah saya googling, akhirnya saya mendapati cara mengatasi navigasi situs sulit pada adsense. Ada beberapa cara yg mungkin bisa diterapkan ke blog atau situs anda.

Membuat Halaman Kebijakan, Kontak dan Tentang Situs

Kebijakan pelayanan tersebut mencakup penggunaan cookie, log file, penggunaan iklan dll. Kontak merupakan halaman yg berisi formulir yg berguna bagi pengguna untuk menghubungi admin situs. Sedangkan halaman tentang merupakan informasi pribadi dan tentang untuk apa dana apa tema dari situs. Menurut para webmaster, halaman-halaman tersebut sangat penting dan hal wajib ada di blog sebelum diajukan ke adsense. Ada juga yg menyarankan untuk membuat daftar isi (sitemap) dan disclaimer. Menurut saya buatlah kelima halaman tersebut agar tidak berulang kali ditolak adsense.

Untuk membuat kebijakan pelayanan (privacy policy) dan disclaimer, bisa dibuat dengan generator. Googling aja dengan kata kunci "privacy policy generator" atau disclimer generator. Untuk membuat daftar isi bisa lihat di cara membuat daftar isi otomatis di blog.

Membuat Widget Arsip, Artikel Terpopuler, Artikel Terbaru dan Label

Menurut para webmaster, widget diatas tidak terlalu menjadi pertimbagan adsense pada saat mereview situs. Namun mereka menyarankan untuk memasangnya di blog, karena merupakan sumber internal link. Widget ini juga membantu penggunan menjelajahi blog dengan mudah. Untuk membuat widget popular post dan artikel terbaru bisa baca cara membuat widget popular post dan cara membuat widget recent post di blog.

Demikian tutorial saya cara mengatasi navigasi situs sulis adsense atau cara mengatasi penolakan adsense karena navigasi. Semoga artikel ini dapat bermanfaat bagi kita semua. Sampai saat ini pun saya masih ditolak oleh adsense, semoga kedepannya saya diterima oleh adsense. Jangan lupa share dan like.

Cara Memasang Komentar Facebook Responsive Di Blog
Cara Memasang Komentar Facebook Responsive Di Blog - Pada kali ini kita akan membuat facebook comment responsive atau cara memasang komentar facebook responsive di blog. Komentar facebook responsive sama halnya dengan komentar pada blogger. Bedanya adalah setiap ada komentar akan langsung ditampilkan di halaman facebook. Facebook menyediakan plugin comment yg bisa kita pasang di blog, tapi sayangnya plugin komentar tersebut tidak responsive. Tapi kali ini kita akan membuat widget komentar facebook menjadi responsive. Bagi yg ingin memasang komentar facebook responsive di blog, simak langkah-langkah berikut ini.

Meta Tag Komentar Facebook

  • Login ke akun blogger.
  • Kemudian klik menu template.
  • Klik edit html.
  • Pastekan kode berikut dibawah kode <head>
<meta content='Kode ID Admin Facebook' property='fb:admins'/>
<meta content='Kode ID Aplikasi Facebook' property='fb:app_id'/>

Script Komentar Facebook Responsive

  • Login ke akun blogger.
  • Kemudian klik menu template.
  • Klik edit html.
  • Pastekan kode berikut diatas kode </head>
<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){
 var url = location.protocol+'//'+location.host+location.pathname;
  var containercm_width = $('#container-commentfb').width();
    $('#container-commentfb').html('<div class="fb-comments" ' +
    'data-href="'+url+'"' +
    ' width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( );
  });
//]]>
</script>

HTML Komentar Facebook

  • Login ke akun blogger.
  • Kemudian klik menu template.
  • Klik edit html.
  • Pastekan kode berikut diatas kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if>
  • Klik simpan template

Tulisan warna merah adalah jumlah komentar yang muncul. Tulisan warna biru lebar komentar facebook. Sesuaikan dengan lebar halaman posting anda. Demikianlah tutorial cara membuat facebook comment responsive di blog atau cara memasang komentar facebook responsive di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.

Cara Membuat Tombol Back To Top Di Blog
Cara Membuat Tombol Back To Top Di Blog - Pada kali ini kita akan membuat tombol back to top di blog atau memasang tombol kembali ke atas di blog. Tombol back to top sangat berguna bagi pengunjung blog karena dapat mempermudah mereka kembali ke bagian atas dengan sekali klik saja. Tombol back top top juga tidak memperlambat loading blog dan dapat mempercantik blog. Tombol Back to top berguna ketika sebuah postingan blog memiliki jumlah komentar yg banyak atau postingan yg terlalu panjang ke bawah. Bagi yg ingin membuat tombol back to top di blog, ikuti langkah-langkah pembuatan tombol back to top di bawah ini. Demo

Script Tombol Back To Top

  • Login ke akun blogger.
  • Kemudian klik menu template.
  • Klik edit html.
  • Pastekan kode berikut diatas kode </head>
<script style="text/javascript">
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

CSS Tombol Back To Top

  • Kemudian klik menu template.
  • Klik edit html.
  • Pastekan kode berikut diatas kode ]]></b:skin>.
div#page {max-width: 900px;margin-left: auto;margin-right: auto;padding: 20px;}
.back-to-top {position: fixed;bottom: 2em;right: 0px;text-decoration: none;color: #000000;font-size: 12px;padding: 1em;display: none;}.back-to-top:hover {text-decoration: none;}


HTML Tombol Back To Top

  • Kemudian klik menu tata letak.
  • Klik tambahkan element/ add gadget.
  • Lalu pilih HTML/Javasript.
  • Kemudian pastekan kode di bawah ini.
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZzjXJg_q5BWgi7UIYUd07d__I34qRoig5xE9DWSP5cDJDzGR-_zOFQzWdD8SKA7PovCIQ10lgA8w5T_MIpsseZVuRlr1khSHxq3eSoobk9CIpC80mhWSCDE2u_wJykmu7LI1IwlCVP0/s1600/back-to-top.png" alt="Back to Top"/></a>
Demikianlah tutorial mengenai cara membuat tombol back to top di blog atau cara memasang tombol kembali ke atas di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.
Cara Memasang Flag Counter Di Blog

Cara Memasang Flag Counter Di Blog
Cara Memasang Flag Counter Di Blog - Pada kesempatan kali ini saya akan menjelaskan tutorial cara memasang flag counter di blog atau membuat widget visitor counter di blog. Flag counter merupakan sebuah widget yg menampilkan bendera dari negara mana saja pengunjung blog berasal. Widget Flag Conter juga dapat menampilkan jumlah pengunjung dari blog. Tampilan Flag Counter juga sangat dinamis dan ringan serta dapat menambah efek visual pada blog. Bagi anda yang ingin memasang widget flag counter di blog, simak langkah-langkah berikut.

Mendesain Flag Counter

  • Kunjungi situs flagcounter.com
  • Kemudian atur tampilan flag counter sesuai dengan keinginan
Cara Memasang Flag Counter Di Blog<
  • Kemudian klik Get Your Flag Counter
Keterangan :
  1. Maximum Flags to shows : Jumlah bendera yg ingin ditampilkan.
  2. Columns of Flags : Jumlah kolom dari widget Flag Counter.
  3. Label on Top of Counter : Judul widget.
  4. Show Flags Labels : Memunculkan nama negara.
  5. Show Pageview Count : Memunculkan jumlah pageview
  • Setelah itu klik skip jika muncul tampilan sebagai berikut.
Cara Memasang Flag Counter Di Blog

Script Flag Counter

  • Login ke akun blogger.
  • Kemudian klik menu tata letak.
  • Klik tambahkan element/ add gadget.
  • Lalu pilih HTML/Javasript.
  • Kemudian pastekan kode yg diberikan.
Demikianlah tutorial mengenai cara memasang flag counter di blog atau cara membuat widget visitor counter di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.

Cara Memasang Widget Instagram Di Blog
Cara Memasang Widget Instagram Di Blog - Pada kali ini saya akan menjelaskan tutorial cara memasang widget instagram di blog atau memasang widget berbagi foto di blog.  Instagram merupakan sebuah aplikasi layanan berbagi foto yg dapat unduh ke smartphone anda. Aplikasi Instagram sendiri sekarang tidak hanya diperuntukan untuk perorangan saja, banyak yg sudah menggunakan Instagram sebagai media promosi produk. Dengan memasang widget Instagram di blog juga akan menambah aspek visualisasi dan mempercantik blog. Bagi anda yg ingin memasang widget Instagram di blog, simak langkah-langkah berikut ini.

Dapatkan Script Widget Instagram

  • Kunjungi situs : www.intagme.com.
  • Isi form dengan memasukkan username dan hastag seperti gambar di bawah ini.
cara memasang widget instagram di blog

Pengaturan Widget Instagram

  1. Widget Type : Pilih tampilan yang anda inginkan (Grid atau Slide Show)
  2. Thumbnail Size : Ukuran widget.
  3. Photo Border : Garis pembatas.
  4. Background : Latar belakang dari widget Instagram.
  5. Sharing Button : Tombol share ke Facebook, Twitter dan Google Plus.
  • Setelah itu klik Get Code untuk mendapatkan kode dari widget Instagram.


Memasang Widget Instagram Di Blog

  • Login ke akun blogger.
  • Kemudian klik menu tata letak.
  • Klik tambahkan element/ add gadget.
  • Lalu pilih HTML/Javasript.
  • Kemudian pastekan kode yg diberikan.
  • Klik simpan.
Demikianlah tutorial cara memasang widget instagram di blog atau memasang widget berbagi foto di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.

Cara Membuat Recent Comment Di Blog
Cara Membuat Recent Comment Di Blog - Pada Kali ini kita akan membuat recent comment atau widget komentar terbaru di blog. Recent comment merupakan suatu element atau widget untuk menampilkan komentar terbaru dari setiap postingan blog dan menunjukkan potongan komentar bersamaan dengan judul postingan dimana komentar itu dibuat. Dengan ini pengunjung dapat mengetahui komentar terbaru dari blog kita. Widget Recent Comment ini sangat ringan karena hanya terdiri dari JavaScript dan CSS saja. Bagi anda yg ingin membuat widget recent comment di blog, simak langkah-langkah berikut ini.

CSS Recent Comment

  • Login ke akun blogger.
  • Kemudian klik menu template.
  • Klik edit html.
  • Pastekan kode berikut diatas kode ]]></b:skin>.
ul.tapike_recent{list-style:none;margin:0;padding:0;}
.tapike_recent li{background:none !important;margin:0 0 6px !important;padding:3px
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.tapike_recent li:hover{border: 1px solid #476481;;}
.tapike_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.tapike_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;} 


Script Recent Comment

  • Login ke akun blogger.
  • Kemudian klik menu tata letak.
  • Klik tambahkan element/ add gadget.
  • Lalu pilih HTML/Javasript.
  • Kemudian pastekan kode di bawah ini.
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 10,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Yowanda Erlangga';
//]]>
</script><script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=tapike_recent&amp;&amp;max-results=50">
</script> 
  • Klik simpan


  • Klik simpan

Pengaturan Widget Recent Comment


  • numComments = 5 (jumlah komentar yang ditampilkan) 
  • showAvatar = true (false, apabila ingin menyembunyikan avatar) 
  • avatarSize = 35 (ukuran avatar dalam pixel) 
  • roundAvatar = true (avatar bulat) 
  • characters = 40 (jumlah karakter isi komentar) 
  • defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" (avatar default)
  • adminBlog='Yowanda Erlangga' (nama admin blog)
Demikianlah tutorial mengenai membuat recent comment atau widget komentar terbaru di blog. Semoga artikel ini dapat bermanfaat bagi kita. Jangan lupa like dan share.

Cara Membuat Tooltip Pada Link Blog
Cara Membuat Tooltip Pada Link Blog - Pada kali ini kita akan membuat tooltip pada link atau membuat efek tooltip dengan jquery pada blog. Tooltip sederhana ini juga bisa diterapkan pada teks. Tooltip atau infotip adalah suatu tag petunjuk berupa teks maupun gambar yg tampil ketika kursor diarahkan ke teks atau link. Efek tooltip juga berguna untuk memberikan informasi lebih mengenai suatu kata atau kalimat yg penting. Tooltip ini hanya menggunakan CSS dan sedikit jquery. Bagi yg ini membuat Tooltip pada blog, simak tutorial dibawah ini.

Demo

CSS Tooltip

  • Login ke akun blogger.
  • Kemudian klik menu template.
  • Klik edit html.
  • Pastekan kode berikut diatas kode ]]></b:skin>
.tooltip{position:relative;display:inline-block;cursor:help;white-space:nowrap}.tooltip-content{color:#fff;opacity:0;visibility:hidden;font:12px Arial,Helvetica;text-align:center;border-color:#A42317;border-style:solid;border-width:1px;width:150px;padding:15px;position:absolute;bottom:40px;left:50%;margin-left:-76px;background-color:#fff;background-image:linear-gradient(#FF5848,#A42317);transition:bottom .2s ease,opacity .2s ease}.tooltip-content:after,.tooltip-content:before{border-right:16px solid transparent;border-top:15px solid #A42317;background-image:linear-gradient(#A42317,#A42317);bottom:-15px;content:"";position:absolute;left:50%;margin-left:-10px}.tooltip-content:before{border-right-width:25px;border-top-color:#A42317;border-top-width:15px;bottom:-15px}.tooltip:hover .tooltip-content{opacity:1;visibility:visible;bottom:30px}


Script Tooltip

  • Pastekan kode berikut diatas kode </head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'/>
Pemasangan Jquery library hanya boleh ada 1 untuk setiap blog. Jika di blog anda sudah ada jquery library mirip seperti kode diatas, abaikan langkah ini dan hanya pastekan script dibawah ini saja.

$(document).ready(function(){
$('[data-tooltip]').addClass('tooltip');
$('.tooltip').each(function() {
$(this).append('<span class="tooltip-content">' + $(this).attr('data-tooltip') + '</span>');
});
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('.tooltip').mouseover(function(){
$(this).children('.tooltip-content').css('visibility','visible');
}).mouseout(function(){
$(this).children('.tooltip-content').css('visibility','hidden');
})
}
});

Pengaturan

Tambahkan kode data-tooltip="" pada setiap teks atau link yg ingin dimunculkan tooltip. Di antara tanda kutip isi dengan informasi atau pentunjuk tooltip. Contoh :
<a href="http://ngawicybers.blogspot.com/" data-tooltip="Tapike.com">Tapike.com</a>
Tulisan warna merah adalah value tooltipnya. Untuk tooltip maksimal karakter hanya 25 karakter. Namun anda bisa menambah jumlah karakternya dengan merubah nilai width dan margin-left pada CSS tooltip di atas (tulisan warna biru). Demikianlah tutorial cara membuat tooltip pada link atau cara membuat efek tooltip dengan jquery pada blog. Semoga artikel ini dapat bermanfaat bagi kita semua.

Cara memasang widget Recent Post di Blog
Cara Membuat Recent Post Di Blog - Pada Kali ini kita akan membuat recent post atau widget artikel terbaru di blog. Recent Post merupakan suatu element atau widget untuk menampilkan postingan atau artikel terbaru dari blog dan sangat berguna untuk seo blog karena dapat memberikan internal link. Dengan ini pengunjung dapat mengetahui postingan terbaru dari blog kita. Sebenarnya blogger juga menyediakan widget feed yg fungsinya sama seperti recent post. Bagi anda yg ingin membuat widget recent post di blog, simak langkah-langkah berikut ini.

CSS Recent Post

  • Login ke akun blogger.
  • Kemudian klik menu template.
  • Klik edit html.
  • Pastekan kode berikut diatas kode ]]></b:skin>.
.recent_post_with_thumbs a {color:#808080;}.clearfix {padding-top:6px;padding-bottom:6px;border-bottom: 1px #cccccc dotted;}
  • Kemudian klik simpan

Script Recent Post

  • Login ke akun blogger.
  • Kemudian klik menu tata letak.
  • Klik tambahkan element/ add gadget.
  • Lalu pilih HTML/Javasript.
  • Kemudian pastekan kode di bawah ini.

<script style='text/javascript'>
var numposts = 10;var showpostthumbnails = false;
var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 150; </script>
<script src='http://www.tapike.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
  • Klik simpan

Jangan lupa tulisan warna merah ganti dengan url blog anda. Tulisan warna biru ganti dengan jumlah postingan yg ingin ditampilkan. Demikianlah tutorial mengenai cara membuat recent post atau cara membuat widget artikel terbaru di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.

Cara Membuat Subscribe Box Di Blog
Cara Membuat Subscribe Box Di Blog - Pada kali ini kita akan membuat subscribe box atau kotak berlangganan responsive di blog. Subscribe box atau subscription box merupakan sebuah widget dimana pengunjung blog bisa mendapatkan update terbaru dari blog kita dengan cara mendaftarkan emailnya ke formulir yg terdapat dalam widget tersebut. Setelah berlangganan, pengunjung tersebut akan dikirim email pada saat ada postingan terbaru dari blog kita. Subscribtion box pun dapat menciptakan backlink dari setiap email pelanggan, otomatis ini juga dapat meningkatkan seo blog. Berikut cara membuat subscribe box di blog.

Demo

CSS Subscribe Box

  • Login ke akun Blogger sobat.
  • Klik template pada dashboard.
  • Lalu klik edit HTML.
  • Copy dan pastekan salah satu CSS subscribe box dibawah ini tepat diatas kode ]]></b:skin>.

Subscribe Box Style 1

.subscribe-box{border:1px solid #eee;border-radius:4px;color:#fff;background:#eee;font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}form.subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-box-email-field{outline:none;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtUnVy9agEb4VIEp7j4zPafr7RvVsdjfoB0bEH5SyWdCBKqsVHscqYeiK23L9yV6P5aqP9sGZyZRCxVXsDABCoi0niVK3vsZbL5HUwR3DYLU-YYtjmiw5ejzBM-dR-qC9iYSagEURH2iK/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none}.subscribe-box-email-button{outline:none;background-color:#ff5848;background-image:-webkit-linear-gradient(top,#ff5848,#FC3D2B);color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:none;font-size:16px}

Subscribe Box Style 2

.subscribe-box{border-radius:4px;color:#fff; background:#00aa9f ; font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}form.subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-box-email-field{outline:none;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtUnVy9agEb4VIEp7j4zPafr7RvVsdjfoB0bEH5SyWdCBKqsVHscqYeiK23L9yV6P5aqP9sGZyZRCxVXsDABCoi0niVK3vsZbL5HUwR3DYLU-YYtjmiw5ejzBM-dR-qC9iYSagEURH2iK/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none}.subscribe-box-email-button{outline:none;background-color: #333; background-image: -webkit-linear-gradient(top,#333,#323);color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:0;font-size:16px}

Subscribe Box Style 3

.subscribe-box{border-radius:4px;color:#fff; background:#eee; font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}form.subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-box-email-field{outline:none;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtUnVy9agEb4VIEp7j4zPafr7RvVsdjfoB0bEH5SyWdCBKqsVHscqYeiK23L9yV6P5aqP9sGZyZRCxVXsDABCoi0niVK3vsZbL5HUwR3DYLU-YYtjmiw5ejzBM-dR-qC9iYSagEURH2iK/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none}.subscribe-box-email-button{outline:none;background-color: #4d90fe; background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:none;font-size:16px}
  • Kemudian klik simpan

HTML Subscribe Box

Ada banyak opsi dimana posisi paling efektif meletakkan atau memasang subscribe box yg dapat dijangkau oleh pengunjung blog seperti di sidebar blog, di bawah postingan ataupun membuat popup subscribe box.

Subscribe Box Di Sidebar

  • Login ke akun Blogger.
  • Klik tata letak pada dashboard.
  • Lalu tambahkan element/add gadget dan pilih HTML/Javascript.
  • Copy dan pastekan html di bawah ini.
<div class='subscribe-box'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=TypePedia' class='subscribe-box-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=TypePedia&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='TypePedia'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-box-email-field' name='email' placeholder='Enter your email address '/><input class='subscribe-box-email-button' title='' type='submit' value='Subscribe Now !'/></form>
</div>
  • Klik simpan

Subscribe box Di Bawah Postingan

  • Login ke akun Blogger sobat.
  • Klik template pada dashboard.
  • Lalu klik edit HTML.
  • Copy dan pastekan salah satu CSS subscribe box diatas tadi tepat dibawah kode <div class="post-footer-line post-footer-line-1">.
  • Kemudian klik simpan

Demikianlah tutorial mengenai cara membuat subscribe box atau cara membuat kotak berlangganan responsive di blog. Semoga artikel ini dapat bermanfaat bagi kita semua dan dapat memperbanyak jumlah pelanggan blog anda. Jangan lupa like atau share.

Ngawi Cyber

Diberdayakan oleh Blogger.