Cara Membuat Button Demo dan Download ala Blog Krizeer Keren di Blog, cara membuat button demo dan download warna warni di blog.
Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download ala blog ini, tutorialnya sih lumayan sulit bagi pemula seperti saya, hehe.
Biasanya tombol ini digunakan untuk berbagi template, atau link download saja. Demonya lihat tombol dibawah ini:
Untuk menggunakannya, lihat cara dibawah:
HTML:
Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download ala blog ini, tutorialnya sih lumayan sulit bagi pemula seperti saya, hehe.
Biasanya tombol ini digunakan untuk berbagi template, atau link download saja. Demonya lihat tombol dibawah ini:
Langsung saja ketutorial nya:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Tambahkan kode di bawah ini sebelum/di atas ]]></b:skin>
/* Tombol Demo & Download ala Blog Krizeer
----------------------------------------------- */
.kotak-demo-download {
float:left;list-style:none;text-align:center;width: 100%;margin:8px 0!important;padding:0;font-size:14px;clear:both;font-family:Oswald, Open Sans, Arial, sans-serif;text-transform:uppercase;
}
.kotak-demo-download ul {
margin:0;padding:0
}
.kotak-demo-download li{
display:inline;margin:0;padding:0;
}
.demo {
border: 1px solid #d24932;border-bottom-color:#c84934;box-shadow:1px 1px 1px #aaa;padding: 7px 40px !important; background: #E55E48; 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 {
border: 1px solid #549dd4;border-bottom-color:#4b8cbe;box-shadow:1px 1px 1px #aaa;padding: 7px 40px !important; background: #5FAAE3; 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;
}
.demo:hover {
background: #d94a33;box-shadow:none;border-color:#d0412a #d0412a #c43d27; 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;
}
.download:hover {
background: #4296d5;box-shadow:none;border-color:#378dcd #378dcd #2a80c0; 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}
4. Masukan font Oswald di bawah <head><link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>5. Untuk menambahkan ikon disamping link button, tambahkan kode dibawah ini di atas </head>
<link href='netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>6. Simpan template
Untuk menggunakannya, lihat cara dibawah:
HTML:
<div style="text-align: center;"> <ul class="kotak-demo-download"> <!-- Demo --> <li><a class="demo" href="http://yoga-tc.blogspot.com/" target="_blank"><i class="icon-chevron-right"></i> Demo</a></li> <!-- Download --> <li><a class="download" href="http://yoga-tc.blogspot.com/" target="_blank"><i class="icon-download-alt"></i> Download</a></li> </ul> </div> <div class="clear"> </div>
Untuk lebih lengkapnya/lebih jelasnya tentang font awsome silahkan masuk ke: http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
Label:
Tutorial Blog
pada
12/12/2013
Mau nanya nih sob...bagaimana caranya agar bacground homepage berbeda dengan halaman postingan seperti di blog ini sob???
BalasHapusMaksud sobat warna background diluar wrapper, atau didalam wrappper?
Hapus1. Tambahkan kode dibawah ini dibawah ]]></b:skin>
<style>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
body, .body-fauxcolumn-outer {
background: #273e4c;
}
</b:if></b:if></style>
maksudnya yang diluar wrapper sob....pusing nih. gag tau caranya.
Hapuscara di atas itu yg diluar wrapper, nah sobat ingin berbeda warna backgroundnya pada bagian homepage apa di dalam postingan ?, coba sobat jelaskan satu persatu pada bagian mana yg ingin beda warna backgroundnya, dan pada halaman apa ingin berbeda warna backgroundnya
HapusIzin repost yah sob
BalasHapussilahkan sob, tapi harus dikasih sumber yg menuji ke blog ini !!
HapusLink sumbernya sudah saya pasang sob silahkan dicheck sendiri.
HapusWah bermanfaat sekali gan thanks :)
BalasHapussama-sama gan, blog sobat seperti PULSK wow
Hapusgan, kode biar bikin post komentar kayak punya agan ini gimana?
BalasHapusnanti saya buat postingaanya, ditunggu aja ya xV
HapusKomentar ini telah dihapus oleh pengarang.
BalasHapusApasih Maksudnya nih Nabilah Ratna Ayu ?
Hapusitu akun saya yg satunya, akun Nabilah Ratna Ayu hanya untuk blog demo template blogger saja, jadi saya salah akun, hehe xV
HapusBanner 468x60 telah terpasang di header...
BalasHapusMohon kerjasamanya :D
http://gilang-cyber4rt.blogspot.com
Banner sobat ukuran 468x60 sukses terpasang di header, trimakasih atas kerjasamanya, semoga blog sobat makin sukses :-d
HapusMaaf mas Yoga...Saya cuman baru belajar mas nanti saya rubah kok design blognya...tapi blog ini sya ambil dari webnya.
HapusTemplate Info
- Name : Faster Clean White
- Author : Riyono
- URL : http://art-preview.blogspot.com/
- G+ : https://plus.google.com/102378255170044980225
- License : http://creativecommons.org/licenses/by/3.0/
mohon Maaf kalau ada sedikit kesamaan yah mas. saya hanya masih tahap belajar. Makasih sob Kalau bisa Mengerti.
template original blog ini Faster Clean White tapi template tersebut sudah saya design ulang, jadi 100% berbeda dengan yang aslinya, sebagai blogger yang baik mohon cantumkan credit pembuat templatenya :W
HapusIya Mas saya tau kok tapi ini juga saya sudah ubah-ubah kok agar terlihat berbeda dari aslinya. jadi mohon kerja samanya yah sob. sama-sama belajar sob :-d
Hapuskalo yang sama nya cuman 1-2 gpp, tapi kalo yang ini 100% sama x@
Hapusiya sob saya sudah Rubah kok sob Backgroundnya. dan menu navigasinya sob....terus menusharingnya juga masih sesuai asalnya sob. :(
BalasHapusMaaf Sob tidak 100% sama. Coba diperhatikan Menu navigasi, Footer saya tidak hilangkan kotak widgetnya, menu searchnya juga beda kok. cuman yang sam itu menu komentar sama bacground postingannya sob..
BalasHapusterserah sobat ~x(
Hapussekali lagi mohon maaf sob...saya cuman ingin berteman dan saling berbagi sob..maaf atas gangguannya yah sob
BalasHapusoke saya maafkan, saya hargai sobat sudah berani mengungkapkan dan meminta izin kepada saya atas kesamaan template yang sobat pakai, saya juga minta maaf sob jika saya punya salah sama sobat :D
Hapusikonnya kok nggak muncul kang, aku juga udah baca di tutornya kang ismet tapi juga belum muncul :(
BalasHapusMin.Kok Icon Awesome Nya Gk Muncul Ya??
BalasHapuskunjungi blogku gan. http://www.sharereyhan.blogspot.com
BalasHapusalhamdulillah sukses. Makasih ya gan :)
BalasHapussukses bro, thanks ya
BalasHapussanagt cocok buat blog ane nih tombol downloadnya
BalasHapushi admin yang ganteng <3 aQ mau bikin blog yang bagus di Blog Tips
BalasHapuskog ane mah beda gan jadinya,, jadinya begini http://herul0488.blogspot.com/2015/07/deco-mag-responsive-magazine-blogger.html
BalasHapusI am terribly happy to scan this. this is often the sort of manual that must be and not the random info that is at the opposite blogs. Appreciate your sharing this best posting. bolatangkasgratis.com
BalasHapus