اضافة |شبكات التواصل الاجتماعي في بلوجر

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

اتيت لكم بطريقة مميزة لأضافة شبكات التواصل على blogger مثل ،قالب برو ماج تمكنك من اضافة بطاقة التواصل مثل المتابعة على فيس بوك،تويتر،انستقرام،يوتيوب.
يتواجد أيضاً زر الأتصال و زر المتابعة على مدونة بلوجر.

 طريقة التركيب

قم بتسجيل بحسابك ثم الذهاب إلى منصة بلوجر من هنا.

إنتقل إلى المدونة،ثم إلى القالب،ثم إضغط على تحرير edit html.

إضغط في وسط محرر الأكواد ثم ctrl + f لأظهار مربع البحث.

بإستعمال زر ctrl + c للنسخ و ctrl + v للصق.

قم بالبحث على وسم

]]></b:skin>

وقم بإضافة هذه الكود فوقه

/* Sosial Media */
#HTML93 h2.title{display:none}
#HTML93{width:100%;max-width:300px;z-index:10;-webkit-transform:translateZ(0);transform:translateZ(0)}
.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}
.authorbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5Wxr-6V_r5zpJessLU9d2KKl0acC7avMH4w19z1l4ZY1KlHtYbMVDIMU7LMbz4V8cgQHm689cR2JTHP36JTMihb-ZW5s0TkFQk5hBFJVM5Z_vGv_dMcuZPpWL_eEF-cVXYHaTNhbhvym/s1600/poison2.jpg) top center no-repeat #fff;padding:22px 0 0;margin:0 auto}
h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}
.authorbox img{width: 100px;margin:75px auto 0;border-radius:100%;display:block;box-shadow:0 5px 8px rgba(0,0,0,0.2);border:5px solid #fff;transition:all .6s}
.authorbox img:hover{cursor:pointer;box-shadow:0 3px 4px rgba(0,0,0,0.1)}
.authorbox a.authorname{display:table;margin:20px auto;padding:6px 10px;line-height:normal;border:1px solid rgba(0,0,0,0.08);color:#9598a0;font-weight:400;font-size:14px;border-radius:3px;}
.authorbox a.authorname:hover{background:#3498db;color:#fff!important}
.sosmed-author{margin:auto;padding:15px;background:#eef3f6;border-radius:4px;}
.sosmed-author li,.sosmed-author ul{list-style:none}
.sosmed-author ul{margin:0;padding:0 0 10px 0;width:100%;}
.sosmed-author li{display:inline-block;width:20%}
.sosmed-author li a{color:#bdc3c7!important;transition:all .4s ease-out}
.sosmed-author li a:hover{color:#7f8c8d!important}
.bawahsos{width:100%;display:block}
.bawahsos a.butt-author,.bawahsos a.butt-contact{background:#f39c12;color:#fff !important;display:inline-block;width:47.2%;padding:10px;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s}
.bawahsos a.butt-contact{background:#3498db;color:#fff !important;margin:0 8px 0 0}
.bawahsos a.butt-author:hover{background:#fbb341;color:#fff !important;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.bawahsos a.butt-contact:hover{background:#5cb0e8;color:#fff !important;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.bawahsos a.butt-author i,.bawahsos a.butt-contact i{margin:0 0 0 5px}
@media screen and (max-width:640px){#HTML93{width:100%;max-width:100%;}.authorbox{background:#e2e8eb}.authorbox img{margin:0 auto;border-radius:10%}.authorbox a.authorname{background:#fff;margin:20px auto;border:0;box-shadow:0 5px 5px rgba(0,0,0,0.1)}.addthis_inline_share_toolbox table,.addthis_inline_share_toolbox td{border:0}}
@media screen and (max-width:640px){
.sosmed-author li {width:23%}
.gravfeatureditem{width:100%}
.gravfeatureditem.second,.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}

ثم قم بالحفظ

بعدها قم بتوجه إلى التخطيط بعدها قم بإضافة اداة

HTMLjavascript

ثم قم بإضافة هذه الاكواد داخلها و قم  بالحفظ

<div class="authorbox">
  <img alt="author" src="رابط اللوجو" width="120" height="120" />
  <a class="authorname" href="رابط المدونة" rel="author" target="_blank" title="اضغط للعرض">تطبيقي بلس</a>
  <div class="sosmed-author">
    <ul>
          <li><a href="رابط الصفحة على فيس بوك" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
          <li><a href="رابط حسابك على تويتر" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
          <li><a href="رابط حسابك على انستقرام" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="رابط قناتك على يونيوب#" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
</ul>
<div class="clear"></div>
<div class="bawahsos">
<a class="butt-author" href="https://www.blogger.com/follow-blog.g?blogID=557177890648344405" target="_blank" title="تابعنا"><i aria-hidden="true" class="fa fa-user-circle"></i> متابعة</a>
<a class="butt-contact" href="راط صفحة اتصل بنا" rel="nofollow" target="_blank" title="تواصل مع المشرف"><i aria-hidden="true" class="fa fa-paper-plane"></i> اتصل بنا</a>
</div>
</div>
</div>

قم بإضافة روابط مواقع التواصل كما موضح في الكود الثاني.

شرح كيفية تركيب الأضافة من خلال الهاتف

رابط تحميل التطبيق

الرابط الأول

تحميل اضغط للتحميل
الرابط الثاني

تحميل اضغط للتحميل

Share This

clear