Pages

Showing posts with label Blog. Show all posts
Showing posts with label Blog. Show all posts

Friday, October 6, 2017

Google Blogger Usage Tips and Tricks


Here are some collections for bloggers from my pas blogger experience:



1. Adjust Right Sidebar margin width

Sometimes, the space between main body posts section and right side bar is too wide. You may want to change it from 40px to 10 px. Here is the code I found from here:

#sidebar-right-1{
position
: relative;
left
: 40px !important;
}
Add the code to Blogger Them Designer - Advanced - Add CSS section as show below.





2. Add youtube Playlist into blogger


2.1 Generate html code from your youtube playlist





2.2 Add html code into your Blogger layout
It is best to put code between <center> and </center> to get better center location in your page.


<center><iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLg7bL1bMpwPXUwb-BsLKolf42uWa0_nfY" frameborder="0" allowfullscreen></iframe></center>

3. Add Third Party Domain 

Blogger Domain Settings

GoDaddy CNAME Setting



4. Redirect Blogspot Site from One to Another
During migrating my site from 51sec.blogspot.com to 91sec.blogspot.com, I have found following ways to do redirection from one blogspot site to another.  The code will be inserted between <head> and </head>

a.  This is current way I am using and found it is best so far.
<script>
var oldURL = "51sec.blogspot.com";
var newURL = "91sec.blogspot.com";
var url = location.href;
var newURL = url.replace(document.domain,newURL);
window.location = newURL
</script>

b. It will only redirect all posts or pages to the homepage site, not passing url parameters.
<meta content='0;url=http://91sec.blogspot.com' http-equiv='refresh'/>

c.  The code works on some of URLs but some were got messed up.
<script type='text/javascript'>
  var d='<data:blog.url/>';
  d=d.replace(/.*\/\/[^\/]*/,'');
  location.href='http://91sec.blogspot.com'+d;
</script>




References:

Thursday, September 28, 2017

Troubleshooting Wordpress Out of memory on Free Tier AWS Linux Issue

All-In-One WP Migration
Redhat Openshift made a change from Openshift online 2 to online 3. Deadline is end of Sep 2017. My blog www.51sec.org which was hosted at Red Hat Openshift Online 2 environment for last a couple of years has been migrated from Redhat Openshift Platform to AWS Linux Free Tier a couple of days ago before deadline. At the beginning, migration process was easy and smooth since I am keeping same domain 51sec.org.

Also Wordpress plug-in "All-in-One WP Migration" helped a lot during this process. Whole blog was exported to a 120M package. Unfortunately I still got a problem when access www.51sec.org site later which is running on AWS Linux instance.


Symptoms

At second day after migration, I got my monitis alert email to say my site is down.

After rebooted server website came up right away. But it happened again after a couple of hours. I know it must be something wrong. I am starting to dig in the logs. Here is what I found from logs:

[root@ip-10-10-0-50 httpd]# tail /var/log/httpd/error_log -n 50

mmap() failed: [12] Cannot allocate memory

mmap() failed: [12] Cannot allocate memory

mmap() failed: [12] Cannot allocate memory

mmap() failed: [12] Cannot allocate memory

mmap() failed: [12] Cannot allocate memory

[Thu Sep 28 09:29:37.890816 2017] [mpm_prefork:notice] [pid 2853] AH00169: caught SIGTERM, shutting down
[Thu Sep 28 09:29:38.196735 2017] [suexec:notice] [pid 3692] AH01232: suEXEC mechanism enabled (wrapper: /usr/sbin/suexec)
[Thu Sep 28 09:29:38.217716 2017] [lbmethod_heartbeat:notice] [pid 3693] AH02282: No slotmem from mod_heartmonitor
[Thu Sep 28 09:29:38.312526 2017] [mpm_prefork:notice] [pid 3693] AH00163: Apache/2.4.27 (Amazon) PHP/7.0.21 configured -- resuming normal operations
[Thu Sep 28 09:29:38.312545 2017] [core:notice] [pid 3693] AH00094: Command line: '/usr/sbin/httpd'

mmap() failed: [12] Cannot allocate memory
mmap() failed: [12]
Cannot allocate memory
[Thu Sep 28 11:12:03.262604 2017] [:error] [pid 4278] [client 190.94.81.146:4505] PHP Fatal error:  Out of memory (allocated 25165824) (tried to allocate 65536 bytes) in /var/www/html/wp-content/themes/startup-blog/functions.php on line 132, referer: http://www.51sec.org/2016/01/cisco-switch-2960-3560-password-recovery-procedures/
[Thu Sep 28 11:12:03.262669 2017] [:error] [pid 4280] [client 190.94.81.146:4504] PHP Fatal error: Out of memory (allocated 25165824) (tried to allocate 65536 bytes) in /var/www/html/wp-content/themes/startup-blog/functions.php on line 132, referer: http://www.51sec.org/2016/01/cisco-switch-2960-3560-password-recovery-procedures/
[Thu Sep 28 11:12:04.397148 2017] [:error] [pid 4277] [client 66.249.89.16:36770] PHP Fatal error: Out of memory (allocated 20971520) (tried to allocate 32768 bytes) in /var/www/html/wp-content/plugins/jetpack/modules/sharedaddy/sharing.php on line 224

mmap() failed: [12] Cannot allocate memory

mmap() failed: [12] Cannot allocate memory


PHP is out of memory. I got many suggestions from Internet. Here are some methods I took.


Solution one

My temporary solution one was to set up a schedule to restart httpd service every two hours using CRON.

[root@ip-10-10-0-50 /]# cat /etc/crontab 
SHELL=/bin/bash
PATH=/sbin:/bin:/usr/sbin:/usr/bin
MAILTO=root
HOME=/

# For details see man 4 crontabs

# Example of job definition:
# .---------------- minute (0 - 59)
# | .------------- hour (0 - 23)
# | | .---------- day of month (1 - 31)
# | | | .------- month (1 - 12) OR jan,feb,mar,apr ...
# | | | | .---- day of week (0 - 6) (Sunday=0 or 7) OR sun,mon,tue,wed,thu,fri,sat
# | | | | |
# * * * * * user-name command to be executed
2 */2 * * * root sudo service httpd restart && curl -sm 30 k.wdt.io/johnyan.ca@gmail.com/reboot_httpd?c=0_*/2_*_*_*
[root@ip-10-10-0-50 /]#


I used https://crontab.guru service to get proper command  and wdt.io to get alert email for cron jobs. It did works and helps.


[root@ip-10-10-0-50 /]#
tail /var/log/cron
Sep 28 13:00:01 ip-10-10-0-50 CROND[4990]: (root) CMD (sudo service httpd restart && curl -sm 30 k.wdt.io/johnyan.ca@gmail.com/reboot_httpd?c=0_*_*_*_*)
Sep 28 13:01:01 ip-10-10-0-50 CROND[5071]: (root) CMD (run-parts /etc/cron.hourly)
Sep 28 13:01:01 ip-10-10-0-50 run-parts(/etc/cron.hourly)[5071]: starting 0anacron
Sep 28 13:01:01 ip-10-10-0-50 run-parts(/etc/cron.hourly)[5080]: finished 0anacron
Sep 28 13:50:01 ip-10-10-0-50 crond[2864]: (*system*) RELOAD (/etc/crontab)
Sep 28 14:00:01 ip-10-10-0-50 CROND[5279]: (root) CMD (sudo service httpd restart && curl -sm 30 k.wdt.io/johnyan.ca@gmail.com/reboot_httpd?c=0_*/2_*_*_*)
Sep 28 14:01:01 ip-10-10-0-50 CROND[5344]: (root) CMD (run-parts /etc/cron.hourly)
Sep 28 14:01:01 ip-10-10-0-50 run-parts(/etc/cron.hourly)[5344]: starting 0anacron
Sep 28 14:01:01 ip-10-10-0-50 run-parts(/etc/cron.hourly)[5353]: finished 0anacron
Sep 28 14:19:01 ip-10-10-0-50 crond[2864]: (*system*) RELOAD (/etc/crontab)
[root@ip-10-10-0-50 /]#


From the httpd/error_log, I can see the service was shut down and resumed at scheduled time.

[root@ip-10-10-0-50 /]# tail /var/log/httpd/error_log -n 20
[root@ip-10-10-0-50 /]# tail /var/log/httpd/error_log -n 20
[Thu Sep 28 12:00:01.375912 2017] [suexec:notice] [pid 4673] AH01232: suEXEC mechanism enabled (wrapper: /usr/sbin/suexec)
[Thu Sep 28 12:00:01.402479 2017] [lbmethod_heartbeat:notice] [pid 4674] AH02282: No slotmem from mod_heartmonitor
[Thu Sep 28 12:00:01.420712 2017] [mpm_prefork:notice] [pid 4674] AH00163: Apache/2.4.27 (Amazon) PHP/7.0.21 configured -- resuming normal operations
[Thu Sep 28 12:00:01.420736 2017] [core:notice] [pid 4674] AH00094: Command line: '/usr/sbin/httpd'
[Thu Sep 28 12:39:01.020101 2017] [:error] [pid 4889] [client 45.43.101.69:59405] PHP Warning: mysqli_query(): MySQL server has gone away in /var/www/html/wp-includes/wp-db.php on line 1887, referer: http://www.51sec.org/2015/10/advanced-checkpoint-gaia-cli-commands-tips-and-tricks/
[Thu Sep 28 12:39:01.028056 2017] [:error] [pid 4889] [client 45.43.101.69:59405] PHP Warning: mysqli_query(): Error reading result set's header in /var/www/html/wp-includes/wp-db.php on line 1887, referer: http://www.51sec.org/2015/10/advanced-checkpoint-gaia-cli-commands-tips-and-tricks/
[Thu Sep 28 12:39:01.044760 2017] [:error] [pid 4756] [client 45.43.101.69:58628] PHP Warning: Error while sending QUERY packet. PID=4756 in /var/www/html/wp-includes/wp-db.php on line 1887, referer: http://www.51sec.org/2015/10/advanced-checkpoint-gaia-cli-commands-tips-and-tricks/
[Thu Sep 28 13:00:02.531359 2017] [mpm_prefork:notice] [pid 4674] AH00169: caught SIGTERM, shutting down
[Thu Sep 28 13:00:03.123712 2017] [suexec:notice] [pid 5019] AH01232: suEXEC mechanism enabled (wrapper: /usr/sbin/suexec)
[Thu Sep 28 13:00:03.145836 2017] [lbmethod_heartbeat:notice] [pid 5020] AH02282: No slotmem from mod_heartmonitor
[Thu Sep 28 13:00:03.198017 2017] [mpm_prefork:notice] [pid 5020] AH00163: Apache/2.4.27 (Amazon) PHP/7.0.21 configured -- resuming normal operations
[Thu Sep 28 13:00:03.198034 2017] [core:notice] [pid 5020] AH00094: Command line: '/usr/sbin/httpd'
[Thu Sep 28 14:00:01.734292 2017] [mpm_prefork:notice] [pid 5020] AH00169: caught SIGTERM, shutting down
[Thu Sep 28 14:00:02.141090 2017] [suexec:notice] [pid 5307] AH01232: suEXEC mechanism enabled (wrapper: /usr/sbin/suexec)
[Thu Sep 28 14:00:02.169154 2017] [lbmethod_heartbeat:notice] [pid 5308] AH02282: No slotmem from mod_heartmonitor
[Thu Sep 28 14:00:02.236204 2017] [mpm_prefork:notice] [pid 5308] AH00163: Apache/2.4.27 (Amazon) PHP/7.0.21 configured -- resuming normal operations
[Thu Sep 28 14:00:02.236230 2017] [core:notice] [pid 5308] AH00094: Command line: '/usr/sbin/httpd'


Solution Two


There are some posts mentioning some kind of attack related to XML-RPC, which can be exploited to send thousands of requests to WordPress in a short amount of time.

To recognize this attack, I did some search from the httpd access log:

[root@ip-10-10-0-50 ec2-user]# grep xmlrpc /var/log/httpd/access_log 
180.191.61.7 - - [27/Sep/2017:02:24:09 +0000] "POST /xmlrpc.php HTTP/1.1" 200 403 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1"
97.73.96.19 - - [27/Sep/2017:02:43:52 +0000] "POST /xmlrpc.php HTTP/1.1" 200 403 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1"
112.200.195.163 - - [27/Sep/2017:02:46:41 +0000] "POST /xmlrpc.php HTTP/1.1" 200 403 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1"
115.79.220.211 - - [27/Sep/2017:02:54:56 +0000] "POST /xmlrpc.php HTTP/1.1" 200 403 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1"
160.238.72.10 - - [27/Sep/2017:03:00:06 +0000] "POST /xmlrpc.php HTTP/1.1" 200 403 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1"
39.46.183.191 - - [27/Sep/2017:03:06:05 +0000] "POST /xmlrpc.php HTTP/1.1" 200 403 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1"
2.24.37.37 - - [27/Sep/2017:03:08:31 +0000] "POST /xmlrpc.php HTTP/1.1" 200 403 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1"
115.178.26.232 - - [27/Sep/2017:03:15:42 +0000] "POST /xmlrpc.php HTTP/1.1" 200 403 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1"
112.210.202.81 - - [27/Sep/2017:03:16:09 +0000] "POST /xmlrpc.php HTTP/1.1" 200 403 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1"
98.124.36.154 - - [27/Sep/2017:03:19:52 +0000] "POST /xmlrpc.php HTTP/1.1" 200 403 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1"
..........


There are thousands of similar logs like that.

Based on the post suggestion, install jetpack plug in helps to reduce this kind of attack.

The Protect function is automatically enabled. You can now see a Jetpack dashboard which also displays the Protect function as being Active. After running a couple of hours, we can see there were 47 malicious attacks blocked by Jetpack plugin.






Solution Three

After did a google online and found there are many posts to suggest change some settings on php.ini file.

Here is what I did :


[root@ip-10-10-0-50 html]# echo "<?php phpinfo(); ?>" > /var/www/html/phpinfo.php

by access http://www.51sec.org/phpinfo.php I got the php.ini's location /etc/php.ini



[root@ip-10-10-0-50 etc]# vi php.ini
; Maximum amount of memory a script may consume (128MB is Default)
; http://php.net/memory-limit
memory_limit = 256M


I also tried to increase my PHP memory limit with wp-config.php file. This file is located in /var/www/html/ directory.


[root@ip-10-10-0-50 html]# vi wp-config.php
define('WP_MEMORY_LIMIT', '256M');

Add it to the last line of the file wp-config.php.




References:



Sunday, August 13, 2017

Add a Read More button to Popular Blog Platforms

Having a read-more option in the posts can highly encourage  readers’ click-throughs and help you track your most popular entries. Adding read-more button is more than easy, this tutor post will show you how to Insert Read More Option on those popular blog websites such as Blogger, Tumblr, Weebly and WordPress.

1. Blogger


<!--more-->




2. Tumblr





The code is different from Blogger and Wordpress.

<p>[[MORE]]</p>

Note: Now at Rich text mode , Tumblr has a keyboard shortcut for the read more link. Press Command + Shift + K (Mac) or Ctrl + Shift + K (Windows), -----Keep reading---- line will be added into your cursor location.




3. Weebly

It is a little bit tricky to add read more link break into your post. You will have to create two separate Embed Code sections then add 'Read more Break' separator between. You wont be able to manually enter code into your html content of Embed Code section.




4. WordPress
Wordpress Read More code is same as blogger.

<!--more-->


Sunday, November 27, 2016

Wordpress Attitude Theme Menu Bar Customize

Attitude Theme has been used for my Wordpress site http://51sec.org. It is powerful and simple to use.

here are some introduction about this theme from its website:

"Attitude is a Simple, Clean and Responsive Retina Ready WordPress Theme which adapts automatically to your tablets and mobile devices. Theme is easily customizable with numerous theme options via Customize. Some of the highlighted options are two site layout (Narrow and Wide), 5 layouts for every post/page, 5 Page Templates, 5 widget areas, 4 custom widgets, featured slider to highlight your post/page, 11 social icons and many more. Also has custom background, header, menu, favicon, CSS, webclip icon, and logo. Supports popular plugins like Breadcrumb NavXT, WP-PageNavi and Contact Form 7. It is also translation ready. Available Translation: Traditional Chinese (Taiwan), Spanish, Norwegian (Nynorsk), German, Russian, Dutch, Italian and Danish. Get free support on http://themehorse.com/support-forum/"

In original theme, the menu bar was not placed in the right place I would like to. It located between site site logon and header image. I figured out to use some simple CSS codes to manipulate it.




1. Move it to above the header image using absolute position and 105px from the top. 


#access {
position: absolute;
width: 100%;
z-index: 100;
}

.hgroup-wrap {
background-color: #fff;
top: 0;
}
#access {
top: 105px;
}








2. Move it to top and fixed in the window even scroll the page


#access {
position: fixed;
width: 100%;
z-index: 100;
background-color: #ffffff;
}

.hgroup-wrap {
background-color: #fff;
top: 0;
}
#access {
top: 0px;
}








3. Make Menu Bar Smaller, 90% Opacity and without border

#access {
position: fixed;
width: 100%;
z-index: 100;
background-color: #ffffff;
background: rgba(255, 255, 255, 0.9);
border: 0 none;
}

.hgroup-wrap {
background-color: #fff;
top: 0;
}
#access {
top: 0px;
}


#access a {
padding-top: 10px;
height: 30px;
}
.page-title-wrap {
padding: 10px 0;
}





4. Make Submenu Touch Horizon Menu
There was a problem to click the submenu. Each time when mouse moved out horizon menu area, submenu disappeared right away. Finally I found that was because my submenu is too far from horizon menu.
margin-top: -25px brought  submenu ul to touch the menu ul and padding-top: 5px pushed the first Li 5px down.

#access {
position: fixed;
width: 100%;
z-index: 100;
background: #FFFFFF;
background: rgba(255, 255, 255, 0.9);
border: 0 none;
}

.hgroup-wrap {
background-color: #fff;
top: 0;
}
#access {
top: 0px;
}


#access a {
padding-top: 8px;
height: 26px;

}
.page-title-wrap {
padding: 8px 0;
}

#access li:hover ul {
display: block;
margin-top: -25px;
padding-top: 5px;
}





Saturday, November 19, 2016

Add “Related Links” Widgets for Your Websites and Blogs

The related posts are picked from your existing posts which has similar contents/labels/categories/tags. Some online services provide free widgets to show those related stories from your blog archive.It can under your post , or show at bottom of pages. Here are some popular websites to provide this free widget.
1. Addthis
AddThis is a social sharing tool that appears on a lot of websites. It is often displayed as a "share" button that expands to show a vast array of sharing options. Add this quickly allowed webmasters to add sharing features to their websites that fit well with the design and layout and didn't cost a ton of custom coding. The email updates from Addthis whenever there is a traffic spike on a certain page on the site or there is spike on sharing.
Addthis provides: .
  • Share Buttons
  • Follow Buttons
  • Related Posts
  • List Building
  • Link Promotion






2. Linkwithin

LinkWithin is a blog widget that appears under each post, linking to related stories from your blog archive.


The widget is free. It takes a minute to get the widget up and running on blog, no signup required!

3. Limk

Limk provides smarter content recommendations and interested in making your website visitors stay longer, and consume more of your content.


Limk is also only one I found it is working well on Weebly.com platform. Example link. You will also be able to get report how well your links have been clicked.
Limk Dashboard



4. Engageya
Engageya's Advantages:

  • Native contextual ad unit generates high traction rates and increased user engagement.
  • Technology is compatible with all languages and devices.
  • As your new advertising channel, it is an incremental revenue stream.





Reference:





Monday, November 14, 2016

Use Godaddy Domain with Openshift Apps

I have been using Openshift  to host my WordPress website www.51sec.org for a while. Domain 51sec.org was registered at GoDaddy and I was struggled with plain domain or naked domain 51sec.org not corrected pointing to my openshift App, although www.51sec.org is always working fine. Eventually after googled from Internet, I understood why and made it working . There are two different solutions, one is to use cloudflare domain services which is using flatten domain feature to achieve it. Another way is to configure Godaddy domain properly with forwarding option. Here are all steps for Godaddy configuration.


1. Openshift APP Alias Configuration

Open you openshift APP. Add www.51sec.org as your only Alias for this app.



Many people messed around this step since they think they thought plain or naked domain 51sec.org should be added too.




There are two types of error if you failed to keep only one alias www.51sec.org here when you try to use plain / naked domain to access your Openshift Apps.

  • Browsers will tell you your website page isn't working.

It has redirected you too many times. Chrome or Firefox will suggest you to try to clearing your cookies. But basically that is not the cause. Usually it caused by defined your plain / naked domain as alias in your Openshift app.



  • Browsers will open https://<plain/naked domain>/app instead of your real website.

Basically Openshift will redirect you to an not existed page https://<plain/naked domain>/app. It usually caused by DNS cache on your name service provider. You will need to wait around one hour to see if issue has been resolved.



2. GoDaddy Configuration

Log into GoDaddy account and go to GoDaddy Domain Manager dashboard You will only need to add one cname type record.

CNAME Host: WWW
Points to: 51sec-johnyan.rhcould.com
TTL: keep default value

That is enough.


Some domain provider allow you to add naked domain or allow A type record forward to a URL. But GoDaddy will not. To make my plain / naked domain 51sec.org to point to www.51sec.org, I will enable forwarding feature as shown below:

This Forwarding feature is in the same page as Domain Manager page. You just need to pull down to the bottom to see this option.

Forward to: www.51sec.org
Forward Type: Permannent (301)
Settings: Forward Only
Check Update my nameservers and DNS settings to support this change.

After above two steps, your Openshit App should start to support plain / naked domain access. It may take a while to take effect , but it will work. I found before it takes effect, your plain / naked domain might still direct to https://<plain/naked domain>/app page.

References:



Create a Sitemap Page or Table of Contents Page for Blogger

There are a couple ways to do it but many codes were using a .js file stored on google drive which is not working since early of 2016.

I have moved some .js code file to GITHUB and here are some valid links and screenshots for my blog http://91sec.blogspot.com.

1. Tabbed Sitemap Page

Demo page is here.




<div id="tabbed-toc">
<span class="loading">Loading 91sec.blogspot.com sitemap, please wait for a moment...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://91sec.blogspot.com", // Enter your blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Default thumbnail size
noThumb: "", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // Open link in new window. `false` to open in same window
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts or
//define how many recent posts are to be marked by changing the number
newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for
//the "New!" text
};
</script>
<script src="https://51sec.github.io/js/tabtoc.js" type="text/javascript"></script>
<style>
/*Sitemap */
#tabbed-toc {
width: 99%;
margin: 0 auto;
overflow: hidden !important;
position: relative;
color: #222;
border: 0;
border-top: 5px solid #FC0204;
background-color: #1D1D1D;
-webkit-transition: all 0.4s ease-in-out;
}
#tabbed-toc .loading {
display:block;
padding:5px 15px;
font:normal bold 11px Arial,Sans-Serif;
color:#FFF;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0;
padding:0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width: 24.8%;
float: left !important;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
background-color: #515050;
color: #FFF;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color: #FFFC03;
color: #222;
position: relative;
z-index: 5;
margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width: 75%;
float: right !important;
background-color: #F5F5F5;
border-left: 5px solid #FFFC03;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0; right:0; bottom:0;
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 11px;
color: #222;
line-height: 2.8em;
height: 30px;
padding: 0 10px;
text-decoration: none;
outline: none;
overflow: hidden;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color: #DBDBDB;
font-size: 10px;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:#222;
color:#FFF;
outline:none;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
background-color:#fff;
border:0 solid #888;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none !important;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left !important;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#222;
color:#ccc;
}
#tabbed-toc .toc-tabs li a.active-tab {
color:#000;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>





2. Table of Contents
This page will display all of your posts sorted by post date. You can click Labels to display only certain labeled posts. Very powerful , but loading time will take a bit longer than others.
Demo page is here.



<style scoped="" type="text/css">
#bp_toc {background:#008CDB;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Trebuchet MS';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#comments {display:none;}
</style>
<div id="bp_toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;">
</div>
<script src='https://51sec.github.io/js/tab-toc2.js' type='text/javascript'></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>






3. SiteMap Sorted by Categories

Demo page is here.


<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://www.51sec.org" style="font-size: 10px; text-decoration:none; color: #5146CD;">51 Security Solutions</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0mhEZXEZb_LGXrRF5lRZWOJ8wzzR59Vr0qYOEv9NpGvLXpcj-mzWHxT-eWnXoBnpYbvzfSviCzuYayVjxkyBe_9PbC4BFJRm8QKxzYf2C23RpDGXtYXnpExmhDgq5td2of2HGjWhcQJyO/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>









Add Dropdown Menu in Blogger Website

Here are all codes I found from Internet to display a dropdown menu on my 91sec.blogspot.com website.




1 Add the following code to Template > Customize > Advanced > Add CSS. 
This will place the code in Template > Edit HTML.

/* ----- START DROPDOWN CSS ----- */

#navigationbar {
width: 100%; /* change the width of the navigation bar */
height: 40px; /* change the height of the navigation bar */
}

#navigationcss {
margin: 0 auto;
padding: 0;
}

#navigationcss ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}

#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
color: #ffffff; /* change color of the main links */
display: block;
margin: 0;
padding: 10px 30px;  /* change the first number for the top/bottom spacing, and the second number for left/right spacing */
}

#navigationcss li a:hover, #navigationcss li a:active {
color: #69b4ff ; /* change the color of the links when hovered over */
margin: 0;
padding: 10px 30px; /* make sure these are the same as the section above! */
}

#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background: #ffffff;  /* change the background color of the drop down box */
width: 150px;
color: #000000; /* change the color of the drop down links */
float: none;
margin: 0;
padding: 7px 10px; /* similar to above, change for the spacing around the links */
}

#navigationcss li li a:hover, #navigationcss li li a:active {
background: #69b4ff ; /* change the background color of drop down items on hover */
color: #ffffff; /* change the color of drop down links on hover */
padding: 7px 10px;  /* keep these the same as the above section */
}

#navigationcss li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}

#navigationcss li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 150px;
margin: 0;
padding: 0;
}

#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul {
left: auto;
}

/* ----- END DROPDOWN CSS ----- */




.tabs-outer, .tabs .widget ul {overflow: visible;}


]]></b:skin>

Note: Code ".tabs-outer, .tabs .widget ul {overflow: visible;}" is used to resolve the issue sometimes drop down menu invisible on some blogger template.

2.  Go to Layout > Add a new HTML/Javascript Gadget and add the following code to it. 
Different blogger template may have different layout to place this Gadget.




<!--Start Navigation -->
<div id="navigationbar">
<ul id='navigationcss'>
<li><a href="http://91sec.blogspot.com">Home</a></li>

<li><a href="https://91sec.blogspot.ca/p/sitemap2.html">Sitemap</a>
<ul>
<li><a href='https://91sec.blogspot.ca/p/sitemap2.html'>Sitemap Page</a></li>
<li><a href='https://91sec.blogspot.ca/p/sitemap_2.html'>Categories</a></li>
</ul>
</li>

<li><a href="">Resources</a>
<ul>
<li><a href='https://91sec.blogspot.ca/p/othe.html'>Online Resources</a></li>
<li><a href='https://91sec.blogspot.ca/p/new-things-to-learn.html'>Learning</a></li>
</ul>
</li>

<li><a href="">Tools</a>
<ul>
<li><a href='http://91sec.blogspot.com/p/tools.html'>Network Tools</a></li>
<li><a href='http://91sec.blogspot.com/2015/07/my-top-network-security-tools.html'>Security Tools</a></li>
<li><a href='http://91sec.blogspot.com/2013/08/some-of-my-network-troubleshooting-tools.html'>Internet Tools</a></li>
<li><a href='http://91sec.blogspot.com/2016/03/collection-of-website-and-tools-for.html'>Blogger Tools</a></li>
</ul>
</li>

<li><a href="">About</a>
<ul>
<li><a href='https://91sec.blogspot.ca/p/about-me.html'>About Me</a></li>
<li><a href='https://91sec.blogspot.ca/p/consulting-services.html'>Consulting</a></li>
<li><a href='https://91sec.blogspot.ca/p/services.html'>Services</a></li>
</ul>
</li>

<li><a href="http://www.51sec.org">51sec.org</a></li>
</ul>
</div>
<!--End Navigation -->


Saturday, March 5, 2016

Website and Tools for Bloggers

During working on this "Network Security Memo" blog, there are some helpful websites or tools being used but not listed in previous posts. This post will mostly focus on blog related tools. Hopefully this will help some other beginners when they are trying to set their blog site up.

1. Website Speed Test and Monitoring Tools



2. Webmaster Tools


3. Website Analytics Tools


4. Making Money by adding ads


5. Buying Ads from advertiser





9. Free Image Hosting and Sharing Sites

a. Photobucket.com Not good anymore. They changed their service on June 2017 and charge too much for their hosting service.
b. Poco.cn
c. www.niupic.com
d. Postimage
e. TinyPic - Free Image Hosting, Photo Sharing & Video Hosting


10. Check if Your Website Blocked by GFW in China Mainland

a. Test if any website is blocked in china http://www.blockedinchina.net/
b. 网站被墙了吗? http://www.hostucan.cn/site-block-checker
c. Test website from China

11. Website Submission
Find list of best free URL submission and website submission sites. Submit your websites to 100's of Sites including search engines.
PingMyLink.com
Free search engine submission and Ping Service. Free URL submission tool will automatically add your URL to several hundreds of different websites that automatically provide free backlinks for you. Each of these sites has been collected in one comprehensive list, and our free tool automates the entire process for you.

FreeWebSubmission.com
Free Web Submission is the source for free search engine submission. Provides webmasters and site owners with free manual and auto submission to the highest-rated, free internet search engines and directories.

LinkStation
Free Autoubmit URL to 8000 FFA links pages.

Pingmyurl.com
Free Submit Your URL to 1,374 Different Websites.

Global Search Engine Submitter
Autoubmit Your Web Site to 65 Major Search Engines.

SubmitExpress
Free Search engine autosubmitter to 70+ search engines and directories.

Submitx.com
Free website submission to 636 search engines and directories.

AddMe
Website submission & registration with 25 search engines.

Site-submit.netne.net
Submit a URL to Over 130 Search Engines for Free. Free and easy site URL submission to more than 130 search engines.

MultiLinks
Submit URL to 200 classified ad sites and 1000 FFA links pages.



12. Google Test Tools


  • Google Adsense Sandbox : You can use this tool to determine if a domain is banned in the AdSense program. Put the website URL in the input box and if you see no ads, Google may have disabled ad-serving for that domain.



13. SEO Tools

SEO = Search Engine Optimization.” It is the optimized process of getting traffic from all kinds of search engines such as google, bing, yahoo.
  • SerpStat is a all-in-one SEO tool that consists of five different modules:Position Tracking, Backlink Analysis, Keyword Research, Site Audit, Competitor Research
  • Moz Open Site Explorer: This free version of Open Site Explorer gives you a limit times to have quick but full look of link analysis.
  • QuickSprout tells you how to make those important changes on your website that will grow your traffic. 
  • Similarweb : FREE version will provide 5 Results Per Metric,  1 Month of Mobile App Data and 3 Months of Web Traffic Data .
  • SeoSiteCheckup runs through a fast audit of your site, checking for proper tags and surfacing any errors that might come up.