الاثنين، 15 يوليو 2013

إضافة جميلة جدا ومهمة لمدونتك لمدونات التقنية

اضافات بلوجر 
 
وفى أول تدوينة خاصة ببلوجر والتى ستكون ضمن سلسلة دروس كبيرة والتى كنت قمت بتأجيلها حتى الأنتهاء من الأمتحانات

ولكن بناء على طلب أحد المتابعين قررت أنا أضعها بين يديه

أضافة لا غنى عنها فى أى مدونة حيث ان مواقع التواصل الأجتماعى تعتبر هى التنفس بالنسبة للمواقع لجلب الزوار ويجب أن يكون لك متابعين كثيرين لتتمكن من التواصل معهم سواء على الفيس بوك أو تويتر أو حتى البريد الألكترونى


- الشرح:

1 - قم بالدخول إلى تبويب التخطيط من مدونتك

2 - قم بإختيار أضافة أداة ثم أختار إضافة HTML/JavaScript

3 - ثم ضع به هذا الكود
 
 
<div class="widget-content">

<div class="lefts">

<h1>إنضم لأكثر من <b>10.000</b> متابع للمدونة</h1>

<div class="social">

<a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/blogspot/mHvZN"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghflSeepAjgE4isN9xN-pQ-UfolvYi1oI1zS-2eWKK8x4U9al3MzA_tfwBIAYwGKM6WSSUhA6jL84O18hHC7YuuUfaehucJ81VhRAQT1GSvM_B_h37uo62UA2kLKr0-pu2t6ohc07J11U/s1600/rss.png" /></a>



<a rel="nofollow" target="_blank" href="http://www.twitter.com/f2ce_blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim3RXqroh8zCTf4f-pBbi2pbybywFNyrt9vY6sw28FRwavV_3pCFNgjBls_hfMitC6yy38SQgEicJ7iOIU90rKW5GOWCXZLog6dBTnpRTWt0SrX_IZQmAtF8Rd_XRfMwLI36qaep1mCNQ/s1600/tw.png" /></a>



<a rel="nofollow" target="_blank" href="http://www.facebook.com/the.profession2l"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgakiiCleTwG-jvFTex3AIAQ-JVtPFIL2G7F18yM4LLpcyM8wQHIGr8DijDkBJilhM7r7zgwYDMkV2rSmCHPc7XDkLqBnMVykonv_g4NvMigwND4Usb_pPH6dcip1WxfROE8EZCCXXy_gU/s1600/face.png" /></a>



</div>



<div class="ins">

<center>

<div id="sleek-subscribe">

<form action="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/mHvZN" method="post" rel="nofollow" target="_new">



<input class="txt2" name="email" onblur="if (this.value ==
&#39;&#39;) {this.value = &#39;ضع اميلك هنا ليصلك كل
جديد&#39;;}" onfocus="if (this.value == &#39;ضع اميلك هنا ليصلك
كل جديد&#39;) {this.value = &#39;&#39;;}" value="ضع اميلك
هنا ليصلك كل جديد" />



<input class="btn2" type="submit" value=" " />

</form>

</div>

</center>

</div>



</div>



<style>

.lefts{

width:300px;

height:182px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiaYwVpPVYbiy5dkLf7Lt8E8j43qMCwch2KeUdY0RwyN1c9FbLvFhCuXi87bM6bKbN1-X8W4qpjCOZ2xJAwWQiIXxpvaK6VkiA0J2_7uF5mhp3vkavMZiWMdkJAMTL7l_s3R3wYxRi3ro/s1600/left.png);

}



.lefts h1{

color:#767676;

margin:0;

text-align:center;

font:14px 'DroidKufi-Bold';

padding:10px;

padding-top:20px;

}



.lefts b{

font:18px Arial, Helvetica, sans-serif;

color:#ffc000;

}



.lefts .social{

margin-right:50px;



}





.lefts .social a img{

float:right;

margin-right:20px;

margin-top:8px;



}







.lefts .ins{

width:300px;

height:40px;

float:right;

margin-top:15px;

}



.lefts .ins .txt2{

border:1px solid #e1e1e1;

background:#fff;

border-radius:5px;

font:12px Tahoma, Geneva, sans-serif;

color:#c0c0c0;

padding:6px 7px 7px 7px;

margin:0px;

float:right;

margin:0 20px 0 5px;

text-align:right;

width: 175px;

}





.lefts .ins .btn2{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHS1KO9bsk7re2iW901lBj6A5Z09Cr3wGDm02ri_fZ6shA1TqZi-dabMTDO7AKGQVAORrY-RXXrz6aoC_bPnJaAPglNCZjkp1yaNnaDpHnrnFX-w0HW_hSjbFAowT3g4Js1y1de91MiY4/s1600/sub.png);

float:right;

border:none;

width:64px;

height:28px;

cursor:pointer;

}









</style>

</div>
 
 
 
 
4 - يجب تغيير ما

 باللون الأحمر : لرابط التغذية على Feed Burner

اللون الأزرق : حسابك على تويتر

اللون الأخضر : رابط صفحتك على الفيس بوك

إذا عجبك الموضوع لا تبخل بضغط زر أعجبنى

ليست هناك تعليقات:

إرسال تعليق