أزرار تابعني على يوتوب،فيسبوك،تويتر و الخلاصة

السلام عليكم ورحمة الله ، أخوكم أيوب من جديد اليوم أقدم لكم إضافة جميلة وهي أزرار تابعني على يوتوب ، فيسبوك،تويتر والخلاصة والإضافة تتميز بأزرار أو ايقونات أنيقة وواضحة بحدود دائرية جميلة وعند الإتجاه اليها بمؤشر الفأرة تصبح الحدود مربعة شاهد الصورة :

- ونلاحظ من الصورة عمل الإضافة عند المرور بمؤشر الفأرة على احد الأيقونات، لاحظ ايقونة اليوتوب كيف هي مختلفة بحدود مربعة عن باقي الأيقونات.

الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا.
الخطوات:

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن : ]]></b:skin>

ثم نضيف الكود التالي قبله .

/*sus code by Ayoub-Etmaiti */
.Azrar-Ayoub-Etmaiti {
border-radius: 50%; /* الحدود الدائرية */
box-shadow: 0px 0px 15px #000; /* الظل*/
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.Azrar-Ayoub-Etmaiti:hover {
box-shadow: 0; /* لحذف الحدود الدائرية عند مرور المأشر */
border-radius: 0; /*لحذف الظل عند مرور المأشر */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.Ayoub-Etmaiti-center {
text-align: center /*لتوسيط الأزرار */
}
/*sus code by Ayoub-Etmaiti */

قم بحفظ القالب

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :

وأخيرا قم بحفظ الأداة

أزرار التنقل عائمة لصفحات بلوجر.

السلام عليكم ورحمة الله اليوم أقدم لكم اضافة جميلة وقد كان الأخ فور يو قد عرض واحدة تشبهها وهي إضافة أزرار التنقل لصفحات بلوجر ، وأنا اليوم اتيتكم بإضافة مشابهة تحتوي على الازرار التالية : زر مشاركات اقدم ، زر مشركات احدث ، زر مقالة عشوائية {يقوم باختيار مقالة من عنده} ، زر العودة الى الرئيسية واخيرا زر الصعود الى الأعلى..

صورة لهذه الإضافة على مدونتي التجريبية:

- كما نلاحظ أن هذه الإضافة لا تأخذ مكان كبيرة في المدونة وهي ذات شكل جميل ومفيدة ايضا.

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

الخطوات:

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن : </head>

لتركيب الإضافة على الجهة اليسرى نقوم بإلصاق هذا الكود قبل الوسم </head> .

<link href=' https://For:You.googlecode.com/svn/navigation-Ayoub-Etmaiti.css ' rel='stylesheet'/>

ولتركيب الإضافة على الجهة اليمنى نقوم بإلصاق هذا الكود قبل الوسم </head> .

<link href='https://For:You.googlecode.com/svn/navigation-right-Ayoub-Etmaiti.css' rel='stylesheet'/>

وبعد هذا سنقوم بالبحث على <b:includable id='main' var='top'> بنفس الطريقة التي استخدمناها سابقا ونقوم بإلصاق الكود التالي بعده :

<'div id='float-menu>

<ul>

<li id='menu-right'>

<b:if cond='data:olderPageUrl'>

<b:if cond='data:olderPageUrl != data:blog.url'>

<a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a>

</b:if>

</li>

<li id='menu-left'>

<b:if cond='data:newerPageUrl'>

<b:if cond='data:newerPageUrl != data:blog.url'>

<a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a>

</b:if>

</li>

<li id='menu-random'>

<script type='text/javaScript'>//<![CDATA[

var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))};

//]]></script>

<script type='text/javaScript'>//<![CDATA[

//]]></script>

</li>

<li id='menu-home'>

<a expr:href='data:blog.homepageUrl' title='الرئيسية'/>

</li>

<li id='menu-top'>

<a href='#' title='إلى الأعلى' rel="nofollow"/>

</li>

</ul>

</div>

وأخيرا قم بحفظ القالب

احدث الموضوعات

أزرار تابعني على يوتوب،فيسبوك،تويتر و الخلاصة

أزرار التنقل عائمة لصفحات بلوجر.

كاتب الموضوع : ايوب الزاوش

0 التعليقات:

إرسال تعليق