Thursday, September 5, 2019

- September 05, 2019

Belajar Membuat Pointer Mouse Blog Blogger

Membuat Pointer Blog Blogger

Bagi sahabat blogger yang mau merubah tampilan pointer atau cursor mouse pada blog blogger nya, artikel inilah tempatnya dan lengkap. Agar tampilan pointer yang ada pada blog nya bisa anda ubah dengan tampilan yang baru maka dari itu saya akan tunjukan beberapa langkah untuk belajar membuat pointer di blog blogger menjadi menarik dan indah di pandang.

Bagaimanakah cara merubahnya? dan seperti apakah tampilan nya? cara mengubah pointer di blog blogger sangatlah mudah salah satu cara terbaik adalah menambahkan kode HTML javascript pada template blog, mengenai tampilan nya sebenarnya tidak merubah tampilan default pointer.

Jika anda masih penasaran dengan apa yang sudah saya jelaskan diatas atau tentang hal ini nanti anda buktikan sendiri setelah mengikuti tutorialnya dan di terapkan ke blognya, jangan berlama-lama menuju ke Tkp sajalah simak berikut di bawah ini;

Cara Membuat Pointer Blog Blogger Dengan Mudah

1. Masuk di Dasbor Blogger atau buka halaman Template
2. Kemudian pilih menu Tata Letak
3. Lalu pilih dan Tambahkan Gadget
4. Jika sudah muncul tab halamam baru pilih widget yang ada tulisan HTML/JavaScript
5. Setelah itu salin kode HTML/JavaScript dibawah kemudian tempelkan kode nya ke dalam kolom widget dan untuk nama judul widget biarkan saja kosong ini kodenya;
<script language="JavaScript" type="text/javascript">var xCol = "#FF0000";var yCol = "#FFFF00";var zCol = "#0000FF";var n = 6; //number of dots per trail.var t = 40; //setTimeout speed.var s = 0.2; //effect speed.var r,h,w;var d = document;var my = 10;var mx = 10;var stp = 0;var evn = 360/3;var vx = new Array();var vy = new Array();var vz = new Array();var dy = new Array();var dx = new Array();var pix = "px";var strictmod = ((document.compatMode) &&document.compatMode.indexOf("CSS") != -1);var domWw = (typeof window.innerWidth == "number");var domSy = (typeof window.pageYOffset == "number");var idx = d.getElementsByTagName('div').length;for (i = 0; i < n; i++){var dims = (i+1)/2;d.write('<div id="x'+(idx+i)+'" style="position:absolute;'+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'+'left:0px;width:'+dims+'px;height:'+dims+'px;'+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'+'left:0px;width:'+dims+'px;height:'+dims+'px;'+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');}if (domWw) r = window;else{if (d.documentElement &&typeof d.documentElement.clientWidth == "number" &&d.documentElement.clientWidth != 0)r = d.documentElement;else{if (d.body && typeof d.body.clientWidth == "number")r = d.body;}}function winsize(){var oh,sy,ow,sx,rh,rw;if (domWw){if (d.documentElement && d.defaultView &&typeof d.defaultView.scrollMaxY == "number"){oh = d.documentElement.offsetHeight;sy = d.defaultView.scrollMaxY;ow = d.documentElement.offsetWidth;sx = d.defaultView.scrollMaxX;rh = oh-sy;rw = ow-sx;}else{rh = r.innerHeight;rw = r.innerWidth;}h = rh;w = rw;}else{h = r.clientHeight;w = r.clientWidth;}}function scrl(yx){var y,x;if (domSy){y = r.pageYOffset;x = r.pageXOffset;}else{y = r.scrollTop;x = r.scrollLeft;}return (yx == 0)?y:x;}function mouse(e){var msy = (domSy)?window.pageYOffset:0;if (!e) e = window.event;if (typeof e.pageY == 'number'){my = e.pageY - msy + 16;mx = e.pageX + 6;}else{my = e.clientY - msy + 16;mx = e.clientX + 6;}if (my > h-65) my = h-65;if (mx > w-50) mx = w-50;}function assgn(){for (j = 0; j < 3; j++){dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *Math.sin((stp+j*25)/2) + scrl(0) + pix;dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;}stp+=s;for (i = 0; i < n; i++){if (i < n-1){vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;}else{vx[i].top = dy[0]; vx[i].left = dx[0];vy[i].top = dy[1]; vy[i].left = dx[1];vz[i].top = dy[2]; vz[i].left = dx[2];}}setTimeout(assgn,t);}function init(){for (i = 0; i < n; i++){vx[i] = document.getElementById("x"+(idx+i)).style;vy[i] = document.getElementById("y"+(idx+i)).style;vz[i] = document.getElementById("z"+(idx+i)).style;}winsize();assgn();}if (window.addEventListener){window.addEventListener("resize",winsize,false);window.addEventListener("load",init,false);document.addEventListener("mousemove",mouse,false);}elseif (window.attachEvent){window.attachEvent("onload",init);document.attachEvent("onmousemove",mouse);window.attachEvent("onresize",winsize);}</script>

Berikut contoh penerapan kode HTML/JavaScript pada kolom widget blog blogger nya seperti gambar screenshot di bawah;


kode html java script pointer

6. Lalu Simpan
Keterangan:
Untuk warna nya ganti sesuai selera anda, yang bisa anda rubah adalah kode yang sudah di beri tanda berwarna merah seperti ini "#FF0000" "#FFFF00" "#0000FF" atau lebih jelasnya anda cek pada sumber dari kode HTML nya ini di situs blog bloggertutorial blogblogspot com


Nah... Selesai sudah Belajar Membuat Pointer Blog Blogger baca dan pahami dan berikan kritiknya di kolom komentar semoga dengan ada kritik dari anda semua blog ini bisa bermanfaat bagi semua yang beraktifitas lewat internet salam blogger.

Wednesday, September 4, 2019

- September 04, 2019

Belajar Membuat Contact Form Di Blog Blogger

Membuat Contact Form Di Blog Blogger

Dalam pembuatan blog saat ini sudahlah cukup mudah dilakukan sudah banyak tutorial yang tersedia di internet, namun terkadang dalam pembuatan blog sendiri banyak pengguna blog yang mengabaikan yang namanya contact form atau formulir kontak baik itu blog pribadi maupun blog online shop.

Padahal banyak manfaat dan kegunaanya salah satunya yaitu memudahkan pembaca atau pengunjung untuk berkomunikasi jika ada keperluaan yang ingin ditanyakan tentang apa saja yang berhubungan dengan konten-konten yang ada pada halaman sebuah blog.

Selain itu juga kita sebagai pemilik blog dapat dengan mudah merespon apa yang mereka ingin di tanyakan terhadap artikel yang sudah di publisasikan di halaman blog, seyogya nya layanan dan fitur nya mempermudah berkomunikasi antara pemilik blog(admin) dan pengunjung(pembaca) blog.

Maka dalam kesempatan ini kita akan belajar cara membuat contact from tersebut anda simak langkahnya dan barangkali anda bisa terapkan ke blognya berikut ini;

Cara Membuat Contact Form diblog blogger

1. Masuk di Dasbor Blogger 
2. Buka halaman Template lalu pilih menu Tema 
3. Klik pada tombol Edit HTML 
4. Klik di mana saja di area kode 
5. Tekan tombol [Control + F] atau [Command + F] untuk membuka kotak pencarian di sudut kanan atas jendela kode, kemudian tuliskan kode ]]></b:skin> 
6. Tekan tombol Enter untuk mencari, jika sudah anda menemukan kode ]]></b:skin> kemudian salin dan tempelkan kode HTML berikut dibawah tepat di atas kode ]]></b:skin>

#ContactForm1{ display: none !important; }

7. Simpan tema 
Berikut contoh penerapan kode nya kedalam template seperti gambar dibawah ini:


kode html blog blogger


8. Setelah temanya di simpan lanjutkan ketahapan untuk memunculkan halaman contact form dan langsung saja pergi ke menu Halaman static lalu pilih "Halaman baru",
9. Jika sudah masuk di halaman postingan terlebih dahulu masukan nama judul contact form pada kolom penulisan Judul halaman
10. Kemudian pilih tulisan "HTML" disamping kanan tulisan Compose, selanjutnya salin kode HTML dibawah lalu tempel kan pada areal postingan halamana static ini kodenya;
<form name='contact-form'> <p></p> Name<br /> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' /> <p></p> Email <span style='font-weight: bolder;'>*</span><br /> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' /> <p></p> Message<span style='font-weight: bolder;'>*</span><br /> <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <p></p> <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Send' type='button' /> <p></p> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div> </form>

Inilah contoh penerapan dan penempatan kode HTML nya seperti gambar di bawah ini;

halaman static blog

11. Langkah terakhir klik tombol Publisasikan yang terletak pada bagian atas kanan halaman static postingan blog.Dan lihat hasilnya apakah sudah muncul halaman contact form yang anda buat, untuk melihat nya pergi ke menu halaman static kemudian arahkan pointer tepat pada postingan halaman static yang sudah anda publisasikan seperti gambar berikut dibawah ini;

semua halaman blog

Note;
Untuk demo nya nanti anda lihat pada blog anda namun jika anda tidak berhasil menerapkan tutorial dari artikel ini anda bisa cek cara yang lain nya ada pada blog ini cari lewat search box blog.

Nah itulah hasil belajar membuat contact form diblog blogger semoga bermanfaat bagi anda semua kritik dan saran tinggalkan jejak lewat kolom komentar dibawah artikel nya. salam blogger...

Monday, September 2, 2019

- September 02, 2019

Belajar Berbagi Tips Seo dan Tutorial Blogger

Situs web yang menyediakan layanan pembuatan blog di internet saat ini sudah bermunculan sangat lumayan banyak. Hal itu di picu adanya budaya teknologi kekinian yang semakin maju berkembangan nya, untuk membuat blog di internet tentukan lah pilihan diantara nya mana yang mudah di gunakan dalam kegiatan blogging nya tentunya yang terbaik untuk anda.

Berbagi Tips Seo dan Tutorial Blogger

Website pembuat blog seperti Blogger.com dulu hanya di gunakan oleh para pengguna yang mahir, handal dan mempunyai keahlian khusus di bidang IT ataupun yang ahli pada bidang penulisan sebuah artikel. Tapi sekarang buktinya saya admin blog ini bisa menggunakan atau membuat blog dari website pembuat blog Blogger, pada hal saya profesi nya hanya seorang kuli bangunan yang mengandalkan informasi pengetahuan lewat search google.

Kenapa saya memilih dan membuat blog blogger? saya membuat blog dari web blogger di karenakan fitur-fitur yang di milikinya mudah, simple saat digunakan dan cocok buat saya pribadi. Banyak web pembuat blog bermunculan aplikasi dan fitur yang di tawarkan nya lengkap dan juga bagus-bagus semua. Meski berplatform blogger yang menggunakan domain blogspot.com gratis tapi fitur-fiturnya juga tidak kalah dengan situsweb yang menawarknan layanan pembuatan blog serupa lainya bahkan lebih lengkap.

Memang tidak semua situsweb penyedia pembuat blog bagus, harus di coba jika ingin membuat blog di blogger dan lihat ulasannya bagus atau tidak. Paling tidak buat blog yang standar dulu minimal satu saja sebagai langkah percobaan. Jika penasaran silahkan cari dan baca refrensi cara membuat blog di google penelusuran, Atau simak berikut beberapa langkah belajar membuat blog di website blogger.com. Dalam artikel ini akan menjelaskan ulasannya dibawah ini;

Sebelum melangkah lebih jauh saya akan perkenalkan terlebih dahulu tampilan halaman depan website blogger.com yang sudah saya screenshot gambarnya sebagai berikut;

blogger.com
https://www.blogger.com/
Nah sekarang kita lanjutkan kepembahasan nya, Hal terpenting yang harus kita lakukan sebelum membuat blog adalah persiapkan alat untuk browsing, apa alatnya yang dimaksud? ya pastinya dengan komputer,laptop,ponsel dan paket kuota data internet, karena tanpa alat-alat tersebut belum tentu kita bisa membuat blog kecuali ada yang gratis untuk alat nya bisa saja jadi' ok siap...

Belajar Membuat Blog Dan Tutorial Blogger Terbaru:

1. Buka halaman website blogger.com.
Langkah pertama untuk membuat blog dari blogger yaitu dengan membuka halaman website bloggerpada kolom browser penelusuran google, perhatikan dalam gambar di bawah;


Jika sudah di enter maka akan di alihkan ke tab halaman baru dan di halaman web tersebut ada dua pilihan SIGN IN dan CREATE YOUR BLOG kemudian pilih salah satunya berikut cuplikan halaman nya;


2. Masuk Dengan Akun Email Gmail
Apabila anda sudah klik pada pilihan tulisan tersebut maka akan menuju masuk untuk melanjutkan ke blogger, tetapi kalau anda belum pernah masuk sama sekali menggunakan akun email gmail.com maka halaman yang muncul seperti berikut ini;



Agar anda bisa menikmati semua layanan dari google silahkan daftar akun email atau gunakan nomor ponsel yang anda miliki, apabila anda sudah memiliki email gmail maka langsung masukan email nya di kolom yang ada tulisan email atau ponsel dan kemudian klik tombol berikutnya seperti gambar dibawah ini;

Dan selanjutnya akan ada tab halaman baru lagi, maka langsung saja masukan sandi email gmail milik anda pada kolom yang sudah tersedia yang ada tulisan masukan sandi anda lalu klik tombol berikutnya
3. Klik Tulisan Buat Blog Baru
Setelah halaman utama dasbor blogger terbuka klik lah tulisan "buat blog baru". Jadi untuk membuat blog anda pilih buat blog baru nah seperti gambar dibawah ini;





Kemudian akan ada muncul kolom untuk mengisi judul nama blog dan alamat url blog. Maka isilah kolom tersebut setelah itu pilihlah templete. lalu klik tombol dibawah yang ada tulisan buat blog



4. Pilih Tema atau Template 
Pilih templete sesuai dengan yang anda inginkan. Templete blog dapat dengan mudah dirubah jika anda kurang menyukai templete yang telah anda pilih, maka anda masih bisa anda pilih template-template yang lain biasanya ada dibawah.



Dan ditahap ini blog anda sudah jadi tinggal dikembangkan lagi melalui halaman entri untuk membuat postingan-postingan artikel.

Dalam dunia internet, website pembuat blog Blogger sudah bukan hal yang asing lagi. web ini sangat berguna untuk membantu seorang penulis blog agar blognya bisa menghasilkan uang dengan program google adsense. Apalagi di zaman yang serba modern ini, blog blogger banyak sekali yang menggunakan nya. Dan anda yang belum punya blog jika berminat segera buat blog dengan Blogger.com gratis lho.

Nah sekarang lanjut ke tahapan mengoptimasi blog penjelasan dan uraiannya baca di bawah ini;

Cara Singkat Optimasi Blog di Blogger

Apakah yang harus di lakukan setelah blog sudah jadi?

Setelah kita sudah membuat blog, tugas terpenting yang harus dilakukan adalah mengisi blog dengan konten-konten, agar blog yang di buat tersebut bisa bermanfaat bagi orang lain dan diri sendiri dalam hal ini mengisi blog dengan artikel yang berfaedah sesuai dengan tujuan dari blog yang anda buat.

Mengenai panduan cara membuat konten yang berkualitas dan tips-tips lainya anda bisa cari di searching google, karena di blog ini masih kurang artikel nya masih tahap proses belajar.

Namun dalam kesempatan ini saya akan memberikan tips cara mengoptimasi blog agar artikel blog yang anda buat bisa berada di halaman pencarian google dan cara yang akan saya bagikan pada artikel ini hanyalah cara singkat dan standar nya saja simak dan pelajari tips berikut di bawah ini;

1. Menulis Artikel
Dalam penulisan artikelpun tidaklah sembarangan menaruh judul postingan, tentukan juga keyword dan isi artikel harus berkaitan dengan konten yang dibuat dan yang terutama adalah artikelnya harus mudah di pahami oleh para pembaca atau pengunjung blog, pada hal saya sendiri masih amburadu menerapkan nya pada blog ini, nanti andalah yang kembangkan setelah anda membaca artikel ini.

2. Mengupload Gambar dan Video
Media penting yang harus ada di dalam konten artikel adalah gambar, media gambar begitu penting untuk meningkatkan daya minat atau rasa penasaran para pembaca atas konten artikel anda. Ada banyak blogger yang menyematkan media gambar sebagai daya tarik tersendiri dari suatu konten agar para pembaca lebih penasaran.

Sama halnya dengan video youtube dengan tumbnail gambar yang terkadang menyeleneh atau membuat orang penasaran. Jadi gambar sangat penting untuk anda sematkan di konten artikel anda.dan yang tidak kalah penting untuk anda sematkan di artikel anda adalah sebuah video yang mana bisa memberikan nilai tambah terhadap artikel nya

Selain itu ada juga media penting yang harus ada di artikel anda adalah infografis atau grafik yang mana juga memberikan gambaran secara lengkap dan rinci seperti apa artikel anda disajikan.

3. Submit Url Blog Ke Google Search Console
Ketika anda sudah melakukan dua hal di atas pada blog yang anda buat maka langkah selanjutnya submit url artikel yang sudah di publisasikan pada halaman entri blog anda ke google search console,untuk lebih jelas baca Cara Mudah Submit URL Artikel Blog ke Google Search Console 

Dan cobalah memulai mempelajari apa itu SEO, SEO sendiri akan sangat mempengaruhi blog anda jika sudah anda terapkan, dengan adanya SEO akan membuat blog anda lebih mudah ditemukan oleh pembaca nantinya. Semakin mudah terindeks blog anda oleh mesin pencarian google.

Nah itulah sedikit tutorial blogger dan tips seo dari saya untuk anda para calon blogger yang ingin membuat blog dengan blogger.com. Semoga artikel ini dapat bermafaan bagi anda sekalian yang ingin menggeluti dunia blongger.

Friday, August 30, 2019

- August 30, 2019

Cara Membuat Links Custom Whatsapp Untuk Bio(profil) Instagram

 Membuat Links Custom Whatsapp Untuk Bio(profil) Instagram

Sebagai pengguna media sosial dan khususnya pembisnis di dunia maya, terkadang masih bingung untuk membuat online shop yang ia kelola menjadi unik, menarik dan mudah berintergrasi dengan peminat atau pelanggan dari produk-produknya yang di tawarkan lewat akunnya.

Nah pada artikel ini saya akan memberikan referensi online shop yang menggunakan platform instagram tentang kontak whatsapp yang di pajang pada bio atau profil, yang semoga bisa menginspirasi sahabat blogger semua yang mempunyai olshop.

Agar kontak whatsapp nya lebih keren dari biasanya hanya menampilkan angka atau nomor kontak(handphone) saja di bio nya maka dalam hal ini untuk membuat profil akun instagram nya lebih profesional lagi tentunya menggunakan Custom Links bahasa popularnya URL Shortener.

Untuk membuat links custom whatsapp, alternatif yang bisa anda gunakan diantaranya ada situs web yang menyediakan layanan shortener links yaitu bitly. Bagaimanakah cara membuat custom links nomor whatsapp? caranya sangat mudah dan simple. Lebih jelasnya anda simak langkah-langkah nya di bawah berikut ini:

Cara Membuat Links Custom Whatsapp Untuk Bio(profil) Instagram:


1. Terlebih dahulu tentunya anda persiapkan dan gunakan nomor handphone(HP) yang sudah terdaftar pada akun whatsapp dan ingin di buatkan links custom

2. Cari dan gunakan searching google untuk menemukan kode script url api whatsapp atau anda bisa menggunakan tautan klik untuk chat seperti berikut:
https://wa.me/628512345679?text=Saya%20Berminat%20untuk%20membeli%20motor%20Anda...

atau dengan kode url seperti yang satu ini berikut kodenya:
https://api.whatsapp.com/send?phone=628512345679&text=Salam%20Apakah%20Masih%20Ada%20Stock%20Barangnya...

Keterangan;

Ganti angka yang ada pada kode url atau link yang sudah di beri tanda berwarna merah mulai dari angka 8 sampai angka 9 dengan nomor whatsapp milik anda dan untuk text nya ganti dan rubah sesuai dengan apa yang anda inginkan,bila anda ingin menambahkan text jangan lupa sisipkan %20 sebagai jarak dari kalimat(spasi) text nya. Untuk lebih jelas mengenai cara penerapan kode url dan link klik chat silahkan kunjungi halaman situs web resminya karena sumber dari kode tersebut berasal dari faq whatsapp. Dan kode yang ada di dalam artikel ini sudah admin ubah suai(modifikasi). Jika sudah lengkap semua yang di maksud dari point nomor satu dan nomor dua di atas maka menuju kelangkah selanjutnya.

3. Silahkan salin kode link chat yang tertera diatas sesuai dengan keterangan nya, kemudian pergi ke alamat website bitly.com lalu daftar dulu. Demikian cara daftar yang di uraikan dalam gambar berikut;

gambar halaman depan bitly com
Jika sudah tampil halaman depan website bitly seperti pada gambar diatas maka mulailah daftar dan arahkan kursor nya ke menu pendaftaran atau klik Sign Up dan akan di arahkan kehalaman baru, berikut gambarnya;


Bila sudah berhasil mendaftar akun dan sudah login atau masuk ke dasbor akun bitly nya anda tinggal tempel kan kode script url atau link chat yang sudah anda salin lebih jelasnya perhatikan gambar lagi di bawah;

Setelah diklik CREATE akan muncul tab halaman jendela baru dilayar seperti gambar screen shoot dibawah ini;


Hasil nya seperti gambar ini



4. Langkah terakhir Jika links custom nya selesai dan berhasil maka salin lagi links custom anda yang sudah anda buat kemudian buka akun olshop instagram nya dan tempelkan di bio(profil) pada kolom kosong yang ada tulisan Situs Web 

Demikian contoh penerapan links custom yang akan anda ikuti langkah nya pada gambar screenshoot akun instagram berikut simak dengan baik dan benar;


Dan seterusnya;




Dan hasilnya akan seperti ini;


Nah... Selesai sudah tutorial nya walaupun berantakan cara penerapan nya namun baca dan pahami yang penting-penting saja maklum lah kurang pengetahuanya ok tolong di pahami saja ya dan berikan kritiknya di kolom komentar semoga dengan ada kritik dari anda semua blog ini bisa bermanfaat bagi semua yang beraktifitas lewat internet salam blogger. 

Tuesday, August 27, 2019

- August 27, 2019

Cara Mudah Membuat Menu Drop Down Horizontal

Membuat Menu Drop Down Horizontal

Membuat Menu pada situsblog sangatlah perlu bagi seorang blogger kenapa demikian? karena menu yang ada dalam halaman sebuah situsblog itu mempunyai manfaat dengan tujuan untuk memudahkan pembaca dan pengunjung situsblog saat berkunjung ke situsblog tersebut dan sekaligus menjadikan situsblog blogger agar terlihat lebih keren dan juga profesional.

Struktur atau bentuk dari menu situsblog mempunyai bentuk gaya yang bermacam-macam jenisnya ada yang berbentuk horizontal dan vertikal atau drop down. Menu situsblog horizontal gayanya menyamping dari sebelah kanan ke sebalh kiri. Dan menu situsblog vertikal gayanya dari atas ke bawah.

Cara untuk membuat menu untuk situsblog bisa dilakukan dengan sangat mudah dan caranya diantaranya bisa anda langsung mengedit HTML pada template situsblog atau dengan menambahkan gadget ke template melalui tata letak pada halaman dasbor situsblog blogger milik anda.

Jika diantara pengguna baru blogger belum memahami cara membuat menu horizontal drop down pada situsblog maka simak dan terapkan cara dibawah ke situsblog nya berikut ini;

Berikut adalah Cara Membuat Menu Drop Down Horizontal;


1. Masuk ke akun Blogger Pilih menu Tema

2. Lalu Klik Edit HTML

3.  Cari kode ]]></b:skin>

4. untuk memudahkan nya tekan CTRL F Bersamaan

5. Lalu salin dan tempelkan kode HTML dibawah tepat diatas kode ]]></b:skin>

#Menu { background: #0573ce; width: 880px; height: 35px; font-size: 12px; font-family: Arial, Tahoma, Verdana; color: #0573ce; font-weight: bold; margin-bottom: 30px; padding: 2px; } #box { width: 875px; float: left; margin: 0; padding: 0; } #punch { margin: 0; padding: 0; } #punch ul { float: left; list-style: none; margin: 0; padding: 0; } #punch li { list-style: none; margin: 0; padding: 0; } #punch li a, #punch li a:link, #punch li a:visited { color: #0573ce; display: block; font-size: 16px; font-family: Georgia, Times New Roman; font-weight: normal; text-transform: lowercase; margin: 0; padding: 9px 15px 8px; } #punch li a:hover, #punch li a:active { background: #0573ce; color: warna1; margin: 0; padding: 9px 15px 8px; text-decoration: none; } #punch li li a, #punch li li a:link, #punch li li a:visited { background: #0573ce; width: 150px; color: warna2; font-size: 14px; font-family: Georgia, Times New Roman; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #FFF; } #punch li li a:hover, #punch li li a:active { background: #0573ce; color: #0573ce; padding: 7px 10px; } #punch li { float: left; padding: 0; } #punch li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #punch li ul a { width: 140px; } #punch li ul ul { margin: -32px 0 0 171px; } #punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul { left: -999em; } #punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul { left: auto; } #punch li:hover, #punch li.sfhover { position: static; }

Contoh penerapan kode HTML nya dalam template seperti gambar berikut;

lalu edit html

tekan CTRL F Bersamaan


Note:

Silahkan anda ganti kode warna yang sudah admin beri tanda warna merah pada  kode HTML nya atau ganti dengan kode warna favorit yang anda sukai ,untuk kode warna anda bisa lakukan searching google banyak kode untuk warna-warna yang lebih keren.

6. Simpan Template dan agar keren lagi tampilan menu drop down horizontal nya pada situsblog blogger Anda, maka langkah selanjutnya adalah pergi ke "Tata Letak " halaman blog Anda lalu "tambahkan gadget " pada bagian sidebar atau yang lain di mana Anda ingin munculkan menu drop down horizontal

7. Pilih "HTML/JavaScript " pada menu widget 
8. Dan salin lalu tempelkan kode di bawah ini ke dalam "HTML/JavaScript " widgetnya dan biarkan Kolom Nama Judul nya di kosongkan

<div id="Menu">
<div id="box">
<ul id="punch">
<li><a href="#">Home</a></li>
<li>
<a href="#">Menu</a>
<ul>
<li>
<a href="#">Sub Menu</a>
<ul>
<li><a href="#">Sub Menu1</a></li>
<li><a href="#">Sub Menu2</a></li>
<li><a href="#">Sub Menu3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu4</a></li>
<li><a href="#">Sub Menu5</a></li>
<li><a href="#">Sub Menu6</a></li>
<li><a href="#">Sub Menu7</a></li>
</ul>
</li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
</ul>
</div>
</div>

Berikut Contoh penerapan kode HTML nya dalam template seperti gambar di bawah;
tambah gadget

tempel kode html nya



9. Selanjutnya ganti nama menu sesuai keperluan atau keinginan anda. dan ganti tanda # yang sudah diberi tanda warna merah dengan alamat URL menu situsblog yang anda inginkan lalu Klik SIMPAN

Jika posisi gadget menu drop down horizontal ini tersimpan pada sidebar maka geser atau pindahkan di tempat gadget halaman menu yang anda inginkan lalu langkah terakhir klik tombol SIMPAN SETELAN di bagian kanan atas dasbor blogger anda.




Nah, Jika sudah anda melakukan cara di atas dengan betul dan benar anda berhasil membuat menu drop down horizontal di situsblog milik anda dan apabila cara ini tidak berfungsi maka silahkan kritik dan saran di kolom komentar di bawah postingan artikel ini, terimakasih salam blogger.

Tuesday, August 20, 2019

- August 20, 2019

Cara Tambah Widget Komentar Terbaru Pada Sidebar

Tambah Widget Komentar Terbaru Pada Sidebar

Para pemilik blog pasti sudah tidak asing lagi dengan widget yang satu ini. Seperti apakah widget yang di maksud? yaitu widget recent comments (widget komentar terbaru), fungsi dari widget ini adalah menampilkan aktivitas komentar terbaru dari pengunjung yang mengomentari postingan artikel pada situs blog dan bisa di tampilkan pada widget sidebar.

Walaupun demikian, masih banyak yang belum tahu bagaimana caranya agar bisa menampilkanya ke sidebar blognya, bagi yang belum tau cara pasang nya maka dalam artikel ini saya akan membagikan beberapa langkah dan cara agar blog anda mempunyai widget recent comments, Caranya mudah hanya menambahkan kode HTML Java script pada template blog.

Berikut adalah Cara Memasang Kode Widget Komentar Terbaru:
1. Masuk ke akun Blogger
2. Pilih menu Tema
3. Lalu Klik Edit HTML
4. Cari kode </head> untuk memudahkan nya tekan CTRL F Bersamaan
5. Lalu salin dan tempelkan kode HTML Java script dibawah tepat diatas kode </head>

<script type='text/javascript'> //<![CDATA[ function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#comment-");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a> commented');if(n_rc==true)document.write(' on '+f_rc);document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i><br/><br/>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i>');document.write('<br/><br/>');}}} //]]> </script>

6. Lalu simpan Tema dan agar bisa tampil widget komentar terbaru ke sidebar blog blogger Anda, langkah selanjutnya adalah pergi ke "Tata Letak " halaman blog Anda lalu "tambahkan gadget " pada bagian sidebar atau yang lain di mana Anda ingin munculkan widget komentar terbaru.

7. Pilih "HTML/JavaScript " pada widget
8. Dan salin kode di bawah ini ke dalam "HTML/JavaScript " widgetnya.

<script>var a_rc = 5; var m_rc = false; var n_rc = true; var o_rc = 100;</script> <script src="https://www.iyaseo.id/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
Catatan:
Ganti url blog yang diberi tanda warna merah dengan url blog milik anda dan anda juga dapat mengubah angka 5 berapa banyak komentar yang harus tampilkan dalam widget komentar terbaru atau sesuaikan setelannya sesuai yang anda inginkan.

9. Langkah terakhir simpan dan muat ulang situsblog Anda. dan lihat apakah widget Komentar terbaru ini bisa berfungsi pada situsblog anda.




Demikian sudah Cara Tambah Widget Komentar Terbaru Pada Sidebar. Jika tidak berhasil silahkan sampaikan di kolom komentar di bawah, ya. Nanti bisa di bantu sampai bisa.