Pada artikel ini kami akan menunjukkan cara membuat widget (segmen kode) sehingga pengunjung Anda hanya perlu menekan tombol untuk menambahkan tautan ke blog Anda sendiri.

LIVE DEMO

1. Buka tab "Tata Letak"
2. Tambahkan elemen "HTML / Javascript" di bagian Anda ingin memiliki tombol.
3. Tetapkan judul sebagai "Tambahkan kami", atau teks apa pun yang Anda inginkan untuk tombol tersebut. Anda dapat membiarkannya kosong juga, itu akan menambahkan beberapa teks standar.
4. Rekatkan kode berikut di bidang "Konten":
5. 
   

<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">

<input value="" name="widget.title" type="hidden" />

<textarea style="display: none;" name="widget.content">

<!-- Link's code -->

<a href="http://YOURBLOG.blogspot.com">TU BLOG</a>

Di sini Anda harus membuat beberapa perubahan: http://YOURBLOG.blogspot.com - Alamat blog Anda.BLOG ANDA - Nama blog Anda atau kode gambar. Ini akan ditampilkan di Blogroll dari orang yang menambahkan Anda. Tambahkan YOURBLOG ke Blogroll - Pesan yang ingin Anda tampilkan di tombol.Kode ini berfungsi untuk CMS atau web lain, tetapi hanya dapat ditambahkan oleh pengguna Blogger.Simpan perubahan dan selesai.

Letakkan di tempat  <form> Anda menentukan URL target yang diinginkan dalam  action atribut.

<form action="http://google.com">
    <input type="submit" value="Go to Google">
</form>

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

 Penampilan sampel Bootstrap (v2) :

<button onclick="location.href='http://www.example.com'">
     www.example.com</button>

<a href="http://www.stackoverflow.com/">
    <button>click me</button>
</a>

Sunting 22-06-2013:  Markup ini tidak lagi valid dalam HTML5 dan tidak akan memvalidasi atau selalu berfungsi seperti yang diharapkan. Gunakan pendekatan lain.

<form>
<input TYPE="button" VALUE="Home Page"
     onclick="window.location.href='http://www.wherever.com'"> 
</form>

Cobalah

LIVE DEMO

Cara Memasang Widget Ini Di Blogger:

• Masuk ke Blogger → Dasbor
• Klik pada Drop Down Menu dan pilih  Layout
• Tambahkan  HTML / JavaScript  Gadget
• Rekatkan kode di bawah ini di dalamnya

<style type = "text / css">
ul.rcentside * {- ukuran kotak-moz: kotak-batas; -webkit-kotak-ukuran: kotak-batas; ukuran-kotak: kotak-batas}
ul.rcentside {font: normal normal 11px Verdana, Geneva, sans-serif}
ul.rcentside, ul.rcentside li {margin: 0; padding: 0; gaya daftar: tidak ada; posisi: relatif}
ul.rcentside {width: 100%; tinggi: 500px}
ul.rcentside li {height: 24.5%; posisi: absolut; padding: 0; lebar: 49.5%; float: kiri; overflow: tersembunyi; tampilan: tidak ada}
ul.rcentside li: nth-child (1), ul.rcentside li: nth-child (2), ul.rcentside li: nth-child (3), ul.rcentside li: nth-child (4) {display: blok}
ul.rcentside img {border: 0; lebar: 100%; tinggi: 100%}
ul.rcentside li: nth-child (1) {width: 100%; tinggi: 49,5%; margin: 0 0 2px; kiri: 0; atas: 0}
ul.rcentside li: nth-child (2) {kiri: 0; atas: 50%}
ul.rcentside li: nth-child (3) {kiri: 50.5%; atas: 50%}
ul.rcentside li: nth-child (4) {width: 100%; kiri: 0; atas: 75%}
ul.rcentside .overlayx, ul.rcentside li {-webkit-transition: all .4s easy-in-out; -moz-transition: all .4s easy-in-out; -o-transisi: all .4s easy-in -out; -ms-transisi: semua .4s kemudahan masuk; transisi: semua .4s mudah keluar}
ul.rcentside .overlayx {width: 100%; tinggi: 100%; posisi: absolut; z-indeks: 2; kiri: 0; atas: 0; gambar latar belakang: url (http: //1.bp.blogspot. com / -FtnGJHMcWH8 / UIV3IE-aaJI / AAAAAAAAGHs / WvLypnWxg5A / s1600 / linebg-fade.png); posisi latar belakang: 50% 50%; latar belakang-ulang: ulangi-x}
ul.rcentside .overlayx, ul.rcentside img {border: 4px solid # 000000; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px}
ul.rcentside li: nth-child (1) .overlayx {posisi latar: 50% 25%}
ul.rcentside .overlayx: hover {-ms-filter: "progid: DXImageTransform.Microsoft. Alpha (Opacity = 10)"; filter: alpha (opacity = 10); - khtml-opacity: 0.1; -moz-opacity: 0.1 ; opacity: 0,1}
ul.rcentside h4 {posisi: absolut; bawah: 30px; z-indeks: 2; warna: putih; margin: 0; lebar: 100%; bantalan: 0 10px; tinggi baris: 1.5em; font-family: Georgia, Times, "Times New Roman"; font-weight: normal}
ul.rcentside li: nth-child (1) h4, ul.rcentside li: nth-child (4) h4 {ukuran font: 150%}
ul.rcentside .label_text {position: absolute; bawah: 10px; kiri: 10px; z-indeks: 2; warna: putih; ukuran font: 90%}
ul.rcentside li: nth-child (2) .autname, ul.rcentside li: nth-child (3) .autname {display: none}
.buttons {margin: 5px 0 0}
.buttons a {display: inline-block; text-indent: -9999px; lebar: 15px; tinggi: 25px; posisi: relatif}
.buttons a :: before {content: ""; width: 0; tinggi: 0; border-width: 8px 7px; gaya perbatasan: solid; warna batas: transparan # 535353 transparan transparan; posisi: absolut; atas: 50 %; margin-top: -8px; margin-kiri: -10px; kiri: 50%}
.buttons a.nextx :: before {border-color: transparan transparan transparan # 535353; margin-left: -3px}
</style>
<div id = "Featurepostside"> </div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type = "text / javascript"> </script>
<script src = "http://makingdifferent.github.io/blogger-widgets/featuredposts.js" type = "text / javascript"> </script>
<script type = 'text / javascript'>
// <! [CDATA [
FeaturedPostSide ({
blogURL: "http://ajaxnavbar.blogspot.com/",
 MaxPost: 30,
 idcontaint: "# Featuredpostside",
 ImageSize: 350,
 interval: 5000,
 putar otomatis: true,
 tagName: false
});
//]]>
</script> 

Tambahkan URL blog Anda dan Anda selesai!

7 Alat Wireframe Gratis dan Sumber Terbuka untuk Mengoptimalkan Pengalaman Pengguna

1 14 58 5 3

Diperbarui 6/13/2018: Posting ini telah diperbarui untuk menyertakan lebih banyak alat rangka gambar gratis di pasar dan untuk mengecualikan alat bingkai gambar yang tidak lagi menawarkan versi gratis.

Beberapa orang suka kejutan. Mereka suka melompat ke hal-hal tanpa rencana dan melihat bagaimana kelanjutannya.

Meskipun itu mungkin merupakan pendekatan yang menyenangkan untuk memanfaatkan hari ini atau berkeliling dunia, saya dapat memberitahu Anda satu hal yang sama sekali tidak baik untuk: membuat situs web.

Bahkan situs web yang paling sederhana melibatkan banyak bagian yang bergerak. Tetapi jika situs Anda terlalu rumit untuk dinavigasi, pelanggan Anda akan segera pergi , yang berarti Anda akan kehilangan penjualan dan kesempatan untuk terlibat dengan pelanggan potensial.

Salah satu cara untuk membuat situs berpenampilan menarik yang akan disukai pengguna Anda adalah dengan meringkasnya sebelum menyentuh potongan kode apa pun di editor HTML favorit Anda .

Jika Anda bekerja dengan tim untuk mendesain sebuah situs, aplikasi, atau bahkan satu halaman web, sebuah wireframe juga dapat berfungsi sebagai cara untuk mengomunikasikan dengan tepat seperti apa tampilan situs Anda tanpa melalui kerumitan pengkodean prototipe.

Pada akhirnya, memulai dengan bingkai gambar dapat menghemat waktu kerja Anda di backend. Dan itu taruhan terbaik Anda jika Anda ingin memberikan pengunjung situs Anda dengan pengalaman pengguna sebaik mungkin.

Berita baiknya adalah Anda tidak perlu menjadi pengembang untuk membangun satu atau menjatuhkan banyak uang untuk membuat perangkat lunak mewah. Ada beberapa sistem wireframe gratis di luar sana, dan saya akan memandu Anda melalui beberapa opsi tanpa biaya di bawah ini.

7 alat wireframe sumber gratis dan terbuka

Alat wireframe open source gratis dan termasuk dalam posting ini semua menawarkan opsi "gratis selamanya", jadi tidak perlu mengeluarkan kartu kredit Anda untuk mereka, bahkan di masa depan.

Seperti kebanyakan sistem gratis, pertukaran adalah bahwa Anda mungkin akan mendapatkan versi terbatas dari sistem berbayar, jadi saya mencoba untuk menguraikan di mana Anda mungkin mengalami hambatan.

Sistem terdaftar sesuai dengan jumlah ulasan pengguna yang mereka miliki di Capterra pada saat publikasi, tertinggi ke terendah.

1. Lucidchart

(536 ulasan, 4,5 bintang di Capterra)

Gambar rangka di Lucidchart ( Sumber )

Lucidchart adalah pembangun wireframe berfitur lengkap dan alat desain UI. Ini menawarkan kolaborasi mudah pada bingkai gambar, memungkinkan banyak orang untuk mengedit gambar rangka yang sama secara bersamaan. Ini juga memiliki add-on Chrome yang memudahkan untuk menambahkan diagram Lucidchart ke Google Docs atau Sheets, jika di situlah tim Anda terbiasa bekerja.

Apa yang dikatakan pengulas Capterra : Para pengulas menyukai kenyataan bahwa sistem ini berbasis cloud, terintegrasi dengan banyak produk lain yang biasa digunakan, dan menawarkan sejumlah templat untuk membantu Anda memulai desain Anda. Namun, mereka ingin sistem menjadi lebih intuitif, serta kemampuan untuk menyesuaikan ruang kerja mereka. Mereka juga mencatat bahwa sistem terkadang terasa kikuk dan lamban.

Batasan versi gratis:

• Satu pengguna
• Proyek terbatas pada 60 objek

Biaya untuk meningkatkan: Paket Lucidchart dengan harga terendah mulai dari sekitar $ 5 per bulan, untuk satu pengguna. Rencana tim mulai dari $ 20 per bulan.

Sudahkah Anda menggunakan Lucidchart? Berikan ulasan !

2. InVision

(123 ulasan, 4,5 bintang di Capterra)

Anda dapat membangun "Papan Inspirasi" di InVision untuk menyimpan ide desain di satu tempat ( Sumber )

Anda dapat menggunakan solusi berbasis cloud InVision untuk mendesain dan menggunakan wireframe aplikasi seluler dan situs desktop, serta membuat dokumentasi arsitektur dan memvisualisasikan aliran navigasi. Alat kolaborasi bawaannya memungkinkan Anda menerima umpan balik dari rekan setim Anda, dan prototipe interaktifnya memungkinkan penguji menavigasi aplikasi atau halaman web Anda secara realistis.

Apa yang dikatakan pengulas Capterra :Pengguna menyukai antarmuka IntVision yang ramping dan intuitif. Mereka juga menyukai kemampuan untuk membuat prototipe yang terlihat profesional, dengan kesetiaan tinggi — yang menurut laporan bagus untuk dipresentasikan kepada klien — dan kemudahan yang dapat digunakan pengguna untuk melihat dan melihat umpan balik. Pengguna memang mencatat, bagaimanapun, bahwa sistem dapat meningkatkan kemampuan animasinya. Mereka juga menyebutkan bahwa, kadang-kadang, prototipe terlihat berbeda di sistem lain daripada yang mereka lakukan di InVision.

Batasan versi gratis:

• Satu prototipe
• Satu pengguna

Biaya untuk meningkatkan: Paket InVision termurah harganya $ 15 per bulan dan memberikan ruang hingga tiga prototipe.

Sudahkah Anda menggunakan InVision? Berikan ulasan !

3. Moqups

(11 ulasan, 4,5 bintang di Capterra)

Papan desain dan bentuk perpustakaan di Moqups ( Sumber )

Moqup adalah pilihan desain berbasis cloud lainnya yang dilengkapi dengan perpustakaan lengkap stensil dan set ikon. Ini menawarkan kemampuan untuk mengimpor gambar Anda sendiri agar sesuai dengan tampilan dan nuansa situs Anda. Editor drag-and-drop memungkinkan tim Anda untuk secara intuitif merancang gambar rangka situs, flowchart, dan storyboard.

Apa yang dikatakan pengulas Capterra :Pengguna menyukai fungsionalitas drag-and-drop yang mudah, antarmuka sistem yang bersih dan intuitif, dan kemudahan yang dapat digunakan untuk berbagi desain dengan pengembang dan klien. Mereka berharap, bagaimanapun, bahwa sistem menawarkan lebih banyak objek untuk dipilih dan ingin melihat opsi offline dari perusahaan di masa depan.

Batasan versi gratis:

• Satu proyek
• 300 batas objek
• Penyimpanan 5 MB

Biaya untuk meningkatkan: Paket Moqup dengan harga terendah menghabiskan biaya $ 13 per bulan, untuk satu pengguna dan proyek tanpa batas.

Sudahkah Anda menggunakan Moqup? Berikan ulasan !

4. Wireframe.cc

(5 ulasan, 4 bintang di Capterra)

Proyek wireframe di Wireframe.cc ( Sumber )

Wireframe.cc adalah pilihan tepat bagi orang yang menginginkan antarmuka pengguna yang sederhana dan tidak berantakan. Alih-alih bilah alat, Wireframe.cc menawarkan opsi yang muncul saat Anda membutuhkannya dan tetap tersembunyi saat Anda tidak membutuhkannya. Anda dapat berbagi gambar rangka langsung dengan seluruh tim Anda untuk pengeditan kolaboratif, dan siapa pun yang memiliki tautan dapat mengomentari gambar rangka gambar, meskipun membuka kunci fungsi ini memerlukan peningkatan.

Apa yang dikatakan pengulas Capterra :Pengguna cepat mengetahui bahwa UI minimalis bagus untuk membuat maket kesetiaan rendah, tetapi jika Anda mencari yang lebih dari itu, versi gratis Wireframe.cc mungkin bukan untuk Anda. Pengguna juga berharap ada lebih banyak tutorial online yang menunjukkan cara memulai sistem.

Batasan versi gratis:

• Tidak ada akun pengguna
• Semua gambar rangka Anda bersifat publik
• Wireframes terbatas pada satu halaman

Biaya untuk meningkatkan: versi premium Wireframe.cc mulai dari $ 16 per bulan untuk satu pengguna dan proyek tanpa batas.

Sudahkah Anda menggunakan Wireframe.cc? Berikan ulasan !

5. MockFlow

(3 ulasan, 2,5 bintang di Capterra)

Editor wireframe Mockflow ( Sumber )

MockFlow menawarkan seluruh perpustakaan desain templat untuk membantu Anda membuat cetak biru antarmuka situs web dan aplikasi, peta situs, dan banyak lagi. Anda juga dapat memilih dari templat, tata letak, dan komponen pihak ketiga. Koleksi gambar dan komponen termasuk formulir, elemen navigasi, bentuk, dan ikon, sehingga Anda dapat menampilkan berbagai elemen dalam maket dan gambar rangka Anda.

Apa yang dikatakan pengulas Capterra : Hanya satu pengulas meninggalkan penjelasan tentang ulasan mereka, tetapi mereka memiliki beberapa hal baik untuk dikatakan tentang sistem. Menurut ulasan ini, versi gratis MockFlow menawarkan banyak fungsi dan mudah digunakan. Namun, tampaknya ada beberapa bug dalam sistem yang belum diperbaiki.

Batasan versi gratis:

• Satu proyek
• Hingga dua pengulas
• Akses perpustakaan terbatas dan integrasi dengan solusi pihak ketiga

Biaya untuk meningkatkan: Paket MockFlow dibayar mulai dari $ 14 per bulan, untuk satu pengguna dan proyek tanpa batas.

Sudahkah Anda menggunakan MockFlow? Berikan ulasan !

6. Fluid UI

(Tidak ada ulasan atau peringkat di Capterra)

Alat desain Fluid UI ( Sumber )

Solusi wireframing berbasis cloud dari Fluid UI menawarkan kepada desainer perpustakaan lebih dari 2.000 elemen. Anda dapat membuat prototipe interaktif dan membuat animasi halaman untuk mendapatkan ide yang lebih baik tentang bagaimana produk akhir Anda akan terlihat dan terasa. Anda juga dapat menggunakan aplikasi Android dan iOS Fluid UI untuk melihat pratinjau prototipe Anda pada antarmuka seluler.

Apa yang dikatakan pengulas Capterra :UI Fluida belum memiliki ulasan tentang Capterra.

Batasan versi gratis:

• Satu proyek
• Sepuluh halaman
• Tidak ada kemampuan untuk mengunggah
• Terbatas pada perpustakaan gambar rangka
• Tidak ada kemampuan bagi anggota grup untuk meninggalkan komentar atau umpan balik

Biaya untuk meningkatkan: Upgrade ke paket Fluid UI termurah hanya $ 8,95 per bulan dan memberi Anda akses ke fitur desain yang lebih canggih, seperti transisi animasi. Untuk berkolaborasi dengan rekan kerja dan rekan setim, Anda harus meningkatkan ke rencana “Pro” Fluid UI, sekitar $ 19 per bulan.

Sudahkah Anda menggunakan Fluid UI? Berikan ulasan !

7. Pensil

(Tidak ada ulasan atau peringkat di Capterra)

Diagram dalam Pensil ( Sumber )

Pencil adalah satu-satunya alat wireframe berbasis desktop dalam daftar ini, dan itu open source, yang berarti bahwa setiap fitur tersedia untuk semua pengguna secara gratis. Terakhir diperbarui pada Juni 2017.

Sistem ini memungkinkan Anda membuat gambar rangka multi halaman dengan tautan antar halaman. Dan — bonus untuk webmaster Anda — ketika Anda mengekspor bingkai gambar Anda ke halaman web HTML, Pencil menjaga tautannya, sehingga Anda dapat berbagi maket aplikasi atau situs web lengkap dengan halaman yang terhubung. Pensil juga menawarkan sejumlah templat, pustaka bentuk, dan kemampuan untuk mengimpor objek eksternal. Anda dapat memanfaatkan stensil Android dan iOS sistem untuk desain untuk seluler.

Apa yang dikatakan pengulas Capterra :Pensil belum memiliki ulasan tentang Capterra.

Batasan versi gratis:

• Pensil adalah alat sumber terbuka, sehingga versi gratisnya berfitur lengkap.

Sudahkah Anda menggunakan Pensil? Berikan ulasan !

Alat apa yang Anda gunakan untuk penyadapan?

Tberikut adalah beberapa alat digital tanpa biaya yang memungkinkan Anda membuat gambar rangka dan mendapatkan umpan balik secara langsung. Jika tidak ada opsi wireframe ini yang terasa pas untuk Anda, Anda selalu dapat memeriksa salah satu dari 30+ opsi di direktori perangkat lunak wireframeCapterra .

Bagi Anda yang lebih suka alat kolaborasi digital untuk wireframing dan maket produk, mana yang menjadi favorit Anda? Apa yang Anda gunakan yang Anda sukai? Beri tahu saya di komentar di bawah.

Sumber daya bermanfaat lainnya:

• • Sebuah panduan untuk wireframing bagi mereka yang baru memulai.

• Statistik tentang UX seluler dari tim produk Capterra untuk mengingatkan Anda bahwa desain desktop seharusnya tidak menjadi fokus terbesar Anda.

Mencari perangkat lunak Manajemen TI? Lihatlah daftar Capterra tentang solusi perangkat lunak Manajemen TI terbaik .