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

cara membuat backround blog berwarna gradient

warna gradien adalah gabungan dua warna yang dijadikan 1 tapi ya gak sampai berubah warnanya, emang pewarna..,, hahaha, sudah guyonnya, untuk jelasnya seperti gambar disamping atau background blog admin

sekarang kita akan mengubah background blog menjadi warna gradien, tentu saja gradien sudah menjadi daya tarik tersendiri bagi pengunjung, Kita bisa membuat berbagai macam background semisal dengan menambahkan warna, gambar, atau keduanya. Namun ada cara yang lebih menarik lagi dalam mendesain background agar terlihat lebih bagus dan lebih menarik, yaitu dengan cara membuat background warna gradient. Untuk membuatnya kita bisa menggunakan kode html disertai selector CSS, atau bisa juga menggunakan CSS saja.

kita dapat merubah background menjadi gradien dengan menambahkan kode dibawah pada tag <body>

style="background: #000; background: -moz-linear-gradient(top, #009900, #000000); background: -ms-linear-gradient(top, #009900, #000000); background: -o-linear-gradient(top, #009900, #000000); background: -webkit-linear-gradient(top, #009900, #000000); background: linear-gradient(top, #009900, #000000);

jadi tag body akan menjadi seperti ini :
<body style="background: #000;
background: -moz-linear-gradient(top, #009900, #000000);
background: -ms-linear-gradient(top, #009900, #000000);
background: -o-linear-gradient(top, #009900, #000000);
background: -webkit-linear-gradient(top, #009900, #000000);
background: linear-gradient(top, #009900, #000000);>

keterangan :
#000 adalah warna asli jika browser tidak mendukung gradient, namun sudah kebanyakan browser mendukung gradien
#009900 adalah warna atas
#000000 adalah warna bawah

Read More

cara membuat widget melayang di blog

dalam blog tentu ada yang namanya widget atau gadget, widget dapat membuat blog jauh lebih menarik, blog dapat diisi dengan tak terbatas widget, namun jika kebanyakan tentu dapat membuat blog menjadi berat, sangat sulit untuk dibuka karena terlalu banyak widget dan source file widgetnya,

namun ada permasalahan lain yaitu area widget, biasanya para blogger memilih cara ini untuk mempersingkat tampilan blog yaitu dengan melayangkan widget
dalam artikel cara membuat widget melayang di blog

Read More

cara membuat breadcumbs di blog

Breadcumbs adalah sebuah menu navigasi yang ada diatas judul postingan seperti diblog saya atau gambar dibawah ini.
nah kali ini saya akan menjelaskan cara membuat breadcumbs diblog anda

Read More