Tuesday, January 29, 2019

Cara Mudah Membuat Sitemap di Blogspot



Assalammualaikum warohmatullahi wabarokatuh.

Sitemap atau daftar isi konon bisa membantu blog kita lebih mudah diindex oleh mesin pencari. Tapi cara buatnya gimana ya?

Tenang Cupuers, Momblogger Cupu mau berbagi cara mudah membuat sitemap di blogspot. Sudah siap? Okeee, cuuuuz.

1. Buka tab PAGE/ HALAMAN
2. Klik New Page
3. Beri judul page dengan SITEMAP



4. Pilih tab HTML, lalu masukkan script kode berikut..

<script src="https://sites.google.com/site/script4shared/sitemap.js"></script><script src="https://yukngeblogmudah.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti yang warna merah dengan alamat blog cupuers masing-masing ya.

Untuk meyakinkan diri bahwa script berjalan dengan baik, kita bisa lihat preview/ pratinjaunya. Kalau sudah tampil seperti gambar di bawah, artinya cupuers sudah berhasil membuat sitemap untuk blognya.



5. Klik publish.

Sudah deh. Gampang kan? Cobain ya, kalau udah berhasil jangan lupa bilang.. alhamdulillahirrobilalamin :)

Sampai jumpa di tips-tips singkat dan gampil lainnya ya!


Wassalammualaikum warohmatullahi wabarokatuh.
Lanjut Baca Yuk >>>

Thursday, January 17, 2019

Tutorial Membuat Tombol Back To Top Melayang di Blogspot



Assalammualaikum warohmatullahi wabarokatuh.

Mumpung lagi semangat update blog Yuk, Ngeblog, aku mau berbagi cara membuat tombol navigasi BACK TO TOP melayang. Kaya apa sih? Cuzz lihat gambar di bawah:

Fungsinya apa? Untuk memudahkan pengunjung yang lagi blogwalking ke blog kita, begitu sampai di ujung bawah, kadang kan malas ya scrolling ke atas.. nah, dengan adanya tombol back to top tersebut, pengunjung tinggal klik tombolnya, dan otomatis akan naik ke atas hanya dalam hitungan detik saja.

Caranya mudah banget kok.

Pertama-tama, cek dulu apakah di template blog cupuers sudah memiliki script seperti ini:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
Cara nyarinya tinggal masuk ke theme - edit html, lalu tekan CTRL + F untuk melakukan pencarian kode tersebut di atas </head>.

Jika di atas </head>, belum ditemukan kode script di atas. Langsung copas saja kode tersebut dan letakkan di atas </head>, nanti jadinya akan seperti ini ya, Cupuers.



Setelah script tersebut terpasang dengan benar. Jangan lupa klik save/ simpan.

Kini saatnya kita ke  bagian layout/ tata letak. Klik add a gadget/ tambahkan gadget di bagian sidebar. Pilih yang html.





Lalu copy pastekan kode di bawah ini ke dalam box:

<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 8px;
    right: 10px;
    text-decoration: none;
    display: none;
    cursor:pointer;
    width: 40px;
}
</style>
<img class="mbw-back-to-top" src="http://4.bp.blogspot.com/-y2BIm2-mphA/UQLlFFt1-MI/AAAAAAAAAXo/lXvFBVnpLjc/s1600/Back-To-Top.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.mbw-back-to-top').fadeIn(duration);
        } else { //www.mybloggersworld.com
            jQuery('.mbw-back-to-top').fadeOut(duration);
        }
    });
 
    jQuery('.mbw-back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Kode yang berwarna merah merupakan sumber gambar tombol BACK TO TOP. Bisa diganti sesuai gambar yang Cupuers mau.

Bahkan jika Cupuers punya kreasi gambar sendiri bisa lo dipakai. Caranya simpan gambar back to top kreasi Cupuers ke draft postingan di blog. Draft postingannya nggak perlu dipublish ya, cukup diklik save. Copy image address dari gambar tersebut, lalu copas ke bagian yang merah itu.

Contoh copy image address gambar tombol back to top kreasi sendiri

Kalau sudah klik simpan. Trus coba deh tengok blog Cupuers, insya Allah sudah terpasang tombol navigasi Back to Top  nya dengan cantik. Gampaaang kan?

hasil jadi back to top dari gambar ambil di Blog Cah TI

hasil jadi back to top kreasi sendiri


Semoga bermanfaat dan selamat mencoba.


*Sumber script dan gambar tombol BACK TO TOP diambil dari Blog Cah TI.


Wassalammualaikum warohmatullahi wabarokatuh.
Lanjut Baca Yuk >>>

Setting Custom Domain untuk Blogspot via Dewaweb



Assalammualaikum warohmatullahi wabarokatuh.

Hi, cupuers... huhu maafkan aku yang lama tak menyapamu. Kali ini aku mau meneruskan postingan terakhir yang aku buat di sini. Jika teman-teman masih ingat, postingan terakhir kita membahas cara membeli custom domain di blogspot. Nah, custom domain itu tidak akan otomatis terpasang di blog kita, ada beberapa langkah yang harus kita lakukan agar domain tersebut terarah ke blog kita. Mau tahu caranya? Yuuk!

1. Setelah cupuers membeli domain di Dewaweb (kalau belum bisa klik di sini untuk tahu proses pembeliannya ya), cupuers pasti nanti akan mendapat email konfirmasi tentang kepemilikan domain tersebut. Jangan lupa diverifikasi ya biar sudah pasti domain itu milik cupuers.

2. Selanjutnya, cek cek terlebih dahulu registrar domain tersebut di whois. Caranya, cuzz cupuers kunjungi whois lalu masukkan nama domain yang baru saja dibeli. 



Di sini aku memberi contoh 'semestanayanika.com', ini blognya mbakyu cantikku yang kemarin baru saja minta tolong disettingin custom domainnya.

Nah, jika dari whois registrar cupuers adalah Tucows Domain INC seperti gambar di atas, langkah selanjutnya adalah ubah nameserver domain yang sudah dibeli. Caranya adalah sebagai berikut.
– Pertama,  ucap bismillah dulu biar dilancarkan proses settingnya. Lalu login ke client area di Dewaweb di sini.
– Lalu pilih "manage domain" 



– Setelah muncul visual seperti ini, klik tanda segitiga di samping gambar tang, akan muncul beberapa pilihan, pilih "kelola name servers"



3. Ubah name servers default, klik bagian 'gunakan name server custom', lalu isi kolomnya dengan:
ns1.systemdns.com
ns2.systemdns.com
ns3.systemdns.com

Lalu klik ubah name servers.



4. Setelah setting name servers beres, selanjutnya kita pindah ke bagian "DNS Management". Ada beberapa kolom yang harus diisi. 



Untuk mengisinya, cupuers harus membuka dashboard blogspotnya dulu.

5. Masuk ke dashboard, pilih setting - basic/ setelan - dasar, lalu pilih 'setelan domain pihak ketiga'. Isikan domain yang telah dibeli, jangan lupa tambahkan www. Contoh di sini, aku pakai: www.semestanayanika.com. Lalu klik 'save'. 



Otomatis akan terjadi error dan warning seperti ini "kami tidak dapat memverifikasi kewenangan Anda terhadap domain ini". Jangan takut... saatnya kita lanjutkan.




Di bawah warning tersebut akan muncul beberapa keterangan lain yang akan membantu kita untuk setting custom domain di dashboard 'DNS Management' Dewaweb.

6. Kita kembali ke tab 'DNS Management Dewaweb' lalu masukkan keterangan yang ada di dashboard blog kita tadi:


– Pilih 'type record' CNAME, di kolom depan ketik www, di kolom belakang copas CNAME pertama yang ada di dashboard blog 'ghs.google.com'. Lalu klik "simpan perubahan."
– Pilih 'type record' CNAME lagi, di kolom depan dan belakang copas CNAME baris kedua yang ada di dashboard blog. Lalu klik "simpan perubahan."
– Pilih 'type record' A, isi dengan salah satu IP address google. Lalu klik "simpan perubahan."

IP address google yang bisa dipakai:
216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

7. Setelah semua tersimpan, kini saatnya kembali ke dashboard blogspot kita. Jangan lupa centang kotak di depan 'alihkan xxx.com ke www.xxx.com, ini untuk memudahkan orang mengetik domain kita. Jadi meski tanpa www, domain blog kita tetap bisa diakses. 



Setelah itu klik 'save/ simpan.'

jika settingan sudah berhasil, visualisasi akan seperti ini

8. Taraa... custom domain sudah berhasil disetting dan alamat blogspot yang lama telah resmi dialihkan ke custom domain yang baru kita beli. 

9. Jika setelah di save/ simpan masih belum berhasil, jangan menyerah. Cek kembali settingan di dashboard DNS Management Dewaweb, apa semua settingan sudah benar. Jika sudah benar dan masih gagal, mungkin masih proses. Tunggu beberapa saat, sekitar 5 - 10 menit. Setelah berhasil disimpan, coba cek domain baru cupuers.

blog semestanayanika.com sudah bisa diakses

 Terkadang proses setting sudah beres, namun domain masih belum dibuka karena dalam proses propagasi. Tunggu saja sekitar 30 menit sampai 1x24 jam. Jika menemukan kendala, kita bisa chat dengan NINJA di Dewaweb yang bakal bantu kita mengecek apa settingan kita sudah benar. Helpful banget kok para Ninjanya. 

10. Jika semua sudah beres, jangan lupa ucapkan alhamdulillah dan happy blogging. Semoga dengan menggunakan custom domain, ngeblognya jadi lebih semangat ya!

Semoga postingan ini bermanfaat ya, pals. 


Wassalammualaikum warohmatullahi wabarokatuh.


Lanjut Baca Yuk >>>

Saturday, April 7, 2018

Cara Membeli Domain untuk Blogspot di Dewaweb


Assalammualaikum warohmatullahi wabarokatuh. 

Meski banyak yang masih memilih bertahan dengan sub level domain dari blogspot, tidak sedikit pula yang memilih untuk mengganti url blog mereka menjadi top level domain. Kalau kata momblogger cupu sih ini masalah selera ya. Tapi ada beberapa keuntungan lo yang bisa kita dapat jika sudah menggunakan top level domain, antara lain; 

  • Alamat blog menjadi lebih singkat. Bandingkan antara www.yukngeblog.blogspot.com dengan www.yukngeblog.com. Lebih enak yang mana? 
  • Memperkuat branding. Tanpa embel-embel blogspot di belakang, situs kita akan semakin kuat brandingnya. 
  • Banyak dicari klien. Jika teman-teman cupuers mulai ngeblog secara profesional , tidak menutup kemungkinan bisa bekerjasama dengan beberapa klien. Nah, sekarang ini banyak klien yang meminta blog dengan top level domain, bukan yang masih sub domain di blogspot atau wordpress. 

Jadi, masih tetap mau bertahan pakai domain gratisan atau mau beli nih? Kalau mau beli, aku bisikin ya… salah satu tempat beli domain yang terpercaya yaitu Dewaweb. Aku sudah beberapa kali beli domain di sini. Doakan saja punya rejeki lagi biar blog ini juga segera punya nama sendiri, hehe. 

Buat yang bingung bagaimana caranya membeli domain lewat Dewaweb, sini aku kasih tahu caranya. 

Pertama, klik link ini. 



Kedua, klik order. 



Ketiga, klik daftar domain. 



Keempat, isikan nama domain yang kamu inginkan di kotak. Klik cek domain. 



Kelima, jika nama domain yang kamu inginkan tersedia, klik order. 



Keenam, klik update keranjang belanja. 



Ketujuh, kamu akan mendapatkan rincian pembayaran, jika sudah selesai berbelanja domain, klik checkout dan bayar. 




Kedelapan, isi semua rincian yang diminta. Centang di bagian “saya telah membaca dan menyetujui syarat dan ketentuan (terms of service) Dewaweb.” Selanjutnya klik selesaikan order. 

Kesembilan kamu akan mendapat panduan ke mana harus transfer tagihan tersebut. Aku sarankan pilih metode pembayaran dengan kode unik. Ketika memilih metode ini, artinya saat kamu mentransfer tagihan domain, kamu harus menyertakan kode unik yang diminta. Enaknya metode ini adalah kamu nggak perlu konfirmasi lewat email ke customer service. 

Kesepuluh, segera lakukan pembayaran agar domain mu bisa segera teraktivasi. 

Sampai di sini ada yang bingung? Kalau bingung boleh lo silakan drop pertanyaan di komentar, insya Allah aku jawab satu per satu. 

Sampai jumpa di postingan berikutnya ya! 

Wassalammualaikum warohmatullahi wabarokatuh.
Lanjut Baca Yuk >>>

Friday, March 9, 2018

Memasang Banyak Banner dalam Satu Widget HTML



Assalammualaikum warohmatullahi wabarokatuh.

Hi, teman-teman blogger cupu, apa kabar? Bagaimana blogging-nya hari ini? Tambah seru dong pastinya? Pokoknya jangan lupa tagline "do what your love, love what yo do" saat kita blogging. Selama kita happy jalaninnya, insya Allah segala tantangan yang ada akan mampu kita lewati.

Salah satu tips menjaga konsistensi dalam blogging adalah bergabung dengan komunitas-komunitas blogger, hayooo teman-teman sudah gabung sama komunitas apa saja nih. Ada banyak lo komunitas blogger. Coba deh cek di Facebook, Instagram or Twitter, berjamuuur. Tinggal pilih cocok yang mana. Untuk teman-teman perempuan, ada juga lo komunitas blogger khusus perempuan seperti Blogger Gandjel Rel - especially buat yang tinggal di Semarang dan sekitarnya, Blogger Perempuan, Blogger Muslimah, Kumpulan Emak Blogger dan Indonesian Female Bloggers.

Sementara untuk yang all genders, sebut saja ada Warung Blogger, Blogger Cihuy, Sahabat Blogger, Blogger Kekinian, Blogger Indonesia.. aaah banyak banget deh. Silakan dicari sendiri.

Nah, biasanya ketika kita bergabung dengan komunitas blogger, salah satu syaratnya adalah memasang banner logo komunitas tersebut di blog kita. Udah bisa kan ya caranya?

Cara paling gampang sih add a gadget - image di bagian sidebar/ footer, terus upload deh pic logo komunitas yang kita ikuti, udah deh kepasang. Atau kalau komunitas itu prefer menyediakan link html untuk disematkan di blog kita, kita tinggal add a gadget - html di bagian sidebar/ footer, terus udah deh kepasang.

Kalau cuma satu dua komunitas sih cara itu nggak terlalu capek ya. Tapi ketika kita join dengan banyak komunitas, lumayan juga add a gadget - image or html satu per satu. Selain takes time, biasanya tampilannya jadi nggak rapi karena ukuran gambar yang beda-beda. Nah, aku punya cara yang lebih efektif nih. Kita satukan saja semua banner komunitas yang kita ikuti dalam satu widget HTML saja. Enak kan? 

Ada dua cara memasang banyak banner dalam satu widget HTML; mau yang tampilannya horizontal atau vertikal? Pilih saja sesuai selera dan kebutuhanmu ya, cupuers.

Mau tahu caranya? Yuuuk lanjut.

Membuat Banner Vertikal

Yang banyak dan sering dipakai orang sih cara yang vertikal ini. Aku juga dulunya di blogku pakai cara yang ini. Banner vertikal ini diletakkan di bagian sidebar. Oya sebelum memasang widget banner ini, pastikan kamu sudah menyimpan gambar-gambar logo komunitas di draft postingan seperti waktu mau bikin social button ya. Atau kalau tidak cukup copykan image address logo yang mau kamu sematkan, misal kita ambil dari web komunitas itu. Kalau gambar atau link image address nya sudah siap, silakan cuzz ke step-step berikut ini;

Caranya kaya masang gadget/ widget biasanya aja sih.

Masuk ke bagian tata letak/ layout, pilih bagian sidebar.



Add a gadget.



Pilih html.

Lalu copy kode html berikut ini;

<center><a href="http://www.gandjelrel.com" target="_blank"><img src="https://4.bp.blogspot.com/-MAQoHPMXDMU/Wd5mk8rDG8I/AAAAAAAAQ9I/VVrkm0H0viM6IH1pjd3FW8k64qqCIsBjwCLcBGAs/s1600/Gandjel%2BReledit.jpg" border="0" alt="" width="200" height="200"  /></a></center>


<center><a href="http://www.bloggerperempuan.com" target="_blank"><img src="http://i1208.photobucket.com/albums/cc373/shintaries/Blogger%20Perempuan/banner-bp_zpstmy4phxu.png" border="0" alt="Blogger Perempuan" width="200" height="200" /></a></center>


<center><a href="https://www.ibuprofesional.com/" target="_blank"><img src="https://3.bp.blogspot.com/-usy0LU7METE/WgUEA5nS8BI/AAAAAAAAS3U/2kZcL_jLTcIllgPVaPQ7lVbC1shnnntogCLcBGAs/s1600/IMG-20171110-WA0015.jpg" border="0" alt="" width="200" height="200"  /></a></center>


<center><a href="https://www.maritaningtyas.com/" target="_blank"><img src="https://3.bp.blogspot.com/-gO8p1To-eBo/WjmnMZHHjQI/AAAAAAAAU_0/memj0guHYgU1zoVqn8XRlWXyYk_gHgDwwCLcBGAs/s1600/marita%2Bpalace.jpg" border="0" alt="" width="200" height="200"  /></a></center>

Keterangan:

Warna Biru: silakan diganti dengan link yang akan mengarah pada web komunitas yang kita ikuti.
Warna merah: silakan diganti dengan link image address tempat kita menyimpan gambar logo atau tempat kita meng-copy logo tersebut.
Warna ungu: silakan diganti dengan ukuran gambar yang diinginkan.



Kalau sudah, silakan disimpan. Lalu lihat blog kita, taraaa... banner sudah terpasang rapi kan?



Membuat Banner Horizontal

Dari dulu aku kepo bagaimana caranya membuat banner horizontal. Menurutku cara ini bisa bikin tampilan blog jauh lebih rapi daripada banner vertikal, apalagi kalau komunitas yang diikuti cukup banyak. Akhirnya setelah cari sana-sini, aku dapat juga cara bikinnya di blog mbak Cucuthnya Echa. Makasih mbak.

Teman-teman mau tahu juga? Oke deh, aku bisikin caranya...

Diletakkan di Sidebar

Kalau mau ditaruh di bagian sidebar, maka langkah-langkahnya sama saja kaya bikin banner vertikal di atas ya.

Masuk ke tata letak/ layout, add a gadget, pilih yang html. Bedanya kode html yang dimasukkan adalah sebagai berikut;

<table border="0" bordercolor="#111111" cellpadding="2" cellspacing="0" style="border-collapse: collapse; width: 200px;">

<tr><td><a href="http://www.gandjelrel.com" target="_blank"><img src="https://4.bp.blogspot.com/-MAQoHPMXDMU/Wd5mk8rDG8I/AAAAAAAAQ9I/VVrkm0H0viM6IH1pjd3FW8k64qqCIsBjwCLcBGAs/s1600/Gandjel%2BReledit.jpg" border="0" alt="" width="50" height="50"  /></a></td>

<td><a href="http://www.bloggerperempuan.com" target="_blank"><img src="http://i1208.photobucket.com/albums/cc373/shintaries/Blogger%20Perempuan/banner-bp_zpstmy4phxu.png" border="0" alt="Blogger Perempuan" width="50" height="50" /></a><td>

<td><center><a href="https://www.ibuprofesional.com/" target="_blank"><img src="https://3.bp.blogspot.com/-usy0LU7METE/WgUEA5nS8BI/AAAAAAAAS3U/2kZcL_jLTcIllgPVaPQ7lVbC1shnnntogCLcBGAs/s1600/IMG-20171110-WA0015.jpg" border="0" alt="" width="50" height="50"  /></a><td>

<td><center><a href="https://www.maritaningtyas.com/" target="_blank"><img src="https://3.bp.blogspot.com/-gO8p1To-eBo/WjmnMZHHjQI/AAAAAAAAU_0/memj0guHYgU1zoVqn8XRlWXyYk_gHgDwwCLcBGAs/s1600/marita%2Bpalace.jpg" border="0" alt="" width="50" height="50" /></a><td>

</td></center></td></td></center></td></td></td></tr></table>

Keterangan:

Warna Biru: silakan diganti dengan link yang akan mengarah pada web komunitas yang kita ikuti.
Warna merah: silakan diganti dengan link image address tempat kita menyimpan gambar logo atau tempat kita meng-copy logo tersebut.
Warna ungu: silakan diganti dengan ukuran gambar yang diinginkan.

Kalau sudah, jangan lupa klik simpan lalu cek deh di blog teman-teman apa banner-nya sudah terpasang sesuai keinginan?



Ditempatkan di Footer

Kalau ingin rapi sih, lebih bagus meletakkan banner secara horizontal ini di bagian footer. Pastikan untuk memilih layout dengan satu footer terlebih dahulu di bagian tema - customize - advance/ lanjutan - tata letak/ layout.

Jika teman-teman sudah pakai layout dengan satu footer, bisa langsung deh cuzz ke step berikutnya. Caranya pun nggak jauh beda kok dengan yang sebelumnya, bedanya kalau tadi kan nambahin widgetnya di bagian sidebar. Sekarang kita cuzz ke bagian footer.

Masuk ke tata letak



Pilih bagian footer
Add a gadget
Pilih html
Lalu copykan kode berikut ini, pada dasarnya kodenya sama kok dengan yang ditaruh di sidebar, hanya beda di ukuran gambarnya saja.


<table border="0" bordercolor="#111111" cellpadding="2" cellspacing="0" style="border-collapse: collapse; width: 400px;">

<tr><td><a href="http://www.gandjelrel.com" target="_blank"><img src="https://4.bp.blogspot.com/-MAQoHPMXDMU/Wd5mk8rDG8I/AAAAAAAAQ9I/VVrkm0H0viM6IH1pjd3FW8k64qqCIsBjwCLcBGAs/s1600/Gandjel%2BReledit.jpg" border="0" alt="" width="200" height="200"  /></a></td>

<td><a href="http://www.bloggerperempuan.com" target="_blank"><img src="http://i1208.photobucket.com/albums/cc373/shintaries/Blogger%20Perempuan/banner-bp_zpstmy4phxu.png" border="0" alt="Blogger Perempuan" width="200" height="200" /></a><td>

<td><center><a href="https://www.ibuprofesional.com/" target="_blank"><img src="https://3.bp.blogspot.com/-usy0LU7METE/WgUEA5nS8BI/AAAAAAAAS3U/2kZcL_jLTcIllgPVaPQ7lVbC1shnnntogCLcBGAs/s1600/IMG-20171110-WA0015.jpg" border="0" alt="" width="200" height="200" /></a><td>

<td><center><a href="https://www.maritaningtyas.com/" target="_blank"><img src="https://3.bp.blogspot.com/-gO8p1To-eBo/WjmnMZHHjQI/AAAAAAAAU_0/memj0guHYgU1zoVqn8XRlWXyYk_gHgDwwCLcBGAs/s1600/marita%2Bpalace.jpg" border="0" alt="" width="200" height="200" /></a><td>

</td></center></td></td></center></td></td></td></tr></table>

Keterangan:

Warna Biru: silakan diganti dengan link yang akan mengarah pada web komunitas yang kita ikuti.
Warna merah: silakan diganti dengan link image address tempat kita menyimpan gambar logo atau tempat kita meng-copy logo tersebut.
Warna ungu: silakan diganti dengan ukuran gambar yang diinginkan.

Sudah deh. Eits, jangan lupa klik simpan dulu, baru cek di blog teman-teman apa banner-nya sudah terpasang sesuai keinginan?



Kalau aku sih suka pakai yang banner horizontal di footer, kalau teman-teman suka yang mana? Semoga bermanfaat dan keep blogging happily! Sampai jumpa di postingan berikutnya ya!

Wassalammualaikum warohmatullahi wabarokatuh.




Lanjut Baca Yuk >>>

Monday, March 5, 2018

Cara Mudah Menambah Social Media Button di Blogspot



Assalammualaikum warohmatullahi wabarokatuh.

Gimana tampilan blognya sekarang sudah lebih kece belum? Jangan lupa diimbangi dengan tetap menulis ya. Tampilan kece kalau nggak ada isinya ya sama aja bohong bo. Hari ini momblogger cupu mau berbagi tips untuk menambah gadget social media button di blog teman-teman cupuers. Jadi kalau ada pembaca blog teman-teman pengen berkunjung ke social media teman-teman, nggak bingung lagi, tinggal klik aja link di social media button itu. Cekidot yuk.





Pertama, kita upload dulu gambar social media icon yang mau kita pakai di postingan. Caranya kaya kita bikin postingan biasa, bedanya postingan ini jangan di publish/ terbitkan. Cukup save as draft saja. Kita cuma butuh link image adress untuk bikin social media button. Kalau butuh gambar icon sosmed, bisa donwload di sini.



Kedua, setelah semua gambar yang kita butuhkan siap. Saatnya masuk ke layout/ tata letak. Scrolling ke bagian sidebar, add a gadget.



Ketiga, pilih gadget html.



Keempat, copy kan code html di bawah ini. 

<a href="https://www.facebook.com/ms.ningtyas"><img alt="Facebook" border="0" width="50" height="50" src="https://4.bp.blogspot.com/-sKrPg5H5v7o/WpyK9fvOrTI/AAAAAAAAZ-I/N_pfFI1tgOUeWgKxe7IoVkIOie03ZD2dgCLcBGAs/s1600/Add%2BMe.png" title="Find me on Facebook" /></a>&nbsp;


<a href="https://twitter.com/maritaningtyas"><img alt="Twitter" border="0" width="50" height="50" src="https://2.bp.blogspot.com/-M0rcGmj_cq0/WpyK9a96BWI/AAAAAAAAZ-M/enViFIzyXkgfKskmAy5gd3nQYBIxvrGIACLcBGAs/s1600/Follow%2BMe.png" title="Follow my Twitter" /></a>&nbsp;


<a href="https://plus.google.com/u/0/+MaritaNingtyas"><img alt="Google+" border="0" width="50" height="50" src="https://4.bp.blogspot.com/-vb3yYPjoH2A/WpyK-WVOhKI/AAAAAAAAZ-U/7681CUsNSa0RryE1ZyufF7_H77dGFrJ3QCLcBGAs/s1600/Google%2BPLus.png" title="Add me on Google+" /></a>


<a href="https://instagram.com/maritaningtyas"><img alt="Instagram" border="0" width="50" height="50" src="https://1.bp.blogspot.com/-4hTVaXtrToo/WpyK-gFo_nI/AAAAAAAAZ-Y/e_82-rglr1QrWHUxJAeh5CmYERTmJDtkgCLcBGAs/s1600/Instagram.png" title="Find me on Instagram" /></a>

<a href="http://maritaningtyaspalace.tumblr.com"><img alt="Tumblr" border="0" width="50" height="50" src="https://4.bp.blogspot.com/-FEYwZLrEyF8/WpyK_QvqqQI/AAAAAAAAZ-g/wR88Fj-BOsISsRKIu3lqrh2fHP0ABMpiwCLcBGAs/s1600/Tumblr.png" title="Find me on Tumblr" /></a>


<a href="https://www.linkedin.com/in/marita-surya-ningtyas-506a55115"><img alt="Linkedin" width="50" height="50" border="0" src="https://2.bp.blogspot.com/-ifX7l-mPyhg/WpyK-_REGGI/AAAAAAAAZ-c/fboY3mRiyx0zUuk8z1qRqFEfht7hNYxQwCLcBGAs/s1600/Linkedin.png" title="Find me on Linkedin" /></a>


<a href="mailto:ms.ninktyaz@gmail.com"><img alt="Gmail" border="0" width="50" height="50" src="https://1.bp.blogspot.com/-K9b1-KtTyZA/WpyK9dXFutI/AAAAAAAAZ-Q/si1irg_5m6kAVrL-lbZ7nblF-_69OIQRQCLcBGAs/s1600/Email%2BMe.jpg" title="Send EMail" /></a>



<a href='https://www.youtube.com/channel/UCPWjAffCRTd5bvua51vmJFQ' class='tooltip' border="0" width="50" height="50" title='youtube'><img src="https://4.bp.blogspot.com/-b1WDvQqa45A/WpyK_nq4jtI/AAAAAAAAZ-k/p-mKJMjovNwZglysTfyKoLLdWEgM_lUUQCLcBGAs/s1600/YouTube%2BChannel.png"/></a>


Untuk tulisan dengan warna biru, gantilah dengan url link alamat social media teman-teman ya.

Untuk tulisan warna ungu, ukuran "50" bisa diganti sesuai dengan kebutuhan teman-teman, mau ukuran gambar yang tampil seberapa.




Untuk tulisan warna merah, diganti dengan link image address yang tadi sudah kita simpan di draft picture. Caranya, klik kiri gambar, lalu klik copy image address.

Udah gitu aja kok step-stepnya. Jangan lupa save ya... Silakan lihat bagaimana tampilan social media buttonnya di blog teman-teman. Oya, nggak harus semua ditampilkan ya, misal teman-teman cuma punya akun instagram, facebook dan twitter, cukup copy bagian html code yang dibutuhkan.



Mudah kan? Selamat mencoba!

Wassalammualaikum warohmatullahi wabarokatuh.
Lanjut Baca Yuk >>>

Mendesain Template Blogspot Sederhana



Assalammualaikum warohmatullahi wabarokatuh. 

Ada yang lagi muram karena desain blognya kok nggak sekece blogger yang lain? Tapi mau download tema juga masih takut ngutak-atik. Nggak harus pakai tema download kok untuk bikin tampilan blog yang kece, contoh nih blog "Yuk, Ngeblog" juga cuma pakai tema bawaan blogger yang jenis sederhana/ simple lo. Lumayan cantik kan penataannya?

Mau dibisikin caranya? Sini sini sini :)




Langkah pertama, masuk ke dashboard blog, klik tab theme lalu klik customize. 



Langkah kedua, pastikan dulu tema blog yang kamu pilih jenis sederhana/ simple ya. Pilih yang warna dasarnya putih. Kenapa? Satu, tema ini sangat ringan saat loading. Dua, ramah di mata pembaca. Tiga, gampang buat dimacem-macemin. 



Langkah ketiga, kita bisa pilih desain untuk background blog kita. Ada beberapa gambar bawaan blogger yang bisa kita gunakan, atau kita bisa upload gambar sendiri. Cara menyisipkannya klik segitiga kecil di samping kotak gambar, nanti muncul pilihan gambar atau upload. Background blog ini bukan header ya, tapi latar belakang blog. 



Aku sendiri lebih memilih background warna agar lebih enteng saat proses loading. Oya, kita bisa lihat previewnya di bawah pengaturan ya. Jadi kalau nggak cocok, bisa kita ganti langsung. Pastikan setiap melakukan penggantian setting, klik apply to blog atau terapkan ke blog.



Langkah keempat, sesuaikan lebar blog. Di sini kita bisa memilih ukuran lebar blog secara keseluruhan dan bagian sidebar. Ini bisa disesuaikan sehingga gambar yang kita tampilkan di blog atau sidebar bisa pas dengan lebarnya, nggak kegedean atau kekecilan. 



Langkah kelima, pilih jenis layout blog. Yang paling disarankan sih sidebar satu di sisi kanan. Untuk footer pilih sesuai kebutuhan, kalau aku sih suka pilih yang satu footer. Footer jarang aku gunakan kecuali untuk banner logo komunitas, gadget lainnya aku taruh di bagian sidebar. Gadgetnya pun pilih yang penting aja ya. Kuncinya adalah sesederhana mungkin. 

Langkah keenam, setting lanjutan. Di sini kita bisa utak-atik berbagai kebutuhan blog kita. Apa aja ya? Cekidot.


Pilih jenis, ukuran dan warna font untuk keseluruhan page. Pilih jenis font yang ramah pembaca, biasanya disarankan jenis seriff, arial atau lora. Hindari jenis font yang kaya tulisan tangan, sering bikin kriting mata pembaca. Jenis font seperti itu bisa digunakan untuk judul postingan saja. Pilih ukuran font yang nggak terlalu besar ataupun terlalu kecil. 


Di setting lanjutan ini kita diberi pilihan warna-warna background yang lebih komplit. Pilihannya pun tidak hanya outer background, tapi juga untuk main dan header background. Untuk main background ini latar belakang di bagian post, pilih warna putih ya. Sepert yang sudah aku bilang  biar ramah mata. Sedangkan untuk header background, sebaiknya transparant saja, jadi gambar header bisa lebih ngeblend.


Warna link pun bisa disesuaikan lo. Warna setelah diklik dan baru akan diklik pun bisa dibedakan. Jangan lupa lihat previewnya di bawah setting ya, biar bisa mencocokkan sesuai selera.


Ini bagian untuk memilih jenis, ukuran dan warna untuk judul blog. Tapi kalau headernya sudah diganti gambar, bagian ini nggak perlu diutak-atik ya, karena nggak bakal kelihatan, hehe.


Ini bagian untuk memilih jenis, ukuran dan warna untuk description blog. Sama kaya bagian judul blog, kalau headernya sudah diganti gambar, bagian ini nggak perlu diutak-atik ya, karena nggak bakal kelihatan.


Ini untuk mengatur bagian tabs laman. Bisa pilih jenis, ukuran dan warna font. Warna tabs yang sudah dipilih pun bisa dibedakan dengan warna defaultnya. Jadi misal ada orang yang berkunjung ke blog kita, dia ngeklik beberapa postingan, warna tabsnya akan otomatis berubah jika dia sudah mengklik tabs tersebut sebelumnya.


Nggak cuma font yang bisa diutak-atik. Warna latar belakang untuk tabs nya pun bisa disesuaikan sesuai dengan warna blog kita, biar lebih senada gitu.


Sekarang saatnya memilih jenis, ukuran dan warna untuk judul postingan. Mau dibuat kaya gimana hayo?


Setelah utak-atik judul postingan, kita juga bisa menyesuaikan pilihan warna teks untuk tanggal postingan. Bisa pilih jenis dan ukuran font, juga latar belakang warnanya. Untuk latar belakang warna tanggal, aku sarankan sih transparent aja.


Ini bagian setting footer. Kita bisa pilih warna teks, warna background dan warna shadow untuk bagian footer.


Sekarang kita saatnya utak-atik bagian gadgets. Kita bisa pilih jenis, ukuran dan warna teks untuk bagian gadget.


Saatnya utak-atik bagian images/ gambar. Kita bisa pilih apa gambar di bagian post perlu dikasih warna background, warna border. Kita juga bisa pilih captionnya pakai warna apa.


Untuk bagian accents dan mobile button color aku jarang utak-atik sih. Selanjutnya ke bagian add css. Bagian ini bisa kita pakai kalau mau bikin tampilan lebih kece, misal kaya di blog ini. Judul postingan dan judul gadget aku buat rata tengah. Defaultnya dari blogger kan rata kiri. Nah, untuk bikin tengah, kita bisa tambah kode css di bagian sini. Caranya gimana? Tunggu postingan tersendiri ya!

Mudah kan? Sekarang tampilan blognya meski sederhana sudah kelihatan lebih ece to? Selamat mengutak-atik dan happy blogging ya.

Wassalammualaikum warohmatullahi wabarokatuh.
Lanjut Baca Yuk >>>