Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Friday, April 11, 2014

Multiple Commenting System widget for Blogger using jQuery UI

This blog post covers in detail those steps that will help you include a jQuery-UI based multiple commenting box widget to your blogger blogs. jQuery user interfaces are being used extensively as they provide an eloquent user interface and are light weight, ie they are faster to load. Moreover, they are compact and in a small screen area more of controls can be dealt with within its interface. I used the same jQuery-UI and developed a multiple commenting box widget for my blog. Currently I have included the Facebook comments, Blogger comments, and Google+ comments. This post is in continuation with my earlier post, where I described how to add different commenting system except Blogger’s default commenting system. Lately, I figured out a way in which Blogger’s default commenting system can also be used in the widget. And thus, here I am to share my code. If you find my code not working, or you get struck anywhere, feel free to comment and ask your query. You can connect with me on various social media platforms as well. I will feel glad to help you.

Step1 > Make a Facebook App. I hope you already know how to make one. This is required because we need the ‘App id’ for Facebook comment to start working.
Now, in the template editor, paste the following code before </head> :

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
<meta content='YourFacebookProfileUserID' property='fb:admins'/>
<meta content='YourFacebookAppID' property='fb:app_id'/>

Just enter your Facebook Profile UserID and your App ID in the required place before pasting the code.

Step2 > Go to Blogger’s Edit Html section, and find <div class='comments' id='comments'>. If you click just before <div class='comments' id='comments'> on the template pane, you will find that the code within this <div> tag gets collapsed. This will help us to select the entire content within these tags. 
(the highlighted one in the screenshot is what we will select and paste there the new code)
Now we need to cut this selected content and paste there the code below:


Step3 > Save the template. And refresh your blog. You will find my multiple commenting box instead of Blogger’s default commenting interface. You will get Facebook comments, Blogger’s and Google+ commenting system in this widget. If you wish to add some other commenting system, then that can be done too. Just leave me a message. And will help you out with that.

Note: This widget can be customized to different styles by overriding the default CSS. I am using the same widget with a slightly different styling done by me. The different styling can be done either by altering the default CSS or by explicitly using an inline CSS.

Sunday, February 16, 2014

How to host CSS/JavaScript files on Google Drive



Did you ever think of writing your own CSS and JavaScript code and host it on the internet so that you may use it on your blog? Many geeky bloggers (well, I am not that geeky) and those who own free but customizable blogs (yes, like me) want to have their own widgets on their blogs. They want them to function exactly the way they wish to. Sometimes widgets imported from other blogs come with preset that may not suit our needs. So, for such bloggers it becomes essential to write their own scripts or edit the default ones. In both cases, you would need to upload your edited script files on some server and from there its link would be referred in the main widget code. But we on the boats of free service and with no server space can’t avail this facility to upload our files. Google Drive, the angel comes here to rescue. Google Drive is not just about uploading your necessary documents online but can also be used to host your script files which you may use to alter the widgets. Here I explain you how.

1) Upload your script file on your Google Drive.
2) Share the uploaded file and make it public.
3) Note down the URL of the file you just made public. It would be something like this: https://drive.google.com/file/d/0C4d6Av78BLPEfMUJWER9gtzdJdkE/edit?usp=sharing
4) Now copy the code of file (after https://drive.google.com/file/d/, and before /edit?usp=sharing) in our case it is this: 0C4d6Av78BLPEfMUJWER9gtzdJdkE
5) Just paste the code of file after this: https://googledrive.com/host/
In our case the final code will become: https://googledrive.com/host/0C4d6Av78BLPEfMUJWER9gtzdJdkE

And done, this final URL can be used anywhere on the internet now. You can use this to refer to external script for your widget.
For example, in our case the reference will be made as:
<script src="https://googledrive.com/host/0C4d6Av78BLPEfMUJWER9gtzdJdkE"></script>

If you find information here useful, please don't forget to 'share'. 'Like' my Facebook page and stay connected with trending topics here.


Image Courtesy: Google Images Search



Tuesday, February 11, 2014

jQuery powered Multiple Comment Box Tabs

I wanted to have tabbed comment feature on my website. At present, you may find many plugins and widgets for both Blogger and Wordpress blogs. I googled a lot then, but couldn't find anywhere codes for the tabbed commenting system that I wanted. Here is what I did for my blog for providing multiple commenting system. The code is simple and easy to get running.