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

بسم الله الرحمن الرحيم

السلام عليكم و رحمة الله تعالى و بركاته

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

ساقدم لكم ادات رائعة او اضافة ترحيبية بحيث عندما ينتقل الزائر

الى صفحة اخرى ستظهر له ادات صغير على شكل مربع انيق

تقوم بالترحيب بالزائر، يمكنك ان تكتب فيها ما شئت.

- قم بالتوجه إلى تخطيط المدونة

- قم بإختيار إضافة أداة HTML/JavaScript

- قم بنسخ ولصق هذا الكود

<style>

table.imp-db-thks {

background-color: #34495E;

border-top: 6px solid white;

}

i.fa.fa-smile-o {

margin: -1px 10px 0px 0px;

}

table.imp-db {

background-color: #2A4057;

}

table.imp-txt-db {

background-color: #E8E8E9;

border-top: 6px solid white;

width: 217px;

}

@-webkit-keyframes fadeOutnotif {

0% { opacity: 1;}

10% { opacity: 1;}

90% { opacity: 1; -webkit-transform: translateY(0px);}

99% { opacity: 0; -webkit-transform: translateY(-30px);}

100% { opacity: 0;}

}

@-moz-keyframes fadeOutnotif {

0% { opacity: 1;}

10% { opacity: 1;}

90% { opacity: 1; -moz-transform: translateY(0px);}

99% { opacity: 0; -moz-transform: translateY(-30px);}

100% { opacity: 0;}

}

@-o-keyframes fadeOutnotif {

0% { opacity: 1;}

10% { opacity: 1;}

90% { opacity: 1; -moz-transform: translateY(0px);}

99% { opacity: 0; -moz-transform: translateY(-30px);}

100% { opacity: 0;}

}

@-ms-keyframes fadeOutnotif {

0% { opacity: 1;}

10% { opacity: 1;}

90% { opacity: 1; -moz-transform: translateY(0px);}

99% { opacity: 0; -moz-transform: translateY(-30px);}

100% { opacity: 0;}

}

@keyframes fadeOutnotif {

0% { opacity: 1;}

10% { opacity: 1;}

90% { opacity: 1; -moz-transform: translateY(0px);}

99% { opacity: 0; -moz-transform: translateY(-30px);}

100% { opacity: 0;}

}

</style>

<div id='divName' style='position:  fixed; top: 25px;     box-shadow: 0 1px 10px 1px rgba(0,0,0,0.2); right: 25px; background:  none repeat scroll 0 0 #ffffff;border-radius: 2px;padding:5px;text-align:right;-webkit-animation: fadeOutnotif 10s linear forwards;

-moz-animation: fadeOutnotif 10s linear forwards;

-o-animation: fadeOutnotif 10s linear forwards;

-ms-animation: fadeOutnotif 10s linear forwards;

animation: fadeOutnotif 10s linear forwards;'>

مرحبا بكم <span style='color: #060;  font-size: 14px;'></span></td>

</td>

</tr>
</tbody></table>
<table class="imp-txt-db" border='0' cellpadding='5' cellspacing='1' width='220'>

<td align='center' bgcolor='#eeeeee' valign='middle'><span style='color: #333;font-size: 13px;'>نتمنى أن تجدوا ما تبحثون عليه في مدونةالتكنولوجيا  </span>

</td>  </tr>
</tbody></table>
</div>
شارك على الفيس بوك
شارك على تويتر
شارك على + Google
شارك على ينكد

ثم غير اسم مدونتي الى اسم مدونتك يمكنك تغيير الحجم و الالوان التي تناسبك

.بعد ذالك قم بالحفظ و مبروك عليك الاضافة الرائعة