Salah satu perbedaan antara blog yang dibuat menggunakan Blogger dengan WordPress adalah kemudahan dalam mengkustomisasikan widget. Di WordPress, jika kamu ingin menginstal sebuah widget atau fitur baru, kamu cukup menggunakan plugin yang sudah disediakan ke website WordPress kamu dan secara otomatis widget akan terinstal di blog. Berbeda halnya dengan blog yang menggunakan Blogger, kita harus menginstal widget secara manual satu persatu menggunakan script JavaScript, CSS dan HTML.
Misalnya saja seperti widget Instagram Storis Snapgram yang akan kita bahas di artikel kali ini. Jika menggunakan WordPress, kamu cukup instal plugin WordPress yang sudah disediakan ke website kamu dan secara otomatis widget Instagram Stories / Snapgram akan terinstal otomatis. Tapi jika menggunakan Blogger, prosesnya cukup rumit dan tentunya harus didasari pemahaman coding atau setidaknya mengikuti tutorial yang ada. Karena jika ada kesalahan sedikit saja, widget tidak akan berfungsi dengan baik. Ribet, kan?
Nah, di artikel kali ini saya akan membagikan cara memasang widget Instagram Stories / Snapgram zucky.js di Blog Blogger / blogspot. Widget Instagram Stories ini dibuat menggunakan library JavaScript zuck.js yang saya dapat dari website https://ramon.codes/projects/zuck.js. Dari sisi fungsional, widget Instagram Story / Snapgram dari zuck.js ini mirip dengan fitur Instagram Story yang digunakan di aplikasi Instagram. Semua konfigurasi story dapat diatur melalui JavaScript. Mulai dari foto profil, gambar atau video story, tautan eksternal (link keluar) dan lain sebagainya.
Selain itu, kamu juga bisa menentukan tema atau tampilan Instagram Stories sesuai keinginan kamu. Tersedia empat tampilan, yaitu Snapgram (default), FaceSnap, Snapssenger dan VemDeZAP. Tapi di artikel kali ini saya akan mencontohkan menggunakan tema atau tampilan default, yaitu Snapgram (sesuai dengan judul artikel). Kamu bisa kustomisasikan tampilan temanya sendiri.
Cara Membuat Widget Instagram Stories (Snapgram) Zuck.js di Blogger
- Pertama masuk ke menu Tema Edit HTML.
- Setelah itu salin dan taruh script berikut di atas kode
</head>. - Kemudian salin dan taruh JavaScript berikut di atas kode
</body>. - Langkah terakhir, menentukan tempat widget Instagram Stories Snapgram di blog. Ini adalah bagian terpentingnya. Kamu bisa meletakkan widget Instagram Stories ini di bawah header blog, sidebar atau yang lainnya sesuai preferensi masing-masing.
- Selesai!
<!--[ CSS INSTAGRAM STORIES ZUCK.JS ]-->
<link rel="stylesheet" href="https://cdn.ignelius.com/assets/css/blogger/widget-instagram-stories-snapgram-zuckjs.css" />
<!--[ LIBRARY INSTAGRAM STORIES ZUCK.JS ]-->
<script src="https://demos.ramon.codes/zuck.js/dist/zuck.min.js"></script><script>/*<![CDATA[*/
// JS INSTAGRAM STORIES SNAPGRAM ZUCK.JS - IGNELIUS.COM
var timestamp = function() {
var timeIndex = 0;
var shifts = [35, 60, 60 * 3, 60 * 60 * 2, 60 * 60 * 25, 60 * 60 * 24 * 4, 60 * 60 * 24 * 10];
var now = new Date();
var shift = shifts[timeIndex++] || 0;
var date = new Date(now - shift * 1000);
return date.getTime() / 1000;
};
var changeSkin = function(skin) {
location.href = location.href.split('#')[0].split('?')[0] + '?skin=' + skin;
};
var getCurrentSkin = function() {
var header = document.getElementById('header');
var skin = location.href.split('skin=')[1];
if (!skin) {
skin = 'Snapgram';
}
if (skin.indexOf('#') !== -1) {
skin = skin.split('#')[0];
}
var skins = {
Snapgram: {
avatars: true, // avatar atau profil
list: false, // list story
autoFullScreen: true, // tampilan full screen
cubeEffect: true, // efek cube
paginationArrows: true // tanda panah next dan prev story
},
// konfigurasi untuk tema lainnya
VemDeZAP: {
avatars: false,
list: true,
autoFullScreen: false,
cubeEffect: false,
paginationArrows: true
},
FaceSnap: {
avatars: true,
list: false,
autoFullScreen: true,
cubeEffect: false,
paginationArrows: true
},
Snapssenger: {
avatars: false,
list: false,
autoFullScreen: false,
cubeEffect: false,
paginationArrows: false
}
};
var el = document.querySelectorAll('#skin option');
var total = el.length;
for (var i = 0; i < total; i++) {
var what = skin == el[i].value ? true : false;
if (what) {
el[i].setAttribute('selected', 'selected');
header.innerHTML = skin;
header.className = skin;
} else {
el[i].removeAttribute('selected');
}
}
return {
name: skin,
params: skins[skin]
};
};
var currentSkin = getCurrentSkin();
var stories = new Zuck('stories', {
backNative: true,
previousTap: true,
skin: currentSkin['name'],
autoFullScreen: currentSkin['params']['autoFullScreen'],
avatars: currentSkin['params']['avatars'],
paginationArrows: currentSkin['params']['paginationArrows'],
list: currentSkin['params']['list'],
cubeEffect: currentSkin['params']['cubeEffect'],
localStorage: true,
stories: [
Zuck.buildTimelineItem(
"ramon",
"https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/1.jpg", // foto profil user 1
"Ramon", // nama user 1
"",
timestamp(),
[
["ramon-1", "photo", 3, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/1.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/1.jpg", '', false, false, timestamp()], // postingan story user ke-1
["ramon-2", "video", 0, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/2.mp4", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/2.jpg", '', false, false, timestamp()], // postingan story user ke-2
["ramon-3", "photo", 3, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/3.png", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/3.png", 'https://s.id/240mn', 'Visit my Portfolio', false, timestamp()] // postingan story user ke-3
]
),
// story user ke-2
Zuck.buildTimelineItem(
"gorillaz",
"https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/2.jpg", // foto profil user 2
"Gorillaz", // nama user 2
"", // tautan dalam story
timestamp(),
[
["gorillaz-1", "video", 0, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/4.mp4", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/4.jpg", '', false, false, timestamp()], // postingan story user ke-1
["gorillaz-2", "photo", 3, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/5.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/5.jpg", '', false, false, timestamp()], // postingan story user ke-2
]
),
// story user ke-3
Zuck.buildTimelineItem(
"ladygaga",
"https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/3.jpg", // foto profil user 3
"Lady Gaga", // nama user 3
"",
timestamp(),
[
["ladygaga-1", "photo", 5, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/6.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/6.jpg", '', false, false, timestamp()], // postingan story user ke-1
["ladygaga-2", "photo", 3, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/7.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/7.jpg", 'https://ignelius.com.com', 'Visit my Portfolio', false, false, timestamp()], // postingan story user ke-2
]
),
// story user 4
Zuck.buildTimelineItem(
"starboy",
"https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/4.jpg", // foto profil user 4
"The Weeknd", // nama user 4
"",
timestamp(),
[
["starboy-1", "photo", 5, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/8.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/8.jpg", '', false, false, timestamp()] // postingan story user ke-1
]
),
// story user 5
Zuck.buildTimelineItem(
"riversquomo",
"https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/5.jpg", // foto profil user 5
"Rivers Cuomo", // nama user 5
"",
timestamp(),
[
["riverscuomo", "photo", 10, "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/9.jpg", "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/9.jpg", '', false, false, timestamp()] // postingan story user ke-1
]
)
]
});
/*]]>*/</script>Jangan lupa sesuaikan semua bagian yang sudah ditandai, mulai dari nama, foto profil, postingan story di setiap user, tautan eksternal dan lainnya.
<div id="stories" class="storiesWrapper"></div>Sampai di tahap ini kamu sudah berhasil memasang fitur Instagram Stories Zuck.js di blog Blogger. Untuk demo widget Instagram Stories Snapgram Zuck.js, kamu bisa lihat di halaman demo berikut.
Untuk konfigurasi widget yang lebih lengkap seperti memilih tampilan tema widget, instalasi dan lainnya, kamu bisa baca langsung dokumentasinya di website Ramon's Page. Link halaman ada di bawah.
Posting Komentar