حصريا...تركيب اضافة المتابعة عبر الشبكات الإجتماعية على بلوجر من التخطيط

الرئيسية اضافات بلوجر حصريا...تركيب اضافة المتابعة عبر الشبكات الإجتماعية على بلوجر من التخطيط

حصريا...تركيب اضافة المتابعة عبر الشبكات الإجتماعية على بلوجر من التخطيط

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

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

حصريا...تركيب اضافة متابعة الشبكات الإجتماعية على بلوجر من التخطيط

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

مميزات الإضافة
  • سهولة الإستخدام
  • التحكم من التخطيط
  • تعدم اشهر المواقع الإجتماعية
  • سهلة التركيب
  • اعتماد على ايقونات font awesome
  • لايوجد جافا سكريبت

الاضافة بسهولة عملها يمكنك التحكم بها من التخطيط فقط اضافة او ازالة اي موقع تعتمد على مكتبة font awesome الشهيرة .

حصريا...تركيب اضافة متابعة الشبكات الإجتماعية على بلوجر من التخطيط

رابط مكتبة font awesome اذا لم تتوفر عليه
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

ضع اكواد html في قسم السايدبار داخل اكواد القالب
<b:widget id='LinkList75' locked='true' title='حساباتنا الاجتماعية' type='LinkList' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='link-5'>#</b:widget-setting>
              <b:widget-setting name='link-3'>#</b:widget-setting>
              <b:widget-setting name='link-4'>#</b:widget-setting>
              <b:widget-setting name='text-1'>twitter</b:widget-setting>
              <b:widget-setting name='text-0'>facebook</b:widget-setting>
              <b:widget-setting name='text-3'>rss</b:widget-setting>
              <b:widget-setting name='text-2'>instagram</b:widget-setting>
              <b:widget-setting name='text-5'>vk</b:widget-setting>
              <b:widget-setting name='text-4'>pinterest</b:widget-setting>
              <b:widget-setting name='sorting'>NONE</b:widget-setting>
              <b:widget-setting name='link-1'>#</b:widget-setting>
              <b:widget-setting name='link-2'>#</b:widget-setting>
              <b:widget-setting name='link-0'>http://fb.com/soratemplates</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
  <b:include name='widget-title'/>
  <b:include name='content'/>
</b:includable>
            <b:includable id='content'>
              <div class='widget-content'>
                <ul class='social-counter social social-color social-text'>
                  <b:loop values='data:links' var='link'>
                    <li expr:class='data:link.name'><a expr:href='data:link.target' expr:title='data:link.name' target='_blank'/></li>
                  </b:loop>
                </ul>
              </div>
            </b:includable>
          </b:widget>
ثم اضع اكواد css فوق وسم head الشكل الاول
<!-- الشكل الأول -->
<style type='text/css'>

.social-counter li {
    float: right;
    width: calc(50%);
    margin: 10px 0 0 }
.social-counter li:nth-child(1), .social-counter li:nth-child(2) {
    margin-top: 0 }
.social-counter li:nth-child(even) {
    float: right }
.social-counter li a {
    display: block;
    height: 34px;
    font-size: 13px;
    color: #fff;
    line-height: 34px;
    transition: opacity .17s }
.social-counter li a:hover {
    opacity: .8 }
.social-counter li a:before {
    float: right;
    width: 34px;
    height: 34px;
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 16px;
    text-align: center;
    margin: 0 0 0 10px }

.social a:before {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400 }
.social .facebook a:before {
    content: "\f09a" }
.social .twitter a:before {
    content: "\f099" }
.social .rss a:before {
    content: "\f09e" }
.social .youtube a:before {
    content: "\f16a" }
.social .skype a:before {
    content: "\f17e" }
.social .stumbleupon a:before {
    content: "\f1a4" }
.social .tumblr a:before {
    content: "\f173" }
.social .vk a:before {
    content: "\f189" }
.social .stack-overflow a:before {
    content: "\f16c" }
.social .github a:before {
    content: "\f09b" }
.social .linkedin a:before {
    content: "\f0e1" }
.social .dribbble a:before {
    content: "\f17d" }
.social .soundcloud a:before {
    content: "\f1be" }
.social .behance a:before {
    content: "\f1b4" }
.social .digg a:before {
    content: "\f1a6" }
.social .instagram a:before {
    content: "\f16d" }
.social .pinterest a:before {
    content: "\f0d2" }
.social .twitch a:before {
    content: "\f1e8" }
.social .delicious a:before {
    content: "\f1a5" }
.social .codepen a:before {
    content: "\f1cb" }
.social .reddit a:before {
    content: "\f1a1" }
.social .whatsapp a:before {
    content: "\f232" }
.social .snapchat a:before {
    content: "\f2ac" }
.social .email a:before {
    content: "\f0e0" }
.social .external-link a:before {
    content: "\f35d" }
.social-color .facebook a {
    background-color: #3b5999 }
.social-color .twitter a {
    background-color: #00acee }
.social-color .youtube a {
    background-color: #db4a39 }
.social-color .instagram a {
    background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4) }
.social-color .pinterest a {
    background-color: #ca2127 }
.social-color .dribbble a {
    background-color: #ea4c89 }
.social-color .linkedin a {
    background-color: #0077b5 }
.social-color .tumblr a {
    background-color: #365069 }
.social-color .twitch a {
    background-color: #6441a5 }
.social-color .rss a {
    background-color: #ffc200 }
.social-color .skype a {
    background-color: #00aff0 }
.social-color .stumbleupon a {
    background-color: #eb4823 }
.social-color .vk a {
    background-color: #4a76a8 }
.social-color .stack-overflow a {
    background-color: #f48024 }
.social-color .github a {
    background-color: #24292e }
.social-color .soundcloud a {
    background: linear-gradient(#ff7400, #ff3400) }
.social-color .behance a {
    background-color: #191919 }
.social-color .digg a {
    background-color: #1b1a19 }
.social-color .delicious a {
    background-color: #0076e8 }
.social-color .codepen a {
    background-color: #000 }
.social-color .reddit a {
    background-color: #ff4500 }
.social-color .whatsapp a {
    background-color: #3fbb50 }
.social-color .snapchat a {
    background-color: #ffe700 }
.social-color .email a {
    background-color: #888 }
.social-color .external-link a {
    background-color: $(main.dark.color) }
.social-text .facebook a:after {
    content: "Facebook" }
.social-text .twitter a:after {
    content: "Twitter" }
.social-text .rss a:after {
    content: "Rss" }
.social-text .youtube a:after {
    content: "YouTube" }
.social-text .skype a:after {
    content: "Skype" }
.social-text .stumbleupon a:after {
    content: "StumbleUpon" }
.social-text .tumblr a:after {
    content: "Tumblr" }
.social-text .vk a:after {
    content: "VKontakte" }
.social-text .stack-overflow a:after {
    content: "Stack Overflow" }
.social-text .github a:after {
    content: "Github" }
.social-text .linkedin a:after {
    content: "LinkedIn" }
.social-text .dribbble a:after {
    content: "Dribbble" }
.social-text .soundcloud a:after {
    content: "SoundCloud" }
.social-text .behance a:after {
    content: "Behance" }
.social-text .digg a:after {
    content: "Digg" }
.social-text .instagram a:after {
    content: "Instagram" }
.social-text .pinterest a:after {
    content: "Pinterest" }
.social-text .twitch a:after {
    content: "Twitch" }
.social-text .delicious a:after {
    content: "Delicious" }
.social-text .codepen a:after {
    content: "CodePen" }
.social-text .flipboard a:after {
    content: "Flipboard" }
.social-text .reddit a:after {
    content: "Reddit" }
.social-text .whatsapp a:after {
    content: "Whatsapp" }
.social-text .messenger a:after {
    content: "Messenger" }
.social-text .snapchat a:after {
    content: "Snapchat" }
.social-text .email a:after {
    content: "Email" }
.social-text .external-link a:after {
    content: "WebSite" }

</style>
ضع اكواد css فوق وسم head الشكل التاني
<!-- الشكل الأول -->
<style type='text/css'>

.social-counter li {
    float: right;
    width: calc(50%);
    margin: 10px 0 0 }
.social-counter li:nth-child(1), .social-counter li:nth-child(2) {
    margin-top: 0 }
.social-counter li:nth-child(even) {
    float: right }
.social-counter li a {
    display: block;
    height: 34px;
    font-size: 13px;
    color: #fff;
    line-height: 34px;
    transition: opacity .17s }
.social-counter li a:hover {
    opacity: .8 }
.social-counter li a:before {
    float: right;
    width: 34px;
    height: 34px;
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 16px;
    text-align: center;
    margin: 0 0 0 10px }

.social a:before {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400 }
.social .facebook a:before {
    content: "\f09a" }
.social .twitter a:before {
    content: "\f099" }
.social .rss a:before {
    content: "\f09e" }
.social .youtube a:before {
    content: "\f16a" }
.social .skype a:before {
    content: "\f17e" }
.social .stumbleupon a:before {
    content: "\f1a4" }
.social .tumblr a:before {
    content: "\f173" }
.social .vk a:before {
    content: "\f189" }
.social .stack-overflow a:before {
    content: "\f16c" }
.social .github a:before {
    content: "\f09b" }
.social .linkedin a:before {
    content: "\f0e1" }
.social .dribbble a:before {
    content: "\f17d" }
.social .soundcloud a:before {
    content: "\f1be" }
.social .behance a:before {
    content: "\f1b4" }
.social .digg a:before {
    content: "\f1a6" }
.social .instagram a:before {
    content: "\f16d" }
.social .pinterest a:before {
    content: "\f0d2" }
.social .twitch a:before {
    content: "\f1e8" }
.social .delicious a:before {
    content: "\f1a5" }
.social .codepen a:before {
    content: "\f1cb" }
.social .reddit a:before {
    content: "\f1a1" }
.social .whatsapp a:before {
    content: "\f232" }
.social .snapchat a:before {
    content: "\f2ac" }
.social .email a:before {
    content: "\f0e0" }
.social .external-link a:before {
    content: "\f35d" }
.social-color .facebook a {
    background-color: #3b5999 }
.social-color .twitter a {
    background-color: #00acee }
.social-color .youtube a {
    background-color: #db4a39 }
.social-color .instagram a {
    background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4) }
.social-color .pinterest a {
    background-color: #ca2127 }
.social-color .dribbble a {
    background-color: #ea4c89 }
.social-color .linkedin a {
    background-color: #0077b5 }
.social-color .tumblr a {
    background-color: #365069 }
.social-color .twitch a {
    background-color: #6441a5 }
.social-color .rss a {
    background-color: #ffc200 }
.social-color .skype a {
    background-color: #00aff0 }
.social-color .stumbleupon a {
    background-color: #eb4823 }
.social-color .vk a {
    background-color: #4a76a8 }
.social-color .stack-overflow a {
    background-color: #f48024 }
.social-color .github a {
    background-color: #24292e }
.social-color .soundcloud a {
    background: linear-gradient(#ff7400, #ff3400) }
.social-color .behance a {
    background-color: #191919 }
.social-color .digg a {
    background-color: #1b1a19 }
.social-color .delicious a {
    background-color: #0076e8 }
.social-color .codepen a {
    background-color: #000 }
.social-color .reddit a {
    background-color: #ff4500 }
.social-color .whatsapp a {
    background-color: #3fbb50 }
.social-color .snapchat a {
    background-color: #ffe700 }
.social-color .email a {
    background-color: #888 }
.social-color .external-link a {
    background-color: $(main.dark.color) }
.social-text .facebook a:after {
    content: "Facebook" }
.social-text .twitter a:after {
    content: "Twitter" }
.social-text .rss a:after {
    content: "Rss" }
.social-text .youtube a:after {
    content: "YouTube" }
.social-text .skype a:after {
    content: "Skype" }
.social-text .stumbleupon a:after {
    content: "StumbleUpon" }
.social-text .tumblr a:after {
    content: "Tumblr" }
.social-text .vk a:after {
    content: "VKontakte" }
.social-text .stack-overflow a:after {
    content: "Stack Overflow" }
.social-text .github a:after {
    content: "Github" }
.social-text .linkedin a:after {
    content: "LinkedIn" }
.social-text .dribbble a:after {
    content: "Dribbble" }
.social-text .soundcloud a:after {
    content: "SoundCloud" }
.social-text .behance a:after {
    content: "Behance" }
.social-text .digg a:after {
    content: "Digg" }
.social-text .instagram a:after {
    content: "Instagram" }
.social-text .pinterest a:after {
    content: "Pinterest" }
.social-text .twitch a:after {
    content: "Twitch" }
.social-text .delicious a:after {
    content: "Delicious" }
.social-text .codepen a:after {
    content: "CodePen" }
.social-text .flipboard a:after {
    content: "Flipboard" }
.social-text .reddit a:after {
    content: "Reddit" }
.social-text .whatsapp a:after {
    content: "Whatsapp" }
.social-text .messenger a:after {
    content: "Messenger" }
.social-text .snapchat a:after {
    content: "Snapchat" }
.social-text .email a:after {
    content: "Email" }
.social-text .external-link a:after {
    content: "WebSite" }

</style>

كما رأيتم الطريقة سهلة و مجدية اتمنى من الله ان ينال هذا الشرح اعجابكم لا تبخلو علينا بمشاركة المقال اراكم غدا في شرح جديد بإذن الله مع السلامة.

لا توجد تعليقات حتى الآن "حصريا...تركيب اضافة المتابعة عبر الشبكات الإجتماعية على بلوجر من التخطيط"

Enregistrer un commentaire

ملاحظة للجميع
  • يمكنك وضع تعليق بصورة أو فيديو YouTube أو Vimeo.
  • المرجو ترك تعليق يتعلق بنفس هذا الموضوع.
  • لا يجوز الترويج للسلع أو البيع.
  • لا تقم بتضمين روابط مشبوهة في التعليقات.
  • سيتم حذف التعليقات ذات الروابط السبام تلقائيًا
  • *علق بشكل جيد ، شخصيتك تنعكس عند التعليق.

Inscription à : Publier les commentaires (Atom)