بسم الله الرحمن الرحيم , السلام عليكم ورحمة الله وبركاته , لازلنا في الحديث عن الإضافات الخاصة بالتواصل الاجتماعي التي يمكن اضافتها الى بلوجر , فقمنا بشرح عن كيفية اضافة مشاركة التدوينة في فيسبوك وتويتر وجوجل , كما شرحنا كيفية اضافة زر لايك وارسال الى بلوجر , واضافة إلى هذا فهناك العديد من الشروحات التي بتسجيلها وهي موجودة في قناتي , والآن لدينا شكل آخر ورائع في التصميم وهو الذي استعمله في مدونتي , كما يتميز باستعماله تقنية CSS , لنرى كيفية اضافة هذا الشكل :
الخطوات
2- ثم اضغط على "تحرير HTML" واضغط على "تنسيق النموذج" ايضا لا تنسى أخذ نسخة احتياطية لمدونتك.
3- وبما أن الإضافة تتعامل بتقنية CSS فقم بالبحث وهذا بالضغط على زرَّي Ctrl + F عن : ]]></b:skin>
4- قم بلصق الكود التالي فوق الكود الذي بحثنا عنه :
/*--------anas-eds Bookmarking Widget (CSS#1)------*/5- والآن علينا إضافة كود HTML الخاص بالإضافة وذلك بالحث عن <data:post.body/> وكما عرفنا فإن هذا الكود يعني نهاية محتوى التدوينة , ونضيف الكود التالي بعد الكود السابق :
.mbt-bookmarking a {
display:block;
height:42px;
width:48px;
padding:0 9px;
float:right;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5BeUaX91A9QGKCqY3jAeX4KPWiMzm9KpsSPewVyApIKRXgJs85JWJV1FMVi3Dq3G9dbUXqWAsd1ZnWT2JPeRFJy1UI6vA1SV9ZFlmoGY7obmjH3q_1QA_PjP86E78CFMwgBbt5u9H8QX9/s1600/flapper.jpg) no-repeat;
}
.mbt-bookmarking a.delicious {
background-position:0px 0px;
}
.mbt-bookmarking a.delicious:hover {
background-position:0px -43px;
}
.mbt-bookmarking a.digg {
background-position:0px -86px;
}
.mbt-bookmarking a.digg:hover {
background-position:0px -129px;
}
.mbt-bookmarking a.stumbleupon {
background-position:0px -344px;
}
.mbt-bookmarking a.stumbleupon:hover {
background-position:0px -387px;
}
.mbt-bookmarking a.technorati {
background-position:0px -430px;
}
.mbt-bookmarking a.technorati:hover {
background-position:0px -473px;
}
.mbt-bookmarking a.twitter {
background-position:0px -516px;
}
.mbt-bookmarking a.twitter:hover {
background-position:0px -559px;
}
.mbt-bookmarking a.facebook {
background-position:0px -172px;
}
.mbt-bookmarking a.facebook:hover {
background-position:0px -215px;
}
.mbt-bookmarking a.reddit {
background-position:0px -258px;
}
.mbt-bookmarking a.reddit:hover {
background-position:0px -301px;
}
.mbt-bookmarking a.yahoo {
background-position:0px -602px;
}
.mbt-bookmarking a.yahoo:hover {
background-position:0px -645px;
}
.mbt-bookmarking a.rss {
background-position:0px -774px;
}
.mbt-bookmarking a.rss:hover {
background-position:0px -817px;
}
<!--anas-eds Bookmarking Widget (HTML)-->6- احفظ القالب , انتهينا هذا كل ما في الأمر , اذا أردت الأيقونات أكبر بحجم 64px فعليك اضافة كود CSS التالي بدل السابق :
<div class='mbt-bookmarking'>
<b:if cond='data:blog.pageType == "item"'>
<br/><font color='#289728' face='ms sans serif' size='3'><b>Kindly Bookmark and Share it:</b></font>
<br/><br/>
<!-- Delicious -->
<a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :>'/>
<!--DIGG-->
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this :>'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :>'/>
<!-- Technorati -->
<a class='technorati' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank' title='Fave this :>'/>
<!-- Twitter -->
<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :>'/>
<!--Facebook-->
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :>'/>
<!-- Reddit -->
<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Bookmark and tag this :>'/>
<!-- Yahoo -->
<a class='yahoo' expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Bookmark this :>'/>
<a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"'/>
</b:if></div>
/*--------Anas-Eds Bookmarking Widget (CSS#2)------*/
.mbt-bookmarking a {
display:block;
height:55px;
width:64px;
padding:0 5px;
float:right;
position:relative;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvxirKP4eUKodRnS5te1Lv4XIWbIvJ1goLW1YrPE05YM25x2q-3CU2xr281h9RmDUzrJsbWdXJIC80MTOCPSxbQdmyL-lHqzi02IYxRzEy3-H6LVFmkSusXAJcIoUI0PJKDvvdJ9HK7rO_/s1600-h/flapper2.jpg) no-repeat;
}
.mbt-bookmarking a.delicious {
background-position:0px 0px;
}
.mbt-bookmarking a.delicious:hover {
background-position:0px -57px;
}
.mbt-bookmarking a.digg {
background-position:0px -114px;
}
.mbt-bookmarking a.digg:hover {
background-position:0px -171px;
}
.mbt-bookmarking a.stumbleupon {
background-position:0px -228px;
}
.mbt-bookmarking a.stumbleupon:hover {
background-position:0px -285px;
}
.mbt-bookmarking a.technorati {
background-position:0px -570px;
}
.mbt-bookmarking a.technorati:hover {
background-position:0px -627px;
}
.mbt-bookmarking a.twitter {
background-position:0px -684px;
}
.mbt-bookmarking a.twitter:hover {
background-position:0px -741px;
}
.mbt-bookmarking a.facebook {
background-position:0px -456px;
}
.mbt-bookmarking a.facebook:hover {
background-position:0px -513px;
}
.post-bookmark a.reddit {
background-position:0px -342px;
}
.mbt-bookmarking a.reddit:hover {
background-position:0px -399px;
}
.mbt-bookmarking a.yahoo {
background-position:0px -798px;
}
.mbt-bookmarking a.yahoo:hover {
background-position:0px -855px;
}
.mbt-bookmarking a.rss {
background-position:0px -912px;
}
.mbt-bookmarking a.rss:hover {
background-position:0px -969px;
}
الشرح المرئي
وإلى هنا أكون قد انتهيت من الموضوع أرجو أن يكون ممتع ومفيد , لا تنسى أنه يمكنك مشاركة رابط الموضوع مع اصدقائك لتعم الفائدة من خلال الضغظ على ازرار مواقع التواصل الاجتماعي في اسفل التدوينة والسلام عليكم ورحمة الله وبركاته يمكنك تحميل شريط المدونة الذي يوفر لكم خصائص كثيرة بالضغط على الصورة ادناه
سلام
ردحذفانا ابحث عن]]> ولا يوجد هل من الممكن ان تساعدني