KHUSUS DEWASA 1: Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Rabu, 31 Juli 2013

Cara Memasang Meta Tag SEO Friendly di Blogspot

Memasang meta tag SEO friendly di blogspot merupakan salah satu cara optimasi SEO On Page pada blog yang harus kita perhatikan untuk memperoleh peringkat terbaik di google. Apa itu meta tag? Meta Tag adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web. Walaupun sekarang robot mesin pencari sudah sangat mandiri dan tidak terlalu membutuhkan meta tag, tapi tidak ada salahnya membuat meta tag di blog kita supaya mendapatkan hasil yang lebih memuaskan.

Cara Memasang Meta Tag SEO Friendly pada Blog

Bagaimana cara membuat meta tag yang SEO Friendly? Inilah yang akan saya bahas pada postingan kali ini, setelah melakukan berbagai survey akhirnya saya menemukan setting meta tag terbaik untuk mempermudah mesin pencari mengindex blog kita. Untuk cara pemasangannya anda bisa mengikuti langkah-langkah berikut:

1. Login ke Blogger.com
2. Masuk ke Template, lalu klik Edit HTML
3. Hapus semua kode yang berada diantara <head> dan <b:skin>, lalu ganti dengan kode berikut:

Gantilah semua kode yang berwarna biru sesuai data blog anda. Jika anda lebih suka menggunakan meta description manual dan masih ingin memasang kode <b:include data='blog' name='all-head-content'/>, anda bisa menghapus kode yang berwarna merah. Dari sekian banyak kode tersebut yang paling penting adalah meta description, meta robots, dan title tag.

Saran saya jika anda blogger yang punya waktu cukup untuk menulis meta description, cobalah memakai meta description manual, karena dengan ini anda bisa memilih deskripsi bebas untuk posting. Cara memasang meta description manual cukup mudah, ikuti langkah berikut:

1. Masuk ke Setelan, lalu pilih preferensi penelusuran.
2. Pada kolom meta tag isi deskripsi anda, sekarang jika anda membuat posting akan muncul pilihan Deskripsi Penelusuran pada samping halaman.
3. Edit semua posting anda, dan isi kolom Deskripsi Penelusuran.

Jika anda menggunakan meta description menual tetapi belum ada waktu untuk memberi deskripsi pada setiap posting cobalah menggunakan kode dibawah. Fungsi dari kode ini adalah memberikan deskripsi berbentuk "Judul posting, nama blog, judul posting" pada artikel yang belum diberi meta description manual.

<b:if cond='data:blog.metaDescription == ""'>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='description'/>
</b:if>

Setiap ada yang baik pasti ada yang buruk, dalam meta tag juga begitu ada meta tag yang tidak baik, alias beresiko karena bisa dianggap spam oleh google dan mesin pencari lain. Beberapa meta tag beresiko yang harus anda hindari adalah:

Meta tag revisit after yang biasanya berbentuk seperti <meta content='1 days' name='revisit-after'/>
Meta tag refresh yang biasanya dituliskan seperti <meta http-equiv='refresh' content='30'/>

Bagaimana, cukup simpel dan mudah untuk diterapkan di blog bukan? jika masih ada yang bingung boleh ditanyakan. Dengan melakukan salah satu cara optimasi SEO on page yang saya posting ini, semoga blog anda mendapatkan peringkat yang lebih bagus di mesin pencari dan membuat visitors blog anda lebih banyak alias memperbanyak traffic pengunjung. Silahkan berikan masukan pada Cara Memasang Meta Tag SEO Friendly di Blogspot ini. Semoga bermafaat bagi kawan-kawan dan terimakasih.

Senin, 29 Juli 2013

Cara Membuat Widget Headline News Melayang Di Header

YHS Blogger | Cara Membuat Widget Headline News Melayang Di Header-Selamat malam sobat.. Dikesempatan kali ini saya akan membuat artikel pendek yang berjudul Cara Membuat Widget Headline News Melayang Di Header. Headline news yang ini seperti yang anda lihat di tv. Yap, benar sekali.. Headline news yang ini mempunyai efek berjalan. Widget ini bisa di letakkan di header atau di footer. Berikut ini cara memasangnya :

1. Masuk ke akun blogger kalian.
2. Klik Tata Letak.
3. Klik Tambahkan Gadget.
4. Pilih HTML/JavaScript
5. Copy kode di bawah ini dan masukkan ke konten HTML/JavaScript.

<script type="text/javascript">
var hn_url_blog = "http://yhsblogger.blogspot.com/";
var hn_jumlah_post = 10;
var hn_warna_latar = "#FAF8F8";
var hn_warna_garis = "#FD0606";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script> <script src="https://sites.google.com/site/yhsbloggerhost/daftarisi/headline%20news%20yhs%20blogger%20.js"> </script>

6. Klik Simpan.

NOTE :
http://yhsblogger.blogspot.com/ diganti dengan URL Blog anda.
10 ganti sesuai dengan jumlah artikel yang ingin di tampilkan.
top jika anda ingin headline news ini berada di header, maka gunakan top. Tetapi jika anda ingin headline news berada di footer, ganti tulisan top dengan bottom.

Demikianlah artikel mengenai Cara Membuat Widget Headline News Melayang Di Header. Semoga bermanfaat dan selamat mencoba sob..

Minggu, 28 Juli 2013

Cara Cek Kualitas SEO Blog Melalui Chkme

YHS Blogger | Cara Cek Kualitas SEO Blog Melalui Chkme-Selamat sore sobat.. Saya mulai jarang meng-update artikel di blog ini karena kesibukkan di dunia nyata. Selain itu saya sudah mulai mempersiapkan diri untuk menghadapi UN yang masih 9 bulan lagi. Tetapi hari ini saya akan share tentang Cara Cek Kualitas SEO Blog Melalui Chkme. Caranya cukup simpel dan mudah kok. Tidak pake lama. Dalam waktu kurang dari 5 menit score kualitas SEO anda akan diketahui dengan mudah. Berikut ini cara cek kualitas SEO blog melalui chkme:

1. Masuk ke chkme.com
2. Lalu isikan data seperti di bawah ini.

3. Lalu klik Check SEO Score.
4. Lalu akan terlihat hasil cek seo score anda seperti gambar di bawah ini

5. Setelah mengetahui score seo anda, copy kode HTML dari chkme.

6. Setelah di copy, masuk ke akun blogger kalian.
7. Klik Tata Letak.
8. Klik Tambahkan Gadget.
9. Pilih HTML/JavaScript.
10. Paste kode HTML tadi.
11. Klik Simpan.

Demikianlah artikel mengenai Cara Cek Kualitas SEO Blog Melalui Chkme . Semoga bermanfaat bagi kita semua sob..

Rabu, 24 Juli 2013

Cara Membuat Kotak Komentar Admin Berbeda Dari Pengunjung Blog

YHS Blogger | Cara Membuat Kotak Komentar Admin Berbeda Dari Pengunjung Blog-Selamat sore sobat YHS Blogger.. Dikesempatan kali ini saya akan membahas tentang Cara Membuat Kotak Komentar Admin Berbeda Dari Pengunjung Blog. Sebenarnya widget ini tidak terlalu penting sih. Tetapi widget ini dapat membedakan yang mana admin dan yang mana pengunjung blog. Jadi pengunjung blog yang belum kenal sama admin blog yang di kunjungi bisa jadi kenal. Saya sendiri baru saja mempraktekkan untuk memasangnya. Jika anda ingin mengetahui caranya, mari kita simak bersama-sama.

1. Login ke akun blogger kalian.
2. Pilih Template.
3. Klik Edit HTML.
4. Cari kode </body>
5. Copy kode di bawah ini dan letakkan di atas kode </body>

<script src='http://code.jquery.com/jquery-latest.js'/>

<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #e1e1e1')
.css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkbgbg-Z3WzY9Z7aW2xeZWEmdRnBvBgE_k97MA6b0L55ys0vsdCDZhZ_y6aC8O94exeSnp-2URCr6W_Hdypwd7S5Rgk2XteFeyFiQSUhUROmILFGir2vrw4BhK0I0EGpfENy6w4jYG80/s1600/admin2.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

6. Simpan Template.

Demikianlah artikel mengenai Cara Membuat Kotak Komentar Admin Berbeda Dari Pengunjung Blog. Semoga bermanfaat dan selamat mencoba..
source

Minggu, 21 Juli 2013

Cara Submit Blog Melalui Imtalk

YHS Blogger | Cara Submit Blog Melalui Imtalk-Selamat siang sobat YHS Blogger.. Dikesempatan kali ini saya akan membahas tentang Cara Submit Blog Melalui Imtalk. Hal ini berguna untuk men-submit blog sobat ke website-website lain. Cara ini juga dapat mendatangkan pengunjung ke blog anda. Selain itu, cara ini juga dapat membuat blog anda ada di search engine. Mari kita simak langkah-langkahnya.

1. Masuk ke SINI
2. Lalu masukkan URL Blog Anda.
3. Masukkan kata kunci blog anda
4. Pilih jumlah website yang akan di gunakan untuk submit blog anda.

5. Klik Submit.

6. Tunggun hingga proses men-submit blog selesai..

Mudah bukan?

Demikianlah artikel saya mengenai Cara Submit Blog Melalui Imtalk. Semoga bermanfaat sobat..

Kamis, 18 Juli 2013

Cara Memasang Widget Share Ke Social Network

YHS Blogger | Cara Memasang Widget Share Ke Socal Network-Selamat sore sobat.. Di sore yang cerah ini, saya akan membahas tentang Cara Memasang Widget Share Ke Socal Network. Widget ini dapat mempercantik tampilan blog kita. Selain itu widget ini juga dapat meningkatkan traffic blog anda. Karena jika ada orang yang meng-klik salah satu sosial media di atas, maka otomatis artikel kita akan berada di halaman sosial media orang yang mengklik itu. lalu bagaimana cara memasangnya? Mari kita simak bersama-sama.

1. Masuk ke akun blogger kalian.
2. Klik Template.
3. Klik Edit HTML.
4. Cari kode <data:post.body/> . Untuk pengguna read more, akan terdapat 4 kode
<data:post.body/> . Jadi cobalah satu-persatu. Kalau saya menggunakan kode <data:post.body/> yang kedua.
5. Setelah ketemu kode <data:post.body/>, copy kode di bawah ini dan letakkan di bawah kode <data:post.body/>

<style>
/*--------Flipper Sharing Widget Dp ------*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfM4BhP2NlAN8jdw1tQ0DP8Nl4DKsJja0b5F0i2BKbQ8ijDb_ueOWF5JLwguWO4Yr2g1mSbcxDvadnWM9X3LmczJGEPhNlBi9tXmV2d5ntIzVmBQ10miJc2hCEyw9RGL9Zg7DZ_m0on5vL/s1600/flipper.png) no-repeat;
-webkit-transition: ease-in 0.15s all;
-moz-transition: ease-in 0.15s all;
-o-transition: ease-in 0.15s all;
-ms-transition: ease-in 0.15s all;
transition: ease-in 0.15s all;
cursor:pointer;
}
.flipper a.googleplus {
background-position: 0px -348px;
}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}
.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}
.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;
}
.flipper a.digg {
background-position: 0px -116px;
}
.flipper a.digg:hover {
background-position: 0px -174px;
}
.flipper a.stumbleupon {
background-position: 0px -812px;
}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;
}
.flipper a.technorati {
background-position: 0px -928px;
}
.flipper a.technorati:hover {
background-position: 0px -406px;
}
.flipper a.twitter {
background-position: 0px -928px;
}
.flipper a.twitter:hover {
background-position: 0px -986px;
}
.flipper a.facebook {
background-position: 0px -232px;
}
.flipper a.facebook:hover {
background-position: 0px -290px;
}
.flipper a.reddit {
background-position: 0px -580px;
}
.flipper a.reddit:hover {
background-position: 0px -638px;
}
.flipper a.rss {
background-position: 0px -696px;
}
.flipper a.rss:hover {
background-position: 0px -754px;
}
.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;
}
</style>
<div class='flipper'>
<b:if cond='data:blog.pageType == "item"'>
<div class="Pleaseshare">
Please Share it! :) </div>

<a class='googleplus' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='external nofollow' target='_blank' title='+1 it :>'/>

<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :>'/>

<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :>'/>

<a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :>'/>

<a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :>'/>

<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this :>'/>

<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :>'/>

<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :>'/>

<a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Bookmark plz :>'/>
</b:if></div>
<div style="clear:both"/>

6. Klik Simpan Template.

Selesai!! Gimana mudah bukan ? Berminat untuk mencoba? Silahkan saja.. Jika ada yang ingin ditanyakan, silahkan berkomentar.
Source

Rabu, 17 Juli 2013

Cara Membuat Semua Link Blog Terbuka Otomatis di Tab Baru

YHS Blogger | Cara Membuat Semua Link Blog Terbuka Otomatis di Tab Baru-Selamat malam sobat YHS Blogger.. Dikesempatan kali ini saya akan membahas tentang Cara Membuat Semua Link Blog Terbuka Otomatis di Tab Baru. Jika anda ingin melihat demonya, silahkan lihat sendiri di blog ini. Jika anda mengklik salah satu artikel/laman di blog ini maka akan terbuka secara otomatis di tab baru browser kalian. Sebenernya apa sih kegunaan membuat semua link blog terbuka secara otomatis di tab baru? Kegunaannya adalah :

Meningkatkan Page View blog.
Pengunjung tidak cepat kabur dari blog anda.
Menurunkan alexa rank.

Cara Membuat Semua Link Blog Terbuka Otomatis di Tab Baru :

1. Masuk ke akun blogger kalian.
2. Klik Template.
3. Klik Edit HTML.
4. Cari kode </head>
5. Copy kode di bawah ini dan letakkan di atas kode </head>

<base target="_blank"/>

6. Klik Simpan Template.

Selesaaii... Gimana mudah bukan? Selamat mencoba dan semoga page view blognya meningkat. Amiin..

Minggu, 14 Juli 2013

Cara Merubah Blog Nofollow Menjadi Dofollow

YHS Blogger | Cara Merubah Blog Nofollow Menjadi Dofollow-Selamat siang pembaca setia YHS Blogger.. Kali ini saya akan membahas tentang Cara Merubah Blog Nofollow Menjadi Dofollow. Sebelum membaca artikel ini, alangkah lebih baiknya anda membaca artikel yang ini :

Mungkin artikel yang seperti ini sudah ramai dipasaran google. Bahkan sebagian dari kalian sudah mengetahui bagaimana caranya. Tapi disini saya membahas artikel ini untuk ditujukan kepada orang-orang yang masih kurang mengerti bagaimana caranya. Mari kita simak bagaimana cara mengubah blog nofollow menjadi dofollow.

Cara Pertama :

1. Masuk ke akun blogger anda.
2. Klik Template.
3. Klik Edit HTML.
4. Cari kode seperti ini :

rel='nofollow'

5. Nanti akan ketemu beberapa kode seperti itu.
6. Hapus semua kode rel='nofollow'
7. Klik Simpan template.

Cara Kedua :

1. Login ke akun blogger anda.
2. Klik Template.
3. Klik Edit HTML.
5. Cari kode seperti ini :

rel='nofollow'

6. Nanti akan ketemu beberapa kode rel='nofollow'
7. Ganti semua kode rel='nofollow' menjadi rel='dofollow'
8. Klik Simpan Template.

Selesai!! Mudah bukan ? Selamat mencobanya sobat..

Kamis, 11 Juli 2013

Cara Memberi Rating Bintang Di Hasil Pencarian Google

YHS Blogger | Cara Memberi Rating Bintang Di Hasil Pencarian Google-Anda sudah lihat gambar diatas? Jika sudah, saya akan memberi sedikit penjelasan tentang kegunaan pemberian rating pada hasil pencarian di google. Kegunaannya untuk menampilkan jumlah review artikel kita agar blog mendapatkan tempat yang bagus di SERP. Selain itu, pemberian rating juga dapat menjadi daya tarik untuk mengklik hasil pencarian tersebut.

Cara Memberi Rating Bintang Di Hasil Pencarian Google :

1. Login dulu ke akun blogger anda.
2. Masuk ke Template.
3. Cari kode <head>
4. Copy kode di bawah dan letakkan di bawah kode <head.

<link href='https://plus.google.com/117738008727306573040' rel='author'/>

Note : 117738008727306573040 ganti dengan ID google+ anda
5. Simpan Template.
6. Cari kode <body>

Copy kode di bawah dan letakkan dibawah kode < body>

<div>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>

7. Cari kode </body>
8. Beri kode </div></div> di atas kode </body>
9. Simpan Template.
10.Cari kode post-title entry-title seperti berikut

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

11. Letakkan kode <span itemprop='itemreviewed'><span itemprop='description'> dan </span></span> di antara kode post-title entry-title seperti contoh dibawah ini :

<span itemprop='itemreviewed'><span itemprop='description'>
<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>
</span></span>
</b:if>

12. Klik Simpan Template.
13. Cari kode <data:post.body/>
14. Copy kode di bawah dan letakkan di bawah kode <data:post.body/>

Description: <span itemprop="description"><data:post.title></data:post.title></span>
Rating: <span itemprop="rating">3.5</span>
Reviewer: <span itemprop="reviewer"><data:post.author></data:post.author></span>
ItemReviewed: <span itemprop="itemreviewed"><data:post.title></data:post.title></span>

15. Simpan template.
16. Masuk ke akun google plus anda--> https://plus.google.com/
17.Klik Profile

18. Klik About.

19. Lalu pilih Edit pada bagian Links.

20. Isikan dengan Judul dan URL blog anda. Lihat gambar di bawah.

21. Pergi ke http://www.google.com/webmasters/tools/richsnippets
22. Lalu isi seperti di bawah ini :

Selesai!! Jika anda berhasil, maka tampilannya seperti gambar diatas ini. Demikianlah artikel mengenai Cara Memberi Rating Bintang Di Hasil Pencarian Google semoga bermanfaat sobat..

source

Rabu, 10 Juli 2013

Cara Memilih Keyword Yang Paling Banyak Dicari Orang

Mengetahui dan memilih keyword yang paling banyak dicari orang dan lebih SEO Friendly pada judul artikel blog atau website sangatlah penting untuk mendapat banyak pengunjung. Dalam pemilihan keyword kita harus berhati-hari untuk menentukannya, sehingga kita bisa mendapatkan respon yang baik dari mesin pencari atau search engine khususnya google.

Mungkin anda agak kesulitan dalam pemilihan dan menentukan keyword mana yang paling banyak dicari pada Google. Pastinya akan sangat sulit jika anda berusaha menentukan keyword (kata kunci) yang tepat hanya dengan mengandalkan insting tanpa melakukan survey, setelah membaca tips pada postingan kali ini anda tidak akan bingung lagi untuk menentukan kata kunci mana yang cocok anda pilih untuk judul blog maupun artikel pada blog anda. Karena pada trik SEO kali ini saya akan membahas tentang cara memilih keyword atau kata kunci yang paling banyak dicari orang pada google dan melihat jumlah pesaing yang akan anda dapatkan dalam kata kunci tersebut.

Google pasti sudah mempertimbangkan kesulitan pemilihan kata kunci ini, oleh karena itu google juga sudah memberikan sebuah alat untuk melakukan survey keyword yang kita inginkan, yaitu Google AdWords. Alat untuk melakukan survey tersebut dapat anda temukan dengan klik link berikut Google AdWords.

memilih kata kunci yang paling banyak dicari

Bagaimana cara memilih dan menentukan kata kunci yang paling banyak dicari dengan AdWords?

1. Buka alamat http://www.adwords.google.com/keywordtool
2. Masukkan keyword yang ingin anda cari untuk disurvey pada kolom "Word or phrase", sebagai contoh saya menggunakan kata kunci "Keyword SEO"
3. Masukkan kategori blog anda
4. Pada "Advanced Options and Filters" gantilah pengaturan lokasi menjadi Indonesia dan bahasa menjadi All Languages.
5. Isi Verivikasi Captcha, lalu Search dan lihat hasilnya.

kata kunci yang banyak dicari dan sedikit pesaing

Setelah anda melakukan langkah-langkah itu, akan muncul hasil seperti di atas (klik jika kurang besar). Pada kolom "Global Monthly Searches" adalah jumlah seluruh orang yang mencari kata kunci itu di google satu bulan terakhir, dan pada kolom "Local Monthly Searches" adalah jumlah pencari lokal pada negara yang kita pilih, pada contoh ini yang saya pilih adalah Indonesia.

Cara diatas hanya dapat berfungsi untuk memilih kata kunci yang baik dan benar untuk short tail keyword. Sekarang tergantung pilihan anda apakah ingin menggunakan long tail keyword yang punya sedikit saingan atau short tail keyword yang punya saingan sangat banyak. Sebaiknya jika blog anda masih tergolong blog baru dan belum mempunyai kualitas seo off page maupun on page yang baik, gunakanlah long tail keyword, karena dengan begitu anda akan lebih mudah mendapatkan peringkat pertama pada search engine.

Dengan trik ini anda sudah tidak akan bingung lagi untuk memilih kata kunci yang mempunyai saingan sedikit dan dicari banyak orang. Sekian Cara Memilih Keyword Yang Paling Banyak Dicari Orang, jika pada tutorial kali ini anda masih bingung dengan penggunaan AdWords atau yang lain bisa anda tanyakan di kotak komentar. Untuk melihat berapa saingan yang akan anda dapatkan pada keyword tersebut anda bisa coba mengetik keyword di google dan melihat berapa hasil yang ada.

Cara Memberi Musik Di Blog

YHS Blogger | Cara Memberi Musik Di Blog-Artikel mengenai Cara Memberi Musik Di Blog mungkin sudah banyak dibahas oleh blogger lain. Dan mungkin anda-anda semua sudah mengetahui caranya. Tetapi saya akan tetap membahasnya karena siapa tahu ada orang yang tidak tahu mengenai caranya dan sedang nyasar ke blog ini lalu membaca artikel ini. Pasti setelah orang nyasar itu membaca artikel ini, dia akan mahir untuk memasang musik di blog. hehehe..

Cara Memberi Musik Di Blog :

1. Masuk ke http://divine-music.info/
2. Klik Browse All.

3. Klik Pilih artis kesukaan anda. Sebagai contoh saya memilih 30 Second to Mars.

4. Lalu cari lagu kesukaan anda. Sebagai contoh saya memilih lagu From Yesterday

5. Lalu copy kode yang ada. Agar lebih jelas lihat gambar diatas.
6. Lalu masuk ke akun blogger anda.
7. Klik Tata Letak.
8. Klik Tambahkan Gadget.
9. Masukkan kode yang telah di copy tadi.
Contoh kode :

<center>
<a href="http://divine-music.info" target="_blank"><img src="http://divine-music.info/images/dmmusicbar.gif" border="0" alt="Free Music Online"></a><br>
<a href="http://divine-music.info" target="_blank"><img src="http://divine-music.info/images/dmlogo.gif" border="0" alt="Free Music Online"></a>
<br><br><b>
<a target="_blank" title="Free Music" href="http://www.divine-music.info">free music</a> at divine-music.info</b><br>
<EMBED SRC="http://divine-music.info/musicfiles/30 Seconds to Mars - From Yesterday.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

NOTE : Jika anda menginginkan suara/musik saja yang keluar tanpa gambar dari si penyedia musik, masukkan kode yang diawali <EMBED

Contoh :

<EMBED SRC="http://divine-music.info/musicfiles/30 Seconds to Mars - From Yesterday.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

10. Klik Simpan.

Selesai!! Demikianlah artikel mengenai Cara Memberi Musik Di Blog. Semoga bermanfaat sobat...

Selasa, 09 Juli 2013

Cara Memasang Navigasi Breadcumbs Pada Blog

YHS Blogger | Cara Memasang Navigasi Breadcumbs Agar Terindeks Google-Selamat siang sobat YHS Blogger.. Gimana nih yang lagi puasa? Masih kuat? Kalo saya sih masih kuat. Sambil menunggu buka puasa, mending baca artikel ini.

Contoh Navigasi Breadcumbs

Navigasi Breadcumbs berfungsi untuk mempermudah search engine mengindeks artikel/konten yang ada di blog kita. Selain itu Navigasi Breadcumbs juga dapat memudahkan pengunjung mengetahui letak konten/artikel dari blog kita. Lalu bagaimana cara memasangnya? Mari kita simak bersama-sama.

1. Login ke akun blogger anda.
2. Klik Template.
3. Klik Edit HTML.
4. Cari kode ]]></b:skin>
5. Copy kode di bawah ini dan letakkan di atas kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
}

6. Lalu cari kode <b:includable id='post' var='post'>
7. Copy kode di bawah ini dan letakkan dibawah kode <b:includable id='post' var='post'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
You are Here > <a expr:href='data:blog.homepageUrl'>Home</a> >
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
</b:loop>
</b:if> > <data:post.title/>
</div>
</b:if>
</b:if>

8. Klik Simpan Template.

Demikianlah artikel mengenai Cara Memasang Navigasi Breadcumbs Pada Blog. Semoga bermanfaat sobat..

Cara Menghapus Blog Di Blogger

YHS Blogger | Cara Menghapus Blog Di Blogger-Mungkin anda-anda semua sudah tahu bagaimana cara menghapus blog kita. Dan mungkin artikel ini sudah banyak dibahas oleh blogger-blogger lain. Tetapi saya akan tetap membahasnya. Dan artikel ini ditujukan kepada para pemula yang belum mengerti banyak hal mengenai blogger. Kalau Begitu kita langsung saja menuju langkah-langkah menghapus blog.

1. Login ke akun blog anda.
2. Pilih Setelan.

3. Pilih Lainnya.

4. Lalu klik Hapus Blog.

5. Lalu klik Unduh Blog jika anda ingin mengekspor terlebih dahulu data-data blog anda atau langsung klik Hapus untuk menghapus blog anda.

Selesai!! Gimana mudah bukan ?

Demikianlah artikel mengenai Cara Menghapus Blog Di Blogger. Semoga bermanfaat bagi yang belum tahu..

Senin, 08 Juli 2013

Cara Memasang Widget Member Aktif

YHS Blogger | Cara Memasang Widget Member Aktif-Selamat malam sobat YHS Blogger.. Di malam ini saya akan berbagi tentang Cara Memasang Widget Member Aktif. Sebenarnya widget ini tidak jauh berbeda dengan Cara Membuat Widget Top Komentator Keren. Untuk itu mari kita lihat terlebih dahulu demo widget ini dengan mengklik tombol di bawah ini.

Live Demo

Dengan memasang widget ini berarti kita mengapresiasi kepada mereka yang telah berlalu lalang di blog kita dan meninggalkan jejaknya. Sebenarnya script widget ini masih sama dengan script top komentator, tapi widget ini di buat dengan tampilan yang berbeda.

FITUR

Menampilkan avatar dan nama.
Desain yang elegan.
Enak dipandang.
Memiliki efek hover pada avatar.

Cara Memasangnya.
1. Login ke akun blogger anda.
2. Klik Laman.
3. Pilih mode HTML.
4. Masukkan kode berikut.

<style type="text/css">
.cm-person{margin:3px;position:relative;float:left;width:80px;height:100px;font:10px/10px Lora,Verdana,Arial,Sans-Serif;text-align:center;line-height:10px;padding:10px; border: 1px solid #F6CEE3; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;color:#000;background-color:#fff;box-shadow:inset 0 0 1px black}
.cm-person a.profile-name-link{display:block;width:80px;height:80px;position:absolute;top:10px;left:10px;background-color:#999;color:white;text-decoration:none;font:bold 30px/80px Ubuntu,Tahoma,Verdana,Arial,Sans-Serif;margin:0 0;padding:0 0;display:none}
.cm-person a.profile-name-link.item1{background-color:#BC0000}
.cm-person a.profile-name-link.item2{background-color:#1A00CE}
.cm-person a.profile-name-link.item3{background-color:#39A003}
.cm-person a.profile-name-link.item4{background-color:#8B039D}
.cm-person a.profile-name-link.item5{background-color:#F0C100}
.cm-person a.profile-name-link.item6{background-color:#00D1CB}
.cm-person a.profile-name-link.item7{background-color:#FFEA03}
.post .post-body .cm-person img{background-color:#666;display:block;width:80px;height:80px;padding:0 0;margin:0 0 10px;border:none}
.cm-person:hover{color: #FFF;background-color:#111}
.cm-person:hover a.profile-name-link{display:block}
.comments {display: none;}
</style>
<script type="text/javascript">
//<![CDATA[
var homepage = 'http://www.yhsblogger.blogspot.com',
maxTopCommenters = 77,
minComments = 1,
numDays = 0,
excludeMe = true,
excludeUsers = ["Anonymous", "Yuslim Hanif"],
maxUserNameLength = 42,
txtTopLine = '[image] [user]',
txtNoTopCommenters = 'No top commentators at this time.',
txtAnonymous = '',
sizeAvatar = 80,
cropAvatar = true,
urlNoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhouDKD1vo0HAauaE3hBtGZelseqH0t3rESNQUaudjk88BOpF9akYMCzR7QxwiBFrm5JdMH_qdivONsUdzchzl-ezz4CO5gMFS64djAMUdaVfRz0xaX-buW3tLDtQ9mEUEHs_5ScFxy3TI/' + sizeAvatar + '/avatar_blue_m_96.png',
urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
urlMyProfile = '',
urlMyAvatar = '';
if (!Array.indexOf) {
Array.prototype.indexOf = function (obj) {
    for (var i = 0; i < this.length; i++) if (this[i] == obj) return i;
    return -1
}
}
function replaceTopCmtVars(text, item, position) {
if (!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if (author.uri && author.uri.$t != "") authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if (author.gd$image && author.gd$image.src && authorUri.substr(0, bloggerprofile.length) == bloggerprofile) {
    avaimg = author.gd$image.src
} else {
    var parseurl = document.createElement('a');
    if (authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname
    }
}
if (urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "") avaimg = urlMyAvatar;
if (avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") avaimg = urlNoAvatar;
var newsize = "s" + sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/" + newsize + "-c/");
if (cropAvatar) newsize += "-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/" + newsize + "/");
var authorName = author.name.$t;
if (authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar) authorName = txtAnonymous;
var imgcode = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" src="' + avaimg + '" />';
if (authorUri != "") imgcode = '<a href="' + authorUri + '">' + imgcode + '</a>';
if (maxUserNameLength > 3 && authorName.length > maxUserNameLength) authorName = authorName.substr(0, maxUserNameLength - 3) + "...";
var authorcode = authorName;
if (authorUri != "") authorcode = '<a class="profile-name-link item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[count]', item.count);
return text
}
var topcommenters = {};
var ndxbase = 1;

function showTopCommenters(json) {
var one_day = 1000 * 60 * 60 * 24;
var today = new Date();
if (urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for (var i = 0; i < elements.length; i++) if (expr.test(elements[i].className)) {
      urlMyProfile = elements[i].href;
      break
    }
}
for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    if (numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);
      var days = Math.ceil((today.getTime() - cmtDate.getTime()) / (one_day));
      if (days > numDays) break
    }
    var authorUri = "";
    if (entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t;
    if (excludeMe && authorUri != "" && authorUri == urlMyProfile) continue;
    var authorName = entry.author[0].name.$t;
    if (excludeUsers.indexOf(authorName) != -1) continue;
    var hash = entry.author[0].name.$t + "-" + authorUri;
    if (topcommenters[hash]) topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter
    }
}
if (json.feed.entry.length > 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
    return
}
var tuplear = [];
for (var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function (a, b) {
    if (b[1].count - a[1].count) return b[1].count - a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1
});
var realcount = 0;
for (var i = 0; i < maxTopCommenters && i < tuplear.length; i++) {
    var item = tuplear[i][1];
    if (item.count < minComments) break;
    document.write(replaceTopCmtVars(txtTopLine, item, realcount + 1));
    realcount++
}
if (!realcount) document.write(txtNoTopCommenters)
}
document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
//]]>
</script>

NOTE : http://www.yhsblogger.blogspot.com ganti dengan url blog anda.
Yuslim Hanif ganti dengan nama anda jika anda tidak ingin masuk daftar ini.

5. Klik Publikasikan.

Demikianlah artikel YHS Blogger semoga bermanfaat. Dan selamat mencoba sob...

source

Minggu, 07 Juli 2013

Cara Memasang Widget Translate Pada Blog

YHS Blogger | Cara Memasang Widget Translate Pada Blog-Selamat pagi sobat YHS Blogger.. Dikesempatan kali ini saya akan membahas tentang Cara Memasang Widget Translate Pada Blog. Apakah memasang widget translate penting? Kalau menurut saya sih penting ya.. Karena jika ada pengunjung dari negara asing yang tidak mengetahui bahasa indonesia kan bisa menggunakan widget translate ini. Jika tidak ada widget translate ini bisa saja turis asing ke blog kita berkurang. Untuk meyakinkan anda semua bagaimana cara kerja widget ini, silahkan lihat demonya.

Live Demo

Agar google translate dapat menerjemahkan artikel anda dengan jelas, maka gunakanlah bahasa yang baku. Jangan bahasa gaul. Dan jangan contoh blog YHS Blogger karena masih banyak sisipan-sisipan bahasa gaul ke dalam artikel. hehehe.. Kalau artikel blog kita berbahasa gaul, maka terjemahan dari google translate bisa hancur. Untuk itu gunakan bahasa baku. Kalau begitu kita langsung saja menuju ke cara memasang widget ini.

1. Login ke akun blogger anda.

2. Klik Tata Letak.

3. Klik Tambahkan Gadget.

4. Pilih HTML/JavaSript.

5. Lalu masukkan kode di bawah ini.

<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIfEd-alEgmF2uTv0OsCFaiKMrjJhfDpoN7ZRv-0r6rODxbI1uplZtETKnY2mQ70n4myvvLzuUIZYQTtCWLIshoNcfEnJ-szvOO150nBL9H3tc8iH7JSYJ-Xa5jcTWc00ZchRZc7GfTU/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF8xu6CBMGs8RvzrWfOQa69PMxecboj7qvm_nAr2X9gYxFmVf8XYZX0b6OKZzTrG4H-zFqNtMKcNFDvqPKnI5Fc3UnwXRCLVKdc1xaXLf8H9xy5ma2etxG1xdfB0Bw4mJ5rz7PF4sgIgE/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCpNGQyDpPsMYBKzK8bgAt2jvCPWltLj-S0hJ5BetXpllTjFBNcIxoPK_pkbjStATcYRo_in9bpi09k6YUiJ2ugc5t3AJhmw4ZOsEFvYmTEhVG1DrZR0Vc9waQbMPct4ntrN33ZwX9oqni/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx04bpU5uSYe3QdQ6BS2mlz4YOJjWfnyF9jj2Gc01nuF7RChkCqtVPPhTWHpDmdSCOtGbERkwVd8JNXTUSSF4waC7ObPJLmAntH3j_b8ICETW1nA81HElyY1LSR63z7VXBI4Ahjp4blTI-/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCdi8SjP5Zz-hMUBrPWRwAGa6edL7HaqaBfW1xjlxQv2F9Pzf_B56Zcj6DnPT6e2myEfF_USTFdEYfpoXJEEBjuVypt2OkLL6BeAopXFgPxW3PFl3Oomnappk9fmuQhrdvCjiXBmOZmU/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi513Z89PREVHoQDP8YK-bKWkq6Adi4ohiJcdKw8vMpoTQA78OjF2atFBvR3UQ8-cFooB0YmDem1-ij7NlNbTDueKSJoWzVnoJ2w0qZulqqZ9U0uLtyJLsXUm99BJPajeYq-ZKnUq5wq5o/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<br /><br />
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjapQZcJx156hvwaXRL-tRmTUsmUx9E31hp8nMjLR-VVbKYID0gybVezP8HZTe8xRf0o-0K0GMSQhTRxwGvtXqxEBL0TjYUAKk3wo_ShnkQPXBqKF1K_rBOy6mKZQ9bJGTIpHGPLv52uGY/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTWg3QX9cDDXZLQbSY9KNzD1qgFbhSqEwaE0Riy9Nx279NWDocsAK9wsWcstZNF8r4fdX4Nnjg4xtVu_WeZeb4i_KzhLZOl9NQ4yQSdP2QCujd6r-kwHaQJvO7CDnFY8lmboB83QjizYc/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpcysfQ51-eJ-n7NWWCDTMG0RrET8bmTOP5ehpJPMZAnl78P_ybNrX55xyKlKZ6U-C0Kvz71uAQ_srxAD9CZfqrFoPzmHmjMG1zVJR8WyLFkUbkl4hweVo43yN3ZMx4kRIaIcO6nhVui8F/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguYwq0NaoXrun_wumPGcqyzQFA2ZODTXDqGgMTHRws10i60jfEhz8PZkUqberItD80Q11ez2cL8o90Ix-bZD5zQ6B3qjOAaQHV5U7Mxn4wIXfY6BeSJl6e7m8W-bBnJovnlpQtIU5nK60/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsiDyFgqaVeIt8DeywwBqZS5_ySm9KsUOQFeIDr8C7Roq8eta9RaomKvREYVd5AkmXPtsQNHoPWVk5qy7QdMpHVQf4QPKxqkI1ZkMANHe550Gl-zuNezxmMCmP9KGvgrmwE_gnCQyHqHM/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihCojfBhFudUvgo6PDICM5zMnwqGbI3oXk6vGBE0_TYNWvoZxWntKL9jrCl8_BmV0Gk4gNMJB7ZNsZOqPHUkwLAl-qn2EWGQrWFOVMLNzodivI10OVJ5PCiuCWREF0JdS3gMS84IHGMk4/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div> <div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://yhsblogger.blogspot.com/2013/07/cara-memasang-widget-translate-pada-blog.html" target="_blank" title="Google Translate">Get This Widget</a></div>

6. Klik Simpan dan lihat hasilnya.

Demikianlah artikel dari YHS Blogger mengenai Cara Memasang Widget Translate Pada Blog. Semoga bermanfaat dan selamat mencoba..

Cara Membuat Widget Social Profile Keren

Contoh

YHS Blogger | Cara Membuat Widget Social Profile Keren-Setelah sebelumnya saya membahas tentang Cara Membuat Icon Social Profile Dengan Efek Spinning. Kali ini yang saya bahas tidak jauh berbeda dengan Cara Membuat Icon Social Profile Dengan Efek Spinning. Yang saya bahas masih sama. Yaitu tentang widget social profile. Tetapi widget social profile yang ini dengan yang sebelumnya berbeda. Perbedaannya terletak di efek widget-nya. Jika widget yang sebelumnya mempunyai efek spinning, sedangkan widget yang ini memiliki efek hover. Widget ini didesain oleh Vinay Prajapati.

Live Demo

Sebelum saya menjelaskan langkah-langkah memasang widget ini, saya akan menjelaskan fitur-fitur yang ada di widget ini.

Fitur :

7 Social media masuk ke dalam widget ini.
Memiliki efek hover.
Memiliki desain yang elegan.
Tidak menggunakan Javascript
Tidak Menggunakan JQuery

Cara Memasang Widget Ini.
1. Masuk ke akun blogger anda.
2. Klik Tata Letak.
3. Klik Tambahkan Gadget.
4. Pilih HTML/JavaScript.
5. Lalu Masukkan kode di bawah ini :

<div class='metro-social'>

<li><a class="fb" href=http://www.facebook.com/ID Anda rel="nofollow"></a></li>

<li><a class="tw" href=http://twitter.com/ ID Anda ></a></li>
<li><a class="gp" href="https://plus.google.com/ ID Anda "></a></li>
<li><a class="pi" href=http://pinterest.com/ ID Anda rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/ ID Anda rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/ ID Anda ></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/ ID Anda rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

6. Simpan

Demikianlah artikel dari YHS Blogger