Blog ini membahas tentang berbagai tips dan tutorial blogspot untuk mengoptimalkan halaman blog di search engine ( SEO ), Validasi HTML 5 , CSS 3, Script dan tehnik kontribusi dalam tag tag html begitu juga dengan XML.
Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...
Rivai Silaban - Blog Design
Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya.
Social media slideshare - Tutorial cara membuat social media slideshare di blogspot. Tampilan social media slideshare sangat menarik dan memiliki code yang ringan, social media slideshare sangat cocok buat para blogger mania yang membutuhkan desain desain social share yang unik dan menarik. Untuk melihat tampilan social media slideshare silahkan klik demo dibawah ini kemudian lihat tampilan social media slideshare pada halaman demo, bila anda tertarik untuk memasang social media slideshare di blogspot anda silahkan simak tutorial dibawah ini..
Demo
Code CSS here..
/************************** Name : social media slideshare Update : Selasa 25 February 2014 Design : Rivai Silaban Site : www.rivai.org Publish : www.ideblogspot.com **************************/ #socialbdrssliding a{font-family: Arial;width: 40px;transition:width 0.4s;-webkit-transition:width 0.4s;-moz-transition:width 0.4s;overflow: hidden; }#socialbdrssliding a:hover{width: 100px;overflow: hidden; }#socialbdrssliding {position: relative;height: 40px;width: 300px; }#socialbdrssliding ul { margin: 0; } .titles {color: #990000;} #socialbdrssliding li, #socialbdrssliding li a, #socialbdrssliding li .bdrs-thumb, #socialbdrssliding li .bdrs-title {display: block;position: relative;width: 40px;height: 40px; }#socialbdrssliding li, #socialbdrssliding li a, #socialbdrssliding li .bdrs-title {float: left;width: auto;overflow: hidden; }#socialbdrssliding li a {width: 40px;line-height: 40px;color: #E9E9E9;font-size: 11px;font-weight: bold;text-shadow: 1px 2px 2px #000; text-decoration: none;cursor: default; }#socialbdrssliding li .bdrs-thumb { float: left; } #socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; } #socialbdrssliding li.bdrs-facebook .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtLbhc0o1REVHFcMlYTckwV8XXBQsI-rarSpxK_PO5_D9uW7BlBI0KMk1jxMHI5mbiOwjyRVmo2w1Cciks1NyWeMZG35vg5AvD-BTEkUhxR9YbZbdQswwYJ_6C-oNuq67mFKvEgodzgJI/s1600/FACEBOOK.png") no-repeat 0 -40px; } #socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; } #socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMKxsyTGWOEYn58zR5jU17EghYLwEsAAgRGimdfLzI_bEJ1ZYQcRtwBX4fA6lfqNHhfH-BormrGQ9K7YxX_Me9vUrJZ1xsmD0DH0UwEVIZ1e6jxmvyuRKF2ox_2tpzQvrt7nCk3RT0Mqw/s1600/googleplus.png") no-repeat 0 -40px; } #socialbdrssliding li.bdrs-twitter a { background-color: #3CF; } #socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgekUIZbGCDNCZWwQOU19PI3sa17vrWKJay0KcDmcQqrCdPe_ZzuFCd88_gUS5Cb1oArLRMFhGs2PhhO0RYRqz-qWQyKjsNu8bibR5AbmfMs7lLEAlBWilrFGxdHl1-qDHH9Qrn5vnWAfk/s1600/TWITTER.png") no-repeat 0 -40px; } #socialbdrssliding li.bdrs-rss a { background-color: #F88F16; } #socialbdrssliding li.bdrs-rss .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2OCvpXjQT0wSkYoYerAZa5OBzS5Niipw9zvwN_z6OG4F_85vO831J1VhSkHcOSyolVDZE1bHVp7OCitmqStniKzm8x8bTWy_jQyGfCqMeCt1DtWOrh-PvznKNxA_T05qe-veVc__F7zQ/s1600/rssbd.png") no-repeat 0 -40px; } #socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; } #socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioucRy3QURm7ZXwbYrdPb5z_c-mGRMVHxnB7b6kKTMOYjSU0GLARZbf0zA9zoS0FvGdflSn0unJgasQ9uF8lKp4I8uPhC6E1xEJYjlTYjRjxv5pId2eUxsQFvr_ZTWdNWmXZWNoDppt3s/s1600/youtube.png") no-repeat 0 -40px; } #socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {background-color:#666;} /* social media slideshare end code */
Code HTML here..
<!-- social media slideshare - Ide Blogspot --> <div id="socialbdrssliding"><div class="titles">Share article width social media</div><ul><li class="bdrs-gplus"><a expr:href='"https://plus.google.com/share?url=" + data:post.url' onClick="window.open (this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;" rel="nofollow" title="Share this on Gplus"><div class="bdrs-thumb"></div><div class="bdrs-title">Gplus</div></a></li> <li class="bdrs-facebook"><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' onClick="window.open (this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;" rel='nofollow' target='_blank' title='Share this on facebook'><div class="bdrs-thumb"></div><div class="bdrs-title">Facebook</div></a></li> <li class="bdrs-twitter"><a expr:href='"http://twitter.com/share?url=" + data:post.url' onClick="window.open (this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;" rel='nofollow' target='_blank' title='Share this on twitter'><div class="bdrs-thumb"></div><div class="bdrs-title">Twitter</div></a></li><li class="bdrs-rss"><a href="http://feeds.feedburner.com/idblogspot" target="_blank" rel="nofollow" title="rss feed"><div class="bdrs-thumb"></div><div class="bdrs-title">RSS</div></a></li> <li class="bdrs-youtube"><a href="https://www.youtube.com/channel/UCxLE683fC-YfQnRRWaPtWjQ" target="_blank" rel="nofollow" title="youtube"><div class="bdrs-thumb"></div><div class="bdrs-title">YouTube</div></a></li></ul></div> <!-- social media slideshare - Ide Blogspot -->
Code diatas merupakan code CSS dan code tag HTML dari widget social media slideshare yang mungkin sudah anda lihat tampilannya pada halaman demonya, Buat teman teman yang masih belajar blogging sama seperti saya silahkan klik link tata cara pemasangan widget social media slideshare....
Share blogspot style - cara memasang widget share blogspot style atau share blogspot style ini tergolong mudah bahkan buat para blogger baru kayak saya juga pasti bisa. Widget share blogspot style ini memiliki tampilan yang unik, dan sangat jarang anda temui tampilan share blogspot style seperti ini. Buat para teman teman blogger yang menginginkan tampilan share yang unik seperti tampilan widget share blogspot style ini silahkan lihat demonya melalui link demo dibawah ini dekatkan cursor anda pada tulisannya., bila anda tertarik memasang share blogspot style ini di halaman blogspot anda silahkan simak tutorial dibawah ini, langsung saja menuju TKP.
Code diatas merupakan code CSS dan code tag HTML dari widget share blogspot style yang mungkin sudah anda lihat tampilannya pada halaman demonya, Buat teman teman yang masih belajar blogging sama kayak saya silahkan kunjungi halaman tata cara pemasangan widget share blogspot style..
Widget share dengan efek sliding up, merupakan widget share elegan style, cara membuat widget share ini pun sudah di desain agar lebih mudah anda pasang pada halaman blog kesayangan anda., tampilan yang menarik dan elegan serta memiliki struktur kode yang ringan dan ditambah satu widget subscribe yang menyempurnakan widget share ini menjadi suatu widget share yang handal untuk keperluan blogging. Bila anda berkenan silahkan klik demonya, tulisan " Widget share demo " dan uji kemanpuan widget share ini, jangan lupa isimak penjelasan cara membuat widget share ini dihalaman blog, langsung saja menuju TKP:
Demo
Referensi Artikel
Widget share style efect
Widget share hover sliding up
Cara membuat widget share image hover
Widget Floating share
Widget fermalink with social share
Jquery sliding tab with share sicial media
Related Post with social share
Widget social share with subscribe
Widget social share image sliding
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin>tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
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'/>
Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
Copy Code HTML dibawah ini, paste di bawah code <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda seperti memasang wiget Relate post.
Save template anda dan lihat hasilnya, selamat berkarya.
<!-- Rivai Silaban | BLOG DESIGN CODE SHARE start -->
<div id="BDRS-widget"> <div style="margin:13px 0 -10px 5px; font-family:verdana; font-size:10px; font-weight:bold; text-shadow: -1px -1px 1px #fff; color:#000">Share : </div><div class="social-bookmarks"><ul>
<li class="twitter"><a expr:href='"http://twitter.com/share?url=" + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel='nofollow' target='_blank' title='Share this on twitter'>twitter</a></li>
<li class="googleplus"><a expr:href='"https://plus.google.com/share?url=" + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Gplus">googleplus</a></li>
<li class="facebook"><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;" rel='nofollow' target='_blank' title='Share this on facebook'>facebook</a></li>
<li class="digg"><a expr:href='"http://digg.com/submit?url=" + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Digg">digg</a></li>
<li class="reddit"><a expr:href='"http://digg.com/submit?url=" + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Reddit">reddit</a></li>
<li class="rss"><a target="_blank" href="URL RSS ANDA " title="rss">rss</a></li>
</ul></div>
<div style="text-align:right; margin-top:-35px;margin-right:5px;"><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onSubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri= ID FEEDBUENER ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input class="BDmail" name="email" placeholder="Enter email here.." type="text" /><input class="BD_tumb" value="Subscribe" type="submit" /><input name="uri" value=" ID FEEDBUENER" type="hidden" /><input name="loc" value="en_US" type="hidden" /></form></div></div>
<!-- Rivai Silaban | BLOG DESIGN CODE SHARE End -->
Kesimpulan
Widget share dengan efect sliding menjai suatu tampilan yang menarik untuk widget share ini. Lihat kode HTML warna merah, ganti dengan link anda sesuai dengan yang tertulis..
Bila anda mengalami masalah dalam pemasangan widget share hover sliding up ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.
Widget share for Blogspot
Sabtu, 19 Oktober 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
12:38 PM
|
17
komentar
Widget share dengan sistem slide hover media share ini memiliki tampilan yang menarik, cara membuat widget profil share dengan efect slide hover backround tranparant ini sangat simpel sebab saya akan menjelaskan secara detail tutorial pemasangannya untuk halaman blog kesayangan anda. Bila anda suka dengan widget profil share ini, silahkan simak penjelasan tutorial dibawah ini, sekalian lihat demonya pada icon DEMO dibawah ini, langsung saja menuju TKP.
Demo
Referensi Artikel
Widget share hover sliding Up
Cara membuat widget share image hover
Widget Floating share
Widget fermalink with social share
Jquery sliding tab with share sicial media
Related Post with social share
Widget social share with subscribe
Widget social share image sliding
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin>tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
Pada Edit HTML template anda silahkan cari kode </head>
Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
Kode Jquery ini mempunyai lisensi masing masing, anda tidak diperbolehkan untuk mengeditnya.
Bila template anda sudah memiliki script JQUERY versi diatas ( 1.4.2 ) kode yang berwarna biru tidak usah di copy, sebab bila ada 2 script Jquery pada satu template akan mengakibatkan error.
<!-- Rivai Silaban | BLOG DESIGN script share start -->
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'/>
Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
Copy Code HTML dibawah ini, paste di bawah code <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda seperti memasang wiget Relate post.
Save template anda dan lihat hasilnya, selamat berkarya.
<!-- Rivai Silaban | BLOG DESIGN CODE SHARE start -->
<div class="bdbox rivcap">
<div><span >
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBLKAguWnUy5g089y9_93TxXnsMOaW01fL5EdHCAS87bygvKR54w-jQHAikltjtwjb0DdqqdXoj-0Cn-EheOSZm8zW3PeShahwl28aoyX1piUCJurh-AMJbag345TxD765s1o4SLb6bo/h120/rivai.jpg' alt='Rivai Silaban' title="my image"/>
</span><span style="width:80%; float:right; text-align:left; padding:5px 5px 5px 15px;">Salam Bloger...<br/>Terimakasih atas kunjungannya, semoga artikel ini dapat membantu anda, Bila anda menyukai artikel yang terposting silahkan share melalui media share dibawah ini.
<br/>
<br/>
Share with social media: <strong><em>Google plus</em></strong> - <strong><em>Facebook</em></strong> - T<strong><em>witter</em> </strong></span></div>
<br/>
<div class="rivcov bdrsbox">
<h3>Share This Article</h3>
<p>Share artikel postingan ini melalui social media dibawah ini<br/>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' onClick="window.open(this.href,'sharer',
'toolbar=0,status=0,width=626,height=436');
return true;" rel="nofollow"
title="Share this on Gplus">Google Plus</a> | <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url'
onClick="window.open(this.href,'sharer',
'toolbar=0,status=0,width=626,height=436');
return false;" rel='nofollow' target='_blank' title='Share this on facebook'>
Facebook Share</a> |
<a expr:href='"http://twitter.com/share?url=" + data:post.url' onClick="window.open(this.href,'sharer',
'toolbar=0,status=0,width=626,height=436');
return false;" rel='nofollow' target='_blank' title='Share this on twitter'>
Twitter Share</a> </p>
</div>
</div>
<!-- Rivai Silaban | BLOG DESIGN CODE SHARE End -->
Keterangan Code
Untuk kode CSS silahkan anda edit sesuai dengan kebutuhan anda, sesuaikan ukuran lebar dengan main template anda ukuran widget 580px.
Untuk tag Htmlnya silahkan ganti kode tulisan warna HIJAU dengan text anda.
Tulisan kode warna KUNING silahkan ganti dengan link gambar anda
Kesimpulan
Widget profil share dengan efect hover slide up background tranparant ini memiliki tampilan yang menarik, dan valid HTML 5 dan CSS 3 serta kode yang ringan dan penulisan tag html yang SEO Friendly.
Bila anda mengalami masalah dalam pemasangan widget share hover sliding up ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.
Widget profil share
Senin, 07 Oktober 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
2:03 PM
|
9
komentar
Widget share dengan sistem hover sliding up dapat anda pasang di halaman blog anda, cara membuat widget share hover sliding up ini sangat praktis tidak terlalu menguras pikiran sebab saya akan memberikan penjelasan tentang pemasangannya secara detail buat anda. Postingan kali ini terinspirasi oleh seorang teman lama yang ingin memiliki widget share yang tampilannya menarik, sehingga saya membuatkan kode widget ini. Setelah beliau sudah mendapatkan kodenya sehingga saya memposting artikel ini buat para teman teman yang membutuhkan. Untuk mengetahui cara pemasangannya pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini, jangan lupa klik DEMO untuk melihat tampilan aslinya dan gambar yang berada dibawah ini merupakan screenshot widget share hover sliding up yang akan kita buat, oke langsung saja menuju TKP :
Demo
Referensi Artikel
Cara membuat widget share image hover
Widget Floating share
Widget fermalink with social share
Jquery sliding tab with share sicial media
Related Post with social share
Widget social share with subscribe
Widget social share image sliding
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin>tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
Pada Edit HTML template anda silahkan cari kode </head>
Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
Kode Jquery ini mempunyai lisensi masing masing, anda tidak diperbolehkan untuk mengeditnya.
Bila template anda sudah memiliki script JQUERY versi diatas ( 1.4.2 ) kode yang berwarna biru tidak usah di copy, sebab bila ada 2 script Jquery pada satu template akan mengakibatkan error.
<!-- Rivai Silaban | BLOG DESIGN script share start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/33130177210/jquery-flip.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script share End -->
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'/>
Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
Copy Code HTML dibawah ini, paste di bawah code <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda seperti memasang wiget Relate post.
Save template anda dan lihat hasilnya, selamat berkarya.
Widget share hover sliding up ini memiliki tampilan yang menarik, dan valid HTML 5 dan CSS 3 serta koe yang ringan dan penulisan tag html yang SEO Friendly.
Bila anda mengalami masalah dalam pemasangan widget share hover sliding up ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.
Widget share hover sliding up
Jumat, 05 Oktober 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
10:11 PM
|
8
komentar
Widget share dengan sistem image sliding ini tergolong unik dan elegan, cara membuat widget share image sliding ini sudah saya kemas dalam suatu tutorial yang mudah untuk anda simak dan terapkan di halaman blog kesayangan anda. Widget share image sliding ini valid html 5 serta menganut sistem penulisan tag yang SEO Friendly. Oke langsung saja menuju TKP klik icon demo dibawah ini , lihat bagian social share nya. Dekatkan cursor anda dan lihat hasilnya. Bila anda menginginkan tampilan widget share dalam tampilan lainnya silahkan kunjungi referensi artikel dibawah, selamat mencoba.
Demo
Referensi Artikel
Cara membuat widget share image hover
Widget Floating share
Widget fermalink with social share
Jquery sliding tab with share sicial media
Related Post with social share
Widget social share with subscribe
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin>tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
Pada Edit HTML template anda silahkan cari kode </head>
Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
Kode Jquery ini mempunyai lisensi masing masing, anda tidak diperbolehkan untuk mengeditnya.
Bila template anda sudah memiliki script JQUERY versi diatas ( 1.4.2 ) kode yang berwarna biru tidak usah di copy, sebab bila ada 2 script Jquery pada satu template akan mengakibatkan error.
<!-- Rivai Silaban | BLOG DESIGN script share start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/0233197596/jquery-share.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.BDRSSHARE').BDRSSHARE({
max : 205,
spacing : 10
});
});
</script>
<!-- Rivai Silaban | BLOG DESIGN script share End -->
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'/>
Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
Copy Code HTML dibawah ini, paste di bawah code <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda seperti memasang wiget Relate post.
Save template anda dan lihat hasilnya, selamat berkreatif.
Widget share image sliding ini berkesan lebih elegan dengan tampilan hover image slider dan icon gambar 2 dimensi membuat tampilan widget share ini sangat keren untuk halaman sebuah blog.
Bila anda mengalami masalah dalam pemasangan widget share image hover ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.
Wiget Share Image Sliding
Kamis, 26 September 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
1:52 PM
|
2
komentar
Widget share dengan sistem image hover ini sangat unik, cara membuat widget share image hover ini juga masih tergolong simple sehingga para bloger pemula sekali pun mampu untuk memasangnya dihalaman blog kesayangannya. Tampilan yang simple dan lebih keren menjadikan widget share image hover ini pilihat buat para bloger mania untuk tetap menjaga design tampilan halaman blognya lebih menarik dimata para pengunjungnya. Widget share image hover ini valid html 5 dan CSS 3 serta menganut sistem penulisan tag yang SEO Friendly. Oke langsung saja menuju TKP klik icon demo dibawah ini , lihat bagian social share dengan tulisan " Join Us With Social Media ". Dekatkan cursor anda dan lihat hasilnya. Bila anda menginginkan tampilan widget related post dalam tampilan lainnya silahkan kunjungi referensi artikel dibawah, selamat mencoba.
Demo
Referensi Artikel
Cara membuat related post with email subscribe
Widget related post minimalis
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin>tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
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'/>
Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
Copy Code HTML dibawah ini, paste di bawah code <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda seperti memasang wiget Relate post.
Save template anda dan lihat hasilnya, selamat berkreatif.
Widget share image hover ini sangat bagus anda pasang di halaman blog anda selain untuk mempercantik tampilan dapat juga meningkatkan trafik pengunjung halaman blog anda melalui berbagai sosial media.. Widget share image hover ini valid html 5 dan CSS 3.
Bila anda mengalami masalah dalam pemasangan widget share image hover ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.
Wiget Share Image Hover
Selasa, 17 September 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
11:20 AM
|
2
komentar
Jejaringan sosial yang satu ini sangat digemari banyak orang dan merupakan situs jejaringan sosial yang lama dan masih tetap eksis didunia jejaringan sosial. Jejaringan sosial yang satu ini atau biasa disebut engan " TWITTER " atau banyak juga yang bilang siburung twit ini tetap mempertahankan nama mereka, walaupun HTML 5 masih tergolong baru ikut meramaikan HTML dari versi sebelumnya. alam versi script yang lama memang masih belum valid HTML 5 tapi seiring dengan munculnya HTML 5 sang pencipta ataupun Team dari "TWITTER " ini secara cepat untuk memperbaharui code mereka. Code yang sudah valid HTML 5 ini dengan geratis dan seenaknya dapat kita miliki, dan saya menganggap ini hal yang baik untuk ditempatkam diblog anda, sebab lodingnya juga cepat, dan simpel. Dalam postingan saya "Cara membuat tombol share twitter di blog valid dengan HTML 5" ini akan memandu anda dengan cepat agar script share twitter yang akan anda buat diblog kesayangan anda tetap valid dengan HTML 5, Oke langsung aja ke TKP.
Login to blog >> klik Template >> klik Edit HTML
Kunjungi situs >>>https://twitter.com/about/resources/buttons#tweet
Atur parameternya sesuai dengan kehendak anda.
Screen Shoot
Lihat gambar 0.2 diatas untuk settingan, dan sesuaikan dengan selera anda.
NB : Silahkan isi semua kolom yang ada dan sesuaikan dengan tampilan blog anda. Bila halaman blog anda sudah menganut template HTML 5 silahkan cek kevalidtannya, silahkan kunjungi halaman situs ini >>>http://validator.w3.org
Di poskan oleh :
Unknown
| Dipublish pada :
1:54 AM
|
7
komentar
