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

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

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

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

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

اولا هذه الطريقة حصرية لايوجد لها شرح ابدا على الويب لذلك اردت طرحها لكم .
تانيا قم بعمل نسخة احتياطية من القالب الخاص بك
تالثا يوجد شكلين مختلفين للاضافة فقط في اكواد 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>

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

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

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

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

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

Post a Comment

ملاحظة للجميع