Cara Membuat Tombol Share Social Media Responsive

iyan-blog.com | Cara Membuat Tombol Share Social Media Responsive - Kali ini saya akan kembali mengupdate tutorial blog. Tombol Share biasa dimanfaatkan oleh pengunjung untuk membagikan ulang artikel yang telah kita buat ke dalam sosial media seperti facebook, twitter, G+, dll. 

Tombol Share Social Media Responsive memudahkan pengunjung yang menggunakan mobile saat mengakses blog kita. mereka dapat dengan mudah memperluas artikel kita dengan mengklik salah satu tombol sosial media yang responsive.

Cara Membuat Tombol Share Social Media Responsive

1. Log in ke blogger

2. masuk ke halaman template >> Edit HTML

3. letakkan CSS dibawah ini diatas ]]></b:skin atau </style>

/* CSS Share Button */ .sharepost li{width:19%;padding:0;list-style:none;} .sharepost li a{padding:10px 0;background-color:#aaa;color:#fff;display:block;border-radius:2px;} .sharepost{overflow:hidden;text-align:center;margin-left:-40px} .sharepost li a:hover{opacity:1;color:#fff;} .sharepost li .twitter:hover{background-color:#55acee} .sharepost li .facebook:hover{background-color:#3b5998} .sharepost li .gplus:hover{background-color:#dd4b39} .sharepost li .pinterest:hover{background-color:#cc2127} .sharepost li .linkedin:hover{background-color:#0976b4} .sharepost li{float:left;margin-right:1.2%} .sharepost li:last-child{margin-right:0} .sharepost li .fa:before{margin-right:5px}

4. Letakkan kode HTML ini diatas kode </article> atau tempat yang anda inginkan

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='sharepost'><ul> <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li><li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li> <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li><li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li><li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li> </ul></div></b:if>

5. Klik Simpan Template

Sekian itu saja artikel kali ini, jika ada yang ingin ditanyakan silakan lewat komentar. Semoga bermanfaat dan terima kasih. 

Membuat Menu Navigasi dan Tombol Sosial Media Responsive

iyan-blog.com | Membuat Menu Navigasi dan Tombol Sosial Media Responsive - Menu navigasi merupakan hal yang paling kita temui dalam suatu blog/website. Menu navigasi kali ini dilengkapi dengan fitur tombol sosial media youtube, facebook, twitter, google plus, dan linkedin.

Selain dilengkapi fitur sosial media, menu navigasi ini juga responsive. Untuk demonya kamu bisa lihat ditemplate Suvart Blogger Template yang saya bagikan gratis atau bisa melihat di blog demonya di Aindedeng Blog. Kurang lebih menunya seperti yang tampak pada gambar dibawah ini:

Membuat Menu Navigasi dan Tombol Sosial Media

1. Log in ke akun blogger

2. masuk ke halaman template >> Edit HTML

3. Cari kode </style> atau ]]></b:skin>, lalu letakkan kode dibawah ini diatasnya

/* CSS Top Menu */
.main-nav {display:block;margin:0 auto;float:left;padding:0;width: 100%;background:#222;border-bottom:4px solid #FF3300;}
.main-nav ul {width:100%;padding:0;margin:0;text-align:left;}
.main-nav li {list-style-type:none;float:left;padding:0;}
.main-nav li a {position:relative;font-family:'oswald';font-size:14px;font-weight:400;background:#222;color:#f5f5f5;display:block;margin:0;padding:18px;line-height:100%;text-transform: uppercase;
}
.main-nav ul > li > a:after {content:"";position:absolute;width:0;left:0;right:0;margin:auto;
bottom:-1px;height:3px;background:#222;opacity:0;visibility:hidden;transition:all 0.2s ease-out;}
.main-nav ul > li > a:hover:after {opacity:1;visibility:visible;width:90%;}
.main-nav ul li a:active, .main-nav ul li.highlight a {line-height:100%;text-decoration:none;}
.main-nav ul li a:hover {background:#fdfdfd;color:#222;text-decoration:none;}
.main-nav a#pull {display:none;}
.main-nav li.facebook,.main-nav li.twitter,.main-nav li.youtube,.main-nav li.googleplus,.main-nav li.linkedin{background:#fff;text-align:center;color:#838888;float:right;transition:all 0.2s ease-out;}
.main-nav li a.facebook:hover,.main-nav li a.twitter:hover,.main-nav li a.youtube:hover,.main-nav li a.googleplus:hover,.main-nav li a.linkedin:hover{color:#7076c5;}
.main-nav li.facebook .fa.fa-facebook,.main-nav li.twitter .fa.fa-twitter,.main-nav li.youtube .fa.fa-youtube,.main-nav li.googleplus .fa.fa-google-plus,.main-nav li.linkedin .fa.fa-linkedin{color:#838888;transition:all 0.2s ease-out;}
.main-nav ul li.facebook:hover .fa.fa-facebook,.main-nav li.twitter:hover .fa.fa-twitter,
.main-nav li.youtube:hover .fa.fa-youtube,.main-nav li.googleplus:hover .fa.fa-google-plus,
.main-nav li.linkedin:hover .fa.fa-linkedin{background:#fdfdfd;color:#222;}
.main-nav li.buttonalert {cursor:pointer;font-size:13px;color:#fff;padding:2px 10px;background:#f56954;border-radius:3px;margin:15px 0;opacity:0.8;margin-left:10px;transition:all 0.2s ease-out;}
.main-nav li.buttonalert:hover{opacity:1;}
@media only screen and (max-width:640px){
.main-nav {display:block;width:100%;padding:0}
.main-nav ul {text-align:center;}
.main-nav ul {display:none;height:auto;}
.main-nav a#pull {background-color:#222;color:#fff;border:none;display:inline-block;font-family:'oswald';font-size:12px;font-weight:bold;padding:10px 3%;height:30px;line-height:30px;position:relative;text-align:right;width:94%;}
.main-nav a#pull:after {content:'\f0c9';font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#fff;display:inline-block;position:absolute;left:15px;top:20%;line-height:30px;}
.main-nav li {display:block;width:100%;text-align:left;border-bottom:none;}
.main-nav li a {background:#222;color:#fff;padding:15px 20px;display:block;}
.main-nav li a:hover, nav a:active {background:#222;border:none;color:#fff;}
.main-nav ul li a:hover {background:#222;color:#fff;}
.main-nav .home1 a {box-shadow:none;background:#222;color:#fff;}
.main-nav .home1 a:hover {background:#222;color:#fff;}
.main-nav li.facebook,.main-nav li.twitter,.main-nav li.youtube,.main-nav li.googleplus,.main-nav li.linkedin{background:#222;text-align:left;margin:0 auto;color:#fff;transition:all 0.2s ease-out;}
.main-nav li a.facebook:hover,.main-nav li a.twitter:hover,.main-nav li a.youtube:hover,.main-nav li a.googleplus:hover,.main-nav li a.linkedin:hover{color:#222;}
.main-nav li.facebook .fa.fa-facebook,.main-nav li.twitter .fa.fa-twitter,.main-nav li.youtube .fa.fa-youtube,.main-nav li.googleplus .fa.fa-google-plus,.main-nav li.linkedin .fa.fa-linkedin{color:#fff;transition:all 0.2s ease-out;}
.main-nav ul li.facebook:hover .fa.fa-facebook,.main-nav li.twitter:hover .fa.fa-twitter,
.main-nav li.youtube:hover .fa.fa-youtube,.main-nav li.googleplus:hover .fa.fa-google-plus,
.main-nav li.linkedin:hover .fa.fa-linkedin{background:#222;color:#fff;}
    .main-nav li.buttonalert {display:none;}}

4. lalu letakkan kode dibawah ini diatas atau dibawah header

<nav class='main-nav'>
<ul>
  <li class='home1'><a href='/'>Home</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
<li><a href='/p/contact.html'>Contact</a></li>
<li><a href='/p/static-page.html'>Forum</a></li>
<li><a href='/p/display-none.html'>Fixed</a></li>
<li class='sorting-01 youtube' title='Follow us on Youtube'><a href='#'><i class='fa fa-youtube'/><span class='inv'/></a></li>
<li class='sorting-02 linkedin' title='Follow us on LinkedIn'><a href='#'><i class='fa fa-linkedin'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus' title='Follow us on Google+'><a href='#'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='sorting-04 twitter' title='Follow us on Twitter'><a href='#'><i class='fa fa-twitter'/><span class='inv'/></a></li>
<li class='sorting-05 facebook' title='Follow us on Facebook'><a href='#'><i class='fa fa-facebook'/><span class='inv'/></a></li>
</ul>
<a href='#' id='pull'>MENU</a>
</nav>

5. Jangan lupa letakkan kode dibawah ini, dibawah kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

6. Selesai.

Jika masih ada masalah atau kebingungan bisa tanyakan lewat kotak komentar. Sekian postingan kali, selamat mencoba dan terima kasih.

Dapatkan Domain Gratis Terbaru di Tahun 2015

iyan-blog.com | Dapatkan Domain Gratis Terbaru di Tahun 2015 - Akhir-akhir ini dunia blogger sedang heboh-hebohnya tentang adanya domain gratis dari Idwebhost. Tentunya ini merupakan kabar gembira bagi para blogger yang hobi gratisan [termasuk saya :v]. Bagaimana tidak, sudah ada banyak blogger yang memanfaatkan momen ini. Dengan menggunakan kode promosi, kita bisa mendapatkan domain "my.id" secara cuma-cuma.

1. buka dan daftarkan diri anda ke situsnya "Idwebhost" 

2. Menuju menu "Domain > Daftarkan Domain Baru" atau bisa langsung kesini Daftar domain

3. masukkan domain yang ingin didaftarkan "www.______.my.id

4. klik "Periksa Ketersediaan" lalu Order

5. selanjutnya kita akan diminta untuk menyeting nameserver, cukup lewati saja langka yang ini

6. Lalu kita akan diminta kode promosi, masukkan kode promosinya "BASW5VM70S" lalu klik validasi kode dan selesaikan pemesanan

7. Selesai, tunggu kurang lebih 1x24 jam domain akan aktif sepenuhnya.

Saya sendiri telah mencobanya dan memang benar terbukti bisa [faktanya.my.id], untuk menyambung domainnya keblogger silahkan cari tutorialnya di google atau langsung minta panduan dari CS Idwebhost. Sekian postingan kali ini, semoga bermanfaat dan terima kasih.

Cara Mudah Mengetahui Page Rank Suatu Blog

iyan-blog.com | Cara Mudah Mengetahui Page Rank Suatu Blog - PageRank merupakan algoritma yang digunakan oleh Google Search untuk peringkat situs dalam hasil mesin pencari mereka. PageRank adalah cara untuk mengukur pentingnya halaman situs. Semakin besar Pagerank suatu blog, semakin besar kemungkinan masuk ke halaman pertama pencarian Google

Dalam tutorial yang saya bagikan ini kita juga dapat mengetahui DA [Domain Authority] dan PA [Page Authority], yang memiliki arti dan fungsinya masing-masing. Cara ini biasanya digunakan oleh para pemburu blog zombie untuk mencari blog yang berpagerank tinggi

Cara Mudah Mengetahui Page Rank Suatu Blog

1. Pertama, Kunjungi situsnya Seoweather 

2. Masukkan URL Blog kamu pada kolom yang disediakan

3. Lalu klik Go Fetch

4. Lihat Hasilnya

Baca Juga :

• Cara Menambahkan Penulis/Admin Pada Blog
• Keuntungan Menjadi Seorang Blogger

Sekian posting kali ini, semoga bermanfaat dan terima kasih.

Cara Mudah Mengetahui Jumlah Kata Dalam Artikel

iyan-blog.com | Cara Mudah Mengetahui Jumlah Kata Dalam Artikel - Bagi seorang blogger konten/artikel merupakan hal terpenting dari blognya. Tanpa artikel/konten blog hanyalah laman kosong yang tak ada makna. didalam artikel terdapat kata perkata yang harus disusun semenarik mungkin agar dibaca oleh para pengunjung. Semakin banyak kata semakin bagus bagi artikel tersebut.

Sumber Gambar : Google

Bahkan ada blogger yang berpendapat bahwa untuk mengoptimasi sebuah artikel minimal harus mencapai 300 kata atau lebih. Nah, untuk mengetahui jumlah kata dalam artike kita sangatlah mudah, ikuti tutorialnya dibawah ini:

Cara Mudah Mengetahui Jumlah Kata Dalam Artikel

1. Pertama, buka artikel yang akan dihitung jumlah katanya

2. Kedua, Copy seluruh artikelnya

3. ketiga, buka Microsoft Word

4. Keempat, letakkan artikel yang telah dicopy tadi ke Ms. Word, lalu lihat jumlah katanya seperti yang ada digambar

5. Nampak ada 126 kata dalam artikel tersebut

itulah "Cara Mudah Mengetahui Jumlah Kata Dalam Artikel" terima kasih telah membaca postingan kali ini, semoga bermanfaat.

Cara Mendapatkan Backlink .Gov dan .Edu

Iyan-Blog.com | Cara Mendapatkan Backlink .Gov dan .Edu - Backlink merupakan sebuah link yang ditanamkan di website/blog, dan diarahkan ke blog kita. Backlink merupakan salah satu unsur terpenting dari suatu blog/website. Karena, backlink berguna untuk menaikkan posisi anda di SERP google dan fungsi lainnya adalah untuk meningkatan pagerank, DA, dan PA blog/website anda.

Cara Mendapatkan Backlink .Gov dan .Edu

sedonaaz.gov/sedonacms/redirect.aspx?url=http://www.iyan-blog.com

www.cedarparktexas.gov/redirect.aspx?url=http://www.iyan-blog.com

weather.gov/cgi-bin/nwsexit.pl?url=http://www.iyan-blog.com

www.biometrics.gov/LeavingSite.aspx?url=http://www.iyan-blog.com

www.serve.gov/?q=ext_link&url=http://www.iyan-blog.com

datawise.navajocountyaz.gov/splash.aspx?link=http://www.iyan-blog.com

www.swccd.edu/redirect.aspx?url=http://www.iyan-blog.com

www.clinton.edu/redirect.aspx?url=http://www.iyan-blog.com

engineering.rice.edu/redirect.aspx?url=http://www.iyan-blog.com

ubah URL blog saya [yang berwarna merah] dengan URL blog anda. Jika anda belum puas dengan backlink yang saya bagikan, anda bisa cari sendiri backlinknya digoogle, berikut caranya:

Cara Mencari Backlink .Gov dan .Edu

ketikkan salah satu kata kunci dibawah ini di penelusuran google, tanpa tanda kutip.

"site:.edu blogspot" | "site:.gov blogspot"

Sekian postingan kali ini, semoga bermanfaat.

Klikoffice.co.id Belanja Online Peralatan dan Perlengkapan Kantor

iyan-blog.com | Klikoffice.co.id Belanja Online Peralatan dan Perlengkapan Kantor - Kembali lagi saya akan me-review salah satu web Belanja Online. Belanja Online terkadang dilakukan oleh seseorang karena malas ataupun capek untuk pergi ketempat perbelanjaan.

Klikoffice.co.id merupakan perusahaan yang bergerak dalam bidang perdagangan peralatan dan kebutuhan alat - alat kantor secara online. Klikoffice.co.id bernaung di bawah PT. Kogara Prima Media selaku prinsipal dan distributor resmi beberapa merek ternama dan juga perusahaan marketing & Distribution.

Klikoffice.co.id Belanja Online Peralatan dan Perlengkapan Kantor

Lalu Apa Saja Yang Di Jual di Klikoffice.co.id?

Klikoffice.co.id menyediakan bermacam-macam peralatan kantor dan perlengkapan kantor, dan terbagi beberapa kategori yang bisa anda lihat dibawah ini:

kita ambil contoh salah satuna adalah FINGER PRINT MORGEN MGO 3800-D, dengan penjelasan sebagai berikut:

Brand: Morgen Product 

Code: MGO 3800-D 

Reward Points: 15 Poin 

Availability: In Stock 

Rp.1.204.000 Rp.1.118.000 Price in reward points: 798 Poin

alat ini biasanya dapat kita temui diperkantoran. alat ini yang saya ketahui, biasanya berfungsi sebagai pembaca sidik jari dan juga bisa berfungsi sebagai absen untuk para pegawai perkantoran.

saat anda memilih barang yang akan anda beli, anda akan ditunjukkan deskripsi mengenai barang tersebut seperti fitur, harga, dan lain-lain.

Panduan Berbelanja

1. Silahkan lakukan registrasi atau login

2. Pilih produk yang diinginkan

3. Klik tombol "Add To Cart" 

4. Setiap produk sudah kita lengkapi dengan fasilitas pilihan warna dan ukuran produk, silahkan pilih sesuai dengan keinginan dan kebutuhan anda. 

5. Jika belanja anda dirasa sudah cukup, klik “Menuju Kasir” untuk memproses pemesanan.

6. Isi lengkap data anda dengan benar dan lengkap

7. Pilih salah satu metode pembayaran dan conteng sebagai proses untuk pembayaran nantinya, kemudian centang juga "Syarat dan Ketentuan" (menunjukkan bahwa anda setuju dengan syarat dan ketentuan dari klikoffice). Setelah itu klik "Lanjutkan"

8. Pada kolom ini anda dapat melihat secara detail pemesanan anda hingga proses pengirimannya, jika dirasa sudah benar klik “Konfirmasi Pesanan”

9. Setelah anda klik “konfirmasi pesanan” secara bersamaan anda akan menerima konfirmasi pesanan anda melalui email dan silahkan cek email anda untuk memastikannya.

Kemudahan apa saja yang anda dapatkan dari Klikoffice.co.id?

Klikoffice.co.id selaku perusahaan yang men-jual peralatan kantor dan men-jual perlengkapan kantor secara online, memberi beberapa kemudahan bagi para pelanggannya. diantaranya sebagai berikut:

1. Gratis Pengiriman ke seluruh indonesia

2. Pesan Mudah

Klikoffice.co.id menghadirkan layanan Customer Care yang siaga membantu Anda dalam berkonsultasi atau bertanya seputar produk dan layanan klikoffice. Hubungi klikoffice.co.id di (021) 97694123

3. Kemudahan Pembayaran Dengan Cicilan 0%

Untuk kenyamanan dalam berbelanja, klikoffice.co.id menghadirkan fasilitas Cicilan 0% untuk semua produk dengan tenor cicilan hingga 12 bulan.

4. dan kemudahan lainnya yang tentu saja anda dapatkan di Klikoffice.co.id

Bagaimana Tertarik dengan Klikoffice.co.id Belanja Online Peralatan dan Perlengkapan Kantor

Sekian itu saja review saya mengenai "Klikoffice.co.id Belanja Online Peralatan dan Perlengkapan Kantor". Semoga bermanfaat dan terima kasih