اضافة الاستوري للمدونة

السلام عليكم

ورحمة الله

وبركاته

في هذه التدوينة سنقدم لكم اضافة
خاصة بالموقع ولاتتفور عليها أي مدونة
عربية كانت أم أجنبية
هذه الاضافة عبارة عن استوري يعمل كالموجود بمواقع
التواصل الاجتماعي لكن الاختلاف أنه يجب عليك التعامل
مع الاكواد لتغيير الصور, كما أنه متجاوب مع جميع المقاسات

معاينة

طريقة التركيب

قم بتحرير القالب ثم ابحث عن الوسم <head>
ثم قم بلصق الأكواد التالية أسفله

<link href='https://raw.githack.com/ortilex/ortslider/master/iswzuck.css' rel='stylesheet'/>
<link href='https://raw.githack.com/ortilex/ortslider/master/snapgram.css' rel='stylesheet'/>

الان ابحث عن الوسم </body>
ثم قم بلصق الأكواد التالية فوقه

<script type='text/javascript'>
//<![CDATA[
var initDemo = 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,
'list': false,
'autoFullScreen': false,
'cubeEffect': true
},
'VemDeZAP': {
'avatars': false,
'list': true,
'autoFullScreen': false,
'cubeEffect': false
},
'FaceSnap': {
'avatars': true,
'list': false,
'autoFullScreen': true,
'cubeEffect': false
},
'Snapssenger': {
'avatars': false,
'list': false,
'autoFullScreen': false,
'cubeEffect': false
}
};
var timeIndex = 0;
var shifts = [35, 60, 60 * 3, 60 * 60 * 2, 60 * 60 * 25, 60 * 60 * 24 * 4, 60 * 60 * 24 * 10];
var timestamp = function () {
var now = new Date();
var shift = shifts[timeIndex++] || 0;
var date = new Date(now - shift * 1000);
return date.getTime() / 1000;
};
var stories = new Zuck('stories', {
backNative: true,
previousTap: true,
autoFullScreen: skins[skin]['autoFullScreen'],
skin: skin,
avatars: skins[skin]['avatars'],
list: skins[skin]['list'],
cubeEffect: skins[skin]['cubeEffect'],
localStorage: true,
stories: [
{
id: "seb issam",
photo: "https://scontent.frba3-1.fna.fbcdn.net/v/t1.0-1/p160x160/67977193_2390745951215149_2749430517194555392_n.jpg?_nc_cat=101&_nc_oc=AQn6F4z2BUKFQHAf1N-5lmVf9XNeE7iWXRvKsWPYZa3uFrbgDE5SAshJW4CcYoxbsxg&_nc_ht=scontent.frba3-1.fna&oh=58f7e5c498f8cda4f6d3452456872529&oe=5DE6BDDD",
name: "seb issam",
link: "",
lastUpdated: timestamp(),
items: [
Zuck.buildItem("sebissam-1", "photo", 5, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhObcrc9sj64AmtzBNgdoelWlWqCK4XwXTz-lMQq9EgpTMNiSE_jC6bPjUeiBH5xslpFeNqxVTt5f5uJVa1fzfWXP9e2THML84o8XN_oq7CtvpW8r9Di24BUdfEd4DeDqQJ8MgDTqfeCn8/s1600/officialaccount.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhObcrc9sj64AmtzBNgdoelWlWqCK4XwXTz-lMQq9EgpTMNiSE_jC6bPjUeiBH5xslpFeNqxVTt5f5uJVa1fzfWXP9e2THML84o8XN_oq7CtvpW8r9Di24BUdfEd4DeDqQJ8MgDTqfeCn8/s1600/officialaccount.jpg", '', false, false, timestamp()),
Zuck.buildItem("sebissam-2", "photo", 3, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0LDCw0Tip5gq_WXUv-jsh5XpX__iZ1F1eZNuiJYp0kTmLyY7tvSjqDGNs429oO6cVBVWHcgTaKvmF_v_NPVsH48FEOnfH9YqQN-0UhsP2ANjJlb6sCH1Ze5mySmZHiblnzJl40v6ePo/s1600/moviev2.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0LDCw0Tip5gq_WXUv-jsh5XpX__iZ1F1eZNuiJYp0kTmLyY7tvSjqDGNs429oO6cVBVWHcgTaKvmF_v_NPVsH48FEOnfH9YqQN-0UhsP2ANjJlb6sCH1Ze5mySmZHiblnzJl40v6ePo/s1600/moviev2.jpg", 'https://facebook.com/issame.madrid.1', false, false, timestamp()),
]
},
{
id: "seb issam",
photo: "https://scontent.frba3-1.fna.fbcdn.net/v/t1.0-1/p160x160/67977193_2390745951215149_2749430517194555392_n.jpg?_nc_cat=101&_nc_oc=AQn6F4z2BUKFQHAf1N-5lmVf9XNeE7iWXRvKsWPYZa3uFrbgDE5SAshJW4CcYoxbsxg&_nc_ht=scontent.frba3-1.fna&oh=58f7e5c498f8cda4f6d3452456872529&oe=5DE6BDDD",
name: "seb issam",
link: "",
lastUpdated: timestamp(),
items: [
Zuck.buildItem("sebissam-1", "photo", 5, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhObcrc9sj64AmtzBNgdoelWlWqCK4XwXTz-lMQq9EgpTMNiSE_jC6bPjUeiBH5xslpFeNqxVTt5f5uJVa1fzfWXP9e2THML84o8XN_oq7CtvpW8r9Di24BUdfEd4DeDqQJ8MgDTqfeCn8/s1600/officialaccount.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhObcrc9sj64AmtzBNgdoelWlWqCK4XwXTz-lMQq9EgpTMNiSE_jC6bPjUeiBH5xslpFeNqxVTt5f5uJVa1fzfWXP9e2THML84o8XN_oq7CtvpW8r9Di24BUdfEd4DeDqQJ8MgDTqfeCn8/s1600/officialaccount.jpg", '', false, false, timestamp()),
Zuck.buildItem("sebissam-2", "photo", 3, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0LDCw0Tip5gq_WXUv-jsh5XpX__iZ1F1eZNuiJYp0kTmLyY7tvSjqDGNs429oO6cVBVWHcgTaKvmF_v_NPVsH48FEOnfH9YqQN-0UhsP2ANjJlb6sCH1Ze5mySmZHiblnzJl40v6ePo/s1600/moviev2.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0LDCw0Tip5gq_WXUv-jsh5XpX__iZ1F1eZNuiJYp0kTmLyY7tvSjqDGNs429oO6cVBVWHcgTaKvmF_v_NPVsH48FEOnfH9YqQN-0UhsP2ANjJlb6sCH1Ze5mySmZHiblnzJl40v6ePo/s1600/moviev2.jpg", 'https://facebook.com/issame.madrid.1', false, false, timestamp()),
]
}
]
});
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', what);
header.innerHTML = skin;
header.className = skin;
} else {
el[i].removeAttribute('selected');
}
}
document.body.style.display = 'block';
};
initDemo();
//]]>
</script>

ستجد أكواد باللون الأحمر وأسفلها أكواد باللون الأخضر وهذا يعني ظهور اثنان استوري, فان أردت اظهار أكثر من اثنين فعليك بنسخ الكود باللون الأحمر ولصقه اسفله تماما وان أردت اظهار فقط استوري واحد فعليك بحذف الأكواد باللون الاحمر