Home Search results for Cara Menambahkan Tombol Ikuti Di Facebook

Cara Menambahkan Tombol Pin It (Pinterest) Pada Gambar Blog

  
Cara Menambahkan Tombol Pin It (Pinterest) Pada Gambar Blog

Seperti yang telah kita ketahui bersama bahwa media sosial yg terdapat saat ini sangatlah banyak, mulai dari Facebook, Instagram, Whatsapp dan sebagainya. Tapi tahukah anda tentang sosial media yang bernama Pinterest?

Ya sosial media ini merupakan jenis sosial media baru yg belakangan sempat menjadi perbincangan di kelompok anak muda. Pinterest sendiri adalah sebuah sosial media yg hampir mirip dengan instagram perbedaannya pada Pinterest lebih memfokuskan buat menyebarkan foto/gambar.

Karena lebih memfokuskan sebagai media menyebarkan gambar, maka tentunya kamu akan melihat berbagai gambar-gambar di sosial media ini. Dari mulai gambar yg berbau sport, lifestyle, hobi, anime, hingga education semuanya ada di Pinterest.

Nah khusus bagi anda para blogger yang aktif di sosial media Pinterest tentunya tidak akan melewatkan kesempatan ini, sebab di sosial media ini terdapat berbagai member yang aktif dan sangat antusias terhadap setiap gambar yang di share.

Oleh sebab itu dalam kesempatan kali ini aku akan mencoba menyebarkan sebuah cara untuk menambahkan tombol Pin It dalam blog. Dengan adanya tombol ini, maka setiap pengunjung yang tiba bisa bersama gampang membagikan gambar-gambar yg ada dalam blog kamu.

Untuk dapat menciptakan Tombol Pin It ini maka anda hanya perlu memasukkan kode tambahan kedalam tema blog kamu. Mau tahu bagaimana caranya? Simak ulasan cara menambah tombol Pin It kedalam gambar blog, berikut:

Baca Juga: Cara Menerapkan Adblocker Killer/Penghancur Adblocker Terbaru Di Blogger

1. Silahkan masuk ke blogger.com
2. Pilih Tema>Edit HTML
3. Tambahkan kode berikut sebelum kode </body> atau sebelum kode </head>
<script async='' data-pin-color='white' data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js'/>
Catatan:
Sebelum menambahkan kode tersebut, pastikan template blog kamu sudah masih ada kode jquery.4. Simpan Tema
Baca Juga

Bagaimana sobat? Mudah sekali bukan, hanya dengan memasukkan sedikit kode kedalam tema blog maka tombol Pin It Pinterest akan timbul disetiap gambar yg kamu bagikan pada blog kamu. Semoga cara simpel ini bisa bermanfaat untuk kamu ya. Terimakasih.

Cara Memasang Widget Recent Post Slider Di Sidebar Blog

  

Jika sering kali widget recent post hanya berbentuk link beserta beberapa gambar tumbnail yg menuju ke postingan terbaru, namun pada kesempatan kali ini admin akan mencoba menunjukkan sebuah cara buat menciptakan wigdet recent post slider.

Widget yang akan saya bagikan ini tidak sama dengan kebanyakan recent post yg ada. Widget ini berbentuk sebuah kotak dengan beberapa tumbnail postingan terbaru yang sanggup digeser atau di slide baik secara otomatis maupun manual.

Widget recent post slider ini sebetulnya bukanlah hal baru, mungkin anda pernah melihat widget ini di beberapa situs di internet, namun kamu tidak tahu apa nama widget tersebut, serta bagaimana cara mengolahnya?

Tapi tenang, lantaran dalam saat ini admin akan menunjukkan kepada anda cara menciptakan widget recent post slider tersebut. Penasaran bagaimana caranya? Silahkan ikuti panduannya dibawah ini:

Baca Juga: Cara Membuat Tombol Back To Top Pure Javascript Di Blogger

1. Login ke blogger
2. Masuk ke Tata Letak>Tambahkan Gadget>HTML/Javascript
3. Copy kode berikut, serta paste di halaman tadi
<style scoped="" type="text/css">ul.rcentside *-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box ul.rcentsidefont-size:11pxul.rcentside,ul.rcentside limargin:0;padding:0;list-style:none;position:relative ul.rcentsidewidth:100%;height:500px ul.rcentside liheight:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4)display:block ul.rcentside imgborder:0;width:100%;height:autoul.rcentside li:nth-child(1)width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 ul.rcentside li:nth-child(2)left:0;top:50% ul.rcentside li:nth-child(3)left:50.5%;top:50% ul.rcentside li:nth-child(4)width:100%;left:0;top:75% ul.rcentside .overlayx,ul.rcentside litransition:all .4s ease-in-out ul.rcentside .overlayxwidth:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiP9ULZTPK39Whzjme5Sa29Agv7sM6xsD6qPsC5Wy8JD6w4wYQ_IKMgm-P68lqxBWix-uDuA-num_I2Liypd7tFkwZNNzAJ81ybBf3VkmtlSPBAmEPc4_glblcc77xTW5MQR2QtwyXy1Y/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x ul.rcentside .overlayx,ul.rcentside imgmargin:3pxul.rcentside li:nth-child(1).overlayxbackground-position:50% 25% ul.rcentside .overlayx:hoveropacity:.1 ul.rcentside h4position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3sul.rcentside li:hover h4bottom:30pxul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4font-size:150% ul.rcentside .label_textposition:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3sul.rcentside li:hover .label_textbottom:20px;opacity:1ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autnamedisplay:none .buttonsmargin:5px 0 0 .buttons adisplay:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative .buttons a::beforecontent:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% .buttons a.nextx::beforeborder-color:transparent transparent transparent #535353;margin-left:-3px </style><div id="featuredpostside"></div><script type='text/javascript'>function FeaturedPostSide(a)(function(e)var h=blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false;h=e.extend(,h,a);var g=e(h.idcontaint);var d=h.maxpost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w)var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++)for(var n=0;n<s[o].link.length;n++)if(s[o].link[n].rel=="alternate")q=s[o].link[n].href;breakif("media$thumbnail" in s[o])u=s[o].media$thumbnail.url.replace(//s[0-9]+-c/g,"/s"+h.imageSize+"-c")elseu=h.pblank.replace(//s[0-9]+(-ck=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.monthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"e("ul",g).append(l).addclass(h.loadingClass);var c=function()e(h.idcontaint+" .nextx").click();var b=function()e.get((h.blogURL===""?Window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagname===false?"":"/-/"+h.tagname)+"?Max-results="+h.maxpost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function()e(h.idcontaint+" .prevx").click(function()e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false);e(h.idcontaint+" .nextx").click(function()e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false);if(h.autoplay)var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function()clearInterval(j),function()j=setInterval(c,i))e("ul",g).removeClass(h.loadingClass),d);e(document).ready(b))(jQuery);//<![CDATA[FeaturedPostSide( blogURL: "https://tipsblogmfs.blogspot.com", MaxPost: 8, idcontaint: "#featuredpostside", ImageSize: 300, interval: 5000, autoplay: true, tagName: false);//]]></script>

Keterangan:
  • blogURL: ganti dengan URL blog anda
  • MaxPost: Jumlah postingan
  • ImageSize: kapasitas gambar
  • interval: waktu yang dibutuhkan dikala post slider berpindah
  • autoplay: true : mengaktifkan auto slider, buat merubahnya ubah menjadi "autoplay:false"
  • tagName: false : mematikan nama label, untuk menambahkan artikel terbaru berdasarkan label, ubah false menjadi nama label yang diinginkan. Misal: blogger
4. Simpan widget, serta lihat hasilnya pada blog anda
Baca Juga

Nah itu beliau cara memasang widget recent post berbentuk slider. Dengan adanya widget ini maka para pengunjung akan lebih tertarik buat mengunjungi postingan terbaru kamu.