Blogger eDigest: widgets

Home » Posts filed under widgets

Breadcrumb navigation for blogger

Posted by Sathya S

Preview

Installation

Go to Blogger Dashboard.
Back up your template
Click Edit HTML
Click Proceed
Click Expand Widget Template
Now find the below code using Ctrl + F

</b:skin>

Now above it paste the following code :

.breadcrumbs
{
background: #f9f9f9;
border: 1px solid #e6e6e6;
font-size: 11px;
color: #999;
-moz-box-shadow: 3px 3px 0 0 rgba(135,135,135,0.1);
-khtml-box-shadow: 3px 3px 0 0 rgba(135,135,135,0.1);
-webkit-box-shadow: 3px 3px 0 0 rgba(135,135,135,0.1);
box-shadow: 3px 3px 0 0 rgba(135,135,135,0.1);
margin: 0 0 10px;
padding: 7px;
margin-bottom: 20px;
}

Now find the below code using Ctrl + F

<b:includable id='main' var='top'>

Now find the below code using Ctrl + F

</b:skin>

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>

Now paste the following code for replacing:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop>
» <span><data:post.title/></span> </b:if> </b:loop> </div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
Posts filed under <data:blog.pageName/>
</b:if> </div> </b:if> </b:if> </b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/><data:adStart/>

Thats it. Save and enjoy J

Floating Social Widget for Blogger

Posted by Sathya S

Preview

Installation

Go to Blogger Dashboard.
Back up your template
Click Edit HTML
Click Proceed
Click Expand Widget Template
Now find the below code using Ctrl + F

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

Now below it paste the following code :

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<style> 
.BeD_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; 
} 
.BeD_social_floating .BeD_side_social_button{ 
    margin-bottom:5px;float:none; 
    height:auto;width:60px; 
} 
.BeD_social_floating .st_twitter_vcount, 
.BeD_social_floating.st_plusone_vcount, .st_email{ 
    margin-left:5px; 
} 
.BeD_social_floating .st_fblike_vcount{ 
    margin-left:5px; 
} 
.BeD_social_floating .stButton_gradient{ 
    background:none !important;
    height:21px !important; 
    padding-left:0 !important; 
} 
.BeD_social_floating .chicklets, 
.BeD_social_floating .stMainServices { 
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-yNSRL03zX3bIDE32zrSBoYPUnrb08bYVHH2MZksObHg0keEPbSoMy3cB1OJmZg2moGZTD-0LG4xIXigRPfzUIasrkllDAwSG6sit3jwsqJwpWGStjx7jJRftExuKPPSp8LSDeGVxwBKv/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/AVvXsEi-yNSRL03zX3bIDE32zrSBoYPUnrb08bYVHH2MZksObHg0keEPbSoMy3cB1OJmZg2moGZTD-0LG4xIXigRPfzUIasrkllDAwSG6sit3jwsqJwpWGStjx7jJRftExuKPPSp8LSDeGVxwBKv/s400/gc_social_sprite.gif&#39;) !important; 
} 
.BeD_social_floating .st_twitter_vcount .st-twitter-counter{ 
    background-position:0 -58px !important; 
} 
.BeD_social_floating  .stButton_gradient{ 
    border:none !important; 
} 
.BeD_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; 
} 
.BeD_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; 
} 
.BeD_social_floating .stBubble{ 
    background-position: 21px 31px !important; 
    height:35px !important; 
}.BeD_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.BeD_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.BeD_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important; 
}

.BeD_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBzn3o-Vh9AVuKxePXZOIiZAmd3Nxu2YLeJwHg_aw3RMkh9wLqHdM5PUg2VayHNsPu6-jeKQH-5THDu7fhonYKX_Uq5z2cwpD39uqizLVsxRmmbZDw_SlbYysneskwwOmdiGRtsE5ReFcC/s400/bubble_arrow_pinterest.png') !important;
}


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

</style> 

<div class='BeD_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});</script> 
    <span class='st_fblike_vcount' displaytext=''/> 
    <span class='st_twitter_vcount' displaytext='' st_via='BloggereDigest'/> 
<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;Blogger eDigest&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://bloggeredigest.blogspot.com/2013/02/floating-social-widget-for-blogger.html' style='color:#CAC8C8;'>Widgets</a></p> 
</div> 
</b:if></b:if>