BloggingBlogger
Trending

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

How to Add Social Share Buttons to a Blogger

Share This Post, Help Others!
 

 

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

 

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

 

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

 

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

How to Add Social Media Buttons to Blogger Posts

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

 

( سيقع رفع الشرح لطريقة التركيب بالفيديو في القريب العاجل إنشاء الله تابعونا )
play-watch-videoPin
 
 

 

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

 

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

 

Share This Post, Help Others!

Other Popular Articles ...

Leave a Reply

Back to top button
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.
Sharing is caring

Ad Blocker Detected :(

Please consider supporting us by disabling your ad blocker.

من فضلك قم بتعطيل أداة مانع الإعلانات أدبلوك من المتصفح للدخول للموقع أو إستخدم متصفح آخر
شكرا لتفهمك وزيارتك