قائمة جانبية للروابط أو الصفحات مع مصغرات لمدونات بلوجر

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

مشاهدة حية للأداة!!

إضافة الأداة

لوحة التحكم => التخطيط => إضافة أداة => HTML/javacript

و نضيف بداخلها الكود التالي:

<style>

/* design by al2afdal.com */
#menu {background: white;width: 280px;padding:10px;margin: 0 auto;direction: rtl;}
#menu ul {margin:0; padding:0;list-style: none;}
#menu ul li {margin: 0;padding: 5px 0 10px;border-bottom: 1px dashed #EAEAEA;}
#menu ul li img {padding: 3px 10px 0 0px;}
#menu ul li a {font: normal 18px tahoma ,arial;color: #007195;float: right;text-align: right;text-decoration:none;}
#menu ul li a:hover {color:#CC3332;}
#menu ul li span {font: normal 13px tahoma ,arial;color:#7D7D7D;float: right;text-align: right;}
#menu li span:hover {color: #494949;}
/* design by al2afdal.com */
</style>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<div id="menu">
<ul>

<li><img src="https://cdn1.iconfinder.com/data/icons/free-red-cloud-icons/48/Youtube_TV.png" border="0" alt="" /><a href="http://www.al2afdal.com">مدونة الأفضل<br />
<span>هنا نقوم بوصف بسيط للرابط أو الموضوع</span></a></li>
<li><img src="https://cdn1.iconfinder.com/data/icons/humano2/48x48/actions/bookmark-new.png" border="0" alt="" /><a href="http://www.al2afdal.com">مدونة الأفضل<br />
<span>هنا نقوم بوصف بسيط للرابط أو الموضوع.</span></a></li>
<li><img src="https://cdn1.iconfinder.com/data/icons/snowish/48x48/apps/gnome-control-center.png" border="0" alt="" /><a href="http://www.al2afdal.com">مدونة الأفضل<br />
<span>هنا نقوم بوصف بسيط للرابط أو الموضوع.</span></a></li>
<li><img src="https://cdn1.iconfinder.com/data/icons/humano2/48x48/emblems/emblem-symbolic-link.png" border="0" alt="" /><a href="http://www.al2afdal.com">مدونة الأفضل<br />
<span>هنا نقوم بوصف بسيط للرابط أو الموضوع.</span></a></li>
</ul><a href='http://www.al2afdal.com' style='display: none;'>Al2Afdal.CoM</a></div>

تنسيق الأداة:

اللون الأخضر : رابط الصورة؛
اللون الأزرق : رابط الصفحة أو الموضوع؛
اللون الأحمر : عنوان الصفحة ظاو الموضوع؛
اللون البني : وصف الصفحة أو الموضوع؛

بالتوفيق؛؛

قائمة جانبية للروابط أو الصفحات مع مصغرات لمدونات بلوجر

0 commentaires:

إرسال تعليق