‏إظهار الرسائل ذات التسميات اضافة اجتماعية. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات اضافة اجتماعية. إظهار كافة الرسائل

الجمعة، 29 مارس 2013

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

Blogger Ultimate Subscriptions Widget
إضافة قوية جداً تجمع اشهر صناديق وازرار المتابعة على بلوجر سواء الخاصة بالمواقع الإجتماعية Social Network أو البريد Email أو خدمات الإشتراك الخاصة ببلوجر وبالتفصيل تحتوي الإضافة كل من صندوق الإشتراك بصفحات جوجل بلس Google Plus وزر إحترافي للإعجاب بصفحة الفيس بوك Facebook وزر المتابعة على تويتر Twitter Follow Button وآداة الإشتراك عبر البريد Email Subscription  وآداة الإشتراك في  اليوتيوب Youtube Subscript وأخيرا آداة المتابعة الخاصة ببلوجر كل هذا في اداة واحده أنيقة والتركيب غاية في السهولة فقط إضافة كود الإضافة في آداة HTML/JavaScript وهذه صورة لمعاينة شكل الإضافة


أقوى إضافة إشتراك في المواقع الإجتماعية

كود الإضافة

<style type="text/css">
/*<!CDATA[*/
#cnmu-ultm{width:300px;margin:auto;padding:0;}
.cnmu-googleplus {height:107px;}
.cnmu-facebook {background:#E7EBF2;border: 1px solid #DCDCDC;margin-top: -6px;padding:0px 10px 3px;}
.cnmu-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.cnmu-twitter a.twitter-follow-button {display: block;}
.cnmu-twitter iframe {margin: 6px 11px -1px;}
.cnmu-emailbox {background-color:#70706E;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 5px 16px;overflow: hidden;}
.cnmu-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.cnmu-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.cnmu-emailbox input.emailu:focus {color: #333;}
.cnmu-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.cnmu-emailbox input.submitu:hover {text-decoration: none;}
.cnmuGray{color:#444 !important;border:1px solid #CCC;background: #dbdbdb;background: -moz-linear-gradient(top, #dbdbdb 0%, #bbbbbb 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(100%,#bbbbbb));background: -webkit-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: -o-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: -ms-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#bbbbbb',GradientType=0 );}
.cnmuGray:hover{background: #e6e6e6;background: -moz-linear-gradient(top, #e6e6e6 0%, #bbbbbb 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#bbbbbb));background: -webkit-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: -o-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: -ms-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#bbbbbb',GradientType=0 );}.cnmu-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.cnmu-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
    <div id="cnmu-ultm">
    <div class="cnmu-googleplus">
        <script type="text/javascript">
        /*<![CDATA[*/
        window.___gcfg = {lang: 'en'};
        (function(){
            var po = document.createElement("script");
            po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(po, s);
        })();
        /*]]>*/
        </script>
        <div class="g-plus" data-href="https://plus.google.com/googlplusid" data-width="300" data-height="69" data-theme="light"></div>
    </div>
    <div class="cnmu-facebook">
       <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="fbpageurl" width="250" show_faces="false" stream="false" header="true"></fb:like-box>
    </div>
    <div class="cnmu-twitter">
        <a href="https://twitter.com/twitteid" class="twitter-follow-button" data-show-count="true">Follow @twitteid</a>
        <script type="text/javascript">/*<![CDATA[*/!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 class="cnmu-emailbox">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=feedbid', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
        <table width="100%">
            <tr>
            <td>
                <input class="emailu" name="email" placeholder="أدخل بريدك الإلكتروني" type="text"/>
            </td>
            <td width="64px">
                <input class="submitu cnmuGray" type="submit" value="إشتــرك"/>
            </td>
            </tr>
        </table>
        <input name="uri" type="hidden" value="feedbid"/>
        <input name="loc" type="hidden" value="en_US"/>
        </form>
    </div>
<iframe src=http://www.youtube.com/subscribe_widget?p=ytid style="overflow: hidden; height: 100px; width: 291px; background: #fff;background: -moz-linear-gradient(top,#F0EFEF,#fff);background: -webkit-linear-gradient(top,#F0EFEF,#fff);margin-bottom:-5px; padding:3px;border:1px solid #BBBBBB;" scrolling="no" frameborder="0"></iframe>
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-BID" style="width:296px;margin-right:1px;margin-top:-1px;border:1px solid #BBBBBB;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#BBBBBB';
skin['ENDCAP_BG_COLOR'] = '#DFDFDF';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#A51800';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#A51800';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '2';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-BID',
   site: 'SID' },
  skin);
</script>

</div>

تنسييق الإضافة 

إستبدل googlplusid  بمعرف صفحتك على جوجل بلس

إستبدل fbpageurl  برابط صفحتك على الفيس بوك

إستبدل twitteid  بإسم حسابك في تويتر

إستبدل feedbid  بمعرف حسابك في فييد برنر

إستبدل ytid  بإسم قناتك على اليوتيوب

أما BID و SID فهما يخصان إضافة المتابعين على بلوجر

 إقرا الموضوع التالي لمعرفة كيفية الحصول عليهم من هنــا
وأخيرا  الجزء المميز باللون الرمادي الفاتح إحذف إن لم ترد إضافة اليوتيوب في الآداة
والجزء باللون الأزرق الفاتح إحذفه إن لم ترد إضافة المتابعين على بلوجر في الآداة
ملاحظة هامه إن كانت الإضافة عريضة بالنسبة لمدونتك يمكن تصغير العرض بتعديل الأرقام المحددة باللون البني في الكود ويجب تغييرها جميعا بنفس القيمة مثال إن اردت تقليل العرض بنسبة 20px يجب أن تقلل كل الأرقام بنفس النسبة


الاثنين، 25 مارس 2013

إضافة الإشتراك في قناة اليوتيوب بتنسيق جديد

youtube Subscribe blogger widget
الكثير إن لم يكن كل المدونون يملكون قناة على موقع اليوتيوب Youtube وطبعا هناك آداة شهيرة مقدمة من اليوتيوب نفسه للإشتراك بالقنوات Youtube channel Subscribe Widget وكنوع من التجديد قمت بعمل بعض التنسيقات على الآداة لتصبح بشكل افضل وأكثر تنسيقا للتناسب مع القوالب ويمكن بسهولة تغيير لون الآداة ليتناسب مع لون قالب مدونتك وهذا مثال للمعاينة قمت بتنسيقة بلون يتناسب مع قالب مدونتي وفي نفس الوقت هو يتكون من الوان محايده فيناسب عموم القوالب لكن سنوضح كيف تجعل اللون مناسب لقالبك تماما وطبعا لا تنسى الإشتراك بقناتنا ^_^


الكود

<center><iframe src=http://www.youtube.com/subscribe_widget?p=cnmutv style="overflow: hidden; height: 100px; width: 260px; background: #fff;background: -moz-linear-gradient(top,#F0EFEF,#fff);background: -webkit-linear-gradient(top,#F0EFEF,#fff); box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999; padding:1px; border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; border:3px dotted #000;" scrolling="no" frameborder="0"></iframe></center>

 قم بإستبدال cnmutv بإسم قناتك على الوتيوب
وإستبدل هذا اللون #F0EFEF  بلون يناسبك لكن دائما إختار الدرجة الفاتحة من اللون إن اردت الأزرق إختر أفتح الدرجات بحيث  تظهر الآداة بشكل جميل ويمكنك الحصول على أكواد الألوان من هنــا
وهذا الرقم 260 خاص بعرض الآداة قم بالزيادة او النقصان بحسب مساحة مكان الإضافة المتاح في مدونتك
أما الرقم 100 فهو إرتفاع الآداة لا تقوم بزيادته إلا إذا كانت الآداة لا تظهر بشكل كامل 
وهذا هو لون الإطار الخارجي إن أردت تعديله #000 
أما اللون #fff هو اللون الأبيض في خلفية الآداة يمكنك تعديله ولكن لا أنصح بذلك فوجوده يجعل الآداة تبدو بشكل أفضل 

الجمعة، 1 فبراير 2013

أخف صندوق لأزرار المشاركة باللون الذي تريده

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; width:100%; height:25px; margin:4px 0px 4px 0px;padding-left:5px;padding-top:5px;background:#F3F3F3; border:1px solid #C3C3C3; '>
 <!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<div style='float:right; margin-right:5px; color:#000; margin-top:-1px;font-family:&quot;Arial&quot;;font-size:17px; font-weight:bold; text-shadow: 0 1px 0 #ccc;'><a> شارك الموضوع</a></div>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e0e13be35ed575e' type='text/javascript'/>
<!-- AddThis Button END -->
</div></b:if>


إن اردت إضافة الكود في بداية الموضوع  فأضفه تحت أحد هاذين الكودين


<div class='post-header'>

<div class='post-header-line-1'/>

أما إن اردت أن تضيفه في نهاية الموضوع فأضفه تحت أحد الكودين التاليين


<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'>

طريقة تخصيص الصندوق

width:100% هذه هي مساحة عرض الصندوق

# F3F3F3 وهذا لون الخلفية

#C3C3C3 وهذا لون الإطار

#000 هذا لون كلمة شارك الموضوع ويمكنك تغييرها بأى كلمة وإن كنت ستضيفه في بداية الموضوع يمكنك كتابة السلام أو رسالة ترحيب 

ويمكن الحصول على أكواد الالوان من هنا موفقين بإذن الله  

الاثنين، 28 يناير 2013

رسالة تنبيهية للإشتراك في المواقع الإجتماعية

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



لتركيب الإضافة ضع الكود التالي في آداة HTML/JavaScript

<script type="text/javascript" src="https://cnmu.googlecode.com/svn/trunk/slidesubsc.js"></script>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mblsocialslide").show("slow");else $("#mblsocialslide").hide("slow");});function closeMBlsocialslide(){$('#mblsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<style>
#mblsocialslide{background:#f3f3f3;border:1px solid #BBBBBB;border-radius:9px;box-shadow: 0 1px 2px #999;padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:65px;}
</style>
<div style="display: none;" id="mblsocialslide">
<a style="position:absolute;top:12px;right:10px;color:#555;font-size:15px;font-weight:bold;color:#C53A1E;" href="javascript:void(0);" onclick="return closeMBlsocialslide();">(X)</a>
<span style="font-size: 20px; margin: 10px 20px; text-shadow: 1px 1px 0 #FFFFFF;">لا تنسى الإنضمام الى متابعينا</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpageurl&amp;send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>
<div style="float:left; margin:15px;"><a href="https://twitter.com/username" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow Us</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>
<div class='clear'></div>
إستبدل pageurl بإسم رابط صفحتك على الفيس بوك
وإستبدل username بإسم حسابك على تويتر

السبت، 26 يناير 2013

إضافة منزلقة لأزرار المشاركة على المواقع الإجتماعية

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

ولتركيب الإضافة على مدونتك قم بإتباع التالي
قم بتحرير قالبك وفوق الوسم </head> اضف الكود التالي
ملحوظة إن كان لديك كود مكتبة جي كويري فتجاوز هذه المرحلة ولا تضيف الكود

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

ثم إختر أحد الكودين التاليين وأضفه في اداة HTML/JavaScript


الإضافة على يسار المدونة

<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".hbslidebox").hover(function () {
            jQuery(this).stop().animate({
                left: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                left: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .hbslidebox {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUEW_JbaZC2nox4r5Z6XD3ub99_Zbqu471gDRT3olNu81cFxVv7cSlMRGy9_uJ6OZ4EWJMp9DtEW7STy2l-VusJu3Awp87ICneGvWuzNSXqU7TxhNKmNyMoIRU05E6f8GfTGRVOwKgBGI/s102/share-left.png") no-repeat scroll right top transparent !important;
        display: block;
        float: left;
        height: auto;
        padding: 0 45px 0 0px;
        width: 65px;
        height:102px;
        z-index: 99999;
        position:fixed;
        left:-70px;
        top:20%;
    }
    .hbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:left;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:left;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#0502CD;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="hbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
            
            </script>
        <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
            <!-- Medium Button -->
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>
                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
            <div class='floatbutton' id='google+1'>
                <g:plusone size="tall"></g:plusone>
            </div>
           
            <div class='floatbutton' id='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
            <div class="addbuttons">
                <a href="http://cnmu.blogspot.com/2013/01/Share-slider.html"target="_blank" title="أضف هذه الآداة الى مدونتك!"><span class="getfloat">كود الإضافة</span></a>
            </div>
        </div>
    </div>
</div>

الإضافة على يمين المدونة

<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".hbslidebox").hover(function () {
            jQuery(this).stop().animate({
                right: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                right: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .hbslidebox {
        background: url("https://lh3.googleusercontent.com/-KgklF6q4Bxg/UQOnO6tIrOI/AAAAAAAAAW8/OqtCfwr9c5w/s102/share-right.png") no-repeat scroll left top transparent !important;
        display: block;
        float: right;
        height: auto;
        padding: 0 0px 0 45px;
        width: 65px;
        height:102px;
        z-index: 99999;
        position:fixed;
        right:-70px;
        top:20%;
    }
    .hbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:right;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:right;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#0502CD;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="hbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
            
            </script>
        <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
            <!-- Medium Button -->
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>
                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
            <div class='floatbutton' id='google+1'>
                <g:plusone size="tall"></g:plusone>
            </div>
           
            <div class='floatbutton' id='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
            <div class="addbuttons">
                <a href="http://cnmu.blogspot.com/2013/01/Share-slider.html"target="_blank" title="أضف هذه الآداة الى مدونتك!"><span class="getfloat">كود الإضافة</span></a>
            </div>
        </div>
    </div>
</div>
موفقين بإذن الله
تحياتي

الخميس، 17 يناير 2013

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

من أهم الإضافات للمواقع هي خدمة الإشتراك بالبريد الإلكتروني وهي تتيح إمكانية إرسال رسالة تلقائية للبريد المشترك بها بوجود جديد في الموقع وهذا يجعل الزوار على تواصل دائم بالموقع وأشهر من يقدم هذه الخدمة طبعا FeedBurner وهو أيضا من خدمات جوجل ولن تحتاج فتح حساب عليه لأنك طبيعي تملك حساب Gmail المفتاح السحري لخدمات جوجل
لكن ما ستحتاجه هو طريقة ربط الحساب وتفعيلة لكي يمكنك إستخدام الخدمة في مدونتك
أولا عليك تسجيل الدخول ببريدك في جي ميل على موقع فيد برنر من هنا http://feedburner.google.com

شرح تفعيل الإشتراك في فيد برنر

هذا ما ستشاهده في الصفحة الأولى لفيد برنر وعليك إضافة عنوان خلاصات مدونتك وهذا مثال
 فقط غير cnmu.blogspot.com برابط مدونتك

http://cnmu.blogspot.com/feeds/posts/default


الآن ننتقل لخطوات الحصول على آداة الإشتراك وإعدادها


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


 

وهذا هو نص الرسالة العربية غير به ما تريد لكن لا تغير الكلمة الإنجليزية فهي مكان رابط التفعيل

السلام عليكم ورحمة الله وبركاته

شكراً لإنضمامك لصندوق مراسلات كن مدون ولكن بقيت خطوة واحدة لكي يصلك جديدنا
فقط الضغط على الرابط التالي لتفعيل الإشتراك

${confirmlink}

(ملحوظة إن لم يعمل الرابط ولم يفتح في صفحة جديدة يرجى تفعيله يدويا بنسخه ووضعه في شريط عنوان المتصفح)
 وأخيرا كود الإضافة ضعه في آداة HTML/JavaScript

<style>
.sub-box{
width: 260px;
padding:10px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border-style:dashed; 2px solid: #389af2;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}

.emailtext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7kH89hkFA-Cd-quJijrNQOz3Gk8jKAgnLNyqO5gf3U8caQtVgbMGj4bjyvpaPCxiDGd7KuHYpZyErHCox75XWZAL6YLuWbB1fP5jZH3meKs7VsHWvj3mjUy3ba0f2hTe2zhK6ioI56c-2/s1600/ot-mail.png) no-repeat scroll 4px center #EFEFEF;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #8D8D8D;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 120px;
}
.emailtext:focus{
outline: none;
}
.sub-button{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 10px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
.sub-button:hover{
background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
}
</style>

<center>
<div class='sub-box'>
إشترك بالبريد الإلكتروني ليصلك جديدنا
ستصلك رسالة للتفعيل عبر البريد لإكمال الإشتراك
<div style="text-align: left; display: inline-block;">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=cnmu" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cnmu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">
<input class="emailtext" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;إيميلك هنا . .&quot;;}" onfocus="if (this.value == &quot;إيميلك هنا . .&quot;) {this.value = &quot;&quot;;}" value="إيميلك هنا . ."  type="text" value="أدخل إيميلك هنا " />
<input name="uri" type="hidden" value="http://feedburner.google.com/fb/a/mailverify?uri=cnmu" /><input name="loc" type="hidden" value="en_US" /> 
<input type="submit" class="sub-button" value="إشتــرك" title='' alt='' />
</form>
</div></div></center>
ملحوظة إستبدل cnmu الموجوده بالكود بإسم رابط دونتك في فيد برنر الرابط الذي إخترته بالإنجليزية في الصورة الثانيةهذا
وهذا مثال للآداة للإشتراك في كن مدون ولا تنسى أن تشترك ليصلك جديدنا

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

الأربعاء، 16 يناير 2013

تخصيص إضافة متابعين بلوجر ووضعها في آداة جافا سكريبت

آداة المتابعين في بلوجر من أهم الأدوات التي توصل جديد مدونتك للمتابعين وخصوصا فئة مشتركي بلوجر ولكن كثير من المستخدمين يتمنى تعديل الآداة وجعلها بألوان تتناسب مع موقعه لكن للأسف خاصية التخصيص المدمجة معها لا تعمل جيدا وايضا البعض يريد أن يدمجها بأدوات أخرى لكن لم يستطيع كان هناك خدمة في جوجل إسمها Google Friend Connect كانت هذه الخدمة تتيح فعل ذلك لكن جوجل إستغنت عنها ولم تعد تعمل ولكن معنا وحصريا ستعمل هذه الإضافة وستستطيع بإذن الله تخصص الألوان ودمجها بادوات أخرى والتحكم الكامل بها فتابع الموضوع

أول شئ هو كود الإضافة وسنشرح كيف نتعامل معه وسنضيفة إلى آداة HTML/JavaScript

<!-- cnmu.blogspot.com -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-BID" style="width:296px;border:1px solid #000000;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#000000';
skin['ENDCAP_BG_COLOR'] = '#DDEEF6';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '2';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-BID',
   site: 'SID' },
  skin);
</script>

BID نستبدله بمعرف المدونة 
وللحصول عليه ندخل الى لوحة تحكم المدونة ثم إنسخه من شريط عنوان المتصفح

SID وهو الأهم وللحصول عليه
أولا يجب ان تكون الإضافة الأصلية موجوده في مدونتك إن لم تكن موجوده أضفها من صفحة الادوات

بعد الإضافة إذهب للصفحة الرئيسية لمدونتك

ستفتح لك الصفحة الخاصة بمصدر تكوين صفحتك إضغط زري Ctrl+F
ليفتح لك شريط البحث أكتب به كلمة Site:
وإنسخ الرقم الذي بجوارها واضفه مكان SID

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

طريقة تخصيص الألوان

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

ملحوظة أخيرة بخصوص الكود الرقم 2 هو عدد صفوف صور المتابعين وأقل شئ هو صفين
والـwidth:296 هو عرض الأداة

إضافة صندوق متابعي تويتر Twitter Fan Box

تويتر موقع إجتماعي آخر من المواقع الهامة ويختلف عن باقي المواقع الإجتماعية في كونه يعتبر موقع إخباري بشكل اكبر فحجم الرسائل فيه محدد لا يزيد عن 140 حرف مما يجعله كما يقولون ينقل المختصر المفيد وسيكون مفيد في توصيل عناوين مواضيعك بسهولة ولهذا تويتر سيكون دافع لك في تحسن عناويين مواضيعك لتكون جذابه ولافته وقصيرة وعمل حساب عليه أمر سهل فقط توجه الى رابط الموقع وقم بعمل حساب إن لم يكن لديك واحد سلفا Twitter.com
وموضوعنا سيتحدث عن ربط حسابك في موقع تويتر بمدونتك عن طريق صندوق المتابعين
 Twitter Fan Box 

طريقة إضافة صندوق متابعي تويتر

أضف فقط الكود التالي في آداة HTML/JavaScript مع تغيير كلمة Username بإسم حسابك في تويتر

<div class="textwidget">
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("username");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 300px !important; /*العرض*/
height: 300px !important; /*الإرتفاع*/
}
</style>

 مثال لحساب كن مدون على تويتر وفضلا تابعنا


صندوق المتابعة توقف من قبل مصممه لذلك يمكن إستبداله بزر المتابعة

<a href="https://twitter.com/username" class="twitter-follow-button" data-lang="en" data-show-count="true" data-size="large">Follow @username</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="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


بالنسبة لتخصيص الزر 
username نفس الأمر إسم حسابك على تويتر
قم بحذف data-size="large" إن أردت أن يكون الزر بحجم أصغر
en أى اللغة الإنجليزية يمكنك إستبدالها بـ ar إن اردت الزر عربي
 إستبدل true بـ false إن اردت إخفاء عدد المتابعين

الثلاثاء، 15 يناير 2013

أنشئ صفحة على جوجل بلس وأضف آداة المتابعون

جوجل بلس موقع إجتماعي هام أخذ في النمو بسرعة كبيرة بدأ يحتل مركز قوي بين المواقع الإجتماعية النشر عليه يفيد جداً في توسعة نطاق متابعين مدونتك وجلب لها فئة من المتابعين الأكثر إحترافية وذلك أن كثير من الذي يهتمون بهذا الموقع هم أصحاب مواقع ومدونات وطبيعي أنت لديك حساب به طالما أنك تملك بريد Gmail وحساب جوجل بلس يأتي معه كما ذكرنا في موضوع سابق جي ميل كنز في حد ذاته و Googls Plus هو الخدمة الإجتماعية لشركة جوجل لذا فكونك مدون على بلوجر كل خدمات جوجل ستكون جزء من حياتك التدوينية
ونبدأ في الخطوات العملية أولا إذهب الي حسابك في جوجل بلس بالضغط على الرابط التالي  https://plus.google.com

إنشاء صفحة لمدونتك على جوجل بلس




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

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

أضف آداة HTML/JavaScript وضع الكود التالي بها

<div class='g-plus' data-action='followers' data-height='300' data-source='blogger:blog:followers' data-width='300' data-href='https://plus.google.com/ID'></div>
<script type="text/javascript">
       (function(){window.___gcfg={'lang':'ar'};
        var po=document.createElement('script');
        po.type='text/javascript';
        po.async=true;
        po.src='https://apis.google.com/js/plusone.js';
        var s=document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po,s);})();
</script>

data-height='300 إرتفاع الإضافة

data-width='300' عرض الإضافة

ID هذا أهم شئ وبدونة لن تعمل الإضافة وهو معرف الصفحة

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


وهذا مثال لصفحة كن مدون على جوجل بلس لا تنسى متابعتنا عليها

إنشاء صفحة على Facebook وإضافة صندوق المعجبين

من أهم الأشياء التي تساعد في نشر مدونات بلوجر هي المواقع الإجتماعية وطبعا الأبرز والاشهر هو فيس بوك Facebook
لذا من الهام أن تكون للمدونات صفحات خاصة على الفيس بوك وربطها بالمدونة عن طريق آداة المعجبين
ومع المحافظة على نشر التدوينات عبر صفحة مدونتك سيكون هذا وسيلة جيده لإستمرار توافد الزوار لمدونتك نظراَ للقاعدة الجماهيرية الكبيرة لموقع الفيس بوك أغلب مستخدمي الإنترنت لديهم حساب أو أكثر على الفيس بوك لكن إن لم يكن لديك حساب يمكنك الحصول على واحد في دقيقتين بالتسجيل في الموقع Facebook.com ثم نتبع الطريقة التالية لإنشاء صفحة لمدونتك على الفيس بوك


شرح إنشاء صفحة لمدونتك على الفيس بوك



 

إضافة صندوق معجبين Facebook

أضف آداة HTML/JavaScript وضع بها الكود التالي

<iframe src="//www.facebook.com/plugins/likebox.php?href=page url;width=292&amp;height=290&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:290px;" allowTransparency="true"></iframe>
ضع رابط صفحتك مكان كلمة Page url
وهذا مثال لصفحة كن مدون أرجو تسجيل إعجابك بها