AdityaTekno: Design Blog | Blog Tips SEO, Blogging, AdSense
Cara Terbaru Memasang Kolom Komentar Facebook Responsive di Blogger
Cara Memasang Kotak Komentar Facebook Responsive di Blogger - Welcome back sahabat AdityaTekno.COM, tutorial kali ini masih membahasa tentang komentar. 

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.

Cara Terbaru Memasang Komentar Facebook Responsive di Blogger

[Update] Cara Memasang Komentar Disqus di Blog Blogger 2019
Cara Terbaru Memasang Komentar Disqus Permanen di Blog Blogger atau Blogspot - Welcome back sahabat AdityaTekno.COM, dikesempatan kali ini saya akan membagikan tutorial blog tentang cara terbaru memasang komentar disqus di blogspot secara permanen. Karena akan memasang komentar Disqus secara permanen, maka segala fitur atau semua script komentar bawaan blogger akan dihapus atau dihilangkan.

Cara Terbaru Memasang Komentar Disqus Permanen di Blog Blogger 2019

Membuat Widget Author Box Keren Responsive di Bawah Postingan

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 Membuat Author Box Keren di Bawah Postingan Blog

Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color

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 == &quot;static_page&quot;'>
          <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 == &quot;item&quot;'>
<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Click to Comment!</div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Close Comment!</div>
</b:if>
<div id='comments-box'>
        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' 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.

Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color pada Blog Blogspot

Membuat Gradient Color Animasi pada Background dengan CSS seperti BG BroGerrr

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

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

Membuat Gradient Color Animasi pada Background Menggunakan CSS seperti BG BroGerrr

Cara Membuat Tombol Back to Top Fast Loading Responsive dan Keren

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.

Cara Membuat Tombol Back to Top Ringan Responsive dan Keren

Cara Membuat Widget Artikel di Tengah Postingan Blog muncul secara otomatis
Welcome back sahabat setia AdityaTekno.com. Di postingan kali ini saya akan membahas tentang cara membuat widget related post atau artikel terkait di dalam/tengah postingan secara otomatis. Sebenarnya dipostingan sebelumnya saya juga sudah membahas tentang cara memasang iklan dan related post ditengah postinganNamun, untuk kali ini saya cuma membahas related postnya saja tanpa ada iklannya.

Cara Membuat Related Post (Artikel Terkait) di Dalam Postingan Blog

Cara Memasang Komentar Disqus dengan Fungsi Tombol Onclick Event
Welcome back sahabat setia AdityaTekno.com. Desain Blog kali ini saya akan membahas tentang cara memasang widget Disqus comment di blog dengan fungsi onclick load. Yang artinya, semua komentar di blog blogspot akan disembunyikan terlebih dahulu, dan kolom serta berbagai komentar tersebut akan ditampilkan jika pengunjung mengklik tombol untuk load komentar Disqus.

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.

Cara Membuat Komentar Disqus di Blog dengan Tombol Onclick Load

Cara Pasang Dua Iklan Google Adsense di Tengah Postingan
Welcome back sahabat setia AdityaTekno.com. Hari ini saya akan membahas tentang 4 Langkah Cara Memasang Dua Iklan Google Adsense di Tengah Artikel dan tampil secara otomatis, yang sebelumnya saya sudah membahas tentang Cara Memasang Iklan Google Adsense Tanpa Parse Kode.

4 Langkah Cara Memasang Dua Iklan Google Adsense di Tengah Artikel

Cara Memasang Iklan dan Related Post (Artikel Terkait) ditengah Postingan
Welcome back sahabat setia AdityaTekno.com. Dikesempatan kali ini saya akan membagikan tentang Desain Blog. Baik, cara yang saya bagikan ini mungkin tidak jauh berbeda dengan blog lain yang sudah share tentang tutorial ini. Tapi, saya mencoba membagikannya lagi disini untuk sahabat setia AdityaTekno.com. Cara ini juga saya terapkan di blog ini dan lihat demonya dibawah. 

Cara Memasang Iklan dan Related Post (Artikel Terkait) ditengah Postingan atau Artikel 100% Work!!!

kumpulan-kode-warna-html-lengkap
Hallo, kembali lagi sahabat AdityaTekno.com. Di kesempatan kali ini saya akan membagikan seputar Web Desain yaitu tentang Kode Warna HTML beserta namanya. Kode-kode ini pasti sangat dicari oleh para blogger yang sedang mengedit warna pada template blog yang kamu pakai. 

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

Kumpulan Daftar Kode Warna HTML Lengkap Beserta Namanya

footer tiga kolom

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.


footer tiga kolom responsive


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(&apos;https://feedburner.google.com/fb/a/mailverify?uri=xxxxxx&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email address&quot;;}' onfocus='if (this.value == &quot;Email address&quot;) {this.value = &quot;&quot;;}' 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.

Inilah Cara Membuat Widget Footer Tiga Kolom Responsive dan Keren di Blog

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.