fungsi mode html pada menu entri baru blogspot

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 :

1. Login ke dasbor
2. Klik " Entri Baru "
3. Pada halaman " Entri Baru " silahkan pilih mode " HTML " pada bagian sebelah kiri halaman
4. 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.

Di poskan oleh : Unknown | Dipublish pada : 12:44 AM | 6 komentar

Read More

fungsi compose pada menu entri baru blogspot

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.

Di poskan oleh : Unknown | Dipublish pada : 11:36 AM | 3 komentar

Read More

cara membuat box keterangan code

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

Di poskan oleh : Unknown | Dipublish pada : 11:44 AM | 1 komentar

Read More

fungsi float pada html

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

Di poskan oleh : Unknown | Dipublish pada : 10:43 AM | 3 komentar

Read More

fungsi style clear both

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 :

<div style="clear:both"/> atau
<p style="clear: both"/> atau
<span style="clear: both"/>

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

Di poskan oleh : Unknown | Dipublish pada : 1:33 PM | 2 komentar

Read More

fungsi margin pada html

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

Di poskan oleh : Unknown | Dipublish pada : 9:57 PM | 8 komentar

Read More

cara membuat style link type square

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

Di poskan oleh : Unknown | Dipublish pada : 3:01 PM | 0 komentar

Read More

cara membuat Image pseudo style

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

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

Di poskan oleh : Unknown | Dipublish pada : 9:59 PM | 0 komentar

Read More

cara membuat speech bubble style

Cara membuat speech bubble style - cara membuat speech bubble style ini sangat mudah dan memiliki tampilan menarik, cara membuat speech bubble style berfungsi untuk menampilkan suatu text agar lebih berkesan elegan dengan sistem tampilan tooltip. Bila anda tertarik untuk memasang tampilan cara membuat speech bubble style ini di halaman blog anda silahkan simak tutorial dibawah jangan lupa lihat demonya untuk memastikan bahwa anda menyukainya...

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : speech bubble style
By : Rivai Silaban | Ide Blogspot | Blog Design
Update : Jumat 31 January 2014
******************************************/
.speech-bubble-style {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#fff;
border-radius:10px;
background-color: #2F485B;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.speech-bubble-style:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:60px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #2F485B;
}
.speech-bubble-style:after {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:80px;
width:0;
height:0;
border-width:0;
border-right-width:10px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #fff;
}
/* speech bubble style code CSS */

Code HTML dibawah ini merupakan code format tag html cara membuat speech bubble style...

<p class="speech-bubble-style">contah tampilan " speech bubble style "</p>

Kesimpulan

Pemasangan code html speech bubble style ini dapat anda pasang dimanapun anda butuhkan selama masih di sekitar blog yang telah anda pasang CSS speech bubble style ini sebelumnya, yang kita butuhkan hanyalah pemanggilan sistem fungsi CSS speech bubble style itu sendiri..

Buat anda yang belum memahami betul code CSS dan HTML silahkan kunjungi link dibawah ini untuk lebih detailnya...

http://www.ideblogspot.com/2014/01/speech-bubble-style.html

Di poskan oleh : Unknown | Dipublish pada : 4:11 PM | 0 komentar

Read More

cara membuat Google Plus buttons style

Cara membuat Google Plus buttons style - tutorial cara membuat Google Plus buttons style yang memang pada dasarnya cara membuat Google Plus buttons style sangat menarik dan sedap dipandang mata. cara membuat Google Plus buttons style memiliki tampilan sederhana sebenarnya, tapi karena pengaruh nama situs terbesar sejagat raya ini akhirnya Google Plus buttons style ini juga menjadi pilihan banyak orang termasuk blogger sendiri. Untuk melihat demonya saya pikir anda sudah sering melihat tapi untuk demo tampilan tutorial ini silahkan kunjungi link demo dibawah, bila anda tertarik untuk memasang Google Plus buttons style ini pada setiap button blogspot anda silahkan simak tutorial dibawah ini..

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Google Plus buttons style
By : Rivai Silaban | Ide Blogspot | Blog Design
Update : Selasa 28 January 2014
******************************************/
button {
text-decoration: none;
text-shadow: 0px 1px 0px rgb(255, 255, 255);
font: bold 11px/17px Helvetica,Arial,sans-serif;
display: inline-block;
float: left;
margin: 5px;
padding: 5px 6px 4px;
border: 1px solid rgb(217, 217, 217);
border-radius: 2px;
transition: border-color 0.2s ease 0s;
height: 29px !important;
cursor: pointer;
color: rgb(68, 68, 68);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
button:hover {
background: #F4F4F4;
border-color: #C0C0C0;
color: #333;
box-shadow:0 0 2px #ccc;
}
button:active {
border-color: #4D90FE;
color: #4D90FE;
-moz-box-shadow:inset 0 0 10px #D4D4D4;
-webkit-box-shadow:inset 0 0 10px #D4D4D4;
box-shadow:inset 0 0 10px #D4D4D4;
}
/* CSS button warna Biru */
button.bluebtn {
border: 1px solid #3079ED !important;
background: #4B8DF8;
background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
background: -o-linear-gradient(top, #4C8FFD, #4787ED);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.bluebtn:hover {
border: 1px solid #2F5BB7 !important;
background: #6099F9;
background: -webkit-linear-gradient(top, #6099F9, #076BDA);
background: -moz-linear-gradient(top, #6099F9, #076BDA);
background: -ms-linear-gradient(top, #6099F9, #076BDA);
background: -o-linear-gradient(top, #6099F9, #076BDA);
}
/* CSS button warna Hijau */
button.greenbtn {
border: 1px solid #29691D !important;
background: #3A8E00;
background: -webkit-linear-gradient(top, #3C9300, #398A00);
background: -moz-linear-gradient(top, #3C9300, #398A00);
background: -ms-linear-gradient(top, #3C9300, #398A00);
background: -o-linear-gradient(top, #3C9300, #398A00);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.greenbtn:hover {
border: 1px solid #2D6200 !important;
background: #4ABB00;
background: -webkit-linear-gradient(top, #4ABB00, #368200);
background: -moz-linear-gradient(top, #4ABB00, #368200);
background: -ms-linear-gradient(top, #4ABB00, #368200);
background: -o-linear-gradient(top, #4ABB00, #368200);
}
/* CSS button warna Merah */
button.redbtn {
border: 1px solid #D14836 !important;
background: #D64937;
background: -webkit-linear-gradient(top, #DC4A38, #D14836);
background: -moz-linear-gradient(top, #DC4A38, #D14836);
background: -ms-linear-gradient(top, #DC4A38, #D14836);
background: -o-linear-gradient(top, #DC4A38, #D14836);
-webkit-transition: border .20s;
-moz-transition: border .20s;
-o-transition: border .20s;
transition: border .20s;
}
button.redbtn:hover {
border: 1px solid #B0281A !important;
background: #D14130;
background: -webkit-linear-gradient(top, #DC4A38, #C53727);
background: -moz-linear-gradient(top, #DC4A38, #C53727);
background: -ms-linear-gradient(top, #DC4A38, #C53727);
background: -o-linear-gradient(top, #DC4A38, #C53727);
}
button.action:hover {
-moz-box-shadow: 0 1px 0px #DDD;
-webkit-box-shadow: 0 1px 0px #DDD;
box-shadow:iset 0 1px 0px #DDD;
}
button.action:active {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-color: #C6C6C6 !important;
}
button.bluebtn:active {border-color: #2F5BB7 !important;}
button.greenbtn:active {border-color: #2D6200 !important;}
button.redbtn:active {border-color: #B0281A !important;}
button span.label {
display: inline-block;
float: left;
line-height: 17px;
height: 18px;
padding: 0 1px;
overflow: hidden;
color: #444;
-webkit-transition: color .20s;
-moz-transition: color .20s;
-o-transition: color .20s;
transition: color .20s;
}
button span.label {line-height: 15px !important;}
button:hover .label.bluebtn {color: #7090C8;}
button:hover .label.greenbtn {color: #42B449;}
button:hover .label.yellow {color: #F7CB38;}
button.bluebtn .label {color: #FFF !important;text-shadow: 0 1px 0 #2F5BB7 !important;}
button.greenbtn .label {color: #FFF !important;text-shadow: 0 1px 0 #2D6200 !important;}
button.redbtn .label {color: #FFF !important;text-shadow: 0 1px 0 #B0281A !important;}
button.action .label {padding: 0 17px !important;}
button.action:active .label {color: #333 !important;}
button.bluebtn:active .label, button.greenbtn:active .label, button.redbtn:active .label {color: #FFF !important;}
/* CSS end Google Plus buttons style */

Install Program Tag HTML

• Setelah anda sudah memasang CSS cara membuat Google Plus buttons style saatnya anda memasang kode htmlnya.
• Copy code cara membuat Google Plus buttons style dibawah ini dan pasang diblog anda...
  

<!-- Google Plus buttons style code start-->
<a href="http://www.ideblogspot.com/" target="_blank">
<button class="action bluebtn"><span class="label">Save</span></button></a>
<a href="http://www.ideblogspot.com/" target="_blank">
<button class="action redbtn"><span class="label">Upload</span></button></a>
<a href="http://www.ideblogspot.com/" target="_blank">
<button class="action greenbtn"><span class="label">Comment</span></button></a>
<a href="http://www.ideblogspot.com/" target="_blank">
<button class="action"><span class="label">Cancel</span></button></a>
<!-- Google Plus buttons style code end-->

Kesimpulan

Code CSS diatas bukan code asli dari CSS buttons google plus, sebab google plus sudah memiliki sertifikat lisensi atas semua code yang telah dipakai oleh Google, tutorial ini hanya buatan sendiri atau hanya untuk menampilkan kemiripan tampilan saja, saya bukan bermaksud untuk melanggar TOS dari google..

Buat anda yang belum memahami betul code CSS dan HTML silahkan kunjungi link dibawah ini untuk lebih detailnya...

http://www.ideblogspot.com/2014/01/google-plus-buttons-style.html

Di poskan oleh : Unknown | Dipublish pada : 5:40 PM | 2 komentar

Read More