Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Friday, October 4, 2019

- October 04, 2019

Cara Membuat Scrollbar di Blog Dengan Mudah

Membuat Scrollbar di Blog

Memperindah scrollbar di blog mempunyai daya tarik tersendiri selain berfungsi sebagai hiasan yang dapat mempercantik tampilan blog anda dengan menambahkan effect-effect ini dapat membuat ciri khas dari blog kita sehingga pengunjung blog dapat menjadi tertarik dengan blog anda.

Membuat scrollbar effect di blog ini juga tidak terlalu sulit dan terbilang sangat mudah selain itu juga anda bisa merubah warna dari effect dengan kode warna yang sudah tersedia di internet, atau kode di bawah sesuai selera masing-masing bila anda berminat memasang nya di blognya.

Jadi untuk menerapkan cara tersebut cukup dengan menggunakan kode HTML ke template blog yang saya akan uraikan lebih detail dibawah beserta dengan tutorialnya anda hanya simak dan salin kode tersebut ke blog nya nanti setelah di paparkan berikut ini.

Cara Membuat Scrollbar di Blog

1. Masuk di Dasbor Blogger 
2. Buka halaman Template lalu pilih menu Tema
3. Klik pada tombol Edit HTML
4. Klik di mana saja di area kode
5. Tekan tombol [Control + F] atau [Command + F] untuk membuka kotak pencarian di sudut kanan atas jendela kode, kemudian tuliskan kode ]]></b:skin>
6. Tekan tombol Enter untuk mencari, jika sudah anda menemukan kode ]]></b:skin> kemudian salin dan tempelkan kode HTML berikut dibawah tepat di atas kode ]]></b:skin>

/* scrollbar effect */
::-webkit-scrollbar {
width:15px; height:7px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba( 106, 53, 42 );
background:#FFE5CC;
}
::-webkit-scrollbar-thumb {
background: rgba(28,119,229,0.7);
-webkit-box-shadow: inset 0 0 6px rgba( 205, 59, 28 );
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba( 238, 180, 168 );
7. Kemudian Save Template
Keterangan:
Anda bisa ganti #FFE5CC dengan kode warna yang anda inginkan.
Untuk ukuran ganti lebar scrollbar rubah angka yang sudah di beritanda warna merah width:15px; height:7px

Demikian cara membuat scrollbar di blog dengan mudah. semoga bermanfaat dan terimakasih atas kunjungannya. dan bisa anda memberikan komentarnya dibawah postingan ini. mohon dipahami jikalau ada salah eja dari isi artikel singkat nya wasalam salam blogger.

Tuesday, August 20, 2019

- August 20, 2019

Cara Tambah Widget Komentar Terbaru Pada Sidebar

Tambah Widget Komentar Terbaru Pada Sidebar

Para pemilik blog pasti sudah tidak asing lagi dengan widget yang satu ini. Seperti apakah widget yang di maksud? yaitu widget recent comments (widget komentar terbaru), fungsi dari widget ini adalah menampilkan aktivitas komentar terbaru dari pengunjung yang mengomentari postingan artikel pada situs blog dan bisa di tampilkan pada widget sidebar.

Walaupun demikian, masih banyak yang belum tahu bagaimana caranya agar bisa menampilkanya ke sidebar blognya, bagi yang belum tau cara pasang nya maka dalam artikel ini saya akan membagikan beberapa langkah dan cara agar blog anda mempunyai widget recent comments, Caranya mudah hanya menambahkan kode HTML Java script pada template blog.

Berikut adalah Cara Memasang Kode Widget Komentar Terbaru:
1. Masuk ke akun Blogger
2. Pilih menu Tema
3. Lalu Klik Edit HTML
4. Cari kode </head> untuk memudahkan nya tekan CTRL F Bersamaan
5. Lalu salin dan tempelkan kode HTML Java script dibawah tepat diatas kode </head>

<script type='text/javascript'> //<![CDATA[ function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#comment-");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a> commented');if(n_rc==true)document.write(' on '+f_rc);document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i><br/><br/>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i>');document.write('<br/><br/>');}}} //]]> </script>

6. Lalu simpan Tema dan agar bisa tampil widget komentar terbaru ke sidebar blog blogger Anda, langkah selanjutnya adalah pergi ke "Tata Letak " halaman blog Anda lalu "tambahkan gadget " pada bagian sidebar atau yang lain di mana Anda ingin munculkan widget komentar terbaru.

7. Pilih "HTML/JavaScript " pada widget
8. Dan salin kode di bawah ini ke dalam "HTML/JavaScript " widgetnya.

<script>var a_rc = 5; var m_rc = false; var n_rc = true; var o_rc = 100;</script> <script src="https://www.iyaseo.id/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
Catatan:
Ganti url blog yang diberi tanda warna merah dengan url blog milik anda dan anda juga dapat mengubah angka 5 berapa banyak komentar yang harus tampilkan dalam widget komentar terbaru atau sesuaikan setelannya sesuai yang anda inginkan.

9. Langkah terakhir simpan dan muat ulang situsblog Anda. dan lihat apakah widget Komentar terbaru ini bisa berfungsi pada situsblog anda.




Demikian sudah Cara Tambah Widget Komentar Terbaru Pada Sidebar. Jika tidak berhasil silahkan sampaikan di kolom komentar di bawah, ya. Nanti bisa di bantu sampai bisa.

Friday, August 2, 2019

- August 02, 2019

Cara Mudah Membuat Widget Label Posts Keren

label posts blog blogger


Sahabat blogger artikel kali ini saya akan berbagi tentang bagaimana cara membuat widget label post yang keren di sidebar blog blogger. Sebenarnya widget label ini sudah banyak pengguna blogger yang menggunakanya dan juga sudah banyak postingan artikel blog tentang widget label posts, namun saya juga ingin memposting artikel terkait dengan widget label tersebut agar blog ini bisa seperti mereka dan khususnya bisa berada di pencariaan google.

Karena hari ini admin baru sempat memposting artikel disebabkan oleh keterbatasan waktu sebab kebelakangan ini hanya menghabiskan waktu dan aktivitas mengotak-atik template blog ini agar bisa tampilan nya seperti sekarang ini itupun masih ada yang kurang entar kapan-kapan di refisi lagi, dan barulah hari ini saya admin bisa berbagi tentang hal ini kepada sahabat blogger semuanya.

Sebenarnya cara membuat widget label posts keren disidebar blog sangatlah mudah, semudah pada saat membuat popular post di blog yang sempat kemarin saya bahas dalam artikel blog ini. Pada dasarnya widgets label posts ini sudah ada semenjak kita mulai membuat blog blogger(default).

Widgets label posts bisa dibuat dengan menggunakan berbagai macam kode-kode, diantara nya CSS HTML Javascript. Namun untuk pengguna blogger yang belum mengerti cara menerapkan CSS HTML Javascript dan masih tetap memakai atau menggunakan widget label standar blogger.

Dan jika ingin membuat tampilan widget label posts nya lebih keren lagi di blognya, maka sahabat blogger yang masih baru tidak perlu khawatir karena masih banyak jalan untuk belajar dan solusinya di bawah ini adalah salah satu cara membuat widgets label posts yang keren yang nantinya bisa anda terapkan di blog bloggernya.

Berikut Cara Memasang Widget Label Posts di Blog Blogger;


1. Masuk ke Dasbor Blogger dengan akun Google Blogger Anda

2. Pilih dan Klik Tema > Lalu > Edit HTML

3. Selanjutnya Cari kode ]]></b:skin> untuk memudahkan nya tekan CTRL F Bersamaan

4. Lalu salin dan tempelkan kode dibawah tepat di atas kode ]]></b:skin>

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.label-size {background:#fff;display:block;float:left;margin:0 4px 4px 0;color:#999;font-size:11px;line-height:1.2;}
.label-size a,.label-size span{display:inline-block;color:#666;padding:6px 10px}
.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;color:#999;}
.label-count:hover {color:#5e94ef;}
.label-size{position:relative;border:0;display:block;float:left;color:#fff;font-size:12px;margin:0 4px 4px 0;}
.label-size a{background:#fff;display:inline-block;color:#fff;border-radius:3px;border-bottom: 1px dotted #ddd;}
.label-size a:hover {background:#4267b2;color:#fff}
.label-size a:hover,.label-size span::hover{background:#4aa3df}


Langkah selanjutnya, klik Simpan dan lihat hasilnya.


OK..Nah..bagaimana tertarik bukan? Sebenarnya masih banyak lagi yang keren-keren sahabat blogger bisa nambah ilmunya di searching google disana nantinya bisa anda temukan widget yang lebih keren dari artikel ini,memasang banyak widget di blog juga akan membuat loading blog pun terasa lama dan berat. Oleh karena itu bagi sahabat blogger yang masih baru jika ingin menambah widget di blog blogger saya sarankan agar jangan terlalu berlebihan sama halnya seperti yang sudah admin sampaikan pada pembahasan artikel sebelumnya.

Selamat mencoba dan Semoga tutorial dan Cara Mudah Membuat Widget Label Posts Keren Di Sidebar ini bermanfaat. Salam Bloggers...
- August 02, 2019

Membuat Widget Popular Posts Di Sidebar

Cara Membuat Widget Popular Posts Di Sidebar

Setiap pengguna blogger sudah pasti sering menambah atau mengedit template blognya agar melihat tampilannya lebih keren dan juga lebih profesional dan pada saat untuk menambahkan kode kodenya masih bingung dalam menerapkan nya ke template blognya tersebut.

Misalnya widget yang berada di sidebar yang kurang menarik dengan tampilan yang diinginkan atau widget dari sidebar template tersebut masih belum cukup dan masih perlu atau ada yang ingin di tambahkan.

Artikel kali ini saya akan berbagi tips blog tentang bagaimana cara menambah atau menerapkan widget pada sidebar template blog yaitu widget popular posts yang keren dan profesional. Untuk menambah atau menerapkan widget popular posts ini pada sidebar template blog terbilang sangatlah mudah.

Tips ini juga bisa anda gunakan sebagai referensi untuk menambah tampilan template blognya menjadi lebih enak dipandang ketika ada pembaca dan pengunjung situsblog milik anda yang terdapat pada widget di sidebar.

Di dalam menerapkan widget popular posts ini adalah pada penempatan dari kode CSS yang harus tepat perhatikan langkah dan caranya berikut ini;

Berikut Cara Memasang Widget Popular Posts di Blog Blogger;


1. Masuk ke Dasbor Blogger dengan akun Google Blogger Anda

2. Pilih dan Klik Tema > Lalu > Edit HTML

3. Selanjutnya Cari kode ]]></b:skin> untuk memudahkan nya tekan CTRL F Bersamaan

4. Lalu salin dan tempelkan kode dibawah tepat di atas kode ]]></b:skin>
/* CSS Popular Post */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:&#39;Oswald&#39;,Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}
.PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0;     border: 1px solid silver;padding: 2px;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear;    font-family: Open Sans;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear;    border-radius: 10%;font-size: 18px;    padding: 5px;}
.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab;    border-bottom:1px solid #EFEFEF;transition:all .5s linear;}
PopularPosts ul li:last-child{border-bottom:none;}
.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}
.PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;}
.PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;}
.PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;}
.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear;    font-family: Open Sans;}
.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}



Berikut ilustrasi dalam gambar contoh penerapan di dalam template Blog di bawah ini;

Membuat Widget Popular Posts Di Sidebar

Membuat Widget Popular Posts Di Sidebar



Langkah selanjutnya, klik Simpan dan lihat hasilnya.

Selamat mencoba dan Semoga tutorial dan Cara Membuat Widget Popular Posts Di Sidebar ini bermanfaat. Salam Bloggers...

Monday, June 24, 2019

- June 24, 2019

Cara Mudah Membuat Widget Headline di Blog

Cara Mudah Membuat Widget Headline di Blog Blogger


Jika Anda tidak sudah terbiasa dengan Model tampilan halaman depan Home atau beranda situsblog nya hanya itu-itu saja maka beralih lah ke tampilan yang lebih keren dan juga lebih profesional, sama halnya dengan widget.

Headline untuk memperindah gaya desain tampilan tema blog dengan berupa foto atau gambar dan text yang dapat dipasang untuk blog blogger Anda. Anggap saja seperti Featured Posts dan Popular Posts yang berada di sidebar Blog Blogger.

Dengan mengembangkan desain template cukup sederhana untuk melakukan satu hal dan melakukannya dengan sangat baik. Headline telah menjadi salah satu widgets yang paling menonjol pada desain template blog yang anda bisa terapkan dengan gaya atau tampilan berfoto grid di halaman pages home blog blogger anda nantinya.

Hal yang paling besar tentang menggunakan atau memasang widgets Headline adalah bahwa itu bukan hanya untuk semata hiasan saja. Konten blog atau Artikel blog bisa muncul dan tampil bersama widgets headline di beranda blog dengan memanfaatkan fitur ini tentunya akan memberikan dampak positif dan baik terhadap blog karena kabar terbaru dalam postingan artikel bisa di tampilkan agar mereka yang mengunjungi situs blog terkesan dalam hati untuk membaca keseluruhan isi konten blog dan bisa berlangganan artikel blog atau mendesain ulang template blog pengunjung dan pembaca.

Pengunjung dan pembaca beraktifitas ke blog akan mempunyai trafik kunjungan yang berjumlah cukup banyak dari pengguna blogger yang aktif lainnya per harinya, dan apa lagi mempunyai postingan terbaru setiap harinya. Itu adalah jumlah yang menguntungkan bagi blog yang menyediakan fitur headline bagi blog Anda untuk membuat dengan menambahkan headline di Blogger sebagai widget.

Anda dapat menerapkan fitur headline untuk kabar terbaru dari situsblog dan memungkinkan pengunjung untuk mengunjungi blog anda membaca artikel di tab perhalamannya.

Dengan mempunyai tampilan unik dan keren untuk widgets blog yang di pasang disekitaran pada template blog blogger Anda akan memberi keunikan tersendiri ke manapun Anda memakai dan di pasang ke template blog miliknya, Anda dapat membuat dan menampilkan gambar grid dengan menerapkan kode CSS/HTML dan memasang kode-kode nya dengan mengedit Edit HTML ke Tema Blog Anda. dari dalam template blog.

Kode CSS widget yang sudah dirancang khusus oleh pengembang desain template blog untuk Widgets Headline di Blogger yang akan menampilkan bentuk desain gambar grid di situsblog Anda. Bahkan pengunjung yang bukan pengguna Blogger dapat memperoleh manfaat dari artikel postingan tersebut.

Kode CSS HTML yang akan saya share dalam artikel postingan ini yaitu cara mudah dan siapapun dapat dengan mudah menggunakannya.

Hanya memasang kode CSS headline pada template blog milik anda dan sangat menarik yang dapat anda terapkan dan disesuaikan dengan design situsblog. Ada beberapa kode CSS HTML yang bisa digunakan di blogger.

 Berikut Cara Memasang kode dengan mengedit Edit HTML template Langkah yang dilakukan:

Masuk ke Dasbor Blogger anda 
Klik Tema > Lalu Edit HTML 
Tambahkan kode Salin (Copy) kode CSS dibawah ini;

#Headline {background:#ececec}
.repost1 {background: #fff;margin:0;padding:0;display: block;border-top:1px solid #fff}
.repost1 h2 {color: #fff;font-size: 16px;margin: 10px 0 0 0;padding: 0;text-transform: uppercase;}
.repost1 .wrapper {display: block;float: left;margin: 10px 20px 20px 0;width: 198px;position: relative;}
.repost1 .wrapper img {height: 130px;width: 100%;}
.repost h3 {font-size: 14px;line-height: 1.3em;margin: 10px 0;padding: 0 10px;font-weight: 600;}
.repostt a {background: ;color: ;font-size: 0px;font-weight: 600;left: 0;line-height: 18px;padding: 2px 4px;position: absolute;text-transform: capitalize;top: 0;}
.repostt a:hover {text-decoration: underline !important;}
.repost1 .wrapper h3 {font-size: 14px;line-height: 1.3em;margin: 10px 0;padding: 0 10px;font-weight: 600;}
.repost1 .wrapper h3 a {color: #fff;font-size:15px;}
.repost1 .wrapper h3 a:hover{color:#0d68b1}
.repostt a {background: ;color: ;font-size: 0px;font-weight: 600;left: 0;line-height: 18px;padding: 2px 4px;position: absolute;text-transform: capitalize;top: 0;}
.repostt a:hover {text-decoration: underline !important;}
.repost1 .wrapper h3 {line-height: normal;color:#fff;text-shadow:none}
.repost1 .wrapper h3 a {color: #fff;font-size:15px;}
.repost1 .wrapper h3 a:hover hover{color:#fff}
.repost1 .wrapper .reposth, .repost1 .wrapper .reposth a {display:none;color: #fff;font-size: 12px;text-transform: capitalize;}
.repost1 .wrapper .reposth a:hover {color: #fff;}
.repost1 .wrapper:nth-child(4) {margin-right: 0 !important;}
@media screen and (max-width:603px) {
.repost1 .wrapper {width:31%;}
.repost1 .wrapper img{height:auto;}
}
@media screen and (max-width: 480ppx) {
.repost1 .wrapper img{height:auto;}
}
@media screen and (max-width:600px) {
.repost1 .wrapper {width: 30.8%;}
}
@media screen and (max-width: 480px) {
.repost1 .wrapper {width:100%;margin:0 0 15px;}
.repost1 .wrapper img { height:auto; }
.repost1 .wrapper .reposth{position:relative;top:-6px;}
}


Kemudian cari kode dibawah  Lalu letakan tepat dibawa kode berikut ini;






</style>
<b:if cond='data:view.isHomepage'>
<style>

Contoh dalam bentuk gambar untuk menerapkan kode CSS nya di bawah sebagai berikut;

Cara Mudah Membuat Widget Headline di Blog Blogger


Untuk memudahkan anda menempatkan kode ini silahkan tekan tombol “CTRL+F” pada keyboard kemudian copy-kan kode tadi. Jika sudah didapatkan tempatkan kode berikut diatasnya Klik simpan pada tema Selesai.


Selanjutnya Jika sudah Untuk mengaktifkan headline gambar grid nya atau menampilkan Fitur ini ke halaman depan home blog maka kembali Masuk ke Dasbor Blogger anda Klik Tata Letak > Tambahkan Gadget>Lalu Tambahkan kode Salin (Copy) kode CSS dibawah ini;

<script src='/feeds/posts/summary?orderby=published&amp;max-results=3&amp;alt=json-in-script&amp;callback=repost1'/></script>



Nah Itulah Cara Mudah Membuat Widget Headline di Blog Blogger semoga dapat bermanfaat selamat menggunakan aplikasi nya dan salam blogger.

Friday, June 21, 2019

- June 21, 2019

Cara Mudah Memasang Widgets Media Sosial Instagram

Cara Mudah Memasang Widgets Media Sosial Instagram

Membuat dan memasang widget media sosial di blog blogger bukanlah sesuatu hal yang sangat sulit. Blog dapat dijadikan salah satu alternatif jika Anda ingin membuat sebuah blog dengan tampilan widget yang keren. dengan adanya blogger anda dapat membuat situsblog sederhana sesuai dengan keinginan anda dengan mudah dan tentunya yang penting gaya dan tampilan yang lebih fresh dengan memasang widget media sosial atau nama popularnya medsos ini.

Tapi sebelunya mungkin anda juga ingin tahu bagaimanakah widget media sosial itu apa? Widget media sosial adalah salah satu fitur blog yang dapat dipasang dan di modifikasi di dalam halaman maupun sidebar sebuah blog.Widgets Khusus di rancang oleh penulis dan para desain blog itu sendiri dari hasil ide penulis blog berupa kode HTML atau CSS untuk widget situs blog.

Sebenarnya saat ini sudah Banyak widgets media sosial keren dan unik yang sering digunakan oleh para Blogger termasuk widget dari pihak ketiga untuk di pasang pada blog mereka, salah satunya yaitu widget media sosial instagram yang sangatlah populer di masa kini. Apa itu Instagram? instagram adalah media sosial yang dibuat oleh seorang pengembang dalam bentuk aplikasi untuk berbagi foto dan video dari ponsel pintar anda. mirip dengan Facebook atau Twitter, pada umumnya setiap orang yang membuat akun Instagram memiliki profil dan feed berita. 

Jika anda memposting foto atau video di instagram.otomatis akan tampil di profil akun instagram anda. Dan pengguna lain yang mengikutimu akan melihat posting tersebut di beranda mereka sendiri. demikian juga anda akan melihat postingan dari pengguna lain yang kamu ikuti. Instagram sekarang semakin hari semakin bertambah jumlah penggunanya apalagi yang suka foto selfie, jadi semakin banyak pula orang yang ingin mempublish hasil jepretannya ke media sosial instagram. 

Nah, sayang sekali jikalau sudah punya situsblog dan instagram alangkah baiknya jika memasang widget media sosial instagram di blog.Namun pada kesempatan kali ini saya akan share bagaimana cara mudah memasang widget media sosial instagram diblog dengan Blogspot (Blogger) karena saya rasa cara memasang dan membuat nya di Blogger lebih mudah dibandingkan dengan yang lainya. Ok sekarang kita langsung saja ke langkah langkah berikut ini; Langkah-langkah Cara Memasang Widget Media Sosial Instagram di Blog;

1. Buka Dasbor Blogger > Tata Letak > klik tombol > Tambahkan Gadget

2. Sekarang salin kode di bawah ini dan letakan tepat di kolom ke widget.

<div id='instafeed'/></div>
<div class='instatitle'><a href="https://www.instagram.com/iyaseo.id">My Instagram</a></div>
<script type='text/javascript'>//<![CDATA[
var feed = new Instafeed({
get: 'user',
userId: 12416933239,
limit:6,
sortBy:'random',
accessToken: '12416933239.8f4c5bf.6efa7f4d647f460b99cb001f06a98a1e',
template: '<li><a href="{{link}}" target="_blank"><img title="? {{likes}}" src="{{image}}" /></a></li>',
resolution: 'standard_resolution'
});
feed.run();
//]]></script>


Agar widget ini bisa menampilkan foto dari feed atau galeri pada akun instagram anda maka anda perlu memasukan kode token dari akun instagram milik anda sendiri bukan orang lain tentunya ya sahabat blogger cara untuk membuat token Akses Instagram Anda dengan mengeklik tombol tautan ini http://www.jetseotools.com/instagram-access-token

Note:
Ganti tulisan berwarna merah dengan kode token akun instagram anda,jika tidak bisa atau tidak berfungsi tutorial di atas setelah diterapkan di blognya maka anda bisa memberikan komentarnya dikolom komentar di bawah