Gudang Tutorial Blog

Lanjutan dari artikel kemarin tentang Forum Pagerank Tinggi untuk Meningkatkan Backlink, Alexa dan Pagerank. Berikut list forum dofollow yang dapat anda manfaatkan umtuk mendapatkan backlink dan meningkatkan SEO blog.

Forum Dofollow

• http://forum.kompas.com/
• http://forum.detik.com/
• http://forum.chip.co.id/
• http://forum.antaranews.com/
• http://www.rumah123.com/forum/
• http://forum.hon.co.id/
• http://forum.vibizportal.com/
• http://www.videogamesindonesia.com/forum/
• http://forum.tempo.co/

Buru register dan posting di forum tersebut. Don't forget tanam link blog anda di signaturenya...
Ciaoo...

Title otomatis pada popular post adalah salah satu usaha agar blog seo friendly.
Karena mesin pencari merambah link yang berada di sidebar kanan dan di butuhkan title atau deskripsi dari link tersebut.
Berikut cara membuat title otomatis pada popular post :

1. Masuk Akun Blogger
2. Pilih Template
3. Klik EDIT HTML
4. Cari Kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts'  
5. Ganti Kode

<b:widget id='PopularPosts1' locked='false' title='Popular Posts'
bla...bla...bla ( sampai kode di bawah ini )
</b:includable>
</b:widget>

6. Ganti kode di atas dengan kode di bawah ini :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank' expr:title='data:post.title'>
                    <img alt='thumbnails' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank' expr:title='data:post.title'>
                    <img alt='thumbnails' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
</b:widget>

6. Simpan Template.

Semoga tutorial nya bermanfaat. baca juga cara membuat title otomatis pada judul post.

Agar kelihatan atraktif para sobat blogger pasti tertarik dengan efek slide pada background.
Background tidak statis itu-itu saja tapi berganti gambar lain.

Jika sobat ingin mengetahui Cara Membuat Background Slideshow pada Blog simak yang berikut:

1. Siapkan 3 sampe 5 url wallpaper/background seukuran desktop
2. Load background dengan jquery dengan cara, letakkan kode berikut di atas </head>

<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js'
type='text/javascript'></script>
<script
src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'
type='text/javascript'></script>

3. Ubah css body minimal menjadi,

body {

background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYt3gvrmkGwEFFpzssPWYVA8kwxzJk5ZclYt91ZSlFEBbher2IAjuUxv3m2Z0Ll-ZTPEgQHXeEKVOGGkTF5rMVYHmkuWeAvll7wC2Sk_6WtsAwKICEqeteBC8znoZefLm8K3CWKSbL6mI/s1600/eagle.jpg)
repeat-x fixed top
center;
-moz-background-size:100%;
-webkit-background-size:100%;
-o-background-size:100%;
background-size:100%;
}

3. Letakkan script berikut pada elemen layout "html/javascript"

<script type='text/javascript'>
var ssBG={
gbr:[
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwKX3FTEbLyFYLaU3oprAbyOTZPSLMnTPuRPpNKFfgSYFeRdE_YGgTMAK_ljfTwCm30oeAZq8vBgufRWywCcbq__LBAw1GcmkQA8K95aS4Q7Aa0cZY1jmgDKFivGF_q6PJS6L9Ls1dpP8/s1600/eagle1.jpg"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEXMy8EGy2AWlBOOC9fNtDUR-90A2nCf-UUSgaBBjidB3HL9Wd-VPjRkNOtPV2RNYgj4BizFSLocdnLsc-dhV2_tv_S2Fly2NKQC8YEzV-u6mITosTdZx_xUpWqXbB-Nfbn2GaYpLFN_M/s1600/eagle2.jpg",

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTrmpS_j66ASs1P33Bz74CfzSvUPjzat9hHXKQsI55tLk9D2Yzffe4AlzKIgtMf7xvMVfnMKJBwzuutAOjZMDtQk1UWcwS1KxlLmzRSsazTptqnzyRxYvPtPG2GB0IsVneEXreO59G7GA/s1600/eagle3.jpg"
],
now:0,
SlideMyBG:function(list,style,speed,bgPos,bgSize,bgRep){
if(!ssBG.SlideMyBG.hasRun){ssBG.SlideMyBG.hasRun=true;
if(list==null||list==''){list=ssBG.gbr}else{if(typeof
list!='object'){list=ssBG.gbr}}
if(style==null||style==''){style='random'}
if(speed==null||speed==''){speed=5000}
if(bgPos==null||bgPos==''){bgPos='top
center'}
if(bgSize==null||bgSize==''){bgSize='100%'}
if(bgRep==null||bgRep==''){bgRep='repeat'}
ssBG.gaya=style;ssBG.jeda=speed;ssBG.gbr=list;ssBG.pos=bgPos;ssBG.size=bgSize;ssBG.rep=bgRep;
ssBG.opt={'background-attachment':'fixed','background-repeat':ssBG.rep,'-moz-background-size':ssBG.size,'background-size':ssBG.size};
}
if(ssBG.gaya=='random'){ssBG.gbr=ssBG.gbr.sort(function(){return
0.5-Math.random()})}
var img=new Image();var
brp=ssBG.gbr.length;if(ssBG.now>=brp){ssBG.now=0}
var
gbrSkrng=ssBG.gbr[ssBG.now];ssBG.now++;
if($('#bg-fader').length==0){$('body').prepend('<div
id="bg-fader"
style="opacity:0.0;top:0;left:0;width:100%;height:100%;background-color:'+$('body').css('background-color')+'"></div>');$('#bg-fader').css(ssBG.opt);$('body').css(ssBG.opt)}
$(img).load(function(){
$('#bg-fader').css({'background-image':'url('+gbrSkrng+')','background-position':ssBG.pos}).animate({opacity:1.0},'slow','linear',function(){
$('body').css({'background-image':'url('+gbrSkrng+')','background-position':ssBG.pos});
$(this).animate({opacity:0.0},'slow','linear');
setTimeout("ssBG.SlideMyBG()",ssBG.jeda);
});
}).attr('src',gbrSkrng).error(function(huh){ssBG.SlideMyBG()});
}
};
</script>
<script
type='text/javascript'>$(window).load(function(){ssBG.SlideMyBG()})</script>

4. Langkah terakhir save dan lihat hasilnya.

Tambahan: agar background blog terlihat tidak kabur, pasanglah background
seukuran wallpaper desktop.

Blockquote dapat  di modifikasi bermacam2. Pada postingan yang akan saya berikan kali ini yaitu blockquote efek neon.


Cara:

1. Login blog
2. Template > Edit html
3. Letakkan kode css di dalam/bawah kode .post blockquote {

color:#ccc;background:transparent;box-shadow:#fff 0px 0px 4px, #fff 0px 0px 6px, #fff 0px 0px 10px, #fff 0px 0px 20px;

sehingga menjadi kode nya seperti ini,

.post blockquote {
color:#ccc;background:transparent;box-shadow:#fff 0px 0px 4px, #fff 0px 0px 6px, #fff 0px 0px 10px, #fff 0px 0px 20px;
} 

4.  selanjutnya, letakkan kode css di dalam/bawah kode  .post blockquote:hover {

color:#ccc;
background:transparent;box-shadow:rgb(5, 213, 255) 0px 0px 4px, rgb(5, 213, 255) 0px 0px 6px, rgb(5, 213, 255) 0px 0px 10px, rgb(5, 213, 255) 0px 0px 20px;

sehingga menjadi kode nya seperti ini,

 .post blockquote:hover {
color:#ccc;
background:transparent;box-shadow:rgb(5, 213, 255) 0px 0px 4px, rgb(5, 213, 255) 0px 0px 6px, rgb(5, 213, 255) 0px 0px 10px, rgb(5, 213, 255) 0px 0px 20px;
}

5. save template

Blockquote adalah kutipan dari artikel yang dianggap penting atau memiliki arti khusus.
Tanda yang digunakan untuk menandai suatu tulisan yang penting, sehingga tampak berbeda dari tulisan yang lainnya.


CARA:
1. login blog
2. template > edit html
3. cari .post blockquote {
4. gantikan dengan kode

.post blockquote {
-webkit-user-select:text;
-moz-user-select:text;
-webkit-animation-name: shake;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
background:#424242;
padding:15px;
border-top:3px solid #3c98e8;
border-bottom:5px double #366dbb;
border-right:1px dashed #3659a8;
border-left:1px dashed #3880d2;
color:#D1D1D1;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

5. cari post blockquote:hover atau blockquote a{ , di setiap template dapat berbeda kodenya. dan gantikan dengan kode css berikut:

blockquote:hover{
-webkit-animation-name: none;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
color:#fff;}
@-moz-keyframes shake /* Firefox*/
{
{ -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake /* IE9*/
{
10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
} 

6. Simpan template dan selesai.

Semoga tutorialnya bermanfaat.

Semua blogger pasti sudah mengerti apa fungsi label.
Yup bener, untuk mengelompokkan postingan ke dalam kategori.
Tutorial kali ini tentang modifikasi label blog dengan menambahkan sentuhan css.

Berikut caranya:
1. Login blogger
2. Template > edit html
3. letakkan kode css berikut di atas  ]]></b:skin>

.label-size {
  float:left;
  margin:0 0 7px 20px;
  position:relative;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:0.75em;
  font-weight:bold;
  text-decoration:none;
  color:#996633;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  padding:0.417em 0.417em 0.417em 0.917em;
  border-top:1px solid #d99d38;
  border-right:1px solid #d99d38;
  border-bottom:1px solid #d99d38;
  -webkit-border-radius:0 0.25em 0.25em 0;
  -moz-border-radius:0 0.25em 0.25em 0;
  border-radius:0 0.25em 0.25em 0;
  background-image:-webkit-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
  background-image:-moz-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
  background-image:-o-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
  background-image:-ms-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
  background-image:linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71',EndColorStr='#feba47');
  -webkit-box-shadow:inset 0 1px 0 #faeaba,0 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow:inset 0 1px 0 #faeaba,0 1px 1px rgba(0,0,0,.1);
  box-shadow:inset 0 1px 0 #faeaba,0 1px 1px rgba(0,0,0,.1);
  z-index:100;
}
.label-size:before {
  content:'';
  width:1.30em;
  height:1.39em;
  background-image:-webkit-linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));
  background-image:-moz-linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));
  background-image:-o-linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));
  background-image:-ms-linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));
  background-image:linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71',EndColorStr='#feba47');
  position:absolute;
  left:-0.69em;
  top:.2em;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  border-left:1px solid #d99d38;
  border-bottom:1px solid #d99d38;
  -webkit-border-radius:0 0 0 0.25em;
  -moz-border-radius:0 0 0 0.25em;
  border-radius:0 0 0 0.25em;
  z-index:1;
}
.label-size:after {
  content:'';
  width:0.5em;
  height:0.5em;
  background:#fff;
  -webkit-border-radius:4.167em;
  -moz-border-radius:4.167em;
  border-radius:4.167em;
  border:1px solid #d99d38;
  -webkit-box-shadow:0 1px 0 #faeaba;
  -moz-box-shadow:0 1px 0 #faeaba;
  box-shadow:0 1px 0 #faeaba;
  position:absolute;
  top:0.667em;
  left:-0.083em;
  z-index:9999;
}
#Label1 {
  height:210px;
}
.label-size:hover {
  background-image:-webkit-linear-gradient(top,rgb(254,225,141),rgb(254,200,108));
  background-image:-moz-linear-gradient(top,rgb(254,225,141),rgb(254,200,108));
  background-image:-o-linear-gradient(top,rgb(254,225,141),rgb(254,200,108));
  background-image:-ms-linear-gradient(top,rgb(254,225,141),rgb(254,200,108));
  background-image:linear-gradient(top,rgb(254,225,141),rgb(254,200,108));
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d',EndColorStr='#fec86c');
  border-color:#e1b160;
}
.label-size:hover:before {
  background-image:-webkit-linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));
  background-image:-moz-linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));
  background-image:-o-linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));
  background-image:-ms-linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));
  background-image:linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d',EndColorStr='#fec86c');
  border-color:#e1b160;
}

4. save template
5. Menuju ke layout > add gadget dan pilih 'Labels '
6. Konfigurasi labels pilih 'clouds'
7. save dan lihat hasilnya

Sobat pasti sudah pernah melihatnya daftar isi sesuai label dengan thumbnail bulat berputar yang seperti contoh gambar di atas.
Penasaran cara membuatnya?
Ea deh saya share...

1. Login blogger
2. Template dan edit html
3. Letakkan kode berikut di atas ]]></b:skin>

img.label_thumb{
float:left;
width:80px;
height:80px;
margin-left:4px;
margin-bottom:10px;
-webkit-border-radius: 210px;
-moz-border-radius: 210px;
border-radius: 50%;
text-align: center;
overflow: hidden;
-webkit-box-shadow:
inset 0 0 1px 230px rgba(0,0,0,0.6),
inset 0 0 0 3px #111111;
-moz-box-shadow:
inset 0 0 1px 230px rgba(0,0,0,0.6),
inset 0 0 0 3px #111111;
box-shadow:
inset 0 0 1px 230px rgba(0,0,0,0.6),
inset 0 0 0 3px #111111;
-webkit-transition: box-shadow 400ms ease-in-out;
-moz-transition: box-shadow 400ms ease-in-out;
-o-transition: box-shadow 400ms ease-in-out;
-ms-transition: box-shadow 400ms ease-in-out;
transition: box-shadow 400ms ease-in-out;
/*For IE < 9 so that we have some kind of effect */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
display: block;
outline: none;
-moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out; border:0
}
img.label_thumb:hover{
-webkit-box-shadow:
inset 0 0 0 0 rgba(0,0,0,0.6),
inset 0 0 0 20px #0dc3ff,
0 0 10px rgba(0,0,0,0.3);
-moz-box-shadow:
inset 0 0 0 0 rgba(0,0,0,0.6),
inset 0 0 0 20px #0dc3ff,
0 0 10px rgba(0,0,0,0.3);
box-shadow:
inset 0 0 0 0 rgba(0,0,0,0.6),
inset 0 0 0 20px #0dc3ff,
0 0 10px rgba(0,0,0,0.3);
/*For IE < 9 so that we have some kind of effect */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-transform:rotate(360deg); -o-transform:rotate(360deg); -webkit-transform:rotate(360deg); transform:rotate(360deg); border:0; }
table.game_grid {font-family: "Trebuchet MS",tahoma,arial; margin: 10px 0px 10px 0px; width: 410px; border-width: 1px 1px 0px 1px; border-style: solid; border-color: #333;}
table.game_grid td { border-bottom: 1px solid #333; padding: 2px 4px 2px 6px; }
table.game_grid td.grid_heading { letter-spacing: 1px; font-weight: bold; color: #eee; font-size: 1.1em; background-color: #0dc3ff; text-align:center; }
table.game_grid td.grid_sysreqs { letter-spacing: 1px; font-weight: bold; color: #333; font-size: 1.1em; background-color: #ccc; text-align:center; }
table.game_grid td.grid_row_title { background-color: #eee; border-right: 1px solid #333;}

4. Letakkan kode berikut di atas </head>

<script type='text/javascript'>
    //<![CDATA[
    function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
    var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
    else thumburl='';}
    document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
    if(i!=(numposts-1))
    document.write('');}
    document.write('</div>');}
    //]]>
    </script>

5. Save template
6. Layout "html/javascript" dan letakkan script berikut

<script type='text/javascript'>var numposts = 8;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 70;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Tutorial%20Blog?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

kode berwarna pada script ganti dengan nama label dan jumlah thumbnail yang ingin di tampilkan.
7.  save dan lihat hasilnya

Silahkan dicoba, semoga bermanfaat..