×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Tombol React Love Dengan Count di Blogger

Cara Membuat Tombol React Love Dengan Count di Blogger

Anirocksite.com - Pada tutorial  blogger kali ini saya akan membagikan bagaimana caranya membuat tombol react love dengan count di blogger.

Tombol react love ini mirip seperti tombol react love yang mungkin sering kamu lihat disocial media seperti facebook, instagram dan berbagai social media lainnya. Menurut saya sendiri tombol react love ini sangat menarik dan fungsinya juga sama seperti kita memasang Feedback ataupun Rating Count Stars di akhir postingan blog.

Nah langsung saja kita ketutorial bagaimana cara membuat tombol react love dengan count diblogger.

Cara Membuat Tombol React Love Dengan Count di Blogger

1. Pertama, login terlebih dahulu ke Blogger,
2. Pada dashboard Blogger pilih Tema Edit HTML,
3. Kemudian, copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin> atau </style>,
.lovebutton-bloggerku {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 20px 0;
}

.lovebutton-bloggerku .inner {
    text-align: center;
    display: inline-table;
}

.lovebutton-bloggerku a {
    background: #fff;
    border: 1px solid #aaa;
    display: inline-block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    float: left;
    overflow: hidden;
    margin-right: 10px;
}

.lovebutton-bloggerku .icon {
    padding-top: 13px;
}

.lovebutton-bloggerku svg {
    fill: #aaa;
    transition: all 0.2s;
}

.lovebutton-bloggerku a:hover svg {
    fill: #666;
}

.lovebutton-bloggerku a .active svg {
    fill: #F44336;
}

.lovebutton-bloggerku .total {
    line-height: 50px;
    font-size: 20px;
    display: inline;
}
4. Lalu tambahkan kode Javascript dibawah ini tepat diatas kode </body>,
<script src='https://script.bloggerku.com/like/1.0/script.min.js' type='text/javascript'/>
5. Setelah itu, copy kode dibawah ini dan letakkan tepat dibawah kode <data:post.body/>, kode seperti itu biasanya ada banyak, namun untuk kamu yang menggunakan template Viomagz, silahkan tempelkan di kode yang ketiga kalinya ketemu setelah kamu cari.
<div class='lovebutton-bloggerku' expr:data-id='data:blog.blogId + &quot;_&quot; + data:post.id'>
    <div class='inner'>
        <a href='javascript:;'>
            <div class='icon'>
                <svg height='25' viewBox='0 0 1792 1792' width='25' xmlns='http://www.w3.org/2000/svg'><path d='M896 1664q-26 0-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z'/></svg>
            </div>
        </a>
        <div class='total'>Loading</div>
        <div style='clear:both;'/>
    </div>
</div>
6. Terakhir simpan atau save template tersebut.

Nah untuk melihat DEMOnya kamu dapat melihat dibawah ini dengan mengklik tombol dibawah ini.
Sekian tutorial bagaimana cara membuat tombol react love dengan Count di Blogger yang dapat saya bagikan untuk kamu, semoga dengan adanya artikel ini dapat membantu teman teman agar blognya menjadi lebih menarik. Dan semoga bermanfaat :D.

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

6 Responses to "Cara Membuat Tombol React Love Dengan Count di Blogger"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

  1. Buat navigasi header sperti blog ini hu

    ReplyDelete
    Replies
    1. Navigasi menu ? itu cuma penambahan icon hu

      Kalau navigasi author box profile nanti saya buatin buat diwidget sidebar

      Delete
  2. Buatkan kebijakan komentar juga hu

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2017 - 2020 Anirock Site - All Rights Reserved Created With