اضافة قائمه للموقع الاجتماعيه بتقنيه 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/AVvXsEjlNm8mKUdkWYaDvdFH-hoCYub0NsPO_kNNEseHbfFS0ip7vUy1eiKLkthzxocvQSwsD0svJLj8Eux_Nq2N0d9gA60fGUBa80jpbe8oYhL8zElRst0JoSvygpZDUDns0AUUUYMirf-Fe5C8/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/AVvXsEiLJovWXUM_W5nKhNYB7xSTqoAZIV_f_OqugPqz-AJMK2qKgkViRNsBPvNxhqGQEiMZK93nFbVjN-CXKyLe7mLP9dpJrlNy2vc_arKbwCkQDrinMRTN-eUbkcYja7mTmaXkyLAkxekVoj9M/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/AVvXsEhUcVnU0VyoZBS-ikd_VORERTluZUSPy8cSPePJzWZYsAKhdjoHpbOVeNbI-JigABWnLALbMqSYiWVn1bnr-YFehc-GKu8S6B-awtrIMVQBgXQFz-ol0PA-PYz6-_uj3J0qr-mvmfLUhKDx/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/AVvXsEi6BFvjLVK6HSf4lhqi765sT5mbJUxxCQU0-mW_9clnF3A73F0PngPckuGEmg5Tf0LBApSm4q8Nk8cChWeTQv2sf6tG33l8LYb-SP3A1fAzx7jGY9pQ6pCrXlMo5dFlXmpZQ5VlpXu46glr/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/AVvXsEiLJovWXUM_W5nKhNYB7xSTqoAZIV_f_OqugPqz-AJMK2qKgkViRNsBPvNxhqGQEiMZK93nFbVjN-CXKyLe7mLP9dpJrlNy2vc_arKbwCkQDrinMRTN-eUbkcYja7mTmaXkyLAkxekVoj9M/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/AVvXsEhUcVnU0VyoZBS-ikd_VORERTluZUSPy8cSPePJzWZYsAKhdjoHpbOVeNbI-JigABWnLALbMqSYiWVn1bnr-YFehc-GKu8S6B-awtrIMVQBgXQFz-ol0PA-PYz6-_uj3J0qr-mvmfLUhKDx/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/AVvXsEi6BFvjLVK6HSf4lhqi765sT5mbJUxxCQU0-mW_9clnF3A73F0PngPckuGEmg5Tf0LBApSm4q8Nk8cChWeTQv2sf6tG33l8LYb-SP3A1fAzx7jGY9pQ6pCrXlMo5dFlXmpZQ5VlpXu46glr/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>

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

هل أعجبك الموضوع ؟

Tweet

Sharing Widget bychamelcool