Kebayang bagaimana caranya membuat tombol hanya menggunakan shortcode. Sebenarnya shortcode ini biasanya bekerja pada wordpress, namun dengan beriringnya waktu kita bisa menambahkan shortcode dalam postingan blogger.
[button] Download [/button]
Nah diatas merupakan contoh shortcode yang akan kita gunakan nantinya. Dengan tombol shortcode ini anda bisa membuat tombol berwarna - warni dengan mudah. Mengenai ukuran bisa kita uah nantinya dalam CSS pembentuk tombol shortcode. Namun tenang, bagi anda yang tidak mau ribet saya sudah menyediakan 3 ukuran yakni kecil, besar dan sedang. Selain warna dan ukuran tombol yang akan kita buat nanti bisa kita inegrasikan dengan FontAwesome, jadi kita lebih bebas berkreasi. Anda juga dapat memutuskan kapan untuk nofollow link di tombol . Tombol dapat ditambahkan dalam posting blog , komentar dan widget sidebar , hampir di mana saja . Tombol ini desain Kompatibel dengan semua browser utama dan tentu saja responsif . Mari kita praktekkan bersama!
1. Instal Pluggin Blogger Shortcode
Agar insert tombol menggunakan shortcode berjalan, anda harus menginstal terlebih dahulu plugin blogger shortcodenya. Untuk menginstal plugginnya silakan ikuti panduan berikut : Cara Menambahkan Plugin Blogger Shortcode
2. Menambahkan Warna pada Tombol
Untuk warna tombolnya sudah tersedia 9 warna, tombol ini menggunakan CSS3. Untuk menambahan stylenya silakan ikuti tutorial dibawah :
a. Silakan anda masuk ke dashboard > Template > Backup template
b. Pilih edit HTML
c. Cari code ]]></b:skin>
d. Pastekan CSS berikut diatasnya
a.sc-button i {
padding-right:3px;
}
a.sc-button.large {
padding:8px 20px;
font-size:18px;
}
a.sc-button.medium {
padding:5px 14px;
font-size:15px;
}
a.sc-button.small {
padding:1px 6px;
font-size:12px;
}
a.sc-button {
padding:4px 14px;
margin-bottom:0;
font-size:14px;
display:inline-block;
line-height:20px;
text-align:center;
vertical-align:middle;
cursor:pointer;
color:#333;
text-shadow:0 1px 1px rgba(255,255,255,0.75);
background-color:#f5f5f5;
background-image:-moz-linear-gradient(top,#fff,#e6e6e6);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);
background-image:-o-linear-gradient(top,#fff,#e6e6e6);
background-image:linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe5e5e5',GradientType=0);
border-color:#e6e6e6 #e6e6e6 #bfbfbf;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border:1px solid #bbb;
border-bottom-color:#a2a2a2;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
text-decoration:none;
font-family:oswald;
}
a.sc-button:hover {
color:#333;
text-decoration:none;
background-color:#e6e6e6;
background-position:0 -15px;
-webkit-transition:background-position .3s linear;
-moz-transition:background-position .3s linear;
-o-transition:background-position .3s linear;
transition:background-position .3s linear;
}
a.sc-button.green {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#84FF00;
background-image:-moz-linear-gradient(top,#84FF00,#58AA00);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#a7be2c),to(#95aa27));
background-image:-webkit-linear-gradient(top,#84FF00,#58AA00);
background-image:-o-linear-gradient(top,#84FF00,#58AA00);
background-image:linear-gradient(to bottom,#84FF00,#58AA00);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#84FF00',endColorstr='#58AA00',GradientType=0);
border-color:#95aa27 #95aa27 #5e6c19;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}
a.sc-button.green:hover {
background-color:#58AA00;
}
a.sc-button.blue {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#49afcd;
background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);
background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);
background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
border-color:#2f96b4 #2f96b4 #1f6377;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}
a.sc-button.blue:hover {
background-color:#2f96b4;
}
a.sc-button.purple {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#FD9CF8;
background-image:-moz-linear-gradient(top,#FD9CF8,#CE00CF);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
background-image:-webkit-linear-gradient(top,#FD9CF8,#CE00CF);
background-image:-o-linear-gradient(top,#FD9CF8,#CE00CF);
background-image:linear-gradient(to bottom,#FD9CF8,#CE00CF);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FD9CF8',endColorstr='#CE00CF',GradientType=0);
border-color:#CE00CF #CE00CF #FD9CF8;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}
a.sc-button.purple:hover {
background-color:#CE00CF;
}
a.sc-button.orange {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#faa732;
background-image:-moz-linear-gradient(top,#fbb450,#f89406);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));
background-image:-webkit-linear-gradient(top,#fbb450,#f89406);
background-image:-o-linear-gradient(top,#fbb450,#f89406);
background-image:linear-gradient(to bottom,#fbb450,#f89406);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffab44f',endColorstr='#fff89406',GradientType=0);
border-color:#f89406 #f89406 #ad6704;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}
a.sc-button.orange:hover {
background-color:#f89406;
}
a.sc-button.red {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#FE1A0E;
background-image:-moz-linear-gradient(top,#FE1A0E,#AC0905);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#FE1A0E),to(#AC0905));
background-image:-webkit-linear-gradient(top,#FE1A0E,#AC0905);
background-image:-o-linear-gradient(top,#FE1A0E,#AC0905);
background-image:linear-gradient(to bottom,#FE1A0E,#AC0905);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FE1A0E',endColorstr='#AC0905',GradientType=0);
border-color:#bd362f #bd362f #802420;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}
a.sc-button.red:hover {
background-color:#AC0905;
}
a.sc-button.black {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#363636;
background-image:-moz-linear-gradient(top,#444,#222);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#444),to(#222));
background-image:-webkit-linear-gradient(top,#444,#222);
background-image:-o-linear-gradient(top,#444,#222);
background-image:linear-gradient(to bottom,#444,#222);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444',endColorstr='#ff222222',GradientType=0);
border-color:#222 #222 #000;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}
a.sc-button.black:hover {
background-color:#222;
}
a.sc-button.brown {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#FEAA33;
background-image:-moz-linear-gradient(top,#FEAA33,#9F5E02);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#FEAA33),to(#9F5E02));
background-image:-webkit-linear-gradient(top,#FEAA33,#9F5E02);
background-image:-o-linear-gradient(top,#FEAA33,#9F5E02);
background-image:linear-gradient(to bottom,#FEAA33,#9F5E02);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEAA33',endColorstr='#9F5E02',GradientType=0);
border-color:#9F5E02 #9F5E02 #FEAA33;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}
a.sc-button.brown:hover {
background-color:#9F5E02;
}
a.sc-button.fb {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#6080C6;
background-image:-moz-linear-gradient(top,#6080C6,#3a5795);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#6080C6),to(#3a5795));
background-image:-webkit-linear-gradient(top,#6080C6,#3a5795);
background-image:-o-linear-gradient(top,#6080C6,#3a5795);
background-image:linear-gradient(to bottom,#6080C6,#3a5795);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6080C6',endColorstr='#3a5795',GradientType=0);
border-color:#3a5795 #3a5795 #6080C6;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}
a.sc-button.fb:hover {
background-color:#3a5795;
}
e. Simpan template
Dengan begitu shortcode button CSS3 telah siap digunakan dimanapun kita mau menggunakannya, bisa dalam postingan maupun didalam komentar.
3. Cara Penggunaannya
Untuk menggunakan shortcode tombol ini sangat mudah. Anda cukup menulis shortcode berikut saat ingin menyisipkan tombol baik dalam postingan, komentar maupun widget.
[button]Your Title[/button]dan hasilnya akan seperti ini :
4. Costumisasi Lanjutan
Untuk menghasilkan tombol CSS3 kita harus menambahkan sedikit atribut untuk mempercantik tombolnya. Berikut list atributnya yang bisa kita gunakan :
| Attribute | Definition |
|---|---|
| src | Untuk menyisipkan link |
| color | Mengganti warna tombol. Options: red, brown, blue, green, purple, black, orange, fb |
| size | Untuk menentukan ukuran tombol. Options: small, medium, large |
| rel | Untuk menentukan link nofollow atau dofollow |
Oke mari sekarang kita coba mempraktekkannya. Copy dan paste shortcode berikut :
[button size="large" color="blue" src="http://www.example.com"] <i class="fa fa-download"></i> Download [/button]
Nanti tombol yang dihasilkan akan seperti ini :
Icon download yang ada didalam tombol tersebut menggunakan fontAwesome.
Catatan :
Untuk menyisipkan fontAwesome harus di tulis pada mode HTML editor
Untuk list font awesome bisa agan cari di google :) Untuk membuat tombol dofollow agan cukup menambahkan link dan atribut seperti dibawah ini :
[button rel="nofollow" src="http://www.example.com"]DEMO[/button]
Jika anda tidak suka dengan warna dan bentuk tombolnya, anda bisa mengedit pada bagian CSSnya. Mungkin cukup sekian share cara membuat tombol CSS3 menggunakan shortcode. Semoga artikel saya bisa dimengerti :D