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

Friday, October 4, 2019

- October 04, 2019

Cara Membuat Scrollbar di Blog Dengan Mudah

Membuat Scrollbar di Blog

Memperindah scrollbar di blog mempunyai daya tarik tersendiri selain berfungsi sebagai hiasan yang dapat mempercantik tampilan blog anda dengan menambahkan effect-effect ini dapat membuat ciri khas dari blog kita sehingga pengunjung blog dapat menjadi tertarik dengan blog anda.

Membuat scrollbar effect di blog ini juga tidak terlalu sulit dan terbilang sangat mudah selain itu juga anda bisa merubah warna dari effect dengan kode warna yang sudah tersedia di internet, atau kode di bawah sesuai selera masing-masing bila anda berminat memasang nya di blognya.

Jadi untuk menerapkan cara tersebut cukup dengan menggunakan kode HTML ke template blog yang saya akan uraikan lebih detail dibawah beserta dengan tutorialnya anda hanya simak dan salin kode tersebut ke blog nya nanti setelah di paparkan berikut ini.

Cara Membuat Scrollbar di Blog

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>

/* scrollbar effect */
::-webkit-scrollbar {
width:15px; height:7px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba( 106, 53, 42 );
background:#FFE5CC;
}
::-webkit-scrollbar-thumb {
background: rgba(28,119,229,0.7);
-webkit-box-shadow: inset 0 0 6px rgba( 205, 59, 28 );
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba( 238, 180, 168 );
7. Kemudian Save Template
Keterangan:
Anda bisa ganti #FFE5CC dengan kode warna yang anda inginkan.
Untuk ukuran ganti lebar scrollbar rubah angka yang sudah di beritanda warna merah width:15px; height:7px

Demikian cara membuat scrollbar di blog dengan mudah. semoga bermanfaat dan terimakasih atas kunjungannya. dan bisa anda memberikan komentarnya dibawah postingan ini. mohon dipahami jikalau ada salah eja dari isi artikel singkat nya wasalam salam blogger.

Monday, September 23, 2019

- September 23, 2019

Cara Mudah Pasang Kode Iklan AdSense Terbaru

Kode Iklan AdSense Terbaru

Tampilan iklan AdSense di situs blog sekarang ini berubah ukuranya mengapa demikian? karena google AdSense menyempurnakan unit iklan responsif agar performanya lebih baik lagi di desktop.

Maka dalam kesempatan kali ini saya akan share ke sahabat blogger yang belum tau cara untuk mengembalikan tampilan unit iklan nya seperti semula, sebelum ada perubahan baru-baru ini pada blog kesayangan anda.

Mau tau caranya seperti apa? simak dan perhatikan langkah mudah memasang kode iklan AdSense terbaru di blog blogger di bawah sebagai berikut:

Langkah pertama masuk ke dasbor blogger dan login dengan akun google nya kemudian pilih menu tata letak lalu tambahkan gadget selanjutnya pilih HTML/Java Script pada widget nya dan salin kode iklan AdSense berikut.;

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Iklan_ AdSense_970x90 -->
<ins class="adsbygoogle"
style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Keterangan:
1. Iklan_ AdSense_970x90 (ganti dengan nama unit iklan anda)
2. ca-pub-1234 (ganti dengan ca-pub adsense milik anda)
3. 5678 (ganti juga dengan kode slot iklan adsense milik anda)

Saturday, September 14, 2019

- September 14, 2019

Belajar Cara Membuat Widget Popular Posts Blogger


Barangkali sahabat blogger mau memperindah tampilan widget yang ada di sidebar blog blogger nya, karena pada kesempatan kali ini kita akan belajar cara membuat widget popular posts dan widget ini sebenarnya sudah banyak yang menggunakan nya.

Tetapi saya share kembali siapa tau diantara sahabat blogger semua berminat ingin merapkan widget tersebut.untuk membuat sidebar blog yang lebih cantik atau keren maka dari itu simak dan pelajari langkah-langkah atau tutorial dibawah.

Agar anda bisa pahami cara penempatan dari kode widgetnya ke template blog milik anda nantinya, perhatikan penjelasan nya berikut ini;

Cara memasang kode widget popular posts blog blogger:

1. Masuk ke dasbor blogger
2. Pilih menu tema
3. Klik tombol Edit HTML
4. Lalu klik dimana saja pada area kode dan tekan tombol Control + F atau Command + F pada keyboard pc(laptop) untuk membuka kotak pencarian di sudut kanan atas jendela kode dan tuliskan ]]></b:skin> kemudian tekan tombol Enter untuk mencari.
5. Salin dan tempelkan kode CSS atau HTML di bawah tepat diatas kode ]]></b:skin> berikut kodenya;
.popular-posts ul{padding-left:0px;counter-reset:popcount}
.popular-posts ul li:before{list-style-type:none;margin-right:15px;padding:0.2em 0.5em;counter-increment:popcount;content:counter(popcount);font-size:16px;background:#2b2b2b;color:#fff;position:relative;font-family:georgia;float:left;border:2px solid #ddd;border-radius:15px}.popular-posts ul li{border-bottom:1px dashed #ddd;height:28px}.popular-posts ul li:hover{padding-left:10px;border:2px solid #FFF;background:#FFF}.popular-posts ul li a{text-decoration:none;color:#5A5F63}.popular-posts ul li a:hover{text-decoration:none;text-decoration:none;color:#2b2b2b}.popular-posts .item-thumbnail img{border-radius:100px; border-radius:100px; border-radius:100px;list-style:none}.popular-posts .item-thumbnail img:hover{ border-radius:0px;list-style:none; border-radius:0px}
6. Simpan tema

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...

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.