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

02-09-2013, 07:14 PM

Jaabiriovic

مدون نشيط

تاريخ التسجيل: Jan 2013

المشاركات: 176

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

أنا : Jaabiriovic

سجل معنا لتتمتع بهذه الخاصية

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

لمعاينة الإضافة إضغط هنا

بعض الميزات الرائعة :
سريعة التحميل و لا تؤثر على سرعة تحميل موقعك
يدعم جميع المتصفحات
تحتوي على أزرار متابعة (فيسبوك, تويتر, جوجل +1)
تحتوي على أزرار المشاركة الإجتماعية المشهورة (Addthis.com)

الآن دعونا نرى كيفية إضافة هذه الأداة إلى المدونة الخاص بك.

طريقة إضافة هذه الأداة إلى مدونة البلوجر:

نتوجه إلى لوحة التخطيط الموجود على منصة البلوجر و ننشئ أدات HTML/JavaScript.
قم بنسخ الكود الموجود في الأسفل

كود بلغة HTML:

<style>
/* 
ColorBox Core Style: 
The following CSS is consistent between example themes and should not be altered.
*/ 
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} 
#cboxOverlay{position:fixed; width:100%; height:100%;} 
#cboxMiddleLeft, #cboxBottomLeft{clear:left;} 
#cboxContent{position:relative;} 
#cboxLoadedContent{overflow:auto;} 
#cboxTitle{margin:0;} 
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} 
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} 
.cboxPhoto{float:left; margin:auto; border:0; display:block;} 
.cboxIframe{width:100%; height:100%; display:block; border:0;} 
/*


User Style: 
Change the following styles to modify the appearance of ColorBox. They are 
ordered & tabbed in a way that represents the nesting of the generated HTML. 
*/ 
#cboxOverlay{background:#000;opacity:0.5 !important;} 
#colorbox{ 
box-shadow:0 0 15px rgba(0,0,0,0.4); 
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4); 
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4); 
} 
#cboxTopLeft{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0;} 
#cboxTopCenter{height:14px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left;} 
#cboxTopRight{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0;} 
#cboxBottomLeft{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px;} 
#cboxBottomCenter{height:43px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left;} 
#cboxBottomRight{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px;} 
#cboxMiddleLeft{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0;} 
#cboxMiddleRight{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0;} 
#cboxContent{background:#fff; overflow:visible;} 
#cboxLoadedContent{margin-bottom:5px;} 
#cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center;} 
#cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/s400/loading.gif) no-repeat center center;} 
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} 
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} 
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} 
#cboxPrevious{left:0px; background-position: -51px -25px;} 
#cboxPrevious.hover{background-position:-51px 0px;} 
#cboxNext{left:27px; background-position:-75px -25px;} 
#cboxNext.hover{background-position:-75px 0px;} 
#cboxClose{right:0; background-position:-100px -25px;} 
#cboxClose.hover{background-position:-100px 0px;} 
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} 
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} 
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} 
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;} /*-----------------------------------------------------------------------------------*/ 
/* Mashable Box popup For Blogger 
/*-----------------------------------------------------------------------------------*/ 
#subscribe { 
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666; 
} 
#subscribe a, 
#subscribe a:hover, 
#subscribe a:visited { 
text-decoration:none; 
} 
.box-title { 
color: #F66303; 
font-size: 20px !important; 
font-weight: bold; 
margin: 10px 0; 
border:1px solid #ddd; 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
border-radius:6px; 
box-shadow: 5px 5px 5px #CCCCCC; 
padding:10px; 
line-height:25px; font-family:arial !important; 
} 
.box-tagline { 
color: #999; 
margin: 0; 
text-align: center; 
} 
#subs-container { 
padding: 35px 0 30px 0; 
position: relative; 
} 
a:link, a:visited { 
border:none; 
} 
.demo { 
display:none; 
} 
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> 
<script src="http://sidharth12.googlecode.com/files/jquery.colorbox-min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
if (document.cookie.indexOf('visited=true') == -1) { 
var fifteenDays = 1000*60*60*24; 
var expires = new Date((new Date()).valueOf() + fifteenDays); 
document.cookie = "visited=true;expires=" + expires.toUTCString(); 
$.colorbox({width:"400px", inline:true, href:"#subscribe"}); 
} 
}); 
</script> 
<!-- This contains the hidden content for inline calls --> 


<div style='display:none'> 
<div id='subscribe' style='padding:10px; background:#fff;'> 
<style> 
/* BTSNTS Social Widget  */ 


#BTSNTS-mashable-bar { 
    border: 0; 
    margin-bottom: 10px; 
    margin: 0 auto; 
    width:300px; 
    height:250px;
} 

.fb-likebox { 
    background: #fff; 
    padding: 10px 10px 0 10px; 
    border: 1px solid #D8E6EB; 
    margin-top: -2px; 
        height:65px; 
} 

.googleplus { 
    background: #F5FCFE; 
    border-top: 1px solid #FFF; 
    border-bottom: 1px solid #ebebeb; 
    border-right: 1px solid #D8E6EB; 
    border-left: 1px solid #D8E6EB; 
    border-image: initial; 
    font-size: .90em; 
    font-family: "Verdana","Helvetica",sans-serif; 
    color: #000; 
    padding: 9px 15px; 
    line-height: 1px;} 
.googleplus span { 
    color: #000; 
    font-size: 11px; 
    position: absolute; 
    display:inline-block; 
    margin: 9px 70px;} 
.g-plusone {    float: left;} 
.twitter { 
    background: #EEF9FD; 
    padding: 10px; 
    border: 1px solid #C7DBE2; 
    border-top: 0;} 
#mashable { 
    background: #EBEBEB; 
    border: 1px solid #CCC; 
    border-top: 1px solid white; 
    padding: 2px 8px 2px 3px; 
    text-align: right; 
    border-image: initial;} 
   #mashable .author-credit {} 
#mashable .author-credit a { 
    font-size:10px; 
     font-weight: bold; 
    text-shadow: 1px 1px white; 
    color: #1E598E; 
    text-decoration:none;} 
#email-news-subscribe .email-box{ 
    padding: 5px 10px; 
    font-family: "Verdana","Helvetica",sans-serif; 
    border-top: 0; 
    border-right: 1px solid #C7DBE2; 
    border-left: 1px solid #C7DBE2; 
    border-image: initial; 
   height:35px;} 
#email-news-subscribe .email-box input.email{ 
    background:#FFFFFF; 
    border: 1px solid #dedede; 
    color: #999; 
    padding: 7px 10px 8px 10px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -ms-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px; 
    border-image: initial; 
    font-family: "Verdana","Helvetica",sans-serif;}    
#email-news-subscribe .email-box input.email:focus{color:#333}    
#email-news-subscribe .email-box input.subscribe{ 
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); 
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); 
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); 
    -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); 
    font-family: "Verdana","Helvetica",sans-serif; 
    border-radius:3px; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
    border:1px solid #cc7c00; 
    color:white; 
    text-shadow:#d08d00 1px 1px 0; 
    padding:7px 14px; 
    margin-left:3px; 
    font-weight:bold; 
    font-size:12px; 
    cursor:pointer; 
    border-image: initial;} 
#email-news-subscribe .email-box input.subscribe:hover{ 
    background: #ff9b00; 
    background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00); 
    background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); 
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
    outline:0;-moz-box-shadow:0 0 3px #999; 
    -webkit-box-shadow:0 0 3px #999; 
    box-shadow:0 0 3px #999 
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); 
    background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); 
    -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); 
    border-radius:3px; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
    border:1px solid #cc7c00; 
    color:#FFFFFF; 
    text-shadow:#d08d00 1px 1px 0}    
#other-social-bar { 
    background-color: #D8E6EB; 
    box-shadow: 0 1px 1px #FFFFFF inset; 
    padding: 5px; 
    font-family: "Verdana","Helvetica",sans-serif; 
    font-weight:bold; 
    overflow: hidden; 
    border: 1px solid #B6D0DA; 
       height:35px; 
} 
</style>

<!--[if IE]>
<style> 
#email-news-subscribe .email-box input.subscribe{ 
    background: #FFCA00; 
    } 
</style>
<![endif]-->
 <!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="BTSNTS-mashable-bar" ><!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --><div id="fb-root"></div><script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like-box" data-href="http://www.facebook.com/altari9" data-width="280" data-height="88" data-show-faces="false" data-stream="false" data-header="false"></div></div><div class="googleplus"> <!-- Google --><span>Recommend Us!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="twitter"> <!-- Twitter --> <a href="https://twitter.com/altari9" class="twitter-follow-button" data-show-count="true">Follow @altari9</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div><div id="email-news-subscribe"> <!-- Email Subscribe --><div class="email-box"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=al-tari9', 'popupwindow', 'scrollbars=yes,width=530,height=500');return true"><input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Your Email Here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /><input type="hidden" value="al-tari9" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="subscribe" name="commit" type="submit" value="Subscribe" /></form></div></div><div id="other-social-bar"><!-- Other Social Bar --><!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_preferred_6"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f22ed8a16c66e93"></script><!-- AddThis Button END --></div></div></div><!--Social Media Sharing Widget By al-tari9.blogspot.com--></div></div>

قم بالتغير 'http://www.facebook.com/altari9' برابط صفحتك على الفيسبوك
قم بالتغير 'https://twitter.com/altari9' برابط صفحتك على التويتر
قم بالتغير 'al-tari9' باسم المستخدم الخاص بك على الFeedburner

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

__________________
مدونة الطريق ~ موقع يهتم بكل ما هو جديد في عالم الحاسوب و البرامج و البلوجر و الشبكات الإجتماعية و كل ما في الإنترنات حيث نقدم دروس حصرية تساعدك على الإحتراف

http://al-tari9.blogspot.com/

ملاحظة : التدوين هيا هواية فإذ كنت ممن يدونون من أجل كسب الأموال فستكون مدونتك فاشلة

من مواضيع Jaabiriovic

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
إضافة أزرار المواقع الإجتماعية إلى مدونتك بشكل مميز	Jaabiriovic	إضافات وأدوات بلوجر	9	06-21-2013 05:54 PM
أداة الإشتراك في المواقع الإجتماعية والبريد الإلكتروني لمدونات بلوجر	ilyass kéng	إضافات وأدوات بلوجر	1	02-28-2013 08:58 PM
إضافة أزرار تابعني عبر المواقع الإجتماعية بتأثيرات رائعة	Jaabiriovic	إضافات وأدوات بلوجر	3	02-09-2013 02:14 PM
إضافة المواقع الإجتماعية في قمة الإحترافية .. لن تجدها في موقع أخر	overboy	إضافات وأدوات بلوجر	7	08-09-2012 01:59 AM
اضافة ايقونات تابعني على المواقع الاجتماعية مع الاشتراك بالمدونة لبلوجر	overboy	إضافات وأدوات بلوجر	4	08-04-2012 06:16 PM

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

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

إضافات وأدوات بلوجر