Tampilkan postingan dengan label Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Blog. Tampilkan semua postingan

Cara Membuat Widget Fungsi Scoll

republicofnote.blogspot.com

Selamat malam semua...
kali ini saya mau memberikan sedikit trik, yang juga karena ini permintaan dari salah satu pembaca Republic Of Note. Nah dengan judul ini Cara membuat Widget Fungsi Scroll kalian tentunya sudah tahu bukan apa yang dimaksud?

Nah lihatlah pada gambar di atas yang berkotak merah dan biru, itu adalah salah 1 contoh dari cara bagaimana agar widget kita berfungsi sebagai scroll, banyak manfaat dengan adanya kita memberikan scroll pada widget kita selain menghemat tempat tentu juga mempercepat loading pada blog kita dan lain-lain...
Akan tetapi pasti kalian bingun bagaimana caranya fungsi scroll pada widget-widget tertentu seperti Label, Popular Post, Arsip dan lainnya...
Tetapi saat kita untuk menambahkan widget pada kolom kosong kita bisa langsung otomatis memasukan script fungsi scrollnya...

Ok, pertama kita bahas dulu bagaimana memberikan fungsi scroll pada Label, Popular Post atau bahkan yang lain. SImak dibawah ini :
1. Login akun blogger anda
2. Pilih Template » Edit HTML » Lanjutkan » Checklist Expand Template Widget
3. Cari kode berikut,atau yang mirip seperti ini
<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:170px;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
perhatikan kode yang bertulisan berwarna orange, itu adalah kode yang harus kalian cari, INGAT !! contoh diatas hanyalah contoh untuk pada widget Label, jika kalian ingin menggunakan di widget seperti Popular post atau yang lain tinggal Kalian sesuaikan saja id dan titlenya seperti yang bertuliskan kode yang berwarna orange, jika sudah tinggal sisipkan saja kode yang bertulisakan berwarna merah seperti pada contoh diatas, sedangkan yang berwarna biru itu adalah tingginya, sesuaikan saja tinggi yang anda inginkan...

4. Lalu cari kode berikut
 </b:loop>
    </b:if>
  </div></div>
</b:includable>
</b:widget>

Nah lihat kode yang bertuliskan berwarna merah, itu adalah kode yang harus anda tambahkan di akhir...

Penampakan script penuhnya kira-kira seperti ini
<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:170px;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
  </div></div>
</b:includable>
</b:widget>
Nah itulah sedikit ulasan dari saya,mengenai Cara Membuat Widget Fungsi Scoll semoga berguna dan bermanfaat...

Percantik Blog Dengan Effect Page Peel Join Us On Facebook

republicofnote.blogspot.com

Percantik Blog Dengan Effect Page Peel Join Us On Facebook - Banyak cara atau langkah agar blog terlihat semakin dan menarik, disamping lebih menarik memudahkan juga agar visitor mengetahui halaman fans page kita pada facebook, caranya dengan menambahkan efect page peel join us on facebook. Disini saya akan menjelaskan sedikit pengertian dari page peel blog adalah halaman yang melipat pada blog anda dan akan terbuka lebar lipatannya apabila anda mengarahkan mouse anda diatas efek tersebut, contohnya seperti yang ada pada gambar disamping. Page peel biasanya berada pada bagian sudut atas dari blog anda. Efek page peel ada yang statis juga ada yang dinamik. Page peel ini umumnya digunakan untuk berbagai tujuan salah satunya yaitu untuk mempromosikan iklan. Namun pada trik dan tips kali ini sebenarnya saya buat karena adanya permintaan dari salah seorang visitor di blog saya yaitu bapak +Eyang Anom membuat page peel dengan efek Join US on Facebook. Jadi jika seseorang pada blog anda mengklik page peel tersebut maka dia akan diarahkan ke halaman page facebook anda. Jika anda penasaran bagaimana membuat page peel efek ikuti langkah berikut ini:
1. Login ke akun blogger
2. Klik Template » Edit HTML » Lanjutkan » Centang  Expand Template Widget
3. Cari kode </head>, lalu letakkan kode dibawah ini diatas kode yang tadi
<script type='text/javascript'>var tujuan =&#39; http://www.facebook.com/RepublicOfNote &#39;</script>
<script src='https://sites.google.com/site/republicofnote/script/page_peel_effect.js/' type='text/javascript'/>
4. Ganti tulisan yang berwarna merah dengan nama fans page facebook anda
5. Klik save atau simpan template. Selesai

Contoh Saat di sorot cursor
republicofnote.blogspot.com

Demikian tutorial cara Percantik Blog Dengan Effect Page Peel Join Us On Facebook, semoga bermanfaat..

Cara Membuat Sitemap Keren Dengan CSS Efek Accordian

republicofnote.blogspot.com

Cara Membuat Sitemap Keren Dengan CSS Efek Accordian - Agar blog tampilan menjadi menarik tentunya juga agar memudahkan visitor atu pengunjung saat berkunjung ke blog anda sitempa/daftar isi inilah yang membantunya untuk mencari artikel apa yang di inginkan...
Sitemap ini mempunyai tampilan yang menarik dengan efek yang bernama accordian, contoh ada pada gambar diatas, atau bisa melihatnya langsung di blog saya ini nah begitulah kira-kira, sudah mengerti bukan?
Nah jika menginginkannya download ajah langsung scriptnya
Caranya tinggal buka saja filenya lalu copas kedalam postingan atau laman statis pada blog anda.

Semoga bermanfaat, dan berguna.
Selamat mencoba..

Trik Memasang Meta Tag Geotag di Blog, ICBM, Geo Position

republicofnote.blogspot.com

Trik Memasang Meta Tag Geotag di Blog- Seketika kalian pernah pasti melihat source atau menyontek meta tag di blog kepunyaan orang lain? yah kan? hehe
Nah apakah kalian pernah melihat meta tag seperti ini?

republicofnote.blogspot.com

<meta content='Republic Of Note' name='DC.title'/>
<meta content='ID-YO' name='geo.region'/>
<meta content='Yogyakarta' name='geo.placename'/>
<meta content='-7.797224;110.368797' name='geo.position'/>
<meta content='-7.797224, 110.368797' name='ICBM'/>
<meta content='ID' name='geo.country'/>

Nah apa kalian tahu arti dan maksud dari Metatag Geotag tersebut?
Ok saya jelaskan sedikit dech biar kalian tahu. Yang dimaksud geo tag atau geotagging adalah proses menambahkan metadata identifikasi wilayah kedalam berbagai media, seperti foto, video, website, atau RSS Feed. Data berisi koordinat lintang dan bujur, meskipun dapat juga mencakup ketinggian, bantalan, jarak, akurasi data, dan nama tempat.
Dengan memberikan Geotag, ICBM info pada sebuah situs, maka membuat situs atau blog kita lebih search engine seo friendly. Begitu bro...

Nah mau tau caranya?
Ok ikuti saja langkahnya berikut :
1. Login ke akun blogger anda
2. Klik Template » Edit HTML » Lanjutkan » Centang Expand Template Widget
3. Klik dulu disini untuk mengisi data penempatan posisi Geo Tag Generator
Conothnya pada gambar
republicofnote.blogspot.com

4. Jika sudah kalian isi maka wakutnya anda melakukan pemasangan meta tag pada HTML blog anda, pemasangan bisa berupa memasang metatag dan widget pada sidebar anda
(untuk pemasangan sidebar yang ini hanya sementara artinya bisa dapat kalian hapus setelah anda mendapatkan widget yang sesungguhnya setelah verifikasi)
5. Jika sudah terpasang pada HTML dan widget anda, save saja...
6. Lalu verifikasilah blog/web anda di Validator Geotag
7. Jika pemasangan pada HTML dan widget anda telah benar maka tidak ada pemberitahuan atau tulisan yang berwarna merah, jika tidak ada waktunya anda memasang widget yang sesungguhnya, kodenya ada dibagian bawah, pilih sesuai selera.
8. Selesai

Teks Subscript dan Superscript di Blog

republicofnote.blogspot.com

Teks Subscript dan Superscript di Blog - Jika kalian yang suka atau ketika menulis di sebuah software yang namanya microsoft office (word) atau libre office tentu saja pasti kalian mengenal yang namnya subscript dan superscript yaitu bilangan atau untuk menulis bilangan berpangkat yang ada diatas atau yang dibawah. Tulisan ini biasanya digunakan untuk penulisan rumus baik matematika seperti meter persegi, meter kubik atapun simbol-simbol kimia.

Nah kalian mau tahu bagaimana cara penulisannya di blog?
lihat saja langsung dibawah

SUBSCRIPT

Untuk menulis kode subscript, tambahkan kode <sub>Teks</sub>, contoh H2 Omaka penulisannya:

H<sub>2</sub>O<sub>2</sub>

SUPERSCRIPT

Untuk menulis kode superscript, tambahkan kode <sup>Teks</sup>, contoh 32m2 maka penulisannya :

32m<sup>2</sup>

Nah begitulah kira-kira sedikit ilmu pembahasan Teks Subscript dan Superscript di Blog, semoga bermanfaat

Perubahan Tampilan Like Box Facebook!

republicofnote.blogspot.com

Perubahan Tampilan Like Box Facebook! - Tanpa sengaja dan tidak disadari ternyata tampilan like box facebook/widget pada blog kini telah berubah, pasti setiap blog ataupun kamu pasti memasang widget yang 1 ini dan yang bisa dibilang diwajibkan bagi para blogger guna menunjang kepopuleran blognya. Nah hal ini saya sadari kemarin sore saat membuka blog saya dan ternyata sudah berubah tanpa adaya tampilan face, saya sebelumnya telah mencoba untuk membuat scriptnya di developers facebook langsung atau plugin-nya, dan ternyata tetap saja tidak terlihat walau kita sudah men-set/checklist mode show face. Saya tidak tahu alasannya mengapa demikian tapi bagi saya tidak apalah malah lebih bagus dan simple bisa menghemat tempat..hehhe

Demikianlah sedikit tulisan Perubahan Tampilan Like Box Facebook!, tulisan ini hanya semata-mata pemberian info bagi anda yang bingung dengan berubahnya tampilan like box pada blog anda...

Cara Verifikasi Blog Di Pinterest Untuk Menambah Visitor dan SEO

Markup Validation Service

Cara Verifikasi Blog Di Pinterest Untuk Menambah Visitor dan SEO - Kali ini saya mau mencoba bagaimana caranya verifikasi blog di pinterest, hal ini juga mampu untuk menambah visitor blogmu dan menambah dukungan fitur blog mu agar lebih seo friendly...
Pinterest sendiri adalah sebuah web atau mungkin bisa disebut juga social enginering/social media, bisa submit artikel dan submit blog mu secara bersamaan, seperti bing, markosweb, alexa, technorati dan lainnya...

OK langsung saja ikuti langkahnya sebagai berikut :

Notice : ikuti langkah dibawah dengan baik dan benar

Buka pinterest.com lalu klik join pinterest seperti pada gambar...
Markup Validation Service

Jika sudah terbuka maka anda tinggal lakukan registrasi atau mungkin anda bisa juga lakukan login melalui akun facebook ataupun twitter...
tapi disini saya melakukan registrasi baru agar lebih nyaman...
Markup Validation Service


Ikuti saja proses registari yang ada bila anda melakukan registrasi baru. Jika sudah selesai maka anda perlu mengatur pengaturan pada menu setting dan untuk melakukan verifikasi blog/web anda.
Markup Validation Service

Isikan dengan nama blog anda, dan klik verifi webiste..
Markup Validation Service

ada 2 cara untuk melakukan verifi, yaitu dengan upload HTML pada blog anda atau bisa juga dengan menambhakan meta tag pada edit HTML anda.
disini saya melakukan dengan cara edit HTMl dan penambahan meta tag agar lebih mudah..
Markup Validation Service

Dan inilah contoh tampilan pada meta tag punya saya.. 
copykan dan paste pada meta tag kepunyaan anda pada edit HTML
Jika sudah maka klik saja click here untuk melakukan proses verifikasi dan langkah selanjutnya ada pada gambar dibawah...
Markup Validation Service

Verifikasi telah berhasil dilakukan, dan akan tampil dalam board pinterest anda

Markup Validation Service

Demikian tulisan saya tentang Cara Verifikasi Blog Di Pinterest Untuk Menambah Visitor dan SEO semoga bermanfaat..

Cara Delete Link Hidup Secara Otomatis Di Form Komentar

Markup Validation Service

Cara Delete Link Hidup Secara Otomatis Di Form Komentar - Siapa sih yang g mau mendapatkan backlink dari blog yang dofollow, sekarang banyak sekali yang mengejar dengan mencari backlink tersebut, ataupun banyak juga blog yang membuat blognya menjadi dofollow, tujuannya agar pengunjung senang dan mendapatkan backlink secara otomatis dari komentar yang telah dibuatnya dan juga menanamkan link hidup di form komentar. Namun siapa sangka dengan adanya link hidup di dalam komentar google tidak menyukainya dan dianggap spammer. Nah karena adanya spammer dapat merugikan juga bagi si pemilik blog tersebut...
Dengan adanya artikel ini saya mencoba memberikan info agar link hidup tersebut ter-delete secara otomatis..
bagaimana bisa? jelas bisa karena kita menggunakan javascript...
caranya?
ya udah yuk ikuti saja dibawah :
1. Login akun blogger anda
2. Klik Template » Edit HTML » Lanjutkan » Centang  Expand Template Widget
3. Lalu cari kode </head>, dan letakkan kode berikut tepat diatas kode tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
$('#comments p').find('a').remove();
});
</script>
4. Selesai dan simpanlah template

Catatan : Jika template anda sudah terdapat code jquery, maka kode diatas yang berwarna merah tidak perlu lagi ditambahkan

Nah sekarang coba anda berkomentar sendiri di blog anda, dengan cara seperti ini :
<a href="http://namabloganda.com">Title</a>
atau bisa juga seperti ini

<a href="http://nama url postingan.html">Title</a> 

Demikian sedikit tulisan ini mengenai Cara Delete Link Hidup Secara Otomatis Di Form Komentar, semoga menambah wawasan anda..

Cara Mengatasi Hilangnya H1:Zero, that is Really Bad di chkme.com

Cara Mengatasi HIlangnya H1:Zero, that is Really Bad di chkme.com - Bagi anda yang suka dengan optimasi blog pastinya tidak asing lagi bagi kalian yang namanya Chkme.com.
Dimana kita bisa check apakah template SEO kita friendly atau tidak. Yah sebetulnya saya sendiri juga masih awam dalam mengenai hal SEO, karena SEO itu tidak tetap dalam pencarian google, dan apa yang dicari, banyak blog yang memberikan artikel tentang SEO atau optimasinya, namun terkadang semua itu tidak tepat sasaran alias kurang dapat membuktikan, dan akhirnya saya tidak begitu mempedulikannya, karena kalau kita harus belajar SEO tidak akan pernah habisnya karena selalu berubah. 

Nah hari ini saya akan coba membantu anda bagaimana mendapatkan kembali H1 yang hilang, yang sebelumnya saya telah share artikel dalam cek score seo. Biasanya H1 ini hilang ketika judul blog/website kita diganti dengan menggunakan logo. Contoh ini adalah pada blog saya yang lainnya yang hanya sebagai uji coba dalam modifikasi blog.
Markup Validation Service
Alert : Gambar ini sebelum melakukan optimasi
Markup Validation Service

Markup Validation Service

Success : Dan ini setelah melakukan optimasi .
Markup Validation Service

Markup Validation Service

Nah cara nya sebagai berikut :
1. Login ke akun blogger anda
2. Klik Template » Edit HTML » Lanjutkan » Centang pada  Expand Template Widget
3. Lalu cari kode dibawah ini
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

tambahkan tag <h1><img ... dst/></h1> sehingga menjadi seperti ini
<div id='header-inner'>
<h1><a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a></h1>

atau bisa juga dengan seperti ini
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<h1><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></h1>
</a>

Demikian artikel ini saya buat dalam Mengatasi HIlangnya H1:Zero, that is Really Bad di chkme.com, semoga bermanfaat.

Membuat Efek Animasi Loading Blog Dengan CSS3 Part 2

Markup Validation Service

Membuat Efek Animasi Loading Blog Dengan CSS3 Part 2 - Yang sebelumnya saya share bagaimana cara membuat efek animasi loading blog dengan bentuk circle, nah kali ini saya mau share dalam bentuk bintang-bintang atau kunang-kunang... hehhe

ok simak ajah langsung codenya dibawah :
Sebaikknya anda membaca dengan baik langkah yang telah diberikan dan jangan lupa backup template anda

1. Login ke akun blogger anda
2. Klik Template » Edit HTML » Lanjutkan » Klik Expand Template Widget
3. Letakan kode CSS dibawah ini diatas kode ]]></b:skin>
.point2nd, .point3nd, .point4nd {
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);

width:3px;
height:3px;
border-radius:50px;
box-shadow:0 0 5px #00c6ff;

margin:0 auto;
}

.ball-arc2nd, .ball-arc3nd, .ball-arc4nd {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.point2nd { -moz-animation: ball-2ndy 2s infinite cubic-bezier(0, 0, 0.35, 1);
-webkit-animation: ball-2ndy 2s infinite cubic-bezier(0, 0, 0.35, 1); }
.point3nd { -moz-animation: ball-3ndy 2s infinite cubic-bezier(0, 0, 0.65, 1);
-webkit-animation: ball-3ndy 2s infinite cubic-bezier(0, 0, 0.65, 1); }
.point4nd { -moz-animation: ball-4ndy 2s 1s infinite cubic-bezier(0, 0, 0.65, 1);
-webkit-animation: ball-4ndy 2s 1s infinite cubic-bezier(0, 0, 0.65, 1); }

.ball-arc2nd { -moz-animation: ball-2ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
-webkit-animation: ball-2ndx 2s infinite cubic-bezier(0, 0, 0.35, 1); }
.ball-arc3nd { -moz-animation: ball-3ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
-webkit-animation: ball-3ndx 2s infinite cubic-bezier(0, 0, 0.35, 1); }
.ball-arc4nd { -moz-animation: ball-4ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
-webkit-animation: ball-4ndx 2s infinite cubic-bezier(0, 0, 0.35, 1); }


@-moz-keyframes ball-2ndx {
0% { -moz-transform:translateX(0px); }
25% { -moz-transform:translateX(100px); -moz-animation-timing-function: ease-in; }
50% { -moz-transform:translateX(0px); }
75% { -moz-transform:translateX(-100px); -moz-animation-timing-function: ease-in;}
100% { -moz-transform:translateX(0px); }
}

@-moz-keyframes ball-3ndx {
0% { -moz-transform:translateX(0px); }
25% { -moz-transform:translateX(35px); -moz-animation-timing-function: ease-in; }
50% { -moz-transform:translateX(0px); }
75% { -moz-transform:translateX(-35px); -moz-animation-timing-function: ease-in;}
100% { -moz-transform:translateX(0px); }
}

@-moz-keyframes ball-4ndx {
0% { -moz-transform:translateX(0px); }
25% { -moz-transform:translateX(25px); -moz-animation-timing-function: ease-in; }
50% { -moz-transform:translateX(0px); }
75% { -moz-transform:translateX(-25px); -moz-animation-timing-function: ease-in;}
100% { -moz-transform:translateX(0px); }
}


@-moz-keyframes ball-2ndy {
0% { -moz-transform: translateY(0px); -moz-animation-timing-function: ease-in;}
25% { -moz-transform: translateY(25px); }
50% { -moz-transform: translateY(50px); -moz-animation-timing-function: ease-in; }
75% { -moz-transform: translateY(25px); }
100% { -moz-transform: translateY(0px); }
}

@-moz-keyframes ball-3ndy {
0% { -moz-transform: translateY(-50px); -moz-animation-timing-function: ease-in;}
25% { -moz-transform: translateY(50px); }
50% { -moz-transform: translateY(100px); -moz-animation-timing-function: ease-in; }
75% { -moz-transform: translateY(50px); }
100% { -moz-transform: translateY(-50px); }
}

@-moz-keyframes ball-4ndy {
0% { -moz-transform: translateY(0px); -moz-animation-timing-function: ease-in;}
25% { -moz-transform: translateY(30px); }
50% { -moz-transform: translateY(50px); -moz-animation-timing-function: ease-in; }
75% { -moz-transform: translateY(30px); }
100% { -moz-transform: translateY(0px); }
}

@-webkit-keyframes ball-2ndx {
0% { -webkit-transform:translateX(0px); }
25% { -webkit-transform:translateX(100px); -webkit-animation-timing-function: ease-in; }
50% { -webkit-transform:translateX(0px); }
75% { -webkit-transform:translateX(-100px); -webkit-animation-timing-function: ease-in;}
100% { -webkit-transform:translateX(0px); }
}

@-webkit-keyframes ball-3ndx {
0% { -webkit-transform:translateX(0px); }
25% { -webkit-transform:translateX(35px); -webkit-animation-timing-function: ease-in; }
50% { -webkit-transform:translateX(0px); }
75% { -webkit-transform:translateX(-35px); -webkit-animation-timing-function: ease-in;}
100% { -webkit-transform:translateX(0px); }
}

@-webkit-keyframes ball-4ndx {
0% { -webkit-transform:translateX(0px); }
25% { -webkit-transform:translateX(25px); -webkit-animation-timing-function: ease-in; }
50% { -webkit-transform:translateX(0px); }
75% { -webkit-transform:translateX(-25px); -webkit-animation-timing-function: ease-in;}
100% { -webkit-transform:translateX(0px); }
}


@-webkit-keyframes ball-2ndy {
0% { -webkit-transform: translateY(0px); -webkit-animation-timing-function: ease-in;}
25% { -webkit-transform: translateY(25px); }
50% { -webkit-transform: translateY(50px); -webkit-animation-timing-function: ease-in; }
75% { -webkit-transform: translateY(25px); }
100% { -webkit-transform: translateY(0px); }
}

@-webkit-keyframes ball-3ndy {
0% { -webkit-transform: translateY(-50px); -webkit-animation-timing-function: ease-in;}
25% { -webkit-transform: translateY(50px); }
50% { -webkit-transform: translateY(100px); -webkit-animation-timing-function: ease-in; }
75% { -webkit-transform: translateY(50px); }
100% { -webkit-transform: translateY(-50px); }
}

@-webkit-keyframes ball-4ndy {
0% { -webkit-transform: translateY(0px); -webkit-animation-timing-function: ease-in;}
25% { -webkit-transform: translateY(30px); }
50% { -webkit-transform: translateY(50px); -webkit-animation-timing-function: ease-in; }
75% { -webkit-transform: translateY(30px); }
100% { -webkit-transform: translateY(0px); }
}

4. Lalu letakkan kode ini di atas tag </body>
<div class="ball-arc2nd">
<div class="point2nd"></div>
</div>

<div class="ball-arc3nd">
<div class="point3nd"></div>
</div>

<div class="ball-arc4nd">
<div class="point4nd"></div>
</div>


Demo ada pada bagian header blog ini, perhatikanlah...!


Langkah Membuat Animasi Loading Blog Lebih Menarik

Markup Validation Service

Langkah Membuat Animasi Loading Blog Lebih Menarik - Banyak hal menarik dan efek/plugin yang dapat dipakai atau diberikan oleh blogger...
Nah pagi ini saya mau mencoba share bagaimana caranya membuat efek loading pada blog, agar terlihat lebih menarik, biasanya ini sangat disukai bagi yang suka ngoprek dan yang ingin blognya terlihat cantik dan keren.
Ok tanpa basa-basi simak langkahnya berikut ini :
Sebaiknya anda membaca dengan baik langkah yang telah diberikan dan jangan lupa backup template anda.

Animasi Loading Part 1, Berwarna Merah

1. Login ke akun blogger anda
2. Klik Template » Edit HTML » Lanjutkan »  Klik Expand Template Widget
3. Tambahkan kode CSS berikut ini diatas ]]></b:skin>
#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

4. Kemudian tambahkan kode jquery ini diatas kode </head>, jika dalam template kalian sudah terpasang jquery maka tidak perlu lagi tambahan jquery tersebut, aga proses efek loading lancar
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

5. Dan langkah yang terakhir, pasang kode berikut diatas tag </body>
<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});

// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>

Animasi Loading Part 2, Berwarna Biru

HTML
<div class="ball"></div>
<div class="ball1"></div>

CSS
.ball {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoff .5s infinite linear;
-webkit-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
}


Demo 1 Dengan Animasi Berwarna Merah : 


Demo 2 Dengan Animasi Berwarna Biru : 

Demikian tutorial yang saya buat mengenai Langkah Membuat Animasi Loading Blog Lebih Menarik, semoga bermanfaat...

Trik Agar Terhindar Dari Duplikasi Konten atau Deskripsi Meta

Markup Validation Service

Trik Agar Terhindar Dari Duplikasi Konten atau Deskripsi Meta - Duplikasi konten atau duplicate content ini terjadi dan tampak pada webmaster tool (bila kamu sudah submit atau mendaftarkannya). Duplicate content tentunya sangat buruk untuk sebuah blog, jika terjadi duplicate title pada postingan blog ini akan berdampak artikelmu tidak akan mendapat peringakat yang bagus juga pada hasil search engine, nah kali ini setelah sebelumnya membahas merubah/edit template blog menjadi lebih seo friendly akan memberikan beberapa trik tentang Agar Terhindar Dari Duplikasi Konten atau Deskripsi Meta, agar SEO onpage blog kamu lebih bagus dimata google.

 1. Memasang title tag yang SEO Friendly 

Meta title yang lebih bagus untuk SEO sebagai berikut.
Keterangan : UPDATE!
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title> 
<meta content='DESKRIPSI HOMEPAGE' name='description'/> 
<meta content='KEYWORD 1, KEYWORD 2, DST' name='keywords'/> 
</b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> 
<title><data:blog.pageName/> | <data:blog.title/></title> 
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' name='description'/> <meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title' name='keyword'/> 
</b:if>

 2.  Nofollowkan link timestamp pada komentar

Ini berlaku bagi template yang ada link timestamp pada komentarnya. cari kode seperti ini 
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
Ganti kode tersebut dengan kode dibawah ini agar menjadi nofollow
<a expr:href='data:comment.url' title='comment permalink' rel='nofollow'>
<data:comment.timestamp/>
</a>

3.  Untuk langkah 2 kamu bisa juga tidak memberi atribut nofollow, dengan cara ganti dengan kode dibawah ini

<b:if cond='data:post.commentPagingRequired'>
<a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
<a expr:href='data:blog.url + &quot;#&quot; + data:comment.anchorName' title='comment permalink'> <data:comment.timestamp/> </a>
</b:if>

 4.  Tetapkan domain kamu di google webmaster tool 

Misalkan contoh untuk blogger biasanya tanpa www, karena jika diindex dua (www atau tanpa www) di search engine itu duplicate content juga, karena URL www dengan tanpa www itu beda. caranya sebagai berikut:

 Klik setting
 pilih preferred domain dan tetapkan domain mana yang harus di index

 5. Jangan posting judul yang sama persis pada suatu blog 

Jika kamu terpaksa harus menulis title yang sama maka beri unik pada judul post kamu. misal cara membuat blogger, langkah membuat blogger tampilan baru atau yang lainnya sama tapi beda kan?

Demikain sedikit informasinya Trik Agar Terhindar Dari Duplikasi Konten atau Deskripsi Meta, semoga bermanfaat yah.. 

Trik Mengedit Template Blog Lebih SEO Friendly Untuk Pemula

republicofnote.blogspot.com

Trik Mengedit Template Blog Lebih SEO Friendly Untuk Pemula - Malam ini saya mau membahas sedikit tentang SEO ( Search engine optimization ) karena akhir-akhir ini banyak juga blogger pemula ataupun orang yang lagi senang dan tergila-gila dengan SEO, terutam dengan maraknya kontes SEO. Semua berebut mengoptimalkan blognya agar kontenya menjadi terdepan alias nomor 1 dipencarian, untuk soal kontes SEO bisa membacanya tentang bahaya kontes seo dan terjadinya duplikasi konten (ini akan kita bahas nanti) bener gak yah tulisannya  hehe....
Postingan kali adalah kumpulan dari semua cara yang saya ketahui tentang men-SEO-kan template blogger / blogspot kita. Jadi kalo ada yang kurang silahkan sobat-sobat blogger tambahkan ilmu yang sobat miliki melalui kolom komentar. Trik mengedit template blogger / blogspot agar SEO Friendly ini adalah hanya salah satu cara untuk meningkatkan SERP. Nah dari pada sobat ketiduran ngedengerin ocehannya saya yang gak jelas, lebih baik kita langsung membahasnya saja :

1. Page Title

Biasanya format page title dari blogger kan seperti ini : JUDUL BLOG : JUDUL POSTING, nah agar blog kita lebih disukai oleh google sehingga ujung-ujungnya blog kita jadi rame, kita harus merubah format page title standart itu menjadi seperti ini : JUDUL POSTING | JUDUL BLOG. Caranya cari kode berikut di EDIT HTML ( cara mudahnya di Mozilla tekan ctrl +f lalu copy paste kode dibawah ini):
<title><data:blog.pageTitle/></title>
Kalo udah dapet kodenya hapus dan ganti dengan kode berikut ini :
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
Atau sobat juga bisa tambahin beberapa kata kunci ( keyword ) :
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | Kata kunci sobat | Kata kunci sobat </title>
</b:if>
Ganti kode "kata kunci" dengan keyword yang sobat incar. Setelah semua selesai jangan lupa di save template Markup Validation Service

2. Meta Keyword dan Deskripsi

Suatu mesin pencari seperti google sangat menyukai sebuah website / blog yang jelas tema dan isi content-nya. Jadi , sobat harus nambahin suatu tag yang namanya meta tag. Caranya adalah dengan menambahkan kode berikut ini sebelum kode <b:skin><![CDATA[/*
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="Deskripsi Blog anda" />
<meta name="keywords" content="Kata kunci , kata kunci, kata kunci, kata kunci , kata kunci" />
</b:if>
Lalu ? ya di save aja Markup Validation Service

3. Memasang Breadcrumbs.

Breadcrumbs adalah menu navigasi yang ada diatas sebuah posting atau artikel. Contohnya bisa dilihat diblog-nya saya ini. Cara pasangnya juga sudah banyak dibahas di blog-blog guru blogging. Silahkan sobat cari di google dengan kata kunci “cara membuat menu breadcrumbs”.

4. Memasang Related Post.

Related post sangat bagus untuk SEO maupun buat pengunjung. Jadi pasang related post di blog sobat. Caranya sudah banyak dibahas di blog-blog para guru blogging. Silahkan sobat cari di google dengan kata kunci “cara membuat related post di blogger”.

5. Mematikan Setting Archive ( Arsip )

Lho ? buat apa ? begini nih, seperti yang saya bilang tadikan kalo google sangat membenci dengan yang namanya duplicate content. Jadi ketika kita mengaktifkan opsi arsip, misalnya kejadiannya seperti ini :
sobat membuat sebuah blog di blogger.com. lalu membuat 3 posting, 1 buah setiap hari. Maka di halaman utama atau homepage sobat akan ada 3 posting dan sebuah link arsip seperti ini, http://BLOGSOBAT.blogspot.com/2012_03_01_archive.html, pada halaman arsip tersebut akan memunculkan 3 posting yang sama dengan yang di munculkan oleh homepage.
Intinya, 2 buah link yang menuju 2 halaman yang berbeda tapi memiliki isi konten yang sama. Bagi search engine apa lagi google ini adalah masalah serius. Oleh karena itu kita sebaiknya me-non-aktifkan opsi arsip, caranya : setelah login klik tab setting >> Archiving >> pada bagian Archiving frequency ubah menjadi no archive. >> selesai simpan setting.

Atau jika tidak ingin menonaktifkan fungsi arsip, silahkan letakkan kode berikut dibawah kode <head> :
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/></b:if>

6. Menambahkan kode ‘rel=canonical’

Gunanya kita menambahkan ‘rel=canonical’ adalah untuk menghindari konten ganda, karena seperti para master of SEO bilang bahwa google sangat tidak dapat mentolerir sebuah duplicate content ( *jadi buat yang kerjanya Cuma bisa copas hati-hati nih sebelum didepak dari gugel..Markup Validation Service). Cara nya di edit html tambahkan kode berikut setelah kode <head>
<link expr:href='data:blog.url' rel='canonical' />
Save template dan selesai

7. Tag Heading

Google sangat menyukai sebuah tulisan atau judul dengan tag H1. Oleh karena itu ubahlah ukuran judul posting sobat dengan tag H1. Caranya cari kode berikut :
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
atau sobat bisa juga membacanya di sini Cara Merubah Tag Heading Agar Lebih SEO Friendly.
Kode yang dicetak tebal (warna merah) dihapus dan ubah dari h3(atau pada beberapa template menggunakan h2) menjadi h1. Setelah itu tambahkan kode berikut sebelum kode ]]></b:skin>
h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }
Nah, begitulah sedikit tulisan Trik Mengedit Template Blog Lebih SEO Friendly Untuk Pemula  Silahkan dicoba, oia ampir lupa, lebih bagus lagi jika blog sobat dipasang read more nya. Tapi tidak saya bahas karena rata-rata blogger sudah banyak memasang read more-nya. Hmm, yang masih kurang ngerti bisa bertanya melalui kolom komentar. Terima kasih sebelum dan sesudahnya.

Semoga bermanfaat...Markup Validation Service

Langkah Membuat Related Post/Artikel Terkait Dengan Efek Checklist

Markup Validation Service

Langkah Membuat Related Post/Artikel Terkait Dengan Efek Checklist - Halo semua, sore ini saya akan membahas bagaimana cara membuat related post atau artikel terkait dengan fungsi scroll sekaligus efek hover checklist...
contohnya ada pada gambar diatas dan ada pada blog saya ini....
mau tahu bagaimana cara pembuatannya? ok simak ajah langsung langkahnya dibawah ini
 1.  Login ke akun blogger kalian
 2.  Klik Template » Edit HTML » Lanjutkan » dan jangan lupa tandai Expand Template Widget
Catatan : Sebaikknya anda membaca dengan baik langkah yang telah diberikan dan jangan lupa backup template anda
 3.  Cari kode ]]></b:skin>, lalu letakkan kode dibawah ini tepat diatas kode tadi

.rbbox
{
 font-family:Federant;
 background:transparent;
 border:2px dashed #f00;
 height:198px;
 overflow:auto;
 margin:-10px 0 0 0;
 padding:10px
}
.rbbox ul li:hover
{
 cursor:pointer;
 list-style-image:url(https://sites.google.com/site/republicofnote/script/ceklisthover.png);
 color:#3B5998
}
.rbbox ul li
{
 list-style-image:url(https://sites.google.com/site/republicofnote/script/ceklist.png);
 padding:.5em 0 .5em .3em
}

 4.  Lalu cari lagi kode seperti ini <data:post.body/>, biasanya kode ini terdapat 2-3, tergantung template kalian, bila sudah menggunakan auto readmore pilih kode yang kedua, dan letakkan kode ini dibawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Related Post :</h3>
<div class='rbbox'>
<div>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

 5.  Klik Save dan lihatlah hasilnya...
Sekarang tampilan related post atau artikel terkait pada blog anda menjadi lebih menarik