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..

Tutorial kali ini tentang label dengan thumbnail kotak simpel.

Caranya,simak yang berikut:
1. Login blog
2. Template > Edit html
3. Letakkan kode css berikut di atas  ]]></b:skin>

img.label_thumb {
float:center;
padding:3px;
background:#CCC;
border:1px solid #A4A4A4;
width:100px;
height:75px;
margin-right:10px;
margin-top:10px }
img.label_thumb:hover {
opacity:0.8;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity:0.8 }
4. Tambahkan kode script di bawah  ]]></b:skin>
<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. Simpan template
6. Masuk ke layout > HTML/JAVASCRIPT
7. Copast kode berikut

<script type='text/javascript'>var numposts = 6;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Blogging?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> 

Note:
* var numposts = 6 adalah jumlah thumbnail yang akan di tampilkan
* ... /feeds/posts/default/-/Blogging?.... adalah nama label yang akan di tampilkan

8. simpan dan lihat hasilnya.

Direktori adalah sebuah lokasi arsip yang sering kita kenal dengan folder. Pada istilah blogger, direktori adalah suatu tempat untuk memperkenalkan blog yang kita buat kepada khalayak ramai, dengan artian blog yang kita submit ke direktori tersebut berarti blog yang dimaksukkan kedalam sebuah arsip.



Tujuan dari blog direktori adalah untuk meningkatkan kinerja seo suatu blog. Dengan mensubmit blog kedalam suatu blog direktori, khususnya direktori blog indonesia, memungkinkan untuk meningkatkan pagerank  blog tersebut. Sedangkan dari sisi seo, pagerank berguna untuk menaikkan serp ( search engine result page )



PR 5

http://www.ji-indonesia.com

http://indonesia-blogger.com

http://www.salingsilang.com

http://www.rank.web.id

PR 4

http://www.blog-indonesia.com

http://direktori-indonesia.blogspot.com

http://www.alamatweb.com

direktoriweblog.blogspot.com

PR 3

http://www.kampungblog.com

http://www.salvida.com

http://www.seribusatu.com

http://www.indourl.com

http://www.situs.web.id

http://www.dir.web.id

http://direktori .resep.web.id

http://www.topblogindonesia.com

PR 2

-

PR 1

http://www.indotoplist.com

http://add.web.id

http://www.jalijali.com

http://www.indotop10.com

http://www.incari.com

Masih seperti artikel kemarin tentang modifikasi form feedburner, kali ini saya akan berbagi modifikasi form feedburner yang bisa di letakkan di bawah postingan blog.

1. Login blogger
2. Template > edit html
3. cari kode <data:post.body/> dan letakkan kode css dan html berikut di bawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}

.style{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwxNs29mbh7ivviqLMG40CSbDdPvnYsDk_L8wwszMFm00e3nfmZGGxK8qw6XTAEsgH_pgCofNyKqf-V44WSf0ra4qeR1woE5GsJn-D87kXrfdJMakCpCCn6cPK4aoFK5LZm7YkWrdVGY/s1600/email-icon.png) no-repeat scroll -8px center #fff;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
} .submit{
background-color:#ffc477;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:-3.44px;
border:1px solid #eeb44f;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
font-style:normal;
height:27px;
line-height:27px;
width:86px;
text-decoration:none;
text-align:center;
}

#emailwidget-outer {
background: none repeat scroll 0 0 #fff;
border: 1px solid #D3D3D3;
padding: 8px;
width:520px;
}

#emailwidget-outer td{
padding:3px 0;
}

</style>
<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>

<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=mig33eagle&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='mig33eagle'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='style' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>

<input alt='' class='submit' title='' type='submit' value='Submit'/>
</form>
</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=mig33eagle' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSfIBFX64XAFUqoQ3T6uXHHeuH5ej_luCZukluMF05IChVXyi6ScV15U_htzwcnBvYbxpBsy3nDWDEGLLhqSMLUHeu5AYFvcz-JmjUUVG2uxD7JhTUPW8VsZMp8gLHCwcwlwrnNKSv8e8/s200/rss.png'/></a>

<a href='http://twitter.com/mig33eagle' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJBovb5LCO_w3N6camwtYxxA8lfMGB-P0OoWyuEM0q59KP0nfg_-1aSQDiWjColLzvt_Vh5g6dqpiOGmmS42lVxSCCUjpvsi00b0UPODYZWLH_poFdXCV8PSrvR2vLFP1GexkWMVA6o8w/s1600/twitter.png'/></a>

<a href='https://www.facebook.com/pages/Mig33-Eagle/327653677253564' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLTs0GPuMZDz4WdHToJm2IBGkSvZnff5-LSA4fnCjS_xKsriZMbmHBtEGe7x4Xfx_Y6FSLpRKgWqrftW_vK0nvjmfMaCVHAF5vaLLPz4i1H3BiUl2t0U2FfHxTnggHeWH_1rimPSbzp5I/s200/facebook.png'/></a>

<a href='https://plus.google.com/u/0/+AshNareswari/posts' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVNGTIca0Qo8iXEQV8VkLydCVuiZSeCwpuAO-FF43EdW_n9ccRbP3-qsHqDpeN7rPLrYcOk0VR7EoXNJct9ErRXKGKUdgglE-qtY8ZUl2Zte2WW2DAKvRY8hqhpx95ie_kBbUHir_Gtk4/s1600/google+.png'/></a>

</td>
</tr>
</tbody></table>

<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #3333FF;'><a href='http://www.mig33eagle.com/2014/02/form-feedburner-di-bawah-post-blog.html' style='text-decoration: none;' target='_blank'><font color='#3333FF' decoration='none'>Get this widget</font></a></span></div>
</div></div>

</center></b:if>

4. Simpan template

note:
Ganti yang berwarna di kode atas dengan akun sosial anda.

Hasilnya:

Eagle Injector 11 Februari 2014



Update kali ini work di sc ISAT, XL, TSEL with PREMIUM PROXY (di tkp ane)

Silahkan bagi member yang mau download.

1. Download Eagle Injector 11 Februari 2014

2. Extract (password RAR: www.mig33eagle.com)

3. Copy dan Replace 'Injector.exe' yang ada di folder installan Eagle Vpn 'C:\Program Files\Eagle VPN\'

4. Jalankan seperti biasa.



 Note: HANYA WORK BUAT MEMBER EAGLE SSH :D



 Salam.

Disini ane mau share cara erotin kartu TSEL biar qos nya naek sampe 8mbps.

Karena deffaultnya qos TSEL yang ga punya paket apapun cuma 512kbps :D

Berikut langkah-langkahnya.

1. Siapin sc tsel (recomended S*MPATI, soalnya qos nya lebih besar daripada As)

2. Sms ketik FLASH ON 3000 ke 3636, tunggu ada sms lalu  balas FLASH YA.

3. Call *363*3*1*2*1#

4. Call *999*501#, tunggu ada sms lalu balas FLASH YA.

5. Sms ketik FLASH OFF ke 3636 tunggu ada sms lalu , balas FLASH YA.



Lalu untuk cek apakah berhasil atau tidak Sms ketik UL INFO kirim ke 3636.

Jika mendapat balasan 'Sisa Fair Usage anda berlaku hingga E99' maka QOS kartu ente udah 8mbps.

Jika belum silahkan ulangi lagi ampe bisa :D



 Salam.

Kemarin saya telah menuliskan tutorial tentang modifikasi email subscriber.

Sama dengan form feedburner. Widget ini diperuntukkan bagi yang ingin memperoleh konten gratis langsung dikirimkan via email..



Modifikasi form feedburner kali ini simpel:

1. Login blogger

2. Layout > add gadget >html/javascript

3. Masukkan kode css dan html berikut

<style>

.form {

border:1px solid #ccc; /* warna garis pinggir form */

background: #ffffff /* warna background form */

padding:3px; /* spasi form */

width:380px; /* panjang form */

height:180px /* tinggi form */

}

.rss {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK_Pw0Caj2KFGG4IgkYk74KH5papZgx0umFgfT9u8iLcnWTzBPWl4PInegLbw0y1aEyhjupo-oCKsOpX4f2Lz6KyS7lkrXlZ5Gksn-jLxIAtOnhfVIC2laLr4OizglyocgKtZQQGevikI/s1600/images.png") no-repeat bottom right;

}

.button {

background: #006699; /* warna tombol subscribe */

color: #FFFFFF; /* warna font subscribe */

font-size: 11px; /* ukuran font subscribe */

font-family: Arial, Tahoma, Verdana; /* font subscribe */

margin-left: 5px; /* margin kiri tombol subscribe */

border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */

padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */

font-weight: bold;

}

</style>

<div class="form">

<div class="rss">

<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/mig33eagle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg13TZtvdU7qjj0Icnr9bL-fUwkFpjNrEuzh4zNFAEZkRQ3UEhvw431ZKnMxoHdqDMY_hIT-bEMWRPp62yRhOxXe1xNr0vVWyL0K6F84jf7p3v3Xo6QOI3Vcwj4efmms6e9xaQMoSEwpOMJ/s800/005.png" /></a> <a href="http://feeds.feedburner.com/mig33eagle">GET UPDATE VIA RSS</a></div>

<div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIA EMAIL</div>

<div style="padding-left:10px">Dapatkan kiriman artikel terbaru langsung ke email anda!</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mig33eagle', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value="mig33eagle" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="GO" /></div></form>

<div style="padding-left:10px"><a href="http://feeds.feedburner.com/mig33eagle"><img src="http://feeds.feedburner.com/~fc/mig33eagle?bg=ff7c00&amp;fg=444444&amp;anim=0" width="88" height="26" style="border:0" alt="" /></a></div>

</div></div>

mig33eagle berwarna cyan diatas adalah nama akun feedburner, ganti saja dengan nama akunfeedburner anda.

4. Simpan dan selesai.



Hasil dari kode css dan html di atas:

Label pada blog dapat di katakan sebagai kategori. Dan fungsi label adalah mengelompokkan postingan berdasarkan kategori.



Beberapa hari yang lalu saya pernah posting cara membuat label dengan thumbnail bulat efek berputar.

Tutorial kali ini tentang label dengan thumbnail kotak simpel.



Caranya,simak yang berikut:

1. Login blog

2. Template > Edit html

3. Letakkan kode css berikut di atas  ]]></b:skin>

img.label_thumb {

float:center;

padding:3px;

background:#CCC;

border:1px solid #A4A4A4;

width:100px;

height:75px;

margin-right:10px;

margin-top:10px }



img.label_thumb:hover {

opacity:0.8;

filter:alpha(opacity=80);

-moz-opacity:0.80;

-khtml-opacity:0.8 }

4. Tambahkan kode script di bawah  ]]></b:skin>

<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. Simpan template

6. Masuk ke layout > HTML/JAVASCRIPT

7. Copast kode berikut

<script type='text/javascript'>var numposts = 6;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Blogging?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> 

Note:

* var numposts = 6 adalah jumlah thumbnail yang akan di tampilkan

* ... /feeds/posts/default/-/Blogging?.... adalah nama label yang akan di tampilkan



8. simpan dan lihat hasilnya.

Eagle Injector 9 Februari 2014



Update kali ini work di sc ISAT, XL, TSEL (di tkp ane)

Silahkan bagi member yang mau download.



1. Download Eagle Injector 9 Februari 2014

2. Extract (password RAR: www.mig33eagle.com)

3. Copy dan Replace 'Injector.exe' yang ada di folder installan Eagle Vpn 'C:\Program Files\Eagle VPN\'

4. Jalankan seperti biasa.



 Note: HANYA WORK BUAT MEMBER EAGLE SSH :D

 Salam.

Apa FeedBurner Email?



Email FeedBurner adalah layanan yang memungkinkan penerbit untuk menyampaikan konten pakan mereka ke pelanggan melalui email.



Siapa yang butuh layanan ini dan mengapa?



Blogger, podcasters, dan penerbit pribadi dan komersial yang ingin pelanggan untuk memiliki metode alternatif untuk menerima konten umpan - pengaturan akrab inbox email mereka.



Apa yang akan membantu penerbit bahwa mereka tidak dapat lakukan hari ini?



Hari ini, jika pelanggan ingin membaca / melihat / menonton konten online sindikasi, mereka biasanya harus pergi ke mana konten-host atau tahu bagaimana untuk berlangganan feed dan mengkonsumsi konten dalam agregator atau pembaca (misalnya MyYahoo!, FeedDemon, iTunes, dll) Dengan kemampuan langganan email, pelanggan kini dapat menerima informasi ini dalam inbox mereka, mirip dengan e-newsletter.



Bagaimana cara kerjanya?



Dari dalam Publicize tab aplikasi, penerbit mengaktifkan layanan dengan mudah klik, kemudian paste kode ke dalam template blog atau situs web. Lihat apa ini tampak seperti di blog atau dibangun langsung ke halaman BrowserFriendly Anda . Sebuah digest harian yang berisi konten baru dari feed dikirimkan ke pelanggan yang telah memilih untuk menerima konten ini. Lihat email sampel .



Mengapa FeedBurner Email begitu istimewa?



Selain yang didukung oleh segel FeedBurning persetujuan, email FeedBurner memiliki fokus yang sangat spesifik - itu adalah benar-benar layanan publisher. Tidak ada halaman arahan pelanggan di FeedBurner dan tidak ada dashboard bagi pelanggan untuk masuk ke dan mengelola email mereka. Selain kesederhanaan dalam konfigurasi dan pengiriman, FeedBurner Email olahraga fitur utama sebagai berikut:



Mudah dibaca, teks atau email HTML berisi pesan-pesan terbaru.

Pesan sebagian besar "brandless," yang berarti bahwa a) email dikirim sebagai "dari" penerbit, tidak FeedBurner dan b) tidak ada sundulan FeedBurner dan hanya sangat ringan "yang disampaikan oleh" footer.

Penerbit memiliki akses ke alamat email yang berlangganan feed mereka, dan mereka dapat mengekspor alamat ini dan bergerak dari FeedBurner ke layanan lain setiap saat.



Nah agar form feedburner tidak membosankan, kita modif aja. Kali ini saya kasi nama style form email subscription 1. Karena, kalau ada kesempatan otak atik lagi, saya akan bikin style yang lain.



Cara Modifikasi Form Email Subscription:

1. Login blogger

2. Layout >HTML/javascript

3. Copast css dan html berikut

<style type="text/css">

.subscribe_outer {

     background: url("http://dl9.glitter-graphics.net/pub/1317/1317309lsk5aj07xu.gif") no-repeat ;

float:left;margin: 0px -10px;padding: 5px 0px;

border:double 3px #0099ff;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

border-radius: 2px;

}

.subscribe_wrapper {

     background: url("http://dl9.glitter-graphics.net/pub/1317/1317309lsk5aj07xu.gif") no-repeat transparent;font-size: 15px;line-height: 20px;

text-align:center;padding: 38px 50px 18px 38px;



}

.stext {

     color: #000;

font-weight:bold;

}

.sidebar .subscribe_wrapper h5,.subscribe_wrapper h5 {

     color:#FF7F29;

font-size:18px

}

#btntEmailsub {

     clear: both;display: block;margin: 10px 0px;

}

form.btntEmailform {

     clear: both;display: block;margin: 20px 0px 0px;width: auto;

}

.emailText {

     background: url("http://lh6.googleusercontent.com/-mrp8bAEiUas/ULc875mjBCI/AAAAAAAAAAY/ORduMx38cYI/s800/email.png") no-repeat scroll 10px center #FFFFFF;border-radius: 4px 4px 4px 4px;border: 0px none;

     box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.05) inset;

     color: #444444;margin: 0px 0px 15px;padding: 10px 40px;text-decoration: none;width: 70%;

}

.emailButton {

    -moz-border-radius:3px;

    -webkit-border-radius:3px;

    border-radius:3px;

    -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);

    -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);

    box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);

    background: -moz-linear-gradient(19% 65% 90deg,#0087B4, #0099CC, #0099CC 51%);

    background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0087B4));

    color:#f0f0f0;float:left; font-family:arial,helvetica,sans-serif;font-size:14px;font-weight:bold;

    text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);

    border: 1px solid #267ed4;padding: 10px 40px;

    cursor: pointer;

    width:100%;

}

.emailButton:hover {

    background: -moz-linear-gradient(19% 65% 90deg,#0082AD, #0099CC, #0099CC 51%);

    background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0082AD));

    color: #f1f1f1;

}

</style>

<div class="subscribe_outer">

 <div class="subscribe_wrapper">

  <h5>Subscribe Via Email</h5>

  <p class="stext">Subscribe to our newsletter to get all the latest updates to your inbox..!</p>

    <div id="btntEmailsub">

    <form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=[YOUR_FEED_NAME]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">

    <input type="hidden" value="[YOUR_FEED_NAME]" name="uri">

    <input type="hidden" value="en_US" name="loc">

    <input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email">

    <input type="submit" value="Signup Now!" title="" class="emailButton"><br/>

    </form>

    </div>

  </div>

</div>

[YOUR_FEED_NAME] = nama akun feedburner, misal "mig33eagle"



4. Simpan



hasilnya dari style form di atas:

Atribut ALT dirancang untuk menjadi sebuah deskripsi teks alternatif untuk gambar untuk Menampilkan teks ALT sebelum foto tersebut dimuat dalam browser utama dan bukan foto dalam berbasis teks browser. ALT adalah elemen yang dibutuhkan untuk gambar dan hanya dapat digunakan untuk tag gambar karena tujuan khususnya adalah untuk menggambarkan gambar. Fungsi dari ALT sendiri adalah menggambarkan citra dan informasi judul dalam tabel, link, dan menggambarkan tujuan dari elemen saat menggunakan kata kunci bertarget.



ALT dan TITLE melakukan tugas ganda yaitu meningkatkan upaya promosi dan aksesibilitas situs Anda. Dikarnakan Search engine spider menyukai kata kunci. Jadi gunakanlah atribut ALT dan Title disetiap kalian memposting suatu halaman diblog kalian karna itu bisa mempermudah mesin pencari untuk mengindex setiap postingan dari blog anda



Sedari kemarin demi seo friendly saya edit memberi title dan alt gambar pada postingan di semua post blog.

Fiuh... manual euy. Cape juga edit 300 postingan dan edit gambarnya satu-satu.

Akhirnnya dapat juga script memberi tags title dan alt secara otomatis di setiap gambar post blog.



Penasaran gmna caranya?



1. Login blogger

2. Edit template > edit html

3. Letakkan script berikut di atas kode </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script type="text/javascript">

//<![CDATA[

$(document).ready(function() {

 $('img').each(function(){

 var $img = $(this);

 var filename = $img.attr('src')

 if (!$img.attr("title") || $img.attr("title") == ""){

 $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

}

  if (!$img.attr("alt") || $img.attr("alt") == ""){

 $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

}

 });

});

//]]>

</script>

note: jika di template anda sudah ada jquery librarynya, maka anda tidak perlu mengcopy

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>



4. Simpan template



Udah deh, check aja semua gambar yang ada di post elu. Selamat mencoba tutorial nya...

YouTube adalah sebuah situs web berbagi video yang dibuat oleh tiga mantan karyawan PayPal pada Februari 2005. Situs ini memungkinkan pengguna mengunggah, menonton, dan berbagi video.[4] Perusahaan ini berkantor pusat di San Bruno, California, dan memakai teknologi Adobe Flash Video dan HTML5 untuk menampilkan berbagai macam konten video buatan pengguna, termasuk klip film, klip TV, dan video musik. Selain itu ada pula konten amatir seperti blog video, video orisinal pendek, dan video pendidikan.




Kebanyakan konten di YouTube diunggah oleh individu, meskipun perusahaan-perusahaan media seperti CBS, BBC, Vevo, Hulu, dan organisasi lain sudah mengunggah material mereka ke situs ini sebagai bagian dari program kemitraan YouTube.[5] Pengguna tak terdaftar dapat menonton video, sementara pengguna terdaftar dapat mengunggah video dalam jumlah tak terbatas. Video-video yang dianggap berisi konten ofensif hanya bisa ditonton oleh pengguna terdaftar berusia 18 tahun atau lebih. Pada November 2006, YouTube, LLC dibeli oleh Google dengan nilai US$1,65 miliar dan resmi beroperasi sebagai anak perusahaan Google.



Banyak cara download video di youtube, tetapi menurut saya ini yang paling mudah.

Tidak repot-repot menggunakan software downloader.



Berikut cara mudah download video di youtube:

1. Kunjungi youtube.com

2. Pilih video yang ingin anda download

Eagle Injector 07 Februari 2014



ini ane bikinin update inject yang kesekian kali.

di tkp ane work untuk XL & ISAT, untuk TSEL menyusul ya coz ane belom beli perdana TSEL :D

mudah-mudahan aja yang ini bisa konek.



Cara Pakai:



1. Download Eagle Injector 07 Februari 2014

2. Extract (password RAR: www.mig33eagle.com)

3. Copy dan Replace 'Injector.exe' yang ada di folder installan Eagle Vpn 'C:\Program Files\Eagle VPN\'

4. Jalankan seperti biasa.



Note: HANYA WORK BUAT MEMBER EAGLE SSH :D



Salam.

Sebuah menu horizontal minimalis dan ringan dibangun dengan CSS murni. Menu ini juga responsif, mengubah dirinya menjadi menu vertikal pada perangkat mobile dengan layar kecil.

DEMO
Cara membuat menu responsive simple:

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

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);

#cssmenu{ background:#f96e5b;  width:auto}

#cssmenu ul{ list-style:none;  margin:0;  padding:0;  line-height:1;  display:block;  zoom:1}

#cssmenu ul:after{ content:' ';  display:block;  font-size:0;  height:0;  clear:both;  visibility:hidden}

#cssmenu ul li{ float:left;  display:block;  padding:0}

#cssmenu ul li a{ color:#fff;  text-decoration:none;  display:block;  padding:15px 25px;  font-family:'Open Sans',sans-serif;  font-weight:700;  text-transform:uppercase;  font-size:14px;  position:relative;  -webkit-transition:color .25s;  -moz-transition:color .25s;  -ms-transition:color .25s;  -o-transition:color .25s;  transition:color .25s}

#cssmenu ul li a:hover{ color:#333}

#cssmenu ul li a:hover:before{ width:100%}

#cssmenu ul li a:after{ content:'';  display:block;  position:absolute;  right:-3px;  top:19px;  height:6px;  width:6px;  background:#fff;  opacity:.5}

#cssmenu ul li a:before{ content:'';  display:block;  position:absolute;  left:0;  bottom:0;  height:3px;  width:0;  background:#333;  -webkit-transition:width .25s;  -moz-transition:width .25s;  -ms-transition:width .25s;  -o-transition:width .25s;  transition:width .25s}

#cssmenu ul li.last >a:after,

#cssmenu ul li:last-child >a:after{ display:none}

#cssmenu ul li.active a{ color:#333}

#cssmenu ul li.active a:before{ width:100%}

@media screen and (max-width:768px){ #cssmenu ul li{ float:none}

 #cssmenu ul li a{ width:100%;  -moz-box-sizing:border-box;  -webkit-box-sizing:border-box;  box-sizing:border-box}

 #cssmenu ul li a:after{ display:none}

 #cssmenu ul li a:before{ height:1px;  background:#fff;  width:100%;  opacity:.2}

 #cssmenu ul li.last >a:before,

 #cssmenu ul li:last-child >a:before{ display:none}

}

anda bisa mengganti warna menu pink menjadi warna lain.

simpan template



3. Letakkan kode html berikut di layout

<div id='cssmenu'>

<ul>

   <li class='active'><a href='index.html'><span>Home</span></a></li>

   <li><a href='#'><span>Disclaimer</span></a></li>

   <li><a href='#'><span>About</span></a></li>

   <li class='last'><a href='#'><span>Contact</span></a></li>

</ul>

</div>

Ganti kode berwarna dengan url dan menu url anda.

4. simpan
Semoga tutorialnya bermanfaat.

Inject ISAT 06 Februari 2014



ini ane bikinin inject ISAT buat member yang belom bisa konek kemaren.

mudah-mudahan aja yang ini bisa konek.



Cara Pakai:



1. Download Inject ISAT 06 Februari 2014

2. Extract (password RAR: www.mig33eagle.com)

3. Copy dan Replace 'Injector.exe' yang ada di folder installan Eagle Vpn 'C:\Program Files\Eagle VPN\'

4. Jalankan seperti biasa.



Note: HANYA WORK BUAT MEMBER EAGLE SSH :D



Salam.

Tutorial blog kali ini tentang cara membuat orange menu vertikal.







 Dan berikut ini caranya:



1. Login blog

2. Template > edit html dan letakkan kode css berikut di atas ]]></b:skin>

#cssmenu {

  width: 200px;

  border-style: solid solid none solid;

  border-color: #D76100;

  border-size: 1px;

  border-width: 1px;

  padding: 0px;

}

#cssmenu ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}

#cssmenu li a {

  height: 32px;

  height: 24px;

  text-decoration: none;

  font-weight: normal;

  color: #9E3C02;

  display: block;

  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL1fxzkdxVVnP3i9I2aiVprPiEaDFmQWjI83IunDeI7bUFb3ZE1rmsoy-9mgk8jBH9jvBVgiGDCki7AVbogs5BbBOHm9E5rfrXDIKdxnl4xOU8WZvtMxvE6jiwpE6EsdJlceZq_KoiGww/s1600/mig33eaglemenu4.gif);

  padding: 8px 0 0 30px;

}

#cssmenu li a:hover {

  color: #fff;

  background: url(menu4.gif) 0 -32px;

  padding: 8px 0 0 30px;

}

#cssmenu li a:active {

  color: #fff;

  background: url(menu4.gif) 0 -64px;

  padding: 8px 0 0 30px;

}

3. Letakkan kode html berikut di layout

<div id='cssmenu'>

<ul>

   <li class='active'><a href='index.html'><span>Home</span></a></li>

   <li><a href='#'><span>Products</span></a></li>

   <li><a href='#'><span>About</span></a></li>

   <li class='last'><a href='#'><span>Contact</span></a></li>

</ul>

</div>

Ganti kode yang berwarna dengan url dan menu yang anda inginkan



4. selesai