Your-BelajarBLOG

Cara Mencari Keywords Terpopuler Bulan Ini

noreply@blogger.com (Irsyad Aslam) — Sun, 6 Oct 2013 12:25:00 +0700

Keyword atau dalam bahasa indonesia adalah kata kunci, Keyword ini digunakan untuk menentukan niche, dan posting yang akan ditulis, keyword ini menentukan apa isi dari sebuah blog, keyword dibutuhkan bagi mesin pencari untuk menentukan keyword yang dicari oleh pencari kata kunci dalam sebuah mesin pencari.

Seperti yang dicantumkan diatas, sebagaimananya keyword atau kata kunci dapat digunakan sebagai penentu niche (penentu apa isi dari sebuah blog) dalam sebuah blog atau website, keyword untuk menentukan sebuah niche blog, harus dicari dengan penentuan keyword populer perbulan, dengan menentukan niche dari sebuah blog, mesin pencari juga lebih mudah dalam mencari blog anda, dalam kata kunci tertentu, yang dicari oleh pengunjung internet, selain dari pada itu, penentuan keyword ini dapat mendatangkan pengunjung yang cukup banyak. Penentuan keywords populer perbulan ini juga digunakan oleh pakar seo untuk menentukan posting yang akan di publikasikan. Tool yang digunakan untuk mencari keyword populer perbulan ini adalah tools yang berasal dari goolge yaitu Adwords, Tools ini dibuat untuk para pengguna adwords (pengiklan) untuk mencari kata kunci sebelum memasang iklan, Namun tidak perlu khawatir tools ini juga dapat digunakan untuk para pengguna internet. Dan bagaimana cara untuk mencarinya?, Berikut cara untuk mencarinya :

Cara Mencari Keywords Terpopuler Bulan Ini

Silahkan pergi ke alamat https://adwords.google.com/um/Signup/Home , dan terlebih dahulu login, dan mendaftarkan diri anda.
Lihat Menu Tab Tools and Analysis, Lalu, Klik Keyword Planner.

Lalu, Klik Pada bagian, Search for new keyword and ad ad group ideas, Isi keyword yang ingin anda cari pada bagian Your product or service, semisal: Cars.
Anda juga bisa menambahkan category yang ingin anda cari pada bagian Your product category.
Isi penentuan keyword berasal dari mana, pada bagian Targeting, Setelah itu klik Tombol Get ideas.

Tunggu beberapa saat, dan lihat ada beberapa hasil, yang berdasarkan kata kunci yang anda cari tadi.

berdasarkan pencarian diatas, kotak yang ditandai dengan warna merah adalah kata kunci utama,dan category, yang tadi saya cari.
kotak yang ditandai dengan warna biru adalah tab untuk mencari kata kunci yang tadi anda cari, dan untuk melihat secara jelas kata kunci yang tadi anda cari klik tab Keyword ideas. fungsi dari tab Ad group ideas adalah untuk mencari keyword group yang anda cari tadi, dan masih berhubungan dengan keyword yang anda cari.
kotak yang berwarna hitam adalah group keyword dan keyword yang tadi anda cari.
kotak yang berwarna hijau adalah persaingan kata kunci dalam sebuah mesin pencari perbulan, yang menunjukan kata kunci yang tadi saya cari adalah kata kunci yang sering dicari.
kotak yang berwarna untuk adalah persaingan kata kunci.
kotak yang berwarna abu-abu ini adalah harga yang ditawarkan dalam sebuah pengiklanan.

Pencarian kata kunci diatas adalah sebuah pencarian dalam sebuah mesin pencari google, selain tools ini anda juga dapat mencari tools yang lain di internet.

Sekian posting kali ini semoga bermanfaat, dan

Salam Sukses,

Your-BelajarBLOG

Cara Membuat Author Box Keren Dengan CSS3

noreply@blogger.com (Irsyad Aslam) — Sat, 3 Aug 2013 17:43:00 +0700

Sebelumnya saya sudah pernah menulis mengenai cara membuat kotak admin pada blogger, namun kali ini saya akan membagikan cara untuk membuat author box. Author Box berguna untuk menampilkan sedikit cuplikan tentang author blog, dan sedikit descripsi mengenai posting yang telah dibaca. author box ini dibuat dengan kode css3 yang cukup unik, dilengkapi dengan, foto author, label author, 7 buah social ikon, author bio, posting yang telah di baca, dan sebagai pelengkap, efek transisi pada gambar, yang dibuat seunik mungkin dan lebih baru dari yang lain.

Cara Menambahkan Author Box Keren Dengan CSS3

Silahkan Masuk Ke Akun Blogger Anda.
Setelah itu, Klik Menu Template, --> simpan terlebih dahulu template yang anda gunakan, --> Klik Tombol Edit HTML.
Kemudian, Cari Kode ]]></b:skin> dengan menekan CTRL+F.
Tambahkan kode CSS berikut ini di atas kode ]]></b:skin> :

/* Author Box YBB
----------------------------------------------- */

.YBBpostauthorbox {
  position:relative;
  margin:5px auto;
  padding:15px;
  width:600px;
  min-height:170px;
  font:14px Trebuchet MS,sans-serif;
  text-align:justify;
  text-shadow:1px 0 0 #000000;
  background:#AFB0B0;
  background:-moz-linear-gradient(top,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#AFB0B0),color-stop(15%,#8B8B8B),color-stop(36%,#656565),color-stop(86%,#8B8B8B),color-stop(99%,#8B8B8B),color-stop(100%,#AFB0B0));
  background:-webkit-linear-gradient(top,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  background:-o-linear-gradient(top,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  background:-ms-linear-gradient(top,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  background:linear-gradient(top bottom,#AFB0B0 0%,#8B8B8B 15%,#656565 36%,#8B8B8B 86%,#8B8B8B 99%,#AFB0B0 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#AFB0B0',endColorstr='#AFB0B0',GradientType=0 );
  border:4px solid #333;
  padding:10px 15px 10px 15px;
  -webkit-box-shadow:inset -5px -9px 100px -18px #333;
  -moz-box-shadow:inset -5px -9px 100px -18px #333;
  -o-box-shadow:inset -5px -9px 100px -18px #333;
  -ms-box-shadow:inset -5px -9px 100px -18px #333;
  box-shadow:inset -5px -9px 100px -18px #333;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  -o-border-radius:7px;
  -ms-border-radius:7px;
  border-radius:7px;
  background-color:#000000;
  color:#EBEBEB;
  font-size:14px;
  -ms-border-radius:1.0em;
}

.YBBpostauthoravatar {
  background:#fff;
  border:1px solid #D3D3D3;
  float:left;
  height:128px;
  width:128px;
  padding:5px;
  position:relative;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 0 4px 0 #d9d9d9;
  -moz-box-shadow:0 0 4px 0 #d9d9d9;
  box-shadow:0 0 4px 0 #d9d9d9;
}

.YBBpostauthoravatar img {
  height:128px;
  width:128px;
  border-radius:5px;
  opacity:0.5;
  -moz-transition:all 0.5s ease-out;
  -o-transition:all 0.5s ease-out;
  -webkit-transition:all 0.5s ease-out;
  -ms-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}

.YBBpostauthoravatar:hover img {
  opacity:1;
}

.YBBpostauthorlabel {
  background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz4_zNUdeqo7onMDimA67lY2l3-aqx1Y2YOkmumocVIJVw6Kmx_JUoAHOmnNKSgoqj9KxZ7ocu0xtuqScQjv0VdNcZX-HFBHKViMGMX0KM71Sf_f4ulTaLy4VY1KtNVG9DyDKhaofNVt7K/s1600/admin.png") no-repeat center transparent;
  display:block;
  height:30px;
  position:absolute;
  bottom:-35px;
  width:128px;
}

.YBBpostauthorcontent {
  margin-left:160px;
}

.YBBpostauthorhead {
  border-bottom:1px solid #c4c4c4;
  margin-bottom:5px;
  padding:0 0 10px 0;
  position:relative;
}

.YBBpostauthorbox h5 {
  font-family:Trebuchet MS;
  color:#EBEBEB;
  font-size:25px;
  font-weight:normal;
  line-height:30px;
  margin:0;
  border:none;
  text-transform:none;
  text-decoration:none;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

.YBBpostauthorbox h5 a {
  color:#EBEBEB !important;
  text-decoration:none;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

.YBBpostauthorbox h5 a:hover {
  color:#A1A1A1 !important;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

.YBBpostauthorbox p.postAuthorbio {
  line-height:18px;
  font:14px Trebuchet MS,sans-serif;
  text-align:justify;
  color:#111;
}

.YBBpostauthorbox p a {
  color:#E65002;
}

.YBBpostauthorbox-footer {
  padding:10px 0;
  font:bold 12px Trebuchet MS;
}

#social,
#social li {
  list-style:none;
  float:left;
  margin:0;
  padding:0;
}

#social {
  margin-left:5px;
}

#social li {
  position:relative;
  padding:0 3px;
}

#social li:active {
  top:1px;
}

#social a {
  line-height:25px;
  display:block;
  font-size:0;
  text-indent:-9999px;
  width:25px;
  height:25px;
  background-color:#3F3F3F;
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdoKChEyZcFTLeusLa_5gFAFdsE8NjrncoywC-a1fkI9qRy8JU8VHeE9vZEGQG1rZ2fn3NVHC-IeN8nZlS-WPGEVBDYTIatO8HCAX_xNtsO355m0lwvpy2B6g02s4KYH1VzwS-_TWJgmN/s1600/social_icons.png);
  background-position:0 0;
  background-repeat:no-repeat;
  -moz-border-radius:9999px;
  -webkit-border-radius:9999px;
  border-radius:9999px;
}

#social a.fbisocial {
  background-position:-25px 0;
}

#social a.fbisocial:hover {
  background-color:#0166E6;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.twisocial {
  background-position:0 0;
}

#social a.twisocial:hover {
  background-color:#2ABAFD;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.goplussocial {
  background-position:-50px 0;
}

#social a.goplussocial:hover {
  background-color:#DF230A;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.pinisocial {
  background-position:-129px 0;
}

#social a.pinisocial:hover {
  background-color:#F00202;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.linisocial {
  background-position:-100px 0;
}

#social a.linisocial:hover {
  background-color:#036CCE;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

#social a.rssisocial {
  background-position:-75px 0;
}

#social a.rssisocial:hover {
  background-color:#E05B03;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  -o-transition:all .3s ease-in;
  transition:all .3s ease-in;
}

Setelah itu, Cari Kode <div class='post-footer'> dengan menekan CTRL+F.
Tambahkan kode HTML berikut ini di atas kode <div class='post-footer> :

<div class='YBBpostauthorbox'>
<div class='YBBpostauthoravatar'>
<img alt='Nama Anda' src='URL Foto Anda'></div>
</div>
<div class='YBBpostauthorcontent'>
<div class='YBBpostauthorhead'>
<h5>
                            Ditulis Oleh: 
                            <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank'><data:post.author/></a>
</h5>
</div>
<div class='postAuthorbio'>
                          Irsyad Aslam Adalah Pemilik Dari Blog Your-BelajarBLOG. kesukaan saya adalah blogging, dan mengubah-ubah kode-kode, membuat widget, dan lain sebagainya. Terimakasih Telah Membaca Artikel Diatas Yang Berjudul 
                          <b>
<a expr:href='data:post.url'><data:post.title/></a>   

</b>
</div>
<div class='YBBpostauthorbox-footer'>
                            <div style="float:left;">Join Me On:</div> 
                            <ul id='social'>
<li><a class='fbisocial' href='URL Akun Facebook Anda'>Facebook</a></li>
<li><a class='twisocial' href='URL Akun Twitter Anda'>Twitter</a></li>
<li><a class='goplussocial' href='URL Akun Google Plus Anda'>Google+</a></li>
<li><a class='pinisocial' href='URL Akun Pinterest Anda'>Pinterest</a></li>
<li><a class='linisocial' href='URL Akun Linkedin Anda'>Linkedin</a></li>
<li><a class='rssisocial' href='URL Akun Feeds Burner (RSS) Anda'>RSS</a></li>
</ul>
</div>
</div>

Keterangan :

Ganti Kode yang berwarna merah dengan Nama, Dan Foto Profile Anda.
Ganti Text yang berwarna orange dengan Bio Anda.
Ganti Kode yang berwarna biru dengan URL Akun Facebook Anda.
Ganti Kode yang berwarna biru muda dengan URL Akun Twitter Anda.
Ganti Kode yang berwarna merah muda dengan URL Akun Google Plus Anda.
Ganti Kode yang berwarna kuning dengan URL Akun Pinterest Anda.
Ganti Kode yang berwarna ungu dengan URL Akun Linkedin Anda.
Ganti Kode yang berwarna ungu muda dengan URL Akun Feeds Burner (RSS) Anda.

Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Cara Mengatasi Kesalahan Pemuatan Pada Blogger

noreply@blogger.com (Irsyad Aslam) — Wed, 31 Jul 2013 11:17:00 +0700

Kesalahan Pemuatan ini adalah kesalahan yang seringkali dialami pada blogger, yang muncul di setiap ingin melihat ikhtisar blogger. Peringatan Kesalahan blogger ini muncul bisa dikarenakan oleh cookie dan cache dari akun anda dan menimbulkan peringatan tersebut, sehingga kita tidak bisa melihat tampilan informasi dari blog yang anda punya. peringatan ini biasa muncul tulisan seperti berikut :

Maaf, tetapi kami tidak dapat menyelesaikan permintaan anda.
Bila melaporkan kesalahan ini kesalahan ini kepada Dukungan Blogger atau di Grup Bantuan Blogger, harap:
Uraikan apa yang Anda lakukan ketika menemui kesalahan ini.
Berikan kode kesalahan berikut.

bX-yp9t27
Informasi ini akan membantu kami melacak dan mengatasi masalah Anda! Maaf atas ketidaknyamanan ini.

Sehingga banyak blogger yang melaporkan kesalahan pemuatan ini pada forum dukungan blogger, dan Blogger sampai saat ini belum juga memberikan informasi mengenai permasalahan ini, tetapi Blogger sudah menanggapi masalah ini dan sedang dalam perbaikan, seperti lampiran berikut http://knownissues.blogspot.com/2011/12/some-users-are-reporting-bx-l4u1mh-when.html. namun, hal ini tidak usah di ambil pusing, ada beberapa cara untuk mengatasi kesalahan pemuatan pada blogger ini. seperti cara berikut ini:

Cara Dalam Mengatasi Kesalahan Pemuatan Pada Blogger

Cara mengatasinya adalah menutup akun google, dan browser anda, menghapus semua cookie, dan cache, merestart komputer anda, seperti berikut:

Tutup akun anda pada bagian kanan atas.
Setelah itu, Tutup Browser, --> Buka Browser lalu cek apakah masih belum bisa atau sudah,
Jika belum, bersihkan riwayat, cookie, berserta cachenya.
Setelah itu, Restart Komputer anda.

Jika cara ini belum juga menyelasaikan masalah, anda bisa menunggu keesokan harinya, yang akan sendirinya menyelesaikan masalah ini.

Selamat Mencoba dan Semoga Bermafaat,

Salam Sukses,

Your-BelajarBLOG

Cara Mengaktifkan Fitur Threaded Comments Pada Blogger

noreply@blogger.com (Irsyad Aslam) — Sat, 13 Jul 2013 11:56:00 +0700

Threaded Comments adalah sebuah komentar yang mempunyai fitur reply, yang berfungsi untuk memudahkan menjawab dalam berkomentar pada sebuah komentar. namun, tidak semua blogger yang menggunakan threaded comments ini, yang disebabkan oleh perbedaan template dan struktur template.

namun, tidak untuk template dari blogger, yang lebih mudah untuk diaktifkan. terdapat cara yang bisa mengaktifkan threaded comments ini seperti manual melewati pengaturan, dan sampai mengubah struktur template. Seperti cara berikut ini :

Cara Mengaktifkan Fitur Threaded Comments Pada Blogger

Silahkan masuk ke akun Blogger Anda.
Setelah itu, Klik menu Setelan, --> Klik Tab Pos dan Komentar.
Lalu, Lihat pada bagian Komentar, --> Pilih Tersemat pada Lokasi Komentar.

Kemudian, Klik tab Lainnya, --> Lihat tab Umpan Situs, --> Pilih Penuh pada bagian Izinkan Umpan Blog.

Setelah itu, Klik Tombol Simpan Setelan pada bagian kanan atas.

Dan jika cara diatas tidak berfungsi ikuti cara berikut ini :

Klik Menu Template, --> Simpan terlebih dahulu template anda, --> Klik Tombol Edit HTML.
Cari kode <b:include data='post' name='comments'/> , dengan menekan CTRL+F.
Ganti dengan kode berikut ini :

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

Setelah itu, Klik Tombol Simpan Template.

Mungkin itu adalah cara untuk mengaktifkan fitur threaded comments pada blogger, namun cara diatas tidak semua berfungsi, karena tergantung pada template yang dipasang.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Cara Membuat Breadcrumbs SEO Friendly Bergaya

noreply@blogger.com (Irsyad Aslam) — Sat, 13 Jul 2013 10:02:00 +0700

Breadcrumbs adalah sebuah navigasi posting yang berguna untuk menunjukan penunjuk halaman posting, dan memudahkan pengunjung untuk mencari posting dan memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau posting, yang berbentuk horizontal, dan terletak di atas judul posting. breadcrumbs berfungsi di mata mesin pencari, yang akan memudahkan mesin pencari untuk melacak posting yang anda buat. breadcrumbs ini belum terpasang secara automatis namun dipasang secara manual pada setiap blog, dan besar pengaruhnya pada tingkat SEO Blog.

Cara Membuat Breadcrumbs SEO Friendly Bergaya

Silahkan masuk ke akun Blogger anda.
Setelah itu, Klik Menu Template, --> Simpan template anda terlebih dahulu, --> Klik Tombol Edit HTML.
Cari kode ]]></b:skin> dengan menekan CTRL+F, Lalu masukan kode CSS berikut ini diatas kode ]]></b:skin> :

.breadcrumbs{background:0 rgba(255,255,255,0.1) 15px;height:30px;line-height:30px;border:solid 1px #bababa;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:auto;overflow:hidden;padding-left:10px;-moz-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;-ms-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;-o-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;-webkit-box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;box-shadow:inset 0 1px 0 #ffffff, 0 1px 0 #fff;text-shadow:0 1px 0 #FAFAFA;color:#666;margin:0;margin-bottom: 6px;}

.breadcrumbs li{list-style-type:none;display:inline-block;float:left}

.breadcrumbs a{display:inline-block;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtIbcYlA9OVQCPT5tWofnHn_FikxOep-mITKXxblRGD_htsQw8-HgeQTWM8pmVS9JZXWRhx8XUsoE1tYc8Bd_gDluGRO5_RgNPSR6Lodlu6AVY1nDD3rcTqAY-twKGWhUrNd5HQedYjsY/s1600/border_kanan.gif);background-repeat:no-repeat;background-position:right;padding-right:10px;text-decoration:none;color:#666;outline:none;text-shadow:0 1px 0 #fafafa}

.breadcrumbs a:hover{color:#000}

Kemudian, cari kode <b:includable id='main' var='top'> , dengan menekan CTRL+F.
Lalu, Masukan kode berikut ini diatas kode <b:includable id='main' var='top'> :

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.pageType == "item"'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <b:loop values='data:post.labels' var='label'> <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:loop> <span><data:post.title/></span> </div> </b:if> </b:loop> </b:if> </b:includable>

Lalu, Cari kode <b:include data='top' name='status-message'/> , dengan menekan CTRL+F.
Masukan kode berikut ini diatas kode <b:include data='top' name='status-message'/> :

<b:include data='posts' name='breadcrumb'/>

Catatan :

Jika kode <b:include data='posts' name='breadcrumb'/> terdapat dua atau lebih, letakan kode diatas di kedua-duanya.

Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Hal-Hal Yang Harus Diperhatikan Sebelum Mengganti Template Blog

noreply@blogger.com (Irsyad Aslam) — Thu, 11 Jul 2013 13:44:00 +0700

Tampilan blog adalah salah satu hal utama dalam sebuah blog, tampilan ini dibuat dengan berbagai cara, seperti, menambahkan widget unik, mengganti template, dan lain sebagainya. template adalah salah satu cara untuk menampilkan tampilan, namun sebelum anda mengganti template, ada beberapa hal yang harus diperhatikan sebelum mengganti template anda, mengganti template adalah salah satu yang mudah, namun tidak kita sadari kita telah melakukan hal yang buruk untuk blog yang kita buat, seperti, berubahnya Meta tags yang mempengaruhi pencarian blog, tidak teraturnya widget-widget yang telah dipasang, dan lain sebagainya. berikut adalah hal-hal yang harus diperhatikan sebelum anda mengganti template anda :

1. Menyimpan Template Yang Anda Gunakan.

Mengapa hal ini harus diperhatikan?, hal diatas adalah hal yang sering terabaikan dalam mengganti template, yang banyak dialami oleh blogger pemula. menyimpan template ini adalah hal yang bisa mencegah, ketidak sukaan anda pada template yang anda unduh dan memasangnya di blog anda. selain dari itu, bisa mencegah tampilan dari widget yang tidak teratur dalam mengedit html template anda. seperti cara berikut :

Silahkan masuk ke akun Blogger Anda.
Setelah itu, Klik Menu Template, Klik Tombol Cadangkan / Pulihkan yang terletak di atas kanan.

Kemudian, Klik Tombol Unduh template lengkap.

2. Menyimpan Data-Data Yang Ada Pada Template Sebelumnya.

Menyimpan data-data yang diperlukan maksudnya adalah sebuah data-data yang mempengaruhi pencarian blog anda pada mesin pencari, seperti halnya Meta tags, meta tags adalah sebuah tags yang harus di simpan dalam sebuah blog, yang nantinya akan mempengaruhi pencari di mensin pencari.

3. Memilih Template Yang Anda Sukai, Dan Mudah Untuk dirubah.

Memilih template adalah salah satu hal yang perlu diperhatikan, sebaiknnya perhatikanlah template yang menurut anda suka dan mudah untuk dirubah, maksud mudah dirubah ini adalah mudah untuk dirubah dalam mengedit HTML anda.

Setelah Hal-Hal diatas anda perhatikan, anda juga perlu memerhatikan hal-hal sesudah mengganti template, seperti memasang kembali data-data dari template sebelumnya, menata kembali widget-widget yang tidak teratur, menghapus widget yang tidak diperlukan yang terbawa oleh template yang baru, dan lain sebagainya.

Mungkin Cukup itu saja hal-hal yang harus anda perhatikan dalam mengganti template blog.

Semoga Bermanfaat,
Salam Sukses,

Your-BelajarBLOG

Cara Membuat Dropdown Menu Dengan CSS3 Bergaya Klasik

noreply@blogger.com (Irsyad Aslam) — Sun, 7 Jul 2013 11:31:00 +0700

Dropdown Menu adalah sebuah bar yang menampilkan menu (Halaman) yang dibuat untuk ditampilkan. dropdown ini sudah tersedia pada blogger, namun dropdown ini hanya berbentuk dropdown tunggal (tidak ada sub menu) atau widget laman.

Dropdown Menu ini adalah dropdown menu yang dibuat dengan kode css3 dan sebagai pelengkapnya menggunakan kode HTML, tentunya dengan memasang dropdown menu ini blog anda lebih menarik untuk dilihat.

Cara Untuk Memasang Dropdown Menu Dengan CSS3 Bergaya Klasik

Silahkan Masuk Ke Akun Blogger Anda.
Setelah itu, Klik menu Template, Simpan terlebih dahulu template yang anda gunakan, kemudian, klik tombol Edit HTML.
Cari kode ]]></b:skin> dengan menekan CTRL+F, Lalu Masukan Kode CSS3 Berikut ini :

#YBB_klasik-menu {

width:900px;

background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyjG4lxpBYtSsLMGBf9GxZ8k9vgU4um1ZsvQUkrTPHoVvAb4fJBrisOgzEzQub6W141wCTpMcMxmQ1AK9vSOJRIvnkfKWQQSzlNfpnuCbHJL-vdPN6Cs5BIl4EMsqfaXmqth-yQzu5s03s/s1600/ybb_klasik_menu_atas_bg.png) repeat-x scroll top;

color:#ddd;

height:35px;

-webkit-box-shadow:0 1px 5px #aaa;

-moz-box-shadow:0 1px 5px #aaa;

-ms-box-shadow:0 1px 5px #aaa;

-o-box-shadow:0 1px 5px #aaa;

box-shadow:0 1px 5px #aaa;

border-bottom:1px solid #000;

padding-top:8px;

border:none 5px #000000;

-moz-border-radius-topleft: 5px;

-moz-border-radius-topright:5px;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

-webkit-border-top-left-radius:5px;

-webkit-border-top-right-radius:5px;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:5px;

border-top-left-radius:5px;

border-top-right-radius:5px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

}

#YBB_klasik-menu ul,#YBB_klasik-menu li {

margin:0 auto;

padding:0 0;

list-style:none;

}

#YBB_klasik-menu ul {

height:35px;

width:980px;

}

#YBB_klasik-menu li {

float:left;

display:inline;

position:relative;

font:14px;

text-transform:none;

}

#YBB_klasik-menu a {

display:block;

line-height:35px;

padding:0 14px;

text-decoration:none;

color:#ddd;

}

#YBB_klasik-menu li a:hover {

color:#fff;

}

#YBB_klasik-menu input {

display:none;

margin:0 0;

padding:0 0;

width:80px;

height:30px;

opacity:0;

cursor:pointer;

}

#YBB_klasik-menu label {

font:bold 30px Arial;

display:none;

width:35px;

height:36px;

line-height:36px;

text-align:center;

}

#YBB_klasik-menu label span {

font-size:12px;

position:absolute;

left:35px;

}

#YBB_klasik-menu ul.menus {

height:auto;

overflow:hidden;

width:180px;

background:#f1eeed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2H2hZsYi7N8zrU3lRxWu60sEQy66V5OC3EBylKubgDqUSOZYZGqxYfRcTRxkqZPB8U461Om5H3NulgGKC9uW-v3k5tCVZcqOwzyAE-JZALRWNnAysuD5MPrGmmJdj1pEX0O6R9eQ7KCh/s1600/submenu_bg.png);

position:absolute;

z-index:99;

display:none;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:5px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

}

#YBB_klasik-menu ul.menus li {

display:block;

width:100%;

font:12px Arial;

text-transform:none;

text-shadow:none;

}

#YBB_klasik-menu ul.menus a {

color:#333;

}

#YBB_klasik-menu li:hover ul.menus {

display:block;

}

#YBB_klasik-menu a.submenu {

padding:0 27px 0 14px;

}

#YBB_klasik-menu a.submenu::after {

content:"";

width:0;

height:0;

border-width:6px 5px;

border-style:solid;

border-color:#ddd transparent transparent transparent;

position:absolute;

top:14px;

right:9px;

}

#YBB_klasik-menu ul.menus a:hover {

background:#ddd;

color:#333;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:5px;

border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

}

.page-YBB_klasik-menu {

width:70%;

margin:18px auto;

padding:0;

float:right;

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

}

.page-YBB_klasik-menu ul {

list-style:none;

color:#ddd;

width:700px;

margin:0 auto;

padding:0;

}

.page-YBB_klasik-menu ul li {

list-style:none;

line-height:32px;

display:inline-block;

}

.page-YBB_klasik-menu li a{

color:#ddd;

display:block;

font-size:14px;

font-family:Arial;

position:relative;

text-decoration:none;

text-transform:capitalize;

padding:0 10px;

}

.page-YBB_klasik-menu li a:hover,.page-YBB_klasik-menu .selected {

color:#fff;

text-decoration:none;

background: rgba(0,0,0,.4);

-moz-border-radius:4px;

-webkit-border-radius:4px;

border-radius:4px;

-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;

-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;

box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;

}

Setelah itu, Klik Menu Tata Letak, --> Klik Add Gadget, --> Klik Widget HTML, Kemudian Masukan kode berikut ini, pada widget tersebut :

<ul>

</ul>

</li>

<li><a href="#">About</a></li>

</ul>

</li>

<li><a href="#">Contact Us</a></li>

</ul>

</div>

Keterangan:

1. Ganti Kode berwarna Merah dengan menu anda.

2. Ganti Kode berwarna Kuning dengan submenu anda.

Kemudian, Klik tombol Simpan.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Cara Menambahkan Gaya Warna-Warni Pada Komentar Blogger Dengan CSS

noreply@blogger.com (Irsyad Aslam) — Sat, 15 Jun 2013 10:49:00 +0700

Menambahkan Gaya Warna-Warni adalah cara untuk menghiasi komentar agar lebih menarik untuk dipandang. Gaya Warna-warni pada komentar ini dibuat dengan menambahkan kode pelengkap yaitu CSS, dengan adanya kode CSS ini anda dapat mengkreasikan blog atau website anda, salah satu menghiasi komentar ini. Dengan menghiasi komentar ini pengunjung juga lebih tertarik untuk berkomentar.

Komentar Gaya Warna-warni ini mempunyai beberapa fitur seperti, Memberikan gaya latar warna pada nama, tombol Balas(reply), dan tanggal, dan mempunyai fungsi yaitu, jika latar berwarna orange berarti pengunjung, dan jika latar berwarna ungu muda berarti pemilik blog, dan sebagai pelengkap yaitu font.

Cara Menambahkan Gaya Warna-Warni Pada Komentar Blogger Dengan CSS

Silahkan Masuk Ke Akun Blogger Anda.
Setelah itu, Klik Menu Template, --> Simpan terlebih dahulu template anda, --> Setelah itu, Klik Tombol Edit HTML.
Cari Kode ]]></b:skin> dengan menekan CTRL+F.
Masukan Kode berikut ini diatas kode ]]></b:skin> :

@font-face {

font-family: 'Philosopher';

font-style: normal;

font-weight: 400;

src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff');

}

.comment .avatar-image-container {

border: 1px solid #B6B6B6;

max-height: 70px !important;

margin-top: -5px;

width: 70px !important;

position: relative;

z-index: 50;

}

.comment .comment-block {

margin-left: 75px !important;

}

.comment .comment-header {

background: none repeat scroll 0 0 #A9F5D0;

color: #333;

font-size: 15px;

font-weight: bold;

margin-left: 60px;

}

.comment .comment-header a {

color: white !important;

text-decoration: none;

}

.comment .comment-content {

background: none repeat scroll 0 0 #FEFFF9;

border-bottom: 2px solid #E6E6E6;

font-size: 14px;

margin: 0 0 30px;

padding: 5px 5px 10px 10px;

}

.comment .comment-actions a {

background: none repeat scroll 0 0 #DDD;

color: #333;

display: inline-block;

line-height: 1;

margin: 0 3px;

padding: 3px 6px !important;

text-decoration: none;

}

.comment .comment-actions a {

background: none repeat scroll 0 0 #DDD;

color: #333;

display: inline-block;

line-height: 1;

margin: 0 3px;

padding: 3px 6px !important;

text-decoration: none;

}

.comment-header cite {

background: none repeat scroll 0 0 #DF7401;

border: 1px solid white;

color: white;

padding: 2px 20px;

position: relative;

z-index: 99;

margin-left: -20px;

}

cite.blog-author {

background: none repeat scroll 0 0 #8181F7 !important;

}

.icon.blog-author {

display: none !important;

background: url("") no-repeat scroll 0 0;

margin-left: 90px;

width: 60px !important;

height: 60px !important;

position: absolute;

right: 5px;

bottom: 5px;

top: 10px;

}

.comment .comment-header {

color: #333;

font-size: 15px;

font-weight: bold;

}

.comment .avatar-image-container img {

border: medium none !important;

height: 70px !important;

width: 70px !important;

max-height: 70px !important;

max-width: 70px !important;

}

.comment .comment-actions a {

background: none repeat scroll 0 0 #DDD !important;

color: #333 !important;

display: inline-block !important;

line-height: 1 !important;

margin: 0 3px !important;

padding: 3px 6px !important;

text-decoration: none !important;

font-size:16px;

}

.comment .comment-actions a:hover {

background: #CCC !important;

text-decoration: none !important;

}

.comments {

font-family: 'Philosopher', arial, serif !important;

font-size: 1em;

color: black;

}

.comments .continue a {

display: block !important;

font-weight: bold !important;

padding: .5em !important;

color:#E34600;

font-size:16px;

}

.comments .continue a:hover {

color:#4D3123;

text-decoration:none;

}

.item-control {

display: none !important;

}

.comments .continue {

border-top: 2px solid transparent !important;

}

Kemudian, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Cara Mudah Mendaftarkan Blog Di Google Analytics

noreply@blogger.com (Irsyad Aslam) — Mon, 3 Jun 2013 16:35:00 +0700

Google Analytics adalah sebuah aplikasi program yang dibuat oleh mesin pencari raksasa yaitu google, yang dibuat untuk melayani secara gratis yang menampilkan statistik pengunjung blog atau website. Google Analytics dapat menulusuri pengunjung dari sebuah search engine (mesin pencari), Iklan adsense, dan lain sebagainya.

Dengan Google Analytics ini pemilik blog atau website dapat mengetahui seberapa tayangan halaman, statistik pengunjung (yang bisa dilihat berdasarkan hari, minggu, dan bulan), tayangan permenit, Bahasa dan negara pengunjung, Kata kunci terbanyak yang dipilih pengunjung, dan lain sebagainya.

Cara Mudah Mendaftarkan Blog Atau Website Di Google Analytics.

Silahkan Akses Ke Google Analytics.
Setelah itu, Klik Tombol Pendaftaran yang terdapat di ujung kanan.

Lalu, Pilih Metode, dan formulir pendaftaran website atau blog.

Setelah itu, Klik Tombol Dapatkan ID Pelacakan.
Baca Pesyaratan Google Analytics, Lalu, Klik Tombol Saya Setuju.
Salin ID Pelacakan Anda, Beserta Kode Pelacakan Anda.
Kemudian, Masuk Ke Akun Blogger Anda.
Klik Menu Setelan, --> Klik Lainnya, --> Masukan ID Pelacakan Anda Pada Tab Google Analytics.

Kemudian, Klik Tombol Simpan Setelan yang terdapat di atas kanan.
Setelah itu, Klik Menu Template, simpan template anda terlebih dahulu, --> Klik Tombol Edit HTML.
Cari Kode </head> dengan menekan CTRL+F.
Masukan Kode Pelacakan diatas kode </head>.
Kemudian, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Cara Menambahkan Gaya Warna Dengan CSS3 Pada Komentar Blogger

noreply@blogger.com (Irsyad Aslam) — Sun, 2 Jun 2013 12:06:00 +0700

Komentar adalah sebuah fitur yang terpasang pada setiap blog atau website, yang digunakan untuk menyampaikan pernyataan baik pertanyaan, kritik, dan lain sebagainya. Komentar ini sudah disediakan disetiap pembuatan blog atau website, namun komentar ini masih berbentuk standart, untuk mengubahnya perlu sedikit mengubah struktur html anda dan menambahkan kode-kode pelengkap.

Gaya Warna Komentar Blogger ini menggunakan kode-kode CSS3 untuk bisa menghiasinya dengan warna yang cukup beragam, dan terdapat 3 warna. Fitur yang terdapat pada komentar ini adalah terdapat nomor komentar yang diterbitkan, 3 Gaya warna sebagai penghias komentar, dan Pita Pemilik blog yang muncul jika anda berkomentar terletak di atas kanan.

Cara Menambahkan Gaya Warna Dengan CSS3 Pada Komentar Blogger

Silahkan Masuk Ke Akun Blogger Anda.
Setelah itu, Klik Menu Template, --> Simpan terlebih dahulu template anda, --> Klik Tombol Edit HTML.
Cari Kode ]]></b:skin> dengan menekan CTRL+F.
Lalu, Masuk Kode berikut ini diatas kode ]]></b:skin> :

Komentar Bergaya Berwarna Biru :

Masukan Kode Berikut ini:

/*Start Blogger Threaded Comments Stylish Colors*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJ4BEzf2r5B2qPtCYP6IGY6t4LqJpw_c45LZpw1yPdf_WmyPgEoypxSP_jgpg9v8-uEqnc95FXwx9juZGbunVDwKV9_v4ukSHe6ceRd2EkftsDoNfdZtFgunFqas9Un3eZcawSaNoWtPs/h120/pita+berwarna+biru.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*End Blogger Threaded Comments Stylish Colors*/

Komentar Bergaya Berwarna Merah Muda :

Masukan Kode Berikut ini:

/*Start Blogger Threaded Comments Stylish Colors*/

#comments{overflow:hidden}

#comments h4{display:inline;padding:10px;line-height:40px}

#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}

#comments h4,.comments .continue a{background:#d80556}

#comments h4,.comments .user a,.comments .continue a{font-size:16px}

#comments h4,.comments .continue a{font-weight:normal;color:#fff}

#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}

#comments .avatar-image-container img{border:0}

.comment-thread{color:#111}

.comment-thread a{color:#777}

.comment-thread ol{margin:0 0 20px}

.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}

.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}

.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}

.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}

.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}

.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0g4DcUHalo3oEquzICvZXCSDTJdrlrnfGsPJvyk0BCJ8shJ-DcPE-_u8uQt0tEbqs9zsA9XgsxQ53noWf730sDhWTBqOfE1XHPrtX-9QaDVERqOHTE6d2Uufo5LCXnXQBSYvlks6Mu9sq/h120/pita+berwarna+merah+muda.png);width:36px;height:36px}

.comments .comments-content .inline-thread{padding:0 0 0 20px}

.comments .comments-content .comment-replies{margin-top:0}

.comments .comment-content{padding:5px 0;line-height:1.4em}

.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}

.comments .comment-thread.inline-thread .comment{width:auto}

.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}

.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}

.comments .comment-thread.inline-thread .comment-block{margin-left:48px}

.comments .comment-thread.inline-thread .user a{font-size:13px}

.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}

.comments .continue{border-top:0;width:100%}

.comments .continue a{padding:10px 0;text-align:center}

.comment .continue{display:none}

#comment-editor{width:103%!important}

.comment-form{width:100%;max-width:100%}

/*End Blogger Threaded Comments Stylish Colors*/

Komentar Bergaya Berwarna Hijau :

Masukan Kode Berikut ini:

#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#56d805}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #56d805;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6RtMs5qVygTLaEKaU9ONvqqmvVYTZCTLwGDSq0YdoSE62KGD0PBpKJmrdc5wCZg2ukixpw3jYk3vb_eKjjv4wlCgPIcCCykcxrEC6Ut1dH96jYviFjYUseZwb5uk1DOSGa4vdQ90NTf52/h120/pita+berwarna+hijau.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Cara Menampilkan Kepemilikan Blog Pada Search Engine

noreply@blogger.com (Irsyad Aslam) — Sat, 1 Jun 2013 18:16:00 +0700

Kepemilikan Blog atau juga disebut dengan Authorship, Kepemilikan Blog ini dibuat untuk menampilkan sebuah foto, nama dari pemilik sebuah blog. yang muncul jika pengunjung mencari artikel dengan kata kunci tertentu pada search engine. Menampilkan Kepemilikan ini memiliki dampak yang sangat bagus bagi artikel yang dicari oleh pengunjung, jika pengunjung mengenal nama anda tentunya artikel yang dicari akan dipilih oleh pengunjung, dan tentunya agar lebih mengenal dari pemilik blog atau website dan memudahkan search engine untuk merayapi siapa pemilik situs tersebut.

Cara Menampilkan Kepemilikan Blog Pada Search Engine

Silahkan Masuk Ke Akun Google Anda.
Daftarkan Email anda Pada Kepengarangan Google.
Masukan Email Anda yang menjadi pemilik blog.

Setelah itu, Masuk Ke Google Plus Anda, Klik tab menu Tentang yang terdapat diatas.

Klik Edit Pada Kolom Tautan.

Lalu, Klik Tambahkan Tautan Khusus.

Masukan Nama, Beserta URL Blog Anda.
Kemudian, Klik Tombol Simpan.
Setelah itu, Masuk Ke Blogger Anda.
Lalu, Klik Menu Template, simpan terlebih dahulu template anda, Lalu Klik Tombol Edit HTML.
Cari Kode <head> simpan tags rel berikut ini dibawah kode <head>.

Setelah itu, Klik Tombol Simpan Template.

Dan Anda bisa mencek hasilnya di webmaster (Masuk ke halaman webmaster, --> Klik Sumber Daya Lainnya, --> Klik Alat Pengujian Data Terstruktur, Masukan URL Blog yang sudah dicantumkan.)

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Cara Membuat Jquery Pop Up Fans Page Facebook

noreply@blogger.com (Irsyad Aslam) — Sun, 26 May 2013 09:58:00 +0700

Fans Page Facebook adalah sebuah halaman khusus yang dibuat untuk menyabarkan informasi pada fans yang menyukai fans page. fans page ini dipasang di sebuah blog agar lebih banyak mendapatkan like dari pengunjung. Fans Page ini dipasang dengan banyak cara entah itu tombol like, Kotak Fans Page, Widget slide, Pop Up, dan lain sebagainya.

Fans Page dengan pop up adalah sebuah fans page yang muncul jika anda mengunjungi sebuah website atau blog entah dengan waktu (timer) atau hanya memakai tombol penutup (close). Widget Fans Page dengan jquery ini memiliki beberapa fitur unik seperti waktu (timer) yang bisa anda atur, Tombol batalkan (cancel), Jquery pop up yang membantu anda mendapatkan banyak fans atau like, dan mudah untuk dipasang, anda juga bisa mengatur judul widget.

Cara Membuat Jquery Pop Up Fans Page Facebook

Silahkan Masuk Ke Akun Blogger Anda.
Setelah itu, Klik Menu Template, --> Klik Tombol Edit HTML.
Cari kode berikut </head> dengan menekan CTRL+F.
Masukan Plugins Jquery Berikut diatas kode </head> :

Kemudian, Klik Tombol Simpan Template.

Catatan :

Lewati Langkah ini jika anda sudah pernah memasukan plugin jquery ini.

Setelah itu, Klik Menu Tata Letak, --> Klik Add Gadget, --> Tambahkan Widget HTML.
Masukan kode berikut ini :

#makingdifferentpopup{

position: fixed;

top:100px;

z-index:9999;

display:none;

padding:0px;

right:600px;

border:10px solid rgba(82, 82, 82, 0.7);

-webkit-background-clip: padding-box;

background-clip: padding-box;

-webkit-border-radius:8px 8px 8px 8px;

-moz-border-radius:8px 8px 8px 8px;

border-radius:8px 8px 8px 8px;

width:320px;

height:360px;

overflow:hidden;

}

#makingdifferentpopup span{

font-size:20px !important;

font-weight:bold !important;

}

#makingdifferentpopup h1{

background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgEJ34EMh35yXwM8lXUeQN-ollA6T9TgAyt7LreI8jb6dSBPESN3NMjFBBAanQqHmGDZ17XR7tNbURWHnk9XYGtOPL5oNWFCPyqDYyW9fyZ7y2v9cJSEvVivvoMSSvh5xpPA0UBSzi7PA/s1600/kunci+h1.png) 98% no-repeat;

border:1px solid #3b5998 !important;

color:#FFFFFF !important;

font-size:20px !important;

font-weight:700 !important;

padding:5px !important;

margin:0 !important;

font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;

overflow:hidden !important;

}

.htmlarea{

font-size:12px !important;

font-weight:normal !important;

height:265px !important;

padding:1px !important;

background:#fff !important;

border-bottom:2px solid #ddd;

overflow:hidden !important;

}

#mdfooter{

text-align:left;

background:#F2F2F2 !important;

height:56px !important;

padding:10px 10px 10px 10px !important;

overflow:hidden !important;

}

#mdclose{

float:right;

background-color:#eee !important;

border:1px solid #ccc !important;

color:#111 !important;

font-weight:bold !important;

padding:5px 8px 5px 8px !important;

text-decoration:none !important;

display:inline-block !important;

font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;

outline:none !important;

position:relative !important;

font-size:18px !important;

margin:1px !important;

}

#mdclose:active{

top:1px;

left:1px;

}

.grabthis{

bottom:80px;

font:8px "lucida grande",tahoma,verdana,arial,sans-serif;

position:absolute;

right:6px;

text-align:right;

z-index: 99999;

}

.grabthis a{

color: #000;

text-decoration:none;

}

.grabthis a:hover{

text-decoration:underline;

}

</style>

jQuery(document).ready(function() {

function makingdifferent_ppopup() {

var sec = 10

var timer = setInterval(function() {

$("#mdfooter span").text(sec--);

if (sec == 0) {

$("#makingdifferentpopup").fadeOut("slow");

clearInterval(timer);

}

},1000);

var mdwh = jQuery(window).height();

var mdpph = jQuery("#makingdifferentpopup").height();

var mdfromTop = jQuery(window).scrollTop()+50;

jQuery("#makingdifferentpopup").css({"top":mdfromTop});}

jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)

//alert(jQuery.cookie('sreqshown'));

//var mdww = jQuery(window).width();

//var mdppw = jQuery("#makingdifferentpopup").width();

//var mdleftm = (mdww-mdppw)/2;

var mdleftm = 500;

//var mdwh = jQuery(window).height();

//var mdpph = jQuery("#makingdifferentpopup").height();

//var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;

jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left: mdleftm}, 0).show();

jQuery("#mdclose").click(function() {

jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});

</script>

<h1>Join us on Facebook</h1>

By <a href="http://your-belajarblog.blogspot.com" target="_blank">Your-BelajarBLOG</a> | <a href="http://your-belajarblog.blogspot.com/2013/05/cara-membuat-jquery-pop-up-fans-page-facebook.html" target="_blank">Get Widget !</a>

</div>

Please wait..<span>10</span> Seconds

<a href="#" id="mdclose" onclick="return false;">Cancel</a>

</div>

Keterangan:

1. Kode yang berwarna merah adalah waktu (timer) dari pop up.

2. Kode yang berwarna kuning adalah judul tombol dari tombol pembatal (cancel)

3. Kode yang berwarna hijau adalah judul dari pop up.

4. Ganti kode yang berwarna orange dengan url fans page anda.

5. Kode yang berwarna abu-abu adalah lebar dan tinggi dari widget.

Setelah itu, Klik Tombol Simpan.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Kostumisasi Kesalahan 404 Untuk Blogger

noreply@blogger.com (Irsyad Aslam) — Sat, 25 May 2013 11:17:00 +0700

Kesalahan 404 atau disebut juga dengan Error 404 adalah sebuah halaman yang dimuat oleh pengunjung dari search engine yang sudah rusak atau sudah dihapus oleh pembuat blog. halaman yang telah rusak dikarenakan oleh pemilik blog yang tidak sadar mudahnya menghapus artikel yang sudah terindex oleh search engine sehingga artikel yang rusak dialihkan pada halaman kesalahan 404 dan menimbulkan tulisan seperti ini "Sorry, the page you were looking for in this blog does not exist".

Ada dua cara untuk mengganti tulisan atau tampilan halaman kesalahan 404 ini yaitu:

Dengan Cara Dari Pengaturan Blogger, Dan
Dengan Cara Mengedit HTML Template.

Cukup Simple untuk mengganti Tulisan dari Kesalahan 404 :

Masuk Ke Akun Blogger Anda.
Klik Menu Setelan, --> Klik Preferensi penelusuran, --> Lihat Kesalahan dan pengalihan, Klik Edit Pada "Pesan Khusus untuk Laman Tidak Ditemukan".
Masukan Pesan Yang Ingin Diganti.

Setelah itu, Klik Tombol Simpan Perubahan.

Cara pertama adalah cara yang simple, dan jika halaman ini tidak bekerja atau ingin lebih menarik, ikuti cara berikut ini dengan mengedit HTML :

Masuk Ke Akun Blogger Anda.
Klik Menu Template, --> Simpan terlebih dahulu template anda (backup Template), --> Klik Tombol Edit HTML.
Cari Kode berikut ini </head> dengan menekan CTRL+F.
Masukan Kode Berikut diatas kode </head> :

<b:if cond='data:blog.pageType == "error_page"'>

.status-msg-wrap{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinunIjCeDepvKb4Lr2apzlnbL4tleMZkpJfbLfl6eUPwsCc_v9nwH_3MlGb8TLfZt7j04f75E7JSLGXGFL12jiaK9MjDV7b4EOLau31kNJuYWkTQFcRJJI3HVFonceZ19g_M7nYstq_Au0/s1600/Kesalahan+404+(error).png) no-repeat right;

font-size:110%;

width:90%;

margin:10px auto;

position:relative;

height: 220px;

}

.status-msg-border{display:none;}

.status-msg-body{

text-align:left;

padding:.3em 0;

width:100%;

position:static;

z-index:4

}

</style>

</b:if>

Untuk Judul Halam Kesahalan ini sendirinya tampil judul blog anda, namun jika anda ingin menggantinya ganti kode berikut :

Ganti Dengan Kode Berikut :

<b:if cond='data:blog.pageType == "error_page"'>

<title>Page Not Found (Kesalahan 404)</title>

<b:else/>

</b:if>

Keterangan :

Tulisan yang berwarna merah adalah judul dari halaman kesalahan 404.

Lalu, Klik Tombol Simpan Template.
Kostumisasi Tulisan dari kesalahan 404, Klik Menu Setelan, --> Klik Preferensi penelusuran, --> Lihat Kesalahan dan pengalihan, Klik Edit Pada "Pesan Khusus untuk Laman Tidak Ditemukan".
Masukan Kode atau tulisan berikut ini :

<h3>Halaman diminta Anda tidak ditemukan</h3>

<p>Maaf, Kami Tidak Dapat Menemukan Halaman Yang Anda Cari. Mungkin Sudah Dihapus, Atau Namanya Sudah Berubah, Atau Sementara Tidak Tersedia.<br/>

Harap Periksa Bahwa Alamat Website Ditulis Dengan Benar.</p>

<b>Silahkan Cari Artikel Yang Lain Yang Terdapat Pada Website Kami</b><br/>

<ul>

<li>Masuk Ke <a href="/">Halaman Utama Kami</a>, Dan Cari Artikel Menarik Lainnya</li>

<li>

<tr>

</tr>

</table>

</form>

</li>

</ul>

Setelah itu, Klik Tombol Simpan Perubahan.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Modifikasi Posting Blogger Dengan Kotak Bergaya Menggunakan CSS3

noreply@blogger.com (Irsyad Aslam) — Sun, 19 May 2013 10:38:00 +0700

Salah satu konten yang terdapat pada blog adalah sebuah posting. Posting adalah sebuah konten atau isi dari sebuah blog. dan hal penting dari sebuah blog adalah keindahan dan keunikan dari sebuah blog dan tentunya pembuat blog membuat desain sebagus mungkin dan sejelas mungkin. agar pengunjung bisa membedakan dari konten atau isi blog atau widget blog, dan tentunya lebih nyaman dengan tampilan blog.

Salah satunya dengan memodifikasi posting blogger dengan menggunakan efek CSS3 transisi, dan kotak untuk memembedakan posting yang sebelumnya hanya terdapat satu terletak di bawah, dan sidebar widget.

Dengan menggunakan kode CSS3 ini anda juga bisa menentukan dari background posting, untuk pelengkap agar menarik Posting dibuat menggunakan efek shadow.

Cara Untuk Memasangnya :

Silahkan Masuk Ke Akun Blogger Anda.
Setelah itu, Klik Menu Template, Simpan terlebih dahulu template anda, Klik Tombol Edit HTML.
Cari Kode .post { dengan menekan CTRL+F.
Ganti semua kode dalam kode .post { dengan kode berikut ini:

margin: 10px 10px 40px 7px;

padding: 10px;

border: 1px solid #CCCCCC;

-webkit-border-radius: 0 20px 0 20px;

border-radius: 0 20px 0 20px;

background: #FEFFE6;

-webkit-box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);

box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

Contoh Seperti Berikut:

.post {
margin: 0 0 25px 0;
.......;
................;
......................;
}

Ganti semua kode seperti berikut :

.post {

margin: 10px 10px 40px 7px;

padding: 10px;

border: 1px solid #CCCCCC;

-webkit-border-radius: 0 20px 0 20px;

border-radius: 0 20px 0 20px;

background: #FEFFE6;

-webkit-box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);

box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

Kemudian, Tambahkan kode dibawah kode .post{.....;} :

.post:hover {

-webkit-border-radius: 20px 0 20px 0;

border-radius: 20px 0 20px 0;

background: #fff;

}

Seperti kode berikut :

.post {

margin: 10px 10px 40px 7px;

padding: 10px;

border: 1px solid #CCCCCC;

-webkit-border-radius: 0 20px 0 20px;

border-radius: 0 20px 0 20px;

background: #FEFFE6;

-webkit-box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);

box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.post:hover {

-webkit-border-radius: 20px 0 20px 0;

border-radius: 20px 0 20px 0;

background: #fff;

}

Keterangan:

Kode yang berwarna merah adalah pembatas dari kotak posting.
Kode yang berwarna kuning adalah ketebalan dan warna garis pembatas kotak posting.
Kode yang berwarna hijau adalah warna background dari kotak posting.
Kode yang berwarna biru adalah warna background setelah di arahkan (hover).

Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Kini Hadir 2 Widget Terbaru Dari Blogger

noreply@blogger.com (Irsyad Aslam) — Sat, 18 May 2013 14:37:00 +0700

Akhir-Akhir ini Blogger telah menambahkan 2 widget terbaru yang mudah untuk dipasang. Berikut 2 Widget Terbaru dari Blogger :

1. Wikipedia

Wikipedia adalah sebuah website pengetahuan dunia, Entah itu pengetahuan tumbuhan, negara, dan lain sebagainya. untuk mempermudah pengunjung untuk mencari pengetahuan dan blogger menambahkan widget wikipedia yang berfungsi untuk mencari kata atau artikel dari web wikipedia dengan mudah, cepat dan nyaman.

Cara Untuk Menambahkanya:

Masuk Ke Blogger Anda.
Klik Menu Tata Letak, --> Tambahkan Gadget, --> Gadget Lainnya, --> Tambahkan Widget Wikipedia.
Kemudian, Klik Tombol Simpan.

Kelebihan Dari Widget Wikipedia :

Mudah untuk di pasang.
Ukurannya Tidak Terlalu Besar.

2. Formulir Kontak

Formulir Kontak (Contact Form) adalah sebuah form pengisian formulir yang terdapat pada halaman atau pun widget yang berguna bagi pengunjung untuk menghubungi si pemilik blog atau website. Setelah bertahun-tahun peguna blogger menunggu dan Akhirnya google telah menambahkan beberapa widgetnya, selain widget wikipedia, blogger juga menambahkan widget Formulir Kontak. Dan tentunya widget ini membantu dalam hal Formulir Kontak, yang sebelumnya pengguna blogger menggunakan hosting form.

Cara Untuk Menambahkanya:

Masuk Ke Blogger Anda.
Klik Menu Tata Letak, --> Tambahkan Gadget, --> Gadget Lainnya, --> Tambahkan Widget Formulir Kontak.
Kemudian, Klik Tombol Simpan.

Kelebihan Dari Widget Contact Form :

Mudah Untuk Dipasang.
Formulir yang telah diisi sendirinya akan terkirim pada email si author.
Ukuran dari widget ini tidak terlalu besar.

Selamat Mencoba dan Semoga bermanfaat,

Salam Sukses,

Your-BelajarBLOG

Efek Zoom Dengan Jquery, Javascript, Dan CSS3

noreply@blogger.com (Irsyad Aslam) — Thu, 9 May 2013 13:29:00 +0700

Efek Zoom berguna sebagai membesarkan gambar yang terlihat kecil menjadi besar, Efek zoom ini sebelumnya sudah pernah saya bahas menggunakan CSS3.

Namun Pada Tutorial kali ini saya akan menjelaskan cara untuk membuat Efek Zoom dengan menggunakan Kode Jquery, Javascript, Dan CSS3.

Efek Zoom ini berguna sekali bagi anda yang mempunyai blog penjualan sehingga pengunjung lebih detail melihat produk anda. dan berguna untuk sebagai galeri baik foto, ataupun template. Efek ini muncul jika kursor diarahkan ke gambar. Untuk Membuatnya, Silahkan Ikuti langkah berikut ini :

Silahkan Masuk Ke Blogger Anda.
Setelah itu, Klik Menu Template, --> Simpan terlebih dahulu template Anda, --> Klik Tombol Edit HTML.
Cari Kode </head> dengan menekan CTRL+F.
Masukan Kode Plugins Jquery berikut diatas kode </head> :

Cari Kode </body> dengan menekan CTRL+F.
Setelah itu, Masukan Kode javascript berikut diatas kode </body> :

Kemudian, Cari Kode ]]></b:skin> dengan menekan CTRL+F:
Masukan Kode CSS3 Berikut ini diatas kode ]]></b:skin> :

#preview{

position:absolute;

border:1px solid #ddd;

background:#eee;padding:5px;

display:none;color:#333;

}

Setelah itu, Klik Tombol Simpan Template.
Kemudian Jika ingin mengaktifkannya, Masukan Kode class="preview" dan title="Judul Atau Keterangan Gambar" Seperti Kode berikut :

Keterangan:

Ganti Kode Berwarna Merah dengan URL Blog dari Gambar Anda.

Ganti Kode Berwarna Kuning dengan Keterangan Atau Judul Gambar.

Ganti Kode Berwarna Hijau dengan Keterangan Gambar.

Ganti Kode Berwarna Biru dengan URL Gambar Anda.

Setelah itu, Klik Tombol Publikasikan.

Selamat Mencoba,
Salam Sukses,

Your-BelajarBLOG

Tips Jitu Menambahkan Kecepatan Blog

noreply@blogger.com (Irsyad Aslam) — Sun, 5 May 2013 09:39:00 +0700

Bagi Sebagian blogger pemula gagal dalam memulai blog, yaitu salah satunya adalah kecepatan blog. Kecepatan blog ini adalah salah satu hal penting yang harus diperhatikan dalam memulai blog.

Jika kecepatan blog anda terlalu lambat tentunya pengunjung tidak akan suka. untuk mengatasi masalah ini ada tips dalam memulai blog agar blog tidak lambat. Tutorial dibawah adalah tutorial jitu dalam menambahkan Kecepatan Blog.

1. Jangan Gunakan Foto Sebagi Latar Belakang (Background)

Jika anda menggunakan Foto sebagi latar belangkang, sebaiknya ganti dengan gambar latar belakang yang simple-simple saja. karena foto jika dipasang akan memperlabat hingga 50%.

2. Kurangi Widget Iklan

Jika Anda menggunakan blog sebagai percarian uang, dengan menyimpan widget iklan yang terlalu banyak, sebaiknya kurangi widget iklan ini. karena Widget iklan ini menggunakan Script, yang menyimpan URL iklan PPC. minimal iklan yang ditayangkan adalah 3-4.

3. Menghilangkan Link Eksternal

Apa Itu Link Eksternal?, Link Eksternal adalah sebuah link yang berasal dari luar blogger. Jauhkan Widget Site Traffic melainkan menggunakan Google Analytics.

4. Jangan Hosting Gambar Dengan Hosting Yang Lain

Sebaiknya anda menghosting menggunakan layanan blogger, jangan menggunakan layanan lain seperti TinyPic ataupun Photobucket. karena untuk menggunakan hosting gambar yang lain gambar yang ditayangkan harus diunggah terlebih dahulu.

5. Kurangi Widget Yang Tidak Diperlukan

Seperti Apa Widget Yang tidak diperlukan?, Contoh seperti widget Jam, Kalender, dan lain sebagainya.

6. Tampilkan 4-7 Posting Pada Halam Depan

Jangan Menampilkan lebih dari 7 posting di halaman depan. Jika lebih dari 7 pengunjung bingun untuk memilh posting yang mana yang ia pilih, dan menambah beban kecepatan blog.

7. Meringkas Posting Dengan Fitur Read More (Baca Selengkapnya)

Jika posting yang terlalu panjang di home page adalah salah satu hal yang dianggap sebagai beban dalam sebuah blog, untuk bisa memotongnya digunakan lah fitur Read More untuk meringkasnya.

8. Kurangi Script Yang Tidak Diperlukan Di HTML Template

Apa saja script yang tidak diperlukan?, seperti Efek-Efek, dan lain sebagainya.

Hal-Hal diatas adalah yang tidak disadari oleh blogger pemula dalam memulai blog.

Semoga Bermanfaat,

Salam Sukses,

Your-BelajarBLOG

Modifikasi Pesan Komentar Blogger

noreply@blogger.com (Irsyad Aslam) — Sat, 4 May 2013 08:49:00 +0700

Pesan Komentar blog adalah sebuah tulisan untuk menyampaikan pesan, tata cara dalam berkomentar, dan lain sebagainya. Pesan Komentar ini sudah terpasang oleh sebuah template, terletak diatas kotak komentar, namun pesan komentar ini hanya simple saja, tanpa adanya kode-kode yang menambahkannya.

Memodifikasinya adalah salah satu caranya, dengan memodifikasi pesan komentar ini anda dapat menentukan background dari sebuah pesan komentar, tampilan font, dan tentunya lebih stylish. Pesan Komentar ini dibuat dengan menggunakan kode CSS3 dan sedikit menggunakan HTML sebagai pelengkapnya. dilengkapi dengan anak panah untuk menunjukan pesan komentar, dan bayangan kotak. Ikutilah cara berikut ini untuk membuatnya:

Silahkan masuk ke Blogger Anda.
Setelah itu, Klik Menu Template, --> Simpan terlebih dahulu template anda, --> Klik Tombol Edit HTML.
Cari Kode ]]></b:skin> dengan menekan CTRL+F.
Masukan kode CSS3 berikut diatas kode ]]></b:skin> :

/* CSS3 Pesan Komentar YBB */

#YBB-comment{

position: relative;

background:#E1E1E1; /* background pesan komentar */

width:100%;

box-shadow: 5px 5px 5px #CCCCCC; /* Bayangan Pesan Komentar */

padding:10px;

font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; /* font dari pesan komentar */

text-align:justify;

border:3px solid #717171; /* Garis Batas pesan komentar */

margin:0 10px 10px 0;

margin-top: 10px;

line-height: 1.3em;

}

#YBB-comment::after, #YBB-comment::before {

top: 100%;

border: solid transparent;

content: " ";

height: 0;

width: 0;

position: absolute;

pointer-events: none

}

#YBB-comment::before {

border-top-color: #717171; /* Anak Panah pesan komentar samakan dengan garis pembatas */

border-width: 15px;

left: 10%;

margin-left: -30px

}

#YBB-comment::after {

border-top-color: #E1E1E1; /* Anak Panah pesan komentar samakan dengan background */

border-width: 9px;

left: 10%;

margin-left: -24px

}

Setelah itu, cari kode <p><data:blogCommentMessage/></p> dengan menekan CTRL+F.
Ganti dengan kode berikut <div id='YBB-comment'><data:blogCommentMessage/></div> .

Catatan :
Jika kode <p><data:blogCommentMessage/></p> ada dua ganti kedua kode tersebut.

Kemudian, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Hal-Hal Yang Harus Diperhatikan Dalam Pembuatan Template Blogger

noreply@blogger.com (Irsyad Aslam) — Fri, 3 May 2013 19:53:00 +0700

Selain konten, daya tarik dari sebuah blog bagi para pengunjung sebagian besar terletak pada bagian tata letak atau desain tampilan atau template blog. jika blog itu sendiri menyajikan tampilan dan konten post yang cukup rapih, dan pengunjung akan lebih nyaman.

Apa itu Template?, Template adalah sebuah tampilan sebuah blog yang dibuat dengan menggunakan kode HTML. HTML adalah sebuah kode pemprograman untuk membuat tampilan dari sebuah blog atau website, dan dilengkapi dengan kode-kode pendukung seperti PHP, Javascript, CSS, SQL, dan lain sebagainya.

Untuk bisa membuat template ada hal-hal yang harus diperhatikan dalam pembuatan template blogger, dan mengenal bagian-bagian yang ada di dalam sebuah template itu sendiri, Seperti berikut ini:

Header atau Widget pada bagian atas dari sebuah blog. Header ini berisi Judul Blog atau pun Gambar.
Sidebar atau Template untuk menyimpan Widget pada bagian kiri atau kanan. Bagian ini berfungsi untuk menyimpan widget yang ditampilkan.
Konten atau Posting . konten ini adalah tempat untuk meletakan artikel atau posting.
Footer atau bagian penyimpanan widget pada bagian bawah. Footer ini berfungsi sama dengan Sidebar melainkan Footer ini terletak pada bagian bawah.

Ada juga pula hal-hal yang harus diperhatikan dalam pembuatan Template blogger, seperti berikut ini:

<?xml version="1.0" encoding="UTF-8" ?> kode ini berfungsi untuk menandai bawah template yang akan dibuat sudah mendukung pemprograman XML 1.0
<! DOCTYPE html> kode ini untuk menandai bahwa template ini sebuah dokumen berjenis HTML.
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> Kode ini sebuah kode pembuka dan data XML, Bahasa.
<head> kode ini adalah kode HTML pertama dan tempat untuk menyimpan Meta Tags.
<title>Judul Blog</title> kode ini adalah kode untuk menampilkan Judul blog anda.
<b:skin><![CDATA[ kode yang berfungsi untuk menyampaikan informasi blog.
]]></b:skin> kode yang berfungsi untuk menyimpan kode CSS.
</head> kode sebagai penutup kode pertama dan tempat untuk menyimpan Javascript.
<body> kode yang berfungsi untuk menyimpan konten posting.
</body> kode yang berfungsi untuk menutup kode <body> .
</html> kode yang berfungsi untuk menutup kode </html> kode pembuka.

Seperti Struktur template dibawah ini :

<?xml version="1.0" encoding="UTF-8" ?>
<! DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>



<title></title>

<b:skin><![CDATA[

/* ---------------------------------------------------
Template Name : [ Nama Template ]
Finishing Date : [ Tanggal Selesai dibuat ]
Designed : [ Author ]
URL : [ Url Blog/Website Author ]
--------------------------------------------------- */

-------------------
-----------------------
/* CSS Blogger */
----------------------
----------
----------------------
]]></b:skin>



</head>

<body>



</body>

</html>

Semoga Bermanfaat,

Salam Sukses,

Your-BelajarBLOG

12 CSS3 Text Shadow Keren Untuk Blog Atau Website

noreply@blogger.com (Irsyad Aslam) — Thu, 2 May 2013 17:44:00 +0700

Apa itu Text Shadow?, Text Shadow adalah bayangan dari sebuah tulisan Judul Blog, Judul Posting, dan lain sebagainya.

Selain font yang dirubah agar lebih menarik, memberikan bayangan pada tulisan juga bisa lebih menarik dari blog atau website.

text shadow ini cocok untuk dipasang di Judul Blog, atau pun Judul Posting agar lebih menarik. terdapat 12 text shadow yang mudah untuk dipasang di blog atau website anda. beserta tutorial cara untuk memasangnya :

Silahkan masuk ke blogger anda.
Setelah itu, Klik Menu Template, --> Simpan template anda terlebih dahulu, --> Klik Tombol Edit HTML.
Kemudian, Cari kode berikut ini dan taruh CSS3 Text Shadow:

Jika Anda ingin menampilkan di judul posting cari kode berikut ini:

.post {
----------------;
----------------;
-------------;
---------------;
-----------------;
CSS3 text shadow;}

Jika Anda ingin menampilkan di judul blog cari kode berikut ini:

#header {
-------------;
-----------------;
------------------;
--------------------;
-----------------;

CSS3 text shadow;}

12 CSS3 text shadow untuk blog atau website :

text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

body {

background: #222;

}

#text h1 {

color: rgba(0,0,0,0.6);

text-shadow: 2px 2px 3px rgba(255,255,255,0.1);

}

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

text-shadow: 0px 3px 0px #b2a98f,

0px 14px 10px rgba(0,0,0,0.15),

0px 24px 2px rgba(0,0,0,0.1),

0px 34px 30px rgba(0,0,0,0.1);

text-shadow: 0px 4px 3px rgba(0,0,0,0.4),

0px 8px 13px rgba(0,0,0,0.1),

0px 18px 23px rgba(0,0,0,0.1);

text-shadow: 0 1px 0 #ccc,

0 2px 0 #c9c9c9,

0 3px 0 #bbb,

0 4px 0 #b9b9b9,

0 5px 0 #aaa,

0 6px 1px rgba(0,0,0,.1),

0 0 5px rgba(0,0,0,.1),

0 1px 3px rgba(0,0,0,.3),

0 3px 5px rgba(0,0,0,.2),

0 5px 10px rgba(0,0,0,.25),

0 10px 10px rgba(0,0,0,.2),

0 20px 20px rgba(0,0,0,.15);

background-color: #666666;

-webkit-background-clip: text;

-moz-background-clip: text;

background-clip: text;

color: transparent;

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

text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

text-shadow: -10px 10px 0px #00e6e6,

-20px 20px 0px #01cccc,

-30px 30px 0px #00bdbd;

text-shadow: 0px 15px 5px rgba(0,0,0,0.1),

10px 20px 5px rgba(0,0,0,0.05),

-10px 20px 5px rgba(0,0,0,0.05);

color: rgba(0,0,0,0.6);

text-shadow: 2px 8px 6px rgba(0,0,0,0.2),

0px -5px 35px rgba(255,255,255,0.3);

Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Cara Mengatasi Komentar Google Plus Yang Tidak Muncul

noreply@blogger.com (Irsyad Aslam) — Wed, 1 May 2013 17:45:00 +0700

Memunculkan komentar Google plus cukup mudah, hanya dengan mencentang kotak Komentar Google Plus pada Menu Google Plus, namun hal ini tidak dirasakan oleh sebagian blogger yang mempunyai blog. Hal ini dikarenakan Template yang dipasang tidak mendukung Komentar Google Plus.

Komentar ini sangat mudah bagi anda yang beruntung menggunakan template default dari blogger. namun, bagi sebagian yang menggunakan template yang dari luar atau kostumisasi template, dan tidak mudah untuk mengaktifkan Komentar Google Plus ini, dan harus mengedit HTML templatenya dan menambahkan beberapa kode.

Untuk bisa menampilkan komentar google plus ini, ikuti cara-cara berikut ini:

Silahkan Masuk Ke Blogger Anda.
Setelah itu, Klik Menu Template, --> simpan terlebih dahulu template anda, --> Lalu, Klik Tombol Edit HTML.
Cari Kode <div class='comments' id='comments'> dengan menekan CTRL+F.
Masukan Kode Berikut ini tepat dibawah kode <div class='comments' id='comments'> :

Lalu, Klik Tombol Simpan Template.

Jika Masih Tidak Muncul Ikuti Cara Berikut ini :

Silahkan Masuk Ke Blogger Anda.
Setelah itu, Klik Menu Template, --> simpan terlebih dahulu template anda, --> Lalu, Klik Tombol Edit HTML.
Cari Kode <b:includable id='comments' var='post'> dengan menekan CTRL+F.
Masukan kode berikut ini diatas kode <b:includable id='comments' var='post'> :

<b:includable id='g-comments' var='post'>

<a href='#g-comments-outer' id='g-comments-loader'>Add Comments</a>

</div>

//<![CDATA[

(function() {

var btn = document.getElementById('g-comments-loader'),

showGC = function() {

var script = document.createElement('script'),

head = document.getElementsByTagName('head')[0], old;

script.type = "text/javascript";

script.id = "g-comments-script";

script.src = "//apis.google.com/js/plusone.js";

if (document.getElementById('g-comments-script')) {

old = document.getElementById('g-comments-script');

old.parentNode.removeChild(old);

}

head.appendChild(script);

};

btn.onclick = function() {

this.innerHTML = "Memuat...";

showGC();

return false;

};

})();

//]]>

</script>

</b:includable>

Keterangan:
Kode yang berwarna merah adalah lebar dari kotak komentar google plus.

Kemudian, Cari kode berikut ini :

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "static_page"'>

<b:include data='post' name='comment_picker'/>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<b:include data='post' name='comment_picker'/>

</b:if>

Jika Tidak Ada Cari Kode Berikut ini :

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "static_page"'>

<b:include data='post' name='comments'/>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<b:include data='post' name='comments'/>

</b:if>

Lalu, Ganti dengan kode berikut ini:

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "static_page"'>

<b:include data='post' name='g-comments'/>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<b:include data='post' name='g-comments'/>

</b:if>

Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Cara Memasukan File SWF Pada Blog

noreply@blogger.com (Irsyad Aslam) — Tue, 30 Apr 2013 16:17:00 +0700

Untuk bisa memasukan file swf ini dibutuhkan Kode Embed SWF. Apa itu Kode Embed ?, Kode yang berfungsi untuk menambahkan file seperti SWF, Video, Dan lain-lain. dan apa itu File SWF ?, File SWF adalah file yang dibuat menggunakan software flash atau menggunakan website penyedia fitur flash. yang sebelumnya saya bahas tentang cara untuk membuat banner menggunakan flash.

Kode Embed File SWF ini adalah kode yang bisa memasukan file SWF ke blog. untuk bisa mengupload file swf digunakan web lain dikarenakan sampai saat ini blogger belum menyediakan hosting swf. namun hal ini tidak menghalangi file swf tidak bisa diunggah. untuk bisa memasukan anda perlu menghosting file swf ini di web penyedia hosting swf, seperti swfcabin, ximg, dan lain sebagainya. namun toturial kali ini, menggunakan website ximg. berikut cara untuk membuatnya :

Silahkan kunjungi web ximg.
Setelah itu, Klik tombol Pilih File atau Browser, Masukan File SWF Anda, isi form email dengan email anda, Lalu, Klik Tombol Upload.

Tunggu Beberapa Saat, Copy URL File SWF anda.

Setelah itu, Masuk Ke Blogger Anda.
Lalu, Klik Menu Tata Letak, --> Klik Add Gadget, --> Tambahkan Widget HTML, atau juga bisa menambahkan di posting blog dengan cara mengeklik tombol HTML yang ada di atas kiri.
Tambahkan Kode Embed Berikut ini :

Keterangan:

Ganti Kode yang berwarna Merah dengan URL File SWF Anda.

Kode yang berwarna kuning dan hijau adalah lebar dan tinggi dari file swf anda.

Setelah itu, Klik Tombol Simpan atau Publikasikan pada posting.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Cara Menggabungkan Komentar Blogger Dengan Komentar Google Plus

noreply@blogger.com (Irsyad Aslam) — Sat, 27 Apr 2013 15:12:00 +0700

Komentar Google Plus adalah salah satu fitur terbaru di blogger. komentar ini cocok untuk pengunjung untuk bisa berdiskusi di blog dan tentu juga di Google plus. Seperti yang sebelumnya saya bahas, mengenai komentar google plus dan mengaktifkan komentar google plus. Dengan menaktifkan komentar Google Plus ini Komentar Blogger yang sebelumnya akan terhapus dan digantikan dengan Komentar Google Plus. Maka Dengan menggabungkan Komentar inilah, komentar blogger lama tidak akan hilang, melainkan bergabung dengan komentar Google Plus.

Hal ini adalah hal yang tepat untuk para blogger yang mengerti kode pemprograman, untuk bisa menggabungkan kedua komentar ini dengan menggunakan Kode - Kode yang dipasang. Penggabungan komentar ini dibuat oleh author MBL.

Menggabungkan Komentar Blogger Dengan Komentar Google Plus berfungsi untuk pengunjung yang ingin menyampaikan komentarnya, Melalui Komentar Blogger, Ataupun Komentar Google plus.

Cara Menggubungkan Komentar Blogger Dengan Komentar Google Plus :

Silahkan Masuk Ke Blogger Anda.
Setelah itu, Klik Menu Template, --> Terlebih dahulu backup template anda, --> Lalu, Klik Tombol Edit HTML.
Kemudian Cari Kode berikut ini dengan menekan CTRL+F :

<b:includable id='threaded_comments' var='post'>
.
.

.
.
</b:includable>

Ganti kode diatas, dengan kode berikut ini :

<b:includable id='threaded_comments' var='post'>

<h6>Berkomentar Dengan :</h6> <img class='com-on' id='com-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcyuWpzIfX_f1G61pIwXPiSjEIxUsxlqPD_X_hAWrj-cWiS6Fhn1AyxvnKT8vmomYw_o0_ozFFILlgpeOVM4e1oPsxoMIRc6oOBqhclI_tBMri56HZ84pC-wGbIexhwYd387R_Ab-9h82m/s50/blogger_on.png' title='view Blogger comments'/><h6>Atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmz3140pZpsaFEzpn29walyBkX_p563w_dZIfAQ3p6ZRFC_Mmx12goeiFE82q4hcm0BPkf6rJya4z74BAJu68dF1dQHmHHE5ydnb33Sp9t0BIlepFj5wHddpap27261K8wj9QHBAjMtjFt/s50/plus_off.png' title='view Google+ comments'/><h6>Tentukan Pilihan Anda !</h6>

<div id='copyrigtsybb'><a href='http://your-belajarblog.blogspot.com/2013/04/cara-menggabungkan-komentar-blogger.html' id="mblrights">Get This Widget</a></div>

</div>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='threaded_comment_js'/>

</b:if>

<data:post.commentHtml/>

</div>

<b:if cond='data:post.allowNewComments'>

<b:include data='post' name='threaded-comment-form'/>

<b:else/>

<data:post.noNewCommentsText/>

</b:if>

</p>

<b:if cond='data:showCmtPopup'>

</iframe>

</div>

</b:if>

<b:if cond='data:post.showBacklinks'>

<b:include data='post' name='backlinks'/>

</b:if>

</div>

<style>

#gcontainer {

display:none;

}

#com-norm,#com-gplus {

cursor:pointer;

padding:0 5px;

float:left

}

#com-header {

border: 1px solid #d2d2d2;

padding: 10px;

float: left;

width: 580px;

margin-bottom: 20px;

background: #f5f5f5;

}

#com-header h6{

font-size: 20px;

text-transform: uppercase;

font-weight: bold;

float: left;

padding-top: 15px;

margin: 0px;

margin-right: 7px;

margin-left: 7px;

}

#copyrigtsybb {

float: right;

margin-top: 20px;

border-top: 1px solid #d2d2d2;

margin-right: -10px;

padding-right: 10px;

padding-top: 5px;

padding-left: 10px;

border-left: 1px solid #d2d2d2;

padding-bottom: 5px;

margin-bottom: -10px;

font-size:11px;

background: #fff;

}

#copyrigtsybb a {

text-decoration:none;

color:111!important;

}

</style>

</div>

</b:includable>

Cari Lagi kode berikut ini, dengan menekan CTRL+F :

<b:includable id='comment_picker' var='post'>
.
.
.
.
</b:includable>

Ganti Kode diatas dengan kode berikut ini:

<b:includable id='comment_picker' var='post'>

<b:if cond='data:post.forceIframeComments'>

<b:include data='post' name='iframe_comments'/>

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

<b:else/>

<b:if cond='data:post.commentSource == 1'>

<b:include data='post' name='iframe_comments'/>

<b:else/>

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='threaded_comments'/>

</b:if>

</b:includable>

Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Cara Membuat Auto Read More Berputar

noreply@blogger.com (Irsyad Aslam) — Wed, 24 Apr 2013 17:20:00 +0700

Read More ini berfungsi sebagai peringkas posting agar tidak memanjang. Read More ini sudah terpasang namun anda perlu memotongnya dengan tool bar yang ada diatas disaat anda membuat posting.

Tentu capek bukan?, Digunakanlah Auto Read More ini, auto read more ini berfungsi sama jika anda memotong nya dengan tool bar, dengan menggunakan auto read more ini posting akan terpotong sendirinya.

Tutorial kali ini adalah tutorial yang direquest oleh pengunjung blog kami, yaitu Putut Sanjaya. Ia Menanyakan tentang bagaimana cara untuk membuat icon "read more" berputar. untuk bisa membuatnya berikut cara untuk membuatnya:

Silahkan Masuk Ke Blogger Anda.
Setelah itu, Klik Menu Template, --> Backup templat Anda Terlebih dahulu, --> Lalu, Klik Tombol Edit HTML.
Cari Kode ]]></b:skin> ,dengan menekan CTRL+F.
Masukan Kode Berikut ini diatas kode ]]></b:skin> :

.YBB-readmore {background:black;font-size:18px;color:#32BDE8;height:100px;width:100px;line-height:100px;position:absolute;z-index:999999;-moz-border-radius:200px;-webkit-border-radius:200px;border:8px solid rgba(255, 255, 255, 0.8 );margin-top:-10px;margin-left:170px;-webkit-box-shadow:0 1px 9px red;-moz-box-shadow:0 1px 9px red;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip: padding-box;opacity:0.9;-moz-transform: rotate(60deg);-webkit-transform: rotate(60deg);box-shadow:0 1px 9px blue;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;transition: all 0.9s ease-in-out;}

.YBB-readmore:hover {opacity:2;height:100px;width:100px;-webkit-transform:rotate(1080deg);-moz-transform:rotate(1080deg);-ms-transform:rotate(1080deg);-o-transform:rotate(1080deg);transform:rotate(1080deg);box-shadow:0 1px 9px red;}

.YBB-readmore a {color:#ffffff;font-family: 'Rancho', cursive;

text-shadow:0px 0px 1px #ffffff;font-size:18px}

Lalu, Cari Kode </head> dengan menekan CTRL+F.
Masukan Kode Berikut ini diatas kode </head>:

Cari Kode <data:post.body/> dengan menekan CTRL+F.
Ganti Kode <data:post.body/> dengan kode berikut ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='YBB-readmore' style='text-align: right;'>
<a expr:href='data:post.url'>Read More</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Keterangan :
Jika Terdapat Kode <data:post.body/> yang ada dua atau lebih, ganti kedua atau lebih tersebut.

Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG

Cara Menghapus Broken Link Pada Blog

noreply@blogger.com (Irsyad Aslam) — Tue, 23 Apr 2013 19:20:00 +0700

Apa itu Broken Link?, Broken Link adalah bahasa inggris dari Link Rusak.

Apa Penyebab Broken Link?, Penyebab Broken Link adalah disaat kita mengolah blog seperti memasang widget dan mencantumkan URL blog yang tidak adalah pada blog kita dan tanpa sadar kita telah membuat Link Rusak.

Broken Link ini disebut Juga dengan Kesalahan 404, Dan Muncul disaat pengunjung mencari blog kita dan mengunjungi dan terdapat tulisan "Sorry, the page you were looking for in this blog does not exist" Atau "Maaf, halaman yang anda cari di blog ini tidak ada". Dan mungkin juga blog anda dianggap sebagai spam oleh Search Engine

Dan untuk bisa memecahkan masalah ini adalah menghapus link yang rusak dengan menggunakan Google Webmaster. Berikut Dibawah Adalah Cara Untuk Menghapusnya:

Silahkan Masuk Ke Google Webmaster.
Setelah itu, Klik Tombol Tambahkan Situs,
Lalu Masukan URL Blog atau Website anda.

Catatan:

Lewati Langkah ini jika anda sudah menambahkan situs anda.

Lalu, Klik URL Blog atau Website Anda.

Setelah itu, Klik Menu Perayapan, --> Klik Kesalahan Perayapan.

Lalu, Klik Tidak Ditemukan.

Salin Broken Link Yang ada dibawah, pada Notepad, atau unduh Broken Link.
Klik Menu Google Indeks, --> Klik Hapus URL.

Lalu, Klik Tombol Buat permintaan penghapusan baru.

Paste Link Yang Rusak, --> Klik Tombol Terus.

Lalu, Klik Tombol Kirim Permintaan.

Lakukan Seperti Yang Diatas dengan URL Rusak lainnya.
Setelah itu, Klik Menu Perayapan, --> Klik Kesalahan Perayapan, --> Klik Tidak Ditemukan.
Centang Semua Broken Link, Lalu Klik Tandai Sebagai Telah Diperbaiki.

Selamat Mencoba dan Semoga Bermanfaat,

Salam Sukses.

Your-BelajarBLOG