معاينة النص بتقنية الjQuery
السلام عليكم و رحمة الله و بركاته
أخواني الكرام
سنبدأ بإذن الله بموضوع مميز عن تأثيرات ال css
استخدام css لصنع مؤثرات مختلفة على النصوص
كثيرا ما نحتاج إلى طريقة ما لوضع رابط و لإضفاء لمسة جمالية على النص أو الصورة
كثيرا ما نحتاج إلى طريقة ما لوضع رابط و لإضفاء لمسة جمالية على النص أو الصورة
وغالبا ما يلجأ مصممو الويب إلى تقنيات معقدة لصنع هذه التأثيرات.
الآن أصبح بالإمكان صنع الكثير من هذه التأثيرات دون الحاجة إلى استخدام تقنيات معقدة
وذلك باستخدام التقنيات الوسمية التي توفرها لنا ال css
و لا ننسى تقنية ال jquery
راقب الأمثلة أدناه.
بحيث لو تمعنت جيدا اخي الكريم
بمجرد تحريك الماوس سوف تضهر لك نافدة صغيرة تعطي لك نمودجا عن الموقع او عن نمودج عن فكرة
2- قم بحفظ نسخة من قالب مدونتك .
3- اضغط المفتاح f3 من لوحة المفاتيح ثم ابحث عن الكود التالي :
]]></b:skin>- ثم مباشرة قبل الكود السابق قم بنسخ و لصق الكود التالي :
<style type="text/css">
{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/* */
</style>ثم ابحث عن الكود التالي :
</head>- ثم مباشرة قبل أو بعد الكود السابق قم بنسخ و لصق الكود التالي :
<script src='http://blogspacetech.googlecode.com/files/main.js' type='text/javascript'/> <script src='http://blogspacetech.googlecode.com/files/jquery.js' type='text/javascript'/>
شرح كيفية الإستخدام
قم بكتابة تدوينتك بالطريقة المعتادة
و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,
أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة
و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,
أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة
<a href="http://blogspacetech.blogspot.com/" class="screenshot" rel="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-84LXwjcozoNAZuV0gUsMAEpIwgYPDnE8IFpjEcwXjhqkMhbHL368wn_owhbLM0ZnmD9qNCs-5kOK2JMHUwx87KvjCljlZvP5bB7wreeqcAQC_x8GcE4IFVsQd61B_fZB_fpztsAS01k/s1600/beta.thumbalizr.com.png">blogspacetech</a>
طبعا لمن يريد المزيد من المعلومات ...
|
