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

Tuesday, May 14, 2013

Cara membuat permalink v.1

Permalink dapat dikatakan suatu pesan dari blog kita untuk para pengunjung blog. Kegunaan PERMALINK ini sangat bagus untuk blog/web kita, dimana kita dapat menyampaikan berbagai pesan terhadap para pengunjung blog kita. Permalink yang saya buat kali ini dapat anda andalkan dimana saya menambahkan beberapa fitur penunjang untuk meningkatkanrespons para pengunjung blog anda. Adanya icon social yang saya sematkan di antara element tag HTML Permalink ini selain mempercantik pastinya mempunyai kegunaan yang baik untuk blog maupun situs jejaringan sosial yang anda miliki.

Cara membuat permalink v.1
 Gambar 1.0


Fitur Aplikasi


  1. Email Subcribe
  2. Sosial media share
  3. RSS
  4. Image admin
  5. Judul 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 : 14/05/2013
******************************************/
.permalink {
margin-top: 8px;
margin-bottom: -10px;
padding: 10px;
border: 2px solid rgb(9, 149, 223); border-style: dashed;
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 4px 4px rgb(204, 204, 204);
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
border-color: #666666;
}
.gambar {border: 2px; border:double;
border-color:#000000;
box-shadow: 2px 4px 4px rgb(131, 129, 129);
margin: 2px 10px 20px 0px;
width:100px;
height:100px;
opacity: .3;

}
.gambar:hover { opacity: 1; }
.buttonrs_email{
background:#09f;
border: 2px solid rgb(9, 149, 223);
border-radius: 3px 3px 3px 3px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#fff;
cursor:pointer;
font-family:verdana;
font-size:12px;
padding:0px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:100px; height:25px;
background-color: #940A0A;
border-color: #FF0000;
}
.buttonrs_email:hover,.buttonrs_email:focus{
background-color: #CC0000;
color: #000000;
}
.buttonrs_email:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px; background-color:#3E0600;}


.kotak_email{
margin:10px 0 0;
background-color: #FFCACA;
}
.kotak_email:hover{background: #f3f3f3 ;}
.kotak_email:focus{outline:none;}
.rivaistyle{/* Rivai Blog */
list-style-type:none;
margin:5;
padding:0; width:200px; margin-top:5;
}
.rivaistyle li{
display:inline;
width: 60px;
height:60px;
}
.rivaistyle li img{
width: 30px;
height: 30px;
border:0;
margin-right: 4px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.rivaistyle li img:hover{
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);
-o-transform:scale(1.2);
}/*** 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='permalink' style='width:550px; height:120px'><a href='#' target='_blank'><img align='left' alt='Saya' border='0' class='gambar' height='100' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaZOZel8yEi9Af-78mav5ojdjLfRVWb8vLdTjQsaGz9dVkHqj0rusLtoRvwd_Oq7oy8j5DF7pt9d2H0Sj_OZ2rOpCkF_WrZPjsUKXUD6DufTJk50_ecaYu9EKwkD-BKKw95DTgTMH1MnQ/s1600/foto.gif ' style='padding: 0px 0px 0px 0px;' width='100'/></a>
<div style='margin-top:-15px; margin-left: 100px; white-space: inherit;' >
<p>Saat ini anda sedang membaca artikel tentang<br/> &quot;
<b>
<a expr:href='data:post.url'>
<data:post.title/>
</a> </b> &quot;<br/>
Bila anda suka dengan artikel ini silahkan berlangganan geratis Artikel dari blog ini. Pergunakan vasilitas dibawah ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui komentar. </p>

<div class='rivaistyle' style='float:left'>
<li> <div align='left'><a href='URL G PLOUSE ANDA ' target='_blank'><img alt='Invite G+' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiz2KfevnWsz_NggapVFDCLhh3bhci70qRj9-xAe1uF4QRxQOTufB-XHChsNSvWU6tSHpVdynw-PWvjDWnDHhO-x7XbSkC8yZ7kl7eyV1VZ2MimTtkuFpNCTy0ieFvU5KZtdcGOKkqmlM/s1600/gplus.png' title='Add to G+' width='24'/></a><a href='URL FACEBOOK ANDA ' target='_blank'><img alt='Add to Facebook' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjruQZg4boF9diQvgzFiojfNiqJJlh-5hTBNWGnnt93o-oFfGPX4uMdWdCadrhC89YghVbC3lLaErR81V1a8qwyO7fqasj0aqAvGTcBuYvXJCOKvXCHFeKgf2uLobLMBdeQBbj6PXABLpw/s1600/facebook.png' title='Add to Facebook' width='24'/></a><a href='URL TWITTER ANDA ' target='_blank'><img alt='Follow' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmcn3ripx9JS8Cw70vQtTzPeEIovudL8B2DwJqBB1MmTsxsAB83fk6TXj4Dn74QKIr0dF6e8NREXzgFZuGunDE4rfM-CXn6lGyLRC_2jvceHZyhwBuZCaX0knhsSv2CRjBe2yi2iNiWv8/s1600/twitter.png' title='Add to Twitter' width='24'/></a><a href='URL FEEDBURNER ANDA ' target='_blank'><img alt='Add RSS' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8zcE6z2QFmrohUIGyo26c6v0ap0X7b0cusn8tRw_JCwTZuFDKzOk11uP8UDaQNhXUUlXSJOwUafF_OgsW9kgFlsgx1HNI3NRZRohHlV19uBpj5gkPjtADABI1LCQDLlQw1CTS881pKz8/s1600/RSS-icon.png' title='Add RSS Feed' width='24'/></a></div>
</li>
</div>
<div style='float:right; border:1px; border-color:#CCCCCC; margin:-40px 2px 0 0; width:300px; '>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onSubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBUNER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<div align='right'>
<input name='uri' type='hidden' value='ID FEEDBUNER'/>
<input name='loc' type='hidden' value='ID FEEDBUNER'/>
<input class='kotak_email' name='email' onBlur='if (this.value == &quot;&quot;) {this.value = &quot;Email anda...&quot;;}' onFocus='if (this.value == &quot;Email anda...&quot;) {this.value = &quot;&quot;}' type='text' value='Email anda...'/>
<input class='buttonrs_email' title='' type='submit' value='Subscribe '/>
</div>
</form></div>
</div>
</div><div style='clear:both;'/><br/>
<!-- Rivai Silaban | BLOG DESIGN Permalink end -->

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 MERAH silahkan ganti dengan link anda sesuai dengan yang tertulis di kode tersebut.

Kesimpulan

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.

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
14 Mei 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 : 1:33 PM

16 comments :

  1. thx atas tutornya gan...

    ReplyDelete
  2. @Anonymous
    sama sama gan makasih atas kunjungannya...

    ReplyDelete
  3. Mas mau tanya bagaimana caranya agar gambar atau foto di sebelah kiri yang muncul di permalink itu menyesuaikan dengan artikel yang sedang dibaca oleh pengunjung? Istilahnya fotonya berubah-ubah misalnya artikel tentang handphone dan ada gambar handphone, maka gambar handphone yang muncul.

    ReplyDelete
  4. @Adi..
    terimakasih atas pertanyaannya...
    sistem yang dipake untuk itu harus memakai script lagi, coba lihat contoh seperti template online store, biasanya template itu pasti memake sistem itu, tapi saya akan mencoba script untuk itu.. thx untuk kunjungannya.

    ReplyDelete
  5. Thanks Yah atas Infonya Semoga Bermanfaat ditunggu kunjungan baliknjya !

    ReplyDelete
  6. bagus baget mas,,tapi saya agak kesulitan

    ReplyDelete
  7. waduh , pusing banget.. Maksudnya yg ini Apa ya? "Untuk script post snippet silahkan pastekan kode dibawah ini tepat dibawah kode < data : post . body / >"

    ReplyDelete
    Replies
    1. script post snippet itu hanya memakai snippet jadi tidak ada sistem read morenya, gan.. ( jump link )

      Delete
  8. meskipun susah , tapi berhasill.. , oh ya , cara buat tombol di Pesan Komentar gmna ya? yang "Konversi Kode" "Form Diskusi" "Join To Blog" ?!

    ReplyDelete
  9. artikel yang sangat membantu gan terimakasih insyaAlloh rutin berkunjung --langsung bookmark--

    ReplyDelete
  10. Makasih mas tutor nya.jadi lebih keren nih permalink nya

    ReplyDelete
  11. Terimakasih gan atas tutorianya,. sangat membantu sekali buat saya,. bila ada kesempatan mampir juga ke Blog saya ini www.jawacyber.com,. Jawa Cyber

    ReplyDelete

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