Hai sahabat awblog..
Pernahkah kalian mendownload file dari ziddu, mediafire dkk ? Jika pernah disini kita akan belajar bagaimana cara membuat page download yang mungkin mirip dengan web download tersebut. Bisa kita namakan page custom download, karena page tersebut khusus untuk dowload file saja. Custom page download ini sangat bermanfaat untuk blogger yang menyediakan file - file untuk di download.
Tak usah berpanjang lebar, yuk kita mulai tutorial cara membuatnya :
1. Buat hosting dan instal wordpress.
Untuk membuat custom page download ini agan harus mempunyai hosting untuk meletakkan custom page downloadnya. Silakan agan ikuti panduaan cara instal wordpress di hosting gratis berikut : http://www.awblog.net/2015/05/cara-membuat-blog-wordpress-premium.html
2. Menganti custom template wordpress
Biasaya kalau kita menginstal wordpress di hosting, akan muncul tampilan posting - posting wordpress kita. Nah untuk mengatasi hal tersebut kita harus membuat template wordpress yang tidak menampilkan posting apapun. sebagai contoh tampilannya seperti ini :
Namun tenang saja gan, kamu tidak perlu bingung karena disini saya akan membagikan template customnya kepada agan. Jika agan berminat silakan download disini
Untuk merubah tampilannya silakan agan edit pada file index.php dan kalau mau menambahkan css silakan agan edit pada file style.css
3. Membuat sebuah directories pada cpanel.
Buatlah sebuah folder/ directories misal "download" dan letakkan pada /public_html/ jadi nanti hasilnya akan seperti ini /pubic_html/download
4. Membuat custom page download
Nah untuk membuat custom page download ini agan harus membuat file berekstensi .html agar bisa tampil ketika kita menuju page download kita. Misal kita buat filenya "ngawi-tempate.html", nah setelah membuat file tersebut kita upload filenya di "/public_html/download/ngawi-tempate.html" jadi nanti tampilan dalam browser kita : http://alamatweb/download/ngawi-tempate.html
Agan tidak perlu repot - repot untuk membuatnya, karena disini saaya sudah menyediakan formatnya, jadi agan tinggal mengeditnya saja, menambahkan link download dsb. Silakan download filenya disini
Untuk penjelasannya sebagai berikut :
Cari code berikut dalam file htmlnya :
<link rel="icon" type="image/ico" href="http://kangrian.com/assets/favicon.ico"/> <title>Mugi Magazine Blogger Templates | Idblog.xYz</title>Keduanya berfungsi untuk memunculkan icon dan judul pada navbar browser kita
Jka sudah silakan agan cari lagi code berikut :
<li class="list-group-item">
<span>
<i style="font-size:18px;" class="fa fa-file-o"></i> File Name |
</span>
Invert Grid Responsive Blogger Template
</li>
<li class="list-group-item">
<span>
<i style="font-size:18px;" class="fa fa-filter"></i> File Extension |
</span>
rar
</li>
<li class="list-group-item">
<span>
<i style="font-size:18px;" class="fa fa-crosshairs"></i> File Size |
</span>
627 KB
</li>
Code tersebut untuk menampilkan info file yang akan di download. Berikut gambar visualnya :
<form method="POST" action="http://dnl.16mb.com/blogger/InvertGridResponsive.rar" accept-charset="UTF-8" role="form" id="download"><input name="_token" type="hidden" value="Htz12IKb5HEJCBzEpFjs5SAKNPePmE4815vRrvdt">
<button type="submit" class="btn btn-primary" id="as"><i class="fa fa-cloud-download"></i> Download Now</button>
</form>
Nah pada code inilah kita akan menyisipkan link download file kita. Lihat link yang berwarna merah, itu merupakan link file downloadnya.Kemudian untuk mengedit tampilan yang ini :
<li class="list-group-item">
<span>
<i class="fa fa-link"></i> Download Link
</span>
<input style="margin-bottom:0px;" class="form-control" style="width:100%;" type="text" value="http://dnl.16mb.com/download/invert-grid.html" readonly>
</li>
<li class="list-group-item">
<span>
<i class="fa fa-code"></i> HTML Include (For Websites)
</span>
<input style="margin-bottom:0px;" class="form-control" style="width:100%;"
type="text" value="<a href="http://dnl.16mb.com/download/invert-grid.html">Invert Grid Responsive Blogger Template</a>" readonly>
</li>
Dan yang terakhir code yang perlu agan edit adalah link sharenya, untuk mengedit link share silakan cari code berikut :
<a class="btn btn-social-icon btn-facebook" onclick=" window.open('http://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://dnl.16mb.com/download/invert-grid.html','','height=550,width=525,left=100,top=100,menubar=0')">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-twitter"
onclick=" window.open('https://www.twitter.com/share?http://dnl.16mb.com/download/invert-grid.html','','height=550,width=525,left=100,top=100,menubar=0')"
>
<i class="fa fa-twitter"></i>
</a>
<a class="btn btn-social-icon btn-google-plus"
onclick=" window.open('https://plus.google.com/share?url=http://dnl.16mb.com/download/invert-grid.html','','height=550,width=525,left=100,top=100,menubar=0')"
>
<i class="fa fa-google-plus"></i>
</a>
Jika sudah selesai mengeditnya kemudian simpan dengan ekstensi html dan upload pada direktori /public_html/download/filekamu.html (upload bisa menggunakan filezilla atau langsung dari cpanel agan)
Memang cara ini agak begitu ribet, tapi menurut saya apa sih yang nggak bisa kita lakukan jika kita terus berusaha dan bersabar :). Selamat mencoba gan, hahaha..