Start Making money with facebook page by starting a viral website 2016

We all know 2015 was a viral year of millions of links on facebook, whenever i login to my facebook i see viral links posted by famous pages even Tyga official facebook page they post their site links and make money with them.

So how they do it?
If you have your own facebook page with tons of likes than congrats you are ready to make money!!

You will have to create a website, you can create on wordpress.

Use this theme of wordpress:



Posts some lists and apply for adsense.

You are ready to make some bucks now! Good luck.

Blogger Aviso De Cookies: Cambiar o Ocultar La Barra


Blogger se comenzó a mostrar barra de cookies en todos los blogs, pero ¿por qué estoy escribiendo este artículo? porque su barra es muy feo y que está en la parte superior y se esconde todo el menú de navegación.

¿Cómo podemos hacer que sea vea mejor? blogger nos ha permitido cambiar el diseño de la barra si usted ve el diseño actual es muy grande y feo tambien oculta demasiado espacio en la parte superior.

He tratado de hacer que se vea mejor que no afectará a los visitantes.

<style>
    #cookieChoiceInfo {
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0.60) !important;
        position: fixed !important;
        left: 0 !important;
        right: 0;
        bottom: 0;
        overflow: hidden;
        top: inherit !important;
        line-height: 25px !important;
        padding: 0px 30px 0px 30px !important;
        font-weight: 400 !important;
        width: auto !important;
    }
    .cookie-choices-info .cookie-choices-inner {
        padding: 10px 8px !important;
    }
</style>

Copiar el codigo y pegar en el area de administracion:



Y si quieres ocultar la barra copia y pega este codigo:

<style>
    #cookieChoiceInfo {
        display: none !Important;
    }
</style>

Si tienes alguna duda deja el comentario abajo, Muchas gracias por visitar.
Media Queries Css Code




/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Top 5 Premium Blogger Templates

Css Slider For Blogger



Copy all the code and paste into your template or from layout area add a gadget and paste all the code.



<div id="templateify">
  <nav class="templateifynav">
    <ul>
      <li>
        <input type="radio" name="btn" value="one" checked="checked"/>
        <label for="btn"></label>
        <figure>
          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/01_Fabio_Basile.jpg"/>
          <figcaption>
            <h4>Fabio Basile</h4>
              <nav role='navigation'>
                <p>iPhone 6 Infinity</p>
              </nav>
          </figcaption>
        </figure>
      </li>
      <li>
        <input type="radio" name="btn" value="two"/>
        <label for="btn"></label>
         <figure class="entypo-forward">
          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/08_Brian_Miller.jpg"/>
          <figcaption>
            <h4>Brian Miller</h4>
              <nav role='navigation'>
                <p>TypeTi.me</p>
              </nav>
          </figcaption>
        </figure>
      </li>
      <li>
        <input type="radio" name="btn" value="three"/>
        <label for="btn"></label>
        <figure class="entypo-forward">
          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/05_Nicolas_Quod.jpg"/>
          <figcaption>
            <h4>Nicolas Quod</h4>
              <nav role='navigation'>
                <p>Iphone 6 - Notification - iOS 7</p>
              </nav>
          </figcaption>
        </figure>
      </li>
      <li>
        <input type="radio" name="btn" value="four"/>
        <label for="btn"></label>
         <figure class="entypo-forward">
          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/04_Joffrey.jpg"/>
          <figcaption>
            <h4>Joffrey</h4>
              <nav role='navigation'>
                <p>▽</p>
              </nav>
          </figcaption>
        </figure>
      </li>
      <li>
        <input type="radio" name="btn" value="five"/>
        <label for="btn"></label>
         <figure class="entypo-forward">
          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/09_Jared_Long.jpg"/>
          <figcaption>
            <h4>Jared Long</h4>
              <nav role='navigation'>
                <p>Don't drop your iPhone Infinity</p>
              </nav>
          </figcaption>
        </figure>
      </li>
      <li>
        <input type="radio" name="btn" value="six"/>
        <label for="btn"></label>
         <figure class="entypo-forward">
          <img src="https://dl.dropboxusercontent.com/u/330966/static/iphone6infinity/new/02_Charles_Treece.jpg"/>
          <figcaption>
            <h4>Charles Treece</h4>
              <nav role='navigation'>
                <p>iPhone 6 Infinity Side Status Bar</p>
              </nav>
          </figcaption>
        </figure>
      </li>
    </ul>
  </nav>
</div>
        <h2>Css Slider For Blogger by templateify.com <a href="http://blog.templateify.com/2013/11/css-slider-for-blogger.html" target="_blank">Get This Slider</a> </h2>

        <style>
/*
Css Slider By Templateify
 http://www.templateify.com/
*/

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
@import url(http://weloveiconfonts.com/api/?family=entypo);
*, *:before, *:after {
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#templateify {
  position:relative;
  width:600px;
  height:300px;
  margin:0 auto;
  top:100px;
  background:white;
  -webkit-box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  -moz-box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:   translate3d(0, 0, 0);
  -ms-transform:    translate3d(0, 0, 0);
  -o-transform:     translate3d(0, 0, 0);
  transform:        translate3d(0, 0, 0);
}
#templateify:after {
  content:'';
  position:absolute;
  bottom:24px;
  right:0;
  left:0;
  width:100%;
  height:1px;
  background:rgba(255,255,255,0.35);
  z-index:3;
}
#templateify ul {list-style-type:none;}
input[type="radio"], input[type="radio"] + label {
  position:absolute;
  bottom:15px;
  display:block;
  width:20px;
  height:20px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  cursor:pointer;
}
input[type="radio"] {
  opacity:0;
  z-index:9;
}
input[value="one"], input[value="one"] + label {left:20px;}
input[value="two"], input[value="two"] + label {left:128px;}
input[value="three"], input[value="three"] + label {left:236px;}
input[value="four"], input[value="four"] + label {left:344px;}
input[value="five"], input[value="five"] + label {left:452px;}
input[value="six"], input[value="six"] + label {right:20px;}
input[type="radio"] + label {
  background:rgba(255,255,255,0.35);
  z-index:7;
  -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -webkit-transition:all .3s;
  -moz-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s;
}
[class*="entypo-"]:before {
  position:absolute;
  font-family: 'entypo', sans-serif;
}
figure[class*="entypo-"]:before {
  left:10px;
  top:5px;
  font-size:2rem;
  color:rgba(255,255,255,0);
  z-index:1;
  -webkit-transition:color .1s;
  -moz-transition:color .1s;
  -o-transition:color .1s;
  transition:color .1s;
}
a[class*="entypo-"]:before {
  top:8px;
  left:9px;
  font-size:1.5rem;
  color:white;
}
a:hover[class*="entypo-"]:before {
  color:white;
}
figure, figure img, figcaption {
  position:absolute;
  top:0;
  right:0;
}
figure {
  bottom:0;
  left:0;
  width:600px;
  height:300px;
  display:block;
  overflow:hidden;
}
figure img {
  bottom:0;
  left:0;
  display:block;
  width:600px;
  height:300px;
  z-index:1;
  -webkit-transform:translateX(600px);
  -moz-transform:translateX(600px);
  -ms-transform:translateX(600px);
  -o-transform:translateX(600px);
  transform:translateX(600px);
  -webkit-transition:all .15s .15s, z-index 0s;
  -moz-transition:all .15s .15s, z-index 0s;
  -o-transition:all .15s .15s, z-index 0s;
  transition:all .15s .15s, z-index 0s;
}
figcaption {
  display:block;
  width:270px;
  height:300px;
  padding-top:20px;
  background-image:radial-gradient(rgba( 255,255,255,0.3), transparent);
  background-size:600px 600px;
  background-repeat:no-repeat;
  background-position:-300px -150px;
  text-align:center;
  z-index:3;
  -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  -webkit-transform:translateX(300px);
  -moz-transform:translateX(300px);
  -ms-transform:translateX(300px);
  -o-transform:translateX(300px);
  transform:translateX(300px);
  -webkit-transition:all .35s;
  -moz-transition:all .35s;
  -o-transition:all .35s;
  transition:all .35s;
}
h4 {
  display:inline-block;
  padding:0 15px;
  color:white;
  font-family: 'Titillium Web', sans-serif;
  font-weight:300;
  font-size:2rem;
}
figcaption nav ul {display:block;padding-top:10px;}
figcaption nav ul li {display:inline-block;margin-left:5px;}
figcaption nav ul li a {
  position:relative;
  display:block;
  width:40px;
  height:40px;
  background:rgba(255,255,255,0.2);
  text-decoration:none;
  color:white;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  -webkit-transition:all .15s;
  -moz-transition:all .15s;
  -o-transition:all .15s;
  transition:all .15s;
}
figcaption nav ul li a:hover {
  background:rgba(255,255,255,0);
  -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
  -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
  box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
}
figcaption p {
  padding:50px 15px;
  font-family:'Titillium Web', sans-serif;
  font-weight:300;
  color:#333;
  background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
  background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:50% 0%;
}

input[type="radio"]:hover + label {
  background:rgba(255,255,255,0.6);
}
input[type="radio"]:checked + label {
  background:rgba(255,255,255,1);
  -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
}
input[type="radio"]:checked + label:before {}
input[type="radio"]:checked ~ figure img {
  z-index:2;
  -webkit-transform:translatex(0px);
  -moz-transform:translatex(0px);
  -ms-transform:translatex(0px);
  -o-transform:translatex(0px);
  transform:translatex(0px);
  -webkit-transition:all .15s, z-index 0s;
  -moz-transition:all .15s, z-index 0s;
  -o-transition:all .15s, z-index 0s;
  transition:all .15s, z-index 0s;
}
input[type="radio"]:checked ~ figure[class*="entypo-"]:before {
  z-index:3;
  color:rgba(255,255,255,0.5);
  -webkit-transition:color .5s;
  -moz-transition:color .5s;
  -o-transition:color .5s;
  transition:color .5s;
}
input[type="radio"]:checked ~ figure figcaption {
  z-index:8;
  -webkit-transform:translateX(0px);
  -moz-transform:translateX(0px);
  -ms-transform:translateX(0px);
  -o-transform:translateX(0px);
  transform:translateX(0px);
  -webkit-transition:all .35s, .7s;
  -moz-transition:all .35s, .7s;
  -o-transition:all .35s, .7s;
  transition:all .35s, .7s;
}
h2 {
  margin-top:150px;
  text-align:center;
  font-family: 'Titillium Web', sans-serif;
  font-weight:300;
  font-size:1.2rem;
}
h2 a {
  position:relative;
  color:tomato;
  text-decoration:none;
}
h2 a:after {
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:1px;
  background:tomato;
  -webkit-transition:width .1s;
  -moz-transition:width .1s;
  -o-transition:width .1s;
  transition:width .1s;
}
h2 a:hover:after {
  width:100%;
}
body {background:#f0f0f0;}
html, body {
  width:100%;
  height:100%;
}
        </style>

If you are having a problem leave a comment we will help you. 
How To Put Spoiler Button In Blogger


The spoiler has the function to hide and show text or images, and is very useful when trying to reduce space in the inputs or only if you want the text or image only see when pressed.


The first thing you need is the code:


<div><input value="Show" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Hide Content';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Content';}" type="button" /><div style="display: none;">HIDE CONTENT GOES HERE</div></div>

The red text you can modify the text, link or whatever you want to put.

Copy the code and paste in the new entry in Edit HTML in place of the entry where you want to show.
Modify the text to display when pressed and ready.


This would be the result, press and testing.




Thanks For Visiting
Move Your Blog Title




With this script we will make the blog title that appears in the browser title bar keep moving (canopy type).

You can see how it works just above in the title bar appears and see how the title of my blog moving.

To implement it in your blog, just go to Tempate> Edit HTML and expand widget templates without pressing both keys look: (Ctrl + F) to locate: </body> and just above paste the following code:


<script type='text/javascript'>
var txt=" YOUR BLOG TITLE.";
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</script>

You just have to put this red where the title of your blog and you can change the speed at number 100 major number, the title of your blog anger more slowly.