Home Search results for Cara Membuat Tombol Demo Dan Download Flat Ui Pada Postingan Blog

Cara Membuat Tombol Demo Dan Download Flat UI Pada Postingan Blog

  

Tombol Demo dan Download merupakan sebuah fitur pelengkap yg tak jarang digunakan pada sebuah blog/situs download, baik itu situs download lagu, film, game, ebook, maupun template. Kegunaan dari ke 2 tombol ini tak lain dan tak bukan yaitu buat mempermudah pengunjung untuk melakukan demo atau download.

Kedua tombol ini memiliki fungsi dan kegunaannya masing-masing. Tombol Demo mempunyai fungsi untuk melakukan preview atau pratinjau pada file yang akan didownload. Biasanya fitur ini tak jarang dipakai dalam situs download ebook atau template.

Tujuan digunakannya tombol Demo yaitu buat mempermudah para pengunjung dalam melihat file yang akan didownload. Para pengunjung sanggup melihat sendiri bagaimana kualitas dari file yang akan mereka download, bersama begitu mereka bisa yakin dan percaya bahwa file yg akan mereka download memang memiliki kualitas yg bagus.

Selain itu ada pula tombol Download. Sesuai beserta namanya tombol ini berfungsi buat mendownload atau mengunduh file yg terdapat pada sebuah situs/blog. Ada beberapa karakteristik dari tombol Download, yaitu tombol Download yg mengarah langsung dalam file, serta tombol download yg menunjuk dalam halaman lain yang sudah dihubungkan beserta file.

Baiklah admin rasa anda sudah mulai paham mengenai tombol Demo dan Download. Sesuai bersama judul di atas, dalam kesempatan kali ini aku akan menunjukkan anda sebuah cara gampang buat menciptakan kedua tombol tersebut (Demo serta Download), dan cara mengaplikasikannya dalam postingan blog.

Cara ini sangat admin rekomendasikan bagi anda yang memiliki blog download karena selain memudahkan pengunjung, kedua tombol ini mampu menarik para pengunjung buat mengunjungi situs blog anda, ini dikarenakan warna pada kedua tombol ini telah terintegrasi beserta warna Flat UI yg pastinya sangat nyaman apabila ditinjau.

Disini admin akan memberikan cara membuat tombol Demo serta Download bersama dua Style yang tidak sama. Style yg pertama yaitu tombol Demo dan Download akan berada dalam posisi sejajar, serta Style ke 2 yaitu tombol Demo serta Download berada pada posisi urut, atau letak tombol Demo berada di atas dan tombol Download berada dibawah.

Oke tanpa berbasa-basi lagi, bagi kamu yg ingin dapat menciptakan tombol Demo dan Download silahkan ikuti saja panduan berikut:

Karena tombol Demo serta Download yg akan kita buat ini memakai Font Awesome, jadi kita wajib memasukkan kode berikut kedalam tema blog. Caranya:

1. Masuk ke blogger
2. Pilih Tema>Edit HTML
3. Masukan kode berikut diatas </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
4. Simpan Tema

Nah sesudah kita berhasil memasukkan kode Font Awesome, maka saatnya kita berlanjut ke cara berikutnya. Yaitu cara memasukkan script kode buat membuat tombol Demo dan Download Flat UI.

Karena tombol Demo serta Download Flat UI yg akan aku bagikan ini memiliki dua style yang tidak selaras, jadi anda bisa menentukan salah satunya.

STYLE 1


1. Login ke blogger
2. Pada dashboard pilih Tema>Edit HTML
3. Letakkan kode berikut di atas kode ]]></b:skin> atau </style>
/* CSS Button Style 1 by https://tipsblogmfs.blogspot.com */.buttonfloat:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both.button ulmargin:0;padding:0.button lidisplay:inline;margin:5px;padding:0;list-style:none.button li a.demo,.button li a.downloadposition:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!Important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s.button li a.downloadbackground:#3498db.button li a.demo:hover,.button li a.download:hoverbackground:#666.button li a.demo:active,.button li a.download:activecursor:pointer.button li a.demo:after,.button li a.download:aftercontent:'f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome.button li a.download:aftercontent:'f019'
4. Simpan Tema

Cara Mengaplikasikan Pada Postingan


1. Masuk ke blogger
2. Pilih Postingan>Entri Baru
3. Masuk ke mode HTML (Bukan "Compose")
4. Masukan kode berikut:
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="https://tipsblogmfs.blogspot.com" sasaran="_blank">Demo</a></li> <li><a class="download" href="https://tipsblogmfs.blogspot.com" sasaran="_blank">Download</a></li> </ul></div><div class="clear"></div>
Catatan:
Ubah tulisan yg bertanda Merah beserta URL yg kamu inginkan!5. Lakukan Pratinjau buat melihat hasilnya

STYLE 2


1. Login ke blogger
2. Pada dashboard pilih Tema>Edit HTML
3. Tambahkan kode berikut di atas kode ]]></b:skin> atau </style>
/* CSS Button Style 2 by https://tipsblogmfs.blogspot.com */.button2float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both.button2 ulmargin:0;padding:0.button2 lidisplay:inline;margin:5px;padding:0;list-style:none.button2 li a.demo,.button2 li a.downloadposition:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!Important;font-weight:700;font-size:14px;text-align:justify;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden.button2 li a.downloadbackground:#3498db.button2 li a.demo:hover,.button2 li a.download:hoverbackground:#666.button2 li a.demo:active,.button2 li a.download:activecursor:pointer.button2 li a.demo:after,.button2 li a.download:aftercontent:'F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s.button2 li:hover a.demo:after,.button2 li:hover a.download:afterbackground:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite@-webkit-keyframes bouncerightfrom-webkit-transform:translateX(0)to-webkit-transform:translateX(3px)@keyframes bouncerightfromtransform:translateX(0)totransform:translateX(3px)
4. Simpan Tema

Cara Mengaplikasikan Pada Postingan


1. Masuk ke blogger
2. Pilih Postingan>Entri Baru
3. Masuk ke mode HTML (bukan "Compose")
4. Masukan kode berikut:
<div style="text-align: center;"> <ul class="button2"> <li><a class="demo" href="https://tipsblogmfs.blogspot.com" sasaran="_blank">Demo Link</a></li> <li><a class="download" href="https://tipsblogmfs.blogspot.com" sasaran="_blank">Download Link</a></li> </ul></div><div class="clear"></div>
Catatan:
Ubah tulisan yg bertanda Merah beserta URL yg kamu inginkan!5. Lakukan Pratinjau buat melihat hasilnya

Itu beliau cara membuat tombol Demo serta Download pada postingan blog. Dengan kamu menerapkan cara ini pastinya kualitas postingan kamu akan semakin baik serta terlihat profesional.

Baca Juga: Cara Membuat Kotak Catatan Atau Blockquote Keren Pada Postingan Blog

Yap saya rasa hanya itu yg sanggup aku sampaikan, kurang lebihnya mohon maaf. Terimakasih dan hingga jumpa di postingan berikutnya.

Cara Menerapkan Adblocker Killer/Penghancur Adblocker Terbaru Di Blogger

  
Cara Memasang Adblocker Killer/Penghancur Adblocker Terbaru Di Blogger

Adblocker merupakan sebuah add-ons yang tak jarang dijumpai dalam kebanyakan browser, kegunaannya sangat sederhana yaitu buat memblokir iklan/ads yang terdapat pada situs blog.

Dengan Adblocker ini seluruh jenis iklan yg ada dalam situs blog akan dihilangkan secara paksa, pada akhirnya tersisa konten(artikel) blog saja.

Bagi para blogger hal ini tentu adalah sebuah ancaman yg berbahaya. Karena kita tahu bahwa sebagian besar pendapatan para blogger berasal dari iklan.

Jika fitur Adblocker ini dibiarkan begitu saja maka pastinya tidak ada pengunjung yang akan melakukan klik dalam iklan, hal ini tentunya akan berimbas dalam merosotnya penghasilan para blogger.

Oleh karena itu pada kesempatan ini admin akan menunjukkan sebuah cara ampuh yang sanggup kamu manfaatkan buat menghancurkan fitur Adblocker.

Dengan cara ini, maka setiap orang yg menggunakan Adblocker akan diberikan dua pilihan, yaitu mematikan Adblocker agar tetap sanggup mengakses situs blog, atau tetap mengaktifkan fitur Adblocker tetapi tak bisa mengakses situs blog kamu.

Mau tahu bagaimana caranya? Silahkan ikuti saja caranya dibawah ini:

1. Masuk ke blogger.com
2. Pilih Tema>Edit HTML
3. Kemudian masukan kode berikut di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
<style type='text/css'>/* Animation */@keyframes fadeInDown0%opacity:0;transform:translateY(-20px)100%opacity:1;transform:translateY(0)@keyframes rubberBandfromtransform:scale3d(1,1,1)30%transform:scale3d(1.25,0.75,1)40%transform:scale3d(0.75,1.25,1)50%transform:scale3d(1.15,0.85,1)65%transform:scale3d(.95,1.05,1)75%transform:scale3d(1.05,.95,1)totransform:scale3d(1,1,1)/* Say Hi to Adblock */#arlinablockbackground:rgba(0,0,0,0.65);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;animation:fadeInDown 1s#arlinablock .headermargin:0 0 15px 0#arlinablock .innerbackground:#e3482d;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;width:600px;padding:40px;border-radius:5px;margin:7% auto 2% auto;animation:rubberBand 1s#arlinablock buttonpadding:10px 20px;border:0;background:rgba(0,0,0,0.15);color:#fff;margin:20px 5px;cursor:pointer;transition:all .3s#arlinablock button:hoverbackground:rgba(0,0,0,0.35);color:#fff;outline:none#arlinablock button.active,#arlinablock button:hover.activebackground:#fff;color:#222;outline:none#arlinablock .fixblockbackground:#fff;text-align:justify;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px#arlinablock .fixblock divdisplay:none#arlinablock .fixblock div.activedisplay:block#arlinablock olmargin-left:20px@media(max-width:768px)#arlinablock .innerwidth:calc(100% - 20px);margin:10px auto;padding:15px</style>
4. Masih di Edit HTML. Tambahkan juga kode berikut, sebelum kode </body> atau <!--</body>--></body>
<script type='text/javascript'>//<![CDATA[// Say Hi to Adblockfunction downloadJSAtOnload()var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/quasar/23207858/arlinablock.js",document.body.appendChild(e)window.addeventListener?Window.addeventListener("load",downloadJSAtOnload,!1):window.attachEvent?Window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;//]]></script>
5. Simpan Tema

Dengan cara ini maka setiap pengunjung blog akan mematikan Adblocker agar tetap sanggup mengakses situs blog kamu.

Dan tentunya hal ini adalah kabar baik bagi para blogger, karena jika Adblocker sudah non-aktif, maka iklan akan aktif balik dan tentunya penghasilan kamu sebagai seorang blogger pula akan ikut semakin tinggi.

Baca Juga: Cara Membuat Tombol Demo Dan Download Flat UI Pada Postingan Blog

Itu saja yg sanggup saya sampaikan. Semoga apa yang aku bagikan di artikel ini dapat bermanfaat ya. Terimakasih serta sampai jumpa.