اضافة قائمه للموقع الاجتماعيه بتقنيه cc3 لمدونات البلوجر

السلام عليكم ورحمه الله وبركاته اقدم لكم اضافه جميله جداً اضافة قائمه للموقع الاجتماعيه بتقنيه cc3 لمدونات البلوجر

لمشاهده الاضافه من هنا  ندخل لصلب الموضوع :

للتركيب الاضافه

   اذهب الي لوحه التحكم ثم الي صفحه القالب >> ثم تحرير >> ثم

ثم قبله مباشره الصق الكود التالي ]]></b:skin>ابحث عن

.widget-item-control a{display:none;}

#jocial{width: 305px;

float: left;margin-top: 10px;}

#jocial li{position:relative; cursor:pointer; padding: 0 !important;}

#jocial .facebook, .googleplus, .rss, .twitter{

position: relative;

-moz-transition: all 0.4s ease-in-out;

-webkit-transition: all 0.4s ease-in-out;

-o-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

z-index: 5;

display: block;

float: left;

margin: 1px;}

#jocial .icon{overflow:hidden;}

#jocial .facebook{width: 150px;

height: 150px;

background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDOsTDI7PUOtuzCXdG6rq-lKcLb8Dph119Op38gZI8RpMge0On58z15h5IdHeHUgeHgeTXqWzjM_Y_3sF54DtJQu-VcOZhBKb7rWR5kSiL1CRQqZB8OSNdmiLfzF97aKiRLw_JX7hgHKeE/s1600/facebook.png") no-repeat center center;}

#jocial .twitter{width: 150px;

height: 74px;

background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_VO4upZ3EoXkWTj0n9KKOvdnQTy0ro0rL_eyRBgaSb09MSAqo-HN7w1F0kR34nI2VyqQspUH72dx3ejv-8AvOES53p3NNfKIZ4drUsOwfDl35Y6xKoxfqOF_ivP9dWpnxO5ZktPBnvZ8E/s1600/Twitter.png") no-repeat center center;}

#jocial .googleplus{width: 150px;

height: 74px;

background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheRG4HnC0NzAyY-PrsXQhDMfSSGFfuRfhnQjVbwRwSdST4B_n6K11A6hg6vLWv4E5szCK0QAgQALDu4pN9jTjS9ro6GYs0JBEp2b-gtcrU5l8EypzQj_7B8Bkd2b1Pm3-wHU8dHgIhQere/s1600/google+plus.png") no-repeat center center;}

#jocial .rss{ width: 302px;

height: 74px;

background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHjkYiZ1ksiD9t5XHtGfPS3tlhEEN8o-RZBGpj9kl3AVFKVwiA0vWM7Z1xVuRPji75pLcMZjbF_oRTEHtIvmCZwGAjmszd0s1P6Sr_8StkvGE9qL4029wQ7O8khCs3mBwBJwCSQ4QIRTSK/s1600/rss.png") no-repeat center center;}

#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;

-webkit-transition: all 0.1s ease-in-out;}

#jocial li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_VO4upZ3EoXkWTj0n9KKOvdnQTy0ro0rL_eyRBgaSb09MSAqo-HN7w1F0kR34nI2VyqQspUH72dx3ejv-8AvOES53p3NNfKIZ4drUsOwfDl35Y6xKoxfqOF_ivP9dWpnxO5ZktPBnvZ8E/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

-webkit-transition: all 0.1s ease-in-out;}

#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheRG4HnC0NzAyY-PrsXQhDMfSSGFfuRfhnQjVbwRwSdST4B_n6K11A6hg6vLWv4E5szCK0QAgQALDu4pN9jTjS9ro6GYs0JBEp2b-gtcrU5l8EypzQj_7B8Bkd2b1Pm3-wHU8dHgIhQere/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

-webkit-transition: all 0.1s ease-in-out;}

#jocial li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHjkYiZ1ksiD9t5XHtGfPS3tlhEEN8o-RZBGpj9kl3AVFKVwiA0vWM7Z1xVuRPji75pLcMZjbF_oRTEHtIvmCZwGAjmszd0s1P6Sr_8StkvGE9qL4029wQ7O8khCs3mBwBJwCSQ4QIRTSK/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

-webkit-transition: all 0.1s ease-in-out;}

ثم قم بحفض القالب.

توجه الان الي تخطيط >> اضافه اداه>>ضع الكود التالي في اداه  HTML/JavaScript  :

<ul id='jocial'>

<li><a class='icon facebook' href='http://www.facebook.com/*******/'/></li>

<li><a class='icon twitter' href='http://twitter.com/*******'/></li>

<li><a class='icon googleplus' href='https://plus.google.com/*******/'/></li>

<li><a class='icon rss' href='http://feeds.feedburner.com/*******'/></li>

</ul>

وهذا كل شئ اذا واجهتك مشكله لا تتردد في وضعها والسلام عليكم ورحمه الله وركاته.

شارك الموضوع

الكاتب : أسامة بويردن

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

• تابعني :
• fb
• tw
• gl

Posted in: اضافات بلوجر,بلوجر,كل