Label Cloud Widget For Blogger

Hi! Guys in this tutorial I would like to present you with a code for ‘Label Cloud Widget For Blogger’.

There will be simple editing of the template.

But before making any changes to your template please backup it.

Now follow these simple steps:

Log in to blogger.

Go to template and backup it first.

Click on ‘Edit HTML’.

Now search for ]]>

in  the template. You can do the search by pressing Ctrl+F.

Copy the given below code and paste it just above ]]>

and save the template.

You can change the colour of the labels according to your choice.

CODE

.label-size{

margin:0;

padding:0;

position:relative;

}

.label-size a{

float:left;

height:24px;

line-height:24px;

position:relative;

font-size:12px;

margin-bottom: 9px;

margin-left:20px;

padding:0 10px 0 12px;

background:#3366FF;

color:#fff;

text-decoration:none;

-moz-border-radius-bottomright:4px;

-webkit-border-bottom-right-radius:4px;

border-bottom-right-radius:4px;

-moz-border-radius-topright:4px;

-webkit-border-top-right-radius:4px;

border-top-right-radius:4px;

}

.label-size a:before{

content:"";

float:left;

position:absolute;

top:0;

left:-12px;

width:0;

height:0;

border-color:transparent #3366FF transparent transparent;

border-style:solid;

border-width:12px 12px 12px 0; 

}

.label-size a:after{

content:"";

position:absolute;

top:10px;

left:0;

float:left;

width:4px;

height:4px;

-moz-border-radius:2px;

-webkit-border-radius:2px;

border-radius:2px;

background:#fff;

-moz-box-shadow:-1px -1px 2px #004977;

-webkit-box-shadow:-1px -1px 2px #004977;

box-shadow:-1px -1px 2px #004977;

} 

.label-size a:hover{background:#555;}

.label-size a:hover:before{border-color:transparent #555

transparent transparent;}

How to add a widget to the header in blogger

Many blogger templates will have a feature that allows you to add an extra widget to the header section. The single column structure templates will not have this feature.

In this tutorial I will tell you ‘How to add a widget to the header section’ in blogger.

We have to make some simple changes to the template. Don’t worry; I will help you through this. Before making any changes “please backup your template”.

Follow these steps:

1. Log in to blogger dashboard.
2. Go to template. Click “Backup/Restore”. Click “Download full template”.
3. After downloading your template, click “Edit HTML”.
4. Search /*Header or /*-----Header (something like this).
5. Now below it add this piece of code.
.header-left{ display: inline-block; height: 35px; width: 350px; float: left; } .header-right { display:inline-block; float:right; }
6. Find <b:section class=’header’ id=’header’ maxwidgets=’1’>  and replace it with 
<b:section class='header-left crosscol' id='header' maxwidgets='2' showaddelement='yes'>
7. Now search for </header> and add the below code before the header.
<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'> <div style='clear:both;'/>
8. Find ]]></b:skin> and before it add the following CSS code.
.header-right { display:inline-block; float:right; width:400px; }
9. Now save your template and see the layout of your template, you will find an ‘Add a Gadget’ box to the right of your header.
10. You can make changes to the font-size, width, float and other parameters according to your template.

If you have any genuine problems regarding this post please feel free to contact.

Print Page

How to add Facebook popup like box for blogger

Hi! Guys in today’s post I would like to tell you ‘How to add Facebook popup like box for blogger’. After the page is fully loaded the Facebook popup like box slides from the bottom of the page to the center.

Adding this widget to your blog is very simple.

Follow these simple steps:

1. Log in to blogger and go to Layout.
2. Click on “Add a Gadget” and select HTML/Javascript.
3. Copy the below code and save it.

 Before adding the code, please change Techpro365 with your Facebook fan page.

 You can also change the “Don’t forget to join with our community” to whatever you feel   like adding.

CODE:

<style type='text/css'>

#Techpro365FBpop {

position:fixed !important;

position:absolute;

top:350px;

left:50%;

margin:0px 0px 0px -182px;

width:300px;

height:auto;

padding:16px;

background: #FEFEFE;font:normal Dosis, Georgia, Serif;

color:#111;

border:2px solid #333;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

#Techpro365FBpop a.bsclose {

position:absolute;

top:-10px;

right:-10px;

background:#fff;

font:bold 16px Arial, Sans-Serif;

text-decoration:none;

line-height:22px;

width:22px;

text-align:center;

color:#000000;

border:2px solid #333;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:22px;

-moz-border-radius:22px;

border-radius:25px;

cursor:pointer;

}

</style>

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

<script type='text/javascript'>

$(window).bind("load", function() {

// Animate Top

$('#Techpro365FBpop').animate({top:"180px"}, 1000);

// Widget by www.Techpro365.com

$('a.bsclose').click(function() {

$(this).parent().fadeOut();

return false;

});

});

</script>

<div id='Techpro365FBpop'>

<!-- Widget by www.Techpro365.com Start -->

<center><b><a class="Techpro365">Don't Forget To Join With Our Community</a></b></center>

<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTechpro365&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe></center>

<!-- Widget by www.Techpro365.com End -->

<a class='bsclose' href='#'>&times;</a>

<center style="float:right; margin-right:10px;">

</center></div>

If you have any genuine problems regarding this post please feel free to contact. 

Print Page

How to add arrow keys to navigate in blogger

Hi! Guys in this post I would like to tell you ‘How to add arrow keys to navigate in blogger’.

This widget helps you to navigate from one page to next page and also one post to the next. Navigating through this widget is so helpful because otherwise we have to search for the next post link on the blog, with this that problem can be avoided.

Adding and removing this widget from your blog is so simple. You can add it by clicking on the ‘Add to Blogger’ button.

How to let others know of this?

You can do it by adding some floating images like I done it on this blog. You can let them know by showing some text on your blog.

If you want to show some floating images follow these simple steps.

Log in to blogger.

Go to template. At first backup your template and click on edit HTML.

Search for ]]></b:skin> . You can do this by pressing Ctrl+F.

Add this below code just before ]]></b:skin>.

#float_techproleft { position:fixed;_position:absolute;bottom:270px;left:0px;clip: inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);} #float_techproright { position:fixed;_position:absolute;bottom:270px;right:0px;clip: inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

Now search for </body> and add the below code just before </body>.

<div id='float_techproleft'> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpKwAhadNwnudfI-BcSsxgTk7g-1cssKRm_bIolNuz147DRABSd75QiofSVPdkTNWBKmITC_y3I1zKn5HI_KWpDYyEvFndA5-kqwQ9Ujxo0MrAV-mmzK0r59HeAsxSKyoSmkatRw4BtBb/s1600/left.png' title='use keyboard keys to navigate'/> </div> <div id='float_techproright'> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPQ2G_YsV-pCaxkuBBjzoylRTq9xh6QutOeMyb69M7_yBmyiV8REpNTKU-zzKZ16ff79t2WvMOFp53YVLitJbL9yUzGPxhhpY7sRA3yQ4TcQQ5VmfZPduf8B_dOrm1azl6HzdjgyK4XPD/s1600/right.png' title='use keyboard keys to navigate'/> </div>

Now click on ‘save’ button and you can see the changes on your blog.

You can edit the image links of the navigation keys in the above code.

If you have any genuine problem regarding this post please feel free to contact.

Print Page

How to add Floating Social Share bar

Hi guys! In this post I would like to tell you ‘How to add Floating Social Share bar’.

Generally bloggers use social networking sites to promote their content and get visibility. With this widget we can easily access different kind of social networking platforms at one place.

Adding this to your blog is so simple that it takes barely two minutes to do so.

Follow these simple steps:

1. Log in to blogger and go to Layout.
2. Click on Add a Gadget and select HTML/JavaScript and paste the following code and save it.
3. Before saving it change the techpro4u with your twitter account name.
4. You can customize this widget according to your convenience.
5. By default the position of the widget is left if you want to change it to right change left to right.
6. Check out your blog for the changes.

CODE:

<!-- Sidebar share buttons techpro365.blogspot.in--><style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-780px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color: #b2e0ff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from techpro365.blogspot.in"> <div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div> <br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='techpro4u' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script> <br /><div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div style="clear: both;font-size: 9px;text-align:center;"> <a href="http://techpro365.blogspot.in/" target="blank"><font color="red">Get This<font></font></font></a></div><!-- Sidebar share buttons End --></div></div>

 If you have any genuine queries or facing any difficulties in following the post feel free to ask through the forum or the contact page.

Print Page

How to add 'Wibiya toolbar' to blogger.

HI guys! Today in this post I am going to tell you ‘How to add Wibiya toolbar to blogger’.

What is Wibiya toolbar ?

Wibiya toolbar is a customizable, free and attractive toolbar which allow users to share or promote your content mainly through the social networking sites. The main feature of this toolbar is that the user has no need to navigate away from the site.

Adding this toolbar to your blog or website is very easy. Just follow these simple steps.

1. Go to Wibiya click on get it now.
2. Fill in the form details.
3. Now you will see a screen that looks like this.
   
   
   
   
   
4. Log in to your blogger account.
5. Follow the instructions on wibiya website.
6. Click on “Add Widget” at the bottom of the directed page.
   
   
   
   
   
7. Now check your blog for the attractive wibiya toolbar at the bottom of the page.

Print Page

How to add 'Facebook-Twitter-Google+' follower box

Today in this post I would like to take you through the process of “Adding a useful followers widget”. As you guys already know about a ‘follow box’. In this widget we have three in one follow box facility for Facebook , Twitter and Google+. This is a cool widget which shows all your followers at one place. Adding this widget to your blog is very easy.

Follow these steps to add this widget to your blog:

1. Login into your blog and go to Layout.
2. Click on ‘Add a Gadget’.
3. Copy and paste the below given code and click on ‘save’.
4.  Now open your blog and you can view the widget working.

Before adding the code to your blog, please paste it in notepad and make these changes:

1. Change ‘Techpro365’ to your blog’s fan page.

2. Change ‘techpro4u’ to your twitter.

3. Change the google+ id ‘106197391344352891445’ with yours.

CODE:

<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/m4krejz6tw6sxlf/3%20in%201%20StyleSheet.css" /> <script src="https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js"></script> <div id="on"> <div id="facebook_right" style="top: 12%;"> <div id="facebook_div"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp5CyUT4QxB3-OkqrzhTwj77AlxC1M_X-Z7ag57cJY6SAY07dm4xLrFzcxek-_DTU1k0hXhEDZV-xVU38tJsFiEUAnI7MhICGvGBsVl7wZuj_Coxq3KxK10kkDzQXo7o67YPThE0lcBfQ/s1600/NBTfacebook_right.png" /> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FTechpro365&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe> </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 28%;"> <div id="twitter_div"> <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgHYxAw5zxZw8YslqT1gIqCeXvAEHYWKUkRa0LZ-euBMUFb4Qa2Zcv7l2IjnN3op1a8PZiGQmhAiw9Tgdrlss2MKnHbKr3g-DWHI3tTLWTBp6b-gUKTRshCi4Upsq_B4FK08MjTN58Hmg/s1600/NBTtwitter_right.png" /> <script type='text/javascript'> function fanbox_init(screen_name) { document.getElementById('twitterfanbox').innerHTML = '<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=' + screen_name + '" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "></iframe>'; } </script> <div id="twitterfanbox"> <script type="text/javascript"> fanbox_init("techpro4u"); </script> </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 45%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rDo9zHHjE4cKIfDAI0Zh9lHNR6ZV0ZkAW8bVk_C8Xv4mNyiZYy7Sw0nZTMA_1jWc_qAuHXJdsdNFcFdDHriwWE0CCNHll27XjOUP2IxAetgjY50f9IyYGr3OC1EoacnGCFJGpVsAg4E/s1600/NBTgoogle_plus_right.png" /> <div style="float: left; margin: 10px 10px 10px 0;"> <a href='http://techpro365.com'> <img alt='Tips Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqEll4WVNQYy2WJpGuwqW6-cnlVjQ2rQbBwFTP6ZkF6TGYxCDi58hrQNWu0o6kS5B8Ckq1iW9sqCki-lvnlvrZ-MlUTVvOY3wiv0hRgI-FaPgznMY3DxWOJ3Fg2wxHRX-FHDbPs929no2R/s1600/best+blogger+tips.png' /> </a> <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/106197391344352891445" data-source="blogger:blog:followers" data-width="270"> </div> <script type="text/javascript"> (function () { window.___gcfg = { 'lang': 'en' }; 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> </div> </div>

If you have any genuine queries about this post or facing any problem feel free to ask by posting in the comment box.

Print Page

How to add 'Facebook like and send buttons' for blogger.

Hello! You are here because you searched for ‘How to add 'Facebook like and send box' for blogger.’ Facebook has come up with a new set of social plugins which enable you to provide engaging social experiences to your users with just a line of HTML. The Facebook Like Button is One of them. Facebook like button will allow your readers to quickly share your posts with their Facebook Friends. You can also get to know how many people liked your Blog Post .This process includes adding a small code to your blogger template. So, before going any further please backup your template.

  

Now Login to your Blogger Account and go to Design > Edit HTML and click on the check box which says “Expand Widget Templates”.

Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find “<html” and change it to <html xmlns:fb="https://www.facebook.com/2008/fbml". This is necessary for all FBML widgets using the fb tag.  So if you have already added the namespace while adding some other FB plugin, then you can skip this.

Search for “<data:post.body/>”. You may find this by pressing “Ctrl+F” buttons and type it in the search box.

Now copy the code and place it just before <data:post.body/>

 CODE:

<!-- Amazing Facebook Like and Send Buttons For Blogger by techpro365.blogspot.in--> <b:if cond='data:blog.pageType == "item"'> <div> <b:if cond='data:post.isFirstPost'> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> </b:if> <fb:like expr:href="data:post.canonicalUrl" layout='standard' send='true' show_faces='false' font="arial" action="like" colorscheme="light"></fb:like> </div> </b:if> <!-- Amazing Facebook Like and Send Buttons For Blogger by techpro365.blogspot.in-->

Now save your template and you will find these buttons in every post of your blog.

Print Page

Amazing 'Facebook Fan Page Like Slide Out' For Blogger

In the earlier post I had given a Facebook Like Box for blogger. Now in this post a similar one with some change in type i.e a slide out box will appear after clicking on the image.

Now navigate to Layout and click on Add a Gadget and select HTML/Javascript.

Paste the code given below.

Code:

<!-- Amazing Facebook Like Slide Out Widget For Blogger by techpro365.blogspot.in--> <a href="javascript:showHideFL()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHWYwplzf45iOcJZZGPWtXNRMwnwrgksa1buU5ZFGJDbvmHh_YJZMBpOsW9OQ0gTOWIYJgw9D4d3qAdnDeFVPnkCMTWDkELQHUNQJB6-OtE1NsNedonffuW7aZQ5Is4MHKzo8P84_4ekg/s1600/facebook.png" alt="Member" title="Click to Follow" style="position: fixed; top: 150px; right: 0px; cursor: pointer; opacity: 0.5; " opacity:1;filter:alpha(opacity="100)&quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;"="" height="32px" width="32px" /></a> <script src="http://code.google.com/p/techpro365/downloads/detail?name=jquery.min.js"></script> <style type="text/css"> #fl{ position:fixed; left:150px; z-index:+1000; } * html #fl{position:relative;} .flcontent{ float:left; border:2px solid #676767; background:whitesmoke; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; padding:10px; } </style> <script type="text/javascript"> function showHideFL(){ var fl = document.getElementById("fl"); var w = fl.offsetWidth; fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0); fl.opened = !fl.opened; } function moveFL(x0, xf){ var fl = document.getElementById("fl"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; fl.style.bottom = x.toString() + "px"; if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);} } </script> <div id="fl" style="bottom: -401px; "> <div class="fltab" onclick="showHideFL()"> </div> <div class="flcontent"> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FTechpro365&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe> <div style="text-align: right;"> <a href="javascript:showHideFL()"> [Close] </a></div> </div> </div> <script type="text/javascript"> var fl = document.getElementById("fl"); fl.style.bottom = (-100-fl.offsetWidth).toString() + "px"; </script> <!-- Amazing Facebook Like Slide Out Widget For Blogger by techpro365.blogspot.in-->

Replace techpro365 <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FTechpro365 >with your Facebook fan page name in the following code.

Click on save and you are done.

If you are facing any problem in adding the code please feel free to let me know by leaving a comment or contact me.

Print Page

How to add 'Facebook Like Box' for blogger

If you had the thought of adding a plugin or widget of facebook like box you came to the right place. Here in this tutorial I would like to take you through the process of adding 'Facebook Like Box' for blogger.

·         Login to your Blogger Dashboard, and navigate to Template > Edit HTML.

·         Click on the checkbox which says “Expand Widget Templates”.

·         Now search for <body> and paste the following code immediately after it.

Code:

<!-- .fb code starts --> <div id='fb-root'/> <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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;   fjs.parentNode.insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script> <!-- .fb code ends -->

    ·         After adding this code save the template.

    ·         Now navigate to Layout and click on Add a Gadget and select HTML/Javascript.

    ·         Paste the code given below.

Code:

<div class="fb-like-box" data-href="https://www.facebook.com/Techpro365" data-width="256" data-height="260" data-show-faces="true" data-colorscheme="dark" data-stream="true" data-border-color="black" data-header="true"></div>

          ·     Replace https://www.facebook.com/Techpro365 with your facebook fanpage link or url.

          ·         Click on save and you are done.

      Customization:

       You can place this gadget anywhere according to your convenience of your blog.

·         You can change the dimensions of the data-height and data-width fields according to the dimensions required for your blog.

·         With data-stream=”true” it shows the posts of your blog, if you don’t want to show your post simply remove it. Same thing can be done with data-border-color="black".

·         We have two choices with colour scheme dark and light, modifications can be done as per your choice.

If you are facing any problems in adding the code please feel free to let me know through comment or contact me.