إضافة صناديق الشبكات الإجتماعية لموقعك بشكل إحترافي ورائع
Complexity Simplified | RaQMedia Complexity Simplified | RaQMedia

Hot Posts

... Loading

إضافة صناديق الشبكات الإجتماعية لموقعك بشكل إحترافي ورائع

social-media-share-buttons-ar

basmallah

إضافة صناديق الشبكات الإجتماعية لموقعك بشكل إحترافي ورائع

إضافة أزرار المشاركة في مواقع التواصل أسفل التدوينة لبلوجر

How to Add Social Media Buttons to Blogger Posts



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

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

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

وهذا هو الكود الذي يجب وضعه قبل هذه التسمية:  ]]></b:skin>


.shareicn {
    width: 100%;
    height: 47px;
    margin: 16px 5px;
}
.share-a {
    color: #FFF!important;
    font-size: 12px;
    padding: 7% 0% 7% 0%;
    margin-right: -17px;
    font-weight: bold;
    font-family: tahoma;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
}
.share-a:hover {
    color: #fff!important;
}
.fb {
    background-color: #306199;
}
.fb:hover {
    background-color: #244872;
}
#shareicn-bg {
    width: 32%;
    height: 47px;
    border-radius: 0.2em;
    display: block;
    margin: 0 2.5px;
    transition: background-color 0.2s ease-in-out;
    position: relative;
    float: right;
}
.twitter {
    background-color: #26C4F1;
}
.twitter:hover {
    background-color: #0EAAD6;
}
.google {
    background-color: #E93F2E;
}
.google:hover {
    background-color: #CE2616;
}
.share-icons {
    left: 7%;
    width: 12%;
    height: 100%;
    padding-top: 9px;
    position: absolute;
}
.path {
    fill: #FFF;
}

ثم تقوم بالبحث عن هذه التسمية وتضع بعدها مباشرة الكود التالي: <data:post.body/>


<b:if cond='data:blog.pageType == "item"'>
<raqmedia.com class='shareicn' id='raqmedia'>
<center>
<!-- raqmedia.com -->
<a class='share-a' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&imageurl="' onclick='window.open(this.href,'sharer', 'toolbar=0,status=0,width=626,height=436'); return false;'>
<div class='google' id='shareicn-bg'>
<span class='share-icons' id='raqmedia'>
<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
<g>
<g>
<path class='path' d='M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663 c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027 C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068 c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562 c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41 c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511 c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478 c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492 c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479 c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z'/>
<polygon class='path' points='23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004 23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89 '/>
</g>
</g>
</svg>
</span>
<div class='share-a'>قوقل+</div>
</div></a>
<!-- raqmedia.com -->
<a class='share-a' expr:href='" http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url + " -- " + " via www.raqmedia.com "' onclick='window.open(this.href,'sharer', 'toolbar=0,status=0,width=626,height=436'); return false;'>
<div class='twitter' id='shareicn-bg'>
<span class='share-icons' id='raqmedia'>
<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
<path class='path' d='M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32 c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155 C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965 C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683 c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851 C26.275,7.229,25.39,8.196,24.253,8.756z'/>
</svg>
</span>
<div class='share-a'>تويتر</div>
</div></a>
<!-- raqmedia.com -->
<a class='share-a' expr:href='"http://www.facebook.com/share.php? v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer', 'toolbar=0,status=0,width=626,height=436'); return false;'>
<div class='fb' id='shareicn-bg'>
<span class='share-icons' id='tech-ly'>
<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
<path class='path' d='M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434 c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726 c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z'/>
</svg>
</span>
<div class='share-a'>فيس بوك</div>
</div></a>
</center>
</raqmedia.com>
</b:if> 

لن أطيل عليكم و أترككم مع الشرح المصور في الفيديو التالي لطريقة التركيب و التعديل على هذه الإضافة:
( سيقع رفع الشرح لطريقة التركيب بالفيديو في القريب العاجل إنشاء الله تابعونا )
watch




في حال واجهتك مشاكل لا تتردد في الاتصال بنا عبر صندوق التعليقات بالأسفل و سنرد على إستفساراتكم في أسرع وقت ممكن.

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

comment

عن الكاتب

Ezzeddine Redwell

Join Conversation:


All Rights Reserved To

Complexity Simplified | RaQMedia

- Made with since 2009