جديد جدا لدينا فقط ،
المشاركات الاجتماعية اعلى مدونتك ف الناف بار
حتى لا اطيل عليكم ،، اترككم مع الاضافة
انتقل إلى لوحة بلوجر> قوالب.
باستخدام CTRL + F، والبحث عن ]]></b:skin>
ثم قم بنسخ ولصق الكود التالى :
- لوحة بلوجر - ثم الى التخطيط - اضافة أداة
- افتح
ثم قم باضافة الكود التـآلى
المشاركات الاجتماعية اعلى مدونتك ف الناف بار
حتى لا اطيل عليكم ،، اترككم مع الاضافة
انتقل إلى لوحة بلوجر> قوالب.
باستخدام CTRL + F، والبحث عن ]]></b:skin>
ثم قم بنسخ ولصق الكود التالى :
- قم بلصق ذلك الكود قبلــه :
.socialw { width: 236px; margin-top: 100px; margin-left: auto; margin-right: auto; overflow: auto; height: 100%; } #social1 { border: 1px solid #292929; width: 37px; height: 62px; margin-left: 1px; float: left; overflow: hidden; } #social2,#social3,#social4,#social5 { border: 1px solid #292929; width: 37px; height: 62px; float: left; margin-left: 10px; overflow: hidden; } /* ANIMATIONS */ .animate { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animate.queue { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } .animate.queue2s { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -o-animation-delay: 2s; animation-delay: 2s; } .animate.queue3s { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; } .animate.queue4s { -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; } /* Fade In Down */ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-100px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-100px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-100px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-100px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } /* Fade In Down */ /* Social 1 Animation */ #social1 {position:relative;} #social1 img{ position:absolute; left:0; top:0; -webkit-transition: margin-top; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 250ms; } #social1:hover img{ margin-top:-62px; } #social1 .details{ position:absolute; left:0; top:0; z-index:-1; } /* Social 2 Animation */ #social2 {position:relative;} #social2 img{ position:absolute; left:0; top:0; -webkit-transition: margin-top; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 250ms; } #social2:hover img{ margin-top:-62px; } #social2 .details{ position:absolute; left:0; top:0; z-index:-1; } /* Social 3 Animation */ #social3 {position:relative;} #social3 img{ position:absolute; left:0; top:0; -webkit-transition: margin-top; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 250ms; } #social3:hover img{ margin-top:-62px; } #social3 .details{ position:absolute; left:0; top:0; z-index:-1; } /* Social 4 Animation */ #social4 {position:relative;} #social4 img{ position:absolute; left:0; top:0; -webkit-transition: margin-top; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 250ms; } #social4:hover img{ margin-top:-62px; } #social4 .details{ position:absolute; left:0; top:0; z-index:-1; } /* Social 5 Animation */ #social5 {position:relative;} #social5 img{ position:absolute; left:0; top:0; -webkit-transition: margin-top; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 250ms; } #social5:hover img{ margin-top:-62px; } #social5 .details{ position:absolute; left:0; top:0; z-index:-1; }
- Click on Save Template.
- لوحة بلوجر - ثم الى التخطيط - اضافة أداة
- افتح
 | HTML/JavaScript إضافة وظيفة طرف ثالث أو شفرة أخرى إلى مدونتك الإلكترونية. بواسطة Blogger |
ثم قم باضافة الكود التـآلى
- Copy and paste the code below:
<!-- Social Icons Start !--> <div> <!-- Dribbble !--> <a href="http://dribbble.com/YOUR_USERNAME" target="_blank"> <div id="social1"> <img src="http://i.imgur.com/64r2jAv.png" /> </div> </a> <!-- Dribbble !--> <!-- Behance !--> <a href="http://behance.com/ YOUR_USERNAME " target="_blank"> <div id="social2"> <img src="http://i.imgur.com/fkuhUov.png" /> </div> </a> <!-- Behance !--> <!-- Facebook !--> <a href="http://facebook.com/ YOUR_USERNAME " target="_blank"> <div id="social3"> <img src="http://i.imgur.com/PY2EPRW.png" /> </div> </a> <!-- Facebook !--> <!-- Twitter !--> <a href="http://twitter.com/ YOUR_USERNAME " target="_blank"> <div id="social4"> <img src="http://i.imgur.com/ny0pyqt.png" /> </div> </a> <!-- Twitter !--> <!-- Intagram !--> <a href="http://instagram.com/ YOUR_USERNAME " target="_blank"> <div id="social5"> <img src="http://i.imgur.com/tZZG2zQ.png" /> </div> </a> <!-- Instagram !--> </div> <!-- Social Icons End !-->
ثم اضغط حفظ ومبروك عليك الاضافة ،
ارجو ان اكون وفقت ف الشرح ، احمد الماجيك
