Blogger - הוספת יישומון בר שיתוף צף לרשומות

יישומון בר שיתוף זה מכיל מוני לחיצות של רשתות חברתיות
כמו +Google, פייסבוק, טוויטר, pinterest ואפשרות שיתוף
בדוא"ל וברשתות החברתיות השונות,כפי שתראו בצד ימין לפוסט.
הוא אמור לצוף בצד שמאל של הבלוג שלכם אך בגלל היפוך
הצדדים של השפה הוא יופיע בצד ימין של הרשומה.



היישומון נבדק בדפדפנים גדולים כמו IE7 +, Firefox, Chrome ואחרים, ונמצא
עובד ללא בעיות תאימות או בעיות עיצוב.

התקנת היישומון קלה, אך אם אתם ממש רוצים אותו, ייתכן ויהיה עליכם לשנות
מספר נתונים על מנת להתאימו למידות הרוחב הקיימים בבלוג שלכם.

להלן שלבי הוספת בר השיתוף לבלוג:

היכנסו לתפריט מרכז השליטה של הבלוג ולחצו על "תבנית".

בצעו גיבוי לתבנית הקיימת, אליה תוכלו לחזור במידה ותהיה בעיה כלשהי.

לחצו על "ערוך HTML".

במערכת בלוגר הישנה הייתה אפשרות ללחוץ על "הרחב תבניות יישומון" -

פעולה אותה חייבים לבצע על מנת להטמיע את הקוד במקום הנכון.

אפשרות זו אינה קיימת במערכת בלוגר החדשה ולכן יהיה עליכם לעשות

זאת בעצמכם (לא מצאתי דרך אחרת).

בעמודה השמאלית מופיעים מספרים עוקבים. אם תגללו את הדף כלפי מטה

יופיעו במקומות מסוימים חיצים (בצבע שחור). לחצו על כל חץ (עד סוף

התבנית) על מנת לפתוח את השורות המסתתרות.

אתרו בתבנית את השורה הבאה (לאיתור מהיר, הקישו קונטרול F כאשר הסמן

בתוך התבנית ובשורת החיפוש שתופיע, הדביקו את התווים. לחצו אנטר

והשורה תופיע מובלטת בצבע צהוב):

----------------------------------------------------------------------------------------------------------------------

<b:includable id='post' var='post'>

----------------------------------------------------------------------------------------------------------------------

הדביקו את הקוד להלן שורה אחת מתחת (ראו תמונה).

לתשומת לבכם, לכל אחד מכם יופיע הטקסט הנ"ל במספר שורה שונה, לכן הימנעו

מלהדביק את הקוד בשורה כפי שמופיע בתמונה! אתרו שורה זו בתבנית שלכם.

הקוד להדבקה -

----------------------------------------------------------------------------------------------------------------------

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
position:fixed; bottom:10%; margin-left:-60px; float:left; width:60px;
background-color:#f7f7f7; padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRvU_ZzB5SeTiwKWP-K5EOSUDd0D7RU6amdGa0VCokKHavA3AtDWZAJWv1JnOE6Iez9wjEOswBLjDk-S7sxruweyyr_bgWuIFg6YGNjGgo0KyqOl-3yNu_UMFjgUE4n7MK_RGLBAK5RZvc/s400/gc_social_sprite.gif&#39;) no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRvU_ZzB5SeTiwKWP-K5EOSUDd0D7RU6amdGa0VCokKHavA3AtDWZAJWv1JnOE6Iez9wjEOswBLjDk-S7sxruweyyr_bgWuIFg6YGNjGgo0KyqOl-3yNu_UMFjgUE4n7MK_RGLBAK5RZvc/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
border:none !important;
}
.mbt_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}

.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}

.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.mbt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}.mbt_social_floating .st_pinterest_vcount{
margin-left:5px;
}
.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{
background-position:0 -19px !important;
}
.mbt_social_floating .st_pinterest_vcount .stBubble_count{
color:#FF0505;
background-color:#fbf8f8 !important;
}

.mbt_social_floating .st_pinterest_vcount .stBubble{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVnA-TBgLSHXp5_ok0xFtmy06bXuOqhRTZTrTC5-1YSpWnVSRSTliJGFSKIgEGwF1DL8YOscfFtSHI7FCJH-fGMH2s_c4Lt6OlIPBg7cOWItQe4g8HcvRX83JCZdR4m4gzmjfY6GlR0oQ_/s400/bubble_arrow_pinterest.png') !important;
}


.st_pinterest_vcount{
margin-bottom: 0px;
display: block;
}

</style>

<div class='mbt_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
<!-- No more works properly so removing it from mbt list<span class='st_fblike_vcount' displaytext=''/>-->
<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
<span class='st_twitter_vcount' displaytext='' st_via='mybloggertricks'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>

<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

----------------------------------------------------------------------------------------------------------------------

בחלק הראשון של הקוד, המודגש בצהוב ניתן לבצע שינויים:
במקום left הקלידו right ואם הבר עולה על הרשומה שנו גם את המספר
המופיע בצמוד ל- px.
השינויים אצלי בבלוג - margin-right:-80px; float:right ובנוסף היה עלי לשנות
את פריסת גוף התבנית כך שהרשומות יופיעו בצד ימין והגדאג'טים בצד שמאל (את
אלו ניתן לשנות בקלות בעזרת מעצב התבניות).

את החלק השני המודגש בצהוב (mybloggertricks) החליפו בשם המשתמש 
שלכם בטוויטר.

בסיום - לחצו "שמור תבנית".


אם במקרה כפתור ה- like של פייסבוק לא עובד (אצלי זה עובד), אתרו בתבנית
את השורה:

                                                                                                          <body>

והדביקו בשורה מתחתיה את הקוד:

----------------------------------------------------------------------------------------------------------------------

<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>

----------------------------------------------------------------------------------------------------------------------

לתשומת לבכם, הבר שיתוף מופיע בפתיחת רשומה לקריאה ולא בדף הבית.

למאמר המקור בשפה האנגלית מאתר My Blogger Tricks.


אם אהבתם, לחצו Like.
אם הצלחתם, ספרו לנו בתגובות.