Showing posts with label Tech. Show all posts
Showing posts with label Tech. 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



Friday, February 14, 2014

Fix your blog: Wrong Image and Description on sharing URL

I had been facing this problem for quite long. I kept overlooking. Lately, I got determined to resolve this issue. What the problem lies is, sharing URL of my blog posts on social media websites used to fetch wrong description and image. Many times, the image fetched used to be my profile picture on my website. I wanted the image fetched should be from the blog post that I was sharing. Or, in case the blog post has no image, then a default image should be there which would be fetched on sharing the URL. This is exactly what I have done. Despite of your website platform, this method works. I am sharing here the necessary code snippet. You need to copy (click on view raw and then copy) the code below, and paste on your page before </head> tag.


In the code above, just edit ‘Your-default-image-url’ and paste the URL of the default image that you would like to get fetched if your blog post doesn’t contain any image. If the blog post has images, then the URL when shared, will pick up the first image from the post.


If you find this article helpful, do share the link. If you have any queries, then leave a comment and I will reply to you. 'Like' my Facebook page and stay connected to the trending topics here. :)

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.

Thursday, November 21, 2013

The 3rd Blogoversary


It was around this time, three years back; I was in first year then. It started with enthusiasm to have my own space online, which would somewhat look closer to a website. I remember I made a website for my school when I was in class Xth as a part of my school project. Having got appreciation from my computer teacher, gradually I gained interest in web development, and always wanted to have a website for myself. What exactly my website would be all about, what contents it would have I never thought of. ‘Blogs’, I came to know of when Mr. Amitabh Bachchan started to reach people through his blog. Blogs are the medium to express yourself and connect with people. Blogs serve as an online journal, linking to other sites and news stories.

My poetic verses and story making in messages/SMS for fun and scraps on Orkut started making their space at my newly made blog at Wordpress. But me being an enthusiast for web development, and a student of computer science, I was not satisfied to work within restrictions imposed by Wordpress at that time. Wordpress has turned a bit flexible now but then it not even allowed use of iframes and external scripts. 
I came to know of an online tool which could transfer a Wordpress blog to Blogger, keeping posts and comments all intact. And that marked the start of my exposure to web development and web designing.

Wednesday, October 16, 2013

Jelly (:Happy:) Beans

Android, the most popular platform used in mobile phones, its users across the globe is increasing each day. Android is open source, and provides with maximum flexibility to its users who can tune their phones the way they want. That’s an old story now when we were limited with the options and features that the phone came packaged with. Now in era of smart phones powered with various versions of Android, mobile users have options to select what they want for themselves and can update them through the course of time. Stay updated with new features, new technology and new innovations through applications which are available in gigantic number at Google’s Play Store. Now when we mentioned of Google’s Play Store, we can’t just overlook the advantage that Android has given to application developers. To get noticed, and start earning easily, the optimistic way has been shown by Play Store which is the repository for Android Applications where mobile users can download applications of their choice. Application Developers can submit their developed applications to Play Store for other users to download. Play Store houses both premium as well as free applications.

Tuesday, March 26, 2013

An Odd Invention



Like the way OS drives hardware,
My tender heart drives my actions.
My CPU seldom pauses its function,
Clutched in multiple processes
And deadly thread synchronization.
Endured against suffocation,
Withstanding brute deadlock condition;
I envy that giant-tiny mastermind,
Fabricated into a chip
Named after Intel’s perfection.

My limbs and glands,
Constitute my local connection.
Through narrow bandwidth in my nerves
Runs protocol for communication.
In meshes, in rings, in stars or on buses,
With niggling breaks and data congestion
My dreams sail in intense versions.
Full of exclamations and interjections,
My vision surpasses
Chris Nolan’s ‘Inception’.

Procuring the imagination
Of an unmatched conviction.
With new thoughts’ propulsion
At my solitary mansion,
I head towards tranquility
Drawing my steps towards the invention.
An invention that can help you find
Eternal love for your life 
Exempted of distrust and disgust.
Aided with honesty, and upheld warmly.

And that would be my ultimate innovation;
My blow of life,
Into lives of millions & millions.



Images Courtesy : Google Images Search

Wednesday, December 19, 2012

Freaky Techy | Windows 8


Windows 8. Yeshh! 
I installed windows 8 on my beloved laptop. And she is working fine and smooth, like the creamy and flavored coffee anyone can ask for. :D 
I got to install Windows 8 last month itself. I was packed with happiness about it and thought of exploding on my blog. But I was tied mercilessly in ropes of my semester exams. Thank god, I am free now. :P
If you are being carried away in the current of ‘windows 8 is useless’, then beware, you might be getting lost somewhere. Windows 7 is no doubt one of the stable operating system developed by Microsoft. But I tell you, performance wise, keeping aspects like security against malwares, look and feel of interface, resources usage, modes of multitasking, portability and usability, integration of clouds, and there will be certainly many more other advantages as well, which even I don’t know yet, that makes Windows 8 a superior release from Microsoft.


(Click on photos to enlarge)

Monday, October 29, 2012

Frisson 2k13


Making movies admire me. I am very much influenced by some of my Facebook friends, who are making short movies. Though I don’t know the technicalities, but as a writer I could have contributed something. Never mind!

As I learnt to work in Pinnacle and After Effects(I am still learning this), I thought of working on a project that could fetch some reviews about how I have developed my ideas, and learnt to bring them into existence in my video sequences. And it came through an opportunity to make Official Teaser for forthcoming Tech cum Cultural fest in our college. Frisson is the name of our fest; it’s going to be organized in mid of February 2013. I made the video this year. :) In making of this video, I was inspired and motivated through work done by Praveen bhaiya(in year 2010) and Sadanand bhaiya(in year 2012) in making Official Video for the fest in respective years. This year, we, the third year students are in organizing committee. And so we are trying hard to make this big and large. We are trying to build a landmark that would be beyond imagination. So here is just a small beginning that I have laid from my part. Wishing for some reviews on this. :))