Cara Menciptakan Slideshow Di Blogger Keren

Slideshow biasanya di gunakan untuk menampilkan beberapa gambar dan keterangan sebuah informasi. Sebuah slideshow di blog biasanya akan menampilkan beberapa artikel dan gambar dari artikel tersebut. Pada tutorial kali ini, ane akan menunjukkan cara menciptakan slideshow di blogger dan pastinya keren.

Baca juga : Cara Membuat Judul Blog dengan Gambar Teks Keren

Untuk rujukan tampilan slideshow nya menyerupai ini, tapi maaf kalau gambar gif kurang lancar.

Slideshow ini dapat kita atur secara manual dan otomatis, kalau agan ingin secara manual, agan harus memasukan beberapa link biar postingan dan tampilan gambar dapat muncul secara maksimal. Namun kalau agan ingin menampilkan slideshow ini secara otomatis agan hanya harus memasukan script code saja.

Bagi yang ingin memasang slideshow ini secara manual, untuk cara pertamanya ane bakalan kasih yang cara manual dulu, lalu gres cara otomatisnya. Untuk cara pasang slideshow keren di blogger ikuti langkah-langkah dari ane.

Baca juga : Cara Praktis Membuat Sitemap Untuk Blog

Cara Memasang Slideshow di Blogger

1. Langkah pertama masuk ke akun Blogger agan.
2. Pilih sajian Tema, nah abis itu pilih tuh Edit HTML.
3. Terus cari arahan ]]></b:skin> atau </style>, yang belom tau cara nyarinya liat keyboard klik Ctrl+F, terus masukin deh arahan dibawah ini di atas arahan tadi.

.easyslider-wrapper {      width: auto;      float: left;      position: relative;      padding-right: 2%;      padding-top: 10px;      } .easyslider {     overflow: hidden;     position: relative;     width: 98%;     height: 290px;     background: #eee; } .image_reel {      position: absolute;      top: 0;      left: 0;      } .image_reel img {      float: left;      width: 20%;      height: 350px;     } .paging {      background: none;      position: absolute;      bottom: 15px;      right: 20px;      padding:4px 0 2px;      z-index: 100;      display: none;      } .paging a {      margin: 3px;      width: 10px;      height:10px;      display: inline-block;      border: none;      outline: none;     border: 2px solid #fff;      border-radius: 10px;     } .paging a.active {      background: #0b84cb;      border: 2px solid #fff;      border-radius: 10px;     } .paging a:hover { } .easytitledes {     width: 70%;     display: none;     position: absolute;     bottom: 20px;     left: 20px;     z-index: 101;     background: #000A3F;     background:rgba(0,0,0,0.7);     padding: 10px 15px;     border-radius: 10px; } .easytitledes a {      color: #fff;     font: 20px open sans;      text-transform: uppercase;      font-weight: bold;      } .easytitledes a:hover {      color:#0b84cb;      } .easytitledes p {      color: #fff;      font: 12px Arial;      }

4. Abis masukin arahan tadi, terus cari lagi arahan </head> masukin arahan di bawah ini di atasnya, kalo udah ada yang sama kaya arahan di bawah ini, ya gak usah di masukin lagi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

5. Masih di atas arahan </head>, masukin lagi arahan di bawah ini pas di atasnya.

<script type="text/javascript"> $(document).ready(function() {     $(".paging").show();      $(".paging a:first").addClass("active");  var imageWidth = $(".easyslider").width();  var imageSum = $(".image_reel img").size();  var imageReelWidth = imageWidth * imageSum;      $(".image_reel").css({'width' : imageReelWidth});  rotate = function(){ var triggerID = $active.attr("rel") - 1;   var image_reelPosition = triggerID * imageWidth;      $(".paging a").removeClass('active');         $active.addClass('active');      $(".easytitledes").stop(true,true).slideUp('slow');     $(".easytitledes").eq(      $('.paging a.active').attr("rel") - 1 ).slideDown("slow");      $(".image_reel").animate({left: -image_reelPosition}, 400 );     };  rotateSwitch = function(){     $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");  play = setInterval(function(){     $active = $('.paging a.active').next();  if ( $active.length === 0) {     $active = $('.paging a:first'); } rotate(); }, 4000); };  rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {     clearInterval(play); }, function() { rotateSwitch();     });     $(".paging a").click(function() { $active = $(this);     clearInterval(play); rotate(); rotateSwitch();  return false;     }); }); </script>

6. Langkah selanjutnya masih ada 2 cara pemasangan, mau manual atau otomatis terserah agan deh.

Baca juga : Cara Membuat Syntax Highlighter Otomatis Tanpa Javascript di Blogger

1. Cara Memasang Slideshow Secara Manual

1. Nah di sini agan harus cari arahan yang pas buat taruh kodenya, kalo agan pake template evo magz, agan cari arahan <div id='post-wrapper'> terus masukin deh arahan di bawah ini pas di bawahnya. Kalo agan pake template lain coba agan cari arahan <div class="main-wrapper"> atau <div id="main-wrapper">, kalo agan pake template bawaan blogger agan cari arahan <div class='blog-posts hfeed'> terus masukin deh arahan di bawah ini pas di bawahnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='easyslider'>    <div class='image_reel'> <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a> <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a> <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a> <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a> <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a>    </div>    <div class='descriptionslider'> <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div> <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div> <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div> <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div> <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div>    </div>    <div class='paging'> <a class='' href='#' rel='1'/> <a class='' href='#' rel='2'/> <a class='' href='#' rel='3'/> <a class='' href='#' rel='4'/> <a class='' href='#' rel='5'/>    </div> </div> </b:if>

• Keterangan :
• Masukin-URL-gambar-disini.jpg : Masukin URL gambar agan disini.
• Masukin-URL-artikel-disini.html : Masukin URL artikel blog agan disini.
• Masukin judul artikel disini : Masukin judul artikelnya disini.
• Masukin deskripsi disini : Masukin deskripsi artikel agan disni.
2. Udah final pilih Simpan tema.

2. Cara Memasang Slideshow Secara Otomatis

1. Kalo otomatis tambahin arahan javascript ini dulu, cari arahan </head>, terus masukin arahan di bawah pas di atasnya.

<script type='text/javascript'>//<![CDATA[ imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmW0ujipqkLuPe8dhtIdWYi5tpppmJVNXRBDm6lhWiWgyJL2twYwf0VfCzXRC-JzmywHGtHihMhDgUGXTYAUCoTTp34XTQOO-xmgu33E-R0EqFVsAm6xiI85LADutDwGmo_bAU7tgGni4/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 5; function removeHtmlTag(strx,chop){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}s =  s.join("");s = s.substring(0,chop-1);return s;} function showrecentposts1(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img  = new Array(); for (var i = 0; i < numposts1; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break; }} for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var trtd = '<div class="easytitledes"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>'; document.write(trtd); j++;}} function showrecentposts2(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img  = new Array(); for (var i = 0; i < numposts1 ; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href;  break; }}for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;}; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++;}} //]]></script>

• Keterangan :
• Silahkan ganti URL gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmW0ujipqkLuPe8dhtIdWYi5tpppmJVNXRBDm6lhWiWgyJL2twYwf0VfCzXRC-JzmywHGtHihMhDgUGXTYAUCoTTp34XTQOO-xmgu33E-R0EqFVsAm6xiI85LADutDwGmo_bAU7tgGni4/s1600/no+image.jpg dengan URL gambar yang agan mau.
2. Sama kaya tadi di sini agan harus cari arahan yang pas buat taruh kodenya, kalo agan pake template evo magz, agan cari arahan <div id='post-wrapper'> terus masukin deh arahan di bawah ini pas di bawahnya. Kalo agan pake template lain coba agan cari arahan <div class="main-wrapper"> atau <div id="main-wrapper">, kalo agan pake template bawaan blogger agan cari arahan <div class='blog-posts hfeed'> terus masukin deh arahan di bawah ini pas di bawahnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='easyslider'>    <div class='image_reel'> <script> document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;); </script>    </div>    <div class='descriptionslider'> <script>          document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;); </script>    </div>    <div class='paging'> <a class='' href='#' rel='1'/> <a class='' href='#' rel='2'/> <a class='' href='#' rel='3'/> <a class='' href='#' rel='4'/> <a class='' href='#' rel='5'/>    </div> </div> </b:if>

3. Udah final pilih Simpan tema, kalo gak berhasil agan harus paham dulu kode-kode di atas.

Baca juga : Cara Membuat Iklan AdSense Berada di Antara Tag Heading

Demikian tutorial dari ane wacana cara menciptakan slideshow di blogger. Kalo ada pertanyaan wacana cara pasang slideshow ini, agan masukin aja ke kolom komentar.

Terima kasih udah mau berkunjung di blog . Untuk tutorial yang lain, agan dapat cari di blog ane ini.

Cara Memasang Script Redirect Uc Browser Ke Chrome Lebih Cepat

UC Browser memanglah browser terbaik untuk menampilkan halaman website tanpa iklan. Namun ini akan berdampak jelek bagi para publisher, khususnya publisher Google AdSense. Dengan banyaknya pengguna UC Browser, maka para publisher akan kehilangan banyak penghasilan. Untuk itulah pada tutorial kali ini saya akan memperlihatkan cara memasang script redirect UC browser ke Chrome dengan gampang dan pastinya cepat.

Script ini bergotong-royong saya dapatkan dari lembaga ads.id, alasannya yaitu kebetulan script auto redirect ini lagi terkenal, hasilnya saya share ke blog saya. Script auto redirect ini mungkin sanggup lebih cepat dari pada script auto redirect yang di share sebelumnya di lembaga ads.id, tapi saya juga belum tahu niscaya seberapa cepat script ini sanggup auto redirect dari UC browser ke Chrome.

(Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense)

Untuk cara memasangnya, pribadi saja ikuti langkah-langkah dari saya di bawah ini.

Cara Memasang Script Redirect UC Browser ke Chrome di Blogger

• Login ke akun Blogger agan
• Pilih sajian Tema, pilih Edit HTML
• Cari instruksi </head>, kemudian masukan instruksi di bawah ini sempurna diatas instruksi </head> tadi

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> <script type='text/javascript'> //<![CDATA[ var noUC = navigator.userAgent; var redirect = noUC.search("UCBrowser"); if(redirect>1) { var axefo = window.location.assign("googlechrome://navigate?url="+ window.location.href); var activity = axefo;document.getElementsByTagName('head')[0].appendChild(activity);} //]]> </script>   </b:if>

• Jika sudah selesai pilih Simpan tema
• Sekarang coba pakai UC Browser, kemudian buka blog agan.
• Catatan : Script ini tidak berfungsi di Browser UC Mini.

(Baca juga : Cara Memasang In-Article Ads Google AdSense Secara Otomatis)

Cara Memasang Script Redirect UC Browser ke Chrome di Wordpress

• Langkah pertama masuk ke Appearance, Editor, kemudian header.php
• Masukan instruksi di bawah ini sempurna di atas instruksi </head>

<script type='text/javascript'> //<![CDATA[ var noUC = navigator.userAgent; var redirect = noUC.search("UCBrowser"); if(redirect>1) { var axefo = window.location.assign("googlechrome://navigate?url="+ window.location.href); var activity = axefo;document.getElementsByTagName('head')[0].appendChild(activity);} //]]> </script>

• Pilih Update File untuk menyimpan
• Sekarang coba masuk ke UC Browser, kemudian buka blog agan

(Baca juga : Cara Memasang Link Menu Navigasi di Blogger)

Demikian tutorial dari saya mengenai cara memasang script redirect UC Browser ke Chrome yang lebih cepat. Jika ada pertanyaan mengenai cara pemasangannya, atau mengenai script redirect ini, silahkan agan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog . Semoga artikel ini bermanfaat, untuk tutorial yang lainnya mengenai Blog dan lain-lain, silahkan tetap kunjungi blog .

2 Cara Termudah Mengganti Template Blog Di Blogger

Template blog yakni hal yang paling penting dalam sebuah blog. Karena dengan template yang bagus, maka pengunjung akan sangat betah berada di dalam blog kita. Mengganti template blog yakni hal yang paling penting, apabila kita ingin membangun sebuah blog yang anggun di mata pengunjung. Untuk itulah pada tutorial kali ini, ane akan menawarkan tutorial perihal 2 cara termudah mengganti template blog di blogger.

Loh kok ada 2 cara gan? Bukannya ganti template itu cuma di upload aja?

Ya betul sekali, cara mengganti template memang ada hanya di upload, tapi bahwasanya ada cara lain yang lebih baik tanpa merusak tampilan tamplate blog tersebut. nah, bagi yang belum tau caranya, ikuti langkah-langkah dari ane berikut ini.

(Baca juga : 3 Tips Jitu Menentukan Template yang Cocok untuk Blog Kita)

2 Cara Termudah Mengganti Template Blog di Blogger

Cara Mengganti Template Secara Otomatis (Upload)

1. Langkah pertama download dulu templatenya, disini ane pakai template Hijau Magazine, untuk template Hijau Magazine dan Tutor Magazine 3D, silahkan download di sini
2. Setelah mendownload Templatenya, lalu extract filenya
3. Kemudian agan buka akun Blogger agan
4. Lalu pilih hidangan Tema, lalu klik Backup / Pulihkan
   
5. Pilih Choose File, lalu cari dan pilih file template yang sudah di extract tadi, lalu pilih Upload
   
6. Template agan berhasil di ganti.

(Baca juga : Download Template Premium Paling Laris 2017, Hijau Magazine V1.0 Template)

Cara Mengganti Template Secara Manual

1. Kalau sudah download templatenya, buka file templatenya dengan Notepad, Caranya klik kanan di file templatenya, pilih Open with, pilih Notepad
   
2. Pilih Ctrl + A pada keyboard lalu copy semua script template yang ada di Notepad tadi
   
3. Setelah di copy, agan tinggal masuk ke akun Blogger agan
4. Pilih Tema, lalu pilih Edit HTML, hapus semua script yang ada di dalamnya, Caranya pilih Ctrl + A pada keyboard, pilih Delete atau Back Space untuk menghapus
   
5. Kemudian masukan script template yang sudah di copy tadi
6. Setelah simpulan pilih Simpan tema.

(Baca juga : Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit)

Untuk laba dan kerugian dari 2 cara mengganti template di atas, silahkan baca di bawah ini.

Keuntungan dan Kerugian Mengganti Template Secara Otomatis (Upload)

Untuk laba yang di sanggup dari mengganti template secara otomatis atau di upload, yakni dari segi widget. Setelah agan mengganti template secara otomatis, widget usang dari blog agan tidak akan hilang, namun bersatu dengan widget template yang baru.

Untuk kerugian dari mengganti template secara otomatis ini yakni juga masih dari segi widget, yaitu widget agan akan bersatu, dan lalu item-item yang lainnya juga akan masuk ke dalam widget, sehingga agan perlu melaksanakan perbaikan untuk beberapa widget di blog agan.

(Baca juga : Cara Menampilkan Menu Penghasilan di Dashboard Blogger)

Keuntungan dan Kerugian Mengganti Template Secara Manual

Untuk laba yang di sanggup dari mengganti template secara manual yakni tampilan templatenya masih orisinil dan widget yang ada juga masih orisinil bawaan dari template blog yang ada. Kemudian kecepatan dari template yang gres di ganti juga masih kecepatan orisinil dari template tersebut.

Untuk kerugian dari mengganti template secara manual ini yakni widget template agan akan hilang, lalu agan harus mengulangi untuk memasang beberapa widget.

(Baca juga : Cara Memasang Script Redirect UC Browser ke Chrome Lebih Cepat)

Demikian tutorial dari saya mengenai 2 cara termudah mengganti template blog di blogger. Jika ada pertanyaan mengenai cara pemasangan template ini, silahkan agan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog , biar artikel tadi bermanfaat untuk agan. Untuk tutorial yang lainnya perihal blog, silahkan tetap kunjungi blog .

Cara Gampang Uninstall Xampp Di Komputer

XAMPP merupakan server yang bangun sendiri, yang sering di pakai oleh web developer. Tapi yang harus di ketahui ialah XAMPP selalu update, jadi hal yang harus kita lakukan ialah meng-uninstall XAMPP dari komputer kita. Untuk itu pada tutorial kali ini, ane akan memperlihatkan cara gampang uninstall XAMPP di Komputer.

(Baca juga : Cara Membuka phpMyAdmin 4.6.5.2)

Namun yang agan harus lakukan sebelum meng-uninstall XAMPP ini ialah agan harus membackup semua file yang sudah ada di dalam XAMPP. Seperti file database dan script-script yang sudah agan buat. Untuk cara membackupnya cukup mudah, agan hanya harus memindahkan file-file yang ada di dalam folder XAMPP ke luar folder tersebut.

Tidak usah panjang lebar, eksklusif saja ikuti langkah-langkah dari ane di bawah ini.

(Baca juga : Cara Export Database MySql dengan phpMyAdmin 4.6.5.2)

Cara Uninstall XAMPP di Komputer

1. Langkah pertama masuk ke tempat penyimpanan XAMPP agan, biasanya ada di Local Disk C
2. Jika sudah ketemu, masuk ke folder XAMPP agan
3. Kemudian cari file uninstall.exe, kemudian klik file tersebut
   
4. Setelah klik file uninstall.exe, pilih Yes untuk memulai uninstall, kalau agan menentukan No, maka proses uninstall di batalkan
5. Kemudian akan muncul pertanyaan lagi, kalau agan menentukan Yes maka file yang berada di htdocs akan di hapus, kalau agan menentukan No, maka file masih ada dan tidak akan di hapus meskipun XAMPP sudah di uninstall
   
6. Setelah proses uninstall selesai, Klik Ok
   
7. Sekarang agan dapat install XAMPP terbaru.

(Baca juga : Cara Import Database MySql dengan phpMyAdmin 4.6.5.2)

Demikian tutorial dari saya mengenai cara gampang uninstall XAMPP di Komputer. Jika ada pertanyaan mengenai cara uninstall atau membackupnya, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog . Untuk tutorial yang lainnya mengenai cara install dan uninstall software komputer, silahkan tetap kunjungi blog .

Cara Gampang Install Xampp 1.7.3 Di Komputer

Setelah sebelumnya ane memperlihatkan tutorial wacana cara gampang uninstall XAMPP di komputer, kali ini ane akan memperlihatkan tutorial wacana cara gampang install XAMPP 1.7.3 di komputer.

(Baca juga : Cara Praktis Uninstall XAMPP di Komputer)

Pengertian XAMPP

XAMPP merupakan beberapa penggabungan beberapa program, yang berfungsi sebagai web server yang sanggup bangun sendiri. XAMPP terdiri atas beberapa agenda yaitu, Apache HTTP Server, MySQL database, dan bahasa pemrograman PHP dan Perl.

XAMPP bersama-sama ialah kependekan dari beberapa kata yaitu.

• X = Maksud dari abjad X ialah software ini sanggup di jalankan di banyak sekali sistem operasi.
• A = Apache, apache ialah web server yang di gunakan untuk menjalankan sebuah halaman dengan isyarat PHP.
• M = MySql, MySql ialah database server yang di gunakan untuk menyimpan data-data yang di buat dengan bahasa Sql.
• P = PHP ialah bahasa pemrograman untuk menampilkan halaman web, dan menciptakan halaman web.
• P = Perl ialah bahasa pemograman yang di gunakan untuk segala keperluan.

Nah, kalau sudah mengetahui pengertian dari XAMPP. Untuk cara install XAMPP 1.7.3, pribadi saja ikuti langkah-langkah dari ane berikut ini.

(Baca juga : Cara Import Database MySql dengan phpMyAdmin 4.6.5.2)

Cara Install XAMPP 1.7.3 di Komputer

1. Langkah cari software XAMPP 1.7.3 yang akan di install
2. Klik kanan pada sofware XAMPP pilih Run as administrator
   
3. Kemudian di kolom Destination folder ada pilihan daerah menyimpan software XAMPP sesudah di install, sebaiknya atur secara default saja, pribadi saja klik Install
   
4. Setelah proses installasi selesai, akan muncul beberapa pertanyaan, jikalau tidak mengerti pribadi saja klik Enter pada keyboard
   
5. Setelah simpulan dengan beberapa step, klik tombol X pada keyboard lalu klik Enter
   
6. Buka Control Panel XAMPP, lalu pilih klik Start pada Apache dan MySql
   
7. Sekarang agan sudah sanggup membuka agenda yang agan inginkan.

(Baca juga : Cara Membuka phpMyAdmin 4.6.5.2)

Demikian tutorial dari ane wacana cara gampang install XAMPP 1.7.3 di komputer. Jika ada pertanyaan mengenai tutorial install XAMPP di atas, silahkan agan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog . Untuk tutorial yang lainnya mengenai XAMPP dan software lainnya, tetap kunjungi blog .

Cara Memasang Komentar Disqus Di Blogger Dengan Mudah

Komentar Disqus yakni sistem komentar paling di gemari oleh para blogger, alasannya banyak mempunyai fitur-fitur yang lebih baik daripada sistem komentar yang lainnya. Karena komentar disqus gampang di gunakan, apalagi sistem komentar disqus yang mobile friendly, yaitu fitur yang sanggup di gunakan di banyak sekali device. Untuk itu pada tutorial kali ini, saya akan menawarkan cara memasang komentar Disqus di blogger dengan mudah.

Akan tetapi agan tidak perlu takut jika komentar yang berada di blogger akan hilang apabila agan memasang komentar disqus ini, alasannya fitur dari sistem komentar disqus yang sanggup mengimport komentar yang sudah ada di blog agan.

Untuk cara memasang komentar disqus di blogger dengan mudah, ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Komentar Disqus di Blogger

• Langkah pertama masuk ke dalam akun Blogger agan
• Kemudian masuk ke halaman Disqus, eksklusif pilih GET STARTED
  
• Silahkan masukan Nama, Email, dan Password yang agan inginkan di form tersebut
  
• Selanjutnya agan pilih I want to install Disqus on my site
  
• Setelah masuk, kini agan isi form registrasi lagi, tujuannya yaitu untuk mendapat URL shortname Disqus untuk blog yang akan agan daftarkan
  
• Keterangan :
• Website Name : Silahkan agan isi dengan Nama blog agan.
• Category : Silahkan pilih kategori blog agan.
• Language : Silahkan pilih bahasa yang agan inginkan.
• Setelah simpulan mengatur, klik Create Site
• Kemudian akan muncul beberapa kolom, daripada gundah eksklusif saja klik Continue on Basic
  
• Selanjutnya agan akan di berikan pilihan daerah agan ingin menambahkan komentar Disqus, disini saya akan mencoba memasang di Blogger, silahkan agan pilih Blogger
  
• Dihalaman selanjutnya silahkan agan klik Add Blog Agan to my Blogger Site
  
• Kemudian agan akan eksklusif masuk ke halaman lain, disini agan sanggup menentukan blog yang akan agan pasangkan komentar disqus, klik Menambah Widget
  
• Sekarang di blog agan sudah terpasang komentar Disqus
• Jangan lupa untuk mengkonfirmasi email agan.

(Baca juga : Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger)

Cara Import Komentar Blog ke Disqus

• Silahkan agan kembali masuk ke halaman sebelumnya, lalu klik Discussions > Import
  
• Setelah masuk ke halaman selanjutnya klik Import comments from Blogger
  
• Silahkan agan masuk ke email agan, klik IZINKAN, pilih blog yang akan agan impor
  
• Sekarang silahkan agan cek artikel blog agan untuk mengecek berhasil atau tidaknya.

(Baca juga : Cara Membuat Widget Komentar Postingan Terbanyak Responsive di Blogger)

Fitur-Fitur Komentar Disqus

• Pengguna blog sanggup mengubah, membagikan komentar ke beberapa sosial media, dan juga sanggup berlangganan komentar.
• Notifikasi email setiap ada komentar gres yang masuk.
• Bisa menambahkan file media ibarat gambar, ataupun video ke dalam komentar.
• Bisa memakai beberapa script code.
• Melihat aktifitas komentar pada situs agan.
• Mengatur gambar avatar default apabila pengunjung tidak memakai avatar.
• Pendeteksi spam.
• Embed komentar di artikel blog.

(Baca juga : Cara Memasang Script Redirect UC Browser ke Chrome Lebih Cepat)

Kelebihan dan Kekurangan Memasang Komentar Disqus di Blog

1. Kelebihan Memasang Komentar Disqus di Blog

• Responsive dan sanggup di gunakan di banyak sekali device.
• Terlihat simple, menarik tapi tidak monoton.
• Disqus juga berfungsi sebagai sosial media semoga sanggup berinteraksi dengan banyak sekali pengguna Disqus lainnya.
• Mencegah komentar yang disertai link.
• Pengaturan sortir komentar sesuai keinginan.

2. Kekurangan Memasang Komentar Disqus di Blog

• Apabila belum mendaftar Disqus, pengunjung akan memakai komentar anonymous.
• Info komentar tidak masuk ke komentar default blogger, melainkan masuk ke Disqus, sehingga mengharuskan agan masuk ke disqus semoga sanggup melihat komentar yang ada.

(Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense)

Demikian tutorial dari saya mengenai cara memasang komentar disqus di blogger dengan mudah. Jika ada pertanyaan mengenai tutorial di atas, dan mengenai cara pemasangannya, silahkan agan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog . Untuk tutorial yang lainnya dari saya mengenai tutorial blogging, silahkan tetap kunjungi blog .

Cara Menciptakan Widget Komentar Terbaru Disqus Di Blog

Komentar Disqus ialah sistem komentar yang paling banyak di gunakan oleh situs-situs besar ibarat CNN, ataupun blog-blog yang sudah populer ibarat Arlina Desing. Komentar disqus sebelumnya ialah komentar yang tidak di kenal, namun sejak banyaknya perbaikan pada sistem komentar ini, kini sistem komentar disqus ialah komentar yang paling sering digunakan. Pada tutorial kali ini saya akan membagikan cara menciptakan widget komentar terbaru disqus di blog.

bagi agan-agan yang ingin belum memakai widget komentar terbaru ini, silahkan ikuti cara ini. Namun bagi yang belum memasang komentar disqus di blog, silahkan lihat dulu caranya di sini.

(Baca juga : Cara Memasang Komentar Disqus di Blogger dengan Mudah)

Widget komentar terbaru disqus ini akan menampilkan beberapa komentar yang ada, baik dari admin maupun pengunjung yang berkomentar di blog. Nah, eksklusif saja untuk cara memasang widget komentar terbaru disqus di blog, ikuti cara dari saya berikut ini.

Cara Memasang Widget Komentar Terbaru Disqus di Blog

• Langkah pertama silahkan masuk ke akun Blogger agan
• pilih sajian Tata Letak, pilih posisi penempatan widget yang agan inginkan, pilih Tambahkan Gadget, pilih HTML/JavaScript, masukan Judul widget, lalu masukan script widget komentar disqus di bawah ini sempurna di kolom Konten

<style scoped="scoped" type="text/css"> #RecentComments{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;} #RecentComments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;} #RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block} #RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400} #RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444} #RecentComments p.dsq-widget-meta a:hover{color:#ff675c} #RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600} #RecentComments li.dsq-widget-item:last-child{border-bottom:none} #RecentComments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;} #RecentComments a.dsq-widget-user:hover{color:#999;} #RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;} #RecentComments .dsq-widget-comment p{display:inline-block;font-size:88%;margin:0;font-weight:400;color:#444} #RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;} #RecentComments .dsq-widget-item pre:hover {opacity:1} #RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;} #RecentComments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0} #RecentComments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent} </style> <div id="RecentComments" class="dsq-widget"> <script defer="defer" type='text/javascript'> //<![CDATA[ document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://tutorialumum.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>"); //]]> </script> <script type='text/javascript'> //<![CDATA[ $("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank'); //]]> </script> </div>

• Pengaturan :
• Silahkan ganti tutorialumum.disqus.com dengan URL admin agan (Untuk Cara Melihat URL admin Disqus agan, silahkan lihat di bawah).
• Setelah final mengatur, silahkan pilih Simpan
• Sekarang lihat blog agan, kalau berhasil maka widget akan muncul ibarat ini.
  

(Baca juga : Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger)

Cara Mengetahui URL Admin Komentar Disqus

1. Langkah pertama login akun Disqus agan
2. Di pojok kanan atas klik thumbnail gambar disqus agan, pilih View Profile
   
3. Masih di arah pojok kanan atas klik icon Settings, pilih Admin
   
4. Jika sudah masuk, kini pilih sajian Your Sites, pilih admin yang sesuai dengan admin blog agan
   
5. Sekarang lihat URLnya, itu ialah URL Admin Disqus-nya.
   

(Baca juga : Cara Membuat Widget Komentar Postingan Terbanyak Responsive di Blogger)

Demikian tutorial dari saya mengenai cara menciptakan widget komentar terbaru disqus di blog. Jika ada pertanyaan mengenai cara pemasangannya, ataupun cara melihat URL admin disqus, silahkan agan masukan kedalam kolom komentar.

Terima kasih sudah berkunjung di blog , biar artikel ini bermanfaat untuk agan dalam membangun sebuah blog. Untuk tutorial yang lainnya dari saya mengenai widget blogger, tutorial blogger, dan tutorial yang lainnya, silahkan tetap kunjungi blog .

Cara Menciptakan Iklan Tautan Adsense Responsif Di Blog

Iklan tautan yaitu iklan yang muncul dengan tampilan menyerupai tombol. Awalnya saya juga sempat resah bagaiman cara memasang iklan menyerupai tombol ini, kemudian saya bertanya kepada sobat saya. Lalu ia menjawab itu ialah iklan tautan, alasannya ialah saya juga ingin menunjukkan ilmu yang saya dapat, untuk itu pada tutorial kali ini, saya akan menunjukkan tutorial cara menciptakan iklan tautan adsense responsif di blog.

Sebelumnya saya sudah jelaskan bahwa iklan tautan ini berbentuk menyerupai tombol, namun teks dari tombol iklan ini sanggup menyesuaikan dengan isi artikel blog, sehingga sangat menguntungkan untuk menambah nilai CTR(Clickthrough Rate). Namun untuk masuk eksklusif ke dalam halaman pengiklan, pengunjung yang mengklik iklan tautan ini harus mengklik iklan lagi biar pengunjung blog agan sanggup masuk ke halaman pengiklan. Kurang lebih teladan stepnya menyerupai ini.

(Baca juga : Cara Memasang In-Article Ads Google AdSense Secara Otomatis)

Ukuran Iklan Tautan Google AdSense

Untuk ukuran dari iklan tautan ini ada aneka macam macam jadi agan tidak perlu kebingungan untuk mengatur iklan tautan ini. Ada juga iklan tautan responsif yang sanggup di gunakan dalam aneka macam device, sehingga sanggup memaksimalkan penghasilan agan. Berikut ialah ukuran dan format iklan tautan Google AdSense :

• Ukuran otomatis (Tautan Responsif).
• 728 × 15 (Horizontal Besar).
• 468 × 15 (Horizontal Sedang).
• 200 × 90 (Vertikal Ekstra Besar).
• 180 × 90 (Vertikal Besar).
• 160 × 90 (Vertikal Sedang).
• 120 × 90 (Vertikal Kecil).

(Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense)

Selanjutnya untuk cara memasang iklan tautan google adsense responsif, ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Iklan Tautan Google AdSense di Blog

1. Langkah pertama masuk ke akun Google AdSense agan
2. Pilih sajian My ads, pilih Ad units, kemudian klik tombol + Unit iklan baru
   
3. Di halaman New ad unit, pilih Text & display ads
   
4. Kemudian di kolom Ukuran iklan, pilih Iklan tautan, kemudian silahkan pilih ukuran yang agan inginkan, disini saya merekomendasikan iklan Tautan Responsif
   
5. Buatlah Nama iklannya sesuai impian agan, silahkan atur Gaya iklan teks, dan Saluran khusus bila di perlukan
6. Jika sudah akibat pilih Simpan dan dapatkan kode
7. Kemudian masuk ke akun Blogger agan, pilih lokasi yang di inginkan agan untuk menempatkan iklan tautan ini.

Catatan : Iklan tautan ini akan menyesuaikan dengan isi artikel ataupun isi blog agan.

(Baca juga : Cara Membuat Iklan AdSense Berada di Antara Tag Heading)

Demikian tutorial singkat dari saya mengenai cara menciptakan iklan tautan adsense responsif di blog. Jika ada pertanyaan mengenai cara pemasangan iklan tautan ini, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog , semoga artikel di atas bermanfaat bagi agan-agan semua. Untuk tutorial yang lainnya mengenai iklan google adsense dan tutorial blog yang lainnya, silahkan tetap selalu kunjungi blog .

Cara Memasang Script Anti Adblock Di Blogger

AdBlock yaitu plugin yang biasa di gunakan para pengguna internet biar lebih gampang berkeliling di dunia maya tanpa melihat iklan yang menggangu. Tetapi ini sangat merugikan bagi para pemilik sebuah situs ataupun website-website yang menjadi publisher dari pengiklan, untuk itulah pada tutorial kali ini saya akan memperlihatkan tutorial cara memasang script anti adblock di blogger.

Langsung saja untuk cara memasang script anti adblock di blogger, ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Memasang Script Redirect UC Browser ke Chrome Lebih Cepat)

Cara Memasang Script Anti AdBlock di Blogger

1. Langkah pertama masuk ke akun Blogger agan
2. Kemudian pilih hidangan Tata Letak, pilih Tambahkan Gadget, pilih HTML/JavaScript
3. Lalu masukan script di bawah ini sempurna di kolom Konten, sementara Judul tidak usah di isi

<style scoped='' type='text/css'>#h237{position:fixed !important;position:absolute;top:0;top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");left:0;width:102%;height:102%;background-color:#fcfcfc;opacity:.99;display:block;padding:7% 0;bottom:0;right:0;z-index:9999!important;}#h237 *{text-align:center;margin:0 auto;display:block;font:bold 14px Verdana,Arial,sans-serif;text-decoration:none}#h237 * a {padding:12px 15px!important;background-color:#f77c6a;color:#fff!important;font-weight:700;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;display:block;margin:15px auto;clear:both;width:20%;transition:all 0.3s ease-out;}#h237 * a:hover {opacity:.9;}#h237   *{display:none}</style><div id="h237"> <span>Mohon Aktifkan Javascript!<a href="http://www.enable-javascript.com/">Enable JavaScript</a></span></div> <script>window.document.getElementById("h237").parentNode.removeChild(window.document.getElementById("h237"));(function(l,m){function n(a){a&&h237.nextFunction()}var h=l.document,p=["i","s","u"];n.prototype={rand:function(a){return Math.floor(Math.random()*a)},getElementBy:function(a,b){return a?h.getElementById(a):h.getElementsByTagName(b)},getStyle:function(a){var b=h.defaultView;return b&&b.getComputedStyle?b.getComputedStyle(a,null):a.currentStyle},deferExecution:function(a){setTimeout(a,250)},insert:function(a,b){var e=h.createElement("span"),d=h.body,c=d.childNodes.length,g=d.style,f=0,k=0;if("h237"==b){e.setAttribute("id",b);g.margin=g.padding=0;g.height="100%";for(c=this.rand(c);f<c;f++)1==d.childNodes[f].nodeType&&(k=Math.max(k,parseFloat(this.getStyle(d.childNodes[f]).zIndex)||0));k&&(e.style.zIndex=k+1);c++}e.innerHTML=a;d.insertBefore(e,d.childNodes[c-1])},displayMessage:function(a){var b=this;a="abisuq".charAt(b.rand(5));b.insert("<"+a+'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdDaPt4TCXLMEgoUsSZMe7m5StZiJymj2CeicRyO1r_5GTopKDQaayJpzGAXGYkApkWAHsaOh2ZLdt9nSxq9KcuKIJsVwLCVvyiYEA6WPnjDWVsZ7UGhOqw68Fv4x33fBfrp2CV4CBpH6Y/s1600/Disable+Adblock.png" height="350" width="699" alt=" yaitu plugin yang biasa di gunakan para pengguna internet biar lebih gampang berkeliling d Cara Memasang Script Anti AdBlock di Blogger" /> <a href="JavaScript:window.location.reload()">Reload</a>'+("</"+a+">"),"h237");h.addEventListener&&b.deferExecution(function(){b.getElementBy("h237").addEventListener("DOMNodeRemoved",function(){b.displayMessage()},!1)})},i:function(){for(var a="DivTopAd,ad-zone-1,ad_190x90,ads-sticky,iqadtile5,leftframeAD,tobsideAd,ad,ads,adsense".split(","),b=a.length,e="",d=this,c=0,g="abisuq".charAt(d.rand(5));c<b;c++)d.getElementBy(a[c])||(e+="<"+g+' id="'+a[c]+'"></'+g+">");d.insert(e);d.deferExecution(function(){for(c=0;c<b;c++)if(null==d.getElementBy(a[c]).offsetParent||"none"==d.getStyle(d.getElementBy(a[c])).display)return d.displayMessage("#"+a[c]+"("+c+")");d.nextFunction()})},s:function(){var a={'pagead2.googlesyndic':'google_ad_client','js.adscale.de/getads':'adscale_slot_id','get.mirando.de/miran':'adPlaceId'},b=this,e=b.getElementBy(0,"script"),d=e.length-1,c,g,f,k;h.write=null;for(h.writeln=null;0<=d;--d)if(c=e[d].src.substr(7,20),a[c]!==m){f=h.createElement("script");f.type="text/javascript";f.src=e[d].src;g=a[c];l[g]=m;f.onload=f.onreadystatechange=function(){k=this;l[g]!==m||k.readyState&&"loaded"!==k.readyState&&"complete"!==k.readyState||(l[g]=f.onload=f.onreadystatechange=null,e[0].parentNode.removeChild(f))};e[0].parentNode.insertBefore(f,e[0]);b.deferExecution(function(){if(l[g]===m)return b.displayMessage(f.src);b.nextFunction()});return}b.nextFunction()},u:function(){var a="ad&adv_keywords=,-page-peel/,/adchain.,/adfootright.,/adsxml/ad,/adyard300.,/impopup/ad,/loadadsparam.,/meme_ad.,_adshare.".split(","),b=this,e=b.getElementBy(0,"img"),d,c;e[0]!==m&&e[0].src!==m&&(d=new Image,d.onload=function(){c=this;c.onload=null;c.onerror=function(){p=null;b.displayMessage(c.src)};c.src=e[0].src+"#"+a.join("")},d.src=e[0].src);b.deferExecution(function(){b.nextFunction()})},nextFunction:function(){var a=p[0];a!==m&&(p.shift(),this[a]())}};l.h237=h237=new n;h.addEventListener?l.addEventListener("load",n,!1):l.attachEvent("onload",n)})(window);</script>

4. Setelah final klik Simpan
5. Sekarang silahkan agan coba gunakan plugin AdBlock pada browser agan, lalu buka blog agan untuk mencoba.

(Baca juga : Cara Memasang Komentar Disqus di Blogger dengan Mudah)

Dampak Pemasangan Script Anti AdBlock bagi Pemilik Situs/Blog

Dampak Positif Pemasangan Script Anti AdBlock

• Penghasilan menjadi seorang publisher tidak berkurang, sebab adanya peringatan bagi para pengguna AdBlock untuk menonaktifkan AdBlock mereka.
• PageView akan bertambah jikalau visitor kembali lagi sehabis menonaktifkan adblock mereka.

Dampak Negatif Pemasangan Script Anti AdBlock

• Visitor tidak jadi mengunjungi blog agan sebab halaman yang di inginkan tidak eksklusif terlihat.
• Bounce rate akan naik, dan rangking artikel blog agan akan menurun.

(Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense)

Demikian tutorial dari saya mengenai cara memasang script anti AdBlock di blogger. Jika ada pertanyaan mengenai cara pemasangan script anti adblock ini, ataupun imbas dari pemasangan script anti adblock ini, silahkan masukan kedalam kolom komentar.

Terima kasih sudah berkunjung di blog , semoga artikel ini bermanfaat untuk agan dan sista. Untuk tutorial yang lainnya mengenai blog, tetap kunjungi blog . 

Membuat Widget Social Media Button Flat Design Di Blog

Social media button atau biasa di sebut tombol sosial media, di gunakan untuk menghubungkan beberapa sosial media yang kita miliki biar pengunjung dapat eksklusif berinteraksi dan melihat sosial media yang kita miliki. Namun kali ini yang berbeda ialah tombol sosial media ini memakai flat design yang kekinian, untuk itulah pada tutorial kali ini saya akan menawarkan cara menciptakan widget sosial media button dengan effect flat design.

Widget ini ialah widget yang ringan alasannya ialah tidak memakai javascript, dan hanya memakai script CSS dan HTML saja. Makara agan tidak perlu takut untuk memasang widget social media button flat design ini. Sedikit isu saja, flat design ini di populerkan oleh Google, dan banyak di gunakan dalam banyak sekali produk google.

(Baca juga : Cara Membuat Gambar Flat Design Ala Blog)

Bagi yang belum tahu bagaimana cara memasang widget social media button flat design ini, ikuti langkah-langkah dari saya.

Cara Memasang Widget Social Media Button Flat Design di Blog

• Langkah pertama masuk ke akun Blogger agan
• Kemudian pilih sajian Tata Letak, klik Tambahkan Gadget di daerah yang agan inginkan, klik HTML/JavaScript
• Masukan Judul widget sesuai harapan agan, kemudian masukan script di bawah ini pada kolom Konten

<style> .simplifymedsos a{ position: relative;     display: inline-block;     text-align: center;     color: #fff;     font-size: 26px;     text-decoration: none;     line-height: 48px;     width: 48px;     height: 48px;     overflow: hidden;     background: #000;     -webkit-border-radius: 50%;     -moz-border-radius: 50%;     -ms-border-radius: 50%;     -o-border-radius: 50%;     border-radius: 50%;     -moz-transition: 0.5s;     -o-transition: 0.5s;     -webkit-transition: 0.5s;     transition: 0.5s;     -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.35);     -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.35);     -o-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.35);     -ms-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.35);     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.35); } .simplifymedsos a i{ }  .simplifymedsos .facebook{ background: #3b5998;     text-shadow: 0px 0px #2d4278, 1px 1px #2d4278, 2px 2px #2d4278, 3px 3px #2d4278, 4px 4px #2d4278, 5px 5px #2d4278, 6px 6px #2d4278, 7px 7px #2d4278, 8px 8px #2d4278, 9px 9px #2d4278, 10px 10px #2d4278, 11px 11px #2d4278, 12px 12px #2d4278, 13px 13px #2d4278, 14px 14px #2d4278, 15px 15px #2d4278, 16px 16px #2d4278, 17px 17px #2d4278, 18px 18px #2d4278, 19px 19px #2d4278, 20px 20px #2d4278, 21px 21px #2d4278, 22px 22px #2d4278, 23px 23px #2d4278, 24px 24px #2d4278, 25px 25px #2d4278, 26px 26px #2d4278, 27px 27px #2d4278, 28px 28px #2d4278, 29px 29px #2d4278, 30px 30px #2d4278; } .simplifymedsos .twitter{ background: #00aced; text-shadow: 0px 0px #0087ba, 1px 1px #0087ba, 2px 2px #0087ba, 3px 3px #0087ba, 4px 4px #0087ba, 5px 5px #0087ba, 6px 6px #0087ba, 7px 7px #0087ba, 8px 8px #0087ba, 9px 9px #0087ba, 10px 10px #0087ba, 11px 11px #0087ba, 12px 12px #0087ba, 13px 13px #0087ba, 14px 14px #0087ba, 15px 15px #0087ba, 16px 16px #0087ba, 17px 17px #0087ba, 18px 18px #0087ba, 19px 19px #0087ba, 20px 20px #0087ba, 21px 21px #0087ba, 22px 22px #0087ba, 23px 23px #0087ba, 24px 24px #0087ba, 25px 25px #0087ba, 26px 26px #0087ba, 27px 27px #0087ba, 28px 28px #0087ba, 29px 29px #0087ba, 30px 30px #0087ba; } .simplifymedsos .googleplus{ background: #dd4a3a;     text-shadow: 0px 0px #c23122, 1px 1px #c23122, 2px 2px #c23122, 3px 3px #c23122, 4px 4px #c23122, 5px 5px #c23122, 6px 6px #c23122, 7px 7px #c23122, 8px 8px #c23122, 9px 9px #c23122, 10px 10px #c23122, 11px 11px #c23122, 12px 12px #c23122, 13px 13px #c23122, 14px 14px #c23122, 15px 15px #c23122, 16px 16px #c23122, 17px 17px #c23122, 18px 18px #c23122, 19px 19px #c23122, 20px 20px #c23122, 21px 21px #c23122, 22px 22px #c23122, 23px 23px #c23122, 24px 24px #c23122, 25px 25px #c23122, 26px 26px #c23122, 27px 27px #c23122, 28px 28px #c23122, 29px 29px #c23122, 30px 30px #c23122; } .simplifymedsos .rssfeed{ background:#ee802f;     text-shadow: 0px 0px #da7224, 1px 1px #da7224, 2px 2px #da7224, 3px 3px #da7224, 4px 4px #da7224, 5px 5px #da7224, 6px 6px #da7224, 7px 7px #da7224, 8px 8px #da7224, 9px 9px #da7224, 10px 10px #da7224, 11px 11px #da7224, 12px 12px #da7224, 13px 13px #da7224, 14px 14px #da7224, 15px 15px #da7224, 16px 16px #da7224, 17px 17px #da7224, 18px 18px #da7224, 19px 19px #da7224, 20px 20px #da7224, 21px 21px #da7224, 22px 22px #da7224, 23px 23px #da7224, 24px 24px #da7224, 25px 25px #da7224, 26px 26px #da7224, 27px 27px #da7224, 28px 28px #da7224, 29px 29px #da7224, 30px 30px #da7224; } .simplifymedsos .facebook:hover {     color: #3b579d;     opacity: 1;     /* transform: rotate(360deg); */     background: #fff;     text-shadow: 0px 0px #d4d4d4, 1px 1px #d4d4d4, 2px 2px #d4d4d4, 3px 3px #d4d4d4, 4px 4px #d4d4d4, 5px 5px #d4d4d4, 6px 6px #d4d4d4, 7px 7px #d4d4d4, 8px 8px #d4d4d4, 9px 9px #d4d4d4, 10px 10px #d4d4d4, 11px 11px #d4d4d4, 12px 12px #d4d4d4, 13px 13px #d4d4d4, 14px 14px #d4d4d4, 15px 15px #d4d4d4, 16px 16px #d4d4d4, 17px 17px #d4d4d4, 18px 18px #d4d4d4, 19px 19px #d4d4d4, 20px 20px #d4d4d4, 21px 21px #d4d4d4, 22px 22px #d4d4d4, 23px 23px #d4d4d4, 24px 24px #d4d4d4, 25px 25px #d4d4d4, 26px 26px #d4d4d4, 27px 27px #d4d4d4, 28px 28px #d4d4d4, 29px 29px #d4d4d4, 30px 30px #d4d4d4; } .simplifymedsos .twitter:hover {     color: #00aced;     background: #fff;     text-shadow: 0px 0px #d4d4d4, 1px 1px #d4d4d4, 2px 2px #d4d4d4, 3px 3px #d4d4d4, 4px 4px #d4d4d4, 5px 5px #d4d4d4, 6px 6px #d4d4d4, 7px 7px #d4d4d4, 8px 8px #d4d4d4, 9px 9px #d4d4d4, 10px 10px #d4d4d4, 11px 11px #d4d4d4, 12px 12px #d4d4d4, 13px 13px #d4d4d4, 14px 14px #d4d4d4, 15px 15px #d4d4d4, 16px 16px #d4d4d4, 17px 17px #d4d4d4, 18px 18px #d4d4d4, 19px 19px #d4d4d4, 20px 20px #d4d4d4, 21px 21px #d4d4d4, 22px 22px #d4d4d4, 23px 23px #d4d4d4, 24px 24px #d4d4d4, 25px 25px #d4d4d4, 26px 26px #d4d4d4, 27px 27px #d4d4d4, 28px 28px #d4d4d4, 29px 29px #d4d4d4, 30px 30px #d4d4d4; } .simplifymedsos .googleplus:hover { color: #dd4a3a; background: #fff;     text-shadow: 0px 0px #d4d4d4, 1px 1px #d4d4d4, 2px 2px #d4d4d4, 3px 3px #d4d4d4, 4px 4px #d4d4d4, 5px 5px #d4d4d4, 6px 6px #d4d4d4, 7px 7px #d4d4d4, 8px 8px #d4d4d4, 9px 9px #d4d4d4, 10px 10px #d4d4d4, 11px 11px #d4d4d4, 12px 12px #d4d4d4, 13px 13px #d4d4d4, 14px 14px #d4d4d4, 15px 15px #d4d4d4, 16px 16px #d4d4d4, 17px 17px #d4d4d4, 18px 18px #d4d4d4, 19px 19px #d4d4d4, 20px 20px #d4d4d4, 21px 21px #d4d4d4, 22px 22px #d4d4d4, 23px 23px #d4d4d4, 24px 24px #d4d4d4, 25px 25px #d4d4d4, 26px 26px #d4d4d4, 27px 27px #d4d4d4, 28px 28px #d4d4d4, 29px 29px #d4d4d4, 30px 30px #d4d4d4; } .simplifymedsos .rssfeed:hover { color: #ee802f; background: #fff;     text-shadow: 0px 0px #d4d4d4, 1px 1px #d4d4d4, 2px 2px #d4d4d4, 3px 3px #d4d4d4, 4px 4px #d4d4d4, 5px 5px #d4d4d4, 6px 6px #d4d4d4, 7px 7px #d4d4d4, 8px 8px #d4d4d4, 9px 9px #d4d4d4, 10px 10px #d4d4d4, 11px 11px #d4d4d4, 12px 12px #d4d4d4, 13px 13px #d4d4d4, 14px 14px #d4d4d4, 15px 15px #d4d4d4, 16px 16px #d4d4d4, 17px 17px #d4d4d4, 18px 18px #d4d4d4, 19px 19px #d4d4d4, 20px 20px #d4d4d4, 21px 21px #d4d4d4, 22px 22px #d4d4d4, 23px 23px #d4d4d4, 24px 24px #d4d4d4, 25px 25px #d4d4d4, 26px 26px #d4d4d4, 27px 27px #d4d4d4, 28px 28px #d4d4d4, 29px 29px #d4d4d4, 30px 30px #d4d4d4; } </style>  <div class="simplifymedsos" style="margin: 5px;"> <a class="facebook" href="www.link-URL-sosial-media-agan.com" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a> <a class="twitter" href="www.link-URL-sosial-media-agan.com" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a> <a class="googleplus" href="www.link-URL-sosial-media-agan.com" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i></a> <a class="rssfeed" href="www.link-URL-sosial-media-agan.com" rel="nofollow" target="_blank"><i class="fa fa-rss"></i></a> </div>

• Pengaturan :
• Silahkan ganti www.link-URL-sosial-media-agan.com dengan URL sosial media agan.
• Contoh : https://www.facebook.com/TutorialUmumBlog/?ref=settings
• Setelah simpulan mengatur, pilih Simpan
• Sekarang tombol sosial media yang keren sudah agan pasang di blog.
  

(Baca juga : Cara Membuat Author Box dengan Social Media Buttons)

Demikian tutorial yang singkat dari saya mengenai cara menciptakan widget social media button flat design. Untuk pertanyaan mengenai widget sosial media ini, silahkan agan masukan kedalam kolom komentar.

Terima kasih sudah berkunjung di blog , semoga artikel ini bermanfaat bagi agan atau sista. Untuk tutorial yang lainnya mengenai blogging, silahkan tetap kunjungi blog .