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.
Footer style ide blogspot v1 - footer style ide blogspot v1 merupakan desain footer dari Ide Blogspot untuk platform Blogspot. Tutorial cara membuat footer style ide blogspot v1 akan saya bahas dalam postingan kali ini. Untuk melihat bagaimana tampilan footer style ide blogspot v1 ini silahkan klik demo dibawah kemudian pada halaman blog PARBADA ( halaman demo ) silahkan lihat bagian footernya, nah bila anda tertarik silahkan simak tutorial dibawah ini...
Demo
Install code footer style ide blogspot v1
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin> ataupun code </style> pada template blogspot anda.
Kemudian Cari code yang bersangkutan dengan code CSS " Footer " kemudian hapus sampai semua code CSS Footer yang lama benar benar tidak ada lagi. Perlu anda pahami bahwa tutorial ini mengganti semua element ataupun tampilan footer blogspot anda, jadi hal pertama yang anda lakukan adalah menghapus semua code yang bersangkutan dengan footer blog anda sebab kita akan mengganti dengan style footer yang baru yaitu footer style ide blogspot v1
Setelah semua code CSS yang bersangkutan dengan footer template anda terhapus kemudian copy code CSS footer style ide blogspot v1 dibawah ini lalu pastekan sebelum code ]]></b:skin> ataupun code </style> kemudiansave template anda.
Setelah anda memasang CSS footer style ide blogspot v1 ini pada template anda, saatnya kita menampilkan kolom layout footer style ide blogspot v1 ini dengan menggunakan kode html dibawah. Untuk memasang code html footer style ide blogspot v1 ini anda juga perlu menghapus semua code html yang bersangkutan dengan code html Footer template anda. Hapus semua code footer template anda mulai dari code footer tag pembuka seperti contoh code <div id='footer-wrapper'> s/d </div> code footer tag penutup template anda. Mungkin dibeberapa code template credit link template tidak satu element dengan footer template, jadi untuk sementara silahkan hapus juga semua code credit linknya sebab kita sudah menyertakan code credit linknya yang nantinya akan anda rubah linknya sehingga seperti semula. Setelah semua code html footer template blog anda sudah bersih atau dihapus, silahkan copy code tag html footer style ide blogspot v1 dibawah ini dan pastekan kembali ketempat semula code footer template blogspot anda yang telah anda hapus sebelumnya. Save template anda, kemudian lihat hasilnya pada bagian " Tata Letak " dasbord template anda.
<div id='footer-wrapper'> <!-- footer style ide blogspot v1 start --> <div class='bagian'> <div class='idekiri'> <!-- footer kiri ide Blogspot --> <b:section class='footer' id='footer-kiri' showaddelement='yes'> <b:widget id='HTML55' locked='false' title='foter kiri' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h3><data:title/></h3> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:widget> </b:section> </div> <div class='idekanan'> <!-- footer kanan ide Blogspot --> <b:section class='footer' id='footer-kanan' showaddelement='yes'> <b:widget id='HTML66' locked='false' title='footer kanan' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h3><data:title/></h3> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:widget> </b:section> </div> </div><div style='clear:both'/> <div class='ide-blogspot'> <!-- footer 1 ide Blogspot --> <b:section class='footer' id='footer1' showaddelement='yes'> <b:widget id='HTML77' locked='false' title='footer 01' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h3><data:title/></h3> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:widget> </b:section> <!-- footer 2 ide Blogspot --> <b:section class='footer' id='footer2' showaddelement='yes'> <b:widget id='HTML88' locked='false' title='footer 02' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h3><data:title/></h3> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:widget> </b:section> <!-- footer 3 ide Blogspot --> <b:section class='footer' id='footer3' showaddelement='yes'> <b:widget id='HTML99' locked='false' title='footer 03' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h3><data:title/></h3> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:widget> </b:section> </div><div style='clear:both'/> <!-- Footer Credit Link ide blogspot --> <div class='credit-link'> Copyright © 2014 <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' rel='nofollow'><data:blog.title/></a> | Template by : <a href='http://www.ideblogspot.com' target='_blank' title='Template Owner'> Rivai Silaban </a> </div><!-- footer style ide blogspot v1 start --> </div><div style='clear:both;'/>
Untuk mendapatkan code isi dari widget footer style ide blogspot v1 dan informasi pemasangan widgetnya silahkan kunjungi link halaman dibawah ini.. Sumber : http://www.ideblogspot.com/2014/03/footer-style-ide-blogspot-v1.html
Di poskan oleh :
Unknown
| Dipublish pada :
6:06 PM
|
2
komentar
Widget social media blogspot ini lebih keren, cara membuat widget social media blogspot ini lebih simpel dan tampilan yang lebih menarik. Widget social media blogspot pada postingan kali ini memiliki style dengan tampilan tombol yang memakai CSS shadow dan in shadow sehingga lebih menarik . Widget social media blogspot ini terinspirasi dari plugsin blog wordpress social media tahun ini. buat teman teman blogger yang ingin memasang widget social media blogspot ini silahkan simak penjelasan di bawah ini, jangan lupa klik demo untuk melihat tampilan widget social media blogspot ini, lihat demo dengan judul widget social media blogspot. Langsung saja menuju TKP.
Demo
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.
Code warna MERAH ganti dengan link social media anda.
Lebar dari widget social media ini 300px, silahkan anda edit CSSnya sesuai dengan halaman blog anda.
Kesimpulan
Widget social media blogspot dengan tampilan elegan dan menarik akan menambah kesan tampilan halaman blog anda semakin berkesan elegan tanpa harus memiliki kemahiran luarbiasa untuk mengedit kode kode htmlnya.
Bila teman teman mengalami kesulitan dalam memasang kode widget ini atau mendapatkan kode yang Error, silahkan hubungi saya atau share bersama saya pada form komentar dibawah. Pergunakan semua fasilitas di halaman blog ini untuk mempermudah anda. Semoga postingan ini bermanfaat buat teman teman.
Widget social media blogspot
Sabtu, 02 November 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
12:05 AM
|
11
komentar
Widget social media merupakan salah satu andalan blogger meningkatkan trafik pengunjung, cara membuat widget social media pada postingan kali ini sangat simple dan saya rasa para blogger pemula seperti saya inipun dapat memasangnya di halaman blog kesayangannya contohnya, saya saja bisa apalagi anda. Widget social media dengan sentuhan data hint yang dimoifikasi kedalam bentuk tooltip merupakan andalan dari widget social media yang saya posting kali ini. Efect transition menambah kesan elegan pada tampilan widget social media ini. Untuk melihat bagaimana tampilan widget ini silahkan klik demo dibawah dan jangan lupa ditest demonya. Bila anda tertarik dengan widget social media ini silahkan simak penjelasan dibawah ini, langsung saja menuju TKP.
Demo
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.
Code warna MERAH ganti dengan link social media anda.
Code warna BIRU merupakan hint decimal dari social media, silahkan anda sesuaikan dengan hint social media anda
Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda, semoga bermanfaat.
Kesimpulan
Widget social media dengan tampilan elegan dan menarik akan menambah kesan tampilan halaman blog anda semakin berkesan elegan tampa harus memiliki kemahiran luarbiasa untuk mengedit kode kode htmlnya.
Bila teman teman mengalami kesulitan dalam memasang kode widget ini atau mendapatkan kode yang Error, silahkan hubungi saya atau share bersama saya pada form komentar dibawah. Semoga postingan ini bermanfaat buat teman teman.
Widget social media
Jumat, 17 Oktober 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
11:31 AM
|
8
komentar
Cara membuat widget spoiler background style ini tidak rumit, widget spoiler background style ini memiliki tampilan yang menarik, dan anda layak untuk mencobanya. Widget spoiler background style ini valid HTML 5 dan memiliki kode script yang ringan sehingga tidak mempengaruhi loading halaman blog kesayangan anda. Buat para bloger mania yang menyajikan berbagai khususnya berbagai kode pada halaman blog kesayangannya pemasangan widget spoiler background style ini sangat cocok. Bila anda tertarik dengan widget spoiler background style silahkan simak penjelasan dibawah ini, jangan lupa lihat DEMO pada spoiler " CODE CSS " dibawah ini langsung saja menuju TKP.
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.
Keterangan :Tampilan Spoiler diatas ini merupakan DEMO dari tutorial kali ini, hanya tombol spoiler yang berbeda, silahkan anda edit CSSnya sesuai dengan selera atau warna tampilan template anda .
Untuk pemasangan code tag SPOILER ini tergantung dengan kebutuhan halaman blog anda,
Untuk memasang dihalaman postingan artikel , anda hanya memasukkan SPOILER code CSS dan tag html dibawah ini pada artikel yang anda posting.
Masuk ke " Post "
Kemudian buat " Entri baru "
Untuk menyematkan code dibawah ini pada postingan anda harus klik " HTML " ( bukan "compose " ) Setelah anda klik " HTML " masukkan code html dibawah ini ditempat yang anda inginkan, kemudian ganti tulisan warna BIRU pada kode yang ada didalam spoiler dibawah dengan tulisan kode html , script atau CSS anda,Untuk HTML atau Scriptnya silahkan konvers dulu.
Setelah selesai lihat dulu " Pratinjau " sebelum anda save untuk melihat kesempurnaan pemasangan spoiler tersebut.
Setelah benar benar sudah sempurna silahkan klik " publikasikan "
Tulisan kode warna BIRU Merupakan isi dari spoiler, baik itu berupa sebuah code ataupun tulisan.
Tulisan warna MERAH merupakan link dari background spoiler tersebut, bila anda ingin mengganti backgroundnya sesuai selera anda, silahkan ganti dengan link gambar pada tabel link gambar diatas.
Kesimpulan
Widget Spoiler background style ini kebanyakan digunakan hanya untuk keperluan tutorial yang bersangkutan dengan kode kode html maupun script.
Bila teman teman mengalami masalah dalam pemasangan wiget ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini.
Widget Spoiler background style
Jumat, 11 Oktober 2013
By : Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
11:05 AM
|
2
komentar
Widget kategori atau label dengan efek floating atau yang saya sebut dengan Widget kategori floating, cara membuat widget kategori floating ini simpel dan tidak rumit. Tampilan widget kategori floating sangat menarik dan elegan egan sistem widget yang melayang mengikuti arah mouse bergerak ke atas dan kebawah. Widget kategori floating cocok untuk blog kesayangan anda, disamping tampilan yang menarik, widget kategori floating ini valid html 5 dan CSS 3 serta menganut sistem penulisan tag html yang SEO Friendly begitu juga dengan kode dan script yang ringan.Untuk mengetahui cara pemasangannya pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini, jangan lupa klik DEMO untuk melihat tampilan aslinya, sekalian cek artikel yang bersangkutan dengan widget kategori floating melalui link dibawah ini, oke langsung saja menuju TKP :
Demo
Referensi Artikel
Cara membuat label di blogspot
Widget label style bubble blue
Widget label Drop Down style
Widget label post
Widget label animasi style
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.
<script type="text/javascript" src="http://yourjavascript.com/6218102309/jquery-easing-1-3.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/9595001136/category.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script End -->
Install tag html
Setelah kode CSSnya sudah terpasang kini saatnya kita akan memasukkan kode tag htmlnya.
Copy code dibawah ini lalu pastekan dibawah kode " <body> "
Pada halaman blog pasti mempunyai "<body>" jadi anda pastekan kode dibawah ini tepat dibawah kode<body>blog anda.
Save halaman anda dan lihat hasilnya, semoga bermanfaat.
<!-- Rivai Silaban | BLOG DESIGN CODE start -->
<div id="bdrs_flitem">
<div class="title">Category</div>
<div class="bdrsitem">
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 1</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 2</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 3</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 4</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 5</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 6</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 7</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 8</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 9</a>
<a href="#" target="_blank" title="title menu" rel="nofollow" class="bdrs-list">Kategori list 10</a>
</div>
</div>
<!-- Rivai Silaban | BLOG DESIGN CODE End -->
Keterangan Code
Tulisan kode warna MERAH ganti dengan Link kategori anda.
Kode tulisan warna BIRU ganti dengan nama link anda, dan untuk [ title="..." ] samakan saja tulisannya dengan nama link anda, agar lebih abdol atau SEO Friendly.
Untuk tulisan kode warna HIJAU ganti dengan judul widget anda.
Silahkan edit CSSnya untuk menyesuaikan tampilannya terhadap halaman blog anda.
Kesimpulan
Widget kategori floating ini memiliki tampilan yang menarik dengan melayangnya widget tersebut mengikuti arah mouse bergerak keatas dan kebawah, 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 kategori floating
Rabu, 09 Oktober 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
10:06 AM
|
0
komentar
Fitur link diatas postingan blog berguna sebagai fasilitas mempermudah pengunjung, cara membuat widget link di atas postingan blog selain menambah design blog menjadi elegan dapat juga digunakan sebagai fasilitas widget pendukung untuk melengkapi fasilitas wiget blog lainnya agar pengunjung halaman blog lebih memahami apa isi dari blog tersebut. Fitur widget link diatas postingan blog ini tergolong jarang dipasang di halaman blog, tapi buat suatu website hal ini sudah biasa kita lihat. Postingan kali ini terinspirasi oleh seorang teman lama yang membutuhkan suatu widget link, setelah beliau melihat postingan artikel saya kemarin. Oke untuk melihat tampilannya silahkan klik DEMO dibawah ini dan lihat bagian link yang berada tepat dibawah menu halaman demo tersebut. Untuk mengetahui cara pemasangannya di halaman blog kesayangan anda silahkan simak penjelasan dibawah ini, langsung saja menuju TKP.
Demo
Widget link yang akan kita buat ini memerlukan suatu tempat di layout halaman blog, jadi ada baiknya kita membuat kolom layoutnya dulu untuk tempat widget yang akan kita sematkan kode nantinya.
Untuk membuat atau menambah kolom layout diatas postingan halaman blog silahkan kunjungi dan pasang kolom layoutnya klik : Cara membuat 4 kolom layout di atas postingan blog, setelah anda pasang kita akan melanjutkannya ketahap selanjutnya dan silahkan simak tutorial dibawah ini.
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code </head>
Copy Code script CSS dibawah ini, pastekan tepat diatas code </head> yang 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.
Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di atas postingan halaman blog seperti 4 kolom layout yang telah anda pasang sebelumnya.
Silahkan pilih " Tata Letak " pada dasbor blog anda.
klik "Edit " ( Anda hanya mengklik edit pada gadget " HTML / Javascript " sebab pada tutorial membuat kolom layout tersebut saya sudah memasangkan gadget " HTML / Javascript " 4 kolom, silahkan buka satu persatu, dan masukkan kode di spoiler yang ada dibawah ini kedalam satu gadget, ulagi lagi hal tersebut sampai 4 gadget " HTML / Javascript " terisi semua seperti pada demo tutorial ini. )
Setelah muncul halaman " HTML/JavaScript ".
Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
Edit script dan save .
<!-- BDRS KODE LINK start -->
<div class="bdlink-main">
<div class="bdlabel-main" >
<h2>JUDUL LINK </h2>
<ul>
<li><a href='LINK ANDA' target='_blank' title='LINK SATU'> LINK SATU
</a></li>
<li><a href='LINK ANDA' target='_blank' title='LINK DUA '> LINK DUA
</a></li>
<li><a href='LINK ANDA' target='_blank' title='LINK TIGA '> LINK TIGA
</a></li>
</ul>
</div></div>
<!-- BDRS KODE LINK End -->
Keterangan Code
Setelah anda memasang kolom layoutnya, kemudian anda memasang kode linknya kedalam widget yang telah anda pasang sebelumnya.
Tulisan kode warna MERAH ganti dengan Link anda.
Kode tulisan warna BIRU ganti dengan nama link anda, dan untuk " title="..." " samakan saja tulisannya dengan nama link anda.
Untuk tulisan kode warna HIJAU ganti dengan judul widget anda.
Silahkan edit CSSnya untuk menyesuaikan tampilannya terhadap halaman blog anda.
Kesimpulan
Widget link di atas postingan halaman blog ini sangat bermanfaat untuk berbagai fitur link suatu halaman, agar para pengunjung halaman blog anda semakin memahami isi dari postingan blog anda, oleh karena adanya suatu link ke halaman tertentu.
Bila anda mengalami kesulitan dalam memasang kodenya di halaman blog anda atau ada kode yang error silahkan hubungi saya atau share bersama saya melalui form Comment dibawah.
Wiget Link di atas postingan blog
Senin, 23 September 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
11:21 AM
|
4
komentar
Space iklan sangat berguna buat para bloger khususnya iklan text, cara membuat widget space iklan text dihalaman blog ini tidak terlalu rumit, sebab hanya memakai code tag html yang standart. Buat para bloger mania yang memiliki program bisnis online dan lain sebagainya, widget ini sangat cocok untuk anda. Widget space iklan text ini valih html 5 dan CSS 3, serta menganut sistem penulisan link yang SEO Friendly. Oke saatnya kita menuju TKP untuk mewujudkannya, Silahkan lihat gambar demonya, atau bila anda ingin melihat widget ini terpasang di halaman blog, silahkan anda klik icon DEMO dibawah ini dan lihat sisi sebelah kanan halaman demo.
Demo
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code </head>
Copy Code script CSS dibawah ini, pastekan tepat diatas code </head> yang 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.
Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar kanan halaman blog.
Silahkan pilih " Tata Letak " pada dasbor blog anda.
klik "Add gadget " ( Tambahkan gadget )
Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
Edit script dan save .
<!-- kode iklan tart -->
<div id="BDRSSPACE-iklantext">
<!-- kode iklan 1 -->
<div class="advertise">
<div class="text-title">
<a href="#" target="_blank" title="Link Advertise Here">Link Advertise Here</a></div>
<div class="text">Iklan text anda disini<br/>Bila anda berminat untuk memasang link iklan text diblog ini silahkan kontak admin</div>
<div class="text-link"><a href="http://rivai-silaban.blogspot.com/" target="_blank" title="link demo 1">www.demo-1.com</a></div></div>
<!-- kode iklan 2 -->
<div class="advertise">
<div class="text-title">
<a href="#" target="_blank" title="Pasang iklan murah">Pasang iklan murah</a></div>
<div class="text">Iklan text anda disini<br/>Bila anda berminat untuk memasang link iklan text diblog ini silahkan kontak admin</div>
<div class="text-link"><a href="http://rivai-silaban.blogspot.com/" target="_blank" title="link demo 2">www.demo-2.com</a></div></div>
<!-- kode iklan 3 -->
<div class="advertise">
<div class="text-title">
<a href="#" target="_blank" title="Hubungi admin untuk pasang iklan">Hubungi admin untuk pasang iklan</a></div>
<div class="text">Iklan text anda disini<br/>Bila anda berminat untuk memasang link iklan text diblog ini silahkan kontak admin</div>
<div class="text-link"><a href="http://rivai-silaban.blogspot.com/" target="_blank" title="link demo 3">www.demo-3.com</a></div></div>
<!-- kode iklan 4 -->
<div class="advertise">
<div class="text-title">
<a href="#" target="_blank" title="Rp 100.000 / bulan">Rp 100.000 / bulan</a></div>
<div class="text">Iklan text anda disini<br/>Bila anda berminat untuk memasang link iklan text diblog ini silahkan kontak admin</div>
<div class="text-link"><a href="http://rivai-silaban.blogspot.com/" target="_blank" title="link demo 4">www.demo-4.com</a></div></div>
<span class="logo">Ads Blog Design</span>
</div>
<!-- kode iklan end -->
Keterangan Code
Untuk kode CSSnya warna ungu [ Lebar = 180px dan Tinggi = 365px ] sesuaikan dengan lebar tampilan sidebar halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
Untuk tulisan warna HIJAU ganti dengan text iklan anda
Tulisan kode warna MERAH ganti dengan URL iklan anda.
Kode tulisan warna BIRU adalah judul iklan text
Kode tulisan warna KUNING ganti dengan link URL iklan anda.
Kesimpulan
Widget space iklan text ini berguna buat para bloger mania yang ingin membuat iklan text di halaman blognya, Code tag html valid HTML 5 dan CSS 3 serta memiliki sistem link yang SEO Friendly, dan code yang ringan.
kesayangan anda, bila anda mengalami masalah dalam pemasangan script, CSS dan tag HTMLnya pada halaman blog anda silahkan share bersama saya melalui form komentar dibawah ini, dengan senang hati saya akan membantu anda.
Widget Space Iklan Text
Sabtu, 21 September 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
9:19 AM
|
3
komentar
Widget permalink dipadu dengan media sosial share dan space iklan sangat cocok untuk halaman blog kesayangan anda, cara membuat widget permalink with space iklan dihalaman blog dapat anda simak tutorial dibawah ini. Buat para bloger widget yang simple dan unik serta memiliki space iklan yang selalu dicari cari untuk dipasang dihalaman blognya, Itulah alasan saya untuk memadukan 3 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 dan lihat screen shotnya pada gambar dibawah, atau lihat saja cara pemasangannya pada halaman blog klik DEMO dibawah:
Demo
Fitur Aplikasi
Link Sumber
Sosial media share
Name admin
Image admin
Join To Blog
Link Contact
Space advertise 4 kolom 120 X 120
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'/>
Untuk script post snippet silahkan pastekan kode dibawah ini tepat dibawah kode <data:post.body/>
Save template anda dan lihat hasilnya, selamat berkreatife.
<!-- Rivai Silaban | BLOG DESIGN Permalink start -->
<div id='BDRS-permalinks'>
<div class='isi-box'>
<div class='bdrs-advertiser'>
<ul style=' margin-bottom:10px;'>
<li><a href='#' target='_blank' title='advertiser'><img alt='advertiser' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-y8C8FQsEpF4V-UsuyWNeyynIjGwy2j9RrPKVHhyphenhyphenPfLG2ntw8sK73nS8oakQSKpsaxYTGytHWmi2-1P4wWnmIK_NNEhcd8dt-kEdf3b11WhHgdkIlb1noLrkRpOSN7QvNWkGwu0jvYQA/s1600/advertiser2.png' title='advertiser'/></a></li>
<li><a href='#' target='_blank' title='advertiser'><img alt='advertiser' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-y8C8FQsEpF4V-UsuyWNeyynIjGwy2j9RrPKVHhyphenhyphenPfLG2ntw8sK73nS8oakQSKpsaxYTGytHWmi2-1P4wWnmIK_NNEhcd8dt-kEdf3b11WhHgdkIlb1noLrkRpOSN7QvNWkGwu0jvYQA/s1600/advertiser2.png' title='advertiser'/></a></li>
<li><a href='#' target='_blank' title='advertiser'><img alt='advertiser' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-y8C8FQsEpF4V-UsuyWNeyynIjGwy2j9RrPKVHhyphenhyphenPfLG2ntw8sK73nS8oakQSKpsaxYTGytHWmi2-1P4wWnmIK_NNEhcd8dt-kEdf3b11WhHgdkIlb1noLrkRpOSN7QvNWkGwu0jvYQA/s1600/advertiser2.png' title='advertiser'/></a></li>
<li><a href='#' target='_blank' title='advertiser'><img alt='advertiser' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-y8C8FQsEpF4V-UsuyWNeyynIjGwy2j9RrPKVHhyphenhyphenPfLG2ntw8sK73nS8oakQSKpsaxYTGytHWmi2-1P4wWnmIK_NNEhcd8dt-kEdf3b11WhHgdkIlb1noLrkRpOSN7QvNWkGwu0jvYQA/s1600/advertiser2.png' title='advertiser'/></a></li></ul></div>
<div style='color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: center; width: 92px; padding:5px 2px; font-style: normal; font-weight: bold; text-transform: uppercase;'> Rivai Silaban </div>
<a href='#' target='_blank' title='ADMIN'><img alt='Rivai Silaban' class='img' 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 10px Arial, Sans-Serif;'><textarea class='BDRS-textarea' name='BDRS' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea></span></div><br/>
<div class='BDRS-sosial' style='margin-top:136px;'>
<a href='LINK GPLUS ANDA ' target='_blank' title='gplus'>Gplus</a>
<a href='LINK FACEBOOK ANDA ' target='_blank' title='facebook'>Facebook</a>
<a href='LINK TWITTER ANDA ' 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;'/>
<!-- Rivai Silaban | BLOG DESIGN Permalink start -->
Keterangan Code
Untuk kode CSS silahkan anda edit sesuai dengan kebutuhan anda, Ukuran lebar widget = 560px.
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 link Iklan anda ( space iklan 120 X 120 ).
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 space iklan ini valid html 5 dan penulisan kode tag yang SEO Friendly dapat anda gunakan untuk halaman blog kesayangan 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 Space Iklan
Jumat, 20 September 2013
By : Admin Blog Design
Salam Bloger..!!!
Di poskan oleh :
Unknown
| Dipublish pada :
3:13 PM
|
2
komentar
Halaman kontak pada suatu blog sangat berguna untuk para pengunjung, cara membuat halaman kontak di blog sangat beraneka ragam, tapi halaman kontak yang akan kita buat ini memiliki tambahan beberapa widget untuk mendukung halaman kontak itu sendiri. Untuk script form contact ini kita akan memakai code geratisan dari situs www.foxyform.com. Postingan kali ini terinspirasi dari seorang teman yang membutuhkan kode halaman kontak yang akan dipasang di halaman blognya. Oke untuk keterangan halaman kontak saya rasa semua teman teman sudah paham atas hal ini, kita landung saja menuju TKP, silahkan lihat demonya melalui link DEMO dibawah ini kemudian simak tatacara pembuatannya.
Demo
Fitur Widget
Form Contact
Gambar admin
Link Profil admin
Text snipet admin
Link Social Media
Script Form Contact
Berhubung script form contact yang kita pake jasa situs www.foxyform.com dengan geratisan oleh karena itu silahkan kunjungi situs www.foxyform.com.
BAGIAN 1 >> Setting : Silahkan anda edit settingan halaman form contact anda. Mana yang wajib diisi para pengunjung dan mana yang tidak wajib diisi, Centang bagian required field:
Bagian 2 >> Advanced settings : Silahkan setting warna untuk tampilan halaman form contact anda.
Bagian 3 >> Target e-mail Address : Masukkan alamat anda
Lihat Preview dibawah setelah ana sudah merasa yakin silahkan klik " CREATE FORMULAR "
Kode Script akan muncul dan silahkan anda copy. kemudian kita menuju pemasangan halaman kontak, silahkan simak penjelasan dibawah ini.
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code </head>
Copy Code script CSS dibawah ini, pastekan tepat diatas code </head> yang 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.
Karena kita mau memasang pada halaman blog saatnya anda klik " Laman "
Pilih " Laman Baru " lalu klik " Laman Kosong "
Setelah laman kosong sudah terbuka, klik " HTML "
Copy kode dibawah ini kemudian edit sesuai dengan kebutuhan anda lalu pastekan pada halaman anda.
Kerena kita hanya memasang kode script dan tag html pada halaman jadi anda hanya memasang kode tersebut pada laman bagian " HTML " bukan " Compose " sekali lagi ingat kita hanya memasukkan kode tag html dan script bukan membuat suatu tulisan pada halaman.
Pada tutorial ini script form contact yang akan kita pake adalah jenis script PHP dari server proxy dari situs www.foxyform.com yang geratisan.
<!-- BDRS html start -->
<div id="bdrspage-contact"><h2>Contact Admin</h2>
<div class="bdrspage-kiri">
<!-- Do not change the code! --> <a id="foxyform_embed_link_454681"></a>
<script type="text/javascript">
(function(d, t){
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=454681&sec_hash=513b9ef6723&width=350px";
s.parentNode.insertBefore(g, s);
}(document, "script"));
</script></div>
<div class="bdrspage-kanan">
<p style="color:#333333; font-family:Georgia; font-size:11px; font-style:italic">Terimakasih telah menghubungi saya, silahkan isi form contact disamping ini. Semua form harus di isi tidak diperbolehkan satupun yang kosong</p>
<p ><strong>Contact Massage </strong></p>
<ul class="bdrs-faq">
<li>Menggunakan kata kata yang sopan. <br />
<br />
</li>
<li>Mengisi Subject yang sesuai pada semua yang bersangkutan dengan artikel yang ada di blog ini. <br />
<br />
</li>
<li>Setelah kami review, kami akan sesecepatnya untuk membalasnya ke email anda.<br />
<br />
<br />
</li>
<li>Sebelum anda mempertanyakan mengenai permasalahan yang bersangkutan dengan artikel yang ada di blog ini ada baiknya lihat dan simak komentar dari teman teman yang lain. <br />
<br />
</li>
<li>Anda harap maklum bila pesan anda tidak langsung dibalas, sebab kami harus mereview email yang pertama masuk </li>
</ul>
</div><div style='clear:both;'/>
<div class='Rivai-PostAuthor'>
<div class='Rivai'>
<a href='LINK BLOG ANDA ' target='_blank'>
<img alt='Rivai Silaban' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBLKAguWnUy5g089y9_93TxXnsMOaW01fL5EdHCAS87bygvKR54w-jQHAikltjtwjb0DdqqdXoj-0Cn-EheOSZm8zW3PeShahwl28aoyX1piUCJurh-AMJbag345TxD765s1o4SLb6bo/h120/rivai.jpg' width='100' title="my image"/>
</a>
<div style='font-family: Geneva, Arial, Helvetica, sans-serif; padding:3px 10px; margin-top:7px; text-align: center; color:#000000; text-shadow: NONE;'>
<b>
Rivai Silaban </b> </div>
</div>
<div class='Rivai-text'>
<span style='font-size: large;'>
<b>
<span style='font-family: Trebuchet MS,sans-serif; color: #990000;'>
My Profil </span> </b> </span>
<br/>
<div style='font-family: Trebuchet MS,sans-serif;'> Saya adalah seorang yang suka dengan photografi dan berbagai dunia maya lainnya, saya suka
Bloging dan memiliki ilmu sedikit tentang Design Grafis, Buat sohib sohib yang suka dengan bloging mari sama sama membangun ikatan persaudaraan diantara bloger Indonesia.
<div class="more" style='float:right;text-align:right;margin-top:5px;'>
<a href='LINK PROFIL ANDA' rel='nofollow' target='_blank' title="Profil">
Read More
</a>
</div>
<br/></div>
<div class="button" style="margin-top:35px;">
<div style='float:left;text-align:left;'>
<a class="button" href='LINK FACEBOOK ANDA ' rel='nofollow' target='_blank' title="facebook">
Facebook
</a>
<a class="button" href='LINK TWITTER ANDA ' rel='nofollow' target='_blank' title="twitter">
Twitter
</a>
<a class="button" href='LINK GPLUS ANDA ' rel='nofollow' target='_blank' title="Gplus">
Google Plus
</a>
<a href='http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA ' rel='nofollow' target='_blank' title="join to blog">
Join to Blog
</a> </div>
</div>
</div>
</div>
<div style='clear:both;'/>
<!-- BDRS html End -->
Keterangan Code
Untuk kode CSSnya kode [ width:580px ] adalah lebar widget, sesuaikan dengan lebar main halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
Untuk tulisan warna HIJAU ganti dengan tulisan singkat tentang anda.
Tulisan kode warna MERAH ganti dengan Link anda sesuai pada tutorial.
Kode tulisan warna BIRU ganti dengan code script dari www.foxyform.com yang telah anda copy dan daftarkan sebelumnya.
Kode tulisan warna KUNING ganti dengan link gambar anda .
Kesimpulan
Cara membuat halaman kontak di blog ini memakai code script PHP yang geratisan dari situs www.foxyform.com, yang telah saya padukan dengan wiget profil untuk menambah kesan profil admin blog pada halaman kontak tersebut.
Bila teman teman mengalami masalah dalam pemasangan widget ini atau terdapat kesalahan penulisan kode silahkan hubungi saya atau share dengan saya melalui form komentar dibawah.
Halaman Kontak Blog
Kamis, 14 September 2013
By : Admin Blog Design | Rivai Silaban
Di poskan oleh :
Unknown
| Dipublish pada :
3:07 PM
|
15
komentar
