Breaking

Showing posts with label Blogger Tutorial. Show all posts
Showing posts with label Blogger Tutorial. Show all posts

Monday, September 10, 2018

September 10, 2018

Cara Membuat Widget Jasa Pengiriman untuk Blog Online Shop

🛒 Blogger Tutorial • BibipBoy
Cara Membuat Widget Jasa Pengiriman Blog Online Shop

Hallo, ketemu lagi dengan saya di artikel terbaru BibipBoy.

Pada postingan sebelumnya kita sudah membahas tentang Cara Membuat Widget Sosial Media Keren Untuk Blog .

Nah, pada postingan kali ini saya akan membagikan tutorial cara membuat widget jasa pengiriman atau kurir untuk blog online shop yang kalian miliki.

Widget ini berisi beberapa logo jasa pengiriman populer seperti:

• JNE
• J&T Express
• POS Indonesia
• TIKI

Selain mempercantik tampilan blog online shop, widget ini juga dapat membantu pengunjung mengetahui jasa pengiriman yang tersedia di toko kalian.

Yuk langsung simak tutorialnya di bawah ini 👇

Langkah-Langkah

1 Masuk ke dashboard Blogger kalian terlebih dahulu.
2 Pilih menu berikut:
Tata Letak / Layout → Footer Widget → Tambahkan Gadget → HTML/JavaScript
3 Setelah itu, masukkan script berikut ke dalam kolom HTML/JavaScript:
<a href="https://www.jne.co.id/"> <img alt="JNE" border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Gsgzceg76BdFMhGG4PE9RRZzACrwWTORTMzCFw-_dB6n9p3JVFDXt-p3TdgDJMEOGEyuKQtYNGge5bWm7Vbfw1-Epv4j1Hx3RBLYAfA4eZ3pv4fwcHAWde9ALh_N-yvYgm4yveJvbNU/s200/JNE.jpg" title="JNE" /> </a> <a href="https://jet.co.id/"> <img alt="J&T" border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAbeiR5mvdsGVkGFO517tMDXWwJqgfmm026l5RqR2xPVTOyu84scNNZHAG2VncSiDoOfd0kzUY5qPm5XsyKAy20BQYSyuUrP1uUwP7YwutlgqJ-h12eKdb8Xx7no2cSG_tLvYVP2Kh4B8/s200/J+%2526+T.jpg" title="J&T Express" /> </a> <a href="https://www.posindonesia.co.id/"> <img alt="Pos Indonesia" border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgovSoD6N-ixCTSuiK769lrD5uXPSpdJyuSUpM1cf8ewYvAYMcmKiJ4MztzPtD9oj5DQyL_6O3_5G-I0Ir-Bog7wdvEB0k5tYjMy7cyBs2LjN6N9j3sMk2hA92Qftp69orGsYe8f4tgUV4/s200/pos.jpg" title="Pos Indonesia" /> </a> <a href="https://tiki.id/"> <img alt="TIKI" border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxIczJvf5g62O5DxgAsVpUIAdQMyfm1__3SIV2_4rmmgoSUzUIkclSUyuhI_4b7WPEnNNmCt0brNFw1BwpPzTZs7D80xNtO42CL_CC56dWHAkymRdRL5NTLamHHnW6B4pXu1qLexc-Ztk/s200/Tiki.jpg" title="TIKI" /> </a>
4 Setelah script dimasukkan, klik tombol Simpan lalu lihat hasil widget pada blog kalian. Hasil Widget Jasa Pengiriman

Kelebihan Widget Ini

1 Membuat tampilan blog online shop terlihat lebih profesional.
2 Memudahkan pengunjung mengetahui jasa pengiriman yang tersedia.
3 Widget ringan dan mudah dipasang di Blogger tanpa plugin tambahan.
Gimana nih? Keren banget, kan? 😄

Widget ini cukup sederhana tetapi bisa membantu mempercantik tampilan blog online shop kalian agar terlihat lebih menarik dan profesional.

Nah, itulah tutorial mengenai Cara Membuat Widget Jasa Pengiriman Blog Online Shop .

Semoga artikel dari BibipBoy ini bisa berguna dan bermanfaat bagi kalian semua.

Terima kasih dan sampai jumpa di artikel berikutnya 🚀
3
By di 3 comments:
Label:

Saturday, September 8, 2018

September 08, 2018

Cara Membuat Widget Sosial Media Keren untuk Footer Blog

🌐 Blogger Tutorial • BibipBoy
Cara Membuat Widget Sosial Media Keren untuk Footer Blog

Hallo, ketemu lagi dengan saya di BibipBoy. Pada postingan kali ini kita akan membahas cara membuat widget sosial media untuk blog.

Widget sosial media ini berisi ikon Facebook, Twitter, Instagram, dan YouTube yang bisa dipasang pada bagian footer blog kalian.

Selain mempercantik tampilan blog, widget ini juga dapat memudahkan pengunjung untuk menemukan akun sosial media kalian.

Langkah-Langkah

1 Masuk ke dashboard Blogger kalian.
2 Pilih menu:
Tata Letak → Footer Widget → Tambahkan Gadget → HTML/JavaScript
3 Masukkan script berikut:
<a href="https://web.facebook.com/facebookkalian/"> <img alt="Facebook" border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglYybjI1UwphppXnno9jBQ46JhyJZIMmgHrDACZZE3r1jRk1xOeuUsMc3wMicZW5FqO9o9lZ4u-s28UlEanuRYygYzdCRYGMC5B3A7F5dyLm8y-Vlvb5OgBG5nyvToJQWFnzN0zm_GPWo/s200/logo-facebook-bulat-biru-256x256.png" title="Find Us on Facebook" /> </a>&nbsp; <a href="https://twitter.com/twitterkalian/"> <img alt="Twitter" border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9DSe1IajWeN1RH9UajRODuvdlmECDzhLE6XpsfE80m7rRkwUB4nvw4h7Hcvx6M4twvhlag7f2WXSauhKlhLisvl6aIYFZqsX5jbKYFoojmmrFDCZiW0plW0bjZxqEliI08Ks0rVXL_XM/s200/twitter-png-3.png" title="Follow Us On Twitter" /> </a>&nbsp; <a href="https://www.instagram.com/instagramkalian/?hl=id"> <img alt="Instagram" border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvMsum-QTI6ohMPpfF8yGfZn7VhXKc-Q5wGDZlARxEvwHPTrBCHh2cQo8pn_Uch9SChdU2acOBK7ZqiBFdQaIja0simxUtelVDbdtgp6LRUmxpOzZIyViAyq93wy7cBhQqoMWwSkRJ20w/s200/instagram.png" title="Follow Us On Instagram" /> </a>&nbsp; <a href="alamat youtube kalian"> <img alt="Youtube" border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPjIlMAeLxEXoW2j1iAmyaw2OdlYcyiOmodWss7SKMulyNcq36BvmLbVVikvnJiKORjIxcjETcieyoZ5lzbdv5fxibp2yV-PMxenSl3VcwncFQeymA5ErI6TcAivjmiItKsNQ2_PRIW_c/s200/youtube_14198.png" title="Follow Us On Youtube" /> </a>
4 Simpan widget, lalu lihat hasilnya pada bagian footer blog kalian. Hasil Widget Sosial Media Footer Blog

Keterangan Script

1 Ganti https://web.facebook.com/facebookkalian/ dengan alamat Facebook kalian.
2 Ganti https://twitter.com/twitterkalian/ dengan alamat Twitter kalian.
3 Ganti https://www.instagram.com/instagramkalian/?hl=id dengan alamat Instagram kalian.
4 Ganti alamat youtube kalian dengan alamat YouTube kalian.
Nah, itulah cara membuat widget sosial media untuk footer blog agar tampilannya lebih menarik dan keren.

Semoga artikel dari BibipBoy ini bisa berguna dan bermanfaat bagi kalian semua.

Terima kasih dan sampai jumpa di artikel berikutnya 🚀
11
By di 11 comments:
Label:

Wednesday, August 22, 2018

August 22, 2018

Cara Mengubah Currency Dollar Menjadi Rupiah pada Template Mega Shop

🛒 Blogger Tutorial • BibipBoy
Cara Mengubah Currency Dollar Menjadi Rupiah Template Mega Shop

Hallo, ketemu lagi dengan saya di BibipBoy. Pada postingan kali ini saya akan membagikan tutorial mengenai cara mengubah currency Dollar menjadi Rupiah pada template online shop Mega Shop.

Masih bingung bagaimana cara mengubah tampilan harga Dollar ($) menjadi Rupiah (Rp) pada template toko online Blogger? Tenang saja, kali ini saya akan membagikan tutorialnya secara lengkap dan mudah dipahami 😄

Tutorial ini cocok untuk kalian yang sedang membuat toko online di Blogger, baik untuk kebutuhan bisnis maupun tugas kuliah.

Yuk langsung simak langkah-langkahnya di bawah ini 👇

Contoh Template Mega Shop

Berikut contoh template online shop Mega Shop yang sudah dimodifikasi.

Contoh template: Mom Collection

Langkah-Langkah Mengubah Currency Menjadi Rupiah

1 Pastikan kalian sudah mendownload dan memasang template online shop yang ingin digunakan di Blogger.
2 Biasanya template online shop bawaan masih menggunakan currency Dollar ($). Pada tutorial ini kita akan mengubahnya menjadi Rupiah (Rp).
3 Berikut contoh tampilan template Mega Shop yang masih menggunakan currency Dollar pada bagian kanan atas. Currency Dollar Mega Shop
4 Selanjutnya masuk ke menu berikut di Blogger:
Tata Letak → Tambahkan Gadget → HTML/JavaScript
5 Masukkan script berikut ke dalam gadget HTML/JavaScript.
<script> $(function(){ simpleCart.currency({ code: 'IDR', symbol: 'Rp ', name: 'Indonesia Rupiah', delimiter: '.', decimal: ',', accuracy: 3, after: false }); }); </script>
6 Setelah script dimasukkan, klik tombol Simpan.

Biarkan bagian Judul Gadget dalam keadaan kosong.
7 Setelah berhasil disimpan, currency pada template akan berubah dari Dollar menjadi Rupiah. Currency Rupiah Mega Shop
8 Selesai 🎉

Sekarang template Mega Shop kalian sudah menggunakan currency Rupiah.

Tips Tambahan

1 Pastikan template yang digunakan mendukung script simpleCart.
2 Jika perubahan currency belum muncul, coba refresh browser atau bersihkan cache Blogger kalian.
3 Kalian juga bisa mengganti symbol currency lain dengan mengubah bagian symbol pada script.
Nah, itulah cara mengubah currency Dollar menjadi Rupiah pada template online shop Mega Shop.

Gimana? Mudah banget, kan? 😄

Dengan tutorial ini, tampilan toko online kalian akan terlihat lebih cocok untuk pengunjung Indonesia karena menggunakan mata uang Rupiah.

Sekian postingan mengenai Cara Mengubah Currency Dollar Menjadi Rupiah Template Online Shop Mega Shop .

Semoga artikel dari BibipBoy ini bisa berguna dan bermanfaat bagi kalian semua.

Terima kasih dan sampai jumpa di artikel berikutnya 🚀
2
By di 2 comments:
Label:

Sunday, July 22, 2018

July 22, 2018

Cara Membuat Kotak Pencarian atau Search di Blogger

🔍 Blogger Tutorial • BibipBoy
Cara Membuat Kotak Search Blogger

Hallo, ketemu lagi dengan saya di blog BibipBoy .

Pada kesempatan kali ini kita akan membahas tutorial mengenai Cara Membuat Kotak Pencarian / Search di Blogger.

Apakah kalian sudah mengganti template atau tema Blogger kalian?

Banyak template Blogger yang tampilannya sudah keren, tetapi masih belum memiliki fitur penting seperti kotak pencarian (search box).

Padahal fitur pencarian sangat membantu pengunjung untuk menemukan artikel yang mereka cari dengan lebih cepat.

Nah, pada artikel kali ini saya akan menjelaskan cara membuat search box keren di Blogger dengan mudah 😄

Yuk langsung simak tutorialnya di bawah ini 👇

Langkah-Langkah Membuat Search Box Blogger

1 Pertama, silakan buka dashboard Blogger kalian terlebih dahulu.

Setelah itu masuk ke menu:
Tata Letak / Layout
2 Pada halaman tata letak, klik:
Tambahkan Gadget → HTML/JavaScript
3 Setelah itu akan muncul kotak HTML/JavaScript.

Masukkan kode berikut ke dalam kolom HTML/JavaScript:
<style> #search-box { position: relative; width: 100%; margin: 0; } #search-form { height: 40px; border: 1px solid #999; border-radius: 5px; background-color: #fff; overflow: hidden; } #search-text { font-size: 14px; color: #ddd; border-width: 0; background: transparent; } #search-box input[type="text"] { width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; } #search-button { position: absolute; top: 0; right: 0; height: 42px; width: 80px; font-size: 14px; color: #fff; text-align: center; line-height: 42px; border-width: 0; background-color:#DC143C; border-radius: 0px 5px 5px 0px; cursor: pointer; } </style> <div id='search-box'> <form action='/search' id='search-form' method='get' target='_top'> <input id='search-text' name='q' placeholder='Cari Artikel Disini ...' type='text'/> <button id='search-button' type='submit'> <span>Search</span> </button> </form> </div>
4 Setelah semua kode dimasukkan, klik tombol Simpan.

Sekarang search box sudah berhasil ditambahkan ke Blogger kalian 🎉

Keterangan Kode

1 Kode warna berikut digunakan untuk mengganti warna tombol search:
background-color:#DC143C;

Kalian bisa mengganti warna tersebut sesuai keinginan menggunakan kode warna CSS lainnya.

2 Bagian berikut digunakan untuk mengganti tulisan pada kolom pencarian:
placeholder='Cari Artikel Disini ...'

Kalian bebas mengganti teks tersebut sesuai kebutuhan blog masing-masing.

Kelebihan Search Box Ini

1 Membantu pengunjung menemukan artikel lebih cepat.
2 Membuat tampilan blog terlihat lebih profesional.
3 Ringan dan mudah dipasang tanpa plugin tambahan.
Nah, itulah tutorial mengenai Cara Membuat Kotak Pencarian di Blogger .

Gimana? Mudah banget, kan? 😄

Dengan menambahkan search box, pengunjung blog kalian akan lebih mudah mencari artikel yang mereka butuhkan.

Semoga tutorial dari BibipBoy ini bisa berguna dan bermanfaat bagi kalian semua.

Selamat mencoba dan semoga berhasil 🚀
0
By di No comments:
Label:

Thursday, April 12, 2018

April 12, 2018

Cara Pasang Widget Jam Di Blog

🕒 Blogger Tutorial • BibipBoy
Cara Pasang Widget Jam di Blog

Hallo, ketemu lagi dengan saya di BibipBoy.

Pada kesempatan kali ini saya akan membagikan panduan mengenai Cara Pasang Widget Jam di Blog.

Memasang widget jam pada blog dapat membuat tampilan blog terlihat lebih menarik, rapi, dan keren.

Jika kalian ingin menambahkan widget jam di sidebar atau bagian lain pada blog, silakan simak tutorial berikut ini 👇

Website Penyedia Widget Jam

Untuk mendapatkan widget jam, kalian bisa mengunjungi salah satu website berikut:

http://www.clocklink.com/gallery/

Flash Clocks

Saya biasa menggunakan kedua website tersebut karena tersedia banyak pilihan model jam yang bisa dipasang di blog.

Langkah Mendapatkan Kode Widget Jam

1 Masuk ke menu Gallery, lalu pilih jenis jam yang ingin digunakan pada blog kalian.
2 Pilih model jam yang kalian suka, kemudian klik View HTML Tag.
3 Jika muncul kotak dialog, klik Accept.
4 Setelah itu, pilih warna, timezone, dan ukuran jam sesuai kebutuhan blog kalian.
5 Copy kode HTML widget jam yang sudah disediakan.

Langkah Memasang Widget Jam di Blogger

1 Login ke akun Blogger kalian.
2 Masuk ke menu Tata Letak, lalu klik Tambah Gadget.
3 Pilih gadget HTML/JavaScript.
4 Paste kode HTML widget jam yang sudah kalian copy sebelumnya.
5 Klik Simpan, lalu lihat hasilnya pada blog kalian.

Tips Tambahan

1 Sesuaikan ukuran widget jam dengan lebar sidebar agar tampilannya tidak terpotong.
2 Pilih warna jam yang sesuai dengan warna tema blog kalian.
3 Jangan memasang terlalu banyak widget agar loading blog tetap ringan.
Nah, itulah tutorial mengenai Cara Pasang Widget Jam di Blog .

Gimana? Mudah banget, kan? 😄

Dengan memasang widget jam, tampilan blog kalian bisa terlihat lebih menarik dan berbeda.

Semoga tutorial dari BibipBoy ini bisa berguna dan bermanfaat bagi para pembaca.

Selamat mencoba dan semoga berhasil 🚀
1
By di 1 comment:
Label:

Monday, April 9, 2018

April 09, 2018

Cara Membuat dan Mengganti Favicon di Blog

🎨 Blogger Tutorial • BibipBoy
Cara Membuat dan Mengganti Favicon di Blog

Hallo, ketemu lagi dengan saya di BibipBoy .

Pada postingan kali ini kita akan membahas tutorial mengenai Cara Membuat dan Mengganti Favicon di Blog.

Setiap blogger tentu ingin memiliki identitas atau ciri khas pada blognya. Salah satu caranya adalah dengan menggunakan favicon.

Favicon merupakan icon kecil yang muncul di bagian tab browser atau address bar website.

Favicon berfungsi sebagai logo atau identitas blog agar terlihat lebih profesional dan mudah dikenali pengunjung.

Dalam membuat favicon, usahakan menggunakan gambar yang menarik dan tidak terlalu besar ukurannya.

Ukuran favicon sebaiknya tidak melebihi 100 KB agar loading blog tetap ringan dan cepat.

Yuk langsung simak tutorial lengkapnya di bawah ini 👇

Apa Itu Favicon?

Favicon adalah icon kecil yang tampil pada:

• Tab browser
• Address bar
• Bookmark browser
• Shortcut website

Hampir semua website dan blog modern menggunakan favicon sebagai identitas visual.

Cara Membuat Favicon

1 Kunjungi website berikut untuk membuat favicon secara online:
http://favicon.htmlkit.com/favicon/
2 Pada bagian Create a Favicon from any picture, klik tombol Browse untuk memilih gambar yang ingin dijadikan favicon. Upload Gambar Favicon
3 Setelah memilih gambar, klik tombol:
Generate FavIcon.ico
4 Jika ingin favicon animasi, kalian bisa mendownload versi format GIF lalu simpan hasilnya. Hasil Generate Favicon

Cara Memasang Favicon di Blogger

1 Login ke akun Blogger kalian terlebih dahulu.
2 Masuk ke menu:
Tata Letak
3 Pada bagian Favicon, klik tombol Edit.
4 Klik tombol Browse, lalu upload favicon yang sudah kalian buat sebelumnya.
5 Setelah selesai upload, klik tombol Simpan. Pasang Favicon Blogger

Tips Membuat Favicon

1 Gunakan gambar sederhana agar mudah dikenali.
2 Hindari ukuran gambar terlalu besar agar blog tetap cepat diakses.
3 Gunakan warna yang sesuai dengan tema blog kalian.
4 Pastikan favicon tetap terlihat jelas meskipun ukurannya kecil.
Nah, itulah tutorial mengenai Cara Membuat dan Mengganti Favicon di Blog .

Gimana? Mudah banget, kan? 😄

Dengan mengganti favicon, blog kalian akan terlihat lebih profesional dan memiliki identitas sendiri.

Jika kalian tertarik mengganti icon default Blogger dengan favicon buatan sendiri, silakan ikuti tutorial di atas ya ✨

Semoga tutorial dari BibipBoy ini bisa berguna dan bermanfaat bagi para pembaca.

Selamat mencoba dan semoga berhasil 🚀
0
By di No comments:
Label: