Rivai Silaban | BLOG DESIGN

fungsi mode html pada menu entri baru blogspot

2014-05-13T00:44:00.000+07:00

Fungsi mode html pada menu entri baru blogspot - atau kinerja fungsi mode html pada menu entri baru blogspot merupakan bagian penting yang harus diketahui para blogger mania. fungsi mode html pada menu entri baru blogspot pada kinerjanya berfungsi untuk menempatkan sebuah code dalam sebuah postingan agar lebih bekerja secara maksimal dan dapat diterjemahkan oleh pengkodean HTML dengan sempurnah. Secara devault bila kita menginginkan pemasangan suatu code berbasis HTML ataupun Javascript dan lain lain, kita akan memerlukan fungsi mode html pada menu entri baru blogspot ini agar code dapat dengan maksimal diterjemahkan.

Buat seorang blogger mode ini sangat membantu dalam menangani soal pengkodean pada sebuah postingan. Untuk menggunakan mode ini dalam platform Blogspot adalah :

Login ke dasbor
Klik " Entri Baru "
Pada halaman " Entri Baru " silahkan pilih mode " HTML " pada bagian sebelah kiri halaman
Pastekan code HTML, script atau sejenisnya dan save kemudian lihat hasilnya...

fungsi mode html pada menu entri baru blogspot berbeda dengan mode " Compose " Pada halaman Entri Baru Blogspot, bila dalam mode compose hanya fungsi text maka didalam mode HTML kita dapat memanfaatkan code HTML untuk diterjemahkan lebih maksimal, dibawah ini ada beberapa contoh penulisan atau fungsi mode html pada menu entri baru blogspot tersebut.

Contoh tulisan yang berfungsi dan hanya berupa text

" Ini adalah sebuah artikel postingan "

Contoh penulisan kalimat diatas pada fungsi mode html akan diterjemahkan dengan baik , dan tulisan tersebut hanya sebatas text biasa tanpa memiliki style HTML.

Contoh tulisan dan code yang berfungsi untuk diterjemahkan kedalam bentuk text dengan memakai style CSS pada HTML

" <div style="float:right"> Ini adalah sebuah artikel postingan </div> "

Contoh penulisan diatas bila diterjemahkan dalam HTML adalah bahwa postingan kalimat diatas akan berada di sebelah kanan halaman karena diakibatkan oleh fungsi " style="float:right" " ( baca fungsi float pada HTML ) dan code diatas tidak akan muncul , melainkan fungsi atau perintah code tersebut akan dilaksanakan atau diterjemahkan sehingga tulisan kalimat tersebut akan berada di sisi bagian kanan halaman.

fungsi compose pada menu entri baru blogspot

2014-05-10T11:36:00.001+07:00

Fungsi compose pada menu entri baru blogspot atau kinerja dan fungsi compose pada menu entri baru blogspot wajib dipahami seorang blogger mania. fungsi compose pada menu entri baru blogspot pada prakteknya adalah tempat untuk membuat suatu postingan blogspot yang berbasis text atau tulisan. fungsi compose pada menu entri baru blogspot ini hanya dapat kita gunakan untuk membuat suatu text dan bukan suatu code, fungsi compose pada menu entri baru blogspot berbeda dengan fungsi html pada menu entri baru blogspot dimana fungsi ini merupakan kebalikan dari fungsi compose pada menu entri baru blogspot tersebut.

Pada kinerjanya bila seorang blogger membuat suatu postingan yang berbentuk suatu text ( bukan suatu code HTML/CSS yang dapat berfungsi ) maka sistem mode Compose pada menu entri baru Blogspot merupakan mode yang harus dipakai. Secara khusus Blogspot memberikan 2 fungsi mode dalam membuat suatu postingan pada platform tersebut dan memiliki perbedaan perbedaan tersendiri, hal ini dilakukan untuk memberikan kebebasan kepada member platform tersebut. ada beberapa contoh penulisan yang berfungsi dan tidak berfungsi dalam fungsi compose pada menu entri baru blogspot ini.

Contoh tulisan yang berfungsi

" Ini adalah sebuah artikel postingan "

Contoh penulisan kalimat diatas pada fungsi mode compose akan diterjemahkan dengan baik , sebab tulisan pada contoh tersebut merupakan sebuah text biasa atau hanya berbasis text dan bukan merupakan sebiah code.

Contoh tulisan yang tidak berfungsi

" <div style="float:right"> Ini adalah sebuah artikel postingan </div> "

Contoh penulisan diatas bila diterjemahkan dalam HTML adalah bahwa postingan kalimat diatas akan berada di sebelah kanan halaman karena diakibatkan oleh fungsi " style="float:right" " ( baca fungsi float pada HTML ) tapi pada kenyataannya bila kita memakai metode Compose maka code HTML pada contoh diatas akan diterjemahkan seperti penulisan aslinya atau tulisan apa adanya tanpa ada pengaruhnya.

cara membuat box keterangan code

2014-05-09T11:44:00.005+07:00

Cara membuat box keterangan code - tutorial cara membuat box keterangan code pada halaman blogspot. Tutorial cara membuat box keterangan code pada halaman blogspot ini merupakan fitur penting pada halaman blogspot yang menyajikan tutorial atau sejenisnya. Tutorial cara membuat box keterangan code ini terinspirasi dari seorang teman yang menginginkan pemasangan code untuk keperluan keterangan code pada halaman blogspotnya.

Pemasangan code pada cara membuat box keterangan code di halaman blogspot ini dipasang secara manual, hal ini dilakukan agar halaman Blogspot lebih berkesan elegan dan profesional. Untuk melihat tampilan cara membuat box keterangan code di halaman blogspot ( melihat tutorial nya secara detail ) silahkan klik link dibawah lihat dibagian bawah postingan pada halaman.

Pasang code script dibawah ini didalam code CSS template anda.

Code CSS here..

/*****************************************

                       Name : cara membuat box keterangan code

                       By : rivai.org | ideblogspot.com | Blog Design

                       Update : Jumat, 09 Mei 2014

                       ******************************************/

.boxkets {border:dashed #333 2px;padding:8px;background-color: #E9F4FC;width: 95%;margin:0 auto;}

.rivaisilaban-titlekets {

position: relative;

padding: 5px;

margin: 20px 0px;

color: #FFFFFF;

width: 20%;

text-align: center;

text-shadow: 1px 1px 1px rgb(0, 0, 0);

color:#FFFFFF;

font-weight:bold;

background-color: #525252;

}

.rivaisilaban-titlekets:before {

content:"";

display:block; 

position:absolute;

bottom:-20px; 

left:40px;

width:0;

height:0;

border:0;

border-right-width:30px;

border-bottom-width:20px;

border-style:solid;

border-color:transparent #525252;

}
/* cara membuat box keterangan code */

Code HTML here..

 <!-- cara membuat box keterangan code start --> 

<div class="rivaisilaban-titlekets">Keterangan Code </div>

<div class='boxkets'>

<p>Lihat bagian code HTML yang berwarna MERAH, silahkan anda ganti dengan code link social media anda sesuai dengan title social medianya.</p>

<p>Code cara membuat social media di blogspot valid HTML 5, CSS 3 dan fast loading, bila anda memasang di widget yang baru anda jangan lupa untuk menghapus logo edit ( obeng dan tang ) agar widgetnya juga valid.. salam Blogspot </p>

</div><!-- cara membuat box keterangan code end -->

Bila anda masih belum memahami tata cara membuat box keterangan code pada halaman blogspot ini, silahkan kunjungi halaman sumbernya, semoga bermanfaat..
Sumber : http://www.ideblogspot.com/2014/05/cara-membuat-box-keterangan-code.html

widget social media scale di blogspot

2014-04-30T23:55:00.000+07:00

Widget social media scale di blogspot - cara membuat widget social media scale di blogspot pada blogspot atau tutorial membuat widget social media scale di blogspot. Sobat blogger kali ini saya posting artikel widget social media scale di blogspot yang terinspirasi dari email seorang sahabat yang membutuhkan widget social media scale di blogspot ini untuk dipasang di halaman blogspotnya. widget social media scale di blogspot ini tergolong lebih sederhana dan lebih simpel dengan memiliki code yang ringan. Untuk melihat tampilan widget social media scale di blogspot pada tutorial kali ini silahkan kunjungi link demo dibawah ini, nah bila anda tertarik silahkan simak tutorial dibawah ini...

Demo

Pasang code script dibawah ini didalam code CSS template anda.

Code CSS here..

/*****************************************
Name : widget social media scale
By : Rivai Silaban | Ide Blogspot | Blog Design
Update : Rabu 30 April 2014
*****************************************/
.rivaiblog{
list-style-type:none;
margin:0;
padding:0;
}
.rivaiblog li{
display:inline;
width: 60px;
height:60px;
}
.rivaiblog li img{
width: 32px; 
height:32px; 
border:0;
margin-right: 4px; 
-webkit-transition:-webkit-transform 0.1s ease-in; 
-o-transition:-o-transform 0.1s ease-in; 
}
.rivaiblog li img:hover{
-moz-transform:scale(1.3); 
-webkit-transform:scale(1.3);
-o-transform:scale(1.3);
}/*** widget social media scale ***/ 

Pasang code script dibawah didalam widget blog anda

Code HTML here..

 <!-- widget social media scale code start -->
 <ul class="rivaiblog"><li><a href="https://www.google.com/+RivaiSilaban"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPCdI7OQ7-4phejosNLiLruec4OH09Q3dA39S7EG-o1ccnV8jHWLXOSGrGk80OiOrrOnvLXKGQcOsCi7LwAHIqH1Pn9-R3z1yEm9qrZ5GNn_obwlwS0pHiELiJlQREjOM1e6AG9OaEEAo/s1600/gplus5.png " title="Join to Gplus" /></a></li>
 <li><a href="https://www.facebook.com/rivaisilaban"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFkDGHFaDeF2UYoNZ80VuygBj-hyganeYlPUAqwZrJyZWcMf_QdKgc2tgDgm71sjZXO2xSvFws6zvjTdZJWVMI3UewgTc6mEITYo34FDZJHx42Te1rDw90WQUScCXPRlsps8BvDslJ58U/s1600/fb5.png " title="Add to Facebook" /></a></li>
 <li><a href="http://www.twitter/Rivai_Silaban"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPNEDJayd2LtpMsL09WoLLadJ3m6T4m5B3Z_Ly88b3HR4p0KVo6RaVTmoZ_al2y08KL7RkCRCwj3gkDN3H7rPGPlcVZ8ElWsOM7whbRTKvsEzkpkP1ICKm2D2OIvYTiPrvBuE9zd9xeBg/s1600/twit5.png " title="Follow Twitter" /></a></li>
 <li><a href="http://feeds.feedburner.com/idblogspot"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUY-Xgm4kn8Zx_R3FhzwpIFvLIi5TGWT1yeVk4e2DYCIBfUHh9NcTKNxhBl0vnY1nKnZFwURRQHGbpTbc_kX0VHf60gqvRGsyNM9OpkWc8_apjmQOyazbZwAaiO-4nNuGWFcGWrGMYpw/s1600/rss5.png" title="RSS" /></a></li>
 <li><a href="http://www.blogger.com/follow-blog.g?blogID=5055362939739660258"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZp7XmiUMVdizravU52J8uWPhp1MeEKPXC19xfc1vHI1c8QZaZupSmdNoFdlSqb3zCd0GtjJ0l1FITET8pu7q-z1elHKbKbWBrO8_xyYm8zuf1hyJKGNMaY8Un4Uyoav1wDJViU_vwPHU/s1600/BB.gif" title="Join to Blog" /></a></li>
 </ul>
 <!-- widget social media scale code end -->

Bila anda masih belum memahami tata cara pemasangan cara memasang widget social media scale di blogspot ini silahkan kunjungi halaman sumbernya, semoga bermanfaat..
Sumber : http://www.ideblogspot.com/2014/04/widget-social-media-scale.html

fungsi float pada html

2014-04-28T10:43:00.000+07:00

Fungsi float pada html - kegunaan atau fungsi float pada html sangat diperlu diketahui, fungsi float pada html ini sangat mempengaruhi tata letak pada desain HTML, khususnya platform blogspot. fungsi float pada html pada blogspot dalam prakteknya adalah untuk menentukan letak suatu widget, gambar dll dalam situasi letak kekanan, ketengah dan kekiri. fungsi float pada html dituliskan dalam pengkodean CSS pada template blogspot.

Dalam kinerjanya pada struktur CSS Float berfungsi untuk memberikan suatu efek tata letak pada sebuah widget dalam blogspot, contoh penulisan Float dalam CSS pada pengkodean HTML adalah sebagai berikut :

Float Right ( letak suatu benda berada disebelah kanan ) : Penulisan code Float Right pada struktur CSS dalam HTML adalah element { float:right; } yang memiliki arti dalam platform Blogspot bahwa suatu widget akan berada pada letak sebelah kanan dalam tampilannya. Para programmer blogspot memakai fungsi code ini untuk meletakkan suatu widget atau aplikasi lain pada sebelah kanan halaman untuk tampilannya.

Float Center ( Letak suatu benda berada ditengah ) : Penulisan code Float Center ini pada struktur CSS HTML adalah element { float:center;} yang memiliki arti dalam blogspot bahwa suatu widget atau aplikasi lain akan berada pada posisi tengah pada sebuah tampilan halaman. Saat ini fungsi Float Center ini tidak valid lagi terhadap HTML5 sebab sudah mengalami perubahan code pada HTML5 pada saat artikel ini ditulis.

Float Left ( Letak suatu benda berada disebelah kiri ) : Penulisan code Float Left ini pada struktur CSS HTML adalah element { float:left; } yang memiliki arti dalam platform Blogspot bahwa suatu widget akan berada pada tata letak sebelah kiri dalam sebuah tampilannya, atau berlawanan arah dengan code Float Right.

Untuk melihat fungsi float pada html dan beberapa contoh lainnya dalam penerapan code CSS, silahkan kunjungi http://www.ideblogspot.com/2014/04/fungsi-float-pada-html.html

fungsi style clear both

2014-04-27T13:33:00.000+07:00

Fungsi style clear both - penerapan fungsi style clear both pada blogspot/blogger atau kegunaan dan fungsi style clear both pada template platform blogspot. Pada prakteknya fungsi style clear both adalah memberikan ruang kosong sebagai pembatas code sebelumnya dan setelahnya. Dalam kinerja platform blogspot atau blogger hal fungsi style clear both ini sangat diperlukan dimana kita dapat membuat suatu pembatas code yang tidak akan mempengaruhi code yang lainnya pada template. Kegunaan lainnya yang dapat kita rasakan sebagai fungsi style clear both ini adalah sebagai penutup semua code yang berada sebelumnya agar tidak mempengaruhi code yang berada dibawah code sebelumnya.

Pada postingan artikel kali ini saya memposting pembahasan ini sebab fungsi style clear both sangat berguna sekali, bagi pemula hal ini sangat dibutuhkan, agar tampilan blognya tetap rapi dan lebih profesional. Dalam penerapannya fungsi style clear both ini memang sangat sederhana tapi memiliki banyak arti. Penulisan code fungsi style clear both ini pada HTML adalah sebagai berikut :

Dimana setiap type style yang berada sebelum code diatasnya akan ditutup atau terhapus pada saat code stylenya dituliskan. Pemakaian fungsi style clear both sering dijumpai penulisannya dengan karakter code <div> walaupun code tersebut dapat kita tuliskan dengan kode karakter lainnya seperti <p> , <span> dll pada umumnya. Jadi dalam prakteknya <div style="clear:both"/> atau fungsi style clear both pada blogspot/blogger menghapus pengaruh semua kode yang berada sebelum code tersebut agar tidak mempengaruhi semua kode yang berada dibawah atau sesudah code tersebut.

Untuk melihat fungsi style clear both pada blogspot/bloggerdalam penulisan code <div style="clear:both"/> pada HTML silahkan kunjungi http://www.ideblogspot.com/2014/04/fungsi-style-clear-both-pada-blogspot.html

fungsi margin pada html

2014-04-26T21:57:00.000+07:00

Fungsi margin pada html - pengertian fungsi margin pada html khususnya pada blogspot. fungsi margin pada html pada template blogspot sangat perlu untuk dipahami para blogger mania, hal ini diperlukan akibat seringnya kita jumpai tulisan " Margin " ini pada bagian CSS Template blogspot sendiri. Dalam prakteknya Margin dalam CSS berfungsi untuk membuat jarak sisi kiri kanan dan atas bawah. Jadi bila kita ingin membuat suatu jarak contohnya widget ada baiknya kita memakai fungsi Margin tersebut. Untuk membuat jarak tentunya margin tersebut harus diisi dengan nilai agar jarak tersebut dapat terlihat. Pemberian nilai pada margin dapat dilakukan dengan sistem angka dengan format angka yang telah ditetapkan, seperti 10px, 5%, 2em dll tergantung kebutuhan kita. Didalam CSS fungsi margin pada html secara devault ada 4 fungsi yang meliputi :

Margin Atas ( Margin Top ) atau pada penulisannya dalam code HTML adalah margin-top yang merupakan jarak titik tengah dengan titik kearah atas. Fungsi margin-top ini dapat kita gunakan bilamana " Cth : Jarak salah satu widget yang satu dengan widget yang diatasnya terlalu dekat dan kita ingin memberikan jarak yang setimpal agar kelihatan bagus dan rapi " maka kita boleh menambahkan nilai pada bagian margin-topnya sehingga penulisannya demikian : ( margin-top:20px ; ) atau ( margin-top:5%; ) dll. Jadi dalam pengertiannya adalah bahwa jarak widget tersebut ke widget yang berada diatasnya merupakan 20px.

Margin Bawah ( Margin Bottom ) atau pada penulisannya dalam code HTML adalah margin-bottom yang merupakan jarak yang berlawanan dengan margin-top atau jarak suatu titik tengah dengan titik yang berada dibawahnya. Penulisan angka pada nilai margin-bottom ini sama juga dengan dengan margin-top hanya saja nilai dari margin-bottom tersebut akan memberikan jarak kebawah.

Margin Kanan ( Margin Right ) atau pada penulisannya pada code HTML adalah margin-right yang merupakan jarak titik tengah terhadap jarak titik yang berada di sebelah kanan titik tengahnya. Dalam prakteknya bila mana suatu widget pada blogspot memiliki jarak kesebelah kanan terlihat tidak sempurnah maka kita dapat memanfaatkan fungsi margin-right untuk menyempurnakan jaraknya.Penulisan fungsi margin-right pada code html adalah sebagai berikut : ( margin-right:20px; ) , ( margin-right:5%; ) atau ( margin-right:2em; ) dll.

Margin kiri ( Margin Left ) atau penulisannya pada code HTML adalah margin-left yang merupakan jarak antara titik tengah kearah kiri titik tengah atau arah yang berlawanan dengan margin-right . Dalam prakteknya penulisan margin-left sama halnya dengan penulisan margin-right hanya saja arahnya yang berlawanan, seperti : ( margin-left:20px; ) , ( margin-left:5%; ) atau ( margin-left:2em; ) dll.

Keterangan fungsi margin pada html diatas merupakan keterangan singkat dalam praktek pemakaiannya dalam HTML baik itu pengkodean html pada platform blogspot. Untuk melihat tatacara penulisan margin pada code CSS silahkan kunjungi http://www.ideblogspot.com/2014/04/fungsi-margin-pada-html.html

free template blogspot PARBADA

2014-03-04T18:43:00.000+07:00

Free template blogspot PARBADA - free template blogspot PARBADA merupakan template blogspot categori bisnis. free template blogspot PARBADA ini memiliki fitur kolom layout yang dapat mendukung bisnis anda dalam menampilkan link link bisnis anda.

Profil free template blogspot PARBADA

Nama :PARBADA
Category : Bisnis Template
Style : Elegan Template
size : 100 KB
Update : Senin 03 Maret 2014
owner : Rivai Silaban
Design : www.rivai.org
Publish : www.ideblogspot.com
Powered : Blogspot
Type : Free Template
Link Tipo Black:http://www.template9.ideblogspot.com/

Demo

Fitur free template blogspot NAULI

Loading Fast
Dynamik Title Heading
Search
Social media
Subscribe
6 kolom layout header
1 kolom layout sidebar ( 1, 2, 1 )
1 kolom layout Blog Post ( blog1 )
5 kolom layout footer
Label style
Space Iklan 125 x 125
Related post
Popular Post
Credit Link
Breadcrumbs
Thread Comment & Icon admin
Pesan Komentar
snippet home page system
Vcard Author
Counter Comment
Blog Pager link
Font Awesome CSS
Box author
dll

Silahkan anda lihat dan cek untuk memastikan fitur dan kemampuan free template blogspot PARBADA ini. Untuk melihat link downloadnya silahkan kunjungi halaman dibawah ini.

http://www.ideblogspot.com/2014/03/free-template-blogspot-parbada.html

tutorial footer style ide blogspot v1

2014-03-03T18:06:00.001+07:00

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.

/**************************
Name : footer style ide blogspot v1
Update : Senin 03 Maret 2014
Design : Rivai Silaban
Site : www.rivai.org
Publish : www.ideblogspot.com
**************************/
#footer-wrapper {width: 100%;clear: both;margin: 0px;padding: 0px;background: none repeat scroll 0% 0% rgb(27, 41, 65);}
#footer-wrapper h3, #footer-wrapper h4 {border-bottom: 2px dotted #666;font-family: Georgia;font-size: 13px;color: rgb(153, 153, 153);font-style: normal;font-weight: bold;text-shadow: 1px 2px 2px rgb(0, 0, 0);line-height: normal;margin: 10px 0 0 5px;padding-bottom: 10px;text-transform: none;text-align: left;}
#footer-wrapper .credit-link {font-size: 10px;font-family: Verdana;color: #999;text-align: center;line-height: 25px;background: none repeat scroll 0% 0% rgb(13, 20, 32);}
#footer-wrapper .credit-link a{color: rgb(153, 153, 153);text-decoration: none;}
#footer-wrapper .credit-link a:hover{color: #f7f7f7;}
#footer1, #footer2, #footer3 {width: 30%;padding: 5px;float: left;margin: 5px 12px;}
.footer {margin: 0px;padding: 0px;}
.footer ul {margin: 0px 13px;padding: 0px;width: 30%;float: left;}
.footer ul li {margin: 0px;padding: 8px 0;list-style: none;border-bottom: solid 1px #444;}
.footer li {font-size: 12px;font-family: arial;color: #999;}
.footer li a {font-size : 12px;font-family : arial;text-decoration : none;color :rgb(153, 153, 153);margin-bottom : 5px;}
.footer li a:hover {color : #f7f7f7;}
.ide-blogspot {width: 100%;margin:0;padding:0;}
#footer-wrapper .widget {color: #999;font-family: Arial;font-size: 12px;padding: 5px 15px;line-height: normal;}
.bagian {width: 95%;padding: 0px;margin: 0px auto;}
.bagian .idekiri {width: 68%;padding:0;margin:0;float: left;}
.bagian .idekanan {width: 30%;padding:0;margin:0;float: right;}
.tombol a {float: right;margin: 20px 0px 0px;padding: 5px 20px;background: #249FEA;color: #fff;text-shadow: 0 0 2px #000;border-radius: 5px;font-weight: bold;}
.tombol a:hover {background: #2B5B84;color: #999;}
.contacts h5, .contacts h6 {
font-family: Georgia;
font-size: 13px;
color: rgb(153, 153, 153);
font-style: normal;
font-weight: bold;
text-shadow: 1px 2px 2px rgb(0, 0, 0);
line-height: normal;
margin: 10px 0 0 5px;
padding-bottom: 10px;
text-transform: none;
text-align: left;}
.contacts{color: #999;font-family: Arial;font-size: 12px;padding: 5px 15px;line-height: normal;}
.bagian {width: 95%;padding:2%;margin:0;}
.contacts ul {margin: 0px 0 5px 10px;padding : 0;width: 100%;}
.contacts ul li {margin: 0px;padding: 2px 2px;list-style: square;border-bottom: none;}
.contacts li {font-size: 12px;font-family: arial;color: #999;}
/*** footer style ide blogspot v1 end css ***/

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 != &quot;&quot;'>
 <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 != &quot;&quot;'>
 <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 != &quot;&quot;'>
<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 != &quot;&quot;'>
<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 != &quot;&quot;'>
<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 &#169; 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

Tutorial menampilkan post date diwaktu yang sama

2014-03-02T14:03:00.000+07:00

Tutorial menampilkan post date diwaktu yang sama, tutorial menampilkan post date diwaktu yang sama merupakan suatu trik untuk menampilkan tanggal postingan pada hari yang bersamaan pada setiap postingan blogspot. Secara devault tanggal postingan blogspot tidak akan muncul bilamana kita memposting 2 atau bahkan lebih artikel yang telah kita posting pada saat itu (waktu yang ditampilkan hanya pada salah satu postingan). Postingan kali ini terinspirasi dari seorang sahabat blogger saya yang menanyakan tentang tapilan post date pada setiap template Ide Blogspot yang telah dipublish.

Buat seorang blogger memang hal ini ( tutorial menampilkan post date diwaktu yang sama )perlu juga diketahui dimana setiap postingan tersebut memiliki tanggal Update yang muncul pada setiap postingan. Pada dasarnya Post date ini sangat diperlukan oleh data markup search engine untuk menentukan tanggal update postingan artikel yang telah kita posting. Tehnik ini juga akan membantu perayapan pada sistem mesin pencari ditambah dengan pasilitas Vcard pada postingan tersebut. Untuk menjaga post date tidak sama dengan data Update Vcard anda sebaiknya melalukan sedikit settingan di dasbord blogspot anda, dimana kita akan memisahkan, bahwa untuk post date kita akan membuat format tanggal, bulan dan tahun, sedangkan untuk Vcard kita akan membuat format waktu ( time ). Jadi kedua sistem tersebut akan saling berhubungan dimana sistem search engine akan mendeteksi waktu dan tanggal postingan itu secara bersamaan. Memang saya akui trik ini masih banyak yang belum mengetahui tapi kali ini saya menjelaskan hal tersebut agar setiap blogger lebih memahami antara fungsi post date, Vcard yang bergubungan dengan sistem Crawls pada mesin pencari. Untuk menampilkan post date diwaktu yang sama pada postingan blog anda silahkan simak pemjelasan dibawah ini, untuk melihat demonya silahkan klik icon demo dibawah ini.

Demo

Login kedasbord Blogspot anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code seperti dibawah ini :

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
Setelah ketemu silahkan ganti code tersebut dengan code dibawah ini :

<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>
save template anda, dan lihat hasilnya...

Untuk mensetting tutorial menampilkan post date diwaktu yang sama dengan sistem Vcard time Update silahkan kunjungi halaman dibawah ini..
Sumber : http://www.ideblogspot.com/2014/03/menampilkan-post-date-diwaktu-yang-sama.html

css widget label blogspot accordion

2014-02-26T16:18:00.000+07:00

Css widget label blogspot accordion - tutorial css widget label blogspot accordion memiliki tampilan yang menarik, sistem transisi pada css widget label blogspot accordion menambahkan kesan elegan pada label tersebut, ditambah dengan sentuhan image sebagai background tag li pada cssnya. Untuk melihat tampilam css widget label blogspot accordion ini silahkan klik Icon DEMO dibawah ini kemudian lihat bagian widget label dekatkan cursor anda, bila anda tertarik memasangnya silahkan simak tutorial css widget label blogspot accordion dibawah ini...

Demo

Pasang code script dibawah ini didalam code CSS template anda.

Code CSS here..

/**************************
Name : css label blogspot accordion
Update : Rabu 26 February 2014
Design : Rivai Silaban
Site : www.rivai.org
Publish : www.ideblogspot.com
**************************/
#Label1 ul li {margin: 0px;padding: 2px;list-style: none;}
#Label1 ul li a {list-style-type: none;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLsOKejB7tXZ5FUJTvoNgK5mtg4y8oPJ3uKy0UnLkmVz-g7WWwgUB9JnEGiY_-cWOrMwFs5xs0Z0Nm5Ky0wJq28kQKtiZS8ggtVZknP5mkcCgVITVj5HvFZ28XupX-sl8_Sog1bFuUy0o/s1600/arrow-grey.gif ') no-repeat scroll 0px 4px transparent;margin: 0px;padding: 0px 0px 0px 15px;color: rgb(97, 60, 22);}
#Label1 ul li a:hover {margin: 0px 0 0 8px;transition: .5s ease-out 0s;color:#990000;}
.label-count {float: right;padding: 0px 7px;background: #666;color: #fff;border-radius: 5px;}
/* css label blogspot accordion end code */ 

Bila anda masih belum memahami tata cara membuat css widget label blogspot accordion ini silahkan kunjungi halaman sumbernya, dan lihat fungsi dari beberapa fitur codenya, semoga bermanfaat..
Sumber : http://www.ideblogspot.com/2014/02/css-label-blogspot-accordion.html

Buat anda yang belum memahami widget label atau cara memasang widget label blogspot silahkan kunjungi link dibawah ini :
http://www.ideblogspot.com/2014/02/cara-membuat-widget-label-blogspot.html

social media slideshare

2014-02-25T15:45:00.000+07:00

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='&quot;https://plus.google.com/share?url=&quot; + 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='&quot;http://www.facebook.com/sharer.php?u=&quot; + 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='&quot;http://twitter.com/share?url=&quot; + 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....

http://www.ideblogspot.com/2014/02/social-media-slideshare.html

cara membuat style link type square

2014-02-21T15:01:00.000+07:00

Cara membuat style link type square - Tutorial cara membuat style link type square pada tag html, atau cara memasang style link type square diblogspot. cara membuat style link type square dapat anda gunakan untuk membuat tampilan link halaman blog anda menarik dan lebih profesional. cara membuat style link type square hanya menganalkan sistem css untuk tampilannya. Untuk melihat tampilan cara membuat style link type square ini silahkan klik link demo dibawah ini, bila anda tertarik memasang style link type square ini halaman blog anda silahkan simak tutorial dibawah ini...

Demo

code CSS cara membuat style link type square

Code CSS here..

/**************************
Name : style link type square
Update : Jumat 21 February 2014
Design : Rivai Silaban
Site : www.rivai.org
Publish : www.ideblogspot.com
**************************/
.style-link-type-square {
width: 95%; /* Lebar wiget */
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style-link-type-square ul li{/* Oparator CSS sistem ul dan li */
margin: 0px 0px 0px -20px;
padding: 5px 0px;
list-style-type: square;
border-bottom: 1px dashed rgb(204, 204, 204);
color: #000099; 
}
.style-link-type-square li a{ /* warna link */
color: #0000FF;
text-decoration: none;}
.style-link-type-square li a:hover{ /* warna link setelah disentuh cursor */
color: #990000;}
/* end CSS style link type square - Ide Blogspot */ 

Code tag HTML cara membuat style link type square

Code HTML here..

<!-- style link type square - Ide Blogspot start code -->
 <div class="style-link-type-square">
 <ul>
 <li><a href="http://www.ideblogspot.com/" target="_blank" title="Contoh Link 1">Contoh Link 1</a></li>
 <li><a href="http://www.rivai.org/" target="_blank" title="Contoh Link 2">Contoh Link 2</a></li>
 <li><a href="http://rivai-silaban.blogspot.com/" target="_blank" title="Contoh Link 3">Contoh Link 3</a></li>
 <li><a href="http://diskusi.rivai.org/" target="_blank" title="Contoh Link 4">Contoh Link 4</a></li>
 <li><a href="http://www.ideblogspot.com/" target="_blank" title="Contoh Link 5">Contoh Link 5</a></li>
 <li><a href="http://www.rivai.org/" target="_blank" title="Contoh Link 6">Contoh Link 6</a></li>
 <li><a href="http://rivai-silaban.blogspot.com/" target="_blank" title="Contoh Link 7">Contoh Link 7</a></li>
 </ul>
 </div>
 <!-- style link type square - Ide Blogspot end code -->

Bila anda masih belum memahami tata cara membuat style link type square ini silahkan kunjungi halaman sumbernya, dan lihat fungsi dari beberapa fitur codenya, semoga bermanfaat..
Sumber : http://www.ideblogspot.com/2014/02/style-link-type-square.html

Referensi yang dapat anda manfaatkan untuk meningkatkan pengetahuan anda mengenai sistem penulisan tag tag link..

http://www.ideblogspot.com/2014/02/attribut-link.html
http://www.ideblogspot.com/2014/01/pengertian-link.html

widget subscribe bubble style

2014-02-19T22:31:00.000+07:00

Widget subscribe bubble style - tutorial cara membuat widget subscribe bubble style di blogspot. widget subscribe bubble style ini memiliki tampilan yang menarik, dan memiliki fasilitas widget social media ditambah dengan foto admin, nah bila anda ingin melihat tampilan widget subscribe bubble style silahkan klik demo dibawah ini , bila anda tertarik memasangnya silahkan lihat code widget subscribe bubble style dibawah ini, langsung saja menuju TKP..

Demo

Code CSS here..

/**************************
Name : subscribe bubble style
Update : Rabu 19 February 2014
Design : Rivai Silaban
Site : www.rivai.org
Publish : www.ideblogspot.com
**************************/
.subscribe-bubble-style {
width: 300px; /* lebar widget */
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
line-height: normal;
text-align: left;}
.subscribe-bubble-style p {font-size: 11px;margin: 0 0 10px 0;font-weight: normal;}
.subscribe-bubble-style a {color: #0000CC;text-decoration: none;float: right;text-transform: uppercase;font-weight: bold;}
.subscribe-bubble-style a:hover {color: #333333;}
.subscribe-bubble-style .titles{font-size: 12px;font-weight: bold;color: #FFFF00;margin: 0;}
.subscribe-bubble-style .forms {
position:relative;
padding:5px;
margin: 0px 0 10px 0;
height: 100px;
color:#ccc;
border-radius:5px;
background-color: #344558;}
.subscribe-bubble-style .forms:after {
content:"";
display:block;
position:absolute;
top: 110px;
left: 30px;
width:0;
height:0;
border:15px solid transparent;
border-top-color:#344558;}
.subscribe-bubble-style .forms .email-group input {
display:block;
float:left;
width:68%;
margin:0 5px 0 0;
padding:12px 10px 11px 10px;
border:1px solid #249FEA;
border-radius:4px;
font-size:14px;
box-shadow:none;
color: #999999;}
.subscribe-bubble-style .forms .button {
font-family: Helvetica,Arial,sans-serif;
color: rgb(255, 255, 255);
background-color: #249FEA;
display: inline-block;
white-space: nowrap;
height: 42px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-weight: bold;
font-size: 12px;
cursor: pointer;
border: 0px none;
border-radius: 4px 4px 4px 4px;}
.subscribe-bubble-style .forms .button:hover{opacity:.8;color: #000000;} 
.subscribe-bubble-style .kiri{width: 20%;margin: 0;padding: 5px;float: left;}
.subscribe-bubble-style .kanan{width: 70%;margin: 0;padding: 5px;float: right;}
.subscribe-bubble-style .icon {width: 100%;margin:0 auto;padding:0 10px;}
.subscribe-bubble-style .icon ul li {margin:0 auto;} 
.subscribe-bubble-style .icon li {display: inline;float: left;padding:0 10px;} 
.subscribe-bubble-style .image-profil {display: block;width: 70px;height: 70px;border: 5px solid #fff;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhli0eeKkwqQSmBnFcU-alizVvkiCVRqLf6sz3zYYy8Om4GomriSvZ79_poF-8gJt7rbTosK5IP6PqMfIu95fGfbWgjXHnpClYNfa4WdfVY839bTx_X38VEfDmonqeSCOrqBuwF0KpjkQE/s1600/s.jpg') no-repeat center center;
box-shadow:inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);}
/* subscribe bubble style - Ide Blogspot */ 

Code HTML here..

<!-- subscribe bubble style - Ide Blogspot start code -->
 <div class="subscribe-bubble-style">
 <div class="forms"><h2 class="titles">Free Update article now..!!</h2><p>Silahkan daftarkan email anda untuk mendapatkan update artikel gratis dari blog ini...</p> 
 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onSubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=idblogspot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><div class="email-group"><input type="email" id="email" name="email" onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' value='Enter Your Email Address...'/><input name="uri" type="hidden" value="idblogspot" /><input name="loc" type="hidden" value="en_US" /><button class="button" type="submit"> Subscribe </button>
 </div></form></div><div class="kiri"><div class="image-profil"></div></div>
 <div class="kanan"><div><ul class="icon">
 <li><a href='https://www.google.com/+RivaiSilaban' target="_blank" rel="nofollow" title="GOOGLE PLUS"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlbyoIwflPq7ns0r7r05S82D9kZvYNyXXErosMSUauhaf1Ml9oSRM-WRes9XZxSoe9m0eyPBW1uSka0PFo0M7c8xdm9cxiLBakZtkHxmWysTfi1WXvvrTA82vG39KRrQsYN2VeQ5Z9MbzJ/s1600/gplus5.png" title="GOOGLE PLUS"/></a></li>
 <li><a href='https://www.facebook.com/rivaisilaban' target="_blank" rel="nofollow" title="FACEBOOK"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFiSjBvfiTbsWrQRV-c-Zz7KnI_eTnH_c7Gs1N7F4SFaYwLZAlxQrh0rdksz5npZMSzecN9dRpILA1XOk3BavuJB3EsDTWlHZngQioC9iot3_RXhps8Xx9jNchycVHK84o00K8Z4g95PF/s1600/fb5.png" title="FACEBOOK"/></a></li>
 <li><a href='https://twitter.com/Rivai_Silaban' target="_blank" rel="nofollow" title="twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikNZYM_mFRWhcY5DscN8iXmJZoHB8gCpMAWeDkyFrrYbbZOTB1YQRq7hkLKbsHr2z0DTy06QHi0OezkkPdXvg7gJHqeURL1xrS9om1KPBxLUy8rLUejEUZbVToAXT69BLPkq81pv1dHcT9/s1600/twit5.png" title="TWITTER"/></a></li>
 <li><a href="http://feeds.feedburner.com/idblogspot" target="_blank" rel="nofollow" title="TWITTER"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxnTpTcNcYT_XTC4wZ5AvugibExV89WC_nV__RiXhy_-agUoppAqYkXIrkYhbAo40M-jIzSFu49M7p-8Z1fDJ18RMx_2oKQthw4daumUYNP_x4W69gvkCMKFlh7UULsfc-33_-X8iLvVR/s1600/rss5.png" title="RSS"/></a></li>
 </ul></div><div style="clear:both"/>
 <div style="padding: 10px;"><p>Saya seorang newbie dalam dunia blogging, yang sangat menggemari bahasa pemprograman..<span><a href="http://www.ideblogspot.com/" target="_blank" rel="nofollow" title="Lihat Profil">+ See More +</a></span></p></div></div></div>
 <!-- subscribe bubble style - Ide Blogspot end code -->

Code diatas merupakan code CSS dan code tag HTML dari widget subscribe bubble style yang mungkin sudah anda lihat tampilannya pada halaman demonya, Buat teman teman yang masih belajar blogging sama seperti saya silahkan kunjungi halaman tata cara pemasangan widget subscribe bubble style....

http://www.ideblogspot.com/2014/02/subscribe-bubble-style.html

free template blogspot NABURJU

2014-02-16T19:09:00.001+07:00

Free template blogspot NABURJU - free template blogspot NABURJU memiliki tampilan unik, free template blogspot NABURJU ini juga lebih ringan, template ini cocok untuk blog pribadi yang menginginkan tampilan yang simpel dan lebih elegan. Bila anda tertarik untuk melihat tampilan free template blogspot NABURJU silahkan kunjungi link demo free template blogspot NABURJU dibawah ini. Jangan lupa lihat fitur template NABURJU ini, dan bila anda tertarik untuk memakai template ini, silahkan download melalui link dibawah...

Profil free template blogspot NABURJU

Nama : NABURJU
Category : Bisnisl Template
Style : Elegan Template
size : 100 KB
Update : Jumat 14 February 2014
owner : Rivai Silaban
Design : www.rivai.org
Publish : www.ideblogspot.com
Powered : Blogspot
Type : Free Template
Link DEMO : http://www.template7.ideblogspot.com/

Fitur free template blogspot NABURJU

Loading Fast
Dynamik Title Heading
Search
Social media
Subscribe
2 kolom layout header
2 kolom layout sidebar
1 kolom layout Blog Post ( blog1 )
2 kolom layout footer ( 4 , 1)
Label style
Space Iklan 125 x 125
Related post
Popular Post
Credit Link
Breadcrumbs
Thread Comment & Icon admin
Pesan Komentar
snippet home page system
Vcard Author
Counter Comment
Blog Pager link
Font Awesome CSS
Box author
dll

Silahkan anda lihat dan cek untuk memastikan fitur dan kemampuan free template blogspot NABURJU ini. Untuk melihat link downloadnya silahkan kunjungi halaman dibawah ini.

http://www.ideblogspot.com/2014/02/free-template-blogspot-naburju.html

free template blogspot PARILA

2014-02-15T14:43:00.000+07:00

Free template blogspot PARILA - free template blogspot PARILA khusus untuk platform Blogspot. free template blogspot PARILA memiliki banyak fitur link, dan sangat cocok digunakan untuk keperluan bisnis online anda. Untuk melihat tampilan demo free template blogspot PARILA ini silahkan kunjungi link demo dibawah ini, bila anda tertarik silahkan download templatenya dengan gratis. Semoga free template blogspot PARILA ini dapat bermanfaat buat anda.

Profil free template blogspot PARILA

Nama : PARILA
Category : Bisnisl Template
Style : Elegan Template
size : 100 KB
Update : Jumat 14 February 2014
owner : Rivai Silaban
Design : www.rivai.org
Publish : www.ideblogspot.com
Powered : Blogspot
Type : Free Template
Link DEMO : http://www.template6.ideblogspot.com/

Fitur free template blogspot NARSIS

Loading Fast
Dynamik Title Heading
1 menu page
Social media
Subscribe
2 kolom layout header ( 2 kolom left )
1 kolom layout sidebar ( 1 , 2 , 1 )
1 kolom layout Blog Post ( blog1 )
2 kolom layout footer ( 4 , 1)
Header Search
Label style
Space Iklan 125 x 125
Space Iklan 250 x 250
Related post
Popular Post
Credit Link
Breadcrumbs
Thread Comment & Icon admin
Pesan Komentar
snippet home page system
Vcard Author
Counter Comment
Blog Pager link
Font Awesome CSS
Box author
dll

Silahkan anda lihat dan cek untuk memastikan fitur dan kemampuan free template blogspot PARILA ini. Untuk melihat link downloadnya silahkan kunjungi halaman dibawah ini.

http://www.ideblogspot.com/2014/02/free-template-blogspot-parila.html

cara membuat widget author box minimalis

2014-02-14T20:44:00.000+07:00

Cara membuat widget author box minimalis - cara membuat widget author box minimalis sangat simpel, cara membuat widget author box minimalis kali ini trinspirasi dari seorang sahabat blogspot saya, dimana beliau membutuhkan author box yang sederhana tapi menarik, sehingga pada kesempatan kali ini saya membuat postingan artikel cara membuat widget author box minimalis di blogspot. Untuk melihat demonya silahkan klik demo dibawah ini lihat bagian bawah halaman , nah bila anda tertarik untuk memasangnya silahkan simak tutorial cara membuat widget author box minimalis di blogspot di bawah ini, langsung saja menuju TKP;

Demo

Pasang code script dibawah ini didalam code CSS template anda.

Code CSS here..

/*****************************************
 Name : Author box minimalis
 By : Rivai Silaban | Ide Blogspot | Blog Design
 Update : Jumat 14 February 2014
 *****************************************/
.Ib-authorboxs {width: 100%; margin:5px auto;}
.Ib-authorboxs .container{padding: 20px;border-radius: 5px;background-color: #376A7B;}
.Ib-authorboxs .container {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #fff;
line-height: 20px;
position: relative;
}
.Ib-authorboxs .container:after,
.Ib-authorboxs .container:before {
top: 100%;
border: solid transparent;
content: &quot; &quot;;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.Ib-authorboxs .container:after {
border-top-color: #376A7B;
border-width: 20px;
left: 65%;
margin-left: -10px;
}
.Ib-authorboxs .container:before {
border-top-color: rgba(0,0,0,0.01);
border-width: 11px;
left: 65%;
margin-left: -11px;
}
.Ib-authorboxs .icon {width: 100%;margin:0 auto;padding:0 10px;}
.Ib-authorboxs .icon ul{margin:0 auto;} 
.Ib-authorboxs .icon li {display: inline;float: left;padding:0 10px;} 
.Ib-authorboxs .BDRS-textarea {
background-color:#ECFDF9;
border:dashed #666 1px;
width: 100%;
margin:5px auto;
}
.Ib-authorboxs .owner {
text-align: right;
padding: 20px 100px 20px 20px;
position: relative;
margin:5px 20px 0 0;
}
.Ib-authorboxs .owner-image-profil {
display: block;
width: 70px;
height: 70px;
border: 5px solid #fff;
border-radius: 50%;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhli0eeKkwqQSmBnFcU-alizVvkiCVRqLf6sz3zYYy8Om4GomriSvZ79_poF-8gJt7rbTosK5IP6PqMfIu95fGfbWgjXHnpClYNfa4WdfVY839bTx_X38VEfDmonqeSCOrqBuwF0KpjkQE/s1600/s.jpg') no-repeat center center;
position: absolute;
right: 10px;
bottom:0;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
}
.Ib-authorboxs .owner-blog-name{
font-family: Georgia;
font-weight: bold;
font-size: 24px;
color: #FF0000;
text-shadow: 2px 1px 1px rgb(153, 153, 153);
font-style: italic;
margin: 0 0 10px 0;
}
.Ib-authorboxs .name{font-family: Verdana;color: #0000FF;font-size: 12px;text-decoration: none;}
.Ib-authorboxs .name:hover{color: #4F0000;text-shadow: 0 1px 1px rgba(255,255,255,0.7);text-decoration:underline;}
.keyword {
height: 20px;
width: 15%;
text-align: left;
float: right;
margin: -31px 35px -30px 0px;
background: #FFD5D5;
border: solid 1px #fff;
}
/* Author box minimalis */ 

Pasang code html dibawah ini sebelum code <data:post.body/>

Code HTML here..

<!-- Author box minimalis code start-->
<div class='Ib-authorboxs'>
 <div class='container'> 
 <div><ul class='icon'>
 <li><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='SHARE WITH GOOGLE PLUS'><img alt='gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlbyoIwflPq7ns0r7r05S82D9kZvYNyXXErosMSUauhaf1Ml9oSRM-WRes9XZxSoe9m0eyPBW1uSka0PFo0M7c8xdm9cxiLBakZtkHxmWysTfi1WXvvrTA82vG39KRrQsYN2VeQ5Z9MbzJ/s1600/gplus5.png' title='SHARE WITH GOOGLE PLUS'/></a></li>
 <li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='SHARE WITH FACEBOOK'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFiSjBvfiTbsWrQRV-c-Zz7KnI_eTnH_c7Gs1N7F4SFaYwLZAlxQrh0rdksz5npZMSzecN9dRpILA1XOk3BavuJB3EsDTWlHZngQioC9iot3_RXhps8Xx9jNchycVHK84o00K8Z4g95PF/s1600/fb5.png' title='SHARE WITH FACEBOOK'/></a></li>
 <li><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='twitter'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikNZYM_mFRWhcY5DscN8iXmJZoHB8gCpMAWeDkyFrrYbbZOTB1YQRq7hkLKbsHr2z0DTy06QHi0OezkkPdXvg7gJHqeURL1xrS9om1KPBxLUy8rLUejEUZbVToAXT69BLPkq81pv1dHcT9/s1600/twit5.png' title='SHARE WITH TWITTER'/></a></li>
 <li><a href='LINK RSS' rel='nofollow' target='_blank' title='SHARE WITH TWITTER'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxnTpTcNcYT_XTC4wZ5AvugibExV89WC_nV__RiXhy_-agUoppAqYkXIrkYhbAo40M-jIzSFu49M7p-8Z1fDJ18RMx_2oKQthw4daumUYNP_x4W69gvkCMKFlh7UULsfc-33_-X8iLvVR/s1600/rss5.png' title='RSS'/></a></li></ul>
 </div>
 <div style='margin-bottom:-20px;'>Anda sedang membaca artikel tentang,<br/> <b><a expr:href='data:post.url' expr:title='data:post.title' style='color: rgb(255, 255, 0);font-size: 11px;font-family: arial;text-align: center;'><data:post.title/></a></b> <br/> Jika anda tertarik dengan artikel ini, silahkan Anda COPAS di situs anda atau sebar luaskan artikel ini, <B>INGAT..!</B> jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya...!!!</div> 
<span style='font:italic 10px Arial, Sans-Serif;'><br/><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>
<div class='owner'>
<p class='owner-blog-name'>Ide Blogspot</p><a class='name' href='LINK PROFIL' rel='nofollow' target='_blank' title='Rivai Silaban'>+Rivai Silaban</a><div class='owner-image-profil'/></div></div></div>
<!-- Author box minimalis end-->

Bila anda masih belum memahami tata cara membuat widget author box minimalis ini silahkan kunjungi halaman sumbernya, dan lihat fungsi dari beberapa fitur codenya, semoga bermanfaat..
Sumber : http://www.ideblogspot.com/2014/02/author-box-minimalis.html

free template blogspot NARSIS

2014-02-13T15:59:00.000+07:00

Free template blogspot NARSIS - free template blogspot NARSIS atau Template NARSIS untuk blogspot. free template blogspot NARSIS ini memiliki banyak fitur dan sangat cocok untuk blog pribadi. free template blogspot NARSIS ini memiliki desain yang elegan dengan loading yang standart ringan. Untuk melihat fitur fitur pada Template NARSIS ini, silahkan lihat Profil templatenya dibawah ini...

Profil free template blogspot TIPO Black

Nama : NARSIS
Category : Personal Template
Style : Elegan Template
size : 120 KB
Update : KAMIS 13 February 2014
owner : Rivai Silaban
Design : www.rivai.org
Publish : www.ideblogspot.com
Powered : Blogspot
Type : Free Template
Donate :Silahkan kirim donasi anda bila anda berminat
Link Demo: http://www.template5.ideblogspot.com/

Fitur free template blogspot NARSIS

Loading Fast
Dynam top
1 menu page
Social media top
2 kolom layout header
1 kolom layout sidebar ( 1 , 2 , 1 )
1 kolom layout Blog Post ( blog1 )
3 kolom layout footer ( 2 , 1 , 1 , 1 )
3 kolom kategory link footer
1 kolom link footer menu
Header Time
Header Search
Label style
Space Iklan 125 x 125
Related post
Popular Post
Credit Link
Breadcrumbs
Social Share
Thread Comment & Icon admin
Pesan Komentar
snippet home page system
Vcard Author
Counter Comment
Blog Pager link
Font Awesome CSS
Box author
dll

Silahkan anda lihat dan cek untuk memastikan fitur dan kemampuan free template blogspot NARSIS ini. Untuk melihat link downloadnya silahkan kunjungi halaman dibawah ini.

http://www.ideblogspot.com/2014/02/free-template-blogspot-narsis.html

free template blogspot

2014-02-11T19:50:00.003+07:00

Free template blogspot TIPO Black - free template blogspot TIPO Black kategori perseorangan, pada postingan free template blogspot TIPO Black kali ini, Ide Blogspot akan membagikan template gratis platform blogspot dengan kategori perseorangan. free template blogspot kali ini saya menyebutnya dengan Template TIPO Black, memiliki 3 warna pilihan sekaligus, untuk melihat profil free template blogspot TIPO Black silahkan simak profil dibawah ini, jangan lupa dilihat link demo templatenya..

Profil free template blogspot TIPO Black

Nama : Tipo Black
Category : Personal Template
color : Blue, Brown & Black
size : 105 KB
Update : Selasa 11 February 2014
owner : Rivai Silaban
Design : www.rivai.org
Publish : www.ideblogspot.com
Powered : Blogspot
Type : Free Template
Donate : Silahkan kirim donasi anda bila anda berminat
Link Tipo Black: http://www.template1.ideblogspot.com/
Link Tipo Blue : http://www.template4.ideblogspot.com/
Link Tipo Brown : http://www.template3.ideblogspot.com/

Fitur free template blogspot TIPO Black

Loading Fast
Dynamik Heading Title
Menu floating top
1 menu page
Social media floating top
2 kolom layout header
1 kolom layout sidebar ( 1 , 2 , 1 )
1 kolom layout Blog Post ( blog1 )
3 kolom layout footer ( 1 , 1 , 1 , 1 )
3 kolom kategory link footer
Header Time
Header Search
Label style
Space Iklan 125 x 125
Related post
Popular Post
Credit Link
Breadcrumbs
Social Share
Thread Comment & Icon admin
Pesan Komentar
snippet home page system
Vcard Author
Counter Comment
Blog Pager link
Font Awesome CSS
dll

Silahkan anda lihat dan cek untuk memastikan fitur dan kemampuan free template blogspot TIPO Black ini. Untuk melihat link downloadnya silahkan kunjungi halaman dibawah ini.

http://www.ideblogspot.com/2014/02/free-template-blogspot-tipo-black.html

Template blogspot seo friendly r2

2014-02-09T22:28:00.000+07:00

Template blogspot seo friendly r2- Template blogspot seo friendly r2 yang saya sebut dengan Violines ini, sangat cocok untuk anda yang membutuhkan template yang memiliki fasilitas layout untuk kategory yang lumayan banyak. Template blogspot seo friendly r2 ramah terhadap mesin pencari dan memiliki code yang ringan. Untuk melihat spesipik dari Template blogspot seo friendly r2 atau template Violines ini silahkan anda lihat dibawah ini...

Profil Template blogspot seo friendly r1

Nama : Violines
Category : Megazine Template
color : Violet
size : 133 KB
Update : Minggu 09 February 2014
Design : www.ideblogspot.com
owner : Rivai Silaban
Type : Premium
Donate : Rp 100.000 / $10 us
Link : http://www.pro2.ideblogspot.com/

Fitur Template blogspot seo friendly r1

Responsive
SEO Friendly ( All of Page, All of Link )
Valid HTML 5 ( All of Page, All of Link )
Loading Fast
Headline News ( newsticker )
Dynamik Heading Title
2 - 1 - 4 kolom layout header
2 kolom layout sidebar ( kiri & Kanan )
1 kolom layout Blog Post ( blog1 )
2 - 4 - 4 kolom layout footer
Header Multi fungsi layout
Menu
Menu image Footer
Profil / image Admin
Social media
Space Iklan 125 x 125 , 250 x 250
Sunscribe Box
Popular Post
link footer right & Credit Link
Breadcrumbs
Related Post SEO Friendly
Social Share
Thread Comment & Icon admin
Pesan Komentar
Readmore automatis home page system
Vcard Author
Counter Comment
Blog Pager link
Font Awesome CSS

Silahkan anda lihat dan cek untuk memastikan fitur dan kemampuan template Violines ini, bila anda berminat untuk memilikinya silahkan hubungi kami melalui contact dibawah ini. Bagi yang tidak berminat, terimakasih atas kunjungannya salam kami..

Nama : Rivai Silaban
email : rivai_silaban@yahoo.com
No Hp : 0822 7601 9755 ( sms only )

Pembeli pertama akan mendapatkan Diskon 50% dengan harga Rp 50.000 pada tenggang waktu mulai dari hari ini, Bila masa tenggang waktu sudah habis, mohon maaf harga diskon untuk promosi ini tidak berguna lagi

Untuk harga diluar tenggang waktu yang ditentukan akan kembali normal seperti harga yang sudah tertera diatas. Harga dapat sewaktu waktu berubah tanpa pemberitahuan sebelumnya..

Pesan

Template diatas memiliki lisensi, dan memiliki fitur fitur untuk blogging, Untuk para pembeli baru kami akan membantu anda untuk setting template anda sampai memang benar benar stabil untuk di jalankan, silahkan hubungi kami secara life Chat, saya akan memberikan link Chatnya untuk anda agar bisa berkomunikasi lebih lanjut.

Kami akan membantu anda dalam menangani situs anda di webmaster tools dan BING serta memandu anda untuk setting robots.text dan meta tag di dasbord dan fitur lainnya.

cara membuat related post seo friendly

2014-02-08T21:07:00.000+07:00

Cara membuat related post seo friendly - trik cara membuat related post seo friendly atau cara membuat related post seo friendly di blogspot. Artikel cara membuat related post seo friendly di blogspot ini terinspirasi dari seorang sahabat logger lama yang telah susah payah memikirkan bagaimana cara membuat widget related post yang lebih seo friendly walau dalam pemakaian sistem script untuk menampilkannya. Artikel cara membuat related post seo friendly ini sudah menghabiskan 4 bln lebih waktu saya dan pemikiran saya untuk menemukan trik ini, dan memang sangat memuaskan hasilnya. Untuk melihat tampilan cara membuat related post seo friendly ini silahkan anda klik DEMO dibawah, lihat bagian related post pada laman demo, bila anda tertarik untuk memasang widget ini dihalaman blogspot anda silahkan lihat tutorial 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.

/*****************************************
 Name : related post seo friendly
 By : Rivai Silaban | Ide Blogspot | Blog Design
 Update : Sabtu 08 February 2014
 *****************************************/
.breadcrumbs-label {padding :0;margin : 0;font-size : 11px;font-weight : normal;}
.breadcrumbs-label a{font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #A81365;text-decoration: none;}
.breadcrumbs-label a:hover{color: #0000FF;}
.breadcrumbs-label .titles {color: #0000ff;}
#ibrelated-posts { float : left; width : 100%; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #ibrelated-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } 
#ibrelated-posts .widget h2, #ibrelated-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } 
#ibrelated-posts a { text-decoration : none; } 
#ibrelated-posts a:hover { text-decoration : none; } 
#ibrelated-posts ul { border : medium none; margin : 10px; padding : 0; } 
#ibrelated-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5BHPHwML90AmbGuaOODDYFVi4ovlHpkYcpDU6FabMtLG961DRx4UHcRLgMP-WDpIRBCAV7XimLMIm1MFd93MYPqv1kOwH5XJc6kP-r1T5zdD2lj4LsWwYMVkF4_Ve9ZAAddOKyQ3_0WM/s1600/ideblogspotrss.gif&quot;) no-repeat 0 6px; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }
/* related post seo friendly */

Install Program Tag HTML

Setelah anda sudah memasang CSS cara membuat Google Plus buttons style saatnya anda memasang kode htmlnya.
Copy code html cara membuat related post seo friendly dibawah ini dan pasang dibawah code <data:post.body/> template anda save dan lihat hasilnya...

<!-- related post seo friendly code start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><script src='http://yourjavascript.com/2942361424/relatedpost.js' type='text/javascript'/> <div><b>Related Posts : </b></div><div><div class='breadcrumbs-label'> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb' title='Breadcrumb'> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'> <span itemprop='title'> Home </span> </a> </span> &#187; <b:loop values='data:post.labels' var='label'> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb' title='Breadcrumb'> <a expr:href='data:label.url + &quot;?&amp;amp;max-results=10&quot;' expr:title='data:label.name' itemprop='url'> <span itemprop='title'> <data:label.name/> </span> </a> </span> <b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span class='titles'> <data:post.title/> </span> </div><b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=related_results_labels&amp;amp;max-results=3&quot;' type='text/javascript'/></b:if></b:loop> </div><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if> <div style='clear: both;'/>
<!-- related post seo friendly code end-->

Kesimpulan

cara membuat related post seo friendly pada postingan kali ini memiliki code yang ringan , SEO Friendly, Valid HTML 5, valid CSS 3 dan tampilan yang menarik walaupun sederhana.
Buat anda yang belum memahami betul code CSS dan HTML silahkan kunjungi link dibawah ini untuk lebih detailnya...

http://www.ideblogspot.com/2014/02/related-post-seo-friendly.html

cara membuat floating social media

2014-02-07T15:07:00.000+07:00

Cara membuat floating social media - tutorial cara membuat floating social media di blogspot. cara membuat floating social media ini sangat simpel ditambah dengan tampilan social media yang sederhana tapi tetap menarik. Untuk memastikan bagaimana tampilan tutorial cara membuat floating social media kali ini silahkan klik icon demo dibawah, nah bila anda tertarik memasangnya silahkan simak tutorial dibawah ini. langsung saja menuju TKP...

Demo

Sematkan code CSS dibawah ini dibagian CSS template anda atau <style>

Code CSS here..

 /*****************************************
 Name : floating social media
 By : Rivai Silaban | Ide Blogspot | Blog Design
 Update : Jumat 07 February 2014
 *****************************************/
.floating-social-media {position: fixed;width: 100px;height: 200px;left: 10px;top: 100px;}
.floating-social-media a{padding: 10px 0;margin:0;text-decoration: none;}
.floating-social-media a:hover{ opacity: .5;}
/* floating social media Ide Blogspot CSS end */ 

Code tag html ini dapat anda pasang dimanapun anda suka, bisa di widget atau langsung didalam code template tepatnya dibawah code <body>

Code HTML here..

 <!-- floating social media Ide Blogspot code start-->
 <div class="floating-social-media">
 <span><a href="https://www.google.com/+RivaiSilaban" target="_blank" rel="nofollow" title="Gplus"><img alt="Gplus invite" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvRflZipzqyZHV4fM9T7eVQ3UoStj9SfhMQJKb3QLadV6Y4RWzqq6MOwLi2NtnnB_Mx1FAP4TCcMR1OQHIdh_gcziLpXMkmXvfzhQznWdngQR6P9lgZ1hyphenhyphenGsI_yfYNfQWjdf4KiGVMOw4/s1600/G+.png" title="Gplus"/></a></span>
 <span><a href="https://www.facebook.com/rivaisilaban" target="_blank" rel="nofollow" title="Facebook"><img alt="Facebook like" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP_TqezwGOnFIryLcM3ZyBSm0oqnEDKrhQZlRSzFMExcFCG8l38FLSH3i3hKCRaDBkXywkHFcmw_fM7C7Aj_sUxWb30FDZ5uXLRmptp63WYyfgCXLH5Y_ILHMuZ0KWEUO1jqCZ-TIszEg/s1600/FB.png" title="Facebook"/></a></span>
 <span><a href="https://twitter.com/Rivai_Silaban" target="_blank" rel="nofollow" title="RSS"><img alt="feed rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsVtB5PyGLPXr6aOAY6kRl04eN9QmDlHLdjy6boD0YrKuAp8At00vfS699f_JVPS0N2-_JFRR4Ldw_sjnV8IDPVkwIjOPrfwvaU8jv01T6HQO50cKDZASa9VoqNeO7BxXpigOpYRBeUjQ/s1600/TW.png" title="RSS"/></a></span>
 <span><a href="http://feeds.feedburner.com/idblogspot" target="_blank" rel="nofollow" title="Twitter"><img alt="Follow Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguCgIvSf5PhU8U8Ap9bvdbQqiHfN9p8ueBQ4TlYO3m6Z34OW3wx9bkPYNLH9XJ6lDsBLFm8cR9srTw_PZvKDVrEop3yv6Ckhqvpx5jcCIc3DVlZgF_rFJ_totIOReSwMbS4xV6H37RePw/s1600/RSS.png" title="Twitter"/></a></span></div>
<!-- floating social media Ide Blogspot code end-->

Code diatas merupakan code CSS dan code tag HTML dari cara membuat floating social media yang mungkin sudah anda lihat tampilannya pada halaman demonya, Buat teman teman yang masih belajar blogging sama seperti saya silahkan kunjungi halaman tata cara membuat floating social media lebih detail....

http://www.ideblogspot.com/2014/02/floating-social-media.html

feed validator tool

2014-02-05T23:43:00.001+07:00

Feed validator tool- uji feed blogspot dengan feed validator tool untuk mengetahui kevalidan feed atom halaman blog anda. Tool feed validator ini dapat anda gunakan dengan geratis. Fungsi feed ini sendiri sangat membantu kinerja blog anda untuk meningkatkan trafik pengunjung. Artikel postingan kali ini terinspirasi oleh sahabat saya yang memerlukan tool validasi feed pada RSS blognya.

Berbicara mengenai feed mungkin para teman teman blogspot kita hanya memikirkan hal ini seperti biasa biasa saja, dan tidak banyak mempengaruhi kinerja pada halaman blognya, tapi saya berkata bahwa hal tentang feed ini harus lebih kita pahami, dalam pengertiannya feed itu merupakan teknologi yang dibangun dengan RSS mengizinkan kita untuk berlangganan kepada situs web yang menyediakan umpan web (feed) RSS, biasanya situs web yang isinya selalu diganti secara reguler. Untuk memanfaatkan teknologi ini kita membutuhkan layanan pengumpul. Pengumpul bisa dibayangkan sebagai kotak surat pribadi. Kita kemudian dapat mendaftar ke situs yang ingin kita tahu perubahannya. Namun, berbeda dengan langganan koran atau majalah, untuk berlangganan RSS tidak diperlukan biaya, gratis. Tapi, kita biasanya hanya mendapatkan satu baris atau sebuah pengantar dari isi situs berikut alamat terkait untuk membaca isi lengkap artikelnya.

RSS digunakan secara luas oleh komunitas weblog untuk menyebar ringkasan tulisan terbaru di jurnal, kadang-kadang juga menyertakan artikel lengkap dan bahkan gambar dan suara. Sekitar 2000, penggunaan RSS meluas di berbagai penerbitan berita, termasuk Reuters, CNN, dan BBC. RSS digunakan pada hampir semua situs berita atau weblog, dengan berbagai tujuan termasuk: pemasaran, press release, laporan reguler produk, atau aktivitas lain yang membutuhkan pemberitahuan periodik dan tentunya publikasi. Sebuah program komputer yang dikenal sebagai pembaca umpan (feed reader) bertindak sebagai pengumpul. Program ini mengecek situs yang menyediakan RSS dan menampilkan berbagai artikel baru yang ditemukan. Tenggang waktu dan siklus pengumpulan RSS biasanya dapat diatur oleh penggunanya. Program pengumpul dapat berupa program komputer atau sebuah layanan web yang tersedia online.

Program pengumpul RSS di komputer biasanya berupa aplikasi (software) sendiri yang harus dipasang di komputer sebelum dapat digunakan. Program ini tersedia untuk berbagai jenis sistem operasi dengan harga bervariasi. Ada juga program pengumpul RSS yang gratis. Lihat Daftar pengumpul RSS. Program pengumpul di web tidak memerlukan pemasangan dan pengaturan, kita dapat melihat dan mengecek RSS kita di mana saja, asal ada browser dan koneksi internet. Beberapa layanan pengumpul RSS juga menyediakan penggabungan dan juga pencarian.

Sebuah web yang menyediakan umpan RSS biasanya ada link (tautan) dengan sebuah tombol bertuliskan XML (XML iconic button) atau RSS (RSS iconic button). Namun disarankan menggunakan RSS daripada XML agar tidak membuat kerancuan (sebab setiap RSS adalah XML, tapi tidak tiap XML itu RSS). Seperti ditulis di atas, ada beberapa versi RSS, dan bahkan ada kelompok membuat format baru Atom yang juga telah diadopsi oleh banyak situs. Tapi pemakai RSS tidak perlu bingung, para pembuat program pengumpul sindikasi biasanya bisa mengenali kedua format tersebut, bahkan masih menyediakan pembaca untuk format yang lama.1

Nah setelah anda sudah mulai memahami fungsi ( feed ) RSS itu sendiri, saatnya anda untuk menggunakan tool geratisan dari feed validator tool untuk meneliti kevalitan dari feed blog anda. Untuk mengujinya silahkan kunjungi http://feedvalidator.org/ , setelah anda berada di halaman feed validator tersebut silahkan ketikkan URL blog anda kemudian klik " Validate " tunggu beberapa saat dan lihat hasilnya, semoga bermanfaat.

Template blogspot seo friendly r1

2014-02-02T17:50:00.000+07:00

Template blogspot seo friendly r1- Template blogspot seo friendly r1 yang saya sebut dengan BLUE DRAGON. Template blogspot seo friendly r1 memiliki fitur lengkap untuk blogging. Template blogspot seo friendly r1 berbasis template majalah, yang memiliki ruang untuk menempatkan iklan anda, sehingga tidak mengganggu postingan blog kesayangan anda. Disamping fitur diatas Template blogspot seo friendly r1 ini valid HTML 5 dan SEO Friendly serta memiliki loading fast yang standart untuk basis template majalah. Template blogspot seo friendly r1 ini ramah terhadap berbagai screen atau yang biasa disebut dengan Responsive, untuk lebih jelasnya silahkan lihat fitur Template blogspot seo friendly r1 dibawah ini.

Profil Template blogspot seo friendly r1

Nama : Blue Dragon
Category : Megazine Template
color : Blue, white & Black
size : 107 KB
Update : Sabtu 01 February 2014
Design : www.ideblogspot.com
owner : Rivai Silaban
Type : Premium
Donate : Rp 100.000 / $10 us
Link : http://www.pro1.ideblogspot.com/

Fitur Template blogspot seo friendly r1

SEO Friendly ( All of Page, All of Link )
Valid HTML 5 ( All of Page, All of Link )
Loading Fast
Dynamik Heading Title
2 kolom layout header
3 kolom layout sidebar
1 kolom layout Blog Post ( blog1 )
4 kolom layout footer
5 kolom kategory link header
4 kolom kategory link footer
1 kolom profil footer blog
Header space Iklan
Menu
Profil / image Admin
Social media
logo bank image
Space Iklan 125 x 125 , 250 x 250 , 120 x 600
Sunscribe Box
Popular Post
link footer right & Credit Link
Breadcrumbs
Related Post
Social Share
Thread Comment & Icon admin
Pesan Komentar
snippet home page system
Vcard Author
Counter Comment
Blog Pager link
Font Awesome CSS

Silahkan anda lihat dan cek untuk memastikan fitur dan kemampuan template Blue Dragon ini, bila anda berminat untuk memilikinya silahkan hubungi kami melalui contact dibawah ini. Bagi yang tidak berminat, terimakasih atas kunjungannya salam kami..

Nama : Rivai Silaban
email : rivai_silaban@yahoo.com
No Hp : 0822 7601 9755 ( sms only )

Harga dapat sewaktu waktu berubah tanpa pemberitahuan sebelumnya..

Pesan

Kami akan membantu anda dalam menangani situs anda di webmaster tools dan BING serta memandu anda untuk setting robots.text dan meta tag di dasbord dan fitur lainnya.

cara membuat Image pseudo style

2014-02-01T21:59:00.000+07:00

Cara membuat Image pseudo style - cara membuat Image pseudo style cukup simpel, cara membuat Image pseudo style dapat anda pergunakan pada setiap gambar pada halaman anda, cara membuat Image pseudo style ini juga dapat anda manfaatkan untuk tampilan gambar pada postingan anda agar lebih menarik, untuk melihat tampilan cara membuat Image pseudo style, silahkan klik demo dibawah, nah bila anda tertarik untuk pemasangannya silahkan simak tutorial dibawah ini.

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.

/*****************************************
 Name : Image pseudo style
 By : Rivai Silaban | Ide Blogspot | Blog Design
 Update : Sabtu 01 February 2014
 ******************************************/
.image-pseudo-style {
position:relative;
z-index:1;
width:auto;
margin:0 auto;
padding:20px 0 0;
font:14px/1.5 Arial, sans-serif;
text-align:center;
color:#333;}
.image-pseudo-style:after {
content:"";
display:block;
clear:both;
visibility:hidden;
height:0;
font-size:0;}
.pseudo-shadow {
position:relative;
float:left;
width:13%; 
padding:0; 
margin:2em 10px 4em; 
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
.pseudo-shadow:before,
.pseudo-shadow:after {
content:"";
position:absolute; 
z-index:-2;}
.pseudo-shadow p {
font-size:16px;
font-weight:bold;}
.pseudo-show {border-radius:4px;}
.pseudo-show:before,
.pseudo-show:after { 
bottom:15px;
left:10px;
width:50%;
height:20%;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
transform:rotate(-3deg);}
.pseudo-show:after {
right:10px; 
left:auto;
transform:rotate(3deg);}
.paseudo-rotated {
box-shadow:none;
transform:rotate(-10deg);}
.paseudo-rotated :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
border: solid 1px #999;}
/* Image pseudo style css end */

Install Program Tag HTML

Setelah anda sudah memasang CSS cara membuat Image pseudo style ini saatnya anda memasang kode htmlnya.
Copy code cara membuat Image pseudo style dibawah ini dan pasang diblog anda...

<!-- Image pseudo style code start-->
 <div class="image-pseudo-style">
<div class="pseudo-shadow pseudo-show paseudo-rotated">
 <p><img title="Rivai Silaban" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNXdQTMScOu2q01mQqPAURyePzwk7e0H9B41ZqrA7rvLGvAXGioxkf6V0Lcgx3ORBKXlxNaW-s5J_K9-49p7yrMDFXDEcB3hYG4CtbnEZ6Kp-zVld4-3uWTbAGDtexMkG7rptfLpqIiLE/s1600/silaban.png" alt="image pseudo style"/></p>
 </div></div>
<!-- Image pseudo style code end-->

Kesimpulan

Silahkan anda edit code CSS cara membuat Image pseudo style ini untuk menyesuaikan pada thems template anda, bila anda merasa perlu membutuhkan informasi tambahan tentang pemasangan cara membuat Image pseudo style ini, silahkan kunjungi halaman sumbernya...

http://www.ideblogspot.com/2014/02/image-pseudo-style.html