موعد: أيقونات

السبت، 9 أبريل 2016

مجموعة أيقونات بسيطة تحتوي علي 450 أيقونة

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

Today we have this abundant set of outline icons, cheers! This set contains more than 450 simple line icons created in vector that you can use for a lot of purposes.

Thanks to Nishanth kunder for this awesome freebie. Go check out more of his work on his portfolio for the latest updates and beautiful works!

Format: AI, EPS, SVG

File Size: 3.48 MB

تحميل

الجمعة، 25 مارس 2016

أيقونات

حزمة أيقونات لمواقع التواصل الإجتماعي تحتوي علي 72 أيقونة

glokall 2:23 م اضف تعليق

أكمل المقال

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

تحميل اضغط هنا

الثلاثاء، 22 مارس 2016

أيقونات

حزمة أيقونات تحتوي علي 1000 أيقونة حبر

glokall 9:34 م اضف تعليق

أكمل المقال

حزمة أيقونات لا تصدق تحتوي علي 1000 أيقونة حبر متوفر بصيغة PSD، AI، EPS والأشكال PNG وSVG ، يمكن إستخدامها في التصميمات سواء في برنامج الفوتوشوب أو برنامج الأليستريتور.

تحميل اضغط هنا

الثلاثاء، 11 أغسطس 2015

أيقونات ملحقات عامة

رموز تعبيرية متحركة بتصميم مسطح

glokall 7:44 ص اضف تعليق

أكمل المقال

هؤلاء التعبيرات يضحكون 😅 يبكون 😭 يهتفون 😵 ويرقصون 😗 ! ملحق اليوم يتكون من مجموعة صغيرة من 28 رمز تعبيري متحرك بتصميم مسطح رائع
يمكن تحريرهم ببرنامج Adobe After Effects أو استعمالهم كصورة GIF

السبت، 4 مايو 2013

اضافات بلوجر أيقونات تعليقــات دروس بلوجر CSS3

اضافة ترقيم التعليقات في مدونات بلوجر بشكل احترافي

glokall 10:26 ص اضف تعليق

أكمل المقال

السلام عليكم ورحمة الله وبركاته ومرحبا بكم من جديد في مدونة جلال البعداني , اليوم ان شاء الله سنتعلم معا كيفية ترقيم تعليقات بلوجر بطريقه بسيط بتقنية CSS داخل ايقونات صغيره بجوار التعليق , , ما يميز هذه الاضافه انها تقوم بترقيم التعليقات في مدونة بلوجر بطريقه اليه بالترتيب من الاقدم الى الاحدث , ومن مميزاتها ايضا انه يمكنك التعقيب على التعليقات بكل سلاسه ويسر حيث يمكنك من خلاله التعقيب على التعليق رقم 1 مثلا , ثم الرد عليه بسهوله تامه

كيفية اضافة صندوق الاعجاب على فيس بوك على مدوناتكم

1- من لوحة التحكم -> قالب -> تحرير HTML -> تابع

2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات

3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

]]></b:skin>

والصق الكود التالي بعده تمامآ

counter-reset: countcomments;
    }
.comment-thread li:before {
 content: counter(countcomments,decimal);
 counter-increment: countcomments;
 float: right;
 font-size: 22px;
 color: #555555;
 padding-left: 10px;
 padding-top: 3px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzSfVSWncRzDpTkPPS4vjBDOrMU9ohoJXQ9E41cBPAh75c6-KuTo1n-WCtQvXVnu8bkaYdIEa8Rw_hbP5B-pbhVhB-UEboSLqQznwCQG8rS6x8-5_8a3zItIOwbYPsuKIsvGdlNYWo5wu6/s1600/comment+bubble2.png) no-repeat;
 margin-top: 7px;
 margin-left: 10px;
 width: 50px;
 /*image-width size*/
 height: 48px;
 /*image-height size*/
 }
 .comment-thread ol ol {
 counter-reset: contrebasse;
    }
 .comment-thread li li:before {
 content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
 counter-increment: contrebasse;
 float: right;
 font-size: 18px;
 color: #666666;
   }

الان قم بحفظ القالب ومبرووك عليك الاضافه

ولتغيير ايقونة ترقيم التعليقات قم بالبحث عن الرابط التالي

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzSfVSWncRzDpTkPPS4vjBDOrMU9ohoJXQ9E41cBPAh75c6-KuTo1n-WCtQvXVnu8bkaYdIEa8Rw_hbP5B-pbhVhB-UEboSLqQznwCQG8rS6x8-5_8a3zItIOwbYPsuKIsvGdlNYWo5wu6/s1600/comment+bubble2.png

واستبدله برابط الايقونه حسب رغبتيك

وفي ما يلي بعض من ايقونات التي يظهر داخلها ترقيم التعليق

لتغيير الايقونه، انقر بزر الماوس الأيمن على أي ايقونه، حدد نسخ عنوان URL للصورة واستبدله برابط الايقونه التي في الكود باللون الاحمر

السبت، 9 مارس 2013

أزرار اضافات بلوجر أيقونات تويتر فيسبوك Jquery

إضافة تابعني عبر المواقع الاجتماعية بتأثيرات عائمه واحترافيه

glokall 2:55 ص اضف تعليق

أكمل المقال

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

على ماذا تحتوي هذه الاضافه ؟

تحتوي الاضافه على ثمانية من أشهر منصات الشبكات الاجتماعيةاهمها ( فيس بوك , تويتر , فيدبرنر , يوتيوب ) التي تظهر على شكل شريط يطفو على طول الشاشة فإن الزائر انتقل لأعلى أو لأسفل صفحة تطفو على طول الصفحه. يمكنك معاينة الاضافه في الصورة التالية والتمتع باحترافيتها .

اين يمكنني ان اضع هذه الاضافه وفي اي اتجاه تكون اجمل؟

تتميز هذه الاضافه بمرونتها، ويمكن وضعها إما على الجانب الأيسر،او الجانب الأيمن، اوأعلى أو اسفل المدونه,,,,,,,,

مكان وضع الإضافة مهم جدا لإقبال الزوار عليها , فهناك اماكن لا يقترب الزائر منها , فالمكان الامثل لوضع هذه الإضافة إما فى الجانب الأيسر , او اسفل الصفحة وهذا لتظهر افضل نتائج للإضافة,

وللتحكم بموقع الاضافه ، علينا تغيير الامر ب “bottom”لوضعها اسفل المدونه ,او (“top” لوضعها اعلى المدونه) او ( left لوضعها يسارالمدونه) او ( “right”لوضعها يمين المدونه ) وفيما يلي صوره تبين الاضافه من مواقع مختلفه .

شريط عائم لتابعني عبر المواقع الاجتماعيه

كيفية اضافة هذه الاداه الى مدونات بلوجر

1- من لوحة التحكم -> قالب -> تحرير HTML -> تابع

2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات

3- الان ضع علامه لى توسيع القالب

4- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

</ BODY>

والصق الكود التالي قبله تمامآ

<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/mblsocialbar.js"></script>
<div id="scolder">
<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>
<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>


<script type="text/javascript">
$(document).ready(function(){
$.mblSocialBar({
items: {
twitter: { url: 'ادخل هنا رابط حسابك في تويتر', text: 'تابعني على تويتر' },
facebook: { url: 'هنا رابط صفحتك في فيس بوك', text: 'كن من اصدقاء المدنه على فيس بوك' },
rss: { url: 'هنا رابط حسابك في فيد برنر', text: 'تابع تحديثات المدونه عبر الخلاصات' },
google: { url: 'هنا رابط بروفايلك في جوجل بلس', text: 'تابعني على google+' },
youtube: { url: 'هنا رابط قناتك في يوتيوب', text: 'تابعني على يوتيوب' },
orkut: { url: 'orkut هنا رابط بروفايلك في', text: 'كن من اصدقاء المدونه على orkut' },
myspace: { url: 'هنا رابط بروفايلك فيmyspace ', text: 'كن من اصدقائي على myspace' },
digg: { url: 'digg هنا رابط بروفايلك في', text: 'تابعني على digg' },
},
show: 8,
position: "left",
skin: "clear"
});
});
</script>

1-الان قم باضافة روابط حساباتك على فيد برنر و جوجل بلس و يوتيوب و orkut و myspace و digg

2- وللتحكم بموقع الاضافه ، علينا تغييرماهو مضلل باللون left بالاوامر التاليه “bottom”لوضعها اسفل المدونه
,او (“top” لوضعها اعلى المدونه) او ( left لوضعها يسارالمدونه) او ( “right”لوضعها يمين المدونه )
3- لتغيير بخلفية الشريط الى اللون الاسود استبدال ما باللون clear الى "dark"

,واخيرا قم بحفظ القالب ومبروووووووووووك عليك الاضافه

الخميس، 28 فبراير 2013

أزرار اضافات بلوجر أيقونات تويتر دروس بلوجر

لوحة الإشتراك في المواقع الإجتماعية بشكل انيق واحترافي

glokall 3:29 م اضف تعليق

أكمل المقال

السلام عليكم ورحمة الله وبركاته، مرحبا بكم من جديد في مدونة جلال البعداني , في هذه التدوينة سوف اقدم لكم ان شاء الله إضافة أعجب بها الكثير ويبحث عنها الكثير , وهي عباره عن لوحة او قائمة للإشتراك في المواقع الإجتماعية , فيس بوك وتويتر وايضا للاشتراك في rss والقائمة البريدية , تتميز هذه الاضافه بشكلها الجذاب وبخفتها الرائعه وبالوانها المتناسقه ,لن أطيل أكثر وإليكم طريقة التركيب ...

صورة الاضافه

كيفية اضافة هذه الاداه الى مدوناتكم

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

    <div class="widget-content">
    <div class="lefts">
    <h1>إنضم لأكثر من <b>3025</b> متابع للمدونة</h1>
    <div class="social"><a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/albaadani%20"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTwKO_oubgclZbDxY_5wA3sv_bwPyc7HvgBOwnMcd5mE8Wq8ZG7Ht9XFNIks2cWJOy1KiU4lcmsU1WoCCqiUvlKEsCobKuKgMPXDW0RczclMeWZdOYxJKj1QupQXdnyUHxtz15jpax3YM/s1600/rss.png"></a>
    <a rel="nofollow" target="_blank" href="http://twitter.com/albaadani1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU8HnJFWrlHx3KxeQ1Wd8kyUQY9vTnzoDZSOcpoEi4wQ0g4BZdGALWCBS422hO6A_hNQPACkF7bvFtjEB4Dxd2DxUBv9HQYdQ8FyKOjw9etALkOpzI4esQ_DgFgALMgW07Ubxkvv0FkkY/s1600/tw.png"></a>
    <a rel="nofollow" target="_blank" href="http://www.facebook.com/alb33dani"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9VtZ6sQ1lcxxkyvXeGRTRUv9Zxo2jNljFagJBVyLP-SEX7lZ4etYb5CjEdu2crPLTBZ0hgGqEF1HUqN09w_P3rX55OA7bk08uw5NOH58Znyszv1DETBXpgmx9bAPFNpRC9Ii1wWxuYE0/s1600/face.png"></a>
    </div>
    <div class="ins"> <center><div id="sleek-subscribe">
    <form action="http://feedburner.google.com/fb/a/mailverify?uri=albaadani" method="post" rel="nofollow" target="_new"> <input class="txt2" name="email" onblur="if undefinedthis.value == '') {this.value = 'ضع اميلك هنا ليصلك كل جديد';}" onfocus="if undefinedthis.value == 'ضع اميلك هنا ليصلك كل جديد') {this.value = '';}" value="ضع اميلك هنا ليصلك كل جديد"><input class="btn2" type="submit" value=" ">
    </form>
    </div>
     </center>
    </div> </div>
    <style>
    .lefts{
    width:300px;
    height:182px;
    background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-YvqFS3xhtrG12NvNxzKpFbx7HMdlG_WpsqLrMAwWVXYScmJbGlOH6XyV-YhyphenhyphenWXEdYWdJLB8-VAdgAGANjFz1y4CdyHxknTTN3E7FhqxSPfk5XQRo5h6lfaJrMTbBrLu9G4-rhcB_z8g/s1600/left.png);
    }
    .lefts h1{
    color:#767676;
    margin:0;
    text-align:center;
    font:14px  'DroidKufi-Bold';
    padding:10px;
    padding-top:20px;
    }
    .lefts b{
    font:18px Arial, Helvetica, sans-serif;
    color:#ffc000;
    }
    .lefts .social{
    margin-right:50px;
    }
    .lefts .social a img{
    float:right;
    margin-right:20px;
    margin-top:8px;
    }
    .lefts .ins{
    width:300px;
    height:40px;
    float:right;
    margin-top:15px;
    }
    .lefts .ins .txt2{
    border:1px solid #e1e1e1;
    background:#fff;
    border-radius:5px;
    font:12px Tahoma, Geneva, sans-serif;
    color:#c0c0c0;
    padding:6px 7px 7px 7px;
    margin:0px;
    float:right;
    margin:0 20px 0 5px;
    text-align:right;
    width: 175px;
    }
    .lefts .ins .btn2{
    background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmCrRjBuPkS_3NW8CfdGyJLfK2ZsNcszHJpi43BsFAFBU9Q1D42UF20Fb3A375qXTjkZqNqiTwqwgF2IHJYB8iOOAK5IY5sXI8W41Pu75VFldhUrer7HF9YO99lATkwyJqPgF_Cy1bhg/s1600/sub.png);
    float:right;
    border:none;
    width:64px;
    height:28px;
    cursor:pointer;
    }
    </style>
    </div>

الان قم باستبدال ما بالالوان باسماء حساباتك في rss وفيس بوك وتويتر

* ا ستبدل albaadani باسم حسابك في فيد برنر

* استبدل albaadani1 باسم حسابك في تويتر

* استبدل alb33dani باسم حسابك في فيس بوك

* استبدل albaadani باسم حسابك في فيد برنر لخدمة البريد الالكتروني

الان قم بحفظ الاداه ومبرووووووووووك عليك الاضافه

وبالاخر.. لا تنسى ان تتابعني على حسابي في تويتر لتبقى على اطلاع بجديد المدونة

الاثنين، 4 فبراير 2013

أزرار اضافات بلوجر أيقونات تويتر فيسبوك

اضافة قطعة ازرار المواقع الاجتماعيه بالوان زاهيه وخلابه

glokall 4:01 م اضف تعليق

أكمل المقال

السلام عليكم ورحمة الله تعالى وبركاته , اليوم ان شاء الله سوف اقدم لكم اضافه جديده على منصات بلوجر , والتي هي عباره عن ايقونات chronicl-social جذابه وبالوان رائعه, تميز هذه الايقونات بالوان متغيره خلابه و ملفته , والتي بدورها تزيد من جمالية المدونه ,وأضن ان اكثركم لم يراها من قبل ,لانها حديثة البرمجة حيث تتميز بايقونات صغيرة تعبر عن كل خدمة ,وتضم كل المواقع الاجتماعية المستخدمة والمنتشرة بكثرة <<<لا اطيل عليكم ساترككم مع الاضافه

كيفية اضافة هذه الاداه الى مدونتك

انتقل إلى لوحة تحكم مدونتك

HTML/Javascript إختر "تخطيط" ثم إضافة أداة ثم اختر

والآن الصق داخل المستطيل الكود التالي

<style type='text/css'>
/*WIdget by www.http://alb33dani.blogspot.com*/
.wg-roseicwidget { width: 300px; margin: -10px; text-decoration: none; }
.wg-roseicwidget ul { margin: 0; padding: 0; text-decoration: none;}
.wg-roseicwidget ul li { list-style:none; padding: 0; text-transform: none; text-decoration: none;}
.wg-roseicwidget ul li a { color: #fff; display:block; text-decoration: none;}
.wg-roseicwidget ul li a:hover { color: #c9c9c9; background-color: #333; text-decoration: none; }
.wg-roseicwidget ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.wg-roseicwidget ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
/*WIdget by www.http://alb33dani.blogspot.com*/
</style>
<div class="wg-roseicwidget"> <ul>
<li><a class="facebook" href="https://www.facebook.com/alb33dani">ادعمنا على فيس بوك</a></li>
<li><a class="rss" href="http://feeds.feedburner.com/albaadani">اشترك عبر البريد</a></li>
<li><a class="twitter" href="https://twitter.com/albaadani1">تابعني على تويتر</a></li>
<li><a class="google" href="https://plus.google.com/103499777490414306950">Google+تابعني </a></li>
<li><a class="linkedin" href="albaadani">تواصل معي عبر لينكيدن</a></li>
</ul>
</div>

الان قم باستبدال ما بالالوان باسماء حساباتك في فيس بوك وتويتر وجوجل ولينكدين

* استبدل alb33dani باسم حسابك في فيس بوك

* استبدل albaadani باسم حسابك في فيد برنر

* استبدل albaadani1 باسم حسابك في تويتر

* استبدل 103499777490414306950 رقم الاي دي الخاص بحسابك في جوجل

* استبدل albaadani باسم حسابك في موقع لينكيدن

وبالاخير قم بحفظ الاداه ومبروك عليك الاضافه

الأحد، 12 أغسطس 2012

اضافات بلوجر أيقونات Jquery

تحديث اضافة"صندوق الإشتراك بالبريد وفيسبوك وتويتر" بشكل انيق بتقنية css

glokall 3:33 م اضف تعليق

أكمل المقال

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

صورة الاضافه

كيفية اضافة هذه القطعه الى مدونتك

ادخل اسم حساب صفحتك في فيسبوك في مولد القطعه المبين امامك

* ثم ادخل الاي دي لصفحتك في جوجل بلس

* ثم اخل اسم حسابك على التويتر

* ثم ادخل الاي دي لملفك الشخصي في جوجل بلس

* ثم ادخل اسم حسابك في موقع Pinterest

* ثم ادخل اسم حسابك علي الفيدبيرنر

* وبعد هذا انقر على هذا الزر Genrateالموجود في اسفل مولد القطعه

* واخيرآ انقر على اضافة هذه القطعه الى مدونتك بالنقر على add to blogger

الان قم بحفظ الاداه ومبروك عليك الاضافه

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

اذا كان عندكم اي استفسارات يمكنكم كتابة تعليق باستفساراتكم وسيتم الرد عليكم انشاء الله

الأحد، 8 يوليو 2012

اضافات بلوجر أيقونات Jquery

كيفية إضافة بنرات إعلانية على مدونات بلوجر بتأثيرات jQuery

glokall 8:40 ص اضف تعليق

أكمل المقال

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

كيفية اضافة هذه القطعه الى مدونتك

1- انتقل إلى لوحة تحكم مدونتك
2- إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript
3- والآن الصق داخل المستطيل الكود التالي

]]></b:skin>

ثم قم بإضافة هذا الكود قبله مباشرة :

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; 
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; 
-ms-interpolation-mode: bicubic; 
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center;  
border: none; 
}

بعد ذلك إبحث عن هذا الكود :

</head>

و ألصق الكود التالي قبله :

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$undefineddocument).readyundefinedfunctionundefined){

//Larger thumbnail preview

$undefined&quot;ul.thumb li&quot;).hoverundefinedfunctionundefined) {
$undefinedthis).cssundefined{&#39;z-index&#39; : &#39;10&#39;});
$undefinedthis).findundefined&#39;img&#39;).addClassundefined&quot;hover&quot;)
.stopundefined)
.animateundefined{
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , functionundefined) {
$undefinedthis).cssundefined{&#39;z-index&#39; : &#39;0&#39;});
$undefinedthis).findundefined&#39;img&#39;).removeClassundefined&quot;hover&quot;)
.stopundefined)
.animateundefined{
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$undefined&quot;ul.thumb li a&quot;).clickundefinedfunctionundefined) {

var mainImage = $undefinedthis).attrundefined&quot;href&quot;); //Find Image Name
$undefined&quot;#main_view img&quot;).attrundefined{ src: mainImage });
});
});<font size="0"><a href=" http://www.pergola-aluminium.org"></a></font>
</script>

والآن قم بحفظ القالب

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

<ul class="thumb">
<li><a href="رابط المعلن"><img src="http://im32.gulfup.com/px4oW.gif" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="http://im32.gulfup.com/px4oW.gif" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="http://im32.gulfup.com/px4oW.gif" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="http://im32.gulfup.com/px4oW.gif" alt="" /></a></li>
</ul>