Jumat, 28 Februari 2014

Now Sears Is Investigating A Possible Security Breach

  

Women walk past the Sears department store at Fair Oaks Mall in Fairfax, Virginia, January 7, 2010. REUTERS/Larry Downing
Thomson Reuters
Women walk past the Sears department store at Fair Oaks Mall in Fairfax

Sears Holdings Corp said Friday it has launched an investigation to determine whether it was the victim of a security breach, following Target Corp's revelation at the end of last year that it had suffered an unprecedented cyber attack.
"There have been rumors and reports throughout the retail industry of security incidents at various retailers and we are actively reviewing our systems to determine if we have been a victim of a breach," Sears spokesman Howard Riefs said in a statement on Friday.
"We have found no information based on our review of our systems to date indicating a breach," he added.
He did not say when the operator of Sears department stores and Kmart discount stores had begun the investigation or provide other information about the probe.
Sears Holdings Corp operates nearly 2,500 retail stores in the United States and Canada.
Bloomberg News reported on Friday that the U.S. Secret Service was investigating a possible secret breach at Sears, citing a person familiar with the investigation. The report did not identify that source by name.
The Bloomberg report said that its source did not disclose details about the scope or timing of the suspected breach.
A spokesman for the U.S. Secret Service declined comment when Reuters asked if the agency was investigating a possible breach at Sears.
The Secret Service is leading the U.S. government's investigation into last year's attack on Target, which the company has said led to the theft of some 40 million payment card numbers as well as another 70 million pieces of personal data.
(Reporting by Jilian Mincer and Jim Finkle; Editing by Nick Zieminski)
This post originally appeared at Reuters. Copyright 2014. Follow Reuters on Twitter.


Read more: http://www.businessinsider.com/r-sears-says-investigating-possible-security-breach-2014-28#ixzz2ueQqRdRB



http://www.businessinsider.com/r-sears-says-investigating-possible-security-breach-2014-28

Kamis, 27 Februari 2014

How to Add Neat CSS3 Dropdown Menu in Blogger

Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from script-tutorials.com to which I have made some slight modifications so that it could easily adapt in our Blogger template.

In the upper right corner of this menu we have the contact links and the social media icons for Facebook, Twitter, Google Plus and RSS feed. Below these links, we have the drop-down navigation menu and on the left side, the search form.
To achieve better user interface and interaction, the CSS dropdown menu features sub categories that appear with a nice touch of CSS3 box-shadow, text-shadow and a cool transition once the parent link is activated by a hover.

dropdown menu

Please visit this demo page to see it in action.

Adding the CSS dropdown navigation menu in Blogger

Step 1. Access your Blogger Dashboard and go to Template > click on the Edit HTML button


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type the tag below inside the search box and hit Enter to find it.
</header>
Step 3. Just below </header> add the HTML structure:
<div id='contact-links'>
    <div id='my-links'>
        <a href='#'>About</a>
        <a href='#'>Contact</a>
                <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2CrLIxNIZan1x_uQNUgJSGeVtF_N84Ma_vZubrLgLgG6cZ9tZeec8w6vUyiVIwLOFcu55Ug0Liuz6rAiFlAI6H_nUyy5HoIAmsCH_8tj6vW_hDrRGRskyiJCjr95VUOP_5jwJMBm6qWGu/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC6dqh6BSCg_LYp7lU4hlv0ma0oVyFKMUIubn3oCZncJARM3fH6VkK47ZxHpSHUEJaTg3X_jN1sDjI5YEWn4mQGpn40fE5zmOk3NoXJwfqKfXbahly94AHD0HYazHfphKITnU8rVzN45Yl/s1600/twitter.png' title='Twitter' width='18px' /></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWQ8_YZ9_B3jNjPsNgYz3RX6mlgy8sOmVxqrKtXYYWA1q0ssiPiUgR50cX0WXLZgmjRqyfgGQw-uZGCJHidTkjH2C5COzYoL79t9eY-JHiNI6qPEZFGrtm9akodUIK2F09xYtePiuRG28w/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNa0q3I_5ElVN1G6HpO-34HC9wOVfNiW17JcFHwylsqcd91t9eLB3RcYF2vqNyj5sJjkc0mmJvz2gssDzR_nPE6_zgu1ztEWxdbbExu5tvb0Vqhr8Ps4Bcq7GnwcPfLpeWVPFVBoDqH33/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
    </div>

    <div id='menu-container'>
        <nav id='neat-menu'>
            <ul>
              <li class='active'><a href='/'>Home</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <!-- menu-search form -->
        <div id='menu-search'>
          <form method='get' action='/search'>
                <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>
Replace the # symbols with the URLs of your links and replace the texts in blue with the titles that you want to appear. To change the social media icons, add the links of your icons instead of the ones in blue. If you don't know how to upload and get the URL of an image, please read this tutorial.

If you want to remove the sub categories, remove the code within the tags highlighted in yellow, including the ul tags. To remove only a menu element, remove the part that starts with <li> and ends with </li>

Step 4. And now let's add the CSS styling for the menu. Search for the following piece of code:
]]></b:skin>
Just above ]]></b:skin> add this code:
#contact-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contact-links a {
    color: #4C9FEB;
}
#contact-links a:hover {
    color: #3D85C6;
}
#my-links {
    float: right;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#my-links a:first-child {
    border-width: 0;
}
#menu-container {
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
    border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear: both;
    height: 46px;
    padding-top: 1px;
}
#neat-menu {
    float: left;
}
#neat-menu a {
    text-decoration: none;
}
#neat-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#neat-menu > ul > li {
    float: left;
    padding-bottom: 12px;
}
#neat-menu ul li a {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border-color: #D1D1D1;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 11px 15px 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #2D81CC;
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    margin: -1px 0 -1px -1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
    background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
    border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 #FFFFFF inset;
    height: 0;
    margin-top: 1px;
    opacity: 0;
    overflow: hidden;
    width: 240px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#neat-menu ul li:hover ul  {
    margin-top: 0\2;
    height: auto;
    opacity: 1;
    visibility: visible;
}
#neat-menu ul ul a {
    border-right-width: 0;
    border-top: 1px solid #D1D1D1;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    height: 24px;
    line-height: 24px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
    border-top-width: 0;
}
#menu-search {
    margin:8px 10px 0 0;
    float: right;
}
#menu-search form {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyHVP4RLBxWqqql_Gcu2se-EqheI1xKQotALT_02pQcksC1C15y07X1WsWzmwYbCbJJ99porrQkxK3BZaQKT9_XNYo1Fze3R-2Kso5wdcll8U4ZNeJyO7hZ_cU1XLTv01smVXRFu8Gllmp/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height: 26px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#menu-search form:hover {
    background-color: #F9F9F9;
}
#menu-search form input {
    color: #999999;
    font-size: 13px;
    height: 26px;
    text-shadow: 0 1px 0 #FFFFFF;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    outline: medium none;
    padding: 0;
    width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
    color: #C4C4C4;
}
Step 5. Click on the Save template button to save the changes... and you're done! ;)

I hope you like this CSS3 dropdown menu and if you enjoyed this tutorial, please share and subscribe.

Selasa, 25 Februari 2014

Payment Card Breaches: Time to Spread the Risk with Mandatory Cyber Insurance

Payment Card Breaches: Time to Spread the Risk with Mandatory Cyber Insurance


  Posted in Cyber Insurance




The BIG 2014 security stories concerning the Target,  Neiman Marcus and Michaels payment card breaches of have highlighted the significant criminal hacking and fraudulent payment card activity that goes on in the retail space.  Of course, it was not so long ago that the Heartland Payment Systems breach (2008;  100 million cards exposed) and the TJX breach in (2007; 45 million card exposed) dominated the news cycle.  The reactions in the media and with the population then were very similar to those today. The latest round of mega breaches occurred, however, despite the existence of the Payment Card Industry Data Security Standard for a decade.  In fact, according to the Verizon 2014 PCI Compliance Report, only 11.1% of the organizations it audited between 2011 and 2013 satisfied all 12 PCI requirements.  In other words, just under 90% of the businesses Verizon audited as a PCI Qualified Security Assessor failed.  This begs the question, despite aggregate expenditures by merchants likely in the hundreds of millions of dollars (if not over a billion) over the last decade:  has anything really changed?
Yes, in fact some things have changed — global card fraud losses have increased from about $3 billion annually in 2000 to about $11 billion annually in 2012 (source:  the Nilson Report, August 2013).  Organized crime has increased its activity in the payment card fraud space, and sophisticated economic ecosystems have sprung up to make the fraudulent use of payment cards more efficient.  Payment card breaches are low risk (of getting caught) and high reward crimes, and activity in this space will continue to increase as a result (per the FBI):
The growing popularity of this type of malware, the accessibility of the malware on underground forums, the affordability of the software and the huge potential profits to be made from retail POS systems in the United States make this type of financially-motivated cyber crime attractive to a wide range of actors . . . we believe POS malware crime will continue to grow over the near term despite law enforcement and security firms’ actions to mitigate it.
Moreover, fraudsters have automated and scaled their attacks so they can go after payment cards held by small and medium businesses on a mass basis.  These small and medium sized companies lack the sophistication, technical knowledge and resources to achieve full PCI-DSS compliance (or take even basic steps like changing the default passwords on the remote access of a point of sale system).  Breaches of small and medium businesses can result in severe financial difficulties and in many cases, bankruptcy.  Not to mention the adverse impact and inconvenience suffered by cardholders and their issuing banks.
Payment card breaches are not 100% preventable, and for most merchants over time, are inevitable (indeed the practice of information security itself has recognized this generally by shifting its attention in recent years to not only prevention, but also detection, response, containment and mitigation of breaches).  As such, rather than focus solely on cumbersome security standards such as PCI-DSS, payment card breaches should be viewed more from an overall risk management perspective. 
A full risk management approach includes efforts not only to prevent and contain the breach itself, but also to mitigate the financial impact businesses and individuals may suffer in the wake of a breach.   Spreading the risk of payment card breaches across the payment card ecosystem (e.g. merchants, banks, processors and card brands) is the best way to mitigate the systemic risk that exists.  As such, it is time to consider whether cyber insurance should be mandated either by law or the card brands to achieve this goal.


The Auto-Insurance Analog
Most States require drivers to purchase auto insurance to cover potential liability and property damage arising out of auto accidents.  There are several rationales for making auto mobile insurance mandatory, including the following:
  • Systemic and Unavoidable Risk.  A systemic and unavoidable risk exists with respect to the mass utilization of automobiles in our society.  Accidents will happen within this “system”, and it is impossible to prevent all accidents.
  • Cost of Prevention vs. Optimal Adoption/Use.  One way to manage risk is to require more safety measures to prevent automobile accidents and injury.  However, at a certain point the costs associated with attempting to prevent more accidents undermine the benefits of everybody having access to relatively inexpensive transportation.  If drivers were required to ride around in the equivalent of tanks large portions of society would not be able to afford to car.   The aggregate benefits and efficiencies we gain as a society of drivers would disappear.  Therefore, it is better to mandate a reasonable level of safety measures and accept some systemic risk.
  • Concentrated Risk vs. Optimal Adoption/Use.   Even when the proper risk prevention versus risk acceptance balance is achieved, adoption and use of automobiles on a mass basis may decrease if risk is concentrated on individual drivers and they are forced to bear the full cost of an accident.  If driving out on the roads and getting into an accident can lead to tens or hundreds of thousands of dollars in losses for a single driver, many would chose not to drive.  This again would undermine the benefits described above.  The solution is to accept a certain risk level, but to spread that risk across the entire system.  That is what mandatory auto insurance does – it helps to maximize the number of drivers while significantly limiting the chance that a single driver will face catastrophic financial loss because of an accident. 
  • Avoidance of Adverse Selection and the Development of a Balanced Insurance Market.  Mandatory automobile insurance is necessary to avoid adverse selection.  Adverse selection results when only the riskiest participants in an insurance market purchase the insurance product because they have the most to gain by buying the insurance (or better-stated: the most to lose if they don’t buy the insurance).  However, when the purchase of insurance is not mandatory this can create an unbalanced insurance market where the insurance carriers have the worst risks on their books (resulting in increased claims and losses) with no “good risks” paying premiums to offset losses.  Eventually a market that is exclusively adversely selected against cannot be sustained and the societal benefits of that insurance market disappear.
  • Increasing the Likelihood of Making Victims Whole.  One rationale for mandatory auto insurance is increasing the likelihood that victims of negligent drivers will be made whole.  If the auto insurance market was voluntary some individuals injured in automobile accidents would be unable to collect damages from uninsured motorists (aka “free loaders” who derive benefit from others purchasing insurance).  From a systemic point of view, some drivers might opt out of driving due to the risk of uncompensated injury or property damage (thereby reducing the aggregate benefits of everybody driving).  Mandating auto insurance results in more drivers and reduces the free loader problem.
The rationale and reasoning for mandatory cyber insurance for payment card breaches is the same.  Ultimately, information security is not about preventing all security incidents; it is about minimizing the risk and impact of security incidents.  There is no such thing as perfect security and risk will always remain in the payment card system.  Breaches will happen (just as there will always be automobile accidents). 
There is also a diminishing return with respect to efforts to prevent security breaches.  Organizations cannot cost-effectively build “Fort Knox” just as drivers cannot afford to military grade armored vehicles.  Once a reasonable level of security is achieved, at a certain point, it is more cost-effective and efficient to accept a certain level of risk and insure at least a portion of it.
In addition, the payment card system could face an unfavorable risk concentration that could undermine the adoption and use of payment cards in the long run.  If merchants legitimately fear they could be put out of business because of a payment card breach, they may choose to opt out.  I have already had clients inquire about payment card work-arounds (for one client, we explored the possibility of putting ATMs in each of this client’s restaurants).  A system of mandatory cyber insurance for payment card breaches can alleviate this concentration problem and strengthen the payment card system overall.
What types of companies are purchasing cyber insurance currently?  While the profiles may vary, it is likely that many of the “early adopters” are companies who want the insurance because they feel that they are prime targets with a lot of payment card information or that their security may not be adequate.   It is possible that insurance underwriting can weed out these higher risk companies and decrease adverse selection.  However, especially in the small and medium business market, due to competition and other factors, underwriting requirements and standards have decreased significantly.  Even where more involved underwriting occurs, because of the ever-shifting nature of cyber risk and the complexity of security, it is often very difficult to truly understand a company’s risk.  All of these factors could lead to “adverse selection,” and the ultimate question for the insurance industry (especially in light of increasing litigation and regulatory actions) is whether the cyber insurance market is sustainable without a very wide base of insureds.  Like automobile insurance, mandating cyber insurance can help balance the market out to the benefit of insureds, carriers and society as a whole.
Finally, as with auto insurance, mandating cyber insurance across the board can increase the likelihood that the victims of a payment card breach can be made whole.  Some organizations that get hit with a breach, because of financial stress associated with responding to a breach, are not going to be able to compensate individuals or issuing banks (for card reissuance costs or fraud).   Moreover, under the current system, most issuing banks whose cards are exposed get pennies on the dollars for the losses they suffer because of a breach.  Mandatory cyber insurance can address both of these issues.  With risk spread throughout the system and every organization being covered, breached companies will be able to avoid bankruptcy.  In addition, if insurance is available in every case, it may be possible to adjust card brand recovery processes to allow issuing banks to recover more after a security breach.
How Might this Work?
Some readers might blanch at the idea of mandated insurance, and most automatically think the mandate would come from the government.  While a government mandate would work in this context, in the payment card context, the card brands are at the top of the pyramid and can impose requirements for merchants that want to accept payment cards.  Like the PCI-DSS standard itself, the card brands could agree to require merchants to have some level of cyber insurance.  That said, because all of the participants in the payment card system have a stake when it comes to payment card breaches, it may be possible to spread the cost of insurance across all of the stakeholders (merchants, merchant banks, processors and issuing banks).   Overall, while there are a lot of details that would have to be worked through, a mechanism (the card brand’s operating regulations and associated payment-card related agreements) to mandate cyber insurance exists, and governmental involvement is not necessary (although if action is not taken, government action may be the result).  Finally, the rationale laid out above applies equally to security breaches involving other types of personal information, including financial and healthcare information — however, that is a conversation for another day.

Share Blog Posts in Social Media using AddThis

In my opinion, AddThis is the most complete social sharing service allowing to share your posts in more than 270 different social networks. I use the AddThis widget, so if you would like to see a live demo, please scroll down to the bottom of this post to see the AddThis sharing buttons.


This tutorial will show you how to register and add this feature on your blog and you will get to know some of the customization options of these buttons. So let's get started!

Getting the AddThis share buttons code

Step 1. Visit the https://www.addthis.com/get/sharing page.
Step 2. To get the sharing buttons and to access the AddThis sharing stats to find out how many people shared your post by using the AddThis feature, click on the "Create account" button.

create addthis account

The site will ask you to make a small registration. Fill out the information to register. It's quick, simple and it's free. To finish the registration, click on the Register button.

register addthis

Step 3. After you've been logged in, right below the "Get sharing buttons for", choose the "A website" option.

addthis share buttons

Step 4. In the "Select style" section, choose the buttons style that you think would look the best on your site/blog. Please note that on the right side you can see a preview of these buttons.

addthis sharing buttons

Step 5. After you have chosen the style, the site will provide a code - click on the "Grab it" button to copy it.

addthis code

The code provided will look like this:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-XXXXXXXXXXX"></script>
<!-- AddThis Button END -->
Now that you have selected and set up your AddThis sharing buttons, let's add them in the footer of the posts.

Adding the AddThis sharing buttons on Blogger

Step 1. Access your Blogger Dashboard and go to Template, then click on the Edit HTML button on the right:

blogger template

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

Step 3. Type the following line inside the search box and try to find the second occurrence of it - hit Enter:
<div class='post-footer'>
Step 4. Just above this line, add the code for the AddThis social sharing buttons.

Note: If you want to add at the beginning of your posts, add the code below the second:
<div class='post-header'>

How to add more AddThis buttons

To add more buttons, simply choose the button for that social network and add the code just before the </div> tag (refer to the step 5 from above).

Some examples:
<a class="addthis_button_linkedin"></a> /* linkedin button */
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> /*gplus button */
<a class="addthis_button_digg"></a> /* digg button */
<a class="addthis_button_stumbleupon"></a> /* stumbleupon button */
<a class="addthis_button_print"></a> /* print button */

CSS3 AddThis Share Buttons

You can add just a single button, so that when the reader hovers over it, a menu will open with the options of social networks to share the post.

css3 share buttons, addthis

Visit this page for a demo.

Step 1. Go to Template > click on the Edit HTML button > press the CTRL + F keys and search:
<div class='post-footer'>
Just above this line, paste the following code:
<style type='text/css'>
.addthis_share_btn a, .addthis_share_btn a:visited {
background: #FF5C00; /* background color of the button */
display: inline-block;
padding: 6px 12px;
font-family: arial,helvetica,lucida,verdana,sans-serif;
font-size: 12px;
line-height: 1em;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.addthis_share_btn a:hover {
background: #D45500; /* background color on mouse hover */
color: #fff;
}
.addthis_share_btn a:active { top: 1px; }

.addthis_share_btn a span, .addthis_share_btn:visited a span {
background: url(http://www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left;
padding: 1px 0 1px 18px;
}
</style>
<!-- AddThis Share Button -->
<div class='addthis_toolbox addthis_share_btn'>
<a class='addthis_button_compact' href='http://addthis.com/bookmark.php'>
<span>Share</span></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!-- End AddThis Share Button -->

Customization

- To change the color of the button according to the colors of your template, modify the color value in red.
- If you want to change the "Share" text, replace the text in blue.

Step 2. Save the changes by clicking on the Save template button and you're done!

Senin, 24 Februari 2014

Deutsche Telekom releases voice and text message encryption app

German parent company of T-Mobile responds to privacy concerns in wake of Edward Snowden's revelations
T-Mobile shop
The encryption app will launch for Android phones first and iOS devices later. Photograph: Peter Macdiarmid/Getty Images
Deutsche Telekom, the German parent company of the mobile carrier T-Mobile, is releasing a new app for all its users that encrypts voice and text messages.
The company is acting on privacy concerns raised in the wake of the Snowden revelations with the creation of the app, which encrypts each voice or text exchange between two devices using a unique code.
The app will be officially unveiled at the CeBIT technology trade fair in Hanover, Germany, in mid-March. It is not yet clear when it will be made available to customers, but it will initially launch for Android phones and come to iOS devices later.
The service will be run by Deutsche Telekom's enterprise unit T-Systems in co-operation with Germany's Sichere Mobile Kommunikation mbH (GSMK), a provider of encrypted phone services and devices.
"To the best of my knowledge, this marks the first time that a major network operator throws its full weight behind end-to-end mobile voice encryption," GSMK's chief executive, Bjoern Rupp, said on Monday.
"This is not just in the form of a specialised niche product, but in the form of a mass-market-compatible product that will be rolled out to all of its customers," he told Reuters at the Mobile World Congress in Barcelona, the world's biggest annual phone industry conference.
Deutsche Telekom's own secure communications unit provides handsets to the German government, such as the modified Android phone used by Angela Merkel. But the version of the "Merkelphone" that the company sells to private buyers costs €1,700, preventing widespread adoption.

Rene Obermann, Deutsche Telekom's CEO, has been vocal about the need for his company to throw itself behind privacy efforts. In November he went so far as to call, in an editorial in the FAZ newspaper, for Germany to wall its internet off from the US and to create Europe-only clouds. But critics point out that T-Mobile US, a wholly owned subsidiary of Deutsche Telekom, has worked with American intelligence agencies in the past.

Minggu, 23 Februari 2014

CSS3 Transition Property Basics

You can see on various blogs an interesting effect on some links. Most of the time, when you hover over a link, something changes in its style: it will either change its color or background or will become underlined. What about this cool effect that consists in gradual transition from one style to another, as you can see in this demo below:
Hover Over Me!

This transition is achieved by using the CSS3 transition property - property which is supported in all major browsers like Chrome, Firefox, Opera, Safari (for Safari we will need the -webkit- prefix to get this effect).

The CSS3 Transition Syntax

The syntax of the transition supports four values:
- the property affected by the transition, such as color, border, background, width, etc.
- the duration of this transition in seconds, i.e., how long it will take to change your style completely
- the delay time for the transition to be executed, also in seconds, i.e., how long it takes for the transition to start when the mouse hovers over that element;

Check out the code below:
.example {
 transition-property: width; /* property that undergoes a transition */
 transition-duration: 2s; /* duration of the transition */
 transition-timing-function: linear; /* timing-function */
 transition-delay: 0; /* length of time to delay the start of a transition */
/* now we will repeat the entire declaration with the -webkit- prefix for the effect to work in Chrome and Safari */
 -webkit-transition-property: width;
 -webkit-transition-duration: 2s;
 -webkit-transition-timing-function: linear;
 -webkit-transition-delay: 0;
}
In the example above, the elements with the class .example will become wide within two seconds as the mouse passes over them.

When we define the style of a link, usually we need to use the a:link selector, and when defining the style when the mouse is over the link, we need to use the :hover selector. However, the transition can be used in any HTML element, not just links. To make the transition effect to work properly, we should define two blocks of style for that element, i.e. the normal style for a tag/id/class and the style on mouse :hover for a specific tag/id/class.

For example:
tag, #id, .class {
/* insert here the styles that you want for the selector */
/* insert below the transition effects */

}
tag:hover, #id:hover, class:hover {
/* Insert here the styles for when the mouse is over the element */
/* here it is not necessary to repeat the declaration of the transition */

}
You can add the same style on multiple selectors separated by commas as I have done above, although that's not necessary.

Below are some transition examples with their respective codes.

I will not use the transition-timing-function in these examples because it makes no difference, as the first value is the duration in seconds and the second is the delay.

Example 1

Transition example

/* with a single property */
#example1 {
 background-color: #FFFF00;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color;
-o-transition-duration: 2s;
}
#example1:hover {
background-color: #B5E2FF;
}

Example 2

Transition example

/* with four properties and delay */
#example2 {
background-color: #9c3;
border: 8px solid #690;
padding: 20px;
color: #fff;
-moz-transition-property: background-color,border;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color,border;
-webkit-transition-duration: 1s;
-o-transition-property: background-color,border;
-o-transition-duration: 1s;
}
#example2:hover {
background-color: #690;
border: 8px dashed #fff;
color: #FFFF00;
-moz-transition-property: background-color,border;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,border;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,border;
-o-transition-duration: 2s;
}
Example 3

Transition example

/* with seven properties and delay */
#example3 {
padding: 15px;
background-color: #FF7CA6;
font-size: 16px;
width: 30%;
font-weight: bold;
color: #fff;
height: 20px;
-moz-transition-property: background-color,width,height,padding,font-size,color;
-moz-transition-duration: 1s;
-webkit-transition-property: background-color,width,height,padding,font-size,color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color,width,height,padding,font-size,color;
-o-transition-duration: 1s;
}
#example3:hover {
background-color:#9c3;
width: 60%;
height: 60px;
padding: 50px;
font-size: 30px;
color: #FFFF00;
-moz-transition-property: background-color,width,height,padding,font-size,color;
-moz-transition-duration: 2s;
-webkit-transition-property: background-color,width,height,padding,font-size,color;
-webkit-transition-duration: 2s;
-o-transition-property: background-color,width,height,padding,font-size,color;
-o-transition-duration: 2s;
}
Example 4

Transition example

/* with all the properties simultaneously */
#example4 {
padding: 15px;
background-color: #9c3;
color: #fff;
font-size: 16px;
width: 30%;
font-weight: bold;
transition: all 2s;
-webkit-transition: all 2s;
}
#example4:hover {
background-color: #FF7CA6;
color: #242424;
width: 60%;
}
Final words:

- the transition declarations need to appear in the CSS. In Blogger, the CSS is located before ]]</b:skin>
- as you can see in the examples above, you can assign different rules for the transitions of different elements in a single rule - just separate them with commas.
- it is not mandatory to use the four properties in the transition declaration, but their order must always look like this: property/duration/timing-function/delay.
- the duration and delay values ​​must be expressed in seconds, but sometimes a second is a long time for a transition. In this case you can use values with milliseconds, for example, .5s means half a second.
- In small time intervals, the timing of the transition-function property does not give a remarkable effect being most useful only in more advanced animations. The possible values are either ease (the default, which makes the transition with a slow beginning, then gets faster and ends slowly), linear (the same transition speed from beginning to end), ease-in (transition begins slowly and then the speed increases), ease-out (transition starts fast and slows down at the end) and ease-in-out.

Sabtu, 22 Februari 2014

Add Author's Profile Picture and Name in Multi Author Blog

In this tutorial we will see how to add the author's profile picture and name on a Blogger blog just below the post title. This can make your blog not only look more personal but attaching an image to your blog posts in Blogger can help visitors identify, and perhaps gain a level of trust with you. Also, this could be a great addition to blogs with multiple authors, since the info for each of the publisher will be shown below the titles of their respective posts and this way, they will get the proper credit for their work.
multi-author blog, blogger tricks

Related: How to Add or Invite Multiple Authors on Blogger

Adding the Author's Profile Picture / Avatar and Name in Blogger

Step 1. From the Blogger Dashboard, go to "Template" and click the "Edit HTML" button.


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Paste the following code inside the search box, then hit Enter to find it:
<span class='post-author vcard'>
Just below this line is the rest of code, which should look something like this:
              <span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if> 
</span>
Note: If you are using a custom template, it could look something like this:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/>
</span>
</b:if>
</span>
Step 3. Now that you found the code, delete it. Please note that it should start and end with the tags marked in yellow. This code is repeated two times and you will need to remove both occurrences.

Step 4. Next, search for this line (you'll find it twice and you should stop at the second one):
<div class='post-header-line-1'/>
Step 5. Just below the line, paste the following code:
<span class='post-author vcard'>
<b:if cond='data:post.author == &quot;AuthorName&quot;'>
<span class='author'><a href='Author-Profile-URL'><img src='Author-Image-URL'/></a></span>
</b:if>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span>
Replace the AuthorName text with the EXACT name that appears on the Blogger profile, i.e., the one that appears in the posts or comments. If it is added in a different way, Blogger will not recognize the username, nor the image and the code will not work.
To display the author's pic, add the URL of the author's Blogger profile and the image URL by replacing the text in blue. I recommend you to use an image with a maximum height of 40px and 40px wide. Once done, the photo of the author will appear next to the "posted by" text just below the post title.

Now for those who maintain a blog with more than one author, you will need to add the following code just above <b:if cond='data:top.showAuthor'>
<b:if cond='data:post.author == &quot;AuthorName2&quot;'>
<span class='author'><a href='Author2-Profile-URL'><img src='Author2-Image-URL'/></a></span>
</b:if>
If you have more than two authors, repeat this block of code for each author that you want to add.

Let's go ahead and add the CSS styles...

Step 6. Search (CTRL + F) this tag:
]]></b:skin>
Just above the ]]></b:skin> tag, paste the following code:
.post-header {
width: 100%;
padding: 2px 5px;
margin: 5px;
clear: both;
float: left;
}
.author img{
float: left;
margin: 0px 5px 10px 0px;
max-width:100%;
height:45px;
border-radius: 10px;
}
.post-author{
color:#777;
font-size: 13px;
font-style: italic;
}
.post-author a {
color:#777; }
Note: to change the size of avatar, increase/decrease the 45px value.

Step 7. Click on the "Save template" button and that's it. You should see now the profile picture and name of the Blogger author below the title of each post.

PageRank Checker - Check Your Google Page Rank

PageRank is an algorithm used by Google Search to rank websites in their search engine results. PageRank was named after Larry Page, one of the founders of Google. PageRank is a way of measuring the importance of website pages. According to Google:
"PageRank works by counting the number and quality of links to a page to determine a rough estimate of how important the website is. The underlying assumption is that more important websites are likely to receive more links from other websites."

Source: Wikipedia

Briefly, the PageRank is an assessment of the importance of a web page. This relevance is calculated and published on a scale from 0 to 10. Google basically takes into account the number of links that each page receives, however, it's no use getting any links, it is important that these links are from quality sites which are related to your links, preferably internal links. A greater importance has the quantity of internal links, linked by other websites, which happens when you create a post and someone publishes the link that redirects to this posting that you created. Therefore, the more links your blog or site has, the higher is the probability of having a good PageRank.
pagerank, check page rank

Now that you understand what PageRank is, how about checking yours?

You can easily calculate your PageRank and verify the importance of your page.
Just enter the address of your website / blog below and check it out:

Check Page Rank of your Web site pages instantly:

This page rank checking tool is powered by Page Rank Checker service

In case you want to add a button to your blog to promote your PageRank, please visit this page: PageRank Buttons

Kamis, 20 Februari 2014

The difference between white hat SEO and black hat SEO

The search engine optimization (SEO) is a good chance to promote your blog on Google search results and other search engines. For those who don't understand how SEO works, I've posted some articles on this blog that may help, but it's important to understand that there are good and bad techniques that could have a direct impact on your ranking. So, in this post I'll talk about the terms known to those who are familiar with SEO - the black and white hat - and we will get to know what's good and what is not when we think about optimizing our website and its content.

black hat and white hat, seo techniques

What is black hat seo?

From the 'SEO dictionary', the term black hat has to do with the abusive techniques that will force the search engines to look at a specific site and rank it. This might work at first, but the algorithms can already see some of these techniques that have become common for a fast result.

Such practices to trick the search engines are, for example, the excessive use of keywords, especially in headings and subheadings; transparent keywords to the user - the so-called hidden text, automatically generated content, pages redirecting automatically to other content and more.

What is white hat seo?

The white hat has to do with the good techniques in the 'eyes' of search engines. These are considered ethical techniques for the ranking, helping, thus, the positioning of a website or blog. However, working the white hat is a process that requires dedication and results may take longer to appear (this is why so many people opt for black hat in order to 'try' something more 'effective') but the results could be much more stable and satisfactory.

Keep in mind that Google has good tricks up its sleeve to penalize anyone who doesn't act in accordance with the policies and rules of their website - this includes removing your page from any of the positions. Fair enough, after all, why Google would 'reward' somebody with the top spot if he doesn't provide good content for his users and, at the same time, doesn't meet the requirements of the algorithm?

For those who are interested and want to stay on top of Google search results, visit this webmaster guidelines page. There, you can find further information about how to create a good content, how the design of your blog/site should be and how to work with your links. There you can also find mentions about black hat techniques.

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