تطوير ويب » تنسيق القالب » طريقة عمل وصف مختصر لروابط مدونتك تبقنية الجي كويري
السلام عليكم ورحمة الله وبركاته,احبائي زوار ومتابعي مدونة تقارب.موعدنا الان مع اضافه رائعه من ضمن سلسلة اضافات تنسيق قوالب بلوجر التي شرعت في الاهتمام بها وذلك للوصول الي مدونه عربيه غايه في الاناقه والجمال تحتوى على اجمل الاضافات
ولا يخفي علي احد من المدونين المظهر الجمالي بالاضافه الي المحتوى الجيد من اهم اسباب ذيادة زوار المدونه.
درس اليوم يتحدث عن عمل وصف مختصر لاي رابط في مدونتك سواء كان داخل الموضوع او في الصفحه الرئيسيه.
ويظهر الوصف فقط عند مرور مؤشر الماوس على هذا الرابط او اللينك.الجميل في الضافه انها تجعل الوصف لا يظهر بطريقه عاديه بل نظرا لاعتماد الاضافه على تقنية الجي كويري الشهيره فقد ظهر الوصف بطريقه قمه في الاناقه والجمال تجعل القارئ او الزائر يسعد بالضغط علي ذلك اللينك او الرابط..ومثال على الاضافه يمكنك رؤيه الصوره الموجوده في اخر الموضوع.فتلك الصوره توضح لنا رابط موجود في المدونه قام احد القراء بالوقوف عليه بمؤشر الفاره. انظر كم هو جميل الوصف مع العلم انه يمكنك تغيير الوانه وابعاده بما يتناسب مع الوان مدونتك.ان اعجبك الدرس وتريد تطبيقه في مدونتك.عليك باتباع التعليمات البسيطه التي بالاسفل :1.سجل دخول الي لوحة تحكم مدونتك--> ثم اذهب الي تصميم- -> ثم تحرير HTML
2.قم بالضغط على علامة توسيع قوالب واجهة المستخدم ومن ثم قم بالبحث عن الكود الذي بالاسفل"
]]></b:skin>
وضع قبلة مباشرة الكود الموجود بالاسفل
#easyTooltip{ padding:5px 10px; border:1px solid #EF6D21; background: #181C18; color:#E0EFE0; }
3
قم مره اخرى بالبحث عن الكود التالي </head>
وضع قبله الكود الموجود بالاسفل
<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- begin Tooltips -->
<script type='text/javascript'>
$(document).ready(function(){
$("a.tooltip").easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>
<!-- end tooltips -->
القم بحفظ قالب مدونتك ان
وعندما تريد وضع رابط او لينك في اي موضوع داخل مدونتك او تضعه في الصفحه الرئيسيه كروابط لاقسام بمدونتك او روابط اعلانيه كالاعلانات النصيه مثلا.ما عليك الا وضع الرابط او اللينك بتلك الطريقه الموجوده بالاسفل
<a class='tooltip' title='Your Link Title' href="ضع الرابط او اللينك هنا">الوصف الذي تريده اكتبه هنا</a>
انظر المثال التالي
<a class='tooltip' title='Latest blogger tips' href="http://tqarob.blogspot.com//">مدونة تقارب اكبر مدونه ترفيهيه متنوعه</a>
والصوره التاليه توضح لنا رابط او لينك تم الوقوف عليه بمؤشر الماوس :
تم الموضوع بحمد الله واي استفسار يرجا ترك تعليق بالاسفل
أصدقاء(تطوير ويب)
0تعليقات Blogger
لا توجد تعليقات على موضوع "طريقة عمل وصف مختصر لروابط مدونتك تبقنية الجي كويري"
إرسال تعليق
التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .