Cara Membuat Tombol Download Keren Dan Resposnsive Di Blog

Cara Membuat Tombol Download Keren Dan Responsive Di Blog

Ammar KC,
Halo teman-teman jumpa lagi dengan kami, pada kesempatan kali ini kami akan memberikan tutorial atau cara membuat tombol download keren dan responsive di blog

Tombol download yang di maksud disini adalah sebuah tombol dalam blog dimana ketika kita klik tombol tersebut akan mengarahkan kita ke halaman download file dimana sang pemilik file menyimpan atau meng-upload file tersebut.

Tombol download biasanya ditemukan di blog yang memiliki niche download, baik itu download apk android, software, lagu, film dan file-file lainnya. Tapi bukan berarti blog yang bukan blog download tidak terdapat tombol download.

Membuat tombol download yang keren dan responsive di blog bukanlah hal yang sulit, teman-teman hanya perlu sedikit pemahaman terhadap bahasa program CSS dan HTML, namun jika pemahaman teman-teman terhadap bahasa tersebut masih minim seperti saya ini, teman-teman bisa mengikuti tutorial sederhana yang sudah saya siapkan berikut ini.

Cara Membuat Tombol Download Keren Dan Responsive Di Blog

1). Silahkan login ke blog kamu terlebih dahulu,

2). Setelah login, pilih tema, kemudian edit HTML

3). Slanjutnya copy code CSS dibawah ini, kemudian tempelkan diatas ]]></b:skin> atau code </head> kemudian klik simpan tema.

<style type="text/css">
.button {float:left; list-style:none; text-align:center; width:100%; margin:5px 0; padding:0; font-size:14px; clear:both;}
.download {border:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; padding:8px 30px !important; background: linear-gradient(to right, #4653F8, #000000, #4653F8); color:#fff !important; text-align:center; text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); transition:background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.download:hover {background:#000000; text-shadow:0 0 1px #222; -moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; -ms-text-shadow:0 0 1px #222;}
</style>

Sampai disini teman-teman sudah berhasil memasang tombol download yang keren dan responsive di blog, nah selanjutnya bagaimana cara menampilkan tombolnya di blog atau di postingan blog kita?

1). Silahkan teman-teman buat postingan baru

2). Pilih HTML kemudian copy code dibawah ini, dan letakkan tepat dimana teman-teman ingin melatakkan tombol downloadnya.

<div class="button">
<a class="download" href="##">DOWNLOAD</a>
</div>
<div class="clear"></div>

Catatan:
Ganti ## dengan link download.

3). Selesai, silahkan klik lagi compose, untuk melihat hasilnya.

4). Nah agar tampilan tombol download yang kita buat, terlihat lebih keren lagi, ganti code di bagian 2 diatas, dan gunakan code dibawah ini.

<div style="text-align: center;">
<div style="background-color: transparent; border: 3px #000000 double; float: center; padding: 10px; text-align: center; width: 100%;">
<img alt="Ammar KC" height="100" src="#" style="margin: 0 0 10px 15px; overflow: hidden;" title="Ammar KC" width="100" />
<br />
<div style="text-align: center;">
<span style="font-weight: bold; font-size; 15px;">Muammar</span>
<br />
<div class="button">
<a class="download" href="##">DOWNLOAD</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>

Catatan:

• Ganti # dengan link gambar file
• Ganti Muammar dengan Nama file atau deskripsi file.
• Ganti ## dengan link download.

5). Selamat tombol download keren dan responsive yang teman-teman buat sudah jadi, jangn lupa untuk memasukkan link download filenya di tempat yang sudah di sediakan.

Cara diatas Juga bisa dilakukan tanpa harus edit HTML template blog, bagaimana caranya? Cukup copy code dibawah ini, kemudian pasang di HTML postingan teman-teman.

<div style="text-align: center;">
<div style="background-color: transparent; border: 3px #000000 double; float: center; padding: 10px; text-align: center; width: 100%;">
<img alt="Ammar KC" height="100" src="#" style="margin: 0 0 10px 15px; overflow: hidden;" title="Ammar KC" width="100" />
<br />
<div style="text-align: center;">
<span style="font-weight: bold; font-size; 15px;">Muammar</span>
<br />
<style type="text/css">
.button {float:left; list-style:none; text-align:center; width:100%; margin:5px 0; padding:0; font-size:14px; clear:both;}
.download {border:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; padding:8px 30px !important; background: linear-gradient(to right, #4653F8, #000000, #4653F8); color:#fff !important; text-align:center; text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow:0 0 1px rgba(0, 0, 0, 0.3); transition:background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.download:hover {background:#000000; text-shadow:0 0 1px #222; -moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; -ms-text-shadow:0 0 1px #222;}
</style>
<div class="button">
<a class="download" href="##">DOWNLOAD</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>

Catatan:

• Ganti # dengan link gambar file
• Ganti Muammar dengan Nama file atau deskripsi file.
• Ganti ## dengan link download.

Nah itulah kangkah-langkah yang harus teman-teman lakukan kalau ingin membuat tombol download keren dan responsive di blog sangat mudahkan? Silahkan teman-teman praktekkan langsung di blog masing-masing, jangan lupa untuk bertanya, jika dalam pembuatannya terdapat kendala.

Demikianlah artikel tentang cara membuat tombol download keren dan responsive di blog, semoga bermanfaat, dan jangan lupa untuk meninggalkan komentar serta share artikelnya biar yang lain tau.

Read more

Cara Membuat Page Link Partner Blog Keren dan Responsive

Cara Membuat Page Link Partner Blog Keren dan Responsive

Ammar KC,

Membuat blog atau situs dikenal banyak kalangan itu bukanlah hal yang mudah, apalagi kalau anda mau blog anda jadi yang nomor satu di pencarian google, mungkin anda harus memperbanyak lagi ilmu tentang blog, dan tentu banyak hal yang harus anda lalui terlebih dahulu. Maka dari itu banyak blogger yang mengambil alternativ seperti kerjasama diantara para blogger-blogger. Salah satunya adalah membuat halaman link partner blog dan memasangnya di blog masing-masing.

Blog partner memang sudah menjadi salah satu langkah yang diambil oleh para blogger dalam meningkatkan kepopuleran situsnya. Selain itu dengan memasang link blog partner, berarti kita telah membuat backlink, dimana kita tau bahwa backlink untuk para blogger itu merupakan salah satu hal yang sangat penting untuk meningkatkan trafik blognya.

Nah disini kami akan memberikan kepada sahabat AKCers tentang panduan lengkap untuk memasang link partner blog yang keren dan responsive di blog kita (lihat contohnya disini).

Oh iya, untuk sahabat blogger yang ingin menjadi partner blog di situs kami, silahkan hibungi kami melalui facebook, atau twitter, atau melalui Contact Us blog ini.

Berikut cara membuat halaman link partner blog yang keren dan responsive.

1. Login ke akun blog kalian

2. Salin script berikut

<div class="Buka">

<ul class="BlogList">

<li class="ArticleTeaser">

<h3 class="ArticleTeaser-title">

<a href="https://www.muammar-kc.me" target="_blank" title="Ammar KC">Ammar KC</a></h3>

<div class="ArticleTeaser-bubble">

</div>

<div class="ArticleTeaser-date">

Blog Pribadi Yang Berisi Tentang Tutorial Android Dan Blog Yang Paling Lengkap, Paling Simpel Dan Paling mudah Di Pahami</div>

</li>

<li class="ArticleTeaser">

<h3 class="ArticleTeaser-title">

<a href="https://www.muammar-kc.me" target="_blank" title="Ammar KC">Ammar KC</a></h3>

<div class="ArticleTeaser-bubble">

</div>

<div class="ArticleTeaser-date">

Blog Pribadi Yang Berisi Tentang Tutorial Android Dan Blog Yang Paling Lengkap, Paling Simpel Dan Paling mudah Di Pahami</div>

</li>

<li class="ArticleTeaser">

      <h3 class="ArticleTeaser-title">

<a href="https://www.muammar-kc.me/p/hubungi-kami.html" target="_blank" title="Contact">HUBUNGI KAMI</a></h3>

<div class="ArticleTeaser-bubble">

</div>

<div class="ArticleTeaser-date">

Klik Disini Untuk Menjadi Bagian Dari Partner Blog Ammar KC!!!</div>

</li>

</ul>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js" type="text/javascript"></script>

<br />

<br />

<script>

//<![CDATA[

function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }

loadCSS("https://cdn.rawgit.com/slideseo-blog/slideseo.js/master/Part.css");

//]]>

</script>

<script src="https://cdn.rawgit.com/slideseo-blog/slideseo.js/master/Part.js" type="text/javascript"></script>

Keterangan:

• Ganti https://www.muammar-kc.me dengan link situs blog anda.
• Ganti Ammar KC dengan nama blog anda.
• Ganti Blog Pribadi Yang Berisi Tentang... dengan deskripsi blog anda.
• Ganti https://www.muammar-kc.me/p/hubungi-kami.html dengan url/link contact blog anda.

2. Kembali ke blog anda kemudian  pilih Halaman, Selanjutnya klik halaman baru

3. Selanjutnya klik HTML dan jangan lupa isi judul halaman anda terlebih dahulu, misalnya "Link Blog Partner Ammar KC" (ganti Ammar KC dengan nama blog anda).

4. Paste kode atau script yang tadi anda copy di halaman baru anda tersebut.

5. Pilih Compose atau pratinjau untuk melihat hasilnya, atau anda juga bisa langsung mem-publikasikan halaman link blog partner anda.

Selamat halaman partner blog anda sudah jadi, silahkan berbagi link blog dengan teman-teman blogger lainnya untuk saling membantu dalam meningkatkan trafik blog anda.

Untuk menambahkan link atau situs baru, tambahkan kode berikut dibawah kode </li>

<li class="ArticleTeaser">

<h3 class="ArticleTeaser-title">

<a href="https://www.ammar-kc.me" target="_blank" title="Ammar KC">Ammar KC</a></h3>

<div class="ArticleTeaser-bubble">

</div>

<div class="ArticleTeaser-date">

Blog Pribadi Yang Berisi Tentang Tutorial Android Dan Blog Yang Paling Lengkap, Paling Simpel Dan Paling mudah Di Pahami</div>

</li>

Keterangan:

• Ganti https://www.muammar-kc.me dengan link situs blog anda.
• Ganti Ammar KC dengan nama blog anda.
• Ganti Blog Pribadi Yang Berisi Tentang... dengan deskripsi blog anda.

Demikianlah cara membuat link partner blog semoga bisa membantu teman-teman blogger khususnya para blogger pemula seperti saya,

Sekali lagi kami ingatkan kepadavsahabat blogger yang mau menjadi bagian dari link partner blog kami silahkan hubungi kami melalui facebook, atau twitter atau Contact Us blog ini.

Read more