Cara Pasang Tombol Add to Blogger Dengan Animasi Bubble


Tombol Add to Blogger Dengan Animasi Bubble merupakan tombol link akses langsung menambahkan widget blogger ke halaman blog penambah widget pengunjung, jadi widget yang dibagikan bisa langsung ada di kotak penambah widget pengunjung blog tanpa perlu proses copy-paste. Pengunjung blog akan dimudahkan untuk proses pemasangan widget yang disediakan pada blog anda.

Bagi anda yang memiliki website atau blog dengan niche tips n trick, tutorial ataupun widget blogger, memasang tombol Add to Blogger akan semakin memberikan kemudahan untuk pengunjung blog anda. Contoh Tombol Add to Blogger Dengan Animasi Bubble seperti yang terlihat di bawah ini.


Tombol Add to Blogger Dengan Animasi Bubble ini memiliki tampilan yang dinamis dengan penggunaan pure CSS3 untuk menampilkan animasi bubble dan animasi rotate hover. Tombol ini menggunakan sedikit sentuhan JQuery untuk mempermudah pemasangan tombol pada halaman artikel. Penjelasan lebih lanjut agar link bisa langsung akses ke kotak penambah widget blog ada bab selanjutnya.

Bagi sobat blogger yang tertarik untuk memasang Tombol Add to Blogger Dengan Animasi Bubble ini silakan disimak tutorial pemasangannya.

Informasi Singkat
jQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML. Dewasa ini, jQuery merupakan pustaka JavaScript yang paling populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. jQuery adalah gratis, dan bersifat kode sumber terbuka dibawah lisensi MIT.

Sintaks pada jQuery didesain untuk memudahkan dalam navigasi sebuah dokumen, pemilihan elemen DOM, pembuatan animasi, penanganan event, dan pengembangan aplikasi berbasis Ajax. jQuery juga menyediakan kemampuan bagi para pengembang untuk dapat membuat plug-in pada pustaka JavaScript ini. Ini memungkinan mereka untuk membuat abstraksi pada interaksi dan animasi tingkat-rendah, efek lanjutan, serta tampilan widget yang dapat dimodifikasi. Pendekatan modular pada jQuery memungkinkan kita dalam pembuatan halaman Web yang dinamis dan aplikasi berbasis Web yang ajib.

Sekumpulan fitur inti jQuery—yakni pemilihan elemen DOM, transferal dan manipulasi—dimungkinkan berkat adanya selector engine yang bernama Sizzle (sejak versi 1.3), yang membuat sebuah "gaya pemrograman baru", memadukan antara algoritme dan data struktur DOM. Gaya ini dipengaruhi oleh arsitektur JavaScript lainnya seperti YUI v3 dan Dojo, yang nantinya menstimulasi pembuatan standar Selector API.

Microsoft dan Nokia membundle jQuery pada platform mereka. Microsoft mengikut sertakannya dengan Visual Studio di dalam pembuatan ASP.NET AJAX dan framework ASP.NET MVC miliknya. Sementara itu, Nokia meng-integrasikannya di dalam platform pengembangan widget Web Run-Time. jQuery juga telah digunakan di MediaWiki sejak versi 1.16.
Sumber : Wikipedia


DAFTAR ISI
  1. Cara Pemasangan Widget Pada Blogger
  2. Cara Penggunaan Tombol Widget
  3. Tips & Trik Penggunaan Tombol Add to Blogger
  4. Penggunaan Javascript untuk Otomatisasi Data Textarea
  5. Merubah Kode Pasif Menjadi Aktif Secara Otomatis
  6. Bonus Artikel [Kode Sumber]
#1 Cara Pemasangan Widget Pada Blogger


PERINGATAN
Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.
  • Silakan login dahulu ke blog Anda.

  • Klik tombol Tema untuk masuk ke tema editor.


  • Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.


  • Geser scrollbar ke posisi paling bawah.


  • Letakan kode dibawah ini tepat diatas kode </body>.


    <style>
    .btn-bubble {
    color: white;
    background-color: #0a3a75;
    background-repeat: no-repeat;
    }
    .btn-bubble:hover, .btn-bubble:focus {
    -webkit-animation: bubbles 1s forwards ease-out;
    animation: bubbles 1s forwards ease-out;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 37% 116% / 1.14em 1.14em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 0% 85% / 0.8em 0.8em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 106% 81% / 0.68em 0.68em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 105% 141% / 1.07em 1.07em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) -3% 146% / 1.18em 1.18em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 106% 116% / 0.96em 0.96em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 105% 125% / 0.97em 0.97em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 47% 91% / 1.17em 1.17em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 67% 130% / 1.09em 1.09em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) -8% 145% / 0.67em 0.67em, radial-gradient(circle at center, rgba(0, 0, 0, 0) 30%, #eeeeff 60%, #eeeeff 65%, rgba(0, 0, 0, 0) 70%) 75% 139% / 0.89em 0.89em;
    background-color: #0a3a75;
    background-repeat: no-repeat;
    }
    @-webkit-keyframes bubbles {
    100%{
    background-position: 39% -70%, -8% -165%, 109% 8%, 111% -116%, 0% -240%, 114% -321%, 103% -113%, 47% -66%, 73% -173%, -18% 17%, 79% -398%;
    box-shadow: inset 0 -6.5em 0 #0072c4;
    }}
    @keyframes bubbles {
    100%{
    background-position: 39% -70%, -8% -165%, 109% 8%, 111% -116%, 0% -240%, 114% -321%, 103% -113%, 47% -66%, 73% -173%, -18% 17%, 79% -398%;
    box-shadow: inset 0 -6.5em 0 #0072c4;
    }}
    @-webkit-keyframes rotate-vert-center {
    0%{
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    }
    100%{
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
    }}
    @keyframes rotate-vert-center {
    0%{
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    }
    100%{
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
    }}
    .btn-blogger {
    text-decoration: none;
    padding: 0px 5px 0px 0px;
    border-radius:5px;
    border:1px solid #0072c4;
    cursor:pointer;
    }
    .btn-blogger:active{border-color:#000;}
    .img-blogger-text{font-size:1.2em;float:left;padding:6px 0 0 0;transition:color .2s linear;}
    .img-blogger,.btn-blogger{height:40px;}
    .img-blogger{
    margin:0;
    width:40px;
    float:left;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnPaoUpVZZ7kIOQDnd6Vf1pybYq02aIWCyLZIfZHgtbufts3pRjqUeLE462-9lphaHFcU5kmr2R3Ec86E0FU3DzKyAYrC7ceJFgvxqhgTxgON7gre_PCZdy2PynFCIugb9TfLpWYhVL_Q/s1600/blue-jelly-blogger.png);
    background-color:#333;
    background-repeat:no-repeat;
    background-size:30px 30px;
    background-position:center center;
    border-radius:5px 0 0 5px;
    margin-right:5px;
    transition:background-color .5s linear .2s;
    }
    .btn-widget{
    padding:1px;
    display: inline-block;
    margin:5px;
    padding:0;
    border-radius:5px;
    text-decoration:none;
    box-shadow:0px 0px 0px 0px #000;
    transition:box-shadow .5s ease;
    }
    .btn-widget:hover{box-shadow:0px 0px 10px 0px orange;}
    .btn-blogger:hover > .img-blogger-text{color:yellow;}
    .btn-blogger:hover > .img-blogger{
    background-color:#ffda00;
    -webkit-animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    }
    </style>

    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){
    if($(".btn-widget").length){setElementBtnBloggerType();}
    function setElementBtnBloggerType(){
    var a = document.getElementsByClassName('btn-widget');
    var h = ''; var g = '';
    for (var i=0;i < a.length;i++){
    var $newdiv1 = $('<div class="btn-blogger btn-bubble"><div class="img-blogger"/><div class="img-blogger-text">Add to Blogger</div></div>');
    $(a[i]).html($newdiv1);
    }}
    });
    //]]>
    </script>

    KETERANGAN

    Jika dirasa ada yang perlu disesuaikan silakan anda rubah kode CSS di atas agar bisa sesuai dengan tema website atau tema blog anda. Pada kode CSS di atas anda bisa merubah warna latar, bentuk huruf, kode animasi dan lainnya.

#2 Cara Penggunaan Tombol Widget


Setelah memasang kode CSS dan kode Javascript di atas maka langkah berikutnya adalah cara penggunaan dari widget tombol Add to Blogger ini. Berikut contoh penggunaan tombol.

  • Syntax Dasar

    <a href="#" class="btn-widget"></a>

    Pada kode HTML di atas merupakan syntax dasar untuk menampilkan Tombol Add to Blogger, anda bisa menggunakan sebagai link langsung akan tetapi untuk bisa menaruh kode widget pada halaman penambah kotak widget blogger maka diperlukan beberapa parameter kode elemen tambahan.

  • Kode HTML untuk Penambah Widget

    <form name="widgetform" action="//www.blogger.com/add-widget" method="post" target="_blank">
    <input name="widget.title" value="" type="hidden">
    <input name="infoUrl" value="//floodcode.blogspot.com/" type="hidden">
    <input name="logoUrl" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgePL-GxzRrRj06YOIlWS5u3tvN-pc9qQ-CqYCxq3RHmE7HyYio9svN9xFON4QGDb-3WkerHxHdwLLMYyuFPxatzqxnw4Pn-4cToaAm_skqZRkmu5VW-ZnS1-hlA-WUWd4lbaV5mLyEfvY/s1600/logo-codeflare-16px.png" type="hidden">
    <textarea id="widgetcontent" name="widget.content" readonly style="display:inline-block;box-sizing:border-box;width:100%;height:300px;">

    Taruh kode aktif script widget disini tanpa perlu di parsing...

    </textarea>
    <div style="text-align: right;">
    <a href="Javascript:{}" onclick="document.widgetform.submit();" name="go" class="btn-widget"></a>
    </div>
    </form>

    Anda bisa langsung menaruh kode aktif script widget tanpa perlu di parsing karena kode yang akan anda bagikan akan berada di dalam elemen <textarea> sehingga kode aktif tersebut tidak akan di render oleh browser (menjadi tidak aktif). Apabila anda memasukan kode yang di parsing (kode pasif) maka kode widget yang anda bagikan tidak akan berjalan pada widget blog pengunjung blog anda.

    Pada kode :
    <input name="infoUrl" value="//floodcode.blogspot.com/" type="hidden">

    Silakan anda rubah floodcode.blogspot.com dengan alamat URL blog anda.

    Pada kode :
    <input name="logoUrl" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgePL-GxzRrRj06YOIlWS5u3tvN-pc9qQ-CqYCxq3RHmE7HyYio9svN9xFON4QGDb-3WkerHxHdwLLMYyuFPxatzqxnw4Pn-4cToaAm_skqZRkmu5VW-ZnS1-hlA-WUWd4lbaV5mLyEfvY/s1600/logo-codeflare-16px.png" type="hidden">

    Silakan anda rubah value URL gambar logo dengan URL gambar logo blog anda. Pastikan anda menggunakan gambar logo dengan dimensi 16px sampai 24px agar gambar logo yang ditampilkan bisa sesuai.

    Semua link URL harus menggunakan protokol https:// agar tidak diblokir oleh browser modern.

#3 Tips & Trik Penggunaan Tombol Add to Blogger


Apabila anda menggunakan code box viewer bawaan template blog maka agar kode widget yang di bagikan tidak terlihat dua kali maka pada elemen textarea anda cukup merubah kode style elemen textarea menjadi style="display:none;" atau gunakan saja kode lengkapnya yang di bawah ini.

<form name="widgetform" action="//www.blogger.com/add-widget" method="post" target="_blank">
<input name="widget.title" value="" type="hidden">
<input name="infoUrl" value="//floodcode.blogspot.com/" type="hidden">
<input name="logoUrl" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgePL-GxzRrRj06YOIlWS5u3tvN-pc9qQ-CqYCxq3RHmE7HyYio9svN9xFON4QGDb-3WkerHxHdwLLMYyuFPxatzqxnw4Pn-4cToaAm_skqZRkmu5VW-ZnS1-hlA-WUWd4lbaV5mLyEfvY/s1600/logo-codeflare-16px.png" type="hidden">
<textarea id="widgetcontent" name="widget.content" readonly style="display:none;">

Taruh kode aktif script widget disini tanpa perlu di parsing...

</textarea>
<div style="text-align: right;">
<a href="Javascript:{}" onclick="document.widgetform.submit();" name="go" class="btn-widget"></a>
</div>
</form>

#4 Penggunaan Javascript untuk Otomatisasi Data Textarea


Oke masih sama dengan pembahasan Bab 3, bedanya cuma tambahan kode javascript untuk memudahkan penggunaan Tombol Add to Blogger Dengan Animasi Bubble. Agar anda tidak dua kali menuliskan kode widget yang akan dibagikan silakan anda gunakan kode script dibawah ini dan letakan tepat di bawah elemen </form>.

<script>
function getWidgetDataContent(elm){
var a="";var b="";
a=$(elm).text();
$("#widgetcontent").val(b);
document.widgetform.submit();
}
</script>

KETERANGAN

Oke yang perlu anda perhatikan adalah elemen ID yang akan digunakan pada kode tersebut, silakan anda gunakan elemen ID dari penampil kotak kode anda. Kode diatas hanya untuk satu penampil kotak kode, apabila anda ingin menggunakan lebih dari satu di halaman artikel blog maka script dan keseluruhan kode perlu sedikit modifikasi. Jika anda mahir dengan javascript dan JQuery silakan anda modifikasi sendiri kode script tersebut sesuai kebutuhan.

Apabila anda belum mahir dengan javascript silakan anda gunakan kode lengkap dibawah ini.

<form name="widgetform" action="//www.blogger.com/add-widget" method="post" target="_blank">
<input name="widget.title" value="" type="hidden">
<input name="infoUrl" value="//floodcode.blogspot.com/" type="hidden">
<input name="logoUrl" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgePL-GxzRrRj06YOIlWS5u3tvN-pc9qQ-CqYCxq3RHmE7HyYio9svN9xFON4QGDb-3WkerHxHdwLLMYyuFPxatzqxnw4Pn-4cToaAm_skqZRkmu5VW-ZnS1-hlA-WUWd4lbaV5mLyEfvY/s1600/logo-codeflare-16px.png" type="hidden">
<textarea id="widgetcontent" name="widget.content" readonly style="display:none;">

Taruh kode aktif script atau dikosongkan saja...

</textarea>
<div style="text-align: right;">
<a href="Javascript:{}" onclick="getWidgetDataContent('#codeForm0');" name="go" class="btn-widget"></a>
</div>
</form>
<script>
function getWidgetDataContent(elm){
var a="";var b="";
a=$(elm).text();
$("#widgetcontent").val(b);
document.widgetform.submit();
}
</script>

KETERANGAN

Anda cukup menaruh kode untuk form dan script diatas satu kali saja pada halaman artikel yang ingin digunakan tombol Add to Blogger ini. Apabila ingin menaruh link tombol lebih dari satu pada satu halaman artikel, maka anda cukup menaruh kode link tombol saja tanpa perlu menulis kode form dan script tersebut secara keseluruhan.

Kode Link Tombol Add to Blogger :

<a href="Javascript:{}" onclick="getWidgetDataContent('#codeForm0');" name="go" class="btn-widget"></a>

Selanjutnya yang perlu diperhatikan adalah baris kode :
onclick="getWidgetDataContent('#codeForm0');"

Apabila menggunakan lebih dari satu atau dua maka anda cukup merubah elemen ID (contoh: #codeForm0) dari kotak tempat kode anda untuk memudahkan penggunaan silakan anda sesuaikan dengan nama elemen ID kotak tempat kode anda. Penggunaan karakter hastag (#) adalah untuk menunjukan bahwa elemen merupakan elemen ID.

#5 Merubah Kode Pasif Menjadi Aktif Secara Otomatis


Kebanyakan template website atau blog memakai code viewer menggunakan elemen <code>, <pre>, <div> dan elemen lainnya. Selain elemen <textarea> sudah dipastikan kode widget yang akan anda bagikan sudah berbentuk kode pasif, supaya kode widget yang akan anda bagikan bisa dalam bentuk kode aktif silakan anda gunakan beberapa metode penggunaan javascript untuk secara otomatis memasukan kode widget yang terparsing menjadi kode aktif dan langsung ditaruh di dalam elemen <textarea>.

  • Regular Expression Sederhana

    <script>
    function getWidgetDataContent(elm){
    var a="";var b="";
    a=$(elm).text();
    b=a.replace("&lt;", "<");
    b=b.replace("&gt;", ">");
    b=b.replace("&amp;", "&");
    b=b.replace("&quot;", "\"");
    b=b.replace("&#39;", "'");
    b=b.replace("<br />", "\n");
    b=b.replace("<br>", "\n");
    $("#widgetcontent").val(b);
    document.widgetform.submit();
    }
    </script>

    Kode script diatas merupakan gabungan antara kode pengambil data dari code viewer digabungkan dengan kode un-parsing sederhana, anda masih bisa menambahkan kode un-parsing sesuai dengan yang anda butuhkan. Misalnya kode un-parsing diatas ingin ditambahkan untuk mengubah karakter kode tertentu anda cukup menambahkan baris kode seperti berikut ini.

    Contoh :
    b=b.replace("&#91;", "[");
    b=b.replace("&#93;", "]");

    Karakter &#91; merupakan karakter untuk kode pasif sedang karakter [ merupakan karakter untuk kode aktif. Jadi apabila digabungkan dengan kode di atas maka contoh bentuk kodenya seperti ini.

    <script>
    function getWidgetDataContent(elm){
    var a="";var b="";
    a=$(elm).text();
    b=a.replace("&lt;", "<");
    b=b.replace("&gt;", ">");
    b=b.replace("&amp;", "&");
    b=b.replace("&quot;", "\"");
    b=b.replace("&#39;", "'");
    b=b.replace("<br />", "\n");
    b=b.replace("<br>", "\n");

    /* Penambahan Kode */
    b=b.replace("&#91;", "[");
    b=b.replace("&#93;", "]");
    /* Penambahan Kode */

    $("#widgetcontent").val(b);
    document.widgetform.submit();
    }
    </script>

    Baiklah saya kira untuk Regular Expression sederhana ini sudah cukup jelas, apabila masih ada yang membingungkan silakan ditanyakan pada kotak komentar di bawah.

  • Regular Expression Tambahan

    Jika pada kode widget yang akan anda bagikan (share) memiliki kode encrypt URI maka agar bisa dirubah menjadi kode aktif perlu sedikit tambahan baris kode seperti berikut ini.

    <script>
    function getWidgetDataContent(elm){
    var a="";var b="";
    a=$(elm).text();

    /* Decrypt URI Kode */
    b=decodeURI(a);
    /* Decrypt URI Kode */

    b=a.replace("&lt;", "<");
    b=b.replace("&gt;", ">");
    b=b.replace("&amp;", "&");
    b=b.replace("&quot;", "\"");
    b=b.replace("&#39;", "'");
    b=b.replace("<br />", "\n");
    b=b.replace("<br>", "\n");

    /* Penambahan Kode */
    b=b.replace("&#91;", "[");
    b=b.replace("&#93;", "]");
    /* Penambahan Kode */

    $("#widgetcontent").val(b);
    document.widgetform.submit();
    }
    </script>

    Tujuan menaruh baris kode b=decodeURI(a); setelah kode variabel a adalah agar kode script yang diambil dari code viewer (elemen penampil kode) di decrypt terlebih dahulu dan tidak terjadi kesalahan pada saat proses un-parsing.

  • Regular Expression Kompleks

    Jika kode widget yang akan dibagikan memiliki struktur kode yang kompleks (rumit) maka anda dapat menggunakan webtools online yang banyak disediakan secara gratis. Salah satu webtools online untuk proses parsing maupun un-parsing buatan codeflare yaitu MIFET (Multiple Function Web Tools) anda dapat mengunjungi halaman MIFET pada tombol link berikut ini. MIFET

#6 Bonus Artikel [Kode Sumber]


Bonus artikel kali ini adalah kode sumber yang bisa anda download untuk secara gratis, seperti biasa silakan anda klik tombol share yang ada dibawah ini untuk bisa membuka link download. File download berupa file HTML yang bisa anda lihat dan buka melalui teks editor sederhana seperti notepad, notepad++, wordpad, microsoft word dan lain sebagainya.


Keyword


Blog, Blogger, Blogspot, Button, Add, to, Blogger, Automatic, Widget, Code, Script, HTML, CSS, Share, Installed, Plugin, Tombol, Otomatis, Bagikan, Kode, Link, Hyperlink, auto, tambah, pasang, cara, buat, unik, menarik, animasi, bubble

Incoming Search Term


Cara Memasang Tombol Add To Blogger, Cara Membuat Tombol Bagikan Ke Widget Blogger, Tombol Otomatis Pasang Widget Blogger, Button Add to Blogger Script, Link Auto Add to Blogger Button, Share to Widget Blogspot, Free Add to Blogger, Pasang Tombol Link Widget Blog
edit Tags: Blogspot, CSS, Tips&Trick, Widget

Related Cara Pasang Tombol Add to Blogger Dengan Animasi Bubble:

LihatTutupKomentar