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

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

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

بسم الله الرحمن الرحيم

والصلاة والسلام على المبعوث رحمة للعالمين سيدنا محمد وعلى آله وصحبه أجمعين : اما بعد

الشبكات الاجتماعية تلعب دورا هاما في زيادة حركة المرور الخاصة بك على بلوق. هذا هو السبب في كثير من المدون يضيف ملفه الشخصي الشبكات الاجتماعية على الروابط في المدونات هذة الأيام سنضيف أنيقة مربع الاشتراك الاجتماعية لمدون بسهولة جدا فقط باستخدام CSS وcodes.It HTML يحتوي على فيدبورنر لينك، لينك الملف تويتر، الفيسبوك رابط الصفحة، وجوجل + و واضاف لبحث تأثير bar.I تحوم إليها مما يزيد من جمال هذة المدونة مع هذه الأداة سهلة للغاية لديك فقط لنسخ ولصق الأكواد.خذ معاينة هذه القطعة.

كيفية إضافة هذه الأداة إلى بلوجر؟

يمكنك إضافة هذه القطعة بطريقتين ...

1.اضافتها عن طريق HTML / JavaScript widget.

2.دمج في القالب.

الطريقة الأولى : إضافة على أنها HTML/JavaScript Widget

لإضافة هذه القطعة باعتبارها HTML/JavaScript widget,

انتقل إلى تخطيط مدون> تصميم> التخطيط.

إضافة أداة> HTML / جافا سكريبت.

<style>
* ---------Helper Blogger Social Media Widget----------- */

/
#search {
border: 1px solid
#DDD;background: _lRFYsvkI/AAAAAAAABqc/qtXhiIEeTpY/s1600/search.png) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
heig
white url(http://1.bp.blogspot.com/-t-XnlJf5iIE/T
uht:15px;
mouse:pointer:
}#search #s {e;
color:
#666;
background: nonborder: 0;width: 100%;tline: none
padding: 0;margin: 0;ou;}nnect-widget:hover{border:1px solid #CBCBC2;background:#FFF}
.social-connect-widget a{text-decoration:none;font-weight:bold;
.social-connect-widget{background:#F5F4EF;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;}
.social-c
ofont-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style>
;Search") {this.value = "";}"
;Search") {this.value = "";}"
<div id="search" title="Type and hit enter">
<form action="/search" id="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search";}" onfocus="if (this.value == &quo
t type="text" value="Search" />
</form></div><br/>al-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<br/><div class="socifeedburner.com/hblogger" target="_blank">Subscribe to our RSS Feeds!</a>
</div>
<div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="follow us on twitter!" src="h
<img alt="rss feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwFQprL3ZCclyX1aJYcCXkgxhx8tzNxmZpifotNVJtHayqcUQSkMKWdJngM1eMQ-PSxJlIfveA9Qa2Lk6ORRcTHnu2hSwD59N2UGNktFGpzmGBUFjv9T0tD1-KEikFHl5cnrQPE20ePai/s1600/rss.png" /><a href="http://feeds
.ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiog60BQzJ_XS8iMmZGAIcxV8nLIzz_7XOfej9EArW_0EAGBk8Kex8-bX1uQ1kGUDTEerQnG9PmFpBFDIz12olvEytWUkEvcl8EPmPZcbpLolLfmmzVEy2BN7sBYqqs0HT7Zh2WzP6crVwu/s1600/twitter.png" title="follow us on twitter!" /><a href="http://twitter.com/helperblogger" target="_blank">Follow Me on Twitter!</a>
</div> <div class="social-connect-widget" style="margin-bottom:10px;"> ="margin-top:0px;margin-bottom:10px;">
<img alt="google plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiUVBNxBIlAkaE_OpKJcC07Yvp9F4tCuz1uUKi5BtOS5S6ZC8BU4VuZZqV-CbwZdYFcJOgHfaBdWnhbcSs5PN8ENOBG7hUaPGN3SE4w_IIkzluCubWolMgQe4SFCrov97Om7PcFm_pQB8/s1600/g-plus-logo.png" /><a href="https://plus.google.com/u/0/106527290580119996124" target="
<img alt="be our fan!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA-BHsettFImFofY94-cAE2ZUEbk8vVe5I_L340t7Q0GpwY8_-HkYORDCPgktWIfDXtHM3Ph5r54lC_e4ODuq1QeGvZDrz_aWZTZjhauPcwbYhoD8-RMTDGt4sTjZFNEWT2epObtVyZ7ws/s1600/facebook.png' title='Be Our Fan" /><a href="http://www.facebook.com/btsnts" target="_blank">Follow Me on Facebook!</a>
</div>ss="social-connect-widget" styl
ss="social-connect-widget" styl
<div clae_blank">Add Me on Google+!</a> </div>

الطريقة الثانية: إدماجها في قالب

إذا كنت دمج القطعة في قالب الخاص بك، ثم يقوم بتحميل سريع جدا بالم

قارنة مع HTML / جافا سكريبت القطعة.

لإدماجها في قالب الخاص بك،

انتقل إلى تحرير صفحة HTML.

تنزيل / النسخ الاحتياطي القالب.

1- ابحث عن الكود التالى:

]]></b:skin>

2- اضف الكود التالى اعلى الكود ]]></b:skin>

CSS كود


/*  ---------Helper Blogger Social Media Widget----------- */ 
#search {
border: 1px solid 
#DDD;
background: 

u_lRFYsvkI/AAAAAAAABqc/qtXhiIEeTpY/s1600/search.png) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
hei
white url(http://1.bp.blogspot.com/-t-XnlJf5iIE/
Tght:15px;
mouse:pointer:
}
#search #s {
background: none;
color: 
#666;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
.social-connect-widget

2;
background:#FFF
}
{background:#F5F4EF;
border:1px solid #E7E6DE;
padding:10px;
border-radius:5px;
-moz-border-radius:5px;
} 
.social-connect-widget:hover{
border:1px solid #CBCB
C 
.social-connect-widget a{
text-decoration:none;
font-weight:bold;
font-family:Arial,Helvetica,Sans-serif;
color:#4B4D4E
} 
.social-connect-widget a:hover{


text-decoration:underline;
color:#F77C04
} 
.social-connect-widget img{
vertical-align:middle;
margin-right:5px;
height:32px;
width:32;


}

2-انتقل الآن إلى تخطيط الصفحة

إضافة أداة> HTML / جافا سكريبت.

لصق الكود أدناه وحفظه.

HTML كود


<div id="search" title="Type and hit enter">

<form action="/search" id="searchform" method="get">

<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}" type="text" value="Search" />
</form>
</div>
<br/>
<br/><div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;"> 

ss.png" /><a href="http://feeds.feedburner.com/hblogger" target="_blank">Subscribe to our RSS Feeds!</a> 
</div> 
                        
<div class="social-connect-widget" style="margin-bottom:10px;"> 
<img al
<img alt="rss feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwFQprL3ZCclyX1aJYcCXkgxhx8tzNxmZpifotNVJtHayqcUQSkMKWdJngM1eMQ-PSxJlIfveA9Qa2Lk6ORRcTHnu2hSwD59N2UGNktFGpzmGBUFjv9T0tD1-KEikFHl5cnrQPE20ePai/s1600/
rt="follow us on twitter!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiog60BQzJ_XS8iMmZGAIcxV8nLIzz_7XOfej9EArW_0EAGBk8Kex8-bX1uQ1kGUDTEerQnG9PmFpBFDIz12olvEytWUkEvcl8EPmPZcbpLolLfmmzVEy2BN7sBYqqs0HT7Zh2WzP6crVwu/s1600/twitter.png" title="follow us on twitter!" /><a href="http://twitter.com/helperblogger" target="_blank">Follow Me on Twitter!</a> 
</div>

<div class="social-connect-widget" style="margin-bottom:10px;"> 

0px;"> 
<img alt="google plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiUVBNxBIlAkaE_OpKJcC07Yvp9F4tCuz1uUKi5BtOS5S6ZC8BU4VuZZqV-CbwZdYFcJOgHfaBdWnhbcSs5PN8ENOBG7hUaPGN3SE4w_IIkzluCubWolMgQe4SFCrov97Om7PcFm_pQB8/s1600/g-plus-logo.png" /><a href="https://plus.google.com/u/0/106527290580119996124" target="_blank">Add Me on Google+!</a> 

<img alt="be our fan!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA-BHsettFImFofY94-cAE2ZUEbk8vVe5I_L340t7Q0GpwY8_-HkYORDCPgktWIfDXtHM3Ph5r54lC_e4ODuq1QeGvZDrz_aWZTZjhauPcwbYhoD8-RMTDGt4sTjZFNEWT2epObtVyZ7ws/s1600/facebook.png&#39; title=&#39;Be Our Fan" /><a href="http://www.facebook.com/btsnts" target="_blank">Follow Me on Facebook!</a> 
</div>

<div class="social-connect-widget" style="margin-top:0px;margin-bottom:

1</div>

التخصيص لكلا الطريقتين

الآن اختيار أي طريقة ونسخ التعليمات البرمجية في المفكرة الخاصة بك واستبدال كل ما عندي من أسماء المستخدمين مع يدكم.

(ملاحظة - إذا كنت ترغب في استخدام الطريقة الثانية ثم استخدام رمز HTML فقط لتخصيص)

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

الوسوم: تطوير بلوجر كل

وصف المدون

احدث المقالات

المشاركات الشائعة

الوسوم

التعليقات

تطوير بلوجر

التصنيفات

احدث المقالات