TEKNIK KOMPUTER JARINGAN DESKRIPSI SINGKAT BLOG

Senin, 23 Maret 2015

Cara memasang meta tag 2014

Tempat Belajar Seo Pemula Dari Dasar sampai Mahir full Gambar dan Video agar mudah di pahami dan di aplikasikan Sobat blogger, melanjutkan artikel sebelumnya yakni Cara Memasang Title Tag Pada blogspot tentu sobat seharusnya belajar dan menerapkan Seo onpage secara bertahap, bagi sobat yang belum membaca dari Awal silahkan pelajari dulu Cara mudah belajar seo Pemula. Sekarang kita akan melangkah ke tahap berikutnya yakni Cara Pasang Meta Tag Terbaik Super Seo Friendly, kenapa judulnya harus super Seo Friendly? , ya karena Meta tag berikut lain dari yang biasa dan sangat bagus untuk mendongkrak posisi blog sobat di search engine terutama google.

Sebenarnya cara pasang Meta tag ini sudah kami jelaskan pada 1 tahun yang lalu di sini Meta Tag Terbaik untuk Blogspot Lalu kenapa kami jelaskan lagi disini?, ini semua kami lakukan untuk sobat pemula dan panduannya-pun kami jelaskan dengan detail full gambar serta video.

Sebelum melangkah bagaimana cara pemasangan Meta Tag, ada baiknya kita bahas kembali apa itu Meta Tag dan untuk apa mesti repot-repot pasang di blog.

Meta Tag : adalah keterangan dari suatu halaman berdasarkan dari kalimat artikel postingan anda, elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web.
Elemen meta ini harus diletakkan pada bagian “head” dalam HTML tersebut. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web dan untuk menjelaskan mengenai kata kunci (keyword) yang terkait serta untuk metadata lain tanpa “head”.

Meta Tag Description : Meta tag description digunakan untuk memberikan gambaran umum mengenai isi dari halaman web Anda. Ukurannya disarankan tidak lebih dari 200 karakter. Dan usahakan agar description ini bisa menjadi kalimat-kalimat yang letaknya di awal halaman web page yang bersangkutan. Contoh penulisan meta tag description adalah sebagai berikut :

<meta name="description" content=" Cara Zone portal tutorial tips trik terlengkap.";>

Meta Tag Robots Tujuan utama penggunaan meta tag robots adalah untuk menentukan halaman web yang mana bisa di-index oleh spider dan halaman web mana yang tidak. Tag ini sangat berguna sekali terutama jika seuatu website memakai frame untuk navigasinya. Tentunya kita tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine.

Format dasar dari meta tag robots adalah sebagai berikut :

<meta name="robots" content="index | noindex | follow | nofollow">

Sebagai contoh, jika Anda ingin agar spider membaca main page, dan menelusuri semua link yang ada maka tambahkan perintah berikut ini :

<meta name="robots" content="index follow">

Dengan perintah ini spider akan meng-index main page Anda dan menjadwalkan untuk mengindex halaman-halaman lain yang bisa dicari melalui hyperlink (<a href="">).

Perintah berikut ini akan menginstruksikan agar spider tidak meng-index maupun menelusuri link yang ada pada suatu halaman web.

<meta name="robots" content="noindex nofollow">

Oke Anda sudah Cukup paham bukan dengan Meta Tag, jika belum silahkan baca ulang lagi, dan jika ga mau pening silahkan lanjut saja pada prakteknya.

Lalu Bagaimana Cara Pasang Meta Tag Terbaik Super Seo Friendly di Blogspot? Silahkan sobat ikuti langkah-langkah dibawah ini :

Sebelumnya kita lihat dulu Meta Tag bawaan Blogspot seperti pada gambar di bawah ini

Sangat sederhana dan tidak Seo friendly, oke sekarang mari praktek

#Pertamax

Login ke Akun Blog masing-masing
Pilih Blog yang akan Anda pasangkan title tag
Klik blognya
klik template
klik edit HTML

#Kedua
Setelah terbuka Silahkan Lihat dan cari kode ini :

<b:include data='blog' name='all-head-content'/>

Supaya Lebih mudah silahkan copy Code diatas lalu klik ctrl + F pada keyboard lalu pastekan di form search

Contoh pada gambar ini:

Setelah ketemu silahkan lanjut ke tahap berikutnya yakni memasang meta tag terbaik yakni dengan mengcopy dan pastekan kode-kode berikut tepat dibawah
<b:include data='blog' name='all-head-content'/>

Berikut ini Codenya

<meta content='P1-6SfnYegjfmkUtRPD4QF62k-YEvuaT3T-0KR1ckH4' name='google-site-verification'/>
<meta content='/qFUkQ0EONIdzHX2OHyyLLc5LTfJ5MD26/rfLx+FKh0=' name='verify-v1'/>
<meta content='AE5FF6568E9160547E058237A11F9DE9' name='msvalidate.01'/>
<meta content='9BC10362146' name='blogcatalog'/>
<meta content='rZJkOI4geGmt1zP4-BEwXnrLxBs' name='alexaVerifyID'/>
<meta content='-5;120' name='geo.position'/>
<meta content='id' name='geo.country'/>
<meta content='id-us-en' name='language'/>
<meta content='INDEX, FOLLOW, all' name='ROBOTS'/>
<meta content='no-cache' http-equiv='Pragma'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='Blogger' name='generator'/>
<meta content='-1' http-equiv='Expires'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='Scooter'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='alexabot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='ALL' name='SPIDERS'/>
<meta content='ALL' name='WEBCRAWLERS'/>
<meta content='no-cache' http-equiv='Cache-Control'/>
<meta content='general' name='rating'/>
<link href='https://plus.google.com/112764290697005874210' rel='author'/>
<b:if cond='data:blog.pageType != "item"'>
<meta content=' Uraian atau Deskripsi tentang blog anda ' name='description'/>
<meta content=' keyword1 | keyword2 | keyword3 | keyword4 | keyword5 | keyword6 ' name='keywords'/>
</b:if>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.carazone.com/atom.xml' rel='alternate' title='carazone - Atom' type='application/atom+xml'/>
<link href='http://www.carazone.com/rss.xml' rel='alternate' title='carazone - RSS' type='application/rss+xml'/>

Keterangan :

google-site-verification
Anda harus Verifikasi blog di google webmaster, nanti akan diberikan kode Meta, Kode seperti tercetak tebal itu nanti sobat ganti dengan kode yang diberikan, Namun untuk tahun 2014 anda tidak perlu memverifikasi karena sudah otomastis untuk blogspot
Silahkan menuju TKP :google webmasters

Baca dimari : Cara Daftar Verifikasi Blog di Google Webmaster

verify-v1
Anda semestinya juga memverifikasi blog di Google Analytics, kelebihan pasang meta Google Analytics di jelaskan nanti pada artikel berikutnya.
sama dengan diatas, nanti sobat akan diberikan kode dan letakkan sama seperti contoh diatas
Silahkan menuju TKP : http://www.google.com/analytics
Cara Verifikasi, Akan kami jelaskan pada tutorial berikutnya

msvalidate.01
Ini adalah kode Verifikasi untuk Bing Webmaster tools, silahkan sobat daftar dan Verifikasi blog sobat di Bing Webmaster tools. Nah nanti juga sobat akan diberikan kode dan pasanglah kode itu seperti contoh diatas
Silahkan menuju TKP : http://www.bing.com/toolbox

Baca disini : Cara Daftar Verifikasi Blog di Bing Webmaster

alexaVerifyID
Ini adalah kode Verifikasi untuk Alexa, jika sobat belum Verifikasi silahkan segera menuju TKP : http://www.alexa.com/
sama dengan diatas, Verifikasilah blog sobat dan dapatkan kodenya.

Cara Verifikasi Blog di Khodiri
blogcatalog
Ini adalah kode Verifikasi untuk blogcatalog,jika sobat belum Verifikasi silahkan segera menuju TKP : http://www.blogcatalog.com/

Cara Verifikasi, Akan kami jelaskan pada tutorial berikutnya

https://plus.google.com/112764290697005874210
Ganti dengan Id Google + sobat

http://www.carazone.com/atom.xml
Ganti dengan Blog masing-masing

http://www.carazone.com/rss.xml'
Ganti dengan Blog masing-masing

# Terakhir Klik Simpan

Cara membuat & memasang meta tag di blogger

Membuat meta tag di blogger supaya lalu lintas blog jadi ramai dari mesin pencari terutama dari si om Google dan blog loe menjadi lebih SEO friendly.

Apa sih meta tag? Sedikit penjelasan gan, meta tag itu intinya buat ngasi tau mesin pencari tentang informasi isi dari blog ato situs loe. Meta tag ini juga mengoptimalkan mesin pencari untuk mengindeks blog kalian dengan benar dan akurat.

Langsung aja gan, mari kita nambahin meta tag buat blog kalian. Yang pertama kalian harus nambahin 2 meta tag utama yang penting. Pertama meta tag deskripsi yakni meta tag yang ngejelasin ato ngambarin tentang blog kalian, lalu yang kedua meta tag keyword yang ngejelasin kata kunci dari blog kalian. Cara nambahinya begini gan.

Cara Membuat & Memasang Meta Tag Di Blogger

Pertama log in ke Blogger, lalu klik Template dan pilih Edit HTML.

Lalu cari kode di bawah ini gan.

Terus copy kode dibawah ini dan paste dibawahnya gan.

So ntar hasilnya seperti ini gan.

Utuk pengisian deskripsi blog, isi sesuai dengan blog loe. Misal blog tentang kucing, contoh deskripsinya seperti ini " Blog yang memberikan informasi tentang cara merawat dan memelihara kucing di rumah dengan mudah. " misal kayak gitu gan. Usahain panjang deskripsi antara 150-160 karakter.

Lalu untuk meta keywordsnya isi dengan kata kunci yang mengacu pada judul blog buat memaksimalkan pencarian di mesin pencari. Misal dari contoh di atas keywordnya "kucing,merawat kucing,memelihara kucing,tips merawat kucing,tips memelihara kucing, hobby kucing "
Pastiin keywordsnya jangan banyak-banyak, maksimal 15 kalo bisa antara 8-10 aja biar lebih SEO friendly.

Setelah selesai save template gan beres.

Cuma sekedar info gan, Google gak make keywords meta tag di mesin pencarinya. Jadi meta keywords ini gak berpengaruh terhadap rangking di Google. Untuk infonya loe bisa cek disini. ( penjelasan dari Matt Cutts kepala web spam di Google ).

Terus kita harus pake keywords meta tag apa gak? Ini yang masih membingungkan dan jadi perdebatan di kalangan webmaster, menurut gw sih boleh-boleh aja loe mau pake meta keywords walaupun ini pengaruhnya gak begitu besar buat SEO.

Kalo di blog2 yang gw kelola semuanya gak pake meta keywords. Intinya semua kembali kepada anda gan.

Oke lanjut lagi gan, sekarang saatnya nambahin meta tag pendukung supaya blog kalian lebih SEO friendly lagi.

kembali lagi ke Template lalu Edit HTML. Lalu copy kode dibawah ini gan kemudian paste dibawah kode baru yang tadi udah loe tambahin, liat gambar.

Sekarang tingggal ganti author sama nama loe, trus copyright sama judul blog loe. Buat geo.placename, geo.country dan language bisa diganti tergantung negara mana yang jadi priorotas dan bahasa apa yang di pake di blog kalian gan. Lalu save template, beres sekarang blog loe udah lebih SEO friendly.

Sekian dulu tips tentang cara buat meta tag di blogger biar lebih SEO friendly, semoga bermanfaat buat kalian gan. Silahkan share kalo loe punya tips lain tentang meta tag disini.

Sumber: http://www.seociyus.com/2012/12/cara-membuat-memasang-meta-tag-di-blogger..html#ixzz3VC63TwMI
Under Creative Commons License: Attribution Non-Commercial
Follow us: @SEOCiyus on Twitter

Kamis, 19 Maret 2015

Cara Membuat Menu Melayang di Samping Blog - Omni Slide Menu

Apa itu menu dTree? Menu dTree adalah menu yang menyerupai/mirip menu explore dan menu ini dapat kita tampilkan ke dalam web/blog kita. Teman2 pasti sudah pada tahukan bagaimana muka dan bentuknya menu explore itu? Saya kira sudah pada tahu semua yaaa...(tuh kayak gambar di samping kiri). Nah, untuk penampilan menu dTree sendiri, daripada teman2 cuma mbayangin saja mending tman2 noleh ke sidebar kanan blog ini. Bagaimana, miripkan? Oh ya...sebenarnya trik ini sudah lama sekali dibahas. dan trik ini bersumber dari Destroydrop.com, maklumlah saya juga masih belajar,, jadi harus memiliki referensi sebanyak-banyaknya. Ok, lanjuuut...

Untuk memulai memasang menu tersebut, seperti biasa silahkan teman2 login dulu ke akun blogger. Lalu klik tata Letak >> Klik Edit HTML

1. Taruh script berikut di atas kode tag </head>

2. Klik Simpan template.

Selanjutnya yang harus teman2 lakukan adalah menaruh kode HTML dTree ke dalam gadget sidebar blognya teman2. Caranya klik Tata Letak >> Tambah Gadget HTML dan taruh kode HTML berikut ini

Maka Preview dari kode di atas adalah seperti berikut ini

Saran saya agar teman2 memasukkan kode HTML di atas ke dalam gadget sidebar blog-nya teman2, mengingat agar teman2 lebih mudah dalam memahami bagian mana saja dan apanya saja yang harus diotak-atik untuk menampilkan suatu folder beserta file-nya sesuai dengan keinginannya teman2.

Ok, kita mulai mengenal bagian mana saja yang harus kita atur untuk memulai membuat folder serta yang mana juga yang harus kita atur untuk membuat file saja. Untuk memulai mengenal bagian yang harus diatur dalam pembuatan folder dan file, agar teman2 hanya memperhatikan nomor2 yg telah saya tandai dengan warna2 (untuk tulisan blablabla.HTML, kita bahas setelah masalah nomor)

Nah, apakah teman2 bertanya apa maksud dari nomor2 yang acak2 itu? Sebenarnya itu bukan nomor acak2an, akan tetapi nomor unik yang tersusun rapi.

Coba teman2 perhatikan beda nomor yg berada di sisi kanan dan kiri. Yang berada di sisi kiri sesuai dengan urutan:
1
2
3
dst

Sedangkan yang berada di sisi kanan gak beraturan.

Sebenarnya angka2 tersebut dapat teman2 baca seperti berikut ini:

1,o ===>> Artinya adalah Folder Utama

2,1 ===>> Dan ini adalah Sub dari folder utama, oleh karena itu saya memberi warna angka satu dengan warna yang sama, yaitu merah. Kalau teman2 ingin menambahkan sub folder utama yang satu lagi di bawahnya, maka nanti teman2 tulis 3,1 atau d.add(3,1,'Sub Folder 02',' #.html');(karena pada intinya folder tersebut masih mengikuti angka satu/folder utama)

3,2 ===>> Artinya adalah sub dari sub folder utama, bagian yang ini bisa jadi folder dan juga bisa jadi file. Apa maksudnya? Maksudnya adalah, pada intinya semua file yg memilki sub akan menjadi folder, sedangkan yg tidak memilki sub maka akan menjadi file selamanya (selama belum ada sub yang menumpang kepadanya), kalau teman2 bingung, teman2 bisa memperhatikan preview/gambar di atas. Coba dilihat tuh, setiap jajaran ketiga pasti file kan? Nah itu karena yg jajaran ketiga adalah bagian yg terakhir alias bagian yg sudah tidak memilki sub lagi.

Nah, untuk yg masalah pembuatan folder dan file selesai...

Selanjutnya masalah yg berada pada bagian kanan, yaitu tulisan "#.HTML" dan "Link anda.HTML"

Kenapa pada bagian yg saya tandai dengan warna merah saya beri tanda "#" bukannya menggunakan "Link anda"?

Itu semua karena terletak pada fungsi masing2. Apa maksudnya...

Maksudnya yang telah saya tandai dengan "#", artinya adalah folder utama atau folder sub utama. Dengan begitu para pengunjung langsung tahu kalau itu bukan file akan tetapi pengantar file alias folder. Ini semua merupakan pertimbangan saya pribadi, mungkin beberapa teman blogger menganggap menu ini benar2 mirip menu explore, memang mirip tapi hanya tampilannya serta sifatnya yg menyerupai menu dropdown, akan tetapi bedanya pasti teman2 tahu...Kalau di menu explore kita bisa membuka folder dengan cara mengklik tulisannya, misal: My Documents atau juga bisa dengan cara mengklik tanda plus-minus yang terletak pada samping kirinya. Akan tetapi untuk menu dropdown ini beda, kita hanya bisa mengklik tanda plus-minusnya saja untuk bisa menampilkan menu yg berada di dalamnya (kalau gak percaya, maka bisa dicoba menu dTree di sidebar kanan blog ini). Bagaimana teman2 sudah ada bayangankan...?

Lalu untuk tulisan "link anda.HTML" itu bisa diganti dengan link anda. Dan pastikan kalau yang anda sisipi dengan link tersebut sudah merupakan sebuah link yg tidak bersub lagi, maksudnya bukan folder.

Alhamdulillah, akhirnya rampung juga. O ya, bagi teman2 yg mungkin merasa ada sedikit kesulitan...mungkin bisa menganalisanya sendiri melalui kode HTML berikut, yang merupakan kode dari menu dTree saya yang berada di samping kanan itu...

<h2>Menu Blog Ini</h2>

<div class="dtree">

<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>

<script type="text/javascript">

</script>

</div>

Cara Membuat Menu Melayang di Samping Blog - Omni Slide Menu

Terima kasih telah berkunjung
Cara Membuat Menu Melayang di Samping Blog - Omni Slide Menu. Menu yang satu ini memiliki ciri khas tersendiri dan tentunya memiliki fungsi yang tak kalah dengan menu lainnya dan bisa dijadikan juga sebagai penghias blog. Menu Omni Slide ini saya dapat dari situs Dynamic Drive (www.dynamicdrive.com), semoga trik menu yang satu ini bermanfaat bagi sobat-sobat blogger).

Jika sobat penasaran dengan bentuk menu yang saya maksud, silahkan untuk menengok ke sebelah kiri blog ini (t4belajarblogger.blogspot.com), pasti ada menu "omni slide" di mana ketika sobat mengarahkan mouse sobat maka menu tersebut akan terbuka dan melebar. Nah, itulah yang dinamakan dengan menu omni slide. [Menu telah DICOPOT, namun fungsi insyaAllah akan terus berfungsi]

Cara untuk memasang menu omni slide adalah sebagai berikut:

1. Silahkan login ke akun blogger anda
2. Klik menu "Rancangan"
3. Klik "Tambah Gadget"

4. Pastekan kode berikut di dalamnya...

5. Jika sudah, perhatikan pada bagian2 yang telah saya tandai dengan warna Hijau dan Biru, itu artinya bagian tersebut bisa sobat ubah atau bisa sobat sesuaikan dengan keinginan sobat yang meliputi: Warna background, nama menu, link2 menu serta tampilan teks dari menu yang muncul. (Tips: Untuk mempermudah mengedit, silahkan untuk sambil melihat menu di samping)

Cara membuat Tombol Share Bouncing Fixed Shadow

Tombol Share Bouncing Fixed Shadow - Cara mudah untuk mempromosikan blog agar banyak yang mengenal adalah dengan membagikan ulang artikel kebeberapa sosial media seperti Facebook, Twitter dan Google Plus. Sehingga traffik yang kita dapatkan bersumber dari berbagai ragam lalu lintas, karena tidak menutup kemungkinan mereka yang sedang online di facebook dan twitter akan membuka blog Anda jika posting di share ulang ke media tersebut.

Dengan perhitungan minimal, jika 20 orang yang berkunjung ke blog Anda melalu media Facebook, 20 orang dari Twitter dan 20 orang dari Google Plus, maka blog Anda sudah mendapat kunjungan 60 visitor dalam sehari untuk 1 posting atikel, belum lagi mereka yang rutin melakukan blogwalking ke blog Anda. Hmm...sudah pasti mereka yang belum mengenal blog Anda saat ini akan segera tahu semua informasi yang Anda tuliskan, dan itu hanya karena membuat widget tombol share di blog seperti ini:

Apa bedanya dengan Widget tombol Share yang digunakan pada beberapa blog yang lain..?, fungsi widget ini sama seperti Membuat Tombol Share Terbaru Efek Transisi pada artikel terdahulu, namun karena kegunaan widget ini dapat membantu menaikkan reputasi blog, efek tampil tombol saya modifikasi lagi dengan style Bouncing Fixed Shadow untuk membuat pengunjung tertarik membagikan ulang artikel Anda dengan meng-KLIK tombol share yang Anda buat seperti ini:

DEMO SHOW

Karena ini berupa tampilan widget, untuk desain tampilan saya tidak menggunakan link background gambar (Url-gambar-icon) pada masing-masing tombol agar loading blog tidak berat, cukup kita bentuk dengan Penggunaan Background Radial Gradient, selanjutnya kita gabungkan dengan font-format ('svg') untuk menampilkan icon gambar pada masing-masing tombol.

@font-face {
src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?blijkv');
 font-family: 'icomoon';
 format('embedded-opentype'),
 format('woff'),
 format('truetype'),
 format('svg');font-weight: normal;font-style: normal
}

Untuk Efek bouncing fixed shadow kita gunakan CSS animation: shadow 2s infinite, sama seperti cara ➞ Menghilangkan | Memunculkan Obyek Dengan CSS3 Animasi, namun disini kita ambil hanya efek pantulnya (bouncing) saja, sedangkan untuk gerakan kita gunakan perintahkeyframes-jumping dan keyframes-shadow seperti ini:

@-webkit-keyframes shadow {50%{-webkit-transform: scale(1.4)}}
@-moz-keyframes shadow {50%{-moz-transform: scale(1.4)}}
@keyframes shadow {50%{transform: scale(1.4)}}
@-webkit-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@-moz-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}

Susunan efek untuk gerakan tombol sudah selesai kita buat, selanjutnya tinggal mengatur bentuk tampilan saat tombol di HOVER. Kode lengkapnya seperti ini:


.tombol-share {
  background:radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);
  width:100px;height:100px;border-radius:50%;display:inline-block;
  font-size:75px;line-height:100px;margin:25px;position:relative;text-align:center;
  -webkit-animation:jump 2s infinite;
  -moz-animation:jump 2s infinite;
  animation:jump 2s infinite}

.wrapper {width:100px;height:100px;display:inline-block;position:relative;margin:20px}
.tombol-share span {
  display: block;width: 0;height: 0;border-radius: 0;position: absolute;
  left: 50%;top: 50%;margin: 0;-webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;transition: all 0.3s}

.tombol-share:hover span {width:100px;height:100px;border-radius:100%;margin:-50px}
.facebook span {background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%,  #3B5998 80%);}
.twitter span {background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%);}
.googlePlus span {background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%);}

.tombol-share i {
  background: none;width: 100px;height: 100px;position: absolute;
  left: 0;top: 0;line-height: 90px;font-size: 50px;z-index: 10}

.tombol-googlePlus:before {content: "\e600"}
.tombol-facebook:before {content: "\e601"}
.tombol-twitter:before {content: "\e602"}
.tombol-share .tombol-facebook {color: #3B5998;}
.tombol-share .tombol-twitter {color: #4099FF;}
.tombol-share .tombol-googlePlus {color: #DB5A3C;}
.tombol-share:hover i{color: white;}
.shadow {
  width: 46px;height: 10px;background: rgba(0,0,0,0.2);position: absolute;
  left: 50%;margin-top: -10px;border-radius: 50%;
  -webkit-animation: shadow 2s infinite;
  -moz-animation: shadow 2s infinite;
  animation: shadow 2s infinite}

@-webkit-keyframes shadow {50%{-webkit-transform: scale(1.4)}}
@-moz-keyframes shadow {50%{-moz-transform: scale(1.4)}}
@keyframes shadow {50%{transform: scale(1.4)}}
@-webkit-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@-moz-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@font-face {
 font-family: 'icomoon';
 src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?blijkv');
 src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?#iefixblijkv') format('embedded-opentype'),
  url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.woff?blijkv') format('woff'),
  url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.ttf?blijkv') format('truetype'),
  url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.svg?blijkv#icomoon') format('svg');font-weight: normal;font-style: normal}

[class^="tombol-"], [class*=" tombol-"] {
 font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;
 font-variant: normal;text-transform: none;line-height: 1;
 -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}

Saya hanya menampilkan 3 buah tombol saja pada widget ini, karena seperti facebook, twitter dan Google+ yang secara umum sering digunakan untuk berbagi informasi. HTML pemanggilnya seperti ini:


<div class="wrapper">
  <a class="tombol-share facebook" href="/">
     <i class="tombol-facebook"></i>
        <span></span>
  </a>
        <div class="shadow"></div>
</div>

<div class="wrapper">
   <a class="tombol-share twitter" href="/">
      <i class="tombol-twitter"></i>
         <span></span>
    </a>
         <div class="shadow"></div>
</div>

<div class="wrapper">
   <a class="tombol-share googlePlus" href="/">
      <i class="tombol-googlePlus"></i>
         <span></span>
   </a>
         <div class="shadow"></div>
</div>

Bagaimana pekerjaan yang cukup mudah bukan? hehe..!!! semoga dengan beberapa pilihan tombol share seperti diatas, sahabat semua pecinta admin Oi tok sudi kiranya membagikan ulang posting kali ini dengan ihklas. Terimakasih.

TEKNIK KOMPUTER JARINGAN

Beranda

Senin, 23 Maret 2015

Cara memasang meta tag 2014

Cara membuat & memasang meta tag di blogger

Cara Membuat & Memasang Meta Tag Di Blogger

Kamis, 19 Maret 2015

Cara Membuat Menu Melayang di Samping Blog - Omni Slide Menu

Cara Membuat Menu Melayang di Samping Blog - Omni Slide Menu

Cara Membuat Menu Melayang di Samping Blog - Omni Slide Menu

Cara membuat Tombol Share Bouncing Fixed Shadow

Translate