 |
| Preview |
Blogger.id - Hai sobat blogger artikel kali akan berkaitan seputar Cara Membuat Tombol Download dan Demo di Blog Keren dengan efek roket khususnya situs blog yang menggunakan Platform Blogger.com atau yang juga sering diartikan sebagai Platform Blogspot.
Daftar isi
Tutorial kali ini adalah cara mendesain sebuah situs blog, khususnya bagi kalian yang saat ini membuat blog dengan niche atau topik pembahasan seputar Download baik itu download template, Anime, Lagu dan sebagainya.
Tapi, ada beberapa hal lain yang perlu saya ingatkan sekali lagi, jika anda memutuskan membuat situs download saya sarankan setidaknya cantumkan sumber terkait jika memang karya, konten atau file tersebut bukan asli real milik anda.
Toh juga kalian gak rugi, selama mencantumkan sumber terkait kalian juga akan lebih meminimalisir kejadian Copyright dan juga hal - hal yang bisa dikatakan mengutip, mengcopy konten dan lain sebagainya. Itu hanya opini saya saja, selanjutnya tergantung bagaimana pemikiran anda sendiri.
Menfaat Membuat Tombol Download dan Demo di Blog
Banyak manfaat yang bisa diperoleh jika anda membuat tombol - tombol Download dan Demo di situs download anda, khususnya jika anda memiliki situs download template misalnya. Berikut ini adalah beberapa manfaat membuat tombol berikut ini:
- Menunjang Fungsi Estetika di situs anda, hal ini akan membuat pengunjung lebih nyaman saat melakukan dan menemukan tombol download serta demo di blog anda.
- Membuat Situs Terlebih Lebih Profesional, dengan membuat tombol download yang keren. Pengunjung juga akan mendapatkan pengalaman yang menyenangkan khususnya ketika sedang mendownload file tersebut.
- Terkesan lebih terkenal, keren dan mudah di ingat, tujuan utama blog download yang paling utama sebenarnya adalah tentang bagaimana ia bisa memperkenalkan dan menunjukkan Brand serta situs tersebut agar dikenal oleh komunitasnya.
- Meningkatkan Pengunjung.
Bagaimana Cara Membuat Tombol Download dan Demo di Blog
Berikut ini adalah tutorial singkat cara membuat tombol Download di situs blog anda:
- Silahkan akses halaman blogger.com
- Selanjutnya klik pada theme, lalu Backup template untuk antisipasi kesalahan.
- Berikut klik pada edit html, lalu cari kode (<head>). Gunakan CTRL + F Untuk memudahkan.
- Selanjutnya copy dan paste kode berikut tepat dibawah Tag (<head>) atau diatas Tag penutup (</head>).
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>- Kode diatas bisa ada dan juga bisa tidak di template anda oleh karena itu pastikan terlebih dahulu.
- Berikutnya silahkan copy dan Paste kode CSS dibawah ini, lalu letakkan di atas TAG (]]></b:skin>) atau (</style>).
/* CSS Button Download ---- https://bloggeria-id.blogspot.com */
#wrap{margin:20px auto;text-align:center}
#wrap br{display:none}
.btn-slide-diru,.btn-slide2-diru{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #0099cc;margin:10px;transition:.5s}
.btn-slide2-diru{border:2px solid #efa666}
.btn-slide-diru:hover{background-color:#0099cc}
.btn-slide2-diru:hover{background-color:#efa666}
.btn-slide-diru:hover span.circle,.btn-slide2-diru:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0099cc}
.btn-slide2-diru:hover span.circle2{color:#efa666}
.btn-slide-diru:hover span.title,.btn-slide2-diru:hover span.title2{left:40px;opacity:0}
.btn-slide-diru:hover span.title-hover,.btn-slide2-diru:hover span.title-hover2{opacity:1;left:40px}
.btn-slide-diru span.circle,.btn-slide2-diru span.circle2{display:block;background-color:#0099cc;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}
.btn-slide2-diru span.circle2{background-color:#efa666}
.btn-slide-diru span.title,.btn-slide-diru span.title-hover,.btn-slide2-diru span.title2,.btn-slide2-diru span.title-hover2{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#30abd5;transition:.5s}
.btn-slide2-diru span.title2,.btn-slide2-diru span.title-hover2{color:#efa666;left:80px}
.btn-slide-diru span.title-hover,.btn-slide2-diru span.title-hover2{left:80px;opacity:0}
.btn-slide-diru span.title-hover,.btn-slide2-diru span.title-hover2{color:#fff}- Terakhir jangan lupa klik save (simpan).
Nah jika tidak terjadi masalah atau problem kesalahan pada template tersebut, selanjutnya adalah "cara membuat tombol download dan demo di postingan blog". dan jika terjadi beberapa kesalahan silahkan komen sebisanya saya akan membantu pemecahan masalah anda.
Cara Membuat Tombol Download dan Demo di Postingan Blog
Tutorial selanjutnya setelah memasang Tag pemanggil dan CSS berikut adalah bagaimana penerapannya di artikel blog anda.
- Selanjutnya silahkan akses atau buka dashboard blogger anda.
- Klik post yang ingin ditambahkan tombol download atau demo tersebut.
- Lalu klik pada mode HTML (Bukan compose).
<div id="wrap">
<a href="URL LINK" rel="nofollow" class="btn-slide-diru" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a href="URL LINK" rel="nofollow" class="btn-slide2-diru" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>- Selanjutnya, perhatikan tulisan berwarna biru, silahkan ubah menjadi link menuju file dan demo download anda.
- Terakhir klik publish dan lihat demonya.
Anda juga bisa memodifikasi tombol - tombol berikut, entah anda ingin agar hanya ada tombol demo saja atau download saya. Caranya dengan menghapus beberapa script di atas.
Preview Tombol Download dan Demo
Preview dan demo tombol download serta demo bisa anda lihat diatas. Silahkan tes dan coba terlebih dahulu jika ini sesuai dengan keinginan anda silahkan ikuti panduan diatas untuk mendapatkan pengalaman lengkap membuat tombol tersebut.
Demikian tutorial dan panduan lengkap tentang cara membuat tombol download dan demo di blog. Jika ada pertanyaan silahkan tanyakan di kolom komentar dibawah. Saya harap tutorial ini bermanfaat dan saya akhiri tulisan ini.
©BLOGGER.ID®
