Dampak Negatif Dan Positif Saat Menggunakan Script Lazy Load

Hallo ketemu lagi dengan saya Putu Rastakhen admin blog ID Dzgn ini, kali in saya mau membagikan sedikit informasi Dampak Negatif Dan Positif Saat Menggunakan Script Lazy Load Di Blog, nah sebelumnya saya sudah membagikan tutorial Untuk: Cara Menpercepat Blog Dengan Memasang Script Lazy Load,
Banyak pengguna blog yang sudah memakai script lazy load ini demi meningkatkan kecepatan loading situs yang lambat, Siapa yang tidak berkiinginan memasang script ini pada blog, namun perlu diketahui script yang mampu meningkatkan kecepatan loading situs blog ini pun juga tetap memiliki dampak negatif dan positif saat kamu menggunakanya. script ini dkhususkan pada gambar yang ada di blog/situs.

Salah satu yang menjadi penyebab utama lambatnya loading situs blog adalah gambar, karena gambar yang akan di muat pada situs terdapat ukurang yang besar sehingga memberikan efek lambat saat gambar di muat, nah dengan anda memasang script lazy load ini pada situs blog anda, maka akan ada perubahan nantinya bukan berarti gambar akan di perkecil ukuranya dan berkualitas renda, tentu tidak akan terjadi hal seperti itu.

Cara Kerja Script Lazy Load

Setelah kita memasang script lazy load tentu akan mempercepat loading situ blog anda, karena gambar akan di muat pada akhir setelah halaman situs blog anda sudah sepenuhnya selesai, baru gambar akan  muncul.gambar akan di muat secara berurutan dari atas ke bawah, pemuatanya pun tidak memakan waktu yang cukup lama kurang lebih kurangnya 1 detik gambar akan selesai dimuat. jika pada 1 halaman situs blog terdapat banyak gambar maka waktu yang di butuhkan cukup memakan waktu lama namun dipastikan gambar dengan perlahan akan di muat.

Dampak Positif Saat Menggunakan Script Lazy Load Pada Blog

Dampak positifnya pasti sudah anda keetahui sebelumnya!, ya dampak positifnya adalah situs blog akan di muat lebih cepat dari sebelumnya. Untuk mengetahui apakah situs blog mendapatkan peningkatan setelah memasang script lazy load ini, anda bisa gunakan tools online untuk mengecek sebelum dan sesudah anda memasang script lazy load pada situs blog anda.

Dampak Negatif Saat Menggunakan Script Lazy Load Pada Blog

Untuk dampak negatif saat menggunakan script lazy load ini pada blog yaitu pada saat situs blog di buka melalui prangkat mobile yang kecepatan jaringanya tidak setabil, maka akan berdampak gambar tidak muncul (tidak dimuat), bukan hanya pada tampilan prangkat mobile namun tampilan deskop'pun akan mengalami hal yang sama jika kecepatan jaringan tidak setabil.

Selain itu browser juga bisa menjadi kendala yang bisa menimbulkan dampak negatif saat menggunakan script lazy load ini, UC Browser adalah salah satu browser yang tidak mendukung script lazy load ini dikarenakan uc browses terdapat fitur hemat data meskipun kecepatan jaringan cukup cepat namun gambar situs laman blog blum terbuka semua maka yang terjadi gambar tidak akan dimuat lagi seperti halnya browser lain seperti Firefox, Chrome, dan Browser lain bawaan mobile, ini disebabkan oleh fitur hemat data yang ada pada uc browser ini.

Nah mungkin sampe disini dulu untuk artikel ini semoga bisa menjadi manfaat bagi anda, kenali dulu penggunaanya karena dibalik kegunaanya yang bermanfaat ada dampak positif dan negatif yang akan muncul di waktu mendatang, jika anda tertarik untuk memasang script lazy load ini langsung saja ke artikel sebelumnya☺: Cara Mempercepat Loading Blog Dengan Memasang Script Lazy Load

Sumber: http://www.anggasave.com/2017/07/dampak-kekurangan-script-lazy-load.html

Cara Mempercepat Loading Blog Dengan Memasang Script Lazy Load

Baiklah sahabat kali ini saya akan coba membagikan Tutorial blogger lagi yaitu: Cara Mempercepat Loading Blog Dengan Memasang Script Lazy Load, Script Lazy Load adalah salah satu trick yang sudah banyak di terapkan di berbagai penggunaan template blog untuk mempercepat loading saat situs laman di muat, Script lazy load ini bekerja pada gambar yang nantinya akan di muat secara berurutan sesudah situs laman anda sepenuhnya sudah di muat baru gambar ini akan di muat dengan cepat.

Script lazy load ini sangat di sarankan bagi pengguna situs blog yang memiliki kecepatan loading yang lambat saat di muat, dengan memasang script lazy load ini blog akan menjadi lebih ringan dari sebelumnya, namun script ini juga memiliki dampak kekurangan yang bisa memberikan dampak tidak berjalanya script lain, maka dari itu sangat di sarankan sebelum anda memasang script lazy load ini pastikan anda sudah melakukan backup terlebih dahulu terhadap template yang anda gunakan.

Cara Memasang Script Lazy Load Pada Template Blog

Memasang script lazy load ini sangatlah mudah, mari ikuti langkah-langkah pemasanganya dibawah ini☺
1. Silahkan anda buka Blogger>Template>Edit Html, jika sudah muncul list kode HTML template silahkan sekarang anda cari kode </body>  lalu copy pastekan kode di bawah ini tepat di atas kode </body> tadi, untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboar anda.

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6QIMfHqKMAVgJSPNS0ya9IRlcbCFINtjbOKBIxD7u9Uwas-VnHTv74w5DwBpdIzI5msBs1YVOcoHI81pFEJf8vc3kc-9Ab8GWwETXv-RmQRXZJ3VpYzxKFEWFsXaeZ4UbX8Bmy6cXFIM/s1600/Bannerku.png",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

2. Jika sudah silahkan sekarang save/simpan template lalu coba check dengan membuka situs blog anda, atau bisa juga sebelum anda memasang script lazy load di atas untuk mengetahui apakah ada peningkatan kecepatan nilai loading blog anda silahkan check terlebih dahulu menggunakan tools check online saran gunakan Tools online GTMatrix.

Bukan hanya gambar yang bisa di gunakan script lazy load untuk mepercepat loading blog, Iklan dari Google Adsense pun bisa karena salah satu penyebab dari lambatnya loading adalah iklan Google Adsense. jika tertarik silahkan anda baca artikel berikut: Tips Jitu Untuk Meringankan Iklan Google Adsense Dengan Menambahkan Script Lazy Load.
Mungkin sampe di sini dulu nantikan info menarik seputar blogger hanya di blog ini. terimakasi

Material Design Artikel Terkait Otomatis Dalam Postingan Blog

Sebelumnya saya mohon maaf karena jarang sekali melakukan update artikel di blog ini, di karenakan saat ini saya sedang menjalani proses ulangan semester di sekolah.

Material Design Artikel Terkait Otomatis Dalam Postingan Blog: Tutorial Blog yang kali ini akan saya bahas mungkin sudah banyak blog lain yang mempublikasi tutorial ini.
Artikel Terkait: digunakan untuk menampilkan artikel lain yang berhubungan dengan artikel yang sedang di baca, atau artikel yang memiliki kategory yang sama namun berbeda pembahasan yang di sisipkan pada postingan tertentu, itu adalah penjelasan singkat kegunaan Artikel terkait dalam postingan.

Artikel Terkait kali ini menggunakan efek Material Design sehinggan tampilan yang di hasilkan rapih, sehingga terlihat lebih prefesional di mata pengunjung.

Anda tidak susah-susah lagi jika ingin menaruhkan Artikel Terkait lagi dalam postingan karena artikel terkait yang akan kita bahas kali ini sudah otomatis akan muncul, anda hanya harus memasang script pemanggilnya saja.

Result

Nah jika masih kurang jelas silahkan anda lihat demonya dengan mengklik link di atas ini, lalu geser scroll ke bawah, Bagaimana keren bukan langsung saja untuk tahap pemasanganya di blog.

Material Design Artikel Terkait Otomatis Dalam Pos Postingan Blog

1. Masuk ke Blogger>Tema>Edit Html, pada Edit Html silahkan kamu cari kode ]]</b:skin> lalu pastekan kode berikut tepat di atasnya, untuk mempercepat pencarian silahkan anda klik tombol

CTRL

+

F

pada keyboard kamu.

.front-articles{position:relative;padding:0;margin:15px auto;width:100%;border-radius:0 0 3px 3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12)}.front-articles h4{background-color:#273e80;padding:15px 12px;border-top-right-radius: 4px;border-top-left-radius: 4px;margin:0;font-size:15px;font-weight:600;letter-spacing:1px;color:#FFF}.front-articles ul{margin:0;padding:0}.front-articles ul li{background-color:#FFF;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border-bottom:0}.front-articles ul li:nth-child(odd){background-color:#FFF}.front-articles ul li:before{content:'\f105';font-family:'FontAwesome';position:absolute;margin:0 9px 0 4px;color:#0042ff;overflow:hidden}.front-articles ul li:hover:before{content:'\f107';font-family:'FontAwesome'}.front-articles a{color:#444;font-size:13px;margin:0 0 0 30px}.front-articles a:hover{color:#1da4c2}.front-articles ul li:nth-child(n+4) {display:none}

2. Nah jika sudah selesai selanjutnya silahkan cari kode <body> lalu copy pastekan script di bawah ini di atasnya.

<script type='text/javascript'>
//<![CDATA[
var frontArticles = new Array(); var frontArticlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; frontArticles[frontArticlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[frontArticlesNum] = entry.link[k].href; frontArticlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = frontArticles[i];}} frontArticles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((frontArticles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < frontArticles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + frontArticles[r] + '</a></li>'); if (r < frontArticles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>

3. Selanjutnya silahkan anda simpan/save template anda, lalu selanjutnya silahkan anda buat postingan baru atau mungkin masuk ke edit postingan lama anda pindahkan mode Compose>HTML lalu masukan kode script pemanggil berikut.

<div class='front-articles'>
<script src='/feeds/posts/default/-/Tutorial Blog?alt=json-in-script&callback=related_results_labels&max-results=4' target='_blank' type='text/javascript'></script>
<h4>Baca Artikel Ini</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
        </script>
</div>

Silahkan anda ubah Tutorial Blog sesuai dengan kategory postingan yang ingin di tampilakan.

4. Silahkan anda publikasikan, lalu lihat hasilnya.

Nah bagaimana mudah bukan, mungkin sampai di sini saja tutorial yang saya sampaikan kali ini sampe ketemu di lain waktu selamat menunaikan ibadah puasa. :D

Cara Merubah Tampila Warna Address Bar Di Browser Mobile Sesuai Dengan Loyout Blog

Hallo kali ini blog ID Dzgn akan coba mengupas tutorial blog yang mungkin kalian belum ketahui atau mungkin sudah, bagi yang belum mengetahui mungkin masih penasaran dengan tutorial yang saya bagikan kali ini. Tutorial kali ini adalah: Cara Merubah Tampila Warna Address Bar  Di Browser  Mobile Sesuai Dengan Loyout Blog , Nah pastinya sobat ID Dzgn pernah mengunjungi situs web dalam tampilan mobile, nah di addres bar browser pasti terkadang kamu bingung karena addres bar warnanya berbeda dengan tampilan situs web lain, jika kamu pengguna blogger kamu bisa merubah tampilan warna addres bar situs kamu sesuai dengan keingan kamu, caranya pun tidak terlalu ribet hanya harus menambahkan tag untuk merubah warnanya pada setiap tampilan browser mobile yang berbeda.

Baca Artikel Ini

Nah di atas adalah gambar demo yang memperlihatkan perbedaan warna addres bar pada browser mobile, langsung saja ke tutorial pemasanganya di bawah ini!

Cara Merubah Tampila Warna Address Bar Browser Smartphone Sesuai Dengan Loyout Blog

1. Silahkan buka Blogger>Tema>Edit Html, lalu pastekan kode berikut tepat di atas kode </head> untuk mepercepat pencarian silahkan klik tombol

CTRL

+

F

Pada keyboard leptop kamu

<!-- Warna untuk Chrome, Firefox OS, Opera dan Vivaldi -->
<meta content='#0048b4' name='theme-color'/>
<!-- Warna untuk Windows Phone -->
<meta content='#0048b4' name='msapplication-navbutton-color'/>
<!-- Warna untuk iOS Safari -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#0048b4' name='apple-mobile-web-app-status-bar-style'/>(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});//]]></script>

2. Sekarang silahkan kamu Save/Simpan dan buka situs web kamu pada tampilan mobile dan lihat hasilnya.

Untuk mengganti warna silahkan kamu ganti kode warna #0048b4 sesuai dengan keingan kamu.

Nah bagai mana shobat mudah bukan, ya caranya cukup mudah dan simple menurut saya. Semoga Tutorial Blog di atas bisa bermanfaat buat kamu, jangan mudah menyerah teruslah melangkah tampa rasa lelah (Kata Bijak) Terimakasi.

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog

Hallo sobat blog ID Dzgn, kali ini saya akan coba membagikan tutorial untuk: Material Design Membuat Tombol Back To Top Effect Ripple Di Blog, sudah hampir satu bulan saya tidak membuat postingan artikle untuk sobat semua, maklum akhir-akhir ini saya kena demam (Males Ngeblog) kalo ada yang mungkin punya solusi untuk penyakit saya ini tolong di bagikan yaa di kotak komentar di bawah.

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog: Back To Top pada blog digunakan untuk memudahkan pengunjung untuk men-scroll posisi dari bawah laman postingan ke atas sesuai dengan efek animasi keyframe yang di gunakan. Tombol back to top ini akan muncul bila scroll mouse atau scroll vertikal di geser ke bawah.
Tombol ini juga biasanya akan menambah kesan menarik tampilan web/blog sehingga tampilan akan terlihat prefesional di mata pengunjung, Hampir seluruh pengguna blog dan website menggunakan tombol back to top ini namun dengan tampilan yang berbeda-beda.
Nah yang kali ini saya bagikan adalah tombol back to top material design yang menggunakan effect ripple, jika kurang jelas silahkan lihat gambar demonya di bawah ini.

Tertarik membuatnya?? Yuk intip cara membuat dan memasangnya di bawah!!☺

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog

1. Silahkan kamu buka Blogger>Tema>Edit Html lalu cari kode ]]></b:skin> pastekan kode CSS berikut tepat di atasnya, untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard leptop kamu.

#BackToTop{overflow:hidden;position:fixed;transform:scale(0);z-index:90;right:30px;bottom:31px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);width:55px;height:55px;color:#fff;text-align:center;background-color:#2196F3;font-size:22px;line-height:52px;cursor:pointer;border-radius:100%;transition:all .2s ease-in-out}#BackToTop:hover{background-color:#1976D2;color:#fff;box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}#BackToTop.active{transform:scale(1)}.ripplelink{border:1px solid rgba(0,0,0,0.12);position:relative;overflow:hidden;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;z-index:0}.ink{display:block;position:absolute;background:rgba(255,255,255,0.3);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.animate{-webkit-animation:ripple .65s linear;-moz-animation:ripple .65s linear;-ms-animation:ripple .65s linear;-o-animation:ripple .65s linear;animation:ripple .65s linear}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5)}}@-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5)}}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}.kbrd{border-radius:3px;border:1px solid #a3a3a3;box-shadow:1px 0 1px 0 #FFF,0px 2px 0 2px #D3D3D3,0px 2px 0 3px #888;box-sizing:border-box;display:inline;font-family:inherit;font-stretch:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;margin:0 5px;padding:1px 5px;text-transform:capitalize;vertical-align:baseline}

2. Jika sudah selanjutnya silahkan kamu pastekan kode berikut tepat di atas kode </body>

<div class='ripplelink' href='#' id='BackToTop'><i class='fa fa-angle-up'></i></div>
<script type='text/javascript'>
jQuery(document).ready(function(e){var t=e("#BackToTop");e(window).scroll(function(){e(this).scrollTop()>=200?t.show(10).animate("#BackToTop").addClass("active"):t.animate("#BackToTop").removeClass("active")});t.click(function(t){t.preventDefault();e("html,body").animate({scrollTop:0},400)})})
//<![CDATA[
$(function(){var t,e,i,n;$(".ripplelink").click(function(o){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});//]]></script>

3. Terakhir silahkan kamu save/simpan tema

Nah jika 3 tahap di atas sudah kamu lakukan sekarang coba kamu lihat hasilnya di blog kamu.
Mungkin hanya itu saja yang saya bisa sampaikan pada artikle tutorial kali ini, semoga bisa bermanfaat buat kamu terimakasi.

Material Design Box Subscribe With Heading

Material Design Box Subscribe With Heading: Baiklah kali ini blog ID Dzgn akan coba kembali membahas Tutorial yang bertemakan material design.
Material Design cukup membuat saya terpesona sehingga mendorong saya untuk mempelajari Strukture kode dalam material design ini. Sebelumnya saya juga sudah pernah membagikan artikle tutorial untuk Box Subscribe/Kotak berlangganan ini dengan menggunakan efek material design namun ada sedikit perbedaan untuk bentuk dan stylenya.
pada kesempatan sebelumnya saya juga sudah membahas pengertian dari Box Subscribe/Kotak Berlangganan secara singkat namun dapat bisa di cerna untuk para visitor yang belum mengetahui apa itu Box Subscribe, untuk melihat lebih lengkapnya kamu bisa lihat pada link berikut Widget Box

Baca Juga: 
Subscribe (Kotak Berlangganan) Menggunakan Material Design Di Blog
Cara Membuat Box Subscribe (Kotak Berlangganan) Keren Di Bawah Postingan Blog
Cara Membuat Kotak Berlangganan Keren Di Blog

Untuk jika masih penasaran dengan hasil demonya, berikut sudah kami sediakan link demonya.

Result

Nah bagai mana tertarik memasangnya di blog kamu??

Material Design Box Subscribe With Heading

1. Silahkan kamu masuk ke Blogger>Tema>Edit Html, lalu silahkan kamu pastekan kode berikut tepat di atas kode ]]></b:skin> atau </style> silahkan kamu cari satu-persatu bebas area kode. Untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboard kamu.

.sidebar-nl
.subform1 {    box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.12);
    height: 200px;
    box-sizing: border-box;
    width: 100%;
    padding-bottom: 15px;
    border-radius: 2px;}
.subtext {margin-top: 10px;
    font-size: 15px;
    text-align: center;}
.subinput1   {  margin: 14px 25px 15px;
    width: 81%;
    display: block;
    border: none;
    padding: 10px 0;
    border-bottom: solid 1px #03A9F4;
    -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #03A9F4 4%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #03A9F4 4%);
    background-position: -300px 0;
    background-size: 300px 100%;
    background-repeat: no-repeat;
    color: #106288;
    transition: all 0.3s ease-out;}
.subinput1:focus, input:valid {
  box-shadow: none;
  outline: none;
  background-position: 0 0;
}
.subinput1:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
  color: #A9B1C6;
  font-size: 11px;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  visibility: visible !important;
  visibility: visible;
transition: all 0.1s ease;
}
.h6-subs {
  height: 50px;
  width: 100%;
  font-size: 18px;
  background: #0F98D5;
  color: white;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-weight: 500;
}

.subform {height: 193px;
  box-sizing: border-box;
  width: 100%;
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
  padding-bottom: 15px;
  border-radius: 2px;
  margin: 0 2%;
}
.subform .h6-subs {
  box-sizing: border-box;
  padding: 13px 0;
}
button {
      background: #FFFFFF;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: block;
    padding: 8px 15px;
    color: #5a5a5a;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 4px;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;border: none;    cursor: pointer;
    border-radius: 3px;font-size: 13px;text-align: center;font-weight: 500;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
margin-left: auto;
    margin-right: auto;
}
button:hover {
  background: rgba(0, 0, 0, 0.06);
}
 
The magic happens in a few lines of code for the input:focus and input:valid. The CSS transform property plays a crucial role to achieve this little instant feedback effect.

input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
  color: #1abc9c;
  font-size: 11px;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  visibility: visible !important;
}
.h6-subs {padding-top: 12px;}

2. Nah jika sudah selesai sekarang silahkan kamu save/simpan template, lalu pindah menu ke Tata Letak>Tambah Gadget/Widget>Html/JavaScript, nah pada kotak area widget silahkan kamu pastekan kode berikut.

<div class="sidebar-nl"><form action="https://feedburner.google.com/fb/a/mailverify" class="subform1" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=IDDzgn', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><h6 class="h6-subs">Email Newsletter</h6><p class="subtext">Get Latest Posts Directly Into You Inbox</p><input class="subinput1" name="email" placeholder="Enter Your Email" required="" type="text" /><input class="subinput1" name="uri" type="hidden" value="IDDzgn" /><input name="loc" type="hidden" value="en_US" /><button class='ripple-effect button-center' type="submit" value="Subscribe">Submit</button><br />
</form></div>

Silahkan kamu ganti IDDzgn dengan ID FeedBurner Subscribe Via Email kamu

3. Jika Sudah terakhir silahkan kamu klik save/simpan, lalu silahkan kamu lihat kembali blog kamu untuk melihat hasilnya.

Oky mungkin itu saja untuk tutorial di malam ini, semoga tutorial saya bisa bermanfaat bagi kamu semua, salam dunia blogger ID Dzgn

Material Design Download Button Effect Ripple Di Blog

Material Design Download Button Effect Ripple Di Blog: Baiklah kali ini blog ID Dzgn akan coba membagikan Tutorial untuk Cara Membuat Material Design Download Button Effec Riplle Di Blog, nah kamu pasti sudah tau donk Material Design itu apa?? Material Design adalah sebuah tampilan visual yang di luncurkan google pada tahun 2014, umumnya material design sendiri terdapat pada Android, OS dan masih banyak lainya sampe sekarang material design resmi di aplikasikan di berbagai produk Google.
Banyak Designer-designer web yang sudah mengembangkan material design ini untuk di terapkan pada template blog/web, apalagi saat ini penggemar tampilan material design sudah makin bertambah termasuk saya, oky kembali ke pembahasan kali ini, nah tutorial kali ini saya bagikan karena ada pengunjung blog ini yang merequest tutorial untuk tombol download menggunakan material design.
Jika kamu masih penasaran dengan demo tombol yang akan kita buat kamu bisa lihat demonya lebih lengkap di bawah ini:

Result

Nah Mudah-mudahan tutorial saya kali ini bisa menjawab keinginan anda untuk mengubah sedikit demi-sedikit tampilan blog kamu jadi lebih keren.

Material Design Download Button Effect Ripple

1. Masuk ke Blogger>Tema>Edit Html, lalu pastekan kode CSS berikut tepat sebelum kode ]]></b:skin>, untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard kamu.

.ripplelink{border:1px solid rgba(0,0,0,0.12)}
.btn, .btn-large {
text-decoration: none;
color: #FFF;
background-color:#0092d4 !important;
text-align: center;
letter-spacing: .5px;
-webkit-transition: .2s ease-out;
-moz-transition: .2s ease-out;
-o-transition: .2s ease-out;
-ms-transition: .2s ease-out;
transition: .2s ease-out;
cursor: pointer;
}
.btn:hover, .btn-large:hover {
background: #08a7ef !important;
}.btn i{margin-left:0}
.z-depth-1-half, .btn:hover, .btn-large:hover, .btn-floating:hover {
-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);
-moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);
}
.btn, .btn-large, .btn-flat {
border: none;
border-radius: 5px;
display: inline-block;
height: 36px;
line-height: 36px;
outline: 0;
padding: 0 2rem;
text-transform: uppercase;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
}

2. Sekarang silahkan kamu cari kode </body> lalu pastekan kode Javascript ini di atasnya.

<script>
$(function(){var t,e,i,n;$(".ripplelink").click(function(o){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});</script>

Nah jika sudah selesai silahkan kamu Simpan/save template.

3. Sekarang buat artickle/post baru silahkan kamu ubah modenya terlebih dahulu, pindah dari mode Compose ke mode HTML lalu pastekan kode html berikut.

<div style="text-align: center;"><a class="btn ripplelink" href="Url Tujuan" title=" "><i class="fa fa-download"></i> Download</a><a class="btn ripplelink" href="Url Tujuan" title=" ">Demo <i class="fa fa-paper-plane-o"></i></a></div>

Silahkan kamu ganti Url Tujuan dengan Link tujuan kamu.
Nah untuk penempatan tombol download ini kamu bisa pasang di bagian postingan mana saja,
Jika kamu termasuk orang kreative kamu pasti bisa mengedit/mengubah kembali warna atau bentuknya.

Jika sudah terakhir silahkan kamu publikasikan/pertinjau untuk melihat hasilnya.

Oky jika ada penempatan kata yang salah mohon maaf yaa!, jangan lupa Kritik dan Saran kamu, karna kami sangat membutuhkanya untuk lebih mengembangkan lagi pelayanan yang kami berikan.

Cara Membuat Kotak Berlangganan Keren Di Blog

Cara Membuat Kotak Berlangganan Keren Di Blog: Baiklah shobat kali ini ID Dzgn akan coba membahasas tutorial keren untuk blogger shobat.
Kotak Berlangganan atau biasa di sapa Box Subscribe, nah Kotak Berlangganan yang kita bahas kali ini iyalah Kotak berlangganan Via Email, sebenarnya sebelumnya saya juga sudah pernah membagikan Tutorial-tutorial yang temanya sama membahas Box Subscribe/Kotak Berlangganan.

Artikel Terkait: 
- Widget Box Subscribe (Kotak Berlangganan) Menggunakan Material Design Di Blog
- Cara Membuat Box Subscribe (Kotak Berlangganan) Keren Di Bawah Postingan Blog

Sebenernya artikel ini sudah lama saya buat tetapi waktu publikasinya kurang tepat hee, mengingat kemaren juga ada pengunjung yang menanyakan cara pembuatan kotak berlangganan yang kita bahas saat ini, yaa saya bagikan.
Untuk melihat demonya silahkan lihat di homepage blog ini.
Bagaimana dengan kamu tertarik memasangnya di blog kamu?, Silahkan ikuti tutorialnya di bawah ini.

Cara Membuat Kotak Berlangganan Keren Di Blogger

1. Silahkan kamu masuk terlebih dahulu ke Blogger>Tema>Edit Html blog kamu, lalu pastekan kode berikut tepat sebelum kode ]]></b:skin> atau </style>, untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboard kamu.

.iddzgn-subscribe-form{clear:both;display:block;overflow:hidden}
form.iddzgn-subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}.iddzgn-subscribe-css-email-field:focus{box-shadow: 0 1px 5px 1px rgb(0, 192, 220), 0 1px 10px 0 rgb(0, 192, 220);}
.iddzgn-subscribe-css-email-field{transition:all .3s;background:transparent;color:rgb(21, 74, 74);margin:10px 0;padding:15px 20px;width:99%;max-width:250px;border:2px solid;}
.iddzgn-subscribe-css-email-button{width:99%;max-width:150px; background:transparent;color:rgb(255, 122, 122);cursor:pointer;font-weight:710;padding:13px 30px;margin-left:15px;text-transform:none;font-size:17px;border:2px solid;transition:all .6s}
.iddzgn-subscribe-css-email-button:hover{background: rgba(0,0,0,0.8);border: 2px solid rgb(255, 255, 153);box-shadow: 0 1px 5px 1px rgb(0, 192, 220), 0 1px 10px 0 rgb(0, 192, 220);font-weight: bold;}.newsletter-box{;color:#1a4042;text-align:center}.newsletter-box__title,.newsletter-box__subtitle{text-shadow:1px 1px 1px rgba(0,0,0,0.3)}.newsletter-box__title{margin-top:0;font-size:2.9em}.newsletter-box__subtitle{font-size:1.2em}.newsletter-box__form{margin:25px auto 0 auto;max-width:380px;font-size:1.3rem}.newsletter-box__input{font-size:1rem}

2. Lalu silahkan kamu cari kode <div id='post-wrapper'> atau <div class='post-inner'>, dan pastekan kode berikut di bawahnya. Perlu di ingat strukture kode Html pada template tidak selalu sama jadi jika kamu tidak menemukan kode di atas, kamu bisa berkomentar di kolom komentar di bawah.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='newsletter-box'>
<div class='l-container-center'>
<h3 class='newsletter-box__title'>INSPIRING YOUR CREATIVITY !</h3>
<p class='newsletter-box__subtitle'>GET EXCLUSIVE CONTENT BY SUBSCRIBING TO OUR DAILY NEWSLETTER !</p>
<div class='iddzgn-subscribe-form'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=iddzgn' class='iddzgn-subscribe-form' method='post' onsubmit='window.open (&#39;https://feedburner.google.com/fb/a/mailverify?uri=iddzgn&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='iddzgn'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='iddzgn-subscribe-css-email-field' name='email' placeholder='Enter your Email..'/><input class='iddzgn-subscribe-css-email-button' title='SIGN UP' type='submit' value='SUBSCRIBE'/></form>
</div>
</div>
</div></b:if></b:if>

Silahkan kamu ganti iddzgn dengan ID Feed Bunner kamu.

Jika kamu ingin menampilan Kotak berlangganan ini di semua halamana kamu bisa hapus tag berikut

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
..........................
........................
.....................
.....................
....................
</b:if></b:if>

Titik-titik di atas adalah bayangan kode yang ada di bungkus oleh tag pengecualian (Jangan Di Hapus)
Silahkan kamu hapus kode yang sudah di warnai di atas untuk menampilkan Kotak berlanganan di semua halaman.

Oky jika sudah silahkan kamu save/simpan template, lalu lihat kembali blog/web kamu boommmm selamat kamu berhasil.
Nah mungkin sampe di sini saja ya, salam semua semoga bermanfaat.

Cara Membuat Tombol Download Ala Arlina Di Blog

 

Cara Membuat Tombol Download Ala Arlina Di Blog: Baiklah shobat kali ini saya akan coba membagikan tutorial, Cara Membuat Tombol Download Ala Arlina.
Tombol download ini biasanya di gunakan untuk membungkus link download/demo dan lainya,
Nah tutorial ini saya bagikan karena ada temen patner blog ini yang menanyakan cara pembuatanya, sebenarnya pemasangnya cukup mudah, gampang sekali jika shobat mau,

Cara Membuat Tombol Download Ala Arlina

1. Silahkan shobat buka Blogger>Tema>Edit Html, lalu silahkan cari kode berikut ]]></b:skin>  Untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboard shobat, Nah jika sudah ketemu silahkan shoba ganti dengan CSS berikut.

#wrap {
margin: 20px auto;
text-align: center;
}.btn {
display: inline-block;
position: relative;
font-weight: 700;
background: #3cc091;
padding: 9px 18px;
margin: 0 3px;
border-radius: 3px;
opacity: 1;
border: 0;
text-transform: uppercase;
transition: all .3s ease-out;
}.btn:hover, .btn:active {
background: #374760;
}
a.btn {
color: rgba(255,255,255,1);
}

Nah jika sudah silahkan shobat save/simpan tema.
4. Sekarang silahkan shobat buat postingan baru atau mungkin shobat sudah menyediakan postingan sebelumnya yang ingin di pasangkan tombol download ini silahkan di edit kembali, pada halaman postingan shobat silahkan pindah dari mode Compose ke mode HTML yang ada pada bagian pojok kiri atas, dan pastekan kode berikut pada area HTML tadi.

<div id="wrap">
<a class="btn" href="Link demo sobat" rel="”nofollow”" target="_blank">Result <i class="fa fa-paper-plane"></i></a></div>
<a class="btn" href="Link demo sobat" rel="”nofollow”" target="_blank">Download <i class="fa fa-download"></i></a>

Silahkan shobat ganti text yang sudah saya beri tanda di atas dengan link tujuan shobat

Terakhir silahkan shobat Publikasikan/Pertinjau langsung untuk melihat hasilnya.

Mungkin sampe itu saja selamat mencoba, jangan lupa ninggalin jejak di kolom komentar di bawah ini terimakasi.

Cara Merubah Tampilan Blockquote Dengan Efek Shake Di Blog

Cara Merubah Tampilan Blockquote Dengan Efek Shake Di Blog: Hallo shabat blog ID Dzgn kembali lagi bersama saya admin blog ini, kali ini saya akan membahas tutorial yang mungkin bisa merubah tampilan blockquote shobat jadi lebih keren, dan lebih menarik,

Nah di atas adalah gambar animasi dari demo blockquote efek shake, jika masih penasaran dengan demonya berikut silahkan lihat link demonya.

Result

Nah bagai mana keren bukan?, Tertarik membuatnya di blog kamu???

Cara Merubah Tampilan Blockquote Dengan Efek Shake Di Blog

1. Silahkan shobat masuk ke Blogger>Tema>Edit Html, Lalu kamu cari kode ]]></b:skin> lalu pastekan kode berikut di atasnya, untuk mempercepat pencarian silahkan shobat klik tombol

CTRL

+

F

pada keyboard shobat.

.post-body blockquote {
background: transparent !important}
.post blockquote {
-webkit-user-select:text;
-moz-user-select:text;
-webkit-animation-name: shake;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44AwY0-8ZVrH_lafCpFOVQNwAyjK1U_vHFNcxAffaDoCJCDARQlUXFdB4hdzTSqz9Wu8147KY9cMO0TxXBa89dM6GM7p1J0KihEFTTYjtZp393gegl0hH6RkIr4nD_8IXmkELl5DKL8Vo/s320/M4Mvn.png);
padding:15px;
font:13px  comic sans MS;
border-top:4px Groove #ff6699;
border-bottom:4px groove #ff6699;
border-right:2px dotted #ff6699;
border-left:2px dotted #ff6699;
color:#ff6699;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
blockquote:hover{
background-image :url(https://blogger.googleusercontent.com/img/proxy/AVvXsEg_o2Lqe61xPpS1_JNJKv5vf68-wh9gh6kmn2KhnhE5Jz45GOZeTSCVbe6_3ZZoxwCYGw8omHydfIktuhJBEIVBDAFKkCuUGbBm00EgYb5AEbpY6kGDc1lq2CUrEA=s0-d); padding: 5px;
-webkit-animation-name: none;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
background-image:url(https://blogger.googleusercontent.com/img/proxy/AVvXsEgYKWfDD0xlf2hzH2Hftw0AK88brTLnPcy8yGcULlvOpMEt7qw70WSvszVQ2T-0Jc6FbRpJlDteQJHgFiyy5GqQo2bLDVWpXxc-xrNJMZyhdCYAOZWEPmBB5_iaosuZOSdJu9XbGkV4KTrScOpB3jAtheEtsdOoWiHnEqDbLSpAsCIPdmXEig=s0-d);
background-position:bottom right;
background-repeat:no-repeat;}
@-moz-keyframes shake /* Firefox*/
{
{ -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake /* IE9*/
{
10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

Jika sebelumnya sudah terpasang CSS untuk tag blockquote Shobat bisa menghapusnya atau langsung menggantinya dengan CSS blockquote di atas.

Nah jika sudah selesai silahkan save/simpan.
2. Nah silahkan sobat buat artikel baru, atau mungkin jika sudah ada artikel yang ingin di isi dengan efek blockquote sobat bisa gunakan artikel tersebut. Pada bagian artikel yang di edit silahkan kamu buat tag blockquote contoh:

<blockquote>Text Kalian Di Sini</blockquote>

"Text Kalian Di Sini" Silahkan shobat ganti dengan text yang di bungkus blockquote.
Jika shobat termasuk orang yang kreative shobat bisa mengeditnya lagi.

Nah jika sudah selesai silahkan shobat Publikasikan kembali, lalu lihat hasilnya.

Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog

Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog: Baiklah kali ini blog ID Dzgn akan coba membagikan sedikit tutorial untuk Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog,  biasa di gunakan untuk membuat tombol Download, Preview, dan Buy Now, nah buat kamu yang sudah pernah melihat demo/style yang mirip dengan tutorial berikut ini pasti keren bukan, tutorial ini bertujuan untuk menjadikan blog terlihat lebih Rapi, Keren, dan terlihat lebih Prefesional tentunya. memindahkan element tombol download postingan ke sidebar blog sudah banyak yang menggunakanya terbukti blog mereka menjadi lebih keren rapi, dan tentunya saja seperti yang saya katakan tadi prefesional, karena pengunjung akan betah jika blog yang mereka kunjungi memeliki tampilan yang menarik, rapi, juga keren, pengunjung pastinya akan merasa betah Berlama-lama untuk kunjung.

Bagi yang masih bingung dengan tampilan element template seperti gambar di atas, bisa lihat demonya di bawah ini:

Demo

Oky tampa Basa-basi yuk pasang langsung di blog kamu.

Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog

1. Silahkan buka Blogger>Tema>Edit Html, pada edit html silahkan kamu cari kode ]]></b:skin> lalu silahkan pastekan kode berikut tepat di atasnya, untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard kamu.

/* CSS StoreStyle */
#store-style{overflow:hidden;font-family:'Open Sans',sans-serif;background:#fff;border:1px solid #ddd;padding:25px 10px 10px;margin-bottom:20px}
#store-style .storebutton{background:#07ACEC;color:#fff;font-weight:bold;border-radius:3px;text-align:center;transition:all .4s ease-in-out;position:relative}.rio-ss{padding-top:15px;overflow:hidden}.idb{line-height:1.5;padding:25px 0 5px}
#store-style .storebutton:hover{background:#333;color:#fff}.but1{padding:10px 95px}.but2{padding:10px 84px}
.storelist{padding:12px 10px;border-bottom:1px solid #ddd;width:100%;float:left}
.storelist:last-child{border-bottom:none}
.storelist:before{content:"\f05d";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:400;padding:5px}

2. Nah kalo sudah selesai, selanjutnya silahkan kamu cari kode </head> pastekan kode berikut tepat di atasnya.

<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){ 
$('a[name="details"]').before($('#Theme-details').html()); 
$('#Theme-details').html(''); 
}); 
/*]]>*/
</script>

3. Nah sekarang silahkan kamu cari markup kode sidebar contohnya: aside id='sidebar-wrapper' atau <div id='sidebar-wrapper jika sudah ketemu sekarang silahkan kamu letakan kode berikut tepat di atasnya.

<a name='details'/>
<div class='clear'/>

Tag markup awalan kode sidebar tidak selalu sama, dalam template memiliki strukture kode yang berbeda-beda, maka dari itu kenali terlebih dahulu tag kodenya dengan teliti.

Nah kemungkinan contoh peletakan langkah ke 3 persis seperti gambar di bawah ini.

Nah sekarang silahkan kamu save tema.

4. Sekarang pindah, ke menu Postingan buat postingan baru kamu atau Jika kemungkinan kamu ingin menyisipkan tombol ini dalam postingan yang sebelumnya sudah kamu publikasikan, silahkan kamu edit kembali. lalu pindah dari mode Compose ke HTML lalu letakan kode berikut terserah di bagian mana, tapi untuk menjaga postingan agar tetap terlihat seo di mata pencarian google (Search Engine) letakan kode berikut tepat paling bawah postingan (akhir).

<div style="display:none">

<div id="Theme-details">

<div id="store-style">

<center><a class="storebutton but1" href="#LINK-DEMO" target="_blank">Live Preview</a></center>

<div class="rio-ss idb">

See it live with all the features that exist, both on the homepage and the page posts.</div>

</div>

<div id="store-style">

<center><a class="storebutton but2" href="#LINK-PURCHASE" target="_blank">$5.20 - Buy Now</a></center>

<div class="rio-ss">

<span class="storelist">Support Template Update</span>

<span class="storelist">Remove Footer Credits</span>

<span class="storelist">For Unlimited Domains</span>

<span class="storelist">No Encrypted Scripts</span>

<span class="storelist">Support Color Change</span>

<span class="storelist">And Much More...</span>

</div>

</div>

<div style="clear:both">

</div>

</div>

</div>

Nah nantinya kode di atas akan berpindah secara otomatis ke bagian sidebar blog kamu
Nah ini yang perlu di ketahui, tutorial ini akan otomatis responsive jika template yang kamu gunakan sudah di lengkapi dengan fitur responsive, jadi perlu teliti terlebih dahulu dalam memilih template.

Nah jika kamu ingin yang di tampilkan hanya terlihat text silahkan kamu ganti dengan kode berikut.

<div style="display:none">
<div id="Theme-details">

/* Tulisan yang ingin ditampilkan di sidebar blog. */

<div style="clear:both">
</div>
</div>

Terakhir silahkan kamu Publikasi/simpan lalu pilih pertinjau.
mungkin sampe di sini saja tutorial saya akali ini, semoga bermanfaat ya.

Material Design Membuat Contact Form Di Blog

Material Design Membuat Contact Form Di Blog: Hallo sahabat ID Dzgn kali ini saya akan coba membagikan tutorial untuk cara membuat/memasang contact form di blog.
Contact Form atau biasa di sebut Contact Us pada umumnya banyak keuntungan yang di dapatkan di mana akan mempermudah pengunjung untuk mengirim pesan pribadi langsung ke Admin blog atau web, Pada blogger bawaan contact form sebenarnya sudah di sediakan pada aplikasi widget/gadget blogger namun tampilanya sangat masih sederhana, berbeda dengan contact form/contact us yang akan kita bahas ini sudah menggunakan project terbaru dari google yaitu material design.
banyak designer web yang sudah menambahkan project ini dalam merancang berbagai Struktur kode Html misalnya pada template blog, widget, dan lebih lainya.

Result

Nah tertarik untuk memasangnya??, pemasangan contact form ini begitu mudah untuk lebih lengkap silahkan kamu ikuti tutorialnya di bawah ini.

Material Design Membuat Contact Form Di Blog

1. Silahkan buat laman baru dalam mode HTML/jika sudah ada laman contact form/contact us sebelumnya bisa shobat ganti dengan Html berikut.

<form name="contact-form"><div class="datainput"><input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div><div class="datainput"><input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="highlight"></span> <span class="bar"></span> <label>Email</label> </div><div class="datainput"><textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea> <span class="highlight"></span> <span class="bar"></span> <label>Message</label> </div><input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></form><script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '2097019471312122410';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2097019471312122410','//iddzgn.blogspot.co.id/','2097019471312122410');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '2097019471312122410', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script> <style scoped="scoped">
.datainput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.datainput input,.datainput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.datainput input:focus,.datainput textarea:focus{outline:none}.datainput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.datainput input:focus ~ label,.datainput input:valid ~ label,.datainput textarea:focus ~ label,.datainput textarea:valid ~ label{top:-20px;font-size:14px;color:#5264AE}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.datainput input:focus ~ .bar:before,.datainput input:focus ~ .bar:after,.datainput textarea:focus ~ .bar:before,.datainput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.datainput input:focus ~ .highlight,.datainput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.datainput input:focus ~ label,.datainput input:valid ~ label,.datainput textarea:focus ~ label,.datainput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#2196F3;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style> <div class='clear'></div>
<div style='clear:both;'></div>

2097019471312122410 Silahkan shobat ganti dengan ID blog shobat
//iddzgn.blogspot.co.id/ Silahkan kamu ganti dengan Url situs web kamu.

Nah untuk mendapatkan ID blog kamu silahkan lihat gambar di bawah ini.

Nah bagai mana gampang bukan, jika sudah selesai melalui Langkah-langkahnya di atas, terakhir silahkan kamu Publikasikan/Pertinjau terlebih dahulu untuk melihat hasilnya.

Baca Juga: Cara Membuat Contact Form Style 1 Material Design

Oky mungkin cukup sampe di sini ya, kalo ada masalah yang timbul bisa keluhkan dalam bentuk komentar di bawah ini, tapi jangan dengan kata-kata yang tidak pantas, ok terimakasi sampe ketemu di tutorial ngeblog selanjutnya.

Merubah Tampilan Widget Popular Post Jadi Lebih Keren

Merubah Tampilan Widget Popular Post Jadi Lebih Keren: Baiklah shobat kali ini saya akan coba memberikan tutorial untuk mengubah tampilan widget popular post kamu jadi lebih keren, membuat tampilan web/blog jadi lebih keren itu idaman pasti setiap pemiliknya.
Nah cara penerapanya pun cukup terbilang mudah hanya harus melewati sedikit langkah-langkah di bawah ini maka widget poplart kamu akan terlihat lebih menarik dari sebelumnya.
Populart post dengan tampilan thumbnails bisa memberikan kesan menarik bagi pengunjung (visitor) blog kmau,
Nah bagai mana tertarik memasangnya??? Langsung saja ikuti tutorialnya di bawah ini.

Merubah Tampilan Widget Popular Post Jadi Lebih Keren

1. Pertaman-tama buka Blogger>Tema>Edit Html, nah pada edit html silahkan kamu cari kode ]]></b:skin> lalu pastekan kode berikut tepat di atasnya. untuk mempercepat pencarian kamu bisa klik tombol

CTRL

+

F

di keyboard kamu.

.PopularPosts  h6{color:#e51c23}
.PopularPosts .item-thumbnail{margin:3px 10px 10px 0;border:1px solid #E6E6E6;border-radius:50%;overflow:hidden;display:inline}
.PopularPosts .item-thumbnail a img{height:40px;width:40px;display:block;margin:0;padding:0;border-radius:50%}
.PopularPosts ul{list-style-type:none;background:#fff}.PopularPosts li{margin:0;padding:10px!important}.PopularPosts ul li{margin:10px 5px;padding:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)}.PopularPosts li a{font-weight:700;font-family:'Roboto',sans-serif;font-size:13px;color:#828282!important;transition:all .5s;border:none}.PopularPosts li a:hover{color:#07ACEC!important;border:none}.cloud-label-widget-content{margin-top:10px!important}

Jika di template shobat sebelumnya sudah terpasang css populart post, shobat tinggal ganti dengan css di atas

2. Terakhir silahkan kamu save/simpan tema kamu, lalu lihat hasilnya jika sudah selamat yaa!!

Nah mungkin sampe di sini tutorial saya, bagai mana shobat mudah bukan, jika penerapan di atas tidak memberikan hasil seperti yang di inginkan. shobat bisa mengeluhkan kesalahan ini dalam bentuk komentar di bawah ini terimakasi

Cara Membuat Share Button Efek Show Hide Material Design

Cara Membuat Share Button Efek Show Hide Material Design: Share Button atau biasa di sebut tombol share sosial media sudah tidak asing lagi dengan kata ini, share button adalah aplikasi kecil yang dapat kita di pasang pada blog/web dengan berupa sekumpulan kode CSS, HTML, dan juga JavaScript. Share button banyak memiliki fariasi (style) yang berbeda, misalkan seperti Widget Like Box Melayang Di Blog , sebenarnya kegunaanya sama yaitu untuk mempermudah pengunjung blog yang ingin melakukan sharing artikel ke sosmed mereka, bedanya hanyalah di lengkapi dengan tombol like namun tidak menggunakan efek show hide seperti share button yang akan kita bahas ini.

Result

Share button, banyak Designer-designer web yang mengembangkanya sehinggan memiliki model masing-masing tombol share ini tergantung yang membuatnya. sedangkan untuk tombol yang saya bagikan ini menggunakan efek material design, apa lagi material design gini sudah merambat ke Designer-designer web, sehingga banyak yang mengembangkanya termasuk saya.

Cara Membuat Share Button Efek Show Hide Material Design

Untuk cara pemasanganya memang masih terbilang rumit, namun jelas jika anda punya tekat pasti bisa. hanya butuh kemampuan pemahan yang jeli.
1. Silahkan shobat masuk ke Blogger>Tema>Edit Html, lalu silahkan kamu pastekan kode link CSS berikut tepat di bawah kode <head>, untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboard shobat.

  <link href='https://cdn.rawgit.com/BulshitMan-BM/ID-Dzgn/ce097e4e/Material.css' rel='stylesheet'/>

2. Nah jika sudah, selanjut kamu cari kode </body>, lalu copas kode berikut tepat di atasnya.

<script>
$(window).load(function() {
  var buttonCircles = $(&quot;.nav-circle&quot;);

  $(&quot;.btn-nav&quot;).on(&quot;tap click&quot;, function() {
    $(this).toggleClass(&quot;closed-nav&quot;)
    if ($(this).hasClass(&quot;closed-nav&quot;)) {
      slideDown();
    } else {
      slideUp()
    }
  });

  $(&quot;.round-circle&quot;).click(function() {
    $(&quot;.btn-nav&quot;).toggleClass(&quot;closed-nav&quot;);
    slideUp();
  })
//<![CDATA[
  function slideDown() {

    var topMargin = 20
    for (i = 0; i < buttonCircles.length; i++) {
      topMargin += 85
      $(buttonCircles[i]).animate({
        top: topMargin
      }, function() {
        $(".circle-container, .round-circle").css("visibility", "visible");
        if ($(".fa-plus").hasClass("unRotateIcon")) {
          $(".fa-plus").removeClass("unRotateIcon").addClass("rotateIcon");
        } else {
          $(".fa-plus").addClass("rotateIcon");
        }

      })
    }
  }

  function slideUp() {
    var resetTop = 20
    for (i = 0; i < buttonCircles.length; i++) {
      $(buttonCircles[i]).animate({
        top: resetTop
      }, 400, function() {
        $(".circle-container, .round-circle").css("visibility", "hidden");
        if ($(".fa-plus").hasClass("rotateIcon")) {
          $(".fa-plus").removeClass("rotateIcon").addClass("unRotateIcon");
        } else {
          $(".fa-plus").addClass("unRotateIcon");
        }
      })
    }
  }

});//]]></script>
<div style='clear: both;'/>   <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js'/>

3. Jika sudah sekarang silahkan kamu cari kode bebas ]]></b:skin> atau bisa juga </style> dan paste kode berikut tepat di atasnya.

  .btn-nav {
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #000 !important;
  z-index: 9999;
  height: 60px !important;
  width: 60px !important;
  line-height: 80px !important;
}

.fa-plus {
  color: #fff !important;
  font-size: 2em !important;
  margin-top: 11px;
  font-weight: 300;
}

.plus-container {
  border: 1px solid #fff;
  margin-top: 100px;
  text-align: center;
}

.fa-exp {
  font-size: 6em;
  margin: 0 auto;
  display: block;
}

.round-circle {
  border-radius: 50%;
  background-color: #228a9c;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 20px;
  text-align: center;
  line-height: 80px;
  visibility: hidden;
}

.round-circle > a {
  height: 80px;
  width: 80px;
}
.facebook {    background: rgba(0, 88, 255, 0.83);}
.gplus {background:#de0d00;}
.twitter {background: #00c0dc;}
.phone {    background: #09d248;}
.circle-container {
  visibility: visible;
  position: absolute;
  height: 400px;
  left: 20px;
  width: 100px;
}

.first-circle {
  z-index: 4;
}

.second-circle {
  z-index: 3;
}

.third-circle {
  z-index: 2;
}

.forth-circle {
  z-index: 1;
}

.fixed-container {
  position: fixed;
  z-index: 99999;
  display: block;
}

.fa-nav {
  color: #fff;
  font-size: 25px;
  margin-top: 18px;
}

@-webkit-keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@-moz-keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@-o-keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

.rotateIcon {
  -webkit-animation-name: rotateIcon;
     -moz-animation-name: rotateIcon;
       -o-animation-name: rotateIcon;
          animation-name: rotateIcon;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
}

@-webkit-keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@-moz-keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@-o-keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

.unRotateIcon {
  -webkit-animation-name: unRotateIcon;
     -moz-animation-name: unRotateIcon;
       -o-animation-name: unRotateIcon;
          animation-name: unRotateIcon;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
}

.ua {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #fff;
  font-size: 2em;
}

.fa {
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}

.ua:hover .fa {
   color: #67809F;
   -webkit-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -ms-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}
ul { list-style-type:none; margin:0; padding:0; }

4. Nah jika ketiga tahap di atas sudah kamu selesaikan, sekarang kamu tinggal melakukan tahap terakhir (Memasang Html Share Button), silahkan kamu cari tag pembuka body <body lalu pastekan kode Html berikut tepat di bawahnya.

<div class='fixed-container'>
  <a class='btn-floating btn-large waves-effect waves-light circle btn-nav' rel='nofollow noreferrer'><i class='fa fa-plus' id='icon'/></a>
  <div class='circle-container'>
    <div class='round-circle nav-circle waves-effect waves-teal first-circle facebook'>
    <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Share To Facebook'><i class='fa fa-nav fa-facebook'/></a>
    </div>
    <div class='round-circle nav-circle waves-effect waves-teal second-circle gplus'>
      <a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Share To Google+'><i class='fa fa-nav fa-google-plus'/></a>
    </div>
    <div class='round-circle nav-circle waves-effect waves-teal third-circle twitter'>
            <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share To Twitter'><i class='fa fa-nav fa-twitter'/></a>
    </div>
    <div class='round-circle nav-circle waves-effect waves-teal forth-circle phone'>
      <a href='#contact' rel='nofollow noreferrer'><i class='fa fa-nav fa-phone'/></a>
    </div>
  </div>
</div>

- Sebelum kamu memasang Share Button ini pastikan sudah terpasang Link CSS Font Icon Awesome di template kamu.
- #contact Silahkan kamu ganti dengan Url Contact Us kamu, atau kamu bisa mengubahnya sesuai dengan selera kamu.
- Jika kamu kreative kamu pasti bisa mengubah posisi Share Button ini.
- Jangan Lupa BackUp terlebih dahulu template blog kamu, untuk berjaga-jaga bila nanti terjadi error dalam pemasangan.

5. Terakhir silahkan kamu Save tema/Simpan template kamu, lalu lihat hasilnya.

Oky mungkin sampe di sini dulu tutorial saya kali ini semoga bisa bermanfaat bagi shabat bloggerku semua
jika ada pertanyaan lain silahkan shobat berikan pertanyaan dalam bentuk komentar di bawah.

Cara Merubah Warna ScrollBar Blog Menggunakan CSS

Cara Merubah Warna ScrollBar Blog Menggunakan CSS: Baiklah shobat kali ini saya akan coba membagikan tutorial yang mungkin berguna bagi shobat ku semua, Merubah Warna ScrollBar sebenarnya sudah banyak Situs-situs yang menyajikan tutorial ini, namun banyak pula saya liat ada yang sudah usang kode CSS/Tidak Work lagi untuk versi browser terbaru.
Nah di sini saya menggunakan CSS browser yang menggunakan "webkit", sedikit penjelasan Webkit adalah  salah satu komponen dasar dari pramban web yang biasanya di temukan pada kode CSS.

Result

Nah tampa Basa-basi lagi mari langsung saja ke tutorial pemasanganya di blog kamu.

Cara Merubah Warna ScrollBar Blog Menggunakan CSS

1. Masuk Terlebih dahulu ke Blogger>Tema>Edit Htaml, pada Edit Html silahkan kamu cari kode ]]></b:skin>, Lalu pastekan CSS berikut tepat sebelum kode yang kamu cari sebelumnya. untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard laptop kamu.

::-webkit-scrollbar { width:10px; background:#111; }
::-webkit-scrollbar-thumb { background-color:#F2784Ba; }

- Jika kamu ingin merubah ukuran besar kecilnya ScrollBar, silahkan kamu sesuaikan ukuranya (10px) ganti sesuai dengan ukuran yang kamu inginkan.
- Jika kamu ingin merubah warna dari ScrollBar ini, kamu bisa mengganti kode warna #F2784Ba dengan kode warna yang sesuai dengan selera kamu.
- Ingat Tutorial ini hanya akan berhasil bila browser anda menggunakan komponen CSS "Webkit"

Jika sudah sekarang silahkan kamu Save/Simpan tema kamu, lalu silahkan buka web kamu, Jika berhasil selamat yaa!!!
Oky mungkin sampe di sini saja, sampe bertemu di tutorial selanjutnya.
Jika masih ada kesulitan pemasangan silahkan berikan komentar anda berupa pertanyaan-pertanyaan mengenai cara di atas.

Cara Membuat Table Keren Di Postingan Blog

Cara Membuat Table Keren Di Postingan Blog: Post table bisanya di gunakan pada postingan artikel yang ingin menampilkan jumblah atau formulir data tertentu, saya juga menggunakan post table pada postingan saya, saya menggunakan post table untuk menampilkan Fitur-fitur template yang saya bagikan namun dengan tampilan yang sedikit berbeda.
Post table ini cocok untuk di gunakan di blog/website yang menyediakan resfrensi berbagai jenis penjualan maupun pembelian. Post table ini di gunakan untuk mempercantik artikle yang di publikasikan apalagi artikel tersebut berisikan daftar (Isi atau Fitur) terntentu.

Untuk membuat Post table ini cukup mudah kamu hanya perlu melakukan sedikit tahap dalam pemasangnya.

Cara Membuat Table Keren Di Postingan Blog

Langkah Pertama

Langkah Pertama Kamu masuk ke Blogger kamu, lalu pilih menu Tema, pilih Edit Html. Pada Edit Html silahkan kamu cari kode ]]</b:skin>, lalu pastekan kode CSS berikut tepat sebelum kode yang di cari tadi, untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboard kamu.

/* CSS Post Table */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td{border:1px solid #e9e9e9;padding:10px;text-align:center;vertical-align:top;}
.post-body table th {border:1px solid #029864;padding:15px 8px!important;text-align:center;vertical-align:top;color:#fff;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:bold;text-transform:capitalize;font-size:15px;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.services_list{text-align:left !important}
.services{background:#0f9d58!important;width:28%;overflow:hidden;text-align:center!important;border-left:0}
.free_version,.premi_version,.theme_instal{background:#1dc087!important;width:22%;overflow:hidden;text-align:center!important}
.premi_version{background:#0f9d58!important}
.post-body i.fa-check,.post-body i.fa-times,.post-body i.fa-minus{height:27px;width:27px;line-height:27px;text-align:center;border-radius:99em;color:#fff}
.post-body i.fa-check{background:#83cd30}
.post-body i.fa-times{background:#f13a3a}
.post-body i.fa-minus{background:#ffbd2e}

Jika di template kamu sudah terpasang CSS Post Table sebelumnya kamu bisa menghapusnya atau langsung menggantinya dengan CSS Post Table di atas

Nah jika sudah sekarang silahkan kamu save tema/simpan, Lalu silahkan ikuti cara ke dua berikut ini.

Langkah Kedua

Langkah kedua yang harus kamu lakukan adalah masuk ke menu postingan kamu, buat postingan baru. atau pilih postingan yang ingin kamu sisipkan Post Tablenya,
Pada menu postingan terdapat pilihat Compose dan HTML

Silahkan kamu Pindahkan Mode Compose ke mode HTML, lalu pastekan kode HTML berikut terserah di mau di mana posisinya, tergantung selera kamu.

<div class="buy_now"><table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th class="services">Services</th><th class="free_version">Free Version</th><th class="premi_version">Premium Version</th><th class="theme_instal">Theme + Installation</th></tr>
<tr><td class="services_list">File Documentation</td><td><i class="fa fa-minus" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">Remove Footer Credits</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">One Time Payment</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">No Encrypted Scripts</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">Lifetime Premium Support</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">For Unlimited Domains</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">Lifetime Template Updates</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">Theme Installation Service</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
</tbody> </table></div>

Silahkan kamu ubah sesuai dengan keinginan kamu, jika kamu kreatif kamu pasti tidak pusing untuk masalah seperti ini, Terakhir siklahkan kamu save/Publikasikan.

Silahkan kamu lihat kembali postingan kamu, Jika sudah terpasang selamat.
mungkin sampe di sini dulu postingan saya kali ini, semoga bermanfaat, jika ada kesusahan bisa di tanyakan dengan berkomentar di bawah ini.