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

widget social media scale di blogspot

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

Di poskan oleh : Unknown | Dipublish pada : 11:55 PM | 2 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

Tutorial menampilkan post date diwaktu yang sama

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

1. Login kedasbord Blogspot anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code seperti dibawah ini :
   
   <b:if cond='data:post.dateHeader'>
   <h2 class='date-header'><data:post.dateHeader/></h2>
   </b:if>
   
   
4. Setelah ketemu silahkan ganti code tersebut dengan code dibawah ini :
   
   <b:if cond='data:post.dateHeader'>
   <script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
   <h2 class='date-header'><data:post.dateHeader/></h2>
   <b:else/>
   <h2 class='date-header'>
   <script>document.write(ultimaFecha);</script>
   </h2>
   </b:if>
   
   
5. 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

Di poskan oleh : Unknown | Dipublish pada : 2:03 PM | 0 komentar

Read More

feed validator tool

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.

Di poskan oleh : Unknown | Dipublish pada : 11:43 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 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

cara mebuat fasilitas chat di blog

Cara mebuat fasilitas chat di blog - tehnik atau cara mebuat fasilitas chat di blog dengan geratis, cara mebuat fasilitas chat di blog ini memanfaatkan aplikasi gratis dari situs Chatroll yang memang memakai fitur lumayan bagun untuk akun gratisan. Fitur social media untuk sign in dan fitur sound atau berbicara langsung kepada teman atau siapapun juga teman chat anda, untuk melihat tampilan demo cara mebuat fasilitas chat di blog ini silahkan lihat link download, atau bisa saja anda lihat link sumbernya, bila anda tertarik memasang fasilitas chat ini, silahkan simak tutorial dibawah ini, langsung saja menuju TKP.

Sumber :
http://www.ideblogspot.com/2014/01/fasilitas-chatroll-untuk-blogspot.html
Demo : http://demo.rivai.org/rivai%20chat.html

fasilitas chatroll untuk blogspot

1. Kunjungi laman http://chatroll.com/
2. Setelah anda berada dihalaman situs tersebut silahkan menu menu pendaftaran baru klik " Sign Up Free " yang berada di pojok atas kanan anda.
3. Pada halaman pendaftaran silahkan isi semua informasi untuk akun anda, setelah itu periksa email anda untuk melakukan verifikasi akun.
4. Setelah itu masuk menggunakan akun anda yang sudah terverifikasi tersebut dan klik " Create a new live event " untuk membuat suatu aplikasi chat anda.
   
   Tahap 1 : Silahkan buat nama Chat anda ( nana untuk chat room ), klik Continue
   Tahap 2 : Pilih Platform Blogger ( untuk Blogspot ) , Klik Continue kemudian anda akan dibawa pada halaman HTML embed Code , silahkan anda copy codenya dan pasang dihalaman atau di widget blogspot anda.
   Tahap 3 : Costomize , klik " Go to setting now " untuk setting tampilan dan berbagai fitur lainnya.
   
   
5. Pada halaman Dasbord Chatroll anda dapat memanfaatkan fitur fitur yang telah tersedia untuk anda gunakan seperti
   
   Analytics : Untuk melihat data statistik pada aplikasi Chat anda
   
   Settings :
   Basic merupakan tempat Upload foto dan setting link anda.
   Appearance merupakan halaman fasilitas untuk mengganti warna room, sound, user position dan fasilitas CSS.
   Access Merupakan halaman fasilitas untuk akses anda seperti akses ke social media facebook dan twitter begitu juga dengan kapasitas chat.
   Users merupakan halaman untuk pengelompokan sistem User seperti Moderator, Administrator, Signed In dan Gues.
   Permission halaman untuk mengatur semua fasiltas chat anda
   
   dan berbagai fasilitas lainnya seperti Moderation, Social Media, Archipe serta fasilitas untuk menginstall Module chat.
   
   
   
6. Untuk setiap member situs Chatroll memberikan peluang untuk Upgrade akun anda.
   

Kesimpulan

Fasilitas Chat baik yang gratisan dan premium dapat anda pergunakan untuk meningkatkan kinerja situs blog anda. Fasilitas chat ini dapat anda manfaatkan untuk menarik minat pengunjung anda untuk betah berlama lama di halaman blog anda, hal ini sangat bagus untuk blog anda.

Di poskan oleh : Unknown | Dipublish pada : 7:05 PM | 0 komentar

Read More