إضافة أداة حفظ المواضيع في مدونة بلوجر Bookmark

اضافة ميزة bookmark حفظ المواضيع لمدونة بلوجر

ازيك؟.. هذه المقالة في قسم اضافات بلوجر سيتم شرح كيف تضيف أداة حفظ المواضيع او Bookmark او اداة الإشارة المرجعية في مدونتك على بلوجر، قمت انا بإضافتها في هذه المدونة بالفعل.. يمكنك تجربتها بنفسك ومعرفة مميزتها، لكن الان سنشرح ماذا تفعل:

ميزة حفظ المواضيع (Bookmark) التي يمكنك من خلالها ان تقوم بحفظ اي موضوع مثلآ على مدونتك وقراءته في وقت لاحق مما يساعد الزائر بشكل كبير لإنه لن يبذل مجهود كبير في البحث عن المقال الذي كان يريد قراءته في وقت آخر، فهو فقط كل ما عليه ان يضغط على زر الحفظ وستبقى في صفحة "المواضيع المحفوظة" ويمكن ان يتفقدها في كل الأوقات.

مميزات هذه الأداة:

حفظ اي موضوع بضغط زر.
تعمل على تخزين البيانات في التخزين المحلي للمتصفح مما يساعد على الحفاظ على الموضوعات المحفوظة وتمكن للزائر تفقدها في اي وقت.
إنشاء صفحة "الموضوعات المحفوظة" التي بداخلها كل المواضيع التي قام الزائر بحفظها.
يمكنك تخصيصها كما تريد.

الأن لنعرف كيف تضيفها الى مدونتك.. الخطوات ليست صعبة هي فقط اكواد ستقوم بإضافتها الى الأماكن المحددة وركز وانت تقوم بوضع هذه الأكواد حتى لا تحدث اي مشاكل... هيا بنا.

قبل تطبيق الشرح قم بتنزيل نسخة احتياطية من قالبك في حال حدثت مشكلة ما :).

إضافة أداة حفظ المواضيع لمدونة بلوجر

1- إنشاء صفحة الموضوعات المحفوظة

هذه الصفحة التي ستحتوي على كل المواضيع التي قام الزائر بحفظها وستظهر فقط عند تجاوز عدد معين من المواضيع.. سأشرح ذلك اكثر في التدوينة... تابع،

اذهب الى بلوجر وقم بإضافة صفحة جديدة وسميها "bookmark" - يمكنك تغيير هذا الإسم لاحقآ لكن الأن قم بتسميتها هكذا من اجل عنوان الرابط -، حول الصفحة الي "عرض HTML" وامسح اي اكواد موجوده وانسخ هذا الكود في الصفحة واضغط علي نشر:

<div class='ignielBookmarks'></div>

"بعد النشر يمكنك تغيير الإسم كما تريد"

اقرأ أيضًا:

2- اضافة اكواد CSS و HTML و Javascript

كود CSS

الأن ستضيف اكواد CSS التي تحدد شكل وحجم ولون ايقونة الزر... اذهب الي بلوجر وانتقل الى المظهر واضغط على "تعديل HTML".. الأن من الكيبورد اضغط على ctrl + f وابحث عن ]]></b:skin>وضع الأكواد فوقه/قبله:

.ignielBookmark, .ignielBookmarks, .ignielBookmarkPost {
  --bm-bg: #fff;
  --bm-post-bg: #fff;
  --bm-icon: #333;
  --bm-icon-active: #6495ed;
  --bm-icon-del: #777;
}
.snippet-thumbnail {
  position: relative;
}
#ignielBookmark, .ignielBookmarkPost input {
  display: none;
}
.ignielBookmark {
  position: relative;
}
.ignielBookmark i {
  background-color: var(--bm-bg);
  border-radius: 7px;
  font-size: .75rem;
  font-style: normal;
  line-height: normal;
  padding: .1rem;
  right: 55%;
  top: -2px;
}
.ignielBookmark svg {
  height: 1.5rem;
  width: 1.5rem;
}
.ignielBookmark path, .ignielBookmarkPost path {
  stroke: var(--bm-icon);
  clip-rule: evenodd;
  fill: transparent;
  fill-rule: evenodd;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 1.5px;
}
.bookmark-wrapper {
  border: 1px solid #dfdfdf;
  border-radius: 7px;
  max-height: 80vh;
  min-width: 320px;
  max-width: 480px;
  opacity: 0;
  overflow: auto;
  right: 0;
  top: 2rem;
  transform: translateY(1rem);
  -webkit-transform: translateY(1rem);
  visibility: hidden;
  width: max-content;
}
.bookmark-title {
  border-bottom: 1px solid #ededed;
  font-weight: 800;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}
.bm-title {
  line-height: 1.5em;
}
.bm-title a {
  color: inherit;
}
.bm-title a:hover {
  text-decoration: none;
}
.bm-thumb {
  flex: 0 0 85px;
  line-height: 0;
}
.bm-thumb img {
  background-color: #efefef;
  border-radius: 7px;
  object-fit: cover;
  height: auto;
  max-height: 100% !important;
  width: 100%;
  max-width: 100% !important;
}
.bm-delete {
  margin-left: auto;
  white-space: nowrap;
}
.bm-delete svg {
  height: 1.25rem;
  width: 1.25rem;
}
.bm-delete path {
  fill: none;
  stroke: var(--bm-icon-del);
}
.bm-delete:hover path {
  fill: var(--bm-icon-del);
}
.bookmark-inner ul {
  flex-direction: column;
}
.bookmark-wrapper, .bookmark-title {
  background-color: var(--bm-bg);
}
.bookmark-inner, .bookmark-title {
  padding: .75rem 1.25rem;
}
.bookmark-inner ul, .bookmark-inner li, .ignielBookmarks li, .ignielBookmarkPost, .ignielBookmarkPost label {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  gap: 1rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li.bm-more {
  border-top: 1px solid #ededed;
  justify-content: center;
  padding: .75rem .75rem 0;
  margin-top: 1rem;
}
.ignielBookmarks ul {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
}
.ignielBookmarks li {
  border: 1px solid #dfdfdf;
  border-radius: 7px;
  padding: .75rem;
}
.ignielBookmarkPost {
  background-color: var(--bm-post-bg);
  border-radius: 100px;
  height: 2rem;
  position: absolute;
  right: .75rem;
  top: .75rem;
  width: 2rem;
  z-index: 2;
}
.ignielBookmarkPost, .ignielBookmarkPost label {
  align-items: center;
  justify-content: center;
}
.ignielBookmarkPost svg {
  height: 1.25rem;
  width: 1.25rem;
}
.ignielBookmark label, .ignielBookmarkPost label, .bm-delete {
  cursor: pointer;
}
.ignielBookmark i, .bookmark-wrapper {
  position: absolute;
}
.ignielBookmark path, .bookmark-wrapper {
  transition: all .2s ease;
}
.ignielBookmark label:hover path, .ignielBookmarkPost label:hover path {
  stroke: var(--bm-icon-active);
}
#ignielBookmark:checked ~ label path, .ignielBookmarkPost input:checked ~ label path {
  fill: var(--bm-icon-active);
  stroke: var(--bm-icon-active);
}
.ignielBookmarkPost input:checked ~ label path:last-child {
  fill: none;
  stroke: #fff;
}
#ignielBookmark:checked ~ .bookmark-wrapper {
  opacity: 1;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  visibility: visible;
}
.bookmark-loading {
  padding: .5rem;
  text-align: center;
}
.bookmark-loading svg {
  animation: ignielSpin .75s linear infinite normal;
  -webkit-animation: ignielSpin .75s linear infinite normal;
}
@media screen and (max-width: 568px) {
  .ignielBookmarks ul {
    gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
 }

الذي يمكنك تغييره:

--bm-bgلون خلفية قائمة المواضيع المحفوظة.
--bm-post-bgلون خلفية الأيقونة.
--bm-iconلون الأيقونة.
--bm-icon-activeلون الأيقونة عند التمرير عليها.
--bm-icon-delلون ايقونة الحذف.

كود Javascript

والأن ستضيف كود الجافا سكريبت من اجل ان تعمل الأداة... ابحث عن </body>وضع الأكواد فوقه/قبله:

<script>//<![CDATA[
const bookmarks = {
  maxWidget: 4,
  maxAll: 100,
  emptyText: 'لا يوجد اي مواضيع محفوظة!',
  moreText: 'عرض الكل',
  currentText: 'أنت بالفعل في صفحة المواضيع المحفوظة!',
  morePage: '/p/bookmark.html',
  deleteText: '<svg viewBox="0 0 24 24"><path d="M18.8892 9.5542C18.8892 17.5732 20.0435 21.198 12.2797 21.198C4.5149 21.198 5.693 17.5732 5.693 9.5542"/><path d="M20.3651 6.47985H4.2146"/><path d="M15.7148 6.47983C15.7148 6.47983 16.2434 2.71411 12.2891 2.71411C8.33578 2.71411 8.86435 6.47983 8.86435 6.47983"/></svg>'
};
/* لا تعدل هنا */
!function(d){let ignielbookmark = JSON.parse(localStorage.getItem("ignielBookmark")) || []; d.querySelector(".ignielBookmark").querySelector("i").innerHTML = ignielbookmark.length; const bmCek = () => {if (ignielbookmark.length > 0){ignielbookmark.forEach((e) => {if (d.getElementById("bm-" + e.id)) {d.getElementById("bm-" + e.id).checked = true;}});}}; const bmRender = () => {localStorage.setItem("ignielBookmark", JSON.stringify(ignielbookmark)); d.querySelector(".ignielBookmark").querySelector("i").innerHTML = ignielbookmark.length; let bmContainer = d.querySelector(".bookmark-inner"), bmContainerAll = d.querySelector(".ignielBookmarks"), bmBuild = ""; if (ignielbookmark.length > 0) {let max = bookmarks.maxWidget, more = false; if (d.location.pathname == bookmarks.morePage) {max = bookmarks.maxAll;} else {max = bookmarks.maxWidget; if (ignielbookmark.length > max) {more = true;}} ignielbookmark.slice(0, max).forEach((e) => {bmBuild += '<li data-id="' + e.id + '"><div class="bm-thumb"><a href="' + e.url + '" title="' + e.title + '""><img alt="' + e.title + '" src="' + e.img + '" title="' + e.title + '"></a></div><div class="bm-title"><a href="' + e.url + '" title="' + e.title + '"">' + e.title + '</a></div><div class="bm-delete" role="button">' + bookmarks.deleteText + "</div>";}); bmContainer.innerHTML += "</ul>"; if (d.location.pathname == bookmarks.morePage) {bmContainer.innerHTML = bookmarks.currentText; if (bmContainerAll) bmContainerAll.innerHTML = "<ul>" + bmBuild + "</ul>";} else {bmContainer.innerHTML = "<ul>" + bmBuild; if (more) {bmContainer.innerHTML += '<li class="bm-more"><a href="' + bookmarks.morePage + '" title="' + bookmarks.moreText + '"">' + bookmarks.moreText + " (+" + (ignielbookmark.length - max) + ")</a></li>";}}} else {bmContainer && (bmContainer.innerHTML = bookmarks.emptyText); bmContainerAll && (bmContainerAll.innerHTML = bookmarks.emptyText);} bmDel();}; const bmAdd = (a) => {ignielbookmark.push(a); bmRender();}; const bmRem = (id) => {ignielbookmark = ignielbookmark.filter((obj) => obj.id !== id); bmRender(); if (d.getElementById("bm-" + id)) {d.getElementById("bm-" + id).checked = false;}}; const bmDel = () => {const a = d.querySelectorAll(".bm-delete"); if (a.length > 0) {a.forEach((e) => {const dId = e.parentNode.getAttribute("data-id"); e.addEventListener("click", () => {bmRem(dId);});});}}; const ignielBookmark = () => {const a = d.querySelectorAll(".ignielBookmarkPost input"); if (a.length > 0) {a.forEach((e) => {e.addEventListener("change", () => {const bmId = e.id.split("-")[1], bmParent = e.parentNode, bookmarkItem = {id: bmId, img: bmParent.querySelector("label").getAttribute("data-img"), title: bmParent .querySelector("label") .getAttribute("data-title"), url: bmParent.querySelector("label").getAttribute("data-url"),}; if (ignielbookmark) {const findId = ignielbookmark.find((obj) => obj.id === bmId); if (findId) {bmRem(bmId);} else {bmAdd(bookmarkItem);}} else {bmAdd(bookmarkItem);}});});}}; d.location.pathname == bookmarks.morePage && bmRender(); d.querySelector(".ignielBookmark").addEventListener("click", () => {bmRender();}); d.addEventListener("scroll", () => {bmCek; ignielBookmark}); ignielBookmark(); bmCek();}(document);
    //]]></script>

الذي يمكنك تغييره:

maxWidgetعدد المواضيع التي ستظهر في قائمة الموضوعات المحفوظة.
maxAllعدد المواضيع التي ستظهر في الصفحة الثابتة "المواضيع المحفوظة".
emptyTextنص عندما لا يوجد اي مواضيع محفوظة.
moreTextنص لعرض الصفحة الثابتة او عرض كل المواضيع.
currentTextنص عندما يكون الزائر في صفحة المواضيع.
morePageرابط صفحة المواضيع -اتركها كما هي لأننا قمنا بتسمية الصفحة bookmark- ولو انت سميتها بإسم آخر لا مشكلة فقط انسخ عنوان الصفحة وضعها مكان"/p/bookmark.html".

تصفح:

كود الزر او الأيقونة

وأخيرآ وصلت للجزء الآخير والمهم وهو مقسم الي جزئين.. الجزء الاول وهو الجزء الخاص بمكان الزر التي ستُظهر قائمة المواضيع مثل هذا:

غالبآ ستضعها في الهيدر كما موضح في الصورة لذا الأمر متروك لك ابحث عن الهيدر في قالبك و ضع كود الزر:

<div class="ignielBookmark">
  <input id="ignielBookmark" type="checkbox"/>
  <label aria-label="View Bookmark" for="ignielBookmark">
    <i>0</i>
    <svg viewBox="0 0 24 24">
      <path d="M16.8199 2H7.17995C5.04995 2 3.31995 3.74 3.31995 5.86V19.95C3.31995 21.75 4.60995 22.51 6.18995 21.64L11.0699 18.93C11.5899 18.64 12.4299 18.64 12.9399 18.93L17.8199 21.64C19.3999 22.52 20.6899 21.76 20.6899 19.95V5.86C20.6799 3.74 18.9499 2 16.8199 2Z"/>
    </svg>
  </label>
  <div class="bookmark-wrapper">
    <div class="bookmark-title">Bookmark</div>
    <div class="bookmark-inner">
      <div class="bookmark-loading">
        <svg viewBox="0 0 24 24">
          <path d="M2.45001 14.97C3.52001 18.41 6.40002 21.06 9.98002 21.79"/>
          <path d="M2.04999 10.98C2.55999 5.93 6.81998 2 12 2C17.18 2 21.44 5.94 21.95 10.98"/>
          <path d="M14.01 21.8C17.58 21.07 20.45 18.45 21.54 15.02"/>
        </svg>
      </div>
    </div>
  </div>
</div>

والجزء الثاني

هو ايقونة حفظ الموضوع من اجل اضافة الموضوع الي قائمة الموضوعات المحفوظة مثال:

وهذا يختلف من قالب بلوجر الي قالب آخر يمكنك البحث عن snippet-thumbnailاو snippetاو thumb، وان لم يكن! فاعليك البحث بنفسك عن الرمز...

الأن نفترض انك وصلت للمكان الصحيح كل ما عليك ان تضع الكود التالي تحت كود <a> او <a href>:

<div class="ignielBookmarkPost">
  <input expr:id='"bm-" + data:post.id' type="checkbox"/>
  <label aria-label="Bookmark" expr:data-img='data:post.featuredImage ? resizeImage(data:post.featuredImage, 100, "3:2") :  resizeImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=", 100, "3:2")' expr:data-title='data:post.title' expr:data-url='data:post.url' expr:for='"bm-" + data:post.id'>
    <svg viewBox="0 0 24 24">
      <path d="M16.8199 2H7.17995C5.04995 2 3.31995 3.74 3.31995 5.86V19.95C3.31995 21.75 4.60995 22.51 6.18995 21.64L11.0699 18.93C11.5899 18.64 12.4299 18.64 12.9399 18.93L17.8199 21.64C19.3999 22.52 20.6899 21.76 20.6899 19.95V5.86C20.6799 3.74 18.9499 2 16.8199 2Z"/>
      <path d="M12 8.20996V13.21"/>
      <path d="M14.5 10.6499H9.5"/>
    </svg>
  </label>
</div>

خلصنا! الأن جرب...

ان عمل معك ف مبروك عليك واذا لم يعمل لا عليك اترك لي تعليق اسفل هذا الموضوع في صندوق التعليقات او تواصل معي عبر صفحة الفيسبوك... سلام:).

كل الأكواد المذكورة من موقع www.igniel.com وتم تعديلها بواسطتنا والشرح بالعربية ليناسب المواقع والمدونات العربية.
All the codes are from the www.igniel.com and have been modified by us and the explanation is in Arabic to suit Arabic sites and blog.

Icons by Lordicon.com

اقتراحات: