14.12.13
32
Smart link image
Cara Membuat Permanen Link Pada Blog - sebenarnya secara default saat kita menulis artikel blog baru, kita bisa lihat di sebelah kanan tab tulisan ada menu opsi setelan entri "Tautan Permanen" Permanen Link (Permalink) secara otomatis akan muncul sesuai dengan entri Judul Artikel yang anda buat, seperti artikel ini dengan Permanen Link-
http://sahabatblogger77.blogspot.com/2013/12/cara-mengganti-judul-artikel-dengan-permanen-link.html. Hanya saja Permanen Link tersebut tidak terlihat pada artikel saat kita publikasikan tulisan.

Permalink-Permanen Link merupakan alamat situs URL atau Link Permanen artikel atau postingan di blog yang dapat dibuka di mesin telusur seperti Google, Yahoo, dan Bing.
Agar memudahkan Google membaca permalink tersebut, kita perlu Menambahkan Permanen Link Otomatis dan SEO Friendly Pada Plog. sehingga kita tidak kerepotan lagi mengubahnya secara manual. Dengan Cara Mengganti Judul Artikel Dengan Permanen Link, maka secara otomatis Permanen link akan terpasang saat anda publikasikan artikel. Disini akan saya share beberapa model Permanen Link (Permalink) atau Smart Link sebagai berikut :

MODEL PERTAMA
Cara Mengganti Judul Artikel Dengan Permanen Link sebagai berikut:
➝ Ke Tata Letak
➝ Pilih Template - Edit Template
➝ Gunakan CTRL+F untuk memudahkan pencarian kode
Copy kode berikut lalu Paste diatas atau sebelum kode ]]></b:skin>

/*about profile blogger widget desain
url: http://sahabatblogger77.blogspot.com/
author: devy indriyani*/
#about-profile {
  width:auto;
  background:#f2f2f2;
  border:2px solid #000000;
  margin:0 auto;
  display:block;
  font-family:"julee";
  color:#000;}

#about-profile .info-text {padding:5px;}
#about-profile h4 {
  background:#FF0000;
  border:none;
  border-bottom:2px solid #39f;
  color:#fff;
  font-family:"julee";
  text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
  padding:5px 10px;
  display:block;}

#about-profile h4 a {color:#000000;}
#about-profile img {
  background:pink;
  width:90px;
  height:100px;
  border:1px solid #080;
  margin:3px 20px 0 0;
  float:left;
  padding:2px;
  box-shadow:5px 5px 5px rgb(0,0,0,.5);
  -moz-box-shadow:5px 5px 5px rgb(0,0,0,.5);
  -webkit-box-shadow:5px 5px 5px rgb(0,0,0,.5);}


➝ Lalu cari kode <data:post.body/>
➝ Kemudian letakkan kode berikut dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='about-profile'>
        <h4>Diposting Oleh : <b><data:post.author/></b></h4>
            <div class='info-text'>
<img alt='About Profile Image' src='URL-Gambar Anda.jpg'/>
Anda sedang membaca artikel tentang - <b><a expr:href='data:post.url'><data:post.title/></a></b>
Jika ingin mengcopy paste atau menyebar-luaskan artikel ini, jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya >> <textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea><p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://sahabatblogger77.blogspot.com/' target='_blank'>SB-77 Desain</a></span></p>
<div style='clear:both;'/>
            </div>
    </div>
</b:if>
Dan hasilnya akan seperti ini:


DEMO SHOW




MODEL KEDUA
Cara Mengganti Judul Artikel Dengan Permanen Linksebagai berikut:
➝ Ke Tata Letak
➝ Pilih Template - Edit Template
➝ Gunakan CTRL+F untuk memudahkan pencarian kode
➝ Temukan kode ini <data:post.body/>, Taruh kode ini dibawahnya:

ELEMEN KODE
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div style='background: #a8f884; margin-bottom: 10px;margin-top: 30px;border: 2px ridge red;border-right: 8px double red;border-left: 8px double red; font-size: 11px; padding: 15px'><span style='font-size: 17px;'><div style='color: blue'><b>TERIMA KASIH ATAS KUNJUNGAN SAUDARA</b></div></span><br/>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
 Title= <b><span itemprop='itemreviewed'><data:post.title/></span></b><br/>
  Pengarang= <b><span itemprop='reviewer'><data:post.author/></span></b><br/>
Rating Blog <span itemprop='rating'>1</span> dari 5
</div>
    <span style='text-align: jusfity;'>Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke &gt;&gt; <div style='color: red'><b><div style='font-family: Arial;font-size: 13px;'><a expr:href='data:post.url'><data:post.url/></a></div></b></div><div style='text-align: center;'><div style='color: red'><b>= TERIMA KASIH =</b></div></div></span></div></b:if>
      <div style='clear: both;'/>

Hasilnya akan terlihat seperti tombol DEMO SHOW dibawah ini:



DEMO SHOW



Mari berbagi Cara Mengganti Judul Artikel Dengan Permanen Link ini dengan meng-klik tombol share Google+.
See you and happy Week end guys...!!!


Diperbaharui - (Desain Ulang)
Oleh: Devy Indriyani at "09 Agustus 2014"

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Cara Mengganti Judul Artikel Dengan Permanen Link
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

32 komentar

  1. ribet gan, susah. :)
    gak ada yang lebih simpel lg dr ini :)

    BalasHapus
    Balasan
    1. coba pilih model ke-II, jika masih ribet anda cukup memotong kata-katanya agar lebih pendek atau menghilangkan background dan border,,

      Terimakasih sudah berkunjung

      Hapus
    2. gan kok di blog ane ga muncul gituan , padahal udah ane praktekin cara yang kesua

      Hapus
  2. gan ane coba ya gan . gan ane boleh minta link fb nya ane mau tanya 2 soal blog (ane masih newbie )?

    BalasHapus
  3. saya bookmark dulu mbak,
    sapa tau nanti kepengen coba.
    terima kasih tutor nya.

    BalasHapus
  4. thanks gan.....www.crystalxnasa.biz

    BalasHapus
  5. makasih mbak Devi (h) berhasil saya terapkan di blog saya. kunjung ya,, hehe www.abdusatri.com

    BalasHapus
    Balasan
    1. sama-sama
      siap melawat ke blog agan

      Hapus
  6. Ini responsif gak mbak ?

    BalasHapus
    Balasan
    1. tergantung dengan template yang mas gunakan, jika pada template mas sudah menggunakan CSS media layout,maka smartlink ini sudah responsive untuk digunakan tanpa kita menambahkan lagi secara manual

      Hapus
  7. Begitu caranya ya mbak, terima kasih telah mau berbagi ilmunya ya (h)

    BalasHapus
  8. Mbak devi 100% work mbak.. mampir ya? please http://wanda-awang.blogspot.com/ :))

    BalasHapus
  9. begitu dicoba langsung tokcer..., thanks ya mbak

    BalasHapus
  10. thx infonya sob
    salam kenal www.idcheat.com

    BalasHapus
  11. Mbak kalo yang diatasnya permalink (didesain ulang) itu caranya gimana ya? Dan bagaimana juga supaya artikel yang diperbaharui dideteksi sama google, soalnya di webmaster tool saya kebanyakan mempermasalahkan gambar yang hilang atau artikel yang diganti judulnya.. terimakasih suhu.. :)

    BalasHapus
    Balasan
    1. desain border. misalnya border saya tebalkan dengan 30px, dan kode width diganti menjadi max-width, kurang lebih seperti ini:

      [pre].border1 {
        background:#9fc5e8;
        padding:5px;
        width:5%;
        margin-bottom:2px;}

      .border2 {....}
      //dan seterusnya

      <div class='border1'></div>
      <div class='border2'></div>
      <div class='border3'></div>
      <span style="color:#660000;font:bold italic 13px/normal Arial,serif;">
      Diperbaharui - (Desain Ulang)
      Oleh: Devy Indriyani at "09 Agustus 2014"</span>[/pre]

      setiap artikel yang berubah, tau Anda telah merubahnya, beritahu google untuk melakukan indeks ulang

      Pelajari disini:
      Google Sumbit URL

      Hapus
  12. yah permanen link ini bisa membuat artikel lebih seo friendly dan gampang dibaca oleh search engine. kebanyakan kawan-kawan jarang memperhatikan ini, padahal ini cukup penting bagi nonten kita. on terima kasih infonya ya mbak. salam sahabat blogger.

    BalasHapus
  13. akhirnya saya bikin juga mbak, tapi yang sederhana...tapi inspirasinya dari yang pertama...terima kasih atas inspirasinya.

    BalasHapus
    Balasan
    1. tadinya di blog Devy juga gak pakai mbah, tetapi karena banyak sahabat yang memanggil Devy dengan sebutan mas, tah jadi ditampilkan dech versi blockquote dengan gambar, tetapi masih saja banyak yang panggil dengan sebutan mas, padahal sudah saya buat dan tampilkan foto Devy,
      haddewhh..!!

      Hapus
    2. sama-saya juga kadang bingung...kemarin saya kira kamu mas benaran, mulanya ragu juga. masalahnya lihat foto kan cewek...tapi kalau udah di pasang permalink kalau masih juga dipanggil mas...kyaknya ada yang salah...yang manggil salah kaprah kali ya heeeee

      Hapus
    3. padahal hampir setiap hari kumis sudah Devy cukur biar terlihat asli seperti Cewek beneran, tetapi belum bisa sempurna juga mbah, hehehe..!

      kira-kira kudunya diapain ya mbah.! bingung aing.!!

      Hapus
  14. kalau mengganti url posting yang sudah terlanjur dipos bisa gak......

    BalasHapus
    Balasan
    1. bisa aja tapi pake redirect. masuk setelan - referensi penelusuran - pengalihan khusus. masukkan url lama lalu ganti dengan yang baru.

      Hapus
  15. mba Dev sy pakai model ke-II ko gak bisa ya? blog sy sederhana bgt sih,msh pakai yg bawaan pabrik.coba tengok dong takutnya gak support.siapa tahu ada pencerahan dari mb Devy Indriyani. Salam perdana
    http://berbagipengalamandotcom.blogspot.com/

    BalasHapus
    Balasan
    1. pasang di bawah kode <data:post.body/> yang ke dua

      Hapus
  16. bahkan widget ini sebelumnya sudah Devy coba pada Template default blogger, Mas temukan kode ini Pada Template,

    <data:post.body/>

    mungkin terdapat 2 atau lebih kode <data:post.body/> pada Template, Temukan kode yang terakhir, lalu letakkan kode model kedua tepat dibawah kode tersebut.
    (agar lebih mudah gunakan Control+F untuk memudahkan pencarian kode)

    BalasHapus
  17. mba dev sdh bisa.benar seperti mba dev bilang, pastenya di kode yg terakhir.terimakasih banyak pencerahannya dan saya pakai yang model ke-1.

    BalasHapus
    Balasan
    1. sebenarnya cuma cara peletakannya saja yang kurang benar, nah itu buktinya sekarang blognya lebih keren kalau sudah diberi permalink, jadi kita-kita bisa tahu siapa admin dibalik blog tersebut.

      terimakasih kembali mas.

      Hapus
  18. lumayan ribet mbak tapi berhasil haha .
    ditunggu kunjungan baliknya mbak join site juga mbak ya hehe
    wewongganteng.blogspot.com

    BalasHapus
  19. Kalau membuat menu nav bar seprti blog mbk itu apa yang harus di rubah atau di tambah mbk? Trmksh

    BalasHapus
  20. sAYA PAKAI cara pertama Mbak Devi. O iya mau tanya nih...kalau kita mau simpan diatas related post caranya gimana? Kalau yang ini kan didalam postingan....

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK