Cara Membuat/Memasang Permalink SEO Dengan Social Widget Keren Di Blog


Cara Membuat/Memasang Permalink SEO Dengan Social Widget Keren Di Blog


Cara Membuat/Memasang Permalink SEO Dengan Social Widget Keren Di Blog - Halo sobat, pagi hari saya akan share request teman yang minta tutorial membuat permalink seperti blog ini sobat. Apa sih kegunaan permalink? permalink digunakan untuk mempermudah visitor untuk memberikan link back ke blog kita dan juga diharapkan dapat menambah jumlah internal link blog kita sob. Lanjut langsung aja kita menuju tutorialnya, membuat permalink di blog.....


Cara Membuat/Memasang Permalink SEO Dengan Social Widget Keren Di Blog

1. Seperti biasa buka dashboard blogger sobat

2. Masuk ke Template lalu pilih Edit HTML

3. Copas kode berikut tepat diatas kode ]]></b:skin>

.tbiauthorbox {
position: relative;
margin: 20px auto;
border: 10px solid #3E999E;
padding: 5px;
min-height: 115px;
max-width: 650px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.tbiauthorbox:hover {
border: 10px solid #32BBC2;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.tbiauthoravatar {
background: #fff;
border: 1px solid #ccc9bd;
float: left;
height: 100px;
padding: 2px;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 4px 0 #d9d9d9;
-moz-box-shadow: 0 0 4px 0 #d9d9d9;
box-shadow: 0 0 4px 0 #d9d9d9;
width: 100px;
}
.tbiauthoravatar img {
height: 100px;
width: 100px;
}
.tbiauthorlabel {
font-family: 'lucida sans unicode', 'lucida grande', sans-serif;
background: #333;
color: #fff;
display: block;
font-size: 11px;
font-weight: bold;
line-height: 20px;
height: 20px;
margin-left: -43px;
position: absolute;
bottom: -10px;
left: 50%;
text-align: center;
width: 86px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.tbiauthorcontent {
margin-left: 120px;
}
.tbiauthorhead {
border-bottom: 1px solid #ddd;
margin-bottom: 12px;
padding: 0 160px 3px 0;
position: relative;
}
.tbiauthorbox h3 {
font-family: georgia, serif;
color: #302E29;
font-size: 26px;
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;
}
.tbiauthorbox h3:hover {
color: #E65002;
-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;
}
.tbiauthorbox h3 a {
color: #302E29 !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;
}
.tbiauthorbox h3 a:hover {
color: #E65002 !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;
}
.tbiauthorsocial {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 4px;
right: 0;
}
.tbiauthorsocial li {
float: left;
margin-right: 4px;
padding: 0;
}
.tbiauthorsocial li a {
background: url(https://lh6.googleusercontent.com/-cztX7uW8FGU/UEDmmy6SdFI/AAAAAAAAGdg/ONp7KkBoPOU/s75/icons_user_links.png) no-repeat 0 0;
color: #C1B7A3;
display: block;
height: 20px;
font-size: 0;
text-indent: -99999px;
width: 20px;
-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;
}
.tbiauthorsocial li a.authorFacebook {
background-position: -20px 0;
}
.tbiauthorsocial li a.authorGooglePlus {
background-position: -40px 0;
}
.tbiauthorsocial li a.authorTwitter {
background-position: -60px 0;
}
.tbiauthorsocial li a.authorBlog:hover {
background-position: 0 -20px;
}
.tbiauthorsocial li a.authorFacebook:hover {
background-position: -20px -20px;
}
.tbiauthorsocial li a.authorGooglePlus:hover {
background-position: -40px -20px;
}
.tbiauthorsocial li a.authorTwitter:hover {
background-position: -60px -20px;
}
.tbiauthorbox p.bio {
font-family: 'lucida sans unicode', 'lucida grande', sans-serif;
font-size: 12px;
line-height: 18px;
}
.tbiauthorbox p a {
color: #E65002;
}

Sobat bisa merubah warna border atau background dengan mengganti kode setelah color :#

4. Kemudian letakan kode berikut tepat dibawah kode <div class='post-footer-line post-footer-line-3'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tbiauthorbox'>
<div class='tbiauthoravatar'>
<img alt='Hardiyan Kesuma R' src='https://lh6.googleusercontent.com/-c5gfNeX9dCs/UHoAUIB_BVI/AAAAAAAAATw/8ujBpbheGyk/s140/my%2Bhat.jpg'/>
<span class='tbiauthorlabel'>
Post Author
</span>
</div>
<div class='tbiauthorcontent'>
<div class='tbiauthorhead'>
<h3>
<a href='http://hardiyankesuma.blogspot.com/'>
Hardiyan Kesuma R
</a>
</h3>
<ul class='tbiauthorsocial'>
<li>
<a class='authorBlog' href='http://hardiyankesuma.blogspot.com/' target='_blank' title='Blog'>
Blog
</a>
</li>
<li>
<a class='authorFacebook' href='https://www.facebook.com/HardiyankesumaR' target='_blank' title='Facebook'>
Facebook
</a>
</li>
<li>
<a class='authorGooglePlus' href='http://www.blogger.com/profile/11463125634235960460' target='_blank' title='GooglePlus'>
GooglePlus
</a>
</li>
<li>
<a class='authorTwitter' href='https://twitter.com/hanker03' target='_blank' title='Twitter'>
Twitter
</a>
</li>
</ul>
</div>
<left>
Terimakasih telah membaca artikel
<strong>
<u>
<data:blog.pageName/>
</u>
</strong>
Anda bisa bookmark halaman ini dengan URL
<strong>
<a expr:href='data:post.url'>
<data:post.url/>
</a>
</strong>
.
</left>
</div>
</div>

</b:if>


Ganti kode yang berwarna merah seperti Nama Sobat, URL Facebook, Twitter dan Blog dengan kepunyaan sobat sendiri ^_^

5. Simpan template blog sobat, dan lihat hasilnya :D

Dengan menggunakan permalink ini selain blog sobat akan bertambah nilai SEO nya juga menambah nilai keindahan blog sobat ^_^. Oke itu dulu yah posting hari ini, Semoga bermanfaat ....


Cara Membuat/Memasang Permalink SEO Dengan Social Widget Keren Di Blog


Kunjungi situs terbaru Hardiyan sob, :
# Hardiyan Media - Movie, Music, and Entertainment
Pakai kode disamping emoticon, terus tambahkan satu spasi sob..
:a :b :c :d :e :f :g :h :i
:j :k :l :m :n :o :p :q :r
:s :t :u :v :w :x :y :z
Comments
19 Comments

19 komentar :

  1. Terima kasih gan, maklum pemula saya gan, langsung dicoba nih tipsnya.. thanks.

    BalasHapus
    Balasan
    1. sama-sama gan, semoga berhasil yah :x

      Hapus
  2. sudah ane coba coba gan keren banget (y)
    terima kasih ya tutornya :D

    BalasHapus
    Balasan
    1. berhasil kan? klo iy selamat yah :f

      Hapus
  3. bagus, bookmark dl
    makasih and salam kenal

    siomponk[dot]com

    BalasHapus
  4. Keren banget mas broo demi deh wkwk, biasanya permalink isinya yaa gitu2 aja sekarang udah dimodif :D

    BalasHapus
  5. keren gan emang penting banget nih

    BalasHapus
  6. bagus juga sob..
    kalo saya pke yg ada teks areanya :D
    -keep blogging-

    BalasHapus
  7. keren sob.. makasih infonya tentang membuat permalink sangat bermanfaat sob

    BalasHapus
  8. keren sob.. saya udah pasang di blog.. thx sudah berbagi..

    BalasHapus
    Balasan
    1. bagus gak? thanks kunjunganya yah :c

      Hapus
  9. mantap bgt bro :D
    ditunggu kunbalnya: http://rouens.blogspot.com

    BalasHapus
  10. Kalau ane pasang, ngaruh gk gan sama kecepatan blog ane?

    BalasHapus
    Balasan
    1. nggak terlalu ngaruh sob, coba dulu ...

      Hapus
  11. WWWaaaauuuuu Blogging walking men. :D bagus permalink nya tapi masih kurang :P keren punya ane :P hehehe

    BalasHapus
    Balasan
    1. Wauuu juga sob, keren punya saya dong ... emang punya kamu keren apa? :h

      Hapus

=====================================================
Rules Komentar :
1. Silakan berkomentar dengan sopan dan baik
2. Dilarang nyepam
3. Dilarang Live Link
4. Berkomentarlah yang relevan, jangan OOT
=====================================================

-->