Minggu, 31 Maret 2013

Related Posts Widget with Thumbnails and Summary for Blogger

There are several tutorials quite old in which I have shown different methods for displaying related posts in Blogger [1] [2] but in this tutorial, you will learn how to implement a really awesome Related Posts widget with Thumbnails and Posts Snippets that will appear in the footer of all your blog posts. If you want to get an idea of how it looks like, please visit this demo blog.

Now let's see how to add the related posts widget with thumbnails and summaries in a Blogger template:

Adding Related Posts Widget with Summaries to Blogger
related posts widget with thumbnails and summaries

Step 1. From your Blogger Dashboard, go to Template and click on Edit HTML


Step 2. Click anywhere inside the code area and then press CTRL + F to open the Blogger search box


Step 3. Type or paste this tag inside the search box and hit enter to find it:
</head>
After you found it, paste this script just above it:
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYaldksr1Jxp2kLCJOkbDo5rZsJXdhXbOMVdZXQmLMjvyFhlahGBo6_RgywhWFM8XFk8I7ILE8t73t6tpCl_wzACZJ1WZWVhRDFR2YbI5jxfoNC4R2hFHr4NIw-U2Kp0Z_vdaTIbQZfXH6/s1600/no_image.jpg"; // default picture for entries with no image
//]]>
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbs-and-summaries.js" />
Note:  
    - To change the number of posts that are being displayed, modify the value in red (4)
    - To change the number of characters to be shown in posts summary, modify the value in green (75)
    - To change the default pic for posts with no images, add your URL instead of the one marked in blue

      Now that we added the script, we will need to add the style. Paste the following code above the same </head> tag:
      <style>
      .relatedsumposts {
          float: left;
          padding: 0px 10px;
          overflow: hidden;
          text-align: center;
        /* width and height of the related posts area */
          width: 120px;
          height: 200px;
          border-right: 1px solid #E5E5E5;
          display: inline-block;
      }

      .relatedsumposts:hover {
          background-color: #F7F7F7;
      }

      .relatedsumposts img:hover {
          -webkit-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -o-transform: rotate(360deg);
      }

      .relatedsumposts a {
        /* link properties */
          color: #linkcolor;
          display: inline;
          font-size: 10px;
          line-height: 1;
      }

      .relatedsumposts img {
        /* thumbnail properties */
          margin-top: 2px;
          height: 82px;
          padding: 5px;
          width: 82px;
          border: 1px solid #fff;
          -webkit-border-radius: 100px;
          -moz-border-radius: 100px;
          border-radius: 100px;

          -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
          -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
          box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
          -webkit-transition-duration: 0.8s;
          -moz-transition-duration: 0.8s;
          -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
          -webkit-transition-property: -webkit-transform;
          -moz-transition-property: -moz-transform;
          -o-transition-property: -o-transform;
          transition-property: transform;
          overflow: hidden;
      }

      .relatedsumposts h6 {
        /* title properties */
          display: table-cell;
          height: 3em;
          margin: 5px 0 0;
          overflow: hidden;
          padding-bottom: 2px;
          vertical-align: middle;
          width: 130px;
      }

      .relatedsumposts p {
        /* summary properties */
          border-top: 1px solid #E5E5E5;
          border-bottom: 1px solid #E5E5E5;
          color: #summarycolor;
          font-size: 10px;
          height: 4em;
          line-height: 1;
          margin: 5px 0 0;
          overflow: hidden;
          padding: 5px 0 15px 0;
          text-align: left;
      }

      #relatedpostssum {
          background: #F3F3F3;
          height: 200px; /* related posts container */
          padding: 5px;
          width: 100%;
      }

      .relatedpoststitle {
          font-size: 19px;
          font-weight: bold;
          border-top: 3px solid #FB8227;
          color: #777;
          display: inline-block;
          padding: 5px 10px;
          width: 190px;
          float: left;
          margin: 0px -200px 0px 20px;
          transform: rotate(90deg);
          transform-origin: left top 0;
          -ms-transform: rotate(90deg);
          -ms-transform-origin:left top 0;
          -webkit-transform: rotate(90deg);
          -webkit-transform-origin:left top 0; 
         font-family: Gill Sans / Gill Sans MT, sans-serif;
      }
      </style>
      Note:  
        - Modify the values in red to adjust the width (120) and height (210) of the widget area
        - Replace #linkcolor with the hex value of your color to change the color of post titles
        - If you want to change the size of thumbnails, modify the values marked in violet (82)
        - To determine the border roundness, modify the values in orange (100)
        - To change the color of the post snippet, change #summarycolor with color hex value
        - In case you add more that 5 related posts, change the container height 200px to 400px

        2nd Note: If you have a dark background, you may want to add this style instead (see the screenshot):

        related posts widget with thumbnails and summaries
         <style>
        .relatedsumposts {
            float: left;
            padding: 0px 10px;
            overflow: hidden;
            text-align: center;
          /* width and height of the related posts area */
            width: 120px;
            height: 200px;
            border-right: 1px solid #0A0A0A;
            display: inline-block;
        }

        .relatedsumposts:hover {
            background-color: #0A0A0A;
        }

        .relatedsumposts img:hover {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }

        .relatedsumposts a {
          /* link properties */
            color: #linkcolor;
            display: inline;
            font-size: 10px;
            line-height: 1;
        }

        .relatedsumposts img {
          /* thumbnail properties */
            margin-top: 2px;
            height: 82px;
            padding: 5px;
            width: 82px;
            border: 1px solid #000;
        background:#282828;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            border-radius: 100px;

            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
            -webkit-transition-duration: 0.8s;
            -moz-transition-duration: 0.8s;
            -o-transition-duration: 0.8s;
            transition-duration: 0.8s;
            -webkit-transition-property: -webkit-transform;
            -moz-transition-property: -moz-transform;
            -o-transition-property: -o-transform;
            transition-property: transform;
            overflow: hidden;
        }

        .relatedsumposts h6 {
          /* title properties */
            display: table-cell;
            height: 3em;
            margin: 5px 0 0;
            overflow: hidden;
            padding-bottom: 2px;
            vertical-align: middle;
            width: 130px;
        }

        .relatedsumposts p {
          /* summary properties */
            border-top: 1px solid #0A0A0A;
            border-bottom: 1px solid #0A0A0A;
            color: #summarycolor;
            font-size: 10px;
            height: 4em;
            line-height: 1;
            margin: 5px 0 0;
            overflow: hidden;
            padding: 5px 0 15px 0;
            text-align: left;
        }

        #relatedpostssum {
            background: #121212;
            height: 200px; /* related posts container */
            padding: 5px;
            width: 100%;
        }

        .relatedpoststitle {
            font-size: 19px;
            font-weight: bold;
            border-top: 3px solid #FB8227;
            color: #ccc;
            display: inline-block;
            padding: 5px 10px;
            width: 190px;
            float: left;
            margin: 0px -200px 0px 20px;
            transform: rotate(90deg);
            transform-origin: left top 0;
            -ms-transform: rotate(90deg);
            -ms-transform-origin:left top 0;
            -webkit-transform: rotate(90deg);
            -webkit-transform-origin:left top 0;
           font-family: Gill Sans / Gill Sans MT, sans-serif;
        }
        </style>
        Step 4. Next, search (CTRL + F) for the following code snippet:
        <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
        And after you found it, add this script just below it:
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
          </b:if>
        The entire fragment should look like this:
                  <b:loop values='data:post.labels' var='label'>
                    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
          </b:if>

                  </b:loop>
        Step 5. Finally, find this fragment of code:
        </b:includable>
        <b:includable id='postQuickEdit' var='post'>
        Note: search only the line in red and after you find it, you should see the </b:includable> tag above it

        ! Click on the sideways arrow to expand the code, then scroll down until you reach to the highlighted line !

        Just ABOVE the </b:includable> tag, add the following code:
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <div class='post-footer-line post-footer-line-4'>
           <div class='relatedpoststitle'>RELATED POSTS</div>
        <div id='relatedpostssum'>
              <script type='text/javascript'>showrelated();</script>
            </div>
            <div style='clear:both;'/>
          </div>
        </b:if>
        Screenshot

        Step 6. Click on the Save Template button to save the changes and you're done!

        Note: in case you see the 'undefined' message, make sure that you have added the appropriate labels to your posts - which can be found in at least one more post, otherwise the script may not be able to find any related posts for that entry.

        Jumat, 29 Maret 2013

        Cyberattacks Seem Meant to Destroy, Not Just Disrupt

        Jung Yeon-Je/Agence France-Presse — Getty Images
        Officials at a South Korean security agency study an attack that disabled 32,000 computers.
        American Express customers trying to gain access to their online accounts Thursday were met with blank screens or an ominous ancient type face. The company confirmed that its Web site had come under attack.
         
        The assault, which took American Express offline for two hours, was the latest in an intensifying campaign of unusually powerful attacks on American financial institutions that began last September and have taken dozens of them offline intermittently, costing millions of dollars.
        JPMorgan Chase was taken offline by a similar attack this month. And last week, a separate, aggressive attack incapacitated 32,000 computers at South Korea’s banks and television networks.
        The culprits of these attacks, officials and experts say, appear intent on disabling financial transactions and operations.
        Corporate leaders have long feared online attacks aimed at financial fraud or economic espionage, but now a new threat has taken hold: attackers, possibly with state backing, who seem bent on destruction.
        “The attacks have changed from espionage to destruction,” said Alan Paller, director of research at the SANS Institute, a cybersecurity training organization. “Nations are actively testing how far they can go before we will respond.”
        Security experts who studied the attacks said that it was part of the same campaign that took down the Web sites of JPMorgan Chase, Wells Fargo, Bank of America and others over the last six months. A group that calls itself the Izz ad-Din al-Qassam Cyber Fighters has claimed responsibility for those attacks.
        The group says it is retaliating for an anti-Islamic video posted on YouTube last fall. But American intelligence officials and industry investigators say they believe the group is a convenient cover for Iran. Just how tight the connection is — or whether the group is acting on direct orders from the Iranian government — is unclear. Government officials and bank executives have failed to produce a smoking gun.
        North Korea is considered the most likely source of the attacks on South Korea, though investigators are struggling to follow the digital trail, a process that could take months. The North Korean government of Kim Jong-un has openly declared that it is seeking online targets in its neighbor to the south to exact economic damage.
        Representatives of American Express confirmed that the company was under attack Thursday, but said that there was no evidence that customer data had been compromised. A representative of the Federal Bureau of Investigation did not respond to a request for comment on the American Express attack.
        Spokesmen for JPMorgan Chase said they would not talk about the recent attack there, its origins or its consequences. JPMorgan has openly acknowledged previous denial of service attacks. But the size and severity of the most recent one apparently led it to reconsider.
        The Obama administration has publicly urged companies to be more transparent about attacks, but often security experts and lawyers give the opposite advice.
        The largest contingent of instigators of attacks in the private sector, government officials and researchers say, remains Chinese hackers intent on stealing corporate secrets.
        The American and South Korean attacks underscore a growing fear that the two countries most worrisome to banks, oil producers and governments may be Iran and North Korea, not because of their skill but because of their brazenness. Neither country is considered a superstar in this area. The appeal of digital weapons is similar to that of nuclear capability: it is a way for an outgunned, outfinanced nation to even the playing field. “These countries are pursuing cyberweapons the same way they are pursuing nuclear weapons,” said James A. Lewis, a computer security expert at the Center for Strategic and International Studies in Washington. “It’s primitive; it’s not top of the line, but it’s good enough and they are committed to getting it.”
        American officials are currently weighing their response options, but the issues involved are complex. At a meeting of banking executives, regulators and representatives from the departments of Homeland Security and Treasury last December, some pressed the United States to hit back at the hackers, while others argued that doing so would only lead to more aggressive attacks, according to two people who attended the meeting.
        The difficulty of deterring such attacks was also the focus of a White House meeting this month with Mr. Obama and business leaders, including the chief executives Jamie Dimon of JPMorgan Chase; Brian T. Moynihan of Bank of America; Rex W. Tillerson of Exxon Mobil; Randall L. Stephenson of AT&T and others.
         
        Mr. Obama’s goal was to erode the business community’s intense opposition to federal legislation that would give the government oversight of how companies protect “critical infrastructure,” like banking systems and energy and cellphone networks. That opposition killed a bill last year, prompting Mr. Obama to sign an executive order promoting increased information-sharing with businesses.
        “But I think we heard a new tone at this latest meeting,” an Obama aide said later. “Six months of unrelenting attacks have changed some views.”
        Mr. Lewis, the computer security expert, agreed. “The Iranian attacks have tilted private sector opinion,” he said. “Hence the muted reaction to the executive order versus squeals of outrage. Companies are much more concerned about this and much more willing to see a government role.”
        Neither Iran nor North Korea has shown anywhere near the subtlety and technique in online offensive skills that the United States and Israel demonstrated with Olympic Games, the ostensible effort to disable Iran’s nuclear enrichment plants with an online weapon that destabilized hundreds of centrifuges, destroying many of them. But after descriptions of that operation became public in the summer of 2010, Iran announced the creation of its own Cyber Corps.
        North Korea has had hackers for years, some of whom are believed to be operating from, or through, China. Neither North Korea nor Iran is as focused on stealing data as they are determined to destroy it, experts contend.
        When hackers believed by American intelligence officials to be Iranians hit the world’s largest oil producer, Saudi Aramco, last year, they did not just erase data on 30,000 Aramco computers; they replaced the data with an image of a burning American flag. In the assault on South Korea last week, some affected computers displayed an ominous image of skulls.
        “This attack is as much a cyber-rampage as it is a cyberattack,” Rob Rachwald, a research director at FireEye, a computer security firm, said of the South Korea attacks.
        In the past, such assaults typically occurred through a denial-of-service attack, in which hackers flood their target with Web traffic from networks of infected computers until it is overwhelmed and shuts down. One such case was a 2007 Russian attack on Estonia that affected its banks, the Parliament, ministries, newspapers and broadcasters.
        With their campaign against American financial institutions, the hackers suspected of being Iranian have taken that kind of attack to the next level. Instead of using individual personal computers to fire Web traffic at each bank, they infected powerful, commercial data centers with sophisticated malware and directed them to simultaneously fire at each bank, giving them the horsepower to inflict a huge attack.
        As a result, the hackers were able to take down the consumer banking sites of American Express, JPMorgan Chase, Bank of America, Wells Fargo and other banks with exponentially more traffic than hit Estonia in 2007.
        In the attack on Saudi Aramco last year, the culprits did not mount that type of assault. Instead, they created malware designed for the greatest impact, coded to spread to as many computers as possible.
        Likewise, the attacks last week on South Korean banks and broadcasters were far more sophisticated than coordinated denial-of-service attacks in 2009 that briefly took down the Web sites of South Korea’s president and its Defense Ministry. Such attacks were annoyances; they largely did not affect operations.
        This time around in South Korea, however, the attackers engineered malware that could evade popular South Korean antivirus products, spread it to as many computer systems as possible, and inserted a “time bomb” to take out all the systems at once for greatest impact.
        The biggest concern, Mr. Lewis said: “We don’t know how they make decisions. When you add erratic decision making, then you really have something to worry about.” 

        Selasa, 26 Maret 2013

        HIPAA Compliance in the Spotlight

        Effective Date of HIPAA Omnibus a Reminder of Unfinished Tasks

        By , March 26, 2013.
         

         
        The HIPAA Omnibus Rule goes into effect today, March 26. While organizations have until Sept. 23 to comply with the rules' many provisions, including modifications to the HIPAA security and privacy rules, recent federal breach investigations and audits have shown that many organizations are having trouble complying with basic HIPAA requirements that have been in place for years - much less the additional omnibus requirements.

         
        Longstanding trouble spots in HIPAA compliance include: conducting a thorough and timely risk assessment; documenting those assessments as well as security policies and procedures; and training staff on compliance.

        Because HIPAA Omnibus requires business associates and their subcontractors to comply with the HIPAA Security Rule and many provisions of the HIPAA Privacy Rule, hospitals, insurers and other covered entities now face the extra task of making sure their vendor partners are compliant (see: HIPAA Omnibus: Business Associate Tasks).
        In addition to changes related to business associates, other major provisions of the HIPAA Omnibus Rule include:
        • New guidance for how to assess whether to report a breach based on the probability of information being compromised (see: HIPAA Omnibus: Breach Notification Tips);
        • A prohibition against covered entities selling patient information, such as for marketing, without patient authorization, and the need to modify notices of privacy practices to reflect that (see: HIPAA Omnibus: Consumer Protections);
        • A requirement to provide patients with electronic copies of their records upon request;
        • A requirement that covered entities not disclose to health insurers information about treatment or services if the patient pays out of pocket for the care (see: HIPAA Omnibus' Trickiest Provision).

        Business Associates' Responsibilities

        Business associates that "create, receive, maintain or transmit protected health information on behalf of a covered entity" are now directly liable for HIPAA compliance. And some of these vendors will have a lot of catching up to do to comply, says David Newell, director at CTG Health Solutions' Security Solutions Practice.
        "Business associates being liable for HIPAA is the biggest sweeping change in omnibus," he says.
        Security consultant Rebecca Herold says she's working with companies "that are making it a point to get in compliance with all the requirements as soon as possible. Why? Their covered entity clients are telling them they need to, or, more often, the covered entities that want to be their clients are making HIPAA compliance a requirement to do business."
        Herold, partner at Compliance Helper and CEO at The Privacy Professor, a consulting firm, adds: "Business associates are now scrambling more than ever before to work on their compliance activities. However, I estimate there are still a good 50 percent or so that are still in denial about what they actually need to do."

        Risk Assessments

        Conducting a timely and thorough risk assessment, as well as documenting all security policies, are key components of a HIPAA compliance program, Newell stresses. Unfortunately, the last time that some organizations conducted a risk analysis was when the HIPAA Security Rule went into effect in 2005, he says. As a result, some organizations don't have a clue about how their risks have evolved.
        The Department of Health and Human Services' Office for Civil Rights, which enforces HIPAA, says that an insufficient risk analysis is among the top weak spots discovered during the agency's pilot HIPAA compliance audit program, which evaluated 115 organizations in 2012. Also, some of the breach-related settlements with OCR have noted risk analysis as an area of deficiency.


        Experts point out that the lack of timely risk assessment has also played a key role in organizations failing to take other important measures, such as widespread implementation of encryption. OCR's "wall of shame" website shows that of the 556 major breaches that have occurred since September 2009, more than half have involved the loss or theft of unencrypted computing devices (see: Breach Tally: Encryption Still an Issue).
        "One thing we're seeing is that some organizations will encrypt their laptops because they hear of breaches involving these devices, yet they don't have a solid plan for what to do with encryption because they haven't done a recent risk analysis," Newell says.
        For instance, a risk analysis can help identify protected health information that's located on desktop computers or other devices that need protections, he says.
        Sometimes covered entities need help to uncover where PHI is hidden in applications and databases, especially if they've been involved with a merger or acquisition, says Maureen Kaplan of Verizon's healthcare cloud and security services unit. "Many organizations have good controls around procedures, but not for application development, where PHI can be hidden," she says.

        Write It Down

        Documentation of all security steps provides critical proof of HIPAA compliance in case of a federal audit or investigation. Plus, it helps support development of staff education programs.
        But too many organizations fail to document the findings of their risk assessments or create formal, written policies tied to new security-related processes, experts say.
        For example, Newell has found that when some organizations implement security measures, such as using new anti-malware software, they fail to document the use of the software or explain in their policies their strategy for addressing viruses, he says. "There is no real policy, nothing gets documented, no records are kept," he says.
        While the compliance efforts for HIPAA Omnibus could offer some organizations a fresh start to address HIPAA security and privacy issues they've neglected in the past, Chuck Christian, CIO of St. Francis Hospital in Columbus, Ga., says those laggards need to get moving soon.
        "I'm sure that there are organizations that have been lulled into complacency due to the fact that 'nothing has happened' [in terms of breaches]," he says. "We all need to make certain that all of our ducks are in a row as we move forward."
        Christian says it's important for organizations to stay vigilant about evolving threats and have adequate resources available for data security, going beyond a focus on HIPAA compliance.
        Finally, making sure staff understand HIPAA security and privacy policies is critical to compliance - especially for the new provisions of HIPAA Omnibus, security experts say.
        "Training is almost always inadequate," says Herold, the consultant. "Ongoing awareness reminders in-between training is often missing altogether."
         

        Fed orders Citigroup to improve anti-money laundering controls

         
        A Citi sign is seen at the Citigroup stall on the floor of the New York Stock Exchange, October 16, 2012. REUTERS/Brendan McDermid
         
        March 26, 2013 (Reuters) - Citigroup Inc entered into a consent order with the Federal Reserve to improve its anti-money laundering controls, after several units of the bank were subject to similar orders in 2012.
        The Federal Reserve announced on Tuesday that it ordered Citigroup's board to submit a plan to improve its oversight of companywide anti-money laundering compliance, including plans to fund personnel and resources based on the risks of different units.
        Citibank had entered into a consent order with the Office of the Comptroller of the Currency in April 2012 to fix problems with its compliance with the Bank Secrecy Act anti-money laundering law.
        Last year, the FDIC and the California Department of Financial Institutions also ordered Citigroup's Mexican subsidiary, Banamex, to address problems with its compliance program.
        Citigroup neither admitted nor denied the Fed's findings under the order, the Fed said.
        (Reporting by Aruna Viswanatha; Editing by Lisa Von Ahn)

        Theft of Intellectual Property Continues to Wound U.S. Businesses

        Theft of Intellectual Property Continues to Wound U.S. Businesses

        trade-secret
        Shanshan Du, an ex-employee of automaker General Motors and her husband, Yu Qin, were convicted this past December of stealing trade secrets from the automaker and soliciting Chinese businesses to invest in their own company. According to the prosecution at their trial, Du positioned herself to work in GM’s hybrid-car division as an electrical engineer, a position she held for several years. After being offered a severance package due to poor performance, Du stole information about the hybrid’s motor controls and fed the stolen data to Qin, who was also an electrical engineer at a car part manufacturer. Armed with the stolen data, Qin solicited business ventures to sell the data to Chinese car companies and attempted to leverage the information to gain employment and investments.
        The two were caught when Qin’s employer became suspicious that he was running a business that was in direct competition to their company and started to investigate his work area. Upon investigating some portable hard-drives, files believed to be the property of GM were identified. Qin’s employer notified GM who in turn notified the Federal Bureau of Investigation, which opened an investigation into the two.
        Estimates given by GM placed the value of the information stolen by Du at near $40 million dollars. Both Du and Qin faced one count of conspiracy to possess trade secrets without authorization and two counts of unauthorized possession of trade secrets, as well as three counts of wire fraud. Following a trial, Du would be acquitted of the wire fraud charges but convicted of the three trade secret counts. Qin would be found guilty on all six counts as well as an obstruction of justice charge. The two will be sentenced this month but face 10 years for each count.
        Given the tendency of data to “spill” sooner or later from an enterprise, organizations must tackle the issue with the short and long term in mind. Monitoring the Internet for leaked documents is not an option today. Cyveillance helps large enterprises protect themselves from data leakage so reach out to us if you’d like assistance at your organization. We also strongly recommend raising counterintelligence awareness locally by hanging posters like the one above, made available for free by the US Office of the National Counterintelligence Executive provides free posters. Make information protection a priority in 2013!

        Selasa, 19 Maret 2013

        CSS Basics. How to Apply Rounded Corners On Images #2

        blogger tricks, css tricks, border radiusIn the previous post I have mentioned that we will learn about how to create rounded images using CSS, without needing to edit them one by one using a program. Now that we have seen the basics of CSS, let's try to apply it on some pictures.

        What we will do in this tutorial is to upload an image (HTML) and then add some rules in the stylesheet that will transform the outer shape to look like a circle... or, at least, to appear round. This will depend on the proportions of that picture we will use.

        In fact, we can apply this effect to any picture, to a specific part of our blog or to all the pictures found in our blog. This depends on your tastes.

        Marking up HTML

        Obviously, the first thing we need to do in order to set a rounded border around an image is to get a picture and upload it to get the html structure. The code could be a little bit more complicated, but an image is built within the img tag, which basically, looks like this:
        <img src="image_URL"/>
        Screenshot:



        Adding this code inside the HTML of the post with the url of our image - instead of the text in blue - we will be able to display it like this image on the left.

        Usually, it might also contain an alt text, and sometimes, may have some predetermined dimensions (with a specific width and/or height). When we upload an image using the Blogger post editor, the code will also have a link pointing to the original image.

        But if we want to modify this image using CSS, we need to add a class selector. We can add it in two ways: within the img tag or in a parent box. The name that I have chosen for the image selector is roundedcorners, however, you can add any name you want:
        <img class="roundedcorners" src="image_URL"/>


        <div class="roundedcorners">
        <img src="image_URL"/>
        </div>

        Applying style to all homogeneous elements

        But that selector alone won't do anything special. It needs to be linked to a style rule telling what to do with it. The same if when we add just classes, if these are not defined within the CSS, the appearance of a picture (or a certain element) will not change.

        To change the shape of the all the pictures on our blog, this is what we should add to our CSS:
        img {
        border: 2px solid #BADA55;
        margin: 0;
        padding: 0;
        border-radius: 1000px;
        -moz-border-radius: 1000px;
        }
        And how this translates to your browser?

        Search for images by name tag (img) and apply the following style:
        • a solid green border of 2 pixels
        • set the margins (space outside the border) and padding (space inside the border) to zero
        • apply the rounded corner look to all the four corners
        Now that we have this rule in our style sheet itself, we'll be able to see the picture as we want - take a look at the image on the right.

        To declare a property correctly, we need to know what it does and how to write it - details which could be found all over the internet, although W3C is the authority in this.

        For instance, the border-radius property initially requires four (4) values reading from left to right, which represent the roundness of the upper-left, upper-right, lower-right and lower-left corner. If you add a single value, it will make all the four corners to be equal with that value.

        It is important to mention that when the value of the border exceeds the dimensions of the container, this border will create a circle.

        How to apply the same style on the elements of the same container

        Sometimes, we don't want all the images on our blog to be round, but only the ones that we choose, otherwise adding the style above within the head tag will make all the pictures taking this shape. Before, we used an HTML tag (img) and not a selector and, for this reason, the style will affect all our images.
        To avoid this, we can do one of the things we saw at the beginning of this post and that was to place the image inside a div with the roundedcorners class. This way, only the images within the container with that class will be affected by the rule that will make them round.
        <div class="roundedcorners"><img src="image_URL"/></div>
        But the rule then should not affect the img tag directly, but the roundedcorners selector. In this case, you should write it like this:
        .roundedcorners img {
        border: 2px solid #BADA55;
        ....
        }
        This implies that this style applies only to images that are within the container with the roundedcorners class.

        Final words

        To end this tutorial on creating pictures with rounded borders, keep in mind that if these are not square, instead of becoming circular, they will look oval:


        To fix this we should add the width and height with the same measure (value in pixels) to force the image cropping and to make it appear perfectly circular. That was all!

        If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below ;)

        Senin, 18 Maret 2013

        CSS Basics. How to Apply Rounded Corners On Images #1

        This tutorial will explain how to change the outside border of any image by using some simple CSS rules to make it round, but this is so easy doing this, that I'm finally going to make this post for other purposes.
        rounded corners, css tricks, blogger tricks, blogger design
        The trick today that I'm going to publish in two parts is to help you to understand, at least, a little of what CSS (Cascading Style Sheets) is.

        For those who would like to learn more, please take a look at this link and for those who really want to learn thoroughly, I recommend to visit this site.

        Introduction and terminology

        Style sheets aim to help sort out what is the structure of a website and which is its format or appearance. So, the CSS box model is, basically, a box that wraps around HTML elements, and determines how those boxes are presented in terms of colors, fonts, width, backgrounds etc.

        The advantage is that, anytime we decide to change something, we don't have to change all the pages one by one, but simply, change the properties from the style sheet and these modifications will automatically apply in all the pages.

        The style sheet is a set of rules made of selectors and declarations. The selector is to be used as a nickname or name of what you want to configure from the style sheet and apply to the HTML, and declarations are properties to which we add the desired values ​​(more information on CSS syntax)

        Adding the CSS selector

        If we add, for example, the code above in our style sheet, we might not see anything particular happening in our website. As I have mentioned above, the selector relates to the HTML and CSS so, if we want a box to take these values ​​for width, background color, border and font size, we need to include the selector within the HTML of a page element, like this:
        <div class="SelectorName">Text here</div>
        Here we added a rule telling the browser to interpret that this box has to be of a certain type or class. This class or selector could have some specific properties and values ​​defined in the style sheet, as you can see in the image above.

        Now let's see how this will change the look of the box, while all others that don't have the SelectorName  name will follow the standard appearance.

        Basically, when we add a rule in a style sheet, or modify an existing one, what happens is that all boxes marked with that selector will change their appearance according to the properties and values that we have defined in the style sheet.


        Where to add the CSS style

        This style can be added in external CSS files - create the CSS file with all the rules, upload it on a hosting site and get the URL of the file. To make use of it, include the following line in the header of your template. For Blogger, you can add it between <head> and <b:skin><![CDATA[/*:
        <link href="syle.css" rel="stylesheet" type="text/css"/>
        Note: replace the text in blue with the url of the CSS file.

        You can also add the style directly in the HTML of the template by adding the CSS between the style tags:
        <style>
        .SelectorName {
        background-color: #EAEAEA;
        border: 1px solid #444444;
        width: 200px;
        font-size: 12px;
        }
        </style>
        This can be added in the HTML of a page element as well. In this case, you don't need to add any selector to indicate where the CSS style is:
        <div style="background-color: #EAEAEA; border: 1px solid #444444; width: 200px; font-size: 12px;">Text here</div>
        In Blogger, the rules are between the <b:skin><![CDATA[/* and ]]></b:skin> skin tags. If we access the HTML of our template, we will find a bunch of codes in between these tags, which is actually the CSS styling that defines the appearance of our blog.

        For those who don't want to touch the template code, we can add the CSS directly by going to the Blogger Template designer > Advanced > Add CSS.


        That's enough for today. In the next tutorial we'll get to know how to add rounded corners to our images using CSS -> how to set a rounded borders around an image using CSS.

        Minggu, 17 Maret 2013

        10 Places to put Adsense ads in Blogger

        In this article we'll talk about the most common 10 places in our blog where we can add AdSense ads and about how we can implement these and we'll get to know as well which are the most suitable formats based on those available in our AdSense account.

        Adsense Advertisements

        In the Sidebar

        adsense, ads, add adsense blogger

        How to implement

        This is one of the easiest areas to put AdSense. Just go to the Page Elements (Layout), click on the "Add a Gadget" link, then add an HTML/Javascript widget with your ad code inside it or add directly an AdSense widget.

        Recommended formats: 125 × 125, 120 × 600 and 160 × 600, 300 x 600

        Between posts

        blogger posts, blogger tricks, adsense ads

        Implementation. You can add AdSense ads between your posts by going to Layout, click on the "Edit" link below the Blog Posts section, then check the "Show Ads Between Posts" option.

        Recommended formats: 468 × 60, 300 × 250 and 336 × 280

        Under the header

        blogger header, blogger tips, adsense

        Implementation:

        Before anything, you need to convert your AdSense ad code - you can use this converter here:

        AdSense Ad Converter

        Next thing to do is to go to your Blogger Template (log in to your Blogger Dashboard, click on Template and press the Edit HTML button) and click anywhere inside the code area to search for the following code using the CTRL + F keys:
        <div id='header-wrapper'>
        Paste the converted code right after it.

        Recommended formats: 728 × 90 and 728 × 15

        Above the blog posts


        make money, adsense, blogger tutorials

        Implementation:

        Convert your ad code and search for <div id='main-wrapper'> in your template.

        Paste the converted code right after it.

        Recommended formats: 460 × 68, 468 × 15 and 336 × 280

        Under the post title (this will be visible on all the pages)

        money online, blogger tricks, how to blogger
        Implementation:

        Convert your AdSense ad code and go to your Template > Edit HTML > click anywhere inside the code area and search for the following line (CTRL + F):
        <div class='post-header-line-1'/>
        Note: if you can't find it, search it without the ending slash /

        Paste the converted code right after it.

        Recommended formats: 468 × 68 and 468 × 15

        Under the post title (visible only on the posts pages)

        Implementation:

        Convert your ad code and then go to your Template, click anywhere inside the code area and look for:
        <div class='post-header-line-1'/>
        Note: if you can't find it, search it without the trailing slash /

        Paste the converted code, following this example:
        <b:if cond='data:blog.pageType == "item"'>

        <!-- Add here the code of your ad -->

        </b:if>
        Recommended formats: 468x68 and 468x15

        In the posts' footer

        post footer, adsense, blogger blogspot

        Implementation:

        Convert your ad code and then go to your Template > click anywhere inside the code area and look for:
        <p class='post-footer-line post-footer-line-3'/>
        Note: if you can't find it, search it without the trailing slash /

        Paste the converted code right after this line.

        Recommended formats: 468x68 and 468x15

        In the post's body (it will be visible on all pages)

        adsense how to, blogger tricks, gadgets

        Implementation:

        Convert your ad code and then go to your Template > click anywhere inside the code area and look for:
        <div class='post-body entry-content'>
        Note: in case you don't fint this code, search only for <div class='post-body'>

        And paste the converted code by following the example below:
        <div style='float:right'>

        <!-- Add here the code of your ad -->

        </div>
        Recommended formats: 125x125, 180x150, 120x240 and 200x200

        In the post's body (visible only in post pages)

        Convert your ad code and then go to your Template, click anywhere inside the cod area and look for:
        <div class='post-body entry-content'>
        Note: in case you don't fint this code, search only for <div class='post-body'> 

        And paste the converted code by following this example:
        <b:if cond='data:blog.pageType == "item"'>
        <div style='float:right'>

        <!-- Add here the code of your ad -->

        </div>
        </b:if>
        Recommended formats: 125x125, 180x150, 120x240 and 200x200

        Between post and comments (visible only on posts pages)


        Implementation:

        Convert your ad code and then go to your Template, click anywhere inside the code area and look for:
        </b:includable>
        <b:includable id='postQuickEdit' var='post'>
        Paste the converted code just above it, following this example:
        <b:if cond='data:blog.pageType == "item"'>

        <!-- Add here the code of your ad -->

        </b:if>
        Recommended formats: 468x60, 300x250 and 336x280

        In the blog's footer

        blogger footer, adsense ads, make money online

        Implementation:

        Convert your ad code and then go to your Template, click anywhere inside the code area and look for:
        <div id='footer-wrapper'>
        Paste the converted code right after it.

        Recommended formats: 728x90 and 728x15

        FAQ

        Some questions that are likely to arise:

        I can't find the codes, what should I do?
        When searching for a specific code, make sure that you have no spaces before/after it. These are the default codes of Blogger and should be found in all the templates unless they have been modified by the template designer.

        Why should I convert my AdSense code?
        The Blogger's Template reads it as text and not as code so it is better to avoid any errors when trying to save it.

        The ads are not displaying properly, why is that?
        The ads could be affected by the styles (CSS) selectors (divs) containing them and some templates could be wrong designed, then you should consider modifying these styles, look for another relevant place or in extreme cases, change the template.

        Can I put the all 10 codes on my blog?
        No, you should choose just one of the locations where you want to put the ads considering that AdSense have some limits on the number of ads that could be displayed. Try to make a balance with your content.

        Why there should be only 3 ads displayed on the main page?
        This is due to the limit set by AdSense. Combine the type of ads (text, rich media ads and link units) if you want to show more ads.
        Hopefully, this guide will be useful to those of you who need to display AdSense ads on your blog.

        Jumat, 15 Maret 2013

        Recent Comments Widget with Hide Author Comments function For Blogger

        A few days ago, Mrpolie asked if there's a way to hide the author comments in the Recent Comments widget so that we would be able to see only readers' comments and our replies to be hidden. So, in this post I'll be sharing with you the Recent Comments widget that comes with this function. If you want to show just blog readers' comments rather than yours, you have just to change "Blogger User" text with the surname under which you are posting.

        recent comments widget, recent comments, blogger

        The main features of this recent comments widget:

        - You'll be able to hide your comments
        - Change the avatar size
        - Set the number of comments to display
        - Set the length of comment for the widget to display

        Recent Comments Widget with Hide Author Function



        Step 1. From your Blogger Dashboard, go to Layout and click on Add a Gadget link


        Step 2. In the pop-up window, choose the HTML/JavaScript widget


        Step 3. Copy-paste the following code:

        Recent Comments Widget with Round Avatars: 

        Click to see the code

        Recent Comments Widget With Post Titles (no avatars): 

        Click to see the code

        Some changes before saving it.

        - to set the number of comments to be shown, change the "5" value from the orange line
        - for the number of characters, change the "67" (for the 2nd widget, it is 95) value from the green line
        - to hide your comments, replace the Blogger User text TWICE with your username
        - to change the size of avatar, change "50" from the blue line.
        - if you don't want rounded avatars, delete this line:

        -webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
        Step 4. Save your widget and you're done!

         
        Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Web Hosting