Cara membuat tombol social media pada blog

Assalamualaikum, sobat blogger dah lama saya gak ngepost, kali ini saya akan share cara membuat tombol sosial media di blog, nah pasti sobat pasti mengenal apa itu sosial media

sosial media adalah media online dengan para penggunanya bisa dengan mudah berpatisipasi berbagi dan menciptakan isi meliputi blog, forum dan jejaring sosial

widget ini mungkin jadi bermanfaat bagi anda, dengan widget ini anda dapat mengunfang visitor untuk tergabung atau terlibat dalam jejaring sosial anda, membuat visitor lebih akrab dengan anda, dan dapat meningkatkan reputasi blog anda, tombol sosial media ini di lengkapi dengan efek hover pada tombol tersebut

berikut langkah-langkahnya :

• login ke dashboard blogger sobat
• masuk tata letak /layout
• pilih HTML/Java Script
• masukkan kode dibawah ini

<style> #tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} #tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} #tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} #tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaor-SryFqognWf1jfnajM9y71vu7OJzzQ2p_14UVZuiLos98-T5njDFyxsQEFAe4JeKOyMJqEMydcl7x8Ppv5Quq9JRVMXxvC32r0DnRNa3VJhHUYvLeSFgXh0oHDw4Y6JMBVx8xR1MI/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} #tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} #tbisose .icon{overflow:hidden; color:#fafafa;} #tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} #tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #tbisose li:hover .icon, .touch #tbisose li .icon{width:210px;} .touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} </style> <ul id="tbisose"> <li data-alt="Follow us on Facebook"><a class="icon facebook" href="URL">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter"><a class="icon twitter" href="URL">Follow us on Twitter</a></li> <li data-alt="Follow us on Google+"><a class="icon googleplus" href="URL">Follow us on Google+</a></li> <li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="URL">Follow us on Pinterest</a></li> <li data-alt="Subscribe with RSS"><a class="icon rss" href="URL">Subscribe with RSS</a></li> </ul> <small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"> <a href="http://badarclan.blogspot.com/2013/03/cara-membuat-tombol-social-media-pada.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div> </small>

•  Ganti kata URL dengan masing masing alamat social media
  

Read More

Membuat efek back to the future

hmmm, lama gak ngeklik tombol "entri baru", kali ini kang badar wildanie berbagi sesuatu yang mungkin anda tertarik untuk membaca dan mempraktekannya, yaitu membuat efek  back to the future pada photoshop
disini saya menggunakan photoshop CS5
bagi sobat yang mungkin sering liat film film yang menceritakan tentang perjalanan seseorang kemasa lalu ataupun ke masa depan pasti anda akan melihat mesin waktu yang melesat dengan kecepatan tinggi atau lihat gambar disamping

Read More

membuat efek fokus photoshop

Kali ini kita akan membuat efek yang keren dengan teknik radial blur di sekitar area gambar yang menjadi foto inti, sambil belajar  membuat seleksi pada objek foto.
yaitu efek fokus pada object yang kita gunakan sebagai titik fokus
contoh seperti gambar disamping, gambar disamping menunjukkan kucing saya pasti hahaha, maksut saya gambar seperti disamping wilayah selain kucing terdapat blur atau buram, sehingga kucing terlihat fokus

ya sesuai dengan judulnya membuat efek fokus photoshop
berikut langkah langkahnya :

Read More

Cara membuat sitemap di blog

sitemap dalam istilah bahasa indonesia adalah daftar isi, dimana sebuah laman menunjukkan daftar artikel yang dipublikasikan blog tersebut, sitemap dapat memudahkan pengunjung dalam mencari artikel yang mereka cari

kali ini saya akan berbagi, memberikan cara untuk membuat sitemap

dengan langkah sederhana, sitemap ini adalah bersifat otomatis jadi sobar blogger jika mengeposkan sebuah artikel baru maka langsung terlihat di sitemap

berikut langkah langkahnya :

Read More