Category: CSS HTML

  • Cara Membuat Widget Pricing Plans Untuk Harga Jasa atau Produk

    www.laborblog.my.id - Halo sobat laborblog.my.id, kembali lagi laborblog.my.id akan membagikan tutorial untuk sobat yang menginginkan widget sederhana dan dapat menjelaskan suatu produk atau jasa yang dijual secara lengkap dan ringkas.

    Contoh | Tangkapan Layar
    – Halo sobat laborblog.my.id, kembali lagi laborblog.my.id akan membagikan tutorial untuk sobat yang menginginkan widget sederhana dan dapat menjelaskan suatu produk atau jasa yang dijual secara lengkap dan ringkas.


    Widget tersebut adalah Pricing Plans atau Pricing Area yang biasa kita temukan pada Template Landing Page, berfungsi untuk menampilkan nama produk atau jenis jasa yang lengkap dengan harga, deskripsi dan juga tombol order sekarang. Dengan menggunakan widget ini calon pembeli jasa dan produk akan lebih mudah dalam melihat harga dan juga melakukan kontak.
    Untuk pemasangan, widget ini cocok untuk dipasang pada halaman depan blog dan juga halaman artikel, tampilan yang modern dan sederhana membuat widget ini mudah untuk dimodifikasi sesuai selera.
    Info: Tips ini dapat dilakukan pada semua platform.
    Cara Memasang Widget Pricing Plans di Blog
    Silahkan sobat masuk ke Blogger > Template > Edit HTML
    Letakan kode di bawah ini tepat di atas kode ]]></b:skin>

    /* Pricing Section by Dunia Blanter */
    .pricing-section{font-family:’Google Sans’,Arial,sans-serif;position:relative;overflow:hidden;display:block;margin:15px 0;line-height:1.7}
    .pricing-section .pricing-title{font-size:1.1rem;margin:1rem 0 0;font-weight:700}
    .pricing-container{display:flex;max-width:1000px;margin:0 auto}
    .pricing-tag{margin:.5rem 0 1rem;font-size:13px;display:inline-block;background:#333;color:#fff;padding:3px 15px;border-radius:20px}
    a.blanter-order-btn{font-size:14px;text-transform:uppercase;text-decoration:none;background:#333;color:#fff;display:inline-block;padding:7px 20px;border-radius:20px;transition:all .3s ease-in-out}
    a.blanter-order-btn:hover{transform:scale(1.1)}
    .pricing-blanter-column{background:#fff;padding:30px 15px;box-sizing:border-box;border-radius:10px;text-align:center;width:33%;margin:10px;box-shadow:0 7px 7px rgba(0,0,0,0.06);border:2px solid #fff;transition:all .3s ease-in-out}
    .pricing-blanter-column ul{list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}
    .pricing-blanter-column img{width:50px}
    .pricing-section i{font-size:3rem}
    .blanter-price{font-weight:700;font-size:22px}
    .service-info{opacity:.7}
    .blanter-2-column .pricing-blanter-column{width:50%}
    .pricing-blanter-column:nth-child(1) .blanter-price,.pricing-blanter-column:nth-child(1) i{color:#f87200} /* Change Color Code */
    .pricing-blanter-column:nth-child(2) .blanter-price,.pricing-blanter-column:nth-child(2) i{color:#ff5483} /* Change Color Code */
    .pricing-blanter-column:nth-child(3) .blanter-price,.pricing-blanter-column:nth-child(3) i{color:#2b73f6} /* Change Color Code */
    .pricing-blanter-column:nth-child(1):hover{border-color:#f87200} /* Change Color Code */
    .pricing-blanter-column:nth-child(2):hover{border-color:#ff5483} /* Change Color Code */
    .pricing-blanter-column:nth-child(3):hover{border-color:#2b73f6} /* Change Color Code */
    .pricing-blanter-column:nth-child(1) .pricing-tag,.pricing-blanter-column:nth-child(1) a.blanter-order-btn{background:#f87200} /* Change Color Code */
    .pricing-blanter-column:nth-child(2) .pricing-tag,.pricing-blanter-column:nth-child(2) a.blanter-order-btn{background:#ff5483} /* Change Color Code */
    .pricing-blanter-column:nth-child(3) .pricing-tag,.pricing-blanter-column:nth-child(3) a.blanter-order-btn{background:#2b73f6} /* Change Color Code */
    @media screen and (max-width:580px){
    .pricing-blanter-column,.blanter-2-column .pricing-blanter-column{width:auto}
    .pricing-container{display:block}
    }

    Simpan, atau klik Icon Save.
    Selanjutnya untuk memasang widget, kode di bawah ini cukup diletakan di tempat yang sobat inginkan, seperti di tata letak blogger, di edit HTML ataupun dapat diletakan pada postingan tertentu (mode HTML seperti pada gambar).

    Post Mode HTML

    <div class=”pricing-section”>
    <div class=”pricing-container”>
    <div class=”pricing-blanter-column”>
    <img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1w8TQ4add1cnsvGdh7VTc8wjYR1y7viZJdSIw47dbn5trkQ6EwbbUXCC7rRuI_cfHfdU1O5sHhIZyMDlOYoJnixEhcSGjSBgOFXud5ngEAE7uJkL2AToluUK6g-K6LL9q-4wOC1eYuJ0/s50/basic.png’ alt=’Basic’/>
    <div class=”pricing-title”>Basic</div>
    <div class=”pricing-tag”>20% off</div>
    <div class=”blanter-price”>Rp 150.000</div>
    <div class=”service-info”>
    <ul>
    <li>Documentation</li>
    <li>Premium Template</li>
    <li>1 License</li>
    <li>Full Optimization</li>
    <li>1 Month Full Support</li>
    <li>Easy Customize</li>
    <li>-</li>
    </ul>
    </div>
    <a class=”blanter-order-btn” href=”#” title=”#” target=”_blank”>Order Sekarang</a>
    </div>
    <div class=”pricing-blanter-column”>
    <img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAiTGV5wvc6TSeIj8ReinPdvCRHMBV_SG85YZypFaLntGncfw9lDRKEu43kUu2wZzTGd2D1gnVpUcLlf8ItCtoAiHHFYig0iAXMKSl0n8fOcCjjrWCsSJioF-wx-HWdz4hyut6Uyu2OGA/s50/personal.png’ alt=’Personal’/>
    <div class=”pricing-title”>Personal</div>
    <div class=”pricing-tag”>Best Value</div>
    <div class=”blanter-price”>Rp 220.000</div>
    <div class=”service-info”>
    <ul>
    <li>Documentation</li>
    <li>Premium Template</li>
    <li>3 License</li>
    <li>Full Optimization</li>
    <li>3 Month Full Support</li>
    <li>Easy Customize</li>
    <li>-</li>
    </ul>
    </div>
    <a class=”blanter-order-btn” href=”#” title=”#” target=”_blank”>Order Sekarang</a>
    </div>
    <div class=”pricing-blanter-column”>
    <img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvob-uJynUDM7MNhAsVv1xj6Mnx8SanK6HH9vb9LIOY5Jf-h2rc72arnWTSFh6nakxOUfZ3NswdzVEs36E9ykd0nfytU2efW9IthB_ENRo4jnu5FRCwEATx8O24c2xlIoy0yslWqMqiA8/s50/developer.png’ alt=’Developer’/>

    <div class=”pricing-title”>Developer</div>

    <div class=”pricing-tag”>For Business</div>
    <div class=”blanter-price”>Rp 999.000</div>
    <div class=”service-info”>
    <ul>
    <li>Documentation</li>
    <li>Premium Template</li>
    <li>Unlimited License</li>
    <li>Full Optimization</li>
    <li>6 Month Full Support</li>
    <li>Easy Customize</li>
    <li>1 Bonus Template</li>
    </ul>
    </div>
    <a class=”blanter-order-btn” href=”#” title=”#” target=”_blank”>Order Sekarang</a>
    </div>
    </div>
    </div>

    Simpan.
    Gambar pada widget ini dapat diganti menjadi Font Awesome dengan merubah kode berikut:

    <img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1w8TQ4add1cnsvGdh7VTc8wjYR1y7viZJdSIw47dbn5trkQ6EwbbUXCC7rRuI_cfHfdU1O5sHhIZyMDlOYoJnixEhcSGjSBgOFXud5ngEAE7uJkL2AToluUK6g-K6LL9q-4wOC1eYuJ0/s50/basic.png’ alt=’Basic’/>

    menjadi kode Font Awesome:

    <i class=’fas fa-home’></i>


    Sekian tips yang bisa laborblog.my.id bagikan kali ini, semoga bermanfaat bagi sobat semua. Jangan lupa untuk Bookmark, Subscribe dan Komentar tentang tutorial ini.[source]
  • Demo Widget Pricing Plans

    Basic

    Basic
    20% off
    Rp 150.000
    • Documentation
    • Premium Template
    • 1 License
    • Full Optimization
    • 1 Month Full Support
    • Easy Customize

    Order Sekarang

    Personal

    Personal
    Best Value
    Rp 220.000
    • Documentation
    • Premium Template
    • 3 License
    • Full Optimization
    • 3 Month Full Support
    • Easy Customize

    Order Sekarang


  • Cara Mencegah Copy Paste Artikel Kecuali Kode dan Blockquote

    www.laborblog.my.id - Mencegah tindakan copy paste artikel dapat dilakukan dengan mudah dengan plugin atau script tertentu, lalu bagaimana cara mencegah copy paste kecuali tanda kutip atau kode  pada artikel tersebut?

    Ilustrasi
    Mencegah tindakan copy paste artikel dapat dilakukan dengan mudah dengan plugin atau script tertentu, lalu bagaimana cara mencegah copy paste kecuali tanda kutip atau kode pada artikel tersebut?
    Tindakan mengcopy paste konten blog orang lain mungkin bukan hal yang aneh lagi Saat ini banyak blogger yang menginginkan kesuksesan instan tanpa kerja keras.


    Untuk menghasilkan uang dengan blogging, kita membutuhkan lalu lintas. Traffic dapat dicapai dengan menyajikan konten viral atau berkualitas. Sayangnya, tidak semua blogger yang mengharapkan hasil langsung ingin bersusah payah membuat konten mereka sendiri.
    “Kalau ada yang mudah kenapa khawatir, toh semua yang ada di internet itu gratis, sudah jadi resikonya”. saya kira, ini adalah kalimat pembelaan dari banyak blogger yang melakukan kecurangan.
    Bagaimana mencegah copy dan paste posting blog?
    Ada cara mudah untuk mencegah orang lain menyalin postingan yang kita buat. laborblog.my.id sendiri sudah membuat cara untuk mencegah blogger mengcopy paste konten dengan menambahkan script tertentu. Cukup dengan menambahkan kode berikut di gadget HTML/JAVASCRIPT, pengunjung tidak akan bisa menggunakan shortcut CTRL+A untuk memilih konten artikel.

    <script src=’demo-to-prevent-copy-paste-on-blogger_files/googleapis.js’></script> <script type=’text/javascript’> if (typeof document.onselectstart!=”undefined” ) { document.onselectstart=new Function (“return false” ); } else { document.onmousedown=new Function (“return false” ); document.onmouseup=new Function (“return true” ); } </script>

    Selain itu, anda juga dapat menambahkan kode berikut untuk mencegah pencuri mengambil gambar dalam artikel dan menonaktifkan klik kanan menggunakan mouse.

    <script language=JavaScript>
    var message=”©laborblog.my.id 2021″; //Ganti dengan pesan kamu sendiri
    function clickIE4() {
    if (event.button==2) {
    alert (message);
    return false;
    }
    }
    function clickNS4(e) {
    if (document.layers||document.getElementById&&!document.all) {
    if (e.which==2||e.which==3) {
    alert(message);
    return false;
    }
    }
    }
    if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown=clickNS4;
    } else if (document.all&&!document.getElementById) {
    document.onmousedown=clickIE4;
    }
    document.oncontextmenu=new Function(“alert(message);return false”)
    </script>

    Walaupun judulnya khusus untuk pengguna Blogger, cara ini juga bisa digunakan oleh pengguna WordPress – cukup tambahkan widget CUSTOM HTML di sidebar atau footer Anda, lalu salin kode di atas dan simpan.
    Bagi Anda yang lebih suka menggunakan plugin, Anda juga dapat mencegah copy paste artikel dengan plugin khusus seperti WP Content Copy Protection with Color Design, WP Content Copy Protection atau WP Content Copy Protection, dan No Right Click. secara otomatis sudah bisa melindungi konten blog Anda.
    Cara Mencegah Copy Paste Artikel Kecuali Kode dan Blockquote
    Satu masalah yang saya temui di kedua metode di atas adalah tidak ada kontrol atas apa yang diblokir – menggunakan skrip atau plugin akan membuat semua item blog tidak dapat disalin, sedangkan jika saya membagikan artikel dengan quote/blockquote atau kode? akan sangat merepotkan pembaca, jika ingin menyalin kode pada artikel tentang tutorial.
    Di beberapa plugin terdapat fungsi untuk memfilter bagian artikel mana yang bisa dicopy oleh pembaca, namun sayangnya fungsi ini hanya tersedia pada versi premium, untungnya ada cara yang murah!
    Untuk mencegah agar postingan tidak tercopy paste kecuali kode dan tanda kutip (blockquote), kita bisa menambahkan kode CSS berikut di template Blogger

    .post-outer {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -ms-user-select:none;
    -moz-user-select:none;
    }
    .post blockquote,.post pre,.post code{
    -webkit-touch-callout:text;
    -webkit-user-select:text;
    -khtml-user-select:text;
    -ms-user-select:text;
    -moz-user-select:text;
    }

    Sedangkan untuk pengguna WordPress kamu bisa menggunakan kode berikut:



    .entry-content {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -ms-user-select:none;
    -moz-user-select:none;
    }
    .entry-content blockquote, .entry-content pre, .entry-content code {
    -webkit-touch-callout:text;
    -webkit-user-select:text;
    -khtml-user-select:text;
    -ms-user-select:text;
    -moz-user-select:text;
    }

    CATATAN: Setiap tema/template memiliki class CSS yang berbeda. Dalam kode di atas menggunakan contoh yang paling umum. Jadi, jika kode ini tidak berfungsi, gunakan fungsi INSPECT browser Anda untuk menentukan class yang benar.