Jika sebelumnya sudah membahas tentang cara terbaru memasang komentar disqus permanen di blog. Maka di tutorial kali ini akan membahas cara pasang komentar facebook di platform blogger / blogspot.
Jika sebelumnya sudah membahas tentang cara terbaru memasang komentar disqus permanen di blog. Maka di tutorial kali ini akan membahas cara pasang komentar facebook di platform blogger / blogspot.
![[Update] Cara Memasang Komentar Disqus di Blog Blogger 2019](https://1.bp.blogspot.com/-lJJgFRuLUIk/XTmjwbj_c8I/AAAAAAAABQM/MgcmSxAVMtor772Y0HuXm61UDG53MdxPwCEwYBhgL/s1600/cara-terbaru-membuat-komentar-disqus-permanen-di-blog-adityatekno.com.png "Cara Terbaru Memasang Komentar Disqus Permanen di Blog Blogger 2019")
Cara Membuat dan Memasang Widget Author Box Keren di Bawah Postingan Blogger - Welcome back sobat AdityaTekno.com. Nah sesuai judul diatas, postingan ini saya buat atas permintaan sobat BG, yaitu tutorial membuat author box dibawah postingan seperti di AdityaTekno.com(saat ini). Dan saya minta maaf karena baru bisa post hari ini.
Cara Terbaru Membuat Tombol Buka Tutup / Show Hide Komentar pada Blog Blogspot dengan Warna Gradasi - Pada postingan kali ini saya akan membagikan tutorial membuat tombol buka tutup komentar blog seperti yang dipake AdityaTekno.com. Widget komentar pada Blog sangat besar manfaatnya, selain untuk melakukan komunikasi ternyata juga dapat meningkatkan performa blog.
Dan satu lagi, blog juga akan terlihat rapi apabila widget komentar disembunyikan. Namun, juga harus ada tombol buka tutupnya. Selain membantu meringankan loading blog cara ini juga bisa memaksimalkan pengunjung saat membaca artikel.
Walau sebenarnya para blogger blogspot masih banyak juga yang menggunakan kotak komentar bawaan dari blog, termasuk saya sendiri. Dan banyak pula yang masih menggunakan komentar di luar bawaan blog, misalnya saja menggunakan kotak komentar disqus, kotak komentar G+ maupun dari kotak komentar facebook.
Dan mereka pun punya alasan tertentu. Nah, akan tetapi jika penggunaan widget kotak komentar yang bagus saran saya lebih baik menggunakan bawaan Blogger. Selain simpel, juga tidak memberatkan kecepatan loading blog anda. Bukan berarti kotak komentar Disqus, G+ dan Facebook tidak bagus, namun lebih disarankan saja.
Baca Juga: Cara Membuat Komentar Disqus di Blog dengan Tombol Onclick Load
Jika anda penasaran ingin melihat contoh tombol buka tutup komentar, anda bisa mengeceknya langsung tombol komentarnya dibawah. Terlihat rapi dan simpel bukan.
Berikut adalah tutorial cara membuat tombol show hide / buka tutup komentar bawaan blog blogspot.
Cara Terbaru Membuat Tombol Buka Tutup Komentar + Gradient Color pada Blog
Seperti biasa, langkah pertama Buka Dashboard Blogger >> Pilih Menu Tema >> Klik tombol Edit HTML,kemudian copy kode dibawah ini dan letakan diatas kode </style> atau ]]></b:skin>. Kalian pilih salah satu mana yang cocok ditemplate blog anda.
/* CSS Tombol Buka Tutup Komen */
.buka-komen,.tutup-komen{font-family:inherit;background: linear-gradient(to right, #38b3e0, #e53bb2);color:#fff;font-size:16px;line-height:1.3em;padding:8px 10px;text-align:center;font-weight:700;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;margin:10px 5px 5px 5px;cursor:pointer;}
.buka-komen{display:block;margin-bottom:20px}
#comments-box{display:none}
Code CSS di atas bisa diatur lagi margin dan padding nya sesuai dengan lebar bentuk template anda. Dan untuk kode warna gradasi #38b3e0, #e53bb2 anda juga bisa mengubahnya sesuai warna yang diinginkan.
Baca Juga: Kumpulan Kode Warna HTML Lengkap Beserta Namanya
Langkah terakhir, cari kode seperti dibawah ini
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
Biasanya kode di atas letak nya berada di bawah kode <b:include data='post' name='post'/>
Pokonya anda cari kode yang mirip seperti di atas. Jika anda menemukan kode yang sama, anda pilih kode yang ke dua dan ganti dengan code di bawah ini.
<b:if cond='data:blog.pageType == "item"'>
<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById("comments-box").style.display="block";document.getElementById("tutup-komen").style.display="block";document.getElementById("buka-komen").style.display="none"' role='button' tabindex='0'>Click to Comment!</div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById("comments-box").style.display="none";document.getElementById("tutup-komen").style.display="none";document.getElementById("buka-komen").style.display="block"' role='button' tabindex='0'>Close Comment!</div>
</b:if>
<div id='comments-box'>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>
</div>
Kemudian simpan Tema. Dan lihat hasilnya.
Demikian tutorial Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color pada Blog Blogspot. Semoga bisa bermanfaat bagi anda. Good luck! dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com.
Membuat Gradient Color Animasi pada Background Menggunakan CSS - Welcome back sahabat setia AdityaTekno.com, ada kabar bagus nih buat sobat. Apa itu? Penasaran? Baik, dipostingan pada hari ini saya akan berbagi tutorial tentang bagaimana cara membuat gradient color animasi seperti pada blog saya ini. Nah, pasti kalian pada pengen kan. hehe
Baca Juga: Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color pada Blog Blogspot
Bagi anda yang pengen atau belum menggunkan gradient color dan ingin mencoba pada blog anda, disini saya akan berbagi tutorial membuat Gradient Color dengan animasi. Dengan menggunakan animasi gradient color, maka warna akan berubah secara bergantian dengan warna yang sudah kita tentukan pada CSS animasi.
Cara Membuat Gradient Color Animasi pada Background dengan CSS
Disini saya contohkan untuk membuat gradient warna pada background header, maka cari CSS #header-wrapper pada edit HTML di template blog anda, atau jika anda kesulitan mecari dan tidak tahu nama background header CSS nya, anda bisa menggunakan Inspect pada blog anda. Nah, jika sudah ketemu, biasanya CSS akan tampak atau mirip seperti dibawah ini.
#header-wrapper {background:#fff; max-width: 1000px; margin: 0 auto; position: relative;}
Silahkan hapus kode background:#fff dan ganti dengan CSS gradient color animasi dibawah ini.
background: linear-gradient(-50deg, #ee5952, #ea3a7e, #20aadb, #23e0b3);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
Jadi CSS nya akan tampak seperti dibawah ini.
#header-wrapper {background:linear-gradient(-50deg, #ee5952, #ea3a7e, #20aadb, #23e0b3);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}; max-width: 1000px;margin: 0 auto;position: relative;}
Kemudian simpan tema. dan lihat hasilnya.
Note:
Anda juga bisa mengganti warna backgroundnya dengan mengganti kode warna #ee5952, #ea3a7e, #20aadb, #23e0b3 dengan warna kesukaan Anda. Dan jika footer blog anda ingin beranimasi juga, tinggal tambahkan nama footer css nya. Misalnya #footer-wrapper
Anda juga bisa mengganti warna backgroundnya dengan mengganti kode warna #ee5952, #ea3a7e, #20aadb, #23e0b3 dengan warna kesukaan Anda. Dan jika footer blog anda ingin beranimasi juga, tinggal tambahkan nama footer css nya. Misalnya #footer-wrapper
Demikian tutorial tentang Membuat Gradient Color Animasi pada Background Menggunakan CSS. Semoga tutorial ini bisa bermanfaat bagi anda. Good Luck! dan Sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com.
sumber referensi:
https://www.websitemini.net/2018/04/membuat-gradient-color-animasi-pada.html
Welcome back sahabat setia AdityaTekno.com. Dipostingan kali ini saya akan membahas tentang cara memasang top bar menu yang responsive diblog dengan tambahan dropdown, social link dan search box (kotak pencarian).
Welcome back sahabat AdityaTekno.com. Dipostingan kali ini saya akan membahas tentang bagaimana cara membuat tombol back to top yang ringan alias fast loading dan tentunya responsive dan keren. Perlu anda ketahui, tombol Back to Top atau Scroll to Top adalah salah satu trend desain wesbite.
Fungsi tombol ini yaitu untuk mengembalikan halaman ke bagian atas dengan mudah dan sangat ramah pengguna (user friendly). Back to Top adalah fitur atau widget yang wajib ada di blog Anda. Hal ini agar memudahkan pengunjung dalam kembali ke bagian atas halaman blog setelah scroll ke bawah untuk membaca postingan.
Memasang tombol load komentar Disqus dengan fungsi onclick event ini yaitu salah satu cara mempercepat loading blog. Karena seperti diketahui, widget Disqus comment terkadang berkontribusi demikian besar pada size halaman postingan blog, saat halaman postingan tersebut dibuka. Nah, apalagi jika komentar-komentar tersebut sudah demikian banyak, dan terdapat file lampiran berupa gambar dan lain sebagainya.
Apalagi para blogger pemula, pasti mencari-cari kode tersebut entah itu buat ngedit warna teks, warna latar belakang (background) dan sebagainya. Nah, kebetulan disini sudah saya siapkan kode-kode Warna HTML beserta namanya juga pula, Mantab bukan?? hehe
Welcome back sahabat setia AdityaTekno.com. Di kesempatan kali ini saya mau berbagi Cara membuat footer tiga kolom yang tentunya sudah responsive plus keren. Nah, mantab bukan kan. Hehe. Ini bertujuan untuk mempercantik tampilan blog anda, sehingga visitor bisa lebih nyaman dan berlama-lama di blog anda.
Tak jarang juga pemilik blog yang ingin menambah widget pada bagian tertentu pada blognya itu. Sampai-sampai mencari cara agar bisa membuat sebuah tempat widget seperti yang di inginkan.
Salah satunya yang banyak dicari adalah memasang sebuah widget pada bagian footer. Dan kebanyakan widget footer ini banyak dipakai oleh web/blog yang bergaya megazine (berita). Oleh karenanya banyak blogger lain atau blogger pemula yang ingin sekali memasang widget di bagian footer blog mereka.
Buat anda yang sudah tidak sabar lagi ingin membuat widget dibagian footer dengan widget tiga kolom responsive dan keren dari CB bisa mengikuti cara yang saya bagikan dibawah ini.
Inilah Cara Membuat Widget Footer Tiga Kolom Responsive dan Keren
1. Pertama harus sudah Log In ke Blogger.
2. Kemudian masuk ke Menu Template dan Pilih Edit HTML.
3. Setelah itu cari kode ]]></b:skin> atau lebih mudah pake kombinasi shortcut (Ctrl+F). Jika sudah ketemu, copy kode CSS dibawah lalu paste dan simpan di atas kode ]]></b:skin>
CSS Footer Tiga Kolom Responsive + Keren
/* Footer Tiga Kolom Responsive dan Keren by BroGerrr */
#footer-wrapper {background: #fafafc;text-align: center;padding: 5px;width: 100%;color: #666;border-top: 0px solid #ddd;clear: both;font-size: 90%;margin: 0 auto;margin-top: 15px;}
.medsos a{display:inline-block;text-align:center;margin-top:10px;margin-right:5px;color:#fff;border-radius:100%;opacity:.9;border:2px solid #ddd;overflow:hidden}
.medsos a i{font-family:Fontawesome;width:32px;height:32px;line-height:32px;display:block}
.medsos a:hover{color:#fff;opacity:1;transform:rotate(360deg);}
.medsos .facebook{background:#3b5998}
.medsos .twitter{background:#00aced}
.medsos .googleplus{background:#dd4b39}
.medsos .linkedin{background:#135d95}
.medsos .youtube{background:#c00}
.medsos .instagram{background:#333}
.footer-column{position:relative;margin:0 auto;clear:both;font-size:14px;line-height:24px;overflow:hidden;text-align:left;padding: 10px 15px 0 15px;}
.footer-column h3{position:relative;overflow:hidden;margin:0 0 10px 0;font-size:1rem;padding:0 0 10px 0;color:#444;font-family: Oswald;font-weight: 500;}
.footer-menu{float:left;width:30%;margin:0 20px 20px 0}
.footer-menu p.footer2{margin:5px auto}
.footer-menu ul{margin:0 0 0 15px}
.footer-menu ul li{list-style-type:square;margin:0}
.footer-menu ul li a{color:#333}
.footer-menu ul li a:hover{color:#138be6}
#subscribe-footer{overflow:hidden;margin:0 0 20px 0;width:33.4%}
#subscribe-footer p{margin:1em 0}
#subscribe-footer .emailfooter{margin:auto;text-align:center;}
#subscribe-footer .emailfooter form{margin:0;padding:0;float:left}
#subscribe-footer .emailfooter input{background:rgba(255,255,255,1);padding:9px 12px;color:#999;font-size:14px;margin-bottom:10px;border:1px solid rgba(0,0,0,0.14);transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
#subscribe-footer .emailfooter input:hover{border-color:rgba(0,0,0,.34);}
#subscribe-footer .emailfooter input:focus{color:#ddd;outline:none;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);}
#subscribe-footer .emailfooter .submitfooter{background:#e74c3c;color:#fff;margin:0 0 0 5px;font-size:14px;cursor:pointer;border:1px solid rgba(0,0,0,0.05);border-radius:3px;transition:all .3s}
#subscribe-footer .emailfooter .submitfooter:active,#subscribe-footer .emailfooter .submitfooter:hover{background:#c0392b;color:#fff;}
@media screen and (max-width:800px) {
#footer-wrapper{width:100%}
.footer-menu {width:29%;margin:0 15px 10px 0}}
@media only screen and (max-width:768px) {
.footer-menu,#subscribe-footer{float:none;width:auto;}}
@media screen and (max-width:640px) {
#footer-wrapper{margin:auto;border-top:1px solid rgba(0,0,0,0.1)}}
@media screen and (max-width:480px) {
#subscribe-footer .emailfooter input{width:100%}
#subscribe-footer .emailfooter .submitfooter{margin:0}
#subscribe-footer .emailfooter form{margin:auto;float:none}
#footer-wrapper {width:100%;}
.footer-menu {margin:0;padding:0}
.footer-menu, #subscribe-footer {margin:10px 0;}}4. Langkah selanjutnya adalah memunculkan widget pada footer. Caranya Copy Kode HTML dibawah ini lalu Paste dan Simpan di atas kode </body> atau di atas kode </div> paling akhir/paling bawah atau di atas kode <div id='footer'> (coba saja satu per satu mana yang cocok dengan template Anda).
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<div class='footer-column'>
<div class='footer-menu'>
<h3>About This Blog</h3>
<div class='footer2'>
Deskripsi blog dan profil ringkas Admin Blogger di sini. Menjelaskan konten blog dan tujuan blogging dengan blog ini.
<div class='clear'/>
<div class='medsos'>
<a class='facebook' href='https://www.facebook.com/xxxx' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='twitter' href='https://twitter.com/xxxxx' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='googleplus' href='http://plus.google.com/xxxxx/' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<a class='linkedin' href='http://www.linkedin.com/in/xxxxx' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a>
<a class='youtube' href='https://www.youtube.com/user/xxxxx' rel='nofollow' target='_blank'><i class='fa fa-youtube'/></a>
<a class='instagram' href='https://www.instagram.com/xxxxx' rel='nofollow' target='_blank'><i class='fa fa-instagram'/></a>
</div>
</div>
</div>
<div class='footer-menu'>
<h3>Web Links</h3>
<ul class='footer2 line'>
<li><a href='#' target='_blank' title='Link 1'>Link 1</a></li>
<li><a href='#' target='_blank' title='Link 1'>Link 2</a></li>
<li><a href='#' target='_blank' title='Link 1'>Link 3</a></li>
<li><a href='#' target='_blank' title='Link 1'>Link 4</a></li>
<li><a href='#' target='_blank' title='Link 1'>Link 5</a></li>
</ul>
</div>
<div class='footer-menu' id='subscribe-footer'>
<h3>Follow by Email</h3>
<p>Subsribe to get post update from this blog in your email inbox. Free and safe!</p>
<div class='emailfooter'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=xxxxxx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='email' onblur='if (this.value == "") {this.value = "Email address";}' onfocus='if (this.value == "Email address") {this.value = "";}' type='text' value='Email address'/>
<input name='uri' type='hidden' value='xxxxxx'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitfooter' type='submit' value='Submit'/>
</form>
</div>
</div>
</div>
</footer>
<div class='clear'/>Note:
Ganti kode tanda pagar (#) dan xxxxx dengan link akun media sosial dan link yang akan Anda tampilkan.
Sekian Cara Membuat Widget Footer Tiga Kolom Responsive dan Keren. Semoga bisa terbantu dengan cara yang saya bagikan ini dan Good Luck. Sampai jumpa di postingan selanjutnya. Salam AdityaTekno.com.
Langganan:
Postingan (Atom)