Membuat Tombol Download dan Demo keren di Blog AMP dan Blog Non AMP
Monday, June 17, 2019
Add Comment
Dengan menggunaka template blog yang sudah valid amp pastinya akan sedikit menemukan perbedaan sewaktu membuat postingan, ataupun dalam mengedit kode html template blog,
Dan pada umumnya untuk menampilkan tombol download dan demo dalam artikel postingan tersebut adalah dari rancangan sebuah kode/script html yang di sisipkan ke dalam kode template blog atau dalam artikel posting langsung.
Namun jika kode yang di masukan tersebut yang biasa dipakai dalam template blog Non AMP/template biasa. sedangkan template blog yang ingin di pasangi tombol download dan demo ternyata menggunakan template yang sudah valid AMP. maka yang terjadi ketika uji coba Validasi, akan menemukan laporan error atau halaman amp tidak Valid/syah,
Untuk itu bagi anda yang memiliki blog AMP atau pun blog biasa (non AMP) masih bingung ingin menampilkan tombol download dan demo di halaman artikel postingan, maka biar lebih fokus, pada bahasan artikel kali ini saya akan bagikan beberapa kode html untuk membuat tombol download dan demo, khusus template yang sudah AMP, maupun blog yang biasa/Non amp.
Kode di atas ini untuk dipasang di dalam artikel postingan.
Dan kode css dibawah ini untuk di sisipkan dalam kode html template blog, contoh pemasangannya kira kira nanti seperti ini <Style> cssnya </style>.
Jangan lupa setiap otakatik kode html template blog sebaiknya di backup dulu untuk jaga jaga kalau nanti terjadi error.
Sebagai pertinjau langsungnya bisa lihat gambar di bawah ini, Dan untuk warna, silahkan di rubah sendiri sajah menurut selera warna yang anda inginkan.
Berikut ini kode untuk membuat tombol download dan demo keren di template biasa/non AMP.
Anda bisa ganti pada kode yang dikasih tanda merah dengan Url tujuan yang dinginkan. Dan jangan lupa pasang juga css berikut ini untuk menyempurnaka kode di atas biar lebih keren.
Pasang di dalam kode html template blog tepatnya di atas kode ]]</b:skin>
Selesai jangan lupa klik simpan.
Untuk tampilanya nanti akan terlihat seperti gambar dibawah ini, untuk warna, silahkan sesuaikan sendiri yang di inginkan.
Catatan :
Perhatikan dengan baik cara pemasanganya, dan jika beberapa kode di atas ada yang error mending kembalikan sajah kode template anda seperti semula
Demikian dari mang admin untuk artikel yang mengenai cara membuat tombol download dan demo di template valid AMP dan template blogger Non AMP. Selamat mencoba.
Dan pada umumnya untuk menampilkan tombol download dan demo dalam artikel postingan tersebut adalah dari rancangan sebuah kode/script html yang di sisipkan ke dalam kode template blog atau dalam artikel posting langsung.
Namun jika kode yang di masukan tersebut yang biasa dipakai dalam template blog Non AMP/template biasa. sedangkan template blog yang ingin di pasangi tombol download dan demo ternyata menggunakan template yang sudah valid AMP. maka yang terjadi ketika uji coba Validasi, akan menemukan laporan error atau halaman amp tidak Valid/syah,
Untuk itu bagi anda yang memiliki blog AMP atau pun blog biasa (non AMP) masih bingung ingin menampilkan tombol download dan demo di halaman artikel postingan, maka biar lebih fokus, pada bahasan artikel kali ini saya akan bagikan beberapa kode html untuk membuat tombol download dan demo, khusus template yang sudah AMP, maupun blog yang biasa/Non amp.
Kode Untuk Membuat Tombol Download dan Demo Valid AMP
Silahkan copas kode dibawah ini untuk menampilkan tombol download dan demo yang sudah 100% Valid AMP.<div class="dd">
<a class="demo" href="URL demo" rel="nofollow" target="_blank" title="iIsi judul ">Demo</a><a class="download" href="URL download" rel="nofollow" target="_blank"title="Isi judul">Download</a></div>
Kode di atas ini untuk dipasang di dalam artikel postingan.
Dan kode css dibawah ini untuk di sisipkan dalam kode html template blog, contoh pemasangannya kira kira nanti seperti ini <Style> cssnya </style>.
Jangan lupa setiap otakatik kode html template blog sebaiknya di backup dulu untuk jaga jaga kalau nanti terjadi error.
/* CSS TOMBOL DOWNLOAD/DEMO */
.demo{float:left;width:30%;
margin:0px 5px 0px 5px;
border:1px solid #ddd;
border-radius:17px;
padding:5px 10px;
background:#00ff7f;
color:#FFF;
text-align:center;text-shadow:0 0 1px rgba(0,0,0,0.3);transition:background-color 1s ease-out 0s;letter-spacing:1px;box-shadow:0 4px 4px 0 rgba(0,0,0,.14),0 5px 2px -2px rgba(0,0,0,.2),0 2px 8px 0 rgba(0,0,0,.12)}
.download{float:right;width:30%;
margin:0px 5px 0px 5px;border:1px solid #ddd;
border-radius:17px;
padding:5px 10px;
background:#0000cd;
color:#FFF;
text-align:center;text-shadow:0 0 1px rgba(0,0,0,0.3);
transition:background-color 1s ease-out 0s;letter-spacing:1px;box-shadow:0 4px 4px 0 rgba(0,0,0,.14),0 5px 2px -2px rgba(0,0,0,.2),0 2px 8px 0 rgba(0,0,0,.12)}
.demo:hover{background:#000;
text-shadow:0 0 1px #fff}
.download:hover{background:#000;
text-shadow:0 0 1px #fff}
Sebagai pertinjau langsungnya bisa lihat gambar di bawah ini, Dan untuk warna, silahkan di rubah sendiri sajah menurut selera warna yang anda inginkan.
Berikut ini kode untuk membuat tombol download dan demo keren di template biasa/non AMP.
Kode Html Untuk Tombol Download dan Demo Pada Blog non AMP
<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="URL Demo/" target="_blank">DEMO</a></li>
<li><a class="download" href="URL Download/view" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
Anda bisa ganti pada kode yang dikasih tanda merah dengan Url tujuan yang dinginkan. Dan jangan lupa pasang juga css berikut ini untuk menyempurnaka kode di atas biar lebih keren.
Pasang di dalam kode html template blog tepatnya di atas kode ]]</b:skin>
/* Tombol Download dan Demo */
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#e3a459;}
.download {background-color:#005dce;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
Selesai jangan lupa klik simpan.
Untuk tampilanya nanti akan terlihat seperti gambar dibawah ini, untuk warna, silahkan sesuaikan sendiri yang di inginkan.
Catatan :
Perhatikan dengan baik cara pemasanganya, dan jika beberapa kode di atas ada yang error mending kembalikan sajah kode template anda seperti semula
Demikian dari mang admin untuk artikel yang mengenai cara membuat tombol download dan demo di template valid AMP dan template blogger Non AMP. Selamat mencoba.
0 Response to "Membuat Tombol Download dan Demo keren di Blog AMP dan Blog Non AMP"
Post a Comment
Semua Komentar, saran, dan kritik akan saya terima dengan senang hati, tuliskan komentar yang sesuai dengan topik postingan halaman, komentar tidak sopan, spam, dan berisi tautan, tidak akan tampil.