حصريا فى شروحات بلوجر كارت ادوات المتابعة الاجتماعية

حصريا فى شروحات بلوجر كارت ادوات المتابعة الاجتماعية

حصريا إضافة جديدة وحصرية من تصميمي لأزرار وادوات المتابعة الإجتماعية احببت أن جمل أدوات المتابعة في إضافة خفيفة

وبسيطة وفي نفس الوقت تجمل غالبية المواقع الإجتماعية المعتمد عليها من قبل المدونين في بلوجر

تم استخدام ادوات رسمية لموقعي جوجل بلس Google Plus وفيس بوك Facebook كونهم ازرار خفيفة وسريعة التحميل

لتويتر Twitter ويوتيوب YouTube وبلوجر Blogger فضلت ان استخدم ازرار روابط فهي كافية وأخف من الأدوات الاصلية

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

كافية وطبعا تم دمج نموذج اشتراك بالبريد لتكتمل الآداة

وهذا هو الكود أضفه في آداة HTML/JavaScript

<style>
#sosialandmail {
box-shadow: 4px 4px 2px #444;
width: 280px;
}
#sosialcnmes,.mailfcm {width: 100%;}
.gpluscm {
background-color: #e01f28;
display: block;
float: right;
height: 64px;
overflow: hidden;
padding: 10px;
width: 95px;
}
.fbcm {
background-color: #96c1e7;
float: right;
height: 64px;
overflow: hidden;
padding: 10px;
width: 55px;
}
.ytweet {
float: right;
width: 90px;
}
.twittercm, .ytcm, .bfolcm {
box-shadow: 0 0 1px #777 inset;
display: block;
float: right;
color:#fff;
font: bold 16px tahoma;
overflow: hidden;
padding: 3px 0 6px;
text-align: center;
text-decoration: none;
transition: all 0.7s ease 0s;
width: 100%;
}
.twittercm {background-color:#55ACEE;}
.ytcm {background-color:#555;}
.bfolcm {background-color:#FD7E00;}
.twittercm:hover,.ytcm:hover,.bfolcm:hover {background-color:#000; color:#fff;}
#cmfotext {
background-color: #000;
border: 0 none;
color: #fff;
display: block;
float: right;
font: bold 16px tahoma;
padding: 10px 0;
text-align: center;
width: 100%;
}
#cmfobu {
background-color: #00A903;
border: 0 none;
color: #fff;
cursor: pointer;
font: bold 16px tahoma;
padding: 10px 0;
transition: all 0.7s ease 0s;
width: 100%;
}
#cmfobu:hover{background-color: #1A4D17;}
</style>
<div id='sosialandmail'>
<div id="sosialcnmes">

<div class="gpluscm">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-annotation="vertical-bubble" data-height="24" data-href="//plus.google.com/u/0/GPID" data-rel="publisher"></div>
</div>

<div class="fbcm">
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FPageID&width=55&layout=box_count&action=like&show_faces=true&share=false&height=65&appId=185398838186125" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:65px;" allowTransparency="true"></iframe>
</div>
<div class="ytweet">

<a class="twittercm" href='https://twitter.com/TwID' target="_blank" rel="nofollow">تويتر</a>

<a class="ytcm" href='https://www.youtube.com/user/YTID' target="_blank" rel="nofollow">يوتيوب</a>

<a class="bfolcm" href='http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxx' target="_blank" rel="nofollow">بلوجر</a>
</div>
</div>
<div class='mailfcm'>
<form id='cmforb' action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedId', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input id='cmfotext' type="text" value="أكتب بريدك الإلكتروني" onfocus="if (this.value == "أكتب بريدك الإلكتروني") {this.value = "";}" onblur="if (this.value == "") {this.value = "أكتب بريدك الإلكتروني";}" name="email"/>
<input id='cmfobu' type="submit" value="إشترك" />
<input name="uri" type="hidden" value="FeedId"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
</div>