Cara Memasang Widget Gallery Instagram Di Footer Blog - d-ii

Cara Memasang Widget Gallery Instagram Di Footer Blog

Cara Memasang Widget Gallery Instagram Di Footer Blog


Tips buat yang ingin memasang Gallery Instagram di bagian Footer Blog, mungkin jika pada suatu saat pernah mengunjungi Blog, kemungkinan ada beberapa yang mungkin sudah tau dan pernah melihat foto Instagram yang ada di footer tersebut yang biasanya sudah terpasang pada template tertentu

Setelah beberapa lama utak-utik baru menemukan untuk memasang di bagian footer agar tertata dengan rapi seperti pada Blog ini, meskipun sedikit kesulitan karena membaca tutorial bahasa inggris karena mungkin belum ada yang menuliskan panduan seperti ini, Sering kali foto instagram merupakan seni juga sih apa bila di tampilkan di situs kita, jadi bisa terasa lebih lama kalo buka blog karena bisa lihat-lihat foto gitu kan?

Nah maka dari itu akan sedikit berbagi perngetahuan untuk memasang Foto/galery di Blog masing-masing, seperti berikut :
1.Pertama memang membutuhkan kode ling widget untuk bisa memasangnya, silahkan bisa mengunjungi di alamat ini https://lightwidget.com/

2.Setelah masuk maka login terlebih dahulu akun instagram kamu, supaya bisa mengatur jumlah foto dan mendapatkan kode nya

3.kemudian setelah masuk akan ada tampilan seperti dibawah ini, lalu baru isi kan berapa jumlah foto/gambar yang akan ditampilkan di blog, seperti dibawah ini


4.Setelah itu Klik Get Code untuk mendapatkan kodenya


5.Selanjutnya maka akan muncul kode widgetnya kemudian di copy terlebih dahulu dan di simpan di nootepad atau lainnya, karena kode ini yang nantinya akan dipakai


6.Selanjutnya masuk pada Blog kemudian pilih Tema dan Edit Html


7.Setelah itu Cari Kode ]]></b:skin> Kemudian Copy kode di bawah ini lalu Paste tepat diatasnya

/** Instagram widget support **/
.instag ul.thumbnails > li {
width:32% !important;
}
.instag ul.thumbnails > li img:hover {
opacity:.8;
}
.instag ul li {
margin:0;
padding-bottom:0;
border-bottom:none;
}
.pllexislider ul li {
margin:0;
padding-bottom:0;
border-bottom:none;
}


8.Setelah itu Copy terlebih dahulu kode di bawah ini kemudian di paste ke nootepad dahulu, karena nanti kode di bawah ini akan sedikit di rubah

<b:section id='Instagram' showaddelement='yes'>
<b:widget id='HTML77' locked='false' title='' type='HTML'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[<!-- LightWidget WIDGET --><script src="//lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/8111162525555555553635525241444.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>

</b:widget>
</b:section>
 
Penjelasan :
Gantikan kode yang berwarna merah dengan kode widget yang tadi sudah di simpan (dan jangan sampai yang lainnya ikut terhapus nanti tidak bisa tampil) hanya menggantikan kode yang berwarna merah mulai dari (<!--) sampai (</inframe>)

9.Setelah itu Cari kode <div id='footer' atau kode  <div class='copyright' , (mencari kode untuk bagian footer, karena setiap template terkadang berbeda)

Kemudian setelah ketemu paste kode tersebut yang sudah di rubah tepat diatas nya, untuk lihat lebih jelas nya pada gambar dibawah ini


Atau mungkin apa bila Template struktur kode nya sama (bisa di pastekan seperti gambar diatas) dengan melihat kode yang di berikan tanda panah sebagai kode (ancer-ancer) sebelum dan setelah yang nantinya akan di paste pada bagian tengah-tengah nya

Setelah itu save kemudian bisa di lihat hasilnya dan "semoga bermanfaat" 

 Cara Memasang Widget Gallery Instagram Di Footer Blog

Author:

#

Artikel Menarik Banget ? d-ii , Suka...

Scroll to top