4hmad Tutorial

Home Posts filed under Blog

Tampilkan postingan dengan label Blog. Tampilkan semua postingan

06 Mei 2018

Cara Membuat Iklan Mirip Adsense Sumpah mirip banget

Mei 06, 2018 1 Comment

Google adsense yaitu salah satu penyedia iklan terbesar, banyak orang orang mendaftarkan adsense, mulai dari blogger pemula hinggan master.

Bahkan ada yang jadi peternak adsense, karena selain ratenya tinggi bila di jual lumayan mahal.

Tapi tidak semua pendaftar adsense akan keterima alias di tolak, ada syarat syaratnya. Syaratnya pun lumayan sulit, kadang juga ada blog yang sudah memenuhi syarat tapi masih mendapat tolakan dari google adsense, dan bikin kecewa.

Nah, bagi kalian yang baru mendapat pesan tolakan dari google adsense jangan sedih karena saya membagikan tutorialnya, Bukan tutorial agar keterima adsense ya, tapi tutorial membuat widget yang mirip dengan adsense.

Emang buat apa membuat widget seperti adsense?

Buat partneran
Buat internal link juga bisa
Buat mengarah ke home
Yang paling bagus nih, buat kerjasama backlink (kamu tawarin ke blogger blogger agar pasang iklan di blog kamu dan kamu dapat komisi)

Oke, kalau kalian sudah mengerti maksud dari widget iklan seperti adsense langsung saja masuk ke langkah langkahnya.

Masuk dashboard blogger
Masuk ke menu tata letak

tata letak
Pilih dimana widget yang akan kalian pasang, saran saya di kiri artikel agar mirip seperti adsense

Pilih salah satu, semua juga boleh
Pilih yang html/javascript

Pilih html/javascript
Copy script dibawah dan pastekan pada widget html/javascript tadi dan simpan

paste dan simpan

Tulisan yang saya warnai merah bisa ganti selera kalian

Selesai, nah itulah cara membuat iklan mirip adsense jadi buat kalian yang baru ketolak adsense jangan khawatir karena bisa pakai ini, dan jangan menyerah perbaiki blognya untuk daftar adsense lagi.

Bila kalian ahli html/javascript dan css, bisa di oprek lagi.

Terima kasih untuk blog.kodejarwo.com

Source: https://blog.kodejarwo.com/2017/07/adsense-richer-text-ads.html

20 April 2018

Bahasa Pemrograman Blog

Cara Membuat Gradient Color Pada Footer Template

April 20, 2018 2 Comments

Cara Membuat Gradient Color Pada Footer Template

Hai, setelah kemarin saya posting membuat gradient color khususnya pada header, sekarang saya membagikan tutorial membuat gradient pada footer. Saya memakai template milik arlian, untuk template lain bisa menyesuaikan.

Ingat, pastikan jangan sampai menumpuk antara Background utama dengan Background Gradient karena nanti Gradien Color tidak akan muncul, karena itu jika ingin memasang dibagian footer pastikan kalian hapus CSS Background pada footernya dulu. Baru kalian pasang Gradient Color.

Yah, langsung saja terjun ke langkah langkah membuat Gradient color pada header.

Cara Penerapan Gradien Color

Masuk ke Dashboard Blog
Setelah itu Klik Template / Tema
Klik Edit HTML

Kalian copy script di bawah

{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Nah dibagian ini cari kode #footer-wrapper / #footer (setiap template berbeda beda), lalu hapus kode Background nya (saya warnai merah) seperti dibawah ini

#footer-wrapper {
background: #000; (ganti script yang saya warnai merah dengan script yang telah kalian copy tadi)
max-width: 1000px;
margin: 0 auto;
position: relative;
}

Maka akan hasilnya jadi seperti ini (tanpa background). Lihat gambar di bawah agar lebih jelas

#footer-wrapper {
{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background- position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%} 100%{background-position:0 50%}}
max-width: 1000px;
margin: 0 auto;
position: relative;
}

Jika sudah buat pemanggilan kode terlebih dahulu, misal #footer-wrapper{paste kode animasinya}, Kalian cari <style> atau <b:skin>. Copy script dibawah dan pastekan di bawahnya (<style> atau <b:skin>. Lihat gambar di bawah agar lebih jelas

#footer-wrapper, #back-to-top{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Note: tulisan yang saya warnai kuning samakan dengan kode footer, misal #footer-wrapper atau #footer

Lalu kalian Save / Simpan Template.
Coba kamu lihat Tampilan nya pasti akan berubah warna
Selesai

Lihat gambar di bawah agar lebih jelas

langkah 1

Mudah banget bukan? yah, untuk mengganti warna dengan warna yang kalian inginkan (meracik warna sendiri) silahkan ganti pada bagian kode warna seperti #E224C3 dan ganti dengan warna yang kamu inginkan (misal #E73C7E)

Nah itulah cara untuk membuat gradien color di blog. Sampai bertemu di tutorial selanjutnya ya. Bye

19 April 2018

Bahasa Pemrograman Blog

Cara Membuat Gradient Color Di Header dengan CSS

April 19, 2018 7 Comments

Cara Membuat Gradient Color Di Header Dengan CSS

Hai, pada tutorial ini saya membagikan tentang membuat warna warni (gradient) pada template, karena banyak sekali para blogger sekarang menggunakan Gradien Color, terutama di header, footer dan lain lain. Tentu bagi yang belum paham atau awam pasti sulit untuk menerapkan CSS nya. Sebenarnya Gradient Color menggunakan Animation.

CSS yang dimana setiap warna akan berubah tentu saja kodenya mudah di ingat bila sering dipelajari.
Untuk menerapkan Gradient Color pada blog kalian sangatlah mudah, pastikan jangan sampai menumpuk antara Background utama dengan Background warna warni (Gradient), karena nanti Gradien Color tidak akan muncul, karena itu jika ingin memasang dibagian header pastikan kalian hapus CSS Background pada header dulu. Baru kalian pasang Gradient Color.

Yah, langsung saja terjun ke langkah langkah membuat Gradient color pada header.

Cara Penerapan Gradien Color

Silahkan masuk ke Dashboard Blog
Setelah itu Klik Template / Tema > Klik Edit HTML
Kalian copy script di bawah

{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Nah dibagian ini cari kode #header-wrapper / #header (setiap template berbeda beda), lalu hapus kode Background nya seperti dibawah ini

#header-wrapper {background: #000; Pastekan di sini (ganti script yang saya warnai merah dengan script yang telah kalian copy tadi) max-width: 1000px; margin: 0 auto; position: relative;}

Maka akan hasilnya jadi seperti ini (tanpa background)

#header-wrapper {{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100{background position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%} 100%{background-position:0 50%}}max-width: 1000px; margin: 0 auto; position: relative;}

Jika sudah buat pemanggilan kode terlebih dahulu, misal #header-wrapper{paste kode animasinya}, Kalian cari <style> atau <b:skin>. Copy script dibawah dan pastekan di bawahnya (<style> atau <b:skin>

#header-container, #back-to-top{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Note: tulisan yang saya warnai merah samakan dengan kode header, misal #header-wrapper atau #header

Lalu kalian Save/Simpan Template.
Coba kamu lihat Tampilan nya pasti akan berubah warna
Selesai

Keterangan : Pada kode diatas hapus bagian Background yang sudah saya terangkan

Pemanggilan kode

Pada pemanggilan kode adalah pada bagian HTML misal kan jika saya ingin memanggil kode <div class="panggil"/> maka yang harus dipanggil ada kode .panggil , kenapa pakai titik? jika kalian tahu perbedaan antara Class dan Id maka akan tahu.

Class dipanggil menggunakan tanda "Titik"
Id dipanggil menggunakan tanda "Pagar"

Lantas untuk memanggil kode yang terahir, yaitu seperti ini.

<div class="header-wrapper"/>
lalu buat cssnya
<style>
.header-wrapper{kode gradien}
</style>

Mudah banget bukan? yah, untuk mengganti warna dengan warna yang kalian inginkan (meracik warna sendiri) silahkan ganti pada bagian kode warna seperti #00000 dan ganti dengan warna yang kamu inginkan (misal #E73C7E)

Nah itulah cara untuk membuat gradien color di blog. Sampai bertemu di tutorial selanjutnya ya. Bye

Source: Kangian.com

Terimakasih untuk kangian.com karena saya sudah diperblehkan merewrite artikelnya.

17 April 2018

Bahasa Pemrograman Blog

Cara Membuat Animasi Loading Blogger Keren

April 17, 2018 Comment

Membuat Animasi Loading Blogger bisa dengan menggunakan Gambar Gif maupun Animasi CSS seperti yang saya gunakan ini, mungkin kalian sudah melihat Animasi Loading yang hanya tampil pada saat masuk ke Home (beranda) saja dan bertulisan "Selamat datang" dengan animasi berputar.

Kalian juga bisa loh pakai animasi loading yang sama dengan blog ini dan caranya juga cukup mudah, tidak susah untuk menerapkan scriptnya, jadi langsung saja buat blog kalian menjadi lebih keren dengan tambahan Animasi Loading ini.

Cara Membuat Animasi Loading Blogger

Sebelumnya saya beritahu dulu, sebelum kalian paste di tema (edit html), kalian paste dulu ke notepad. Karena pada blog ini sudah saya kasih sumber saat di copas, setelah di paste di notepad kalian copy lagi scriptnya, jangan sama sumbernya.

Buka Blogger > Klik Template / Tema > Tambahkan kode dibawah ini sebelum kode </head> or </header>

Setelah itu tambahkan kode dibawah ini, letakkan script tepat dibawah <body>

<div id='4hmad-tantowi'>
<div class='loader-container' id='page-loader'>
<div class='loading-wrapper'>
<div class='loader-animation' id='loader-animation'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
<div class='loader-name' id='loader-name'>
<strong>Selamat datang</strong>
</div>
<strong><p class='loader-job' id='loader-job'>Di 4hmad tutorial, mohon tunggu sebentar</p></strong>
</div></div></div>

Note*tulisan yang saya warnai merah bisa kalian ganti

Tambahkan script dibawah ini, taruh diatas kode </body>

Setelah itu simpan
Selesai

Agar tampilan Loading Blogger hanya tampil di Home tambahkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> pada bagian htmlnya maka hasilnya akan seperti ini

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='4hmad-tantowi'>
<div class='loader-container' id='page-loader'>
<div class='loading-wrapper'>
<div class='loader-animation' id='loader-animation'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
<div class='loader-name' id='loader-name'>
<strong>Selamat datang</strong>
</div>
<strong><p class='loader-job' id='loader-job'>di 4hmad tutorial, mohon tunggu sebentar</p></strong>
</div></div></div>
</b:if>

Tampilan loading hanya akan tampil dibagian Home saja jika menggunakan tag yang ada diatas.

Untuk lebih jelasnya kalian bisa lihat gambar berikut, agar lebih jelas karena jika masih belum paham pasti sulit, dan kode diatas sudah saya coba dibeberapa blog saya dan berhasil bekerja tanpa adanya kendala sama sekali. Jika gambar kurang jelas bisa klik kanan > View Image (Untuk melihat gambar agar jelas)

Cara Membuat Animasi Loading Blogger Keren

Yah, itu saja postingan kali ini. Jangan lupa untuk update dan kunjungi tutorial yang lain. Silahkan komen di bawah.

Source : kangiancom

19 Maret 2018

Blog

Cara buat efek zoom (membesarkan gambar otomatis) pada postingan blog

Maret 19, 2018 2 Comments

Membuat (efek zoom otomatis) untuk membesarkan gambar postingan Blog. Hai gan yang lagi mencari artikel tentang membesarkan / zoom gambar di blog otomatis sepertinya ada di sini

Sebelum kita ke tutorialnya, kalian harus tahu kenapa dan untuk apa kita membuat tampilan website blog khususnya gambar/image diperbesar (otomatis), menurut pendapat dari saya agar tampilan blog khususnya ukuran gambar kadang kecil pada postingan artikel itu, namun dengan menambahkan javacript yang disimpan pada template, setelah diuji ternyata gambar dapat diperbesar dengan cara menyorot atau saat disentuh cussor/mouse akan otomatis membuat tampilan gambar menjadi besar.

Dengan efek zoom maka pengunjung bila ingin melihat jelas gambar tak perlu klik beberapa kali, cukup dengan menyorotkan cursor, otomatis gambar bisa lebih besar dari gambar asalnya, alasannya

Mengapa harus menggunakan efek zoom ini?

Blog yang mengutamakan kecepatan halaman bila dibuka pengunjung tentunya gambarnya memiliki ukuran kecil, jadi memudahkan pengunjung dengan cara ini bisa disiasati gambar kecil akan berubah seketika saat disorot mouse.

Efek zoom ini sering kita lihat pada website yang memiliki gambar lebih dari satu biasanya, ya alasanya seperti pada paragraf kedua untuk mempercepat loading blog dan ruang gambar tidak sesak pada sebuah halaman blog.

Nah untuk lebih jelasnya cara membuat membesarkan gambar postingan dengan efek kaca pembesar sebagai berikut :

Cara Buat Efek Zoom Otomatis saat di sentuh cursor

Untuk membuktikannya dari javascript ini kita lanjut saja ke tahap penempatannya, seperti steps di bawah:

Langkah pertama kalian login dulu di blogger.com
Setelah terbuka menu dashboard, selanjutnya pilih sub-menu Template / tema

tema/template
Selanjutnya klik Edit HTML

edit html
Silahkan cari kode di bawah, agar mudah tekan control dan f "ctrl + f" lalu copy paste kode dibawah

]]></b:skin>

ctrl + f, lalu copas kode di atas dan enter

Setelah itu copy kode CSS seperti di bawah kemudian kalian pastekan di atas kode ]]></b:skin>

paste di atas kode diatas

.post img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 2px 2px 0;
}
.post img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

Kemudian klik simpan, silahkan cek pada salah satu gambar postingan kalian, apabila gambar menjadi besar otomatis dengan menempelkan tanda panah cursor itu tandanya kalian berhasil dan kode diats berfungsi dengan baik.

Itulah cara agar (zoom otomatis) memperbesar gambar dalam blog untuk blogger, semoga bermanfaat.

Bagikan dengan teman atau keluarga kalian, agar bermanfaat. Tetap pantau 4hmad tutorial ya. Sampai jumpa kembali

09 Maret 2018

Blog

Cara Mengatasi Postingan Yang Hanya Tampil Beberapa di Beranda

Maret 09, 2018 Comment

Cara Mengatasi Postingan Yang Hanya Tampil Beberapa di Beranda

Saya pernah mengalami masalah postingan hanya tampil beberapa pada blog ini. Saya bingung padahal di pengaturan sudah saya setting menjadi 10 dan saya ulang ulangi menyetting, sampai sampai saya mengganti template.

Baca juga Cara buat kotak script pada postingan

Setelah saya googling kesana kesini, akhirnya saya menemukan permasalahan dan solusi tentunya. Jadi kalian yang menyebabkan seperti ini jangan khawatir.

Apa permasalahannya min?

Yaitu karena postingannya ditulis melalui Microsoft Word.

Kenapa bisa begitu min?

Karena Microsoft Word merupakan program word processor bukan text editor. Jadi ketika sobat menulis di Microsoft Word setelah itu tulisannya disalin / di copy, maka yang tersalin bukan hanya text, tapi kode kode di belakang text dari microsoft word juga ikut tersalin.

Nah ketika dipaste ke blogger kode kode tersebut (microsoft word) akan mengalami konflik dengan kode kode yang ada di blogger. Itulah yang menyebabkan masalah ini

Solusinya gimana min?

Ok, ikuti langkah langkah di bawah

Logi ke dashboard blogger kalian

login ke dashboard blogger
Masuk ke menu postingan
Pilih artikel yang kira kira kalian di ketik menggunakan microsoft word, lalu edit

edit artikel yang kira kira kalian ketik di ms word
Beri "Jump Break" pada akhir paragraf pertama

beri jump break pada akhir paragraf pertama
Setelah itu, perbarui

perbarui
Selesai

Jika cara di atas tidak bisa. beri jump breake pada artikel yang ada di homepage. Misal di halaman homepage ada artikel "tentang blogger", nah beri jump break pada artikel tersebut.

Saran

Usahakan untuk menulis langsung di blogger. Atau jika kalian ingin menulis artikel secara offline, gunakan text editor seperti notepad atau notepad++.

25 Februari 2018

Blog

Cara membuat sumber link otomatis saat di copas

Februari 25, 2018 3 Comments

Cara membuat sumber link otomatis saat artikel kita di copas ( copy - paste) - Membuat seseorang meng copy paste artikel merupakan suatu bentuk keberhasilan seorang blogger dalam mengoptimalkan artikel yang di buat, namun apa salahnya jika ketika artikel yang di copas dapat memberikan sebuah backlink aktif dengan menambahkan trik berupa barisan code script yang dapat bertujuan mencantumkan sumber link artikel tersebut.

Selain itu akibat yang didapat dari Copy paste akan berdampak buruk pada kualitas perkembangan blog yang telah anda kembangkan, atau membuat kualitas anda bisa menjadi turun drastis, pengunjung yang biasa selalu ramai namun setelah artikel di copy paste menjadi berkurang pada tingkatan dari standard pengunjung blog anda.

↑↑Sumber↑↑

www.masukangin.net

Pada tutorial kali ini saya memposting cara membuat sumber link otomatis, saat artikel kita di copas dengan script. untuk memasangnya pun tidak terlalu susah. Ok langsung saja ya.

Masuk ke dashboard blogger kalian ( login blogger )
Masuk ke menu "tema"
Pilih "edit html"
Salin (copy) script di bawah

<script type='text/javascript'>
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();

var pagelink = "<br/><br/>Sumber :<a href='"+document.location.href+"'>"+document.location.href+"</a><br/>"; // change this if you want
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}document.oncopy = addLink;
</script>