Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Wednesday, August 21, 2013

widget permalink with social media share

Widget permalink dipadu dengan media sosial share sangat cocok untuk halaman blog kesayangan anda, cara membuatnya dapat anda simak tutorial dibawah ini. Buat para bloger widget yang simple dan unik yang selalu dicari cari untuk dipasang dihalaman blognya, Itulah alasan saya untuk memadukan 2 widget ini menjadi satu untuk kepentingan bloging. Widget ini menganut sistem SeO Friendly dan Valid HTML 5 serta memiliki kode yang ringan jadi anda tidak perlu ragu untuk memasngnya pada halaman blog anda, Tampilan yang elegan menjadikan halaman blog anda semakin menarik dimata pengunjung blog anda. Oke langsung saja menuju TKP dan simak tutorial dibawah ini :


Fitur Aplikasi


  1. Link Sumber
  2. Sosial media share
  3. Name admin
  4. Image admin
  5. Join To Blog
  6. Link Contact

Untuk DEMO silahkan " KLIK DISINI " Lihat Kotak permalink dibawah postingan


Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

/*****************************************
Name : Permalink with media share
By : Rivai Silaban | Blog Design
Update : 21/08/2013
******************************************/
.BDRS-permalink{
width:600px; // lebar widget
border:1px dashed #0066FF;
border-radius:5px;
margin:30px 0 10px -8px;
display:block;
color:#000;
background-color: #FFFFFF;
height: 150px;// tinggi widget
}
.BDRS-text {
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 12px;
color: #000;
vertical-align: baseline;
margin-top: -30px;
padding:4px 5px 10px 30px;
margin-left:80px;
margin-bottom:5px;
}
.BDRS-permalink .isi-box{
padding:5px;
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 12px;
color: #333333;
height: 100px;
}
.BDRS-permalink img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:8px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
.BDRS-permalink img:hover{
opacity: 0.5;
}
.BDRS-sosial a {
background-color:#F7F7F7;
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-style: italic;
font-size: 13px;
color: #FF0000;
font-weight: bold;
text-decoration: none;
padding:5px 10px;
margin-right:5px;
border: solid #B2B2B2 1px;
text-shadow: 0px 1px 1px #111;
text-align: center;
}
.BDRS-sosial a:hover {
background-color:#FFFFFF;
color: #333333;text-shadow: 0px 1px 0px #111;
border: solid #666 1px;box-shadow:0 0 2px #666;
}
.BDRS-textarea {
background-color:#F4FDD7;
width: 475px;
float: right;
}
.judul{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}/*** Blog Design CSS and ***/


Install Program Tag HTML


  • Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  • Cari code
    <div class='post-footer-line post-footer-line-2'/>
    atau Kode
    <div class='post-footer-line post-footer-line-3'/>
  • Copy kode dibawah ini pastekan tepat dibawah code diatas.
    Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
  • Untuk script post snippet silahkan pastekan kode dibawah ini tepat dibawah kode <data:post.body/>
  • Save template anda dan lihat hasilnya, selamat berkreative.

<!-- Rivai Silaban | BLOG DESIGN Permalink start -->
<div class='BDRS-permalink'>
<div class='isi-box'>
<div style='background-color: #C6FFFF;border-radius:3px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; width: 92px; padding:5px 2px; box-shadow:0 0 2px #666 inset; font-style: normal; font-weight: bold; text-transform: uppercase;border:solid #999999 1px;'> Rivai Silaban </div>
<a href='LINK PROFIL ANDA' target='_blank' title='ADMIN'><img alt='Rivai Silaban' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBLKAguWnUy5g089y9_93TxXnsMOaW01fL5EdHCAS87bygvKR54w-jQHAikltjtwjb0DdqqdXoj-0Cn-EheOSZm8zW3PeShahwl28aoyX1piUCJurh-AMJbag345TxD765s1o4SLb6bo/h120/rivai.jpg' title='ADMIN'/></a><div class='BDRS-text'>Anda sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b> silahkan Anda COPAS di situs anda atau sebar luaskan artikel ini, jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya...!!!</div>
<span style='float:left;font:italic 12px Arial, Sans-Serif;'><textarea class='BDRS-textarea' name='BDRS' 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></span></div><br/>
<div class='BDRS-sosial' style='margin-top:-5px;'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' expr:title='&quot;Share to Gplus : &quot; + data:post.title' target='_blank' title='gplus'>Gplus</a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' expr:title='&quot;Share to facebook : &quot; + data:post.title' target='_blank' title='facebook'>Facebook</a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' expr:title='&quot;Share to twitter : &quot; + data:post.title' target='_blank' title='twitter'>Twitter</a>
<a href='http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA ' target='_blank' title='follow'>Join to Blog</a>
<a href='LINK KONTAK ANDA ' target='_blank' title='contact'>Contact</a>
</div></div><div style='clear:both;'/></div>
<!-- Rivai Silaban | BLOG DESIGN Permalink start -->

Keterangan Code
  • Untuk kode CSS silahkan anda edit sesuai dengan kebutuhan anda, sesuaikan ukuran lebar box subscribe pada kode CSS warna merah.
  • Untuk tag Htmlnya silahkan ganti kode tulisan warna HIJAU dengan text anda.
  • Tulisan kode warna KUNING silahkan ganti dengan link gambar anda.
  • Untuk tulisan warna BIRU silahkan ganti dengan nama anda.
  • Untuk Tulisan warna MERAH silahkan ganti dengan link anda sesuai dengan yang tertulis di kode tersebut.

Kesimpulan

Widget permalink yang telah digabung dengan widget share dan Join to blog ini valid html 5 dan penulisan kode tag yang SEO Friendly dapat anda gunakan untuk halaman blog kesyangan anda. Kode yang ringan menjadikan widget inimenjadi suatu pilihan untuk para bloger.

Silahkan simak tutorial diatas untuk lebih jelasnya tentang cara memasangnya pada halaman blog kesayangan anda, bila ada masalah yang tidak dimengerti silahkan hubungi saya atau share bersama saya pada form komentar dibawah.

Widget Permalink with Media Share
21 Agustus 2013
By : Admin Blog Design
Salam Bloger..!!!

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 4:20 PM

9 comments :

  1. Wow keren artikel nya Bang sangat membantu buat saya
    Dengan permalink yang super komplit ini,. dan sudah pasti
    membantu seo,. juga valid HTML5/Css3 yah Bang..?

    Terima kasih atas artikel nya Bang semoga kebikan Bang Rivai ini
    Di dengan Berkah Dan Barrakah yang tak terhingga
    oleh yang maha segalanya amien

    ReplyDelete
    Replies
    1. amin bang makasih banyak atas pendapatnya. tag html dan cssnya semuanya valid bang dan lebih SEO Friendly karena menganut sistem penulisan tag SEO.

      Delete
  2. nice post sob
    sob..tanya lagi ini
    setelah saya pasang CSS di atas sudah berhasil, selanjutnya saya masukkan script selanjutnya di bawah footer 3 itu dengan kode apa?
    padahal di bawah kode 'data post body' dimasukkan kode HTML di atas
    setelah saya pasang kode HTML nya ternyata ada problem dan keluar huruf merah 'div' dan 'b:include'
    bagaimana mengatasi ini sob
    jangan bosan-bosan tutor ane ya sob
    hehe...

    ReplyDelete
    Replies
    1. mungkin tidak cocok sob coba pasang di bawah code
      <data:post.body/>

      tapi perlu di ingat sob code <data:post.body/> ada dua pada template, satu untuk halaman utama, dan satu lagi untuk postinga, jadi yang di pasang dibawah code <data:post.body/> pada postingan ya..

      Delete
  3. nice post sob
    saya izin sedot ya sob
    tapi setelah saya ikuti tutorial di atas ada prblem sob ketika meletakkan kode HTML nya sob
    ada tulisan 'div' dan 'b:include' yang di cetak merah
    bagaimana gan mengatasi hal tersebut?
    jangan bosan-bosan tutor ane ya sob
    terima kasih

    ReplyDelete
    Replies
    1. silahkan sob,,,
      coba di simak penjelasan iatas ya sob, agar lebih apdol dan mantap heheh makasih atas pendapatnya...

      Delete
  4. sudah saya lakukan sob
    tetapi kok ada tulisan ini ya????
    Error parsing XML, line 2730, column 5: The element type "b:includable" must be terminated by the matching end-tag ""
    mohon bantuannya sob
    terima kasih

    ReplyDelete
    Replies
    1. itumenandakan eror pemasangan codenya tidak di dalam kawasan kode <b:includable id='post' var='post'> dan code penutup </b:includable> code itu harus mas pasang didalamnya agar tidak error mas...

      Delete
    2. Coba mas cari code <b:includable id='post' var='post'> terus didalam code tersebut ada code <data:post.body/> nah codenya mas pasang pas di bawah code <data:post.body/> mas

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog