TRIK SIMPLE

    Social Items

Pengalaman Diterima Adsense Dalam Hitungan Jam di Awal Tahun 2019

Pengalaman Diterima Adsense Dalam Hitungan Jam di Awal Tahun 2019 - Pasti sobat blogger yang membaca postingan ini sudah pada tau apa itu Google Adsense, bagi yang belum tau saya jelaskan sob tenang saja hehe. Google Adsense adalah jasa periklanan milik perusahaan besar google yang sampai sekarang ini masih menjadi primadona dalam kerjasama di bidang periklanan terutama di blog.

Padapostingan kali ini saya akan share pengalaman saya diterima Google Adsense di awal tahun 2019 ini dalam hitungan jam saja, blogger seperti saya dan juga yang membaca postingan ini pasti ingin sekali memiliki akun Google Adsense sendiri dan juga dari usaha sendiri atau tidak membeli, oke sobat mampir pada tempat yang tepat, insya allah pengalaman yang saya bagikan ini dapat dimengerti oleh sobat - sobat dan semoga sobat diterima menjadi publisher Google Adsense ya sob.

Akun Google Adsense memiliki 2 macam sob hosted dan non hosted, 2 macam tersebut memiliki perbedaan diantaranya adalah ketentuan mendaftarnya kala hosted itu dapat didaftarkan dengan domain bawaan blogger yaitu blogspot.com sedangkan non hosted dapat didaftarkan dengan domain TLD seperti .com .net dan masih banyak lagi.

Baca Juga : Perbedaan Akun AdSense Hosted dan Non Hosted

Pengalaman Diterima Adsense Dalam Hitungan Jam di Awal Tahun 2019


Pada awal 2019 tepatnya pada tanggal 8 saya memiliki teman yang ingin sekali memiliki akun Google Adsense karena tergiur oleh akun Gogle Adsense saya hehe. Pada bulan Desember 2018 lalu berarti bisa dibilang 1 bulan umur blogny, pada Desember tersebut aku suruh temanku untuk membeli domain .com di rumahweb sekitar 150k an dan juga nama yang saya sarankan juga dipakai hehe yang bernama solusisederhana.com, pada awal sebelum membeli domain saya sudah bilang keteman saya "150k nek rak diurus eman-eman bos" dan dia makin mantep untuk membeli domain.

Setelah setting - setting domain pun sudah terpasang, saya pun kasih saran yang pertama kepada teman saya yaitu "fokus ke artikel dulu cuk minimal 20 ojo mikirke adsense sek, adsense keri" dan dia menjawab "oke bos". Hari pun terus berjalan temenku itu melakukan apa yang saya sarankan tersebut yaitu melakukan update 2 artikel dalam 1 hari nah pas tanggal 8 Januari 2019 tepat menginjak 20 artikel pada blognya dia menyerahkan kepada saya blognya untuk didaftarkan adsense dan alhasil diterima pada jam 17.17 8 Januari 2019 Alhamdulillah Adsense fast respon hehe.

Oke bentar sob saya mau mengingatkan ini hanyaalah pengalamaan yang saya alami sewaktu - waktu berbeda sama pengalaman orang lain mohon dimengerti hehe.

pada pengalaman ini saya menjabarkan poin - poin terpenting menurut pengalaman saya ya sob, yaitu terdapat 4 poin terpenting Kualitas Konten, Template, Submit Artikel ke Webmaster, Navigasi nah itulah yang menurut saya poin - poin terpenting untuk mudah diterima oleh Google Adsense, oke dibawah ini saya akan jelaskan satu per satu untuk sobat lebih mudah memahami dan juga meresapi hehe..

1. Kualiitas Konten

Konten yang berkualitas yang saya maksud ini konten yang dibuat ori oleh sobat bukan hasil copas dari blog lain, untuk kata saya sarankan minimal 500 kata per artikel, buatlah artikel yang bermanfaat, banyak dicari di Search Engine Google bisa juga melakukan riset keyword terlebih dahulu sob.

2. Template

Template yang sobat pakai juga mempengaruhi SEO untuk blog sobat, jangan mengguakan template yang gratisan hasil download di goole belilah template premium yang harganya bersahabat contoh template yang sering saya pakai dalam peninjauan Google Adsense : ViralGo, Nubie Fast, Viomagz, Mocca.

3. Submit Artikel di Webmaster

Setelah sobat publish artikel segeralah submit artikel pada webmaster, dengan mensubmit artikel di Webmaster Google Adsense pun tau bahwa blog tersebut masih aktif dan dirawat dengan baik.

Baca Juga: Tips Ampuh Agar Artikel Cepat Terindex Google dan Bing

4. Navigasi

Faktor terpenting dalam peninjauan google adsense, jika blog sobat tidak menerapkan menu navigasi bisa dapat ditebak akan ditolk mentah - mentah oleh google adsense hehehe, terdapat 4 menu navigasi yang menurut saya terpenting yaitu About, Contact, Sitemap, Disclaimer. Jika sobat belum menerapkan 4 menu tersebut sobat bisa cari di blog saya di postingan sebelumnya.

Nah itu poin - poin terpenting yang saya terapkan pada blog teman saya semoga dapat mudah dipahami, misalkan masih kurang jelas bisa bertanya dikolom komentar sob

Oke sekian yang bisa saya jelaskan tentang Pengalaman Diterima Adsense Dalam Hitungan Jam di Awal Tahun 2019 Terima asi yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Pengalaman Diterima Adsense Dalam Hitungan Jam di Awal Tahun 2019

Cara Mengecek dan Mengatasi Broken Link pada Blog

Cara Mengecek dan Mengatasi Broken Link pada Blog - Apa itu broken link? broken link adalah link yang terdapat di blog yang tidak dapat diakses (Error 404) yang dapat menggoyahkan blog sobat di search engine Google, sobat bisa cek broken link yang di blog sobat dan juga bisa melihat dimanakah letak broken link tersebut.

Kenapa harus menghapus broken link? Search Engine Google tidak suka dengan broken link pada blog atau situs web yang biasanya terletak pada postingan maupun komentar blog, jadi sobat harus sering - sering cek broken link pada blog sobat.

Baca Juga : Cara Membuat Credit Link Template Otomatis Redirect Ketika diganti dan dihapus

Pada kesempatan kali ini saya akan share bagai mana sih cara cek broken link yang ada di blog dan cara mengatasinya

Pertama sobat mengunjungi situs Broken Link Checker isi urlnya lalu klik Find broken links

Cara Mengecek dan Mengatasi Broken Link pada Blog

Isi kode Securitynya pilih yang report all lalu klik Find broken links now!

Cara Mengecek dan Mengatasi Broken Link pada Blog

Tunggu prosesnya sampai selesai nanti akan tampil seperti dibawah ini

Cara Mengecek dan Mengatasi Broken Link pada Blog

Nah jika sudah tau apa saja yang bermasalah pada linknya di log sobat sekarang cara mengatasinya gimana yaitu gampang sekali sobat tinggal klik src disana sobat dikasih gambaran letak broken linknya di blog sobat contonya seperti di bawah ini

Cara Mengecek dan Mengatasi Broken Link pada Blog

Nah mudah bukan cara mengatasi broken link pada blog? jaga lah blogmu sobat dengan mengecek rutin agar disukai oleh search engine google saya ingatkan lagi bahwa search engine google tidak suka dengan adanya broken link pada blog sobat.

Oke sekian yang bisa saya jelaskan tentang Cara Mengecek dan Mengatasi Broken Link pada Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Mengecek dan Mengatasi Broken Link pada Blog

Cara Membuat Credit Link Template Otomatis Redirect Ketika diganti dan dihapus

Cara Membuat Credit Link Template Otomatis Redirect Ketika diganti dan dihapus - Credit Link yaitu kode backlink yang diterapkan oleh si pembuat template yang biasanya dikasih ke penggna secara gratis namun sekarang banyak oknum yang menghapus credit link untuk menunjang ketenaran saja seolah -olah templatenya milik dia hehehe... adakah disini ada yang kaya gitu?? hehehe..

Credit link merupakan backlink yang ampuh yang diterapkan oleh pengguna template karena saat pengguna menghapus templte tersebut akan redirect otomatis ke blog si pembuat template tersebut, hargailah si pembuat template dengan tidak menghapus creditlink sob ingat! hehe..

Nah pada tutorial kali ini aya akan share kode script credit link yang akan otomatis redirect ke situs yang ditentukan ketika kode tersebut dihapus maupun diganti, jika sobat minat langsung saja kecaranya...

Cara Membuat Credit Link Template Otomatis Redirect Ketika diganti dan dihapus


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () { if ($("#change,.change").attr("href") != "http://www.triksimple.com/") {
        window.location.href = "http://www.triksimple.com/"; }});
//]]>
</script>

Saya misalkan kode footer template

<footer id='footer-wrapper'>
<div class='credit-link'> Template By <a class='change' href='http://www.triksimple.com/' id='change' title='TRIK SIMPLE'>TRIK SIMPLE</a>
</div>
</footer>

Jika sudah klik simpan pada template sobat.

Oke sekian yang bisa saya sampaikan tentang Cara Membuat Credit Link Template Otomatis Redirect Ketika diganti dan dihapus Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Membuat Credit Link Template Otomatis Redirect Ketika diganti dan dihapus

Cara Menghilangkan Komentar Aktif pada Blog

Cara Menghilangkan Komentar Aktif pada Blog - Link aktif pada komentar pada blog dapat memberi dampak buruk bagi pemilik blog, juga terdapat rasa risi jikalau blog yang sobat bangun terisi backlink link yang aktif dari pengunjung sobat, sebagai pemilik blog yang aktif sobat harus senan tiasa mengecek link pada komentar itu masih aktif atau sudah rusak atau broken, link yang broken tentunya sangat menurunkan performa dan juga dalam search engine google popularitasnya jelek sob.

Baca Juga : Cara Membuat Semua Link Terbuka di New Tab Secara Otomatis

Untuk menjaga ke SEO an blog sobat bisa saja si menghapus link aktif tersebut satu per satu, nah pada intinya tutorial kali ini saya akan membagikan kode JavaScript yang dapat mengubah link aktif pada komentar menjadi teks saja.

Oke jika sobat minat langsung saja ke caranya sob...

Cara Menghilangkan Komentar Aktif pada Blog


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode JavaScript dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

<script type='text/javascript'>
//<![CDATA[
$(function() {
$('#comments p').find('a').contents().unwrap();
});
//]]>
</script>

Jika sudah klik simpan pada template sobat...

Ingat jangan sampai ada link broken pada blog sobat, akan menurunkan popularitas dimata SE Google sob.

Oke sekian yang bisa saya sampaikan tentang Cara Menghilangkan Komentar Aktif pada Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Menghilangkan Komentar Aktif pada Blog

Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown

Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown  - Halo sobat TrikS oke kali ini saya akan share bagaimana cara mengganti fungsi widget label menjadi menu dropdown yang lebih keren dan simple tentunya, menu label dropdown ini cocok untuk sobat yang mempunyai blog download film dll.


Kenapa harus memasang label dropdown ini, ya tentunya simple tiak memakan size banyak tentunya terlihat rapi dan lebih responsive, oke sobat minat langsung saja ke caranya...

Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown 


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML cari kode dibawah ini

<ul>
  <b:loop values='data:labels' var='label'>
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <data:label.name/>
        <b:else/>
        <a expr:href='data:label.url'>
          <data:label.name/>
        </a>
      </b:if>
      (
      <data:label.count/>)
    </li>
  </b:loop>
</ul>

Ganti kode diatas dengan kode dibawah ini

<div class="dropmedown">
<select  class="dropdown-select" onchange='location=this.options[this.selectedIndex].value;'>
  <option> Search Category </option>
  <b:loop values='data:labels' var='label'>
    <option expr:value='data:label.url'>
      <data:label.name/> (
      <data:label.count/>)
    </option>
  </b:loop>
</select>
</div>

Jika sudah melakukan langkah diatas, kemudian memasang kode CSSnya copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau </style>

/* Dropdown Label */
.dropmedown select{outline:none;cursor:pointer}
.dropmedown{display:inline-block;position:relative;overflow:hidden;width:100%;background:#fff;border:1px solid transparent;border-radius:3px;height:36px;line-height:36px;color:#444}
.dropmedown:before,.dropmedown:after{content:'';position:absolute;z-index:2;top:13px;right:12px;width:0;height:0;line-height:36px;border:4px dashed;border-color:#888 transparent;pointer-events:none}
.dropmedown:before{border-bottom-style:solid;border-top:none}
.dropmedown:after{margin-top:8px;border-top-style:solid;border-bottom:none}
.dropdown-select{position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:36px;line-height:18px;font-size:12px;color:#62717a;text-shadow:0 1px #fff;background:#f2f2f2;background:rgba(0,0,0,0)!important;border:0;border-radius:0;-webkit-appearance:none}
.dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f8f8f8;outline:none;border:0;border-radius:3px;cursor:pointer}

Jika sudah klik simpan pada template sobat

Baca Juga : Cara Memasang Recent Comment Disqus di Blog dengan Mudah

Oke sekian yang bisa saya sampaikan tentang Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown Terima Kasih sudah berkunjung semoga bermanfaat bagi kalian semua

Cara Mengganti Fungsi Widget Label Menjadi Menu Dropdown

Cara Membuat Semua Link Terbuka di New Tab Secara Otomatis

Cara Membuat Semua Link Terbuka di New Tab Secara Otomatis - Link yang ada di blog sobat semua akan menuju ke tab baru hal ini juga dapat menurunkan presentase bounce rate pada blog sobat tentunya karena, pengunjung sobat tidak meninggalkan halaman sobat melainkan membuka tab baru secara otomais jikalau sobat memasang kode script dibawah ini.

Baca Juga : 20 Cara Paling Efektif Menurunkan Bounce Rate Pada Blog

Jika sobat minat langsung saja kecaranya...

Cara Membuat Semua Link Terbuka di New Tab Secara Otomatis


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

<script type='text/javascript'>
var arr = document.getElementsByTagName("a"); //dapatkan semua link untuk halaman(var i = 0; i < arr.length; i++)
{
if(arr[i].href.indexOf("http://www.triksimple.com/") < 0 //bukan link yang ada di dalam halaman ini
&& arr[i].href.indexOf("javascript:") < 0) // link
arr[i].target = "_blank";
}
</script>

Ada cara yang lain jika cara diatas tidak work dengan menambahkan kode dibawah ini tepat diatas kode </head> atau &lt;/head&gt;

<base target='_blank' />

Jika sudah klik simpan pada template sobat

Oke sekian yang bisa saya sampaikan tentang Cara Membuat Semua Link Terbuka di New Tab Secara Otomatis Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Membuat Semua Link Terbuka di New Tab Secara Otomatis

Cara Memasang Widget Kotak Iklan dengan Efek Refresh

Cara Memasang Widget Kotak Iklan dengan Efek Refresh - Halo sobat TrikS selamat pagi,siang,sore dan malem dimana kalian berada semoga diberi kesehatan dan rezeki yang melimpah #amin, oke sobat kali ini saya akan share kepada kalian widget iklan yang dapat berganti sendiri saat sobat refresh nah sebagai contohnya iklan google adsense iklan tersebut akan selalu berganti - ganti selagi sobat refresh bener nggak? nah seperti itu contohnya.


Cara Memasang Widget Kotak Iklan dengan Efek Refresh


Pertama sobat masuk terlebih dahulu ke Blogger > Tata Letak > Tambahkan Widget Baru > Pilih yang HTML/JavaScript dan masukkan kode dibawah ini.

<script type="text/javascript">
var trksmpl_id = 3;
var trksmpl_now = new Date()
var detik = trksmpl_now.getSeconds()
var trksmpl_place = detik % trksmpl_id;
trksmpl_place += 1;
if (trksmpl_place == 1) {
  url = "LINK TUJUAN";
  alt = "DESKRIPSI IKLAN";
  title = "JUDUL IKLAN";
  banner = "BANNER IKLAN";
  width = "300";
  height = "250";
}
if (trksmpl_place == 2) {
  url = "LINK TUJUAN";
  alt = "DESKRIPSI IKLAN";
  title = "JUDUL IKLAN";
  banner = "BANNER IKLAN";
  width = "300";
  height = "250";
}
if (trksmpl_place == 3) {
  url = "LINK TUJUAN";
  alt = "DESKRIPSI IKLAN";
  title = "JUDUL IKLAN";
  banner = "BANNER IKLAN";
  width = "300";
  height = "250";
}
document.write('<a href=\"' + url + '\" target=\"_blank\" rel=\"nofollow\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('title=\"' + title + '\" alt=\"' + alt + '\"></a>');
</script>

Jika sudah isi yang becetak tebal warna merah sesuai iklan dan keterangannya milik sobat, jika sobat ingin menambah juga bisa sobat, tinggal sobat ganti kode var trksmpl_id = 3; menjadi var trksmpl_id = 4 dan menambahkan kode dibawah ini

if (trksmpl_place == 4) {
  url = "LINK TUJUAN";
  alt = "DESKRIPSI IKLAN";
  title = "JUDUL IKLAN";
  banner = "BANNER IKLAN";
  width = "300";
  height = "250";
}

Jika sudah klik simpan sob.

Baca Juga : Cara Membuat Efek Salju Terbaru di Blog

Oke sekian yang bisa saya sampaikan tentang Cara Memasang Widget Kotak Iklan dengan Efek Refresh Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Memasang Widget Kotak Iklan dengan Efek Refresh


Cara Optimasi Gambar Secara Otomatis Agar Lebih SEO - Perlu diketahui sobat bahwa gambar yang berada pada artikel sobat itu juga dapat mempengaruhi SEO pada artikel yang sobat bikin, diantaranya memberikan alt dan src pada gambar yang diupload sobat secara manual tidak otomatis. Kenapa sih haru soptimasi gambar? gambar juga muncul dalam search engine google sob jadi dengan menambahkan alt dan title pada gambar search google dapat dengan mudah merayapi dan mendeteksi keyword - keyword yang tercantum dalam gambar tersebut.

Baca Juga : Cara Mempercepat Loading Blog Dengan Memasang Script LazyLoad Ads

Nah pada kesempatan kali ini saya akan share bagaiman cara optimasi gambar secara otomatis alias sobat tidak usah edit - edit gambar yang sobat upload dengan menambahkan kode JavaScript tentunya, jika sobat minat langsung saja ke caranya sob...

Cara Optimasi Gambar Secara Otomatis Agar Lebih SEO


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode JavaScript dibwah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Jika sudah klik simpan pada template sobat.

Baca Juga : Meta Tag Seo Friendly Blogger Terbaru Valid HTML5

Oke sekian yang bisa saya sampaikan tentang Cara Optimasi Gambar Secara Otomatis Agar Lebih SEO Terima Kasih yang sduah berkunjung semoga bermanfaat bagi kalian semua.

Cara Optimasi Gambar Secara Otomatis Agar Lebih SEO

Cara Memasang Spoiler Keren pada Postingan Blog

Cara Memasang Spoiler Keren pada Postingan Blog - Menambahkan spoiler pada blog sobat juga dapat menambahkan keistemaan pada blog sobat, spoiler ini tentunya sangat responsive dan mobile friendly enak dipandang.

Apa sih fungsinya dari spoiler ini? spoiler ini tombol yang digunakan untuk memunculkan misalkan daftar isi dan isi text yang biasanya menurut si penulis itu penting atau bisa yang lainnya seperti gambar maupun video.

Baca Juga : Cara Memasang PopUp Selamat Tahun baru di Blogger


---ISI KONTEN ANDA TERAPKAN DISINI---

Cara Memasang Spoiler Keren pada Postingan Blog


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode CSS dibawah ini dan patekan tepat diatas kode ]]><b:skin> atau </style>

.centerflip{text-align:center}
.flippy{text-align:center}
button.flippy{background:#aa65c7;color:#fff;text-align:center;margin:0 auto;border:none;border-radius:3px;padding:8px 16px;margin:10px auto;font-size:14px;font-weight:bold;box-shadow:0 3px 0 0 #883da7;vertical-align:middle;cursor:pointer;text-shadow:0 1px rgba(0,0,0,0.3);transition:background 0.1s ease-in-out}
.flippy button:hover,.flippy button:focus{background:#9e4fbf;outline:none}
.flippanel{padding:1px;text-align:left;background:#f5f5f5;border:0}
.flippanel{padding:24px;display:none}

Kemudian memasang kode JQuery copy kode dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

<script>
$(function(){
  $(".flippy").on("click", function(){
    $(this).parent().children(".flippanel").slideToggle("normal");
  });
});
</script>

Simpan tema sobat kemudian memasang pada postingan sobat., copy kode dibawah ini dan pastekan didalam postingan artikel sobat.

<div class="centerflip"><button class="flippy">SPOILER</button>
<div class="flippanel">
---ISI DARI SPOILER DISINI---
</div>
</div>

Jika sudah klik pulikasikan coba lihat hasilnya sobat.

Baca Juga : Cara Membuat Efek Salju Terbaru di Blog

Oke sekian yang bisa saya sampaikan tentang Cara Memasang Spoiler Keren pada Postingan Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Memasang Spoiler Keren pada Postingan Blog

Cara Memasang PopUp Selamat Tahun baru di Blogger

Cara Memasang PopUp Selamat Tahun baru di Blogger - PopUp yang bisanya sobat pasang seperti popup fp facebook atau biasanya juga berlangganan blog ttapi kali ini saya akan sharepopup menguncapkan selamat tahun baru ke  pada pengunjung sobat pastinya.

Popup ini hanya memakai kode CSS, HTML dan JavaScript tentunya tidak akan memberatkan loading pada blog sobat dan juga Popup ini responsive juga kalau dibuka dihape sobat dan juga terdapat tombol close dalam pop up tersebut, jika sobat minat langsung saja ke caranya ya sob.

Cara Memasang PopUp Selamat Tahun baru di Blogger


Pertama sobat masuk terlebih dahulu ke Blogger > Tema  > Edit HTML lalu copy kode CSS dibawah ini dan pastekan tepat diatas kode </head> atau &lt;/head&gt;

<style type="text/css">
/* Pop Up Tahun Baru 2019 triksimple.com */
@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
@keyframes change_color{0%{background:#5ac7da}33.33%{background:#3173bd}66.66%{background:#0d4a8d}100%{background:#5ac7da}}
@keyframes run_hari19{0%{transform:translate(0%,0)}50%{transform:translate(100%,0)}50.01%{transform:translate(-100%,0)}}
@keyframes sun_movement{0%{top:50px}60%{top:-30px}25%{top:-30px}40%{top:50px}}
@keyframes run_malam19{0%{transform:translate(-20%,0);opacity:0}49.99%{transform:translate(0%,0);opacity:1}99.99%{transform:translate(20%,0);opacity:0}100%{transform:translate(-20%,0);opacity:1}}
@keyframes moon_movement{0%{transform:translate(-200%,0);opacity:0}49.99%{transform:translate(0%,0);opacity:1}99.99%{transform:translate(200%,0);opacity:0}100%{transform:translate(-200%,0);opacity:1}}
/* Pop Up Tahun Baru 2019 */
#popuptahunbaru2019{display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:660px;box-shadow:0 19px 38px rgba(0,0,0,0.1),0 15px 12px rgba(0,0,0,0.12);z-index:999;min-height:350px;padding:20px;overflow:hidden;border-radius:10px;animation:change_color 5s infinite linear,slideDown 2s}
#popuptahunbaru2019 .baru19{position:absolute;color:#fff;font-size:2rem;font-weight:400;padding:30px;z-index:99999;text-align:center;margin:auto;left:0;right:0;top:20%}
#popuptahunbaru2019 .baru19 p{margin:20px auto;text-shadow:2px 2px 5px rgba(0,0,0,0.2)}
#popuptahunbaru2019 .baru19 .tahunbaru19{font-size:3rem;font-weight:700}
#popuptahunbaru2019 a.close-popup{position:absolute;bottom:15px;right:20px;color:#fff;text-align:center;border-radius:100%;cursor:pointer;z-index:99;transition:all .3s}
#popuptahunbaru2019 a.close-popup:hover{color:#fff}
#popuptahunbaru2019 a.close-popup:active{opacity:0}
#popuptahunbaru2019 a.close-popup i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}
#popuptahunbaru2019 a.close-popup:hover i{transform:rotate(360deg)}
.gunung19{width:400px;height:300px;display:block;background:#4aad52;position:absolute;bottom:-150px;transform:rotate(45deg);border-radius:50px}
.gunung19.behind{background:#42a54a;right:-120px;bottom:-180px;z-index:-1}
.hari19{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_hari19 5s infinite linear}
.hari19 .awan19{margin:30px auto;width:150px;height:70px;display:block;background:#e7e7e7;border-radius:35px;border:10px solid #ffffff;box-shadow:inset 0 -7px 0 0 #d7d7d7;position:absolute;top:90px;left:50px}
.hari19 .awan19:before{content:'';width:65px;height:35px;display:block;background:#e7e7e7;border-radius:35px 35px 0 0;border:10px solid #ffffff;border-bottom:0;position:absolute;top:-35px;left:20px}
.hari19 .awan19.invert{top:60px;left:250px}
.hari19 .awan19.invert:before{left:50px}
.hari19 .sun{width:75px;height:75px;display:block;background:#fff297;border-radius:50%;box-shadow:inset -5px -5px 0 0 #ddc991;position:absolute;top:50px;left:0;animation:sun_movement 5s infinite linear}
.malam19{width:100%;height:100%;display:block;position:absolute;top:0;left:0;animation:run_malam19 5s infinite linear}
.malam19 .bintang19 .star{width:5px;height:5px;display:block;background:#f7f7f7;border-radius:50%;position:absolute}
.malam19 .bintang19 .star:nth-child(1){top:50px;left:50px}
.malam19 .bintang19 .star:nth-child(2){top:200px;left:70px}
.malam19 .bintang19 .star:nth-child(3){top:100px;left:300px}
.malam19 .bintang19 .star:nth-child(4){top:50px;left:220px}
.malam19 .bintang19 .star:nth-child(5){top:160px;left:320px}
.malam19 .bintang19 .star:nth-child(6){top:150px;left:230px}
.malam19 .bintang19 .star:nth-child(7){top:180px;left:400px}
.malam19 .bintang19 .star:nth-child(8){top:50px;left:360px}
.malam19 .moon{width:75px;height:75px;display:block;background:#d7d7d7;border-radius:50%;box-shadow:inset -5px -5px 0 0 #c7c7c7;position:absolute;top:50px;left:100px;animation:moon_movement 5s infinite linear}
@media (max-width:800px){#popuptahunbaru2019{top:10px!important;left:10px;right:10px;min-height:250px}#popuptahunbaru2019 .baru19{font-size:1.1rem;top:0}#popuptahunbaru2019 .baru19 .tahunbaru19{font-size:2.5rem}.gunung19{display:none}.hari19,.bintang19,.malam19 .moon{display:inline}#popuptahunbaru2019 a.close-popup {z-index:999999}}
</style>

Jika sudah memasang kode CSS diatas saatnya memasang kode html, copy kode dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

<div id='popuptahunbaru2019'>
<a class='close-popup' href='#' title='close'><i class='fa fa-times'></i></a>
<div class='baru19'>
<p>Admin TRIK SIMPLE Mengucapkan</p>
<p><span class='tahunbaru19'>Selamat Tahun Baru 2019 </span></p>
</div>
<div class='gunung19'></div>
<div class='gunung19 behind'></div>
<div class='hari19'>
<div class='awan19'></div>
<div class='awan19 invert'></div>
<div class='sun'></div>
</div>
<div class='malam19'>
<div class='bintang19'>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
</div>
<div class='moon'></div>
</div>
</div>

Dan yang terakhir adalah menambahkan kode JavaScript, copy kode dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

<script type="text/javascript">
$(window).bind("load",function(){$("#popuptahunbaru2019").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
</script>

Jika sudah klik simpan pada template sobat.

Catatan! jika blog sobat belum terpasang script Fontawesome silahkan sobat pasang terlebih dahulu

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Catatan! jika tombol close tidak berfungsi tambahkan kode dibawah ini tepat diatas kode </head> atau &lt;/head&gt;

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>

Oke sekian yang bisa saya sampaikan tentang Cara Memasang PopUp Selamat Tahun baru di Blogger Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Memasang PopUp Selamat Tahun baru di Blogger

Subscribe to: Posts (Atom)

Jangan Lupa Subcribe