Jumpa lagi dengan sobat pecinta share.
Ulasan Buttons Indah
Ini adalah desain UI datar tombol yang indah yang akan membawa keunikan desain pada blog sobat share. Tombol-tombol ini memiliki warna dan ukuran yang dapat digunakan untuk situasi dan tempat-tempat yang seperti apapun. Ada tiga ukuran untuk tombol-tombol ini yang besar, menengah dan kecil. 1Shares telah memilih lima total warna UI datar untuk tombol ini yang Biru, Hijau, Merah, Ungu, dan Green Sea. 1Shares telah mengscript tombol ini sedemikian rupa sehingga mereka tidak akan mempengaruhi kecepatan loading blog sobat share karena 1Shares telah menulis coding pendek, pipih dan hanya digunakan CSS3 tanpa gambar. Tombol ini akan bekerja dengan sempurna.
Menerapkan tombol ini tidaklah sulit, setiap orang dapat dengan mudah menambahkan tombol ini ke dalam blognya dengan mengikuti langkah-langkah sederhana yang dipaparkan di bawah ini.
Langkah 1.
Pergi Ke Blogger >> Template >> Backup Template Anda
Klik Edit HTML dan Search For </head>
Paste script berikut di atas </head>
<!-- Flat UI Buttons By Www.BloggerYard.Com Start --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300, 600,700,800" rel="stylesheet" type="text/css"></link> <style type="text/css"> .button {color:white!important; font-family:open sans; margin:10px 10px 10px 0;text-decoration:none!important; font-weight:700;border-radius:5px; -webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px; -oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition: all .4s;-ms-transition:all .4s;-o-transition:all .4s;} .blue {background: #3498db;border-bottom: 3px solid #226693;} .blue:hover {background:#2980b9;} .green {background: #2ecc71;border-bottom: 3px solid #1F8C4C;} .green:hover {background: #27ae60;} .red {background: #e74c3c;border-bottom: 3px solid #922C20;} .red:hover {background:#c0392b;} .purple {background: #9b59b6; border-bottom: 3px solid #74398E;} .purple:hover {background:#8e44ad;} .seagreen {background: #1abc9c;border-bottom: 3px solid #127F69;} .seagreen:hover {background: #16a085;} .big {font-size:18px; padding:15px 20px;} .medium {font-size:15px; padding: 10px 15px;} .small {font-size:12px; padding:8px 10px;} </style> <!-- Flat UI Buttons By Www.BloggerYard.Com End --> |
KLIK "Simpan Template".
Instalasi Selesai!
Langkah 2.
Menambahkan Tombol UI Datar di Blogger
Sobat share dapat menggunakan tombol UI datar dimana saja di blog sobat share. Untuk itu, sobat share hanya perlu menyalin script tombol yang mana saja dan tempel dimana saja yang sobat share inginkan. Sekarang 1Shares akan memberikan script tombol dan juga akan memaparkan kepada sobat share bagaimana menggunakannya dalam postingan.
Pergi Ke Blogger >> Buat Posting Baru
KLIK "HTML" Tab
Copy Paste script tombol di bawah sesuai keinginan sobat share.
Big Size Buttons <a class="button blue big" href="#">Blue Button</a> <a class="button green big" href="#">Green Button</a> <a class="button red big" href="#">Red Button</a> <a class="button purple big" href="#">Purple Button</a> <a class="button seagreen big" href="#">SeaGreen </a> Medium Size Buttons <a class="button blue medium" href="#">Blue Button</a> <a class="button green medium" href="#">Green Button</a> <a class="button red medium" href="#">Red Button</a> <a class="button purple medium" href="#">Purple Button</a> <a class="button seagreen medium" href="#">SeaGreen</a> Small Size Buttons <a class="button blue small" href="#">Blue Button</a> <a class="button green small" href="#">Green Button</a> <a class="button red small" href="#">Red Button</a> <a class="button purple small" href="#">Purple Button</a> <a class="button seagreen small" href="#">SeaGreen </a> |
Script tombol dengan fitur tambahan (align+open in new tab )
<div style="text-align: center;">
<a class="button red big" href="#" target="_blank">Google +</a></div>
Ganti # dengan link yang diinginkan sobat share.
Ganti teks yang diwarnai dengan teks yang ingin sobat share tampilkan pada tombol itu.
Siapkan postingan dan publikasikan.
0 komentar:
Posting Komentar
Silahkan tuliskan komentar anda sesuai dengan artikel yang ada.