CARA MENGHAPUS TOMBOL SHARE BAWAAN BLOGSPOT

Gambar tombol Share pengganti pada blogspot

Tombol bawaan blogspot atau blogger itu yang kami maksud bentuknya yang seperti ini:

Terlihat kecil dan monoton, dan trik untuk menggantinya sangat mudah. 

Masuk ke pengaturan blogspot/blogger, pilih TEMA lalu klik "editHTML" cari salah satu kode di bawah ini:

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

Atau kalau tidak ketemu cari kode dibawah ini, kita dapat menerapkan ini dengan mudah pada template jenis sederhana, awsome dst:

<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>

Atau......

Perhatikan gambar baik-baik: Gunakan saja ctrl+F untuk mempercepat pencarian, dan kalau sudah ketemu hapus saja. Kode yang kita sebutkan diatas terlihat dalam HTML blogspot sebagai berikut:

Dan perhatikan setelah di hapus akan tertinggal sub-title kode : <!--share buttons--> di atasnya:

Maka kopi pastekan kode di bawah ini ke dalam ruang kosong di bawah kode <!--share buttons--> sebagai pengganti share button atau tombol share yang telah kita hapus tadi:

&lt;script type=&quot;text/javascript&quot; src=&quot;//platform-api.sharethis.com/js/sharethis.js#property=5998595b6692a7001120ec54&amp;product=inline-share-buttons&quot;&gt;&lt;/script&gt;

Lalu Save dan lihat hasilnya akan terlihat seperti pada gambar diatas postingan ini

CARA UNINSTAL/REMOVE SISTEM KOMENTAR DISQUS DARI BLOGSPOT

Mengapa orang membuang sistem komentar disqus?

Ada beberapa teman yang ingin membuang sistem komentar disqus pada blogspot mereka, dan menanyakan cara meremove / uninstall sistem komentar disqus yang sudah terlanjur terpasang pada template blogger
Caranya sih sederhana saja tetapi ingat pastikan terlebih dahulu agar mensinkronkan semua komentar kita.

Sebenarnya kalau menurut kami sistem komentar disqus ini memiliki banyak kelebihan walaupun memiliki banyak minus menurut orang orang di barat sana:

• Disqus mulai secara massive menerapkan basis ads ke dalam platform mereka yang membuat kecepatan blog melambat drastis.
• Menurut sumber GTMetrix 90% waktu tes hompage blog pada kebanyakan kasus loading disqus sangat lama pada homepage blogspot, termasuk memperlambat blogger AMP, dan termasuk indivual test terhadap setiap postingan itu sendiri.
• Dan perlambatan juga berlaku untuk mobile blogger, bukan hanya versi desktop.Laptop.
• Komentar disqus tidak lagi sinkron dengan blogspot.

Hanya itu saja informasi yang dapat kami kumpulkan dari sumber smber di network, perhatikan matrix kecepatan yang terpengaruh oleh sistem komentar disqus di bawah ini:


 Cara mensinkronkan komentar disqus yang akan buang?
Pertama pastikan blogger kita bukan AMP, nah kalau bloggernya HTML klasik biasa dibawah ini kami beritahukan caranya:

1. Masuk ke akun disqus
2. Temukan tool >>Import>>Blogger - lalu klik sync atau sinkron

Lamanya waktu penyinkronan tergantung seberapa besar dan banyak konten atau isi blog kita, tunggu sampai penyinkronan selesai agar aman pelepasan disqusnya.

Cara melepaskan sistem komentar disqus dari blogspot:

Langkah 1: Masuk ke akun blogger kita

Langkah 2: Masuk ke pengaturan Lay out /Tata letak dan cari widget dengan nama 'Disqus'

Edit dan remove saja Wodget dengan tulisan 'Disqus Comments' tersebut diatas.

Jika masih ada sisa kode/script yang tertinggal, kita dapat melakukan pembersihan lebih jauh melalui pengaturan blogger >>Lay out >>

CARA MEMBUAT MENU PENCARIAN BERBENTUK BULAT DIDALAM HEADER TEMA AWSOME

Sengaja dengan bentuk gaya bahasa sesederhana mungkin kami memberikan trik ini dan berbagi, ingat tidak pada setiap jenis tema blogger hal ini dapat dilakukan, kami telah mencobakannya pada tema awsome hasil modifikasi kami dengan gaya header berwarna infinite mirip Desain Arlina, namun jangan salah, gaya itu kami buat (baca: modifikasi) dengan teknik kami sendiri menggunakan elemen elemen yang tersedia gratis di internet dan siapapun bebas menggunakannya tanpa perlu kuatir, termasuk menggunakan template hasil kerja kami.

MEMBUAT MENU PENCARIAN BERBENTUK BULAT DAN MELETAKANNYA DI POJOK KANAN HEADER BLOG?

Setelah kami mencari tutorialnya kebanyakan dalam bahasa Inggris, dan itupun adalah tutorial bagaimana membuatnya, bukan trik untuk mendapatkannya. Nah untuk tema atau template awsome gratis bawaan blogger yang telah kita edit agar nampak premium dan professional ikutilah tutorial kami sebelumnya perihal membuat warna gradasi baik yang tidak animasi maupun yang animasi, baca: CARA MEMBUAT GRADASI WARNA DI HEADER BLOGGER

Dan selanjutnya agar header tersebut menjadi lebih keren dan premium kita dapat meletakan kotak pencarian seperti terlihat pada gambar di bawah ini:

Perhatikan perbedaannya sesudah diberi kotak pencarian sebelah atas bar header dan sebelumnya di bawahnya.

• Untuk template bawaan (default) blogspot pasang terlebih dahulu script awsome dibawah ini. Caranya adalah dengan masuk ke pengaturan blogger dan pilih opsi "edit HTML" cari kode </head> letakan kode:    <link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> pas diatas kode </head> tadi.
• Masih di pengaturan blogger lalu pilih opsi "edit HTML" cari kode ]]></b:skin>  dan kopi kode css dibawah ini dan letakan di atas kode ]]></b:skin> tersebut:

/* Search Button Popup */ #search-wrapper{width:90%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:shownow 0.3s ease-in-out;-moz-animation:shownow 0.3s ease-in-out;animation:shownow 0.3s ease-in-out} @keyframes shownow{0%{transform:scale(0.9)}50%{transform:scale(1.01)}100%{transform:scale(1)}} #search-wrap{clear:both;width:75%;margin:0 auto;padding:0;display:block;overflow:hidden} #search{border:1px solid #fff;border-radius:5px} #searchformku{color:#111;width:100%;margin:0 auto;overflow:hidden;position:relative;} .button-searchku,.button-searchku:hover{clear:both;background:none;border:3px;color:#3f3f3f;width:40px;height:40px;line-height:40px;padding:0;text-align:center;font-size:23px;cursor:pointer;position:absolute;top:5px;right:10px;font-weight:700} .button-searchku:active{border:none;outline:none;background:none;} #search-formku{background-color:transparent;width:100%;height:57px;line-height:57px;padding:0 60px 0 20px;-moz-box-sizing:border-box;box-sizing:border-box;border:none;font-weight:700;font-size:20px;color:#fff!important} #search-formku{-webkit-box-sizing:border-box} #search-formku:focus{border:none;outline:0;color:#fff;} #searchformku:focus{border:none;outline:0;color:#3f3f3f} #box{margin:0 auto;display:none;padding:60px 0 0;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);background-color:rgba(0,0,0,.94);text-align:center;-webkit-transition:all ease-in-out .25s;-moz-transition:all ease-in-out .25s;-ms-transition:all ease-in-out .25s;-o-transition:all ease-in-out .25s;transition:all ease-in-out .25s;} #hide span.tombolkecil{color:#fff;font-weight:700;padding:0;text-align:center;cursor:pointer;font-size:20px;height:35px;width:35px;line-height:35px;float:right;overflow:hidden;display:block} #hide span.tombolkecil:hover{color:#eee;border-color:#eee} #box p{font-size:14px;margin:15% auto 70px;color:#fff;letter-spacing:2px;text-transform:uppercase} .icon-searchku span{font-weight:normal;width:auto; height:50px;line-height:50px;position:absolute;top:0;right:15px;cursor:pointer;padding-left:5px;font-size:23px;color:#fff}

• Selanjutnya cari kode </body> lalu kopi pastekan kode dibawah ini diatasnya. Ingat </body> juga di nyatakan sebagai kode penutup pada template.

<div id='box'> <div class='search-wrapper' id='search-wrapper'> <div id='hide'><span class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-times'/></span></div> <div id='search-wrap'> <p>Ketik dan Tekan Enter</p> <div id='search'> <form action='/search' id='searchformku'> <input name='cof' type='hidden' value='FORID:10'/> <input name='ie' type='hidden' value='ISO-8859-1'/> <input id='search-formku' name='q' placeholder='Search....' required='required' type='text'/> <button class='button-searchku' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button> </form> </div> </div> </div> </div>

Nah yang terakhir letakan kode ini di bawah atau diatas kode </header> dengan catatan ini khusus buat template awsome, jika untuk tema jenis lain bisa dicobakan sesudah kode <body> yang di sebut juga sebagai kode pembuka pada template.

<div class='icon-searchku'> <div id='show'><span class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;'><font color='#f39c12'><i aria-hidden='true' class='fa fa-search'/></font></span></div> </div>

Sekarang kita telah mendapatkan sebuah tema dengan sentuhan kombinasi Desain gayanya Arlina dan Sugeng sekaligus, dan gaya ini juga terdapat pada tema tema premium buatan Gooyabi. Untuk melihat contoh klik demo dibawah ini:

DEMO

Namun sekali lagi kami ingatkan, cara ini berlaku dengan baik pada tema tema awsome bawaan blogger, tapi jika anda mencobakannya terhadap tema yang sekarang sedang dipakai untuk blogger "editblogtema", dijamin anda akan gagal karena Anisa telah merancang dan merobah sedikit struktur dasar templatenya yang saya sendiripun masih sedang mencari trik agar dapat memasang beberapa jenis widget kedalamnya termasuk memasang widget pencarian ini ke dalam header tema "editblogtema" ini.

Jika ada pertanyaan seputar pemasangan jangan ragu untuk menanyakannya melalui komentar dibawah blog ini. Sekian & Salam dari kami.