Tuesday, 29 September 2015

How to centre-align the sharing-icons from AddThis in Blogger

This article shows how to get and then centre-align the row of sharing items that you can get from AddThis (and it's likely that a similar technique applies to sharing buttons from other services like ShareThis, too).



If you think that Blogger's own social sharing buttons a just a bit too small and difficult position, then you may decide to use a service like AddThis to generate buttons that are more elegant all round.

Signing up with AddThis is easy: just log in to your Blogger account, and in a separate tab open up AddThis.com. Choose Create Account, and then Continue with Google. This links your Google account and your AddThis account, and is the easiest approach - but there are other options too, like creating your account with your Facebook or Twitter accounts, or even just signing up the old fashioned way with your email address.

Once you have signed up and chosen a plan (personally I just the free "Basic" plan), you need to actually install the AddThis buttons on your site. To do this:
  • Select one or more sets of sharing buttons (from the options available to your account type),
  • Choose the settings which apply to that set of buttons
  • Choose Activate (button in the bottom right corner of the setting screen), and
  • Install the code that AddThis gave you into your blog.

Installing the code that AddThis gave you is pretty much like installing any other piece of code.   Typically the code you have to install has two parts:

For the piece that says:
Step 1: Add the following code to the <body> of your website.
Search for "<body"  (note:  no closing angle-bracket because some templates have extra instructions in there), and then put the code from AddThis after the angle bracket that goes with the <body


For the piece that says:
Step 2: Paste this code into whichever page you would like this tool to show up.
Find the location in your template that you would like the gadget (eg an HTM gadget, or inside the post statement itself - read more about the options), and copy and paste the relevant code from AddThis.




But it's not in the right place.

If you install the code as is from AddThis, you will find that the row of sharing buttons is pretty tightly linked up with the rest of the page, and left-aligned.   Fortunately this is easy to change.


How to centre (or right align) rows of buttons from AddThis 

To put the set of sharing buttons from AddThis at the middle of the page, you need to surround the 2nd piece of code from AddThis with another Div statement, like the one in bold below:
<div style = 'width:100%; text-align: center; margin-bottom:3em; margin-top:2em;'><!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox"></div>
</div>
The exact details to use depend on how exactly you want to set up your sharing-bar form AddThis.  I wanted it to be centre-aligned on one of my sites, with some extra white space above and below, so I used these commands:

  • width:100%  -  says to use all of the page-width in deciding where to put the sharing bar  (by detfault, it would just use the width of the sharing bar itself
  • text-align: centre   -   means that he bar will be put in the middle
  • margin-bottom and margin-top   put some extra space above and below the gadget, so it sticks out more-so.


But you may use a different approach, depending on what your blog is trying to achieve.

What your readers see

Visitors using a web-browsers

Will see your AddThis buttons, as you defined them

Readers who subscribe to your blog's RSS feed

Will not see your blog's AddThis sharing buttons, unless they happen to click through from their feed-reader to your blog.

Readers who follow-by-email 

Will not see your standard social sharing buttons at all, unless they visit your site.   (AddThis does have some email newsletter buttons, but these don't automatically go into emails generated from Blogger).


Is it worth it?

For what it's worth, I recently made the change from custom sharing buttons that I'd made myself to classier looking ones from AddThis, and saw quite a jump (50% or more) in the number of social shares, across all my sites.

YMMY, of course.



Related Articles

Installing 3rd party code into Blogger

Using Div statements to control layout

Friday, 25 September 2015

Notes on Linux/Xor.DDoS


In this post we'll be focusing on a certain kind of malware: Linux/Xor.DDoS (also known as DDoS.XOR or Xorddos). As usual, we'll break the post down in several points:

Background
Diagnosis
Analysis
Disinfection
Prevention
Conclusion

The variant discussed in this blog post is an older variant, so certain infection mechanisms may have changed, as well as C&C's. The point of this post is to familiarize yourself with ELF malware in a better way - how to diagnose, analyse, remove and finally prevent malware from infecting your Linux machines. A lot of malware is going around and it's not (all) exclusively for Windows machines.



Background
You may have heard about Linux/Xor.DDoS already, a Linux Trojan with rootkit capabilities (belonging to the category of 'ELF malware'). What exactly is an ELF file? According to Wikipedia:

In computing, the Executable and Linkable Format (ELF, formerly called Extensible Linking Format) is a common standard file format for executables, object code, shared libraries, and core dumps.
Source
In other words: ELF is to Linux as PE (.exe, .com, .scr, ...) is to Windows and Mach-O to OS X.

There's a nice mini poster available by Corkami as well:

(Source)















More information about the ELF format can also be found at the Resources section.

If you haven't heard about Linux/Xor.DDoS itself already, be sure to read the initial post by MalwareMustDie uncovering this malware:
Fuzzy reversing a new China ELF "Linux/XOR.DDoS"

In short: Xor.DDoS is a multi-platform, polymorphic malware for Linux OS and its ultimate goal is to DDoS other machines. The name Xor.DDoS stems from the heavy usage of XOR encryption in both malware and network communication to the C&Cs (command and control servers).

There have been other write-ups about this malware as well, which will be mentioned throughout this article or referenced in the Resources section.



Diagnosis
How do you know you're infected with Xor.DDoS?

First and foremost (and obviously), you'll be conducting DDoS attacks from your machine(s) to targets chosen by the malware authors.

Sending of large SYN packets (Source)








You may use netstat to print any current network/internet connections. Use tcpdump to get a more detailed analysis of which packets you are sending out.


Secondly, another indication is seeing processes running with random names and sudden new executable files created in /etc/init.d/ or /usr/bin/ (see example below). New entries will be/are added to your crontab as well (/etc/crontab).

Malware running and its related files






















You may use any command based on top or on ps to check for running malicious processes. We will see more in the Disinfection part of this blog post.

Thirdly, if you are running the standard OpenSSH server you may see an unauthorised but successful login and immediate logout afterwards.
(Source)








These symptoms should be very clear, even more so if you've already implemented several measures to protect yourself from potential intruders. If not, then it'll be harder to track the infection origin as well. (but more often than not the SSH credentials of the root users are brute forced.)

To ensure your machines will not get pwned, be sure to read the Prevention part of this blog post.



Analysis
First off, we have to identify how the malware entered the system. Usually, a weak root password is used (like admin or 123456, see here for a list of tried passwords. Note: huge .txt file!) or the attackers are brute forcing their way in. (brute forcing the SSH credentials of the root user) Another, but less common possibility, is exploiting a vulnerable service that you have running (Apache for example).

This figure is an excellent visual representation on how it all happens:

(Source)

























This variant copies itself over to /lib/libgcc.so, then creates a copy in /etc/init.d and a symbolic link to /usr/bin. Afterwards a new cron script is created and added to the crontab.

We will now take a look at one of the samples created - named bmtsfnlgxu.
(SHA1: b34b6f0ec42a0153c043b0665ec47bf6e5aac894)

Easiest way on Linux is to just use the "file" command:




We can see it's an ELF 32-bit executable for i386 - and it's not stripped.

Why is that last part important? strip allows you to remove symbols and sections from choosen files, which in turn makes it harder to reverse engineer (disassemble) as well. In this case, the file doesn't seem to be stripped, great! For example, we can see the source files and get an idea of what this malware does:
(this will also be shown later on in the video below, using IDA)
















Moving on, we will start by using readelf for some further investigation of the file. We know, thanks to the file command, it's an ELF 32-bit executable for i386. Using readelf and parameter -h we will be able to gather more information:

















This gives us more information already, for example; the magic (7F 45 4C 46 for ELF files, 4D 5A for MZ files)  2's complement, little endian,  the exact type of the file (an executable; other types for ELF files may be a relocatable file, a shared object, a core file or processor specific) but most importantly here being the Entry point address, or the start of the program.

In regards to readelf, using parameter -a we can dump a ton of information, you can find the output of this command on our malware on Pastebin: Xor.DDoS - "readelf -a" output

Note that VirusTotal has added (since November 2014) detailed ELF information in reports as well, which is more or less similar to readelf's output.

To disassemble the file, we can use objdump which allows us to disassemble only those sections which are expected to contain instructions (-d parameter) or to disassemble the contents of all sections (-D parameter).


However, to dive a bit deeper into the malware code, we will be using IDA, a multi-processor disassembler and debugger and Radare, a well-known (portable) reversing framework. Note that it will still be a quick glance, as MalwareMustDie has already reported extensively  about it as well [1][2][3][4]. Note also that it's always a good idea to analyse malware in a virtual environment (VM).

We will be using both tools on Windows, but you can just as easily run them on Linux or Mac.

I've made an instruction video on how to use IDA Pro Free to take a quick peek into the file discussed:


Download IDA Pro Free for Windows from here. If you're interested in working more with IDA, there's a handy list of IDA plugins available here.



... And just the same for Radare, where we will discover a bit more - namely the C&C of the malware:


Download radare2 for Windows from here. More documentation about Radare can be found here. There's also a handy cheat sheet available here.

Note that the Xor.DDoS variant discussed in this blog uses 2 XOR keys for its (network) communication, they are the following:

  • BB2FA36AAA9541F0
  • ECB6D3479AC3823F


If you like GUIs, then I have another useful utility: ELFparser. It will perform a scoring based on several factors, such as shell commands, HTTP functionality and process manipulation. For example, for our file:











You can see it's scored pretty highly. I wonder what it has to say about the hardcoded IP addresses..:

You can also see 8.8.8.8, Google's DNS server
and likely used to resolve the C&C domains




















Great, it was able to extract our C&C servers:
103.25.9.228 - VirusTotal - IPvoid - DomainTools (whois)
103.25.9.229 - VirusTotal - IPvoid - DomainTools (whois)

Using ELFparser you can also look at the ELF header, sections, but also all of its capabilities like Information Gathering and Network Functions for example. It's a handy second-opinion tool.

Finally, one last tool which should not be missed when analysing ELF files: a sandbox. We will be using detux, a multiplatform Linux sandbox.

Connections to wangzongfacai.com and dsaj2a1.org














You have Network Analysis (IPs connected and DNS queries) and Static Analysis (Elf Info and Strings). In our example we have connections to wangzongfacai.com, not an unfamiliar domain. View the complete report made by Detux on our file here.

It's worth noting that several months ago, I already sent a file to Detux (and VirusTotal) which yielded similar results:

3000uc.com, another familiar player - and again dsaj2aX










Detux report of that file here. When I sent the latter file to VirusTotal several months ago, it only had 12 detections, after re-submitting it had 19 detections. That's better but we're still not there.
Just a visual representation of detection difference. Read this for info.















You may find an overview of all gathered files as well as most common/recurring domains and their IPs they connect to/download from here, available via AlienVault's OTX.

That's it for our Analysis section, let's move on to Disinfection.



Disinfection
Most importantly, you'd of course like to remove/disinfect this malware completely. Some pointers:

  • Identify malicious processes: run ps ef (ps stands for process status) to see which processes are running. Alternatively, you can use top or again ps with other parameters, for example ps ej or ps aux for a more complete, human readable table. Look for processes with random names; in our example it started with S90 and random letters afterwards, linked to files with all random names, as is the case in our example malware named bmtsfnlgxu.

    Once you've identified the malicious process(es), you can use the following command to find related files as well: for pid in $(ps -C -o pid=); do ls -la /proc/$pid/fd; done
    Where is the name of the suspicious process. This command will display any open, related files. For example, for bmtsfnlgxu it would be:
    for pid in $(ps -C bmtsfnlgxu -o pid=); do ls -la /proc/$pid/fd; done


  • Identify malicious files: look for newly created files in /etc/init.d/, /boot/ and /usr/bin/. Again, look for files with random names. You may also use the command ls -lat | head to view recently changed files.

    Check your crontab (/etc/crontab). Delete the malicious cron jobs, more specifically the cron.hourly jobs and in the case of Xor.DDoS they will be the following:

    */3 * * * * root /etc/cron.hourly/cron.sh
    */3 * * * * root /etc/cron.hourly/udev.sh

    Delete these two lines from your crontab. Don't forget to save. Delete the related files, located in /etc/cron.hourly. In our case, their content was as follows:

    cron.sh


         udev.sh





As said earlier, delete these files manually, as well as the file(s) mentioned in the scripts. (in this case: /lib/libgcc.so.bak, /lib/libgcc.so and /lib/libgcc4.4.so.) Note that these files are not related to GCC's runtime library and thus can be safely deleted. It's just another way how the malware tries to hide itself.

Also double-check there are no malicious files or scripts in /etc/rc.d. If so, remove them as well.


  • Stop and kill malicious processes: identify the parent process; usually it will be the one consuming the most CPU (which you can verify using any of the earlier commands, top being the easiest). Firstly, be sure to stop the parent process and wait for the child processes to die. Use the command: kill -STOP $pid

    When the child processes are dead, kill the parent by using: kill -9 $pid
    Note:
    in case you see any other malicious processes, go through the last 2 commands again.

  • Delete any leftover malicious files: locations where the malware may reside have been indicated before, but to be complete:

    / (root directory, in rare cases)
    /bin/
    /boot/
    /etc/init.d/
    /etc/rc.d
    /etc/rcX.d (where X is a number)
    /lib/
    /lib/udev/
    /sbin/
    /tmp/
    /usr/bin/

That's it. Some additional tips and tricks: 
  • Use rm -rf to permanently remove a file. Be careful with this command.
  • Having troubles removing a file? Are you root? If not, try killing a process or deleting a file using root by prepending sudo before your command. For example: sudo kill -STOP $pid
  • Malicious process keeps coming back? Go over the steps again, but this time note down where the malware resides. Make that directory and its files unmodifiable by making use of the chattr command. For example, malware is being recreated in /usr/bin/. Use the command: chattr -R +i /usr/bin/ Then, stop the parent, wait for the children to die and kill the parent. Remove the files. Don't forget to use chattr again after you cleaned the infection. (in our example: chattr -R -i /usr/bin/)

    It's also possible the malware is temporarily storing files into /tmp/ while you are trying to kill its processes. When that happens, use the same chattr command on the /tmp/ directory and start over. If you are in doubt, use that chattr command on all aforementioned directories and start over. Very important: do not forget to use chattr -R -i on them afterwards!
  • In rare cases, the attacker may still be connected to your box. If possible, cut the internet connection and go over the disinfection steps. If this is not possible, firstly stop SSH by entering the command:
    sudo /etc/init.d/ssh stop

    Then, use iptables to drop any connection to the IPs the malware is connecting to (use netstat for example, see also Diagnosis) and to drop any connection from the attacker or cybercriminal. How to do this:

    In our example, we learned that our C&C's were 103.25.9.228 and 103.25.9.229. Thus, type or copy/paste these 2 commands:
    iptables -A OUTPUT -d 103.25.9.228 -j DROP
    iptables -A OUTPUT -d 103.25.9.229 -j DROP


    To block connection(s) from the attacker (you can find the attacker's IP using netstat for example):
    iptables -A INPUT -s $attackerIP -j DROP

    Don't forget to save your freshly created iptables rules by using the command
    /etc/init.d/iptables save

    Afterwards, change all passwords. (SSH, your user, root)

Best case scenario here is obviously:

  • restoring from a backup 
  • if the machine is virtual, restore to a previous snapshot
When you have either of these available, don't forget to change all passwords afterwards to prevent re-infection - and patch your machine(s)!

Some Xor.DDoS variants may also incorporate a rootkit. In that case, hope you have a "best case scenario" available to you. Once a box is fully compromised, it may be hard to reinstate it back to normal or its original state.

For double-checking for rootkits and other malware, you may want to check out chkrootkit or alternatively, rkhunter. Additionally, you may download and install an antivirus, for example ClamAV.

If you perform manual clean-up as indicated above and have confirmed all is in order again, you can install ClamAV and perform an extra scan to be sure. Better be safe than sorry. Then, follow the prevention tips below to stay safe.



Prevention
  • Use strong passwords for SSH or use keys instead of passwords for authentication. You can read how to do that here. In the unlikely event of you not needing SSH to a particular machine, disable it on that machine by:
    sudo apt-get remove openssh-server


    To disable it from starting up you can use:
    update-rc.d -f ssh remove
  • Don't open the incoming SSH port (default 22) to ANY, but rather restrict it to trusted IP addresses.
  • For more information about safely using SSH, see: SSH: Best practices
  • Use a strong firewall. In Linux there are many options, iptables is a solid choice. A good basic iptables howto can be found here. In a network or if you need to protect several machines, you may want to consider a seperate hardware appliance as your firewall/UTM/... of choice.
  • Iptables can do a very decent job once properly configured. In case you want to do less manual work, I advise to check out sshguard or artillery. Both can monitor and alert you when something funky happens. In the context of our blog post, it also looks for & protects against SSH bruteforce attempts. Another application to consider is fail2ban. An additional tool is snort. For more information about these tools, refer to their pages.
  • Consider using SELinux. Security-Enhanced Linux is a compulsory access control security mechanism provided in the kernel.

  • Consider locking down cron jobs to only certain users. To deny all users from using cron you can use:
    echo ALL >>/etc/cron.deny
  • Consider disabling remote root login. Read how to do that here.
  • If you browse a lot, consider using NoScript as well.
  • Keep your software and applications up-to-date, as on any system.
  • Consider installing an antivirus as second opinion or at least as an additional layer. This is not a necessity but may come in handy. I recommend ClamAV.
  • Don't forget to protect other appliances that may be running on *nix systems, for example your router (and nowadays, IoT devices). Upgrade the firmware as soon as possible and change the default root/admin password(s). Install updates/patches for your particular firewall/UTM/... as well.
  • For even more (general) tips on hardening your Linux system (not against Xor.DDoS in particular):
    20 Linux Server Hardening Security Tips




Conclusion
Don't be fooled: Linux malware very much exists and starts to become more prevalent. Other prevalent Linux malware nowadays is:

  • Every ELF malware made by the ChinaZ actor or group (Linux/ChinaZ.DDoS, Linux/Kluh, ...)
  • Linux/Aes.DDoS (Dofloo, MrBlack)
  • Linux/Bash0day (Shellshock, Bashdoor)
  • Linux/BillGates (Gates.B)
  • Linux/Elknot (DnsAmp)
  • Linux/GoARM (Ramgo, Goram)
  • Linux/IptabLes and Linux/IptabLex


Note that this list is not complete and new ELF malware may pop up every day. (it's not a question of if, but when it will pop up) You can find a list of (interesting) Linux malware here.

Hopefully you have learned new things along the way of this blog post. For any specific questions, don't hesitate to leave a comment or contact me on Twitter: @bartblaze

To conclude this blog post, some acknowledgements and resources/references:

Acknowledgements

My colleague from Panda France, Julien Gourlaouen for informing me about this incident.

Everyone who helped, helps and will help in battling creators of ELF malware, in particular @MalwareMustDie for their excellent research and increasing awareness about these threats.

Last but not least, thank you for reading my blog post. 


Resources

AlienVault - Xor.DDoS hashes, IPs and domains (see also related pulses)
Avast -  Linux DDoS Trojan hiding itself with an embedded rootkit
Cisco -  Threat Spotlight: SSHPsychos
FireEye - Anatomy of a Brute Force Campaign: The Story of Hee Thai Limited
KernelMode - Linux/Xor.DDoS (samples)
KernelMode - List of Linux Malware
MalwareMustDie - Fuzzy reversing a new China ELF "Linux/XOR.DDoS"
MalwareMustDie - Linux/XorDDoS infection incident report (CNC: HOSTASA.ORG)
MalwareMustDie - A bad Shellshock & Linux/XOR.DDoS CNC "under the hood"
MalwareMustDie - Polymorphic in ELF malware: Linux/Xor.DDOS
Yale - ELF Format (PDF)

Tuesday, 22 September 2015

5 Best Popular Posts Widgets for Blogger

If you're using Blogger as the platform for your personal or business blog, you're probably looking for ways to customize it and make it your own. This way, you'll make your webpages unique and eye-catching and ensure they'll stand out from the many other pages on the internet. You'll also grab the attention of your target market, encourage them to browse through your blog and become your loyal readers and followers.

Fortunately, there are lots of ways to personalize your Blogger blog, and one of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it in your blog easy.
popular posts widget for blogger

Adding the Popular Posts Widget for Blogger

Just click on your blog title, access the "Layout" menu, click "Add a Gadget" and choose "Popular Posts". A window will appear asking you to configure the widget by choosing which posts you'll feature (e.g. those that were most viewed in the past 7 days or 30 days or from the beginning of your blog). You'll also be asked to choose how many posts you'll feature in your Popular Posts section and select if you'll show the post title only or along with the image thumbnail and/or the snippet. (Remember that each widget style has different requirements, so follow the styles and instructions carefully to find out if you need the snippet and image thumbnail or not).

Configuring Popular Posts Widget for Blogger

Once you've followed these instructions, you'll get to see the basic version of the Popular Posts Widget for Blogger in your blog. You can stick with this if it matches your blog design but, if it sticks out like a sore thumb or doesn't suit your taste, there's no need to fret since you can personalize it. You can choose from the following styles - see the demo blog:

Popular Posts Style 1 - Box within a box

This is an interesting widget style since it uses your snippet and image thumbnail in a unique way. Your snippet is written in opaque text and placed in a small transparent box. This, in turn, is placed in a bigger rectangular box, wherein your image thumbnail is used as a background. Choosing this Popular Posts Widget for Blogger can be a great option if you want to brighten up your blog and grab the attention of readers with your colorful photos.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul{margin:0;padding:0;}.sidebar .PopularPosts ul li{list-style:none !important;padding:0 !important;margin-bottom:10px;}.sidebar .PopularPosts .item-thumbnail{height:190px;margin:0;overflow:hidden;width:100%;}.sidebar .PopularPosts .item-title{position: relative;}.sidebar .PopularPosts img{height:auto;width:100%;padding:0;}.sidebar .PopularPosts .item-title a{color: #FFFFFF;font:20px Oswald;text-transform:uppercase;padding:10px;position:absolute;right:0;left:0px;margin:0px auto;text-align:center;text-decoration:none;top:40px;width:60%;height:26px;overflow:hidden;z-index:2;}
.sidebar .PopularPosts .item-snippet{background:rgba(0, 0, 0, 0.35);border-top:6px solid rgba(0, 0, 0, 0.1);border-bottom:6px solid rgba(0, 0, 0, 0.1);color:#FFFFFF;left:0px;right:0px;margin:0px auto;padding:65px 10px 10px;position:absolute;font:13px 'Times New Roman',Times,FreeSerif,serif;text-align:center;top:35px;width:60%;z-index:1;}.sidebar .PopularPosts .item-content{position:relative;}
</style>

Popular Posts Style 2 - Large thumbnails with small post titles underneath

This uses the same code as the basic Blogger Popular Posts Widget with a few tweaks. Popularized by well-known blogs, this style is eye-catching because it focuses on pictures, which don't only summarize the posts' content but also add visual drama to the entire page. This is particularly useful for blogs that focus on clothes, makeup, art and other topics that highly depend on visual presentation to better express ideas.
popular posts widget for blogger
CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{width:100%;list-style:none !important;padding:0 !important;margin-bottom:20px;position:relative;border:0;text-align:center;}.sidebar .PopularPosts .item-thumbnail a{clip: auto;display:block;height:auto;height:120px;}.sidebar .PopularPosts .item-thumbnail{width:100%;height:120px;overflow:hidden;position:relative;margin-bottom:15px;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0);border-bottom:29px solid #fff;border-left:29px solid transparent;border-right:29px solid transparent;bottom:0px;content:&quot;&quot;;height:0;width:0px;left:0px;right:0px;margin-left:auto;margin-right:auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail:after{color:#000;content:counter(popularcount, decimal);counter-increment:popularcount;font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;list-style-type:none;position:absolute;bottom:0;margin:0px auto;left:0px;right:0px;z-index:4;}.sidebar .PopularPosts .item-thumbnail img{position:relative;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-title{font:15px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;margin:0px auto;padding-bottom:10px;border-bottom:1px solid #000;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{padding:10px 15px;font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}
</style>

Popular Posts Style 3 - Colorful boxes

If your blog needs a pop of color, this is the right choice for you. This widget style presents your Popular Posts in several boxes that feature a thumbnail image and have bright, eye-catching shades like light green, ocher yellow and vivid orange. Each box has a different color, and you can add up to four boxes.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul{padding:0;margin:0;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:130px;height:130px;border-right:5px solid #fff;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail img{position:relative;height:auto;width:100%;padding:0;}.sidebar .PopularPosts ul li{float:left;margin-bottom:5px;max-height:130px;min-width:250px;overflow:hidden;}.sidebar .PopularPosts ul li:first-child{background:#D9EDF7;}.sidebar .PopularPosts ul li:first-child + li{background:#F2DEDE;}.sidebar .PopularPosts ul li:first-child + li + li{background:#DFF0D8;}.sidebar .PopularPosts ul li:first-child + li + li + li{background:#FFEEBC;}.sidebar .PopularPosts ul li:first-child + li + li + li + li{background:#E0E0E0;}.sidebar .PopularPosts .item-title{font:13px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;padding:10px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;padding-right:5px;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px!important;}
</style>

Popular Posts Style 4 - Grid layout

Just like the large-picture widget style, the grid layout is an excellent option if you want to showcase your pictures or if your blog depends on visual information. However, the title of your posts won't be included in the layout, so readers will have to hover their mouses on the images to read the titles.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul{padding:0;}.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;opacity:0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%;}.sidebar .PopularPosts ul li{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0px !important;width:49%;max-height:120px;opacity:0.4;overflow:hidden;float:left;margin-bottom:2%;-webkit-transition: all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}.sidebar .PopularPosts ul li:hover{opacity:1;}.sidebar .PopularPosts .item-thumbnail{margin:0;width:100%;line-height:0;}.sidebar .PopularPosts ul li img {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility:visible;opacity:1;}.sidebar .PopularPosts .item-title a{color:#fff;background:rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration:none;position:absolute;text-align:center;font:13px &#39;Oswald&#39;, sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 10px;opacity:0;visibility:hidden;}.sidebar .PopularPosts .item-snippet{display:none;}
</style>

Popular Posts Style 5 - Numbered posts

If you love numbered lists, or if you'd like to make your blog more organized, this can be the perfect option. By using the code for this widget style, your Popular Posts will be automatically numbered and will feature clean, minimalistic boxes that include your snippet and image thumbnail.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{float:left;max-height:130px;min-width:250px;position:relative;}.sidebar .PopularPosts .item-thumbnail::after{color:rgba(255,255,255, 0.63);content:counter(popularcount, decimal);counter-increment: popularcount;font:70px &#39;Oswald&#39;, sans-serif;list-style-type:none;position:absolute;left:5px;top:-5px;z-index:4;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0.3);bottom:0px;content:&quot;&quot;;height:100px;width:100px;left:0px;right:0px;margin:0px auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:100px;height:100px;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail:hover:before{display:none;}.sidebar .PopularPosts .item-thumbnail img{position:relative;padding-right:0px !important;height:auto;width:100%;}.sidebar .PopularPosts .item-title{font:13px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;padding:0px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content{padding:5px 0px;border-bottom:1px dotted #dedede;overflow:hidden;height:100px;position:relative;}
</style>
These are just some of the widget styles you can choose from. When you've picked a style you want, make sure to copy its CSS code. Once you do so, go to your blog, click "Theme" on the left side and select "Edit HTML" under the template preview.

These next codes need to be pasted above the "</head>" or "</body>" tags, so check the instruction to know exactly where you need to put the code.

Adding the CSS

When the template editor has opened, click anywhere inside the code area and hit CTRL + F or Command F to search the following tag:
</head>
Just ABOVE the </head> tag, copy-paste the CSS code of one of the styles above.


Important: If the Popular Posts widget is located in the footer of your blog, remove the .sidebar class found in the CSS code in order to make it work.

Please note that most of the styles are using the 'Oswald' font which you need to add to your template's code as well.

So, search for this tag:
<head>
... and just BELOW it, add this line:
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Adding the JavaScript

These styles also require using a script in order to resize the popular posts image / thumbnail and trim the post snippet and title. To add the JavaScript code, search the </body> tag and paste the following script just above it:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>
Note: if you have already the jQuery library in your template, remove the line in red.

After you have added all the codes in the right place, press the "Save theme" button to save the changes.

That's it!

The five Popular Posts widgets for Blogger featured today are all great solutions for adding a popular post section to your blog. They all have different appearance for determining what makes a post popular, but the end result is the same: visitors are always one click away from your best content. Try some of these styles, find your favorite, and see how it impacts the performance of your blog.

Monday, 21 September 2015

Stunt Rally 2.6 and Irrlamb 0.2

Stunt Rally 2.6 has been released, with new features including pacenotes (i.e. corner speed/severity hints) and a rewritten sound system with reverberation (changelog).

Stunt Rally is a sandbox racing game with a huge number of tracks (172 in 2.6) and lots of cars. It was originally forked from VDrift and features Ogre3D as a graphics engine instead of the custom (and less sophisticated) graphics engine in VDrift.

A video is worth a thousand pictures and a picture a thousand words so, instead of me writing a million of those, I invite you to check out the gameplay in the video that accompanied the release:


Also recently updated is Irrlamb. Those with incredibly good memories will recall this physics-based game originally appearing many years ago. I originally wrote about Irrlamb over 8 years ago on Free Gamer, and the previous release (0.1.1) is over 5 years old if I'm not mistaken (it is hard to check since things have moved on since then i.e. Google Code where its development was originally hosted).

This release adds new graphical capabilities, new levels, gamepad support and various fixes - see the announcement for more details.

I'll also write a really lengthy... wait a minute! Let's link a video instead. ;)


Sunday, 20 September 2015

How to Add Border around Post Images on Blogger/Blogspot

Everybody wants their websites and it's images a bit stylish and attractive. If you wish the same there should be some style to your blog images like drop shadow or borders. In this simple tutorial we will teach you to add borders around your post images on blogger using few simple CSS Code. Let's start to add a nice look on your images having colourful borders in your web pages !

How To Add Border Around Blog Images ?


Step-1. Go to Blogger >> Template >> Edit Html
Step-2. Now search for ]]></b:skin>
Step-3. Copy and Paste the following code just above ]]></b:skin>

/*--addictofblogging.blogspot.com--*/

.post img {
border:1px solid #e3e3e3;
border-radius:10px;
padding: 10px; }
Step-4. Save the template and you are done.
Step-5. Make following changes to change style, color or size of the border.
  • Increase 1px to increase the width of border 
  • Change solid to dotted or dashed to change style of border 
  • Replace #e3e3e3 to change border color 
  • Remove border-radius: 10px; to remove the radius around the corners
We hope you liked our tutorial on adding border around post images on blogger/blogspot. If it helped you, just subscribe and like us on facebook. Enjoy !