Blog HF

noreply@blogger.com (Hamzah) — Sun, 22 Jan 2023 19:16:00 +0700

Test

noreply@blogger.com (Admin) — Fri, 11 Oct 2019 21:32:00 +0700

Cara Mendapatkan Site Link Dengan Mudah

noreply@blogger.com (Hamzah) — Tue, 2 Jun 2015 11:37:00 +0700

Cara Mendapatkan Site Link Dengan Mudah - Sitelinks adalah link yang mengarah kepada sub page pada suatu sub page baik itu website ataupun blog. Selain itu sitelink ini bisa dianggap sebagai Hadiah bagi suatu blog proffesional.Sitelink ini berfungsi untuk memudahkan pencarian penuh pada suatu website. Pemilik situs atau admin sendiri tidak bisa menambahkan Sitelink sendiri Karena Sitelink adalah suatu algoritma rahasia google, jadi yang bisa menambahkan sitelink hanyalah Robot Google saja, hal ini juga jika Blog Kita sudah Lolos algoritma Google.

Dahulu untuk mendapatkan sitelink ini sangat mudah naun sekarang semenjak google menerapkan algoritma yang lebih baru, banyak blog yang sudah memiliki sitelink malah tidak memiliki sitelink, apalagi sekarang google meluncurkan algoritma google Pinguin yang bertujuan agar penelusuran menjadi lebih nyaman, Namun tidak Perlu risu karena masih ada cara untuk mendapatkan sitelink ini.

1. Perhatikan Algoritma Google

Perlu diperhatikan google adalah mesin pencari nomor satu di dunia, oleh karena itu demi membuat kenyamanan pencarian google selalu mengupdate algoritma yang mereka gunakan. Pada 2015 ini google Mengembangkan Algoritma Google Pinguin, Serta Google Panda. sebenarnya tujuan ini adalah baik namun masih banyak yang terjebak dengan algoritma sehingga Pengunjung Situs tersebut akan turun Drastis. Untuk menghadapi Algoritma google ini termasuk mudah yaitu dengan cara Membuat artikel menarik serta bermanfaat, dengan begini anda juga akan otomatis mendapatkan sitelink dari google

2. Perhatikan Template Anda

Faktor yang ini termasuk faktor yang paling sering membuat suatu blog tidak mendapatkan sitelink, Melihat Template dengan desain cantik langsung tergiur dan akhirnya langsung memasangnya. Lebih baik template yang sederhana namun memiliki SEO yang memuaskan. dan yang paling penting lagi adalah coba memilih template dengan desain yang rapi seperti karya Mas Sugeng di Evo Template, atau dari Template kak Arlina Design, seperti yang di pakai di blog Hamzah Fansyuri 14, ada banyak rumor bahwa Template yang rapi dapat membuat index halaman dapat menjadi lebih cepat. Rumor ini mungkin bisa benar

3. Membuat Sitemap

Site Map yang berarti Peta Situs yang bertujuan untuk memudahkan pembaca blog melihat seluruh isi artikel atau postingan yang berada didalam website itu. Baca Juga "Membuat Sitemap Keren dan Simple Cepat Terindex Google". Dengan Site Map ini, dapat membantu google untuk merayapi atau melihat isi situs anda sehingga google dapat mengindex dengan cepat dan dapat merekomendasikan apakah situs anda berkualitas atau kah tidak.

Jadi intinya untuk mempermudah situs kita agar dapat memiliki site link, kita harus berusaha untuk memperbaiki website kita agar lebih baik sehingga dapat memiliki pengunjung yang banyak dan dapat membantu google untuk mempercayai website kita sebagai website yang berkualitas dan menarik. Karena site link hanya bisa didapat oleh website yang berkualitas dan lolos dari algoritma google.

Blogger SEO Mobile-Friendly

noreply@blogger.com (Hamzah) — Tue, 17 Mar 2015 11:59:00 +0700

Blogger SEO Mobile-Friendly - Pernahkah agan agan searching di google dan ada tulisan di bawah Alamat postnya "Mobile-Friendly" pertamanya admin kurang begitu peduli dengan adanya tulisan tersebut, namun belakangan di cek kok blog dengan mobile friendly lebih kebanjiran pengunjung.

Untuk itu sekarang saya akan memberikan trik untuk membuat blog menjadi mobile friendly, tapi kita perlu tau dulu apa itu mobile friendly, menurut admin mobile friendly adalah satu mekanisme google menunjukan suatu situs itu mudah di akses atau tidak.

Untuk para bloggers yang mau mengecek blog tersebut apakah seo mobile friendly atau tidak bisa ti cek https://www.google.com/webmasters/tools/mobile-friendly/

Cara Membuat Blog Menjadi Mobile-Friendly

Seperti yang lainya , untuk membuat blog anda menjadi mobile friendly anda harus memenuhi kriteria sebagai berikut :

Tidak memuat perangkat lunak yang tidak umum pada perangkat mobile, seperti Flash.
Menggunakan teks yang dapat dibaca tanpa harus melakukan zooming.
Laman dapat menyesuaikan secara otomatis dengan ukuran atau dimensi layar.
Posisi masing-masing link ditempatkan pada jarak yang cukup jauh sehingga mudah dibuka.

Sehingga nantinya jika hasil pengujian menyatakan bahwa blog yang dimaksud belum mobile-friendly, maka cara termudah untuk mengatasinya adalah denganmengaktifkan fitur laman versi seluler yang telah disediakan oleh Blogger, yaitu dengan memakai model laman seluler default yang telah tersedia. Disamping itu apabila template yang Anda pakai telah menyediakan dukungan untuk tampilan versi mobile maka dapat pula dilakukan dengan menggunakan setelan khusus untuk laman versi seluler dan atau bisa juga dilakukan dengan cara menggunakan template yang responsive.

Selain itu coba gunakan template yang sudah seo frendy untuk membuat mobile friendly lebih optmal

Nah tutorial diatas adalah tutorial yang sederhana yang boleh dicoba dan akan menambah pengunjung blog sobat

Kebijakan Blogger 2015

noreply@blogger.com (Hamzah) — Sun, 1 Mar 2015 19:56:00 +0700

Kebijakan Blogger 2015 - Mungkin banyak yang belum tau untuk hal yang satu ini, google di bidang blogger memang sudah lama tidak mengupdate baik itu tampilan ataupun kebijakan, namun pada tanggal 23 maret 2015, blogger kembali mengupdate kebijakan mereka..

Kebijakan ini antara lain "On 23 March, Blogger will no longer allow certain sexually explicit content. Learn more here." untuk yang berbahasa indonesia anda bisa membaca kebijakan blogger disini

Ini adalah salah satu bentuk care blogger terhadap pengguna internet,untuk blog anda yang mengadakan atau mempublikasikan konten tersebut usahakan untuk segera menghapus baik halaman, artikel, gambar maupun video.

Artikel ini ditujukan untuk semua blogger baik yang melanggar ataupun yang ingin memasukkan konten tersebut di blog tersebut, sebelum blog anda dihapus oleh blogger, salam blogger

Memperbaiki Tata Letak Pada Template Blogger

noreply@blogger.com (Hamzah) — Sun, 1 Feb 2015 14:05:00 +0700

Memperbaiki Tata Letak Pada Template Blogger - Assalamu'alaikum para bloggers, kali ini saya akan mebagikan satu tips buat anda yang mungikin pernah mengalami hal seperti ini, masalahnya adalah tata letak blogger yang rusak atau lebih jelasnya dapat dilihat dibawah ini

Admin juga pernah mengalami masalah seperti diatas, sampai sampai admin ganti template, soalnya admin rasa ada yang rusak pada templatenya dam mungin saja bisa mempengaruhi SEO blog ini, untuk alasan kenapa ada titk titik pada layout template tersebut admin kurang tahu, tapi untuk mengatasinya, solusinya sebenarnya sangatlah mudah.

silahkan tambahkan kode di bawah ini tepat sebelum ]]></b:skin>


body#layout ul {
    display: none;
}

Atau Bisa Begini

#layout ul {
    display: none;
}

Selanjutnya simpan dan lihat hasilnya

Sumber : http://arlinadesign.blogspot.com/2015/01/memperbaiki-layout-pada-template-blogger.html

Cara Membuat Breadcrumbs Yang Terindeks Google

noreply@blogger.com (Hamzah) — Sun, 11 Jan 2015 14:32:00 +0700

Cara Membuat Breadcrumbs Yang Terindeks Google - Sebelum Kita memasang breadcrumbs pada blog kita, kita akan bahas Apa Itu Breadcrumbs, mungkin masih banyak yang belum tau tentang apa itu breadcrumbs. kalau menurut saya Breadcrumbs itu adalah, Suatu navigasi yang berisi link menuju Homepage dan Label, dan tahukah sobat bahwa breadcrumbs ini bisa mendongkrak artikel kita dimata google sendiri.

Sebenarnya pada template bawaan blogger sudah terdapat breadcrumbs, namun pada template tersebut biasanya google tidak bisa mengindeks breadcrumbs kita, oke sekarang kita akan bahas tentang membuat breadcrumbs pada blog

Cara Membuat Breadcrumbs Yang Terindeks Google

Seperti biasa agan harus login terlebih dahulu pada Dashboard
Selanjutnya masuk ke bagian pengeditan template
Cari Kode ]></b:skin> atau </style> lalu simpan kode CSS dibawah ini tepad diatas kode tadi..

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Kode Diatas Merupakan Kode CSS, Anda Juga Bisa Mengeditnya Adar lebih tampak Menarik

4. Selanjutnya Cari Kode <b:includable id='main' var='top'> kemudian Ganti dengan :


<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- breadcrumb for the post page --> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <b:loop values='data:post.labels' var='label'> &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:loop> &#187; <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>   5. Selanjtunya Simpan Template Anda

Selesai deh pemasangan breadcrumbs pada blog sobat, bagaimana mudah kan, ya iyalah orang tanggal copy paste aja kodenya, sekarang coba cek apakah breadcrumbs blog agan sudah terindeks atau belum, untuk itu silahkan saja langsung pergi ke http://www.google.com/webmasters/tools/richsnippets, kemudian salin url postingan sobat kemudian klik pratinjau, maka akan timbul seperti dibawah ini

Perlu agan ketahui bahwa biasanya breadcrumbs baru terindeks sekitar 1-2 hari, oke sekarang admin mau pamit, semoga bermanfaat artikel Cara Membuat Breadcrumbs Yang Terindeks Google

Menggabungkan Javascript Untuk Mempercepat Loading Blog

noreply@blogger.com (Hamzah) — Tue, 6 Jan 2015 20:15:00 +0700

Menggabungkan Javascript Untuk Mempercepat Loading Blog - Sudah banyak kita ketahui bahwa blog yang banyak memasang javascript apalagi javascripnya berukuran besar biasanya loading blog tersebut akan melambat. dan loading blog yang lambat merupakan hal yang tidak disukai oleh google. saya pernah membaca pada situs dan bunyinya seperti ini

Blog Yang Ramah Adalah blog yang sedikit javascripnya

Sebenarnya boleh memasang javascript, namun cobalah agan pilih mana javascript yang benar-benar dibutuhkan, serta ukurannya tidak terlalu besar, sehingga jika pengunjung blog anda hanya memiliki kecepatan internet hanya sebatas akan senang jika loading blog kita yang cepat.

Untuk itu saya mendapatkan informasi oleh blog Kompi Ajaib tentang Menggabungkan javascript, cara kerja trik ini adalah dengan menggabungkan kode javascript menjadi satu tag yaitu

<script type='text/javascript'>...Kode Javascript... </script>

Namun mungkin ada beberapa javascript yang tidak bisa untuk digabungkan. Kalau sudah begini anda terpaksa harus memisahkan javascript tersebut, oke sekarang kita akan mempelajari tentang menggabungkan javascript tesebut

Cara Menggabungkan Javascript

Contoh javascript yang akan digabungkan contohnya dua javascript dibawah ini


<script type='text/javascript'>
//<![CDATA[
$(function(){$(".playvideo2").click(function(e){$(".videoyoutubeContainer2").show();$(".playvideo2").hide();$(".videoyoutube2").css({top:"15%",position:"fixed"});$(".videoplayer")[0].src+="&amp;autoplay=1";e.preventDefault()});$(".close-video2").click(function(){$(".videoyoutubeContainer2").hide();$(".playvideo2").show();$(".videoyoutube2").css({top:"-1000px",position:"absolute"});$(".videoplayer")[0].contentWindow.postMessage('{"event":"command","func":"'+"stopVideo"+'","args":""}',"*")})})
//]]>
</script>


<script type='text/javascript'>
//<![CDATA[
var jump=function(e){if(e){var t=jQuery(this).attr("href").replace("/","")}else{var t=location.hash}jQuery("html,body").animate({scrollTop:jQuery(t).offset().top-80},500,function(){})};jQuery(document).ready(function(e){e(document).on("click","a[href*=#]",jump);if(location.hash){setTimeout(function(){e("html, body").scrollTop(0).show();jump()},0)}else{e("html, body").show()}})
//]]>
</script>

Maka javascript tersebut bisa digabungkan menjadi


<script type='text/javascript'>
//<![CDATA[
$(function(){$(".playvideo2").click(function(e){$(".videoyoutubeContainer2").show();$(".playvideo2").hide();$(".videoyoutube2").css({top:"15%",position:"fixed"});$(".videoplayer")[0].src+="&amp;autoplay=1";e.preventDefault()});$(".close-video2").click(function(){$(".videoyoutubeContainer2").hide();$(".playvideo2").show();$(".videoyoutube2").css({top:"-1000px",position:"absolute"});$(".videoplayer")[0].contentWindow.postMessage('{"event":"command","func":"'+"stopVideo"+'","args":""}',"*")})});

var jump=function(e){if(e){var t=jQuery(this).attr("href").replace("/","")}else{var t=location.hash}jQuery("html,body").animate({scrollTop:jQuery(t).offset().top-80},500,function(){})};jQuery(document).ready(function(e){e(document).on("click","a[href*=#]",jump);if(location.hash){setTimeout(function(){e("html, body").scrollTop(0).show();jump()},0)}else{e("html, body").show()}})

//]]>

</script>

Jangan lupa pemisah antara javascript satu dengan yang lainnya dipasahkan dengan tanda titik koma (;) sekarang coba reload halaman blog anda jika ada yang error coba perbaiki lagi javascriptnya mana tau ada yang ketinggalan.

Sebenarnya ada beberapa langkah lagi, namun tidak sempat admin share karena sudah malam sekali dan mau tidur, untuk lebih lengkapnya anda bisa langsung melihat artikel dari kang adhy, oke terimakasih dan semoga bermanfaat

Cara Merampingkan Alexa Rank Pada Blogger

noreply@blogger.com (Hamzah) — Sat, 27 Dec 2014 11:01:00 +0700

Cara Merampingkan Alexa Rank Pada Blogger - Sebenarnya trik ini sudah banyak ditulis pada blog blog lainnya namun karena adamin juga belum banyak tau maka sekalian di share aja tentang cara merampingkan alexa. Banyak para bloggers yang sangat mementingkan Alexa alasannya banyak mulai dari "semakin sedikit alexa maka semakin banyak pengunjung". ya memang sih rata rata blog yang memiliki alexa rank dibawah 1 juta-an memiliki banyak mengunjung dan traffic blog tersebut bisa dibilang stabil bahkan naik.

Baca Juga : Cara Menaikkan Traffic Blog Dengan Mudah

Nilai yang biasanya muncul jika kita baru membuat blog adalah NO DATA, lalu jika kita sering update artikel maka alexanya akan naik secara perlahan, dan untuk lebih optimal dalam menaikkan angka alexa rank anda juga bisa menggunakan teknik dibawah ini.

Cara Merampingkan Alexa Rank

Sering Sering Berkomentar di blog orang lain, hal ini dibuktikan ketika alexa rank admin 5.000.000 lalu admin sering berkomentar di blog orang lain, *yang pastinya blog terkenal maka alexa ranknya dapat naik hingga 4.000.000-an lah

Memasang Alexa Rank Widget . Hal ini dilakukan untuk meyakinkan pihak alexa bahwa kita peduli dengan nilai alexa yang kita punya.

[Baca Juga Cara Memasang Widget Alexa Rank]

Memasang Alexa Toolbar.Dengan memasang Alexa Toolbar ini dengan secara otomatis nilai Alexa anda juga semakin baik karena membuat backlink keyword / query google pada Alexa blog anda.

Melakukan Ping. Guna kita melakukan ping adalah merefresh data blog kita pada search engine. Hal ini juga disarankan ketika kita baru mengganti template

Update Postingan Secara teratur dan tidak berlebihan. Berlebihan disini adalah jika kita biasa update postingan 1 hari 1 postingan, tiba tiba jadi 10 postingan dalam satu hari. Hal itu sebenarnya bagus tapi apakah bisa anda setiap hari update 10 postingan.

Oke itulah share Hamzah Fansyuri 14 kali ini dan semoga bermanfaat.

Menampilkan Persentase Pada Scrollbar Blog

noreply@blogger.com (Hamzah) — Mon, 15 Dec 2014 15:01:00 +0700

Menampilkan Persentase Pada Scrollbar Blog - Agan Pernah mengunjungi blog orang lain lalu melihat persentase di sebelah kanan blog tersebut, bagaimana keren bukan, sebenarnya agan sendiri bisa membuat tampilan persentase scrollbar tersebut,

Sebenarnya tampilan tersebut hanya membuat blog menjadi menarik saja, tapi bagi yang mau untuk memasang fitur ini admin punya solusinya, persentase yang dihasilkan dapat dimulai dari 0% sampai 100% loh tergantung seberapa banyak agan scroll kebawah, untuk pemasangannya anda bisa lihat tutorial dibawah ini

Cara Menampilkan Persentase Pada Scrollbar Blog

Pertama, simpan kode di bawah tepat di atas ]]></b:skin> atau </style>


#scroll { 
 display:none; 
 position:fixed; 
 top:0; 
 right:15px; 
 z-index:500; 
 padding:3px 8px; 
 background-color:#369fcf; 
 color:#fff; 
 border-radius:3px; 
 font-size:14px; 
} 
#scroll:after { 
 content: " "; 
 position: absolute; 
 top:50%; 
 right:-10px; 
 height:0; 
 width:0; 
 margin-top:-6px; 
 border:6px solid transparent; 
 border-left-color:#369fcf; 
}

Setelah itu masukkan code dibawah ini dibawah code </head>

<div id='scroll'></div>

Simpan kode di bawah ini tepat di atas </body>


<script type='text/javascript'> //<![CDATA[ var scrollTimer = null; $(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2; $('#scroll') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(600); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(600); }, 1000); }); //]]> </script>

Langkah Terakhir Save Template Anda Dan lihat Hasilnya :),,,

Itulah cara membuat persentase blog menggunakan jQuery Semoga Bermanfaat,

Sebagian artikel ini dikutip dari http://arlinadesign.blogspot.com/2014/10/memasang-persentase-pada-scrollbar.html

Cara Menaikkan Trafik Blog Dengan Mudah

noreply@blogger.com (Hamzah) — Sat, 13 Dec 2014 16:44:00 +0700

Cara Menaikkan Trafik Blog Dengan Mudah | Untuk beberapa bulan ini kayaknya blog Hamzah Fansyuri 14 akan berusaha lebih untuk menaikkan Trafik Blog karena mulai Bulan Mei kemarin trafik blog ini terus anjlok sampai sekarang belum tau apa sih penyebabnya, namun diperkirakan karena terlalu over mengoptimasi seonya jadi diabaikan sama google.

untuk itu admin nemu artikel dari blog Kak Dian Anarchyta tenntang cara menaikkan trafik blog. tips ini bisa dibilang sangat mudah daripada tips yang banyak beredar di google oke langsung disimak aja tutorial menaikan trafiknya

Cara Menaikan Trafik Blog Dengan Mudah

Perbaiki SEO Onpage (Link Sesama Artikel)
Coba Agan sesekali kasih link keluar DOFOLLOW di dalam artikel dengan Anchor text tidak harus keyword, ke trusted site Wikipedia agar dapat Link Juices dari google.
Untuk yang ketiga agan mungkin harus lebih berusaha keras Yaitu Optimasi OFF PAGE Seperti Backlink dan Lain Lain : Baca Juga Cara Mendapatkan Backlink Berkualitas
Bikin Akun Google Plus dan isi dengan postingan agan. Agan juga penting untuk mengisi profile about di Google Plus dengan menyertakan website agan. Caranya bisa dilihat di sini
Bikin akun Facebook Fan page, Twitter dan Pinterest, sebenarnya kegunaan akun itu agar agan bisa lebih dekat dengan pengunjung
Membuat Video Original Bergurasi 3-10 Menit, lalu setelah diupload ke youtube pada deskripsi video masukkan link blog anda
Memberikan 40 Manual PR10 Social Bookmark Backlinks

Okelah itu share admin kali ini, semoga bermanfaat.. :)

Artikel ini sebagian dikutip dari blog http://the-anarchyta.blogspot.com/2014/11/cara-menaikan-trafik-blog-dengan-mudah.html

Cara Terampuh Cek Broken Link Blog

noreply@blogger.com (Hamzah) — Mon, 8 Dec 2014 18:19:00 +0700

Cara Terampuh Cek Broken Link Blog - Sebenarnya broken link itu bahaya tidak sih kepada blog kita ?, menurut admin broken link termasauk salah satu hal yang dapat membahayakan blog kita, karena bisa saja blog kita dinilai Tidak Diurus oleh google dengan adanya banyak broken link. Oke sekarang kita akan membahas masalah broken link, udah tau belum cara cek broken link.

Broken link itu biasanya diakibatkan oleh salah satu artikel sudah dihapus namun masih ada link yang terkait dan lebih bahayanya terkait dengan blog kita. untuk itu lebih baik jika anda menulis artikel lebih baik jika hanya satu saja link didalamnya. Berikut ini tutorial cek broken link blog

Cara Cek Broken Link Blog

Pergi ke website cek broken link salah satunya http://brokenlinkcheck.com/
Masukkanlah URL blog ataupun website agan ke kotak yang disediakan, Ingat tanpa http://
Klik Find Broken Link
Lalu tuliskan security code yang muncul
Klik Broken Links Now !

Note :

Disana ada dua pilihan yaitu

Report distinct broken links only
Report all occurrences of each dead link (may be slower

- Jika memilih yang pertama, berarti hanya sebagian link rusak saja yang akan terdeteksi
- Jika memilih yang kedua, berarti seluruh link yang tidak aktif akan terdeteksi dan ini akan memakan waktu lama

6. Tunggu proses pengecekan broken link beberapa menit, lama atau tidaknya tergantung banyaknya jumlah web pages atau halaman web
7. Jika sudah selesai akan ada jumlah link yang tidak aktif, silahkan Anda perbaiki

Selesai, itulah Cara Mengecek Broken link yang ada pada blog, semoga bermanfaat

Membuat Progress Loading Bar Blog Seperti Youtube

noreply@blogger.com (Hamzah) — Sun, 7 Dec 2014 10:42:00 +0700

Membuat Progress Loading Bar Blog Seperti Youtube - Agan agan semua pasti pernah mengunjungi situs youtube, entah itu mau nyari video tutorial maupun hanya sekedar mendengarkan lagu ataupun menonton film. kalau agan perhatiken dengan teliti pada bagian atas situs youtube pasti ada progressbar yang berwarna merah kalau kita baru membuta video. Menurut agan keren bukan ?.

Untuk blogger juga bisa menambahkan desain seperti itu, dengan bantuan javascript, yaitu javascript nanobar, untuk masalah kecepatan loading blog mungkit tidak terlalu membebani karena ukuran jQuery nya pun hanya kecil.

Untuk kustomisasi bisa dibilang sangat mudah karena agan bisa merubah warna maupun ukuran dari nanobar tersebut, untuk reviewnya agan bisa melihat gambar gif dibawah ini

Untuk demo langsungnya agan langsung aja refresh halaman blog ini dan lihat diatas ada garis biru yang berjalan.

Oke untuk menambahkan progressbar seperti you tube ini agan hanya menambahkan code javascript ini diatas code </body>

 
<script type="text/javascript">

//<![CDATA[

var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=

a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,

k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();

var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);

//]]>



</script>

Resource by : http://www.kompiajaib.com/2014/11/membuat-progress-loading-bar-blog.html

Anzrosone SEO Blogger Template

noreply@blogger.com (Hamzah) — Wed, 26 Nov 2014 15:57:00 +0700

Anzrosone SEO Blogger Template | Udah Lama banget Admin gak update postinan tentang template dan kali ini admin mau bagikan template yang bisa dibilang, ya lumayanlah untuk masalah seo, templatenya minimalis, nama templatenya Anzrosone SEO Blogger Template, untuk lebih lengkapnya langsung aja di lihat

Fitur Template

Responsive
SEO 100% cek
SEO Ready
Top Menu With Social Media
Menu Wrapper With Dropdown
Fixed Search
Ads Banner 728x90
Large Ads Banner
Back To Top
Page Number Navigation
3 Kolom Footer
Threaded Comment Versi Google+ And Blanter
SEO Breadcrumbs
Facebook Comments
Emoticon Versi Blog Dunia Blanter
Konversi Kode
Page Not Found (Style Unable To Connect To The Internet)
Quote And Note Ready
And Many More...

Itulah template yang admin bagi kali ini, dan semoga bermanfaat,,,

Cara Mendapatkan Backlink Berkualitas Dengan Mudah

noreply@blogger.com (Hamzah) — Fri, 14 Nov 2014 18:56:00 +0700

Cara Mendapatkan Backlink Dengan Mudah - Siapa yang tidak kenal yang namanya backlink, Backlink adalah suatu hubungan feedback antara situs, hubungan tersebut berupa alamat situs. Misal alamat situs "A" terdapat di alamat situs "B" atau begitu juga sebaliknya, sehingga jika pengunjung dari situs"A" melihat dan mengklik link tersebut maka ia akan diarahkan untuk mengunjungi situs "B", secara langsung situs "B" telah diuntungkan.

Trik yang admin bagikan kali ini adalah trik yang paling sederhana yaitu dengan menggunakan media BLOGWALKING, sebenarnya trik ini mudah dilaksanakan tapi belum tentu bisa berhasil hingga 100%, trik ini dengan kata lain bisa dibilang blog yang jalan jalan di blog seberang alias blog orang lain, oke langsung aja disimak tatacaranya,...

Blogwalking

Hal yang pertama yang harus anda cari adalah, Search di Google dengan kata kunci Judul Artikel Milik Sobat. Disini kita akan mencari kompetitor blog kita yang posisinya teratas.

Buka artikel tersebut dan beri komentar, silahkan sobat berikan komentar dengan live link jika diperbolehkan oleh Admin blog. Ingat! Komentar yang sobat tulis harus dengan live link yang menuju ke artikel milik sobat dengan tema dan pembahasan yang sama (Relevan), jika tidak bertema sama justru akan menjadi "Low Quality Backlink" yang tentu saja tidak baik di mata search engine. Atau gunakan Name/URL jika tidak diperbolehkan menggunakan live link, selain itu Name/URL juga terkesan lebih sopan.

Bagaimana mudahkan caranya namun cara ini berhasil jika admin blog tersebut mengunjungi live link yang kita berikan, tapi ingat jangan terlalu sering menggunakan teknik LIVE LINK karena bisa dituduh SPAM Google. Selamat mencoba dan Semoga bermanfaat

Mungkin Agan Suka

Pasang Widget backlink di blog

Courtesy By http://mangtekno.blogspot.com/2014/02/cara-mudah-mendapatkan-backlink-berkualitas.html

Membuat Widget Instagram Pada Blogger

noreply@blogger.com (Hamzah) — Sun, 9 Nov 2014 12:52:00 +0700

Widget Instagram di Blog. Sobat Blogger tentunya tidak asing lagi dengan yang namanya Instagram. Apa itu Instagram? Instagram adalah layanan aplikasi berbagi foto. Instagram memungkinkan bagi penggunanya untuk mengambil foto, mengedit, menerapkan filter digital, dan membagikan foto ke situs situs jejaring sosial seperti Facebook, Twitter, Foursquare, Tumblr, Flickr, Posterous, dan juga jejaring sosial milik Instagram sendiri. Pengguna Apple atau Android pastilah sudah tidak asing lagi dengan Aplikasi berbagi Foto Instagram.

How to Add An Instagram Widget in Blogger

1. Untuk mendapatkan widget ini silahkan masuk ke alamat: www.intagme.com
2. Ketik username > Pilih Grid atau Slideshow:

3. Pilih ukuran gambar anda. Pilih juga jika sobat ingin menambahkan garis bingkai di apilkasinya.

4. Untuk mengganti latar belakang warna, sobat dapat memilih seperti contoh dibawah ini.

5. Jika sobat ingin menambahkan tombol sharing pada widget, select 'Yes', jika tidak pilih 'No'.
6. Setelah sobat selesai dengan widgetnya silahkan kilik "Get Code" dan ambil kodenya untuk di pasang ke widget blog sobat.

7. Sekarang sobat tinggal menambahkan widget ini kedalam template blog sobat. Masukan ke "HTML/JavaScript" seperti contohnya gambar dibawah ini.

9. Setelah itu tinggal simpan dan lihat hasilnya di blognya sobat.

Coutesy By: http://www.seocips.com/2014/09/cara-memasang-widget-instagram-di.html

Membuat Foto Profil Facebook Tibak Bisa Di Klik

noreply@blogger.com (Hamzah) — Mon, 27 Oct 2014 19:27:00 +0700

Membuat Foto Profil Facebook Tibak Bisa DI Klik - Facebook merupakan sosial media terbesar di dunia, bahkan alexa ranknya saja hanya 1 digit, yaitu rank 2, berposisi di belakang peringkat rank search engine google yakni rank 1. Pengguna facebook di indonesia bisa di bilang besar karena coba lihat peringkat pengguna faceboook di Indonesia (41,777,240 pengguna facebook), sebenarnya tutorial ini hanya sederhana dan admin ambil dari blog sebelah yaitu blog Si Ryan, Oke langsung disimak aja

Semakin banyak teman di facebook kita semakin ramai juga beranda facebook kita, seperti halnya berbagi status, foto, pasti akan banyak yang melihat, lalu bagaimana caranya jika foto profil facebook sobat tidak ingin ada yang klik (zoom) ?, caranya gampang, berikut caranya.

Pertama masuk ke bagian profil sobat

Lalu klik foto profil facebook sobat, nah sekarang setting bagian privasinya menjadi hanya saya, klik icon bola dunia lalu pilih Hanya Saya

Nah sekarang bagian foto profil facebook sobat tidak bisa di klik.
Semoga Bermanfaat.

Cara Verifikasi Blog Ke Bing

noreply@blogger.com (Hamzah) — Thu, 23 Oct 2014 18:56:00 +0700

Cara Verifikasi Blog Ke Bing - Bing merupakan salah satu search engine, yang bisa dibilang terkenal karena di bing hampir sama dengan google. pada google kita sudah tidak asing lagi dengan yang namanya Google Webmaster apa lagi yang sering bergelut di dunia blogging, Google webmaster adalah saah satu tools untuk memantau situs web ataupun blog, sama dengan bing, Bing juga memiliki webmaster dan sekarang kita akan membahas tentang cara verifikasi blog ke bing, fungsi verifikasi pada bing salah satunya mempercepat pengindeksan suatu artikel.

Untuk mendaftar di bing anda harus login atau membuat akun terlebih dahulu dengan cara, langsung aja disimak dibawah ini.

Cara Verifikasi Blog Ke Bing Webmaster

Silahkan submit terlebih dahulu blog sobat di Bing Webmaster Tools disini http://www.bing.com/toolbox/submit-site-url

Masukkan URL blog sobat kedalam kolom yang telah disediakan, lalu masukkan kode captcha yang benar lalu klik Submit

Setelah dimasukkan semua yang diminta lalu klik Submit dan akan muncul halaman seperti dibawah ini

Silahkan login dengan menggunakan akun microsoft, jika belum punya silahkan register terlebih dahulu, selanjutnya masukkan URL blog sobat, bagian sitemap boleh di kosongkan, lalu klik ADD

Setelah itu agan akan mendapatkan kode verifikasi blog dari Bing

Copykan kode tersebut lalu letakkan di atas kode <head> tepat di bagian bawah meta tag
Setelah meletakkan kode tersebut klik Simpan Template lalu kembali lagi ke halaman Bing tadi lalu tekan tombol VERIFY

Nah Sekarang blog anda sudah terindeks ke Bing Webmaster Tools dan insyaallah artikel agan akan terindeks lebih cepat

Membuat Chop Slider Responsive Di Blog

noreply@blogger.com (Hamzah) — Tue, 14 Oct 2014 14:32:00 +0700

Dengan Widget Chop Slider Responsive ini, tampilannya bagus ketika diakses berbagai perangkat baik komputer, laptop, tablet, ataupun handphone.
Tentunya chop slider ini menggunakan jquery untuk menampilkan efek-efek yang lebih mengagumkan pada transisi atau pergantian gambarnya.

DEMO

Bagi yang tertarik untuk mencobanya silahkan ikuti tutorial di bawah ini :

Kode CSS Silahkan sobat letakan di atas ]]></b:skin> atau </style>

/* CHOP SLIDER RESPONSIVE */ .wrapper{position:relative;margin:0 auto;width:100%;height:auto;padding:0;z-index:2;} .slide-background img{opacity:.5;width:100%;height:auto;z-index:1;margin-bottom:-4px} #slide-prev,#slide-next{padding:15px;bottom:10px;right:10px;position:absolute;z-index:4} #slide-prev{right:45px;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivpTb6Kx908Mn8zQU-KFS6KPuMeCtXaQByf8lrcEluGDyxTzLmW6ltzoCnqjFwvzA10bI1Zv8dIYtHzSwXgumUYdrCbIjT79Vj3LgmySPcwehMdj0BYu_bELqI7TEHh4pFrrTUBfmL3Tg/s1600/arrow_left.png) no-repeat center;z-index:4} #slide-next{right:10px;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdJS_o7tEb3eGK-NrbWAkghChiIugg9JQF-UkdXSW2GhlWG61-KS0HVeedi4vS-v80z-94whAafhHga_l1UrJpfoEcGsBgTzAlovzxZT13PnAq22K0pOwtDx_tNoI29VOiU3e2Afk6wc/s1600/arrow_right.png) no-repeat center;z-index:4} #slider{width:100%;height:auto;margin:0 auto;position:absolute;top:0;left:0;z-index:2;display:block} #slider img{width:100%;height:auto} .slide{display:none} .cs-activeSlide{display:block} .cs-activeSlide img{width:100%;height:auto;margin-bottom:-4px} .slide-descriptions{display:none} .caption{background:rgba(238,238,238,0.83);color:#333;display:none;padding:10px;position:absolute;width:30%;left:4%;top:5%;z-index:3;font:bold 16px/20px Arial,sans-serif}

Kode HTML

<div class='wrapper'> <a href='#' id='slide-next' title="Next"></a> <a href='#' id='slide-prev' title="Prev"></a> <div class='slide-background'> <img alt="background slider" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_BxhgnqICGqntFZMiMWyXumzwHCFFzOdWb5ITDkijx639j9GX9_9BmED23hMZbiEtZp0_b_ZuIb_uwSUUWuUrJhebpz6A401HshA_44M3HrpvlODNrHirD-Zy91HrPkc6OFYxHyxfGuID/s1600/Tulips.jpg' title="Background Slider"/></div> <div id='slider'> <div class='slide cs-activeSlide'><a href='#' title="Thumbnail 1"><img alt="thumbnail 1" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_BxhgnqICGqntFZMiMWyXumzwHCFFzOdWb5ITDkijx639j9GX9_9BmED23hMZbiEtZp0_b_ZuIb_uwSUUWuUrJhebpz6A401HshA_44M3HrpvlODNrHirD-Zy91HrPkc6OFYxHyxfGuID/s1600/Tulips.jpg' title="Thumbnail 1"/></a></div> <div class='slide'><a href='#' title="Thumbnail 2"><img alt="thumbnail 2" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3WXpP5bnWysun72HFFrXufhrajrvzN9blgvniPjxUmdDJHvlqCgoQJfzUN4VuJFZJ00MB1KaIf-barNEOP6gVemDzxvUSOaMPmJUkwD0uE6U-wpWQXoitAtIJ1x_l24Wnvy8vKoCeuCg/s1600/Chrysanthemum.jpg' title="Thumnail 2"/></a></div> <div class='slide'><a href='#' title="Thumbnail 3"><img alt="thumbnail 3" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzCgMyfHF34R8JEhuMdpDsyFsV-JgMkOsQdxBk0g-eP3mkHVelPD416rCT6Ee5d00bQpqWT1QxqdVNQc5oU_N_fl-XoktVux7tNXu7yNsQ9pee8ZtX0Lg244TRGypHNjkkP9xPZVys9Xa_/s1600/Desert.jpg' title="Thumbnail 3"/></a></div> <div class='slide'><a href='#' title="Thumbnail 4"><img alt="thumbnail 4" height="300" width="600" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEismMbt1Ye4U3TfpcHZLaW4aGZu1NeThVEP8fwAc4qxSGcfqAejy1_4Nv2wRY0jVYrg_5vIzmAWhMpzICDgP_qJBVIz3t_uRIWi_vI_z1J3K9jIghn5PVqbrPdNdAb5LS6OBujtbEl0vrah/s1600/Hydrangeas.jpg' title="Thumbnail 4"/></a></div> </div> <div class='slide-descriptions'> <div class='sl-descr'>The Walking Dead Season 2 Episode 2 PC Games Full Version</div> <div class='sl-descr'>Free Download Call Of Juarez The Gunslinger Pc Games Highly Compressed</div> <div class='sl-descr'>The Walking Dead Season 2 Episode 2 PC Games Full Version</div> <div class='sl-descr'>Download Prototype 2 Highly Compressed Full Version</div> </div> <div class='caption'></div> </div><div style='clear:both'></div>

Kode Javascript

<script type="text/javascript" src="http://yourjavascript.com/47151141530/jquery-chopslider-2-2-0.js"></script> <script type="text/javascript" src="http://yourjavascript.com/11061142943/jquery-cstransitions-1-2.js"></script> <script> jQuery(function(){ $("#slider").chopSlider({ slide : ".slide", nextTrigger : "a#slide-next", prevTrigger : "a#slide-prev", hideTriggers : true, sliderPagination : ".slider-pagination", useCaptions : true, everyCaptionIn : ".sl-descr", showCaptionIn : ".caption", captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)", autoplay : true, autoplayDelay : 3000, t3D : csTransitions['3DFlips']['random'], t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ], noCSS3 : csTransitions['noCSS3']['random'], mobile : csTransitions['mobile']['random'], onStart: function(){}, onEnd: function(){} }) }) </script>Image pada <div class='slide-background'> adalah gambar background untuk slidernya agar ketinggianwrapper tetap terjaga, silahkan gunakan pakai gambar apa saja.

Silahkan ganti URL gambar dengan URL gambar yang ingin Anda tampilkan, dan silahkan sesuaikan alt dan title tag-nya, begitu pun dengan tinggi dan lebarnya. Sebagai saran, gunakan dimensi gambar (lebar dan tinggi) yang sama untuk semua gambarnya, begitu pun dengan gambar background slider-nya.

Untuk deskripsi gambar pada <div class='slide-descriptions'> ini, deskripsi paling atas adalah untuk deskripsi gambar pertama, begitu seterusnya.

Artikel Dikutip Dari http://blanter-forever.blogspot.com/2014/10/membuat-widget-chop-slider-responsive-di-blog.html

Membuat Floating Social Bookmark Dengan Efek Easing

noreply@blogger.com (Hamzah) — Sun, 12 Oct 2014 10:39:00 +0700

Membuat Floating Social Bookmark Dengan Efek Easing - Kali ini kita akan membahas Membuat Floating Social Bookmark dan ada bonusnya, yaitu bonus tambahan Efek Easing, widget ini dibuat oleh Mas Kolis, ini adalah widget floating atau biasa disebut melayang dengan tambahan jquery library dan efek Easing tentu saja dengan penggunaan image yang lebih sedikit (hanya satu).

Dengan menggunakan Jquery, jika agan meletakkan kursor pada salah satu icon social bookmark, dia akan keluar perlahan-lahan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Berikut langkah pembuatannya :

Masuk ke blogger
Lalu ke Template > Edit HTML
Letakkan kode css ini diatas ]]></b:skin>

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

Sekarang letakkan kode jQuery ini diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>

Untuk jQuery yang warna biru diatas, jika pada template agan sudah terpasang, ditinggalkan saja.

Selanjutnya meletakkan kode pemanggilan untuk widgetnya, letakkan diatas </body>

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

ganti tulisan yang berwarna biru dengan ID akun agan

Terakhir, klik Simpan Template

Itu dia tentang Cara Membuat Floating Social Bookmark Dengan Efek Easing, jika ada pertanyaan jangan sungkan untuk berkomentar, Semoga Bermanfaat.

Artikel Ini Dikutip Dari : http://blogsiryan.blogspot.com/2014/09/membuat-floating-social-bookmark-efek-easing.html

Responsive Simple Tooltip Untuk Semua Elemen

noreply@blogger.com (Hamzah) — Tue, 30 Sep 2014 16:40:00 +0700

Cara Memasang Tooltip Responsive di Blog dengan jQuery. -

Assalamu'alaikum Para Pengunjung Blog Hamzah Fansyuri 14 untuk kali ini admin mau bagi tips dari blog sebelah yaitu blog kang rian, oke langsung aja disimak tutorialnya...

Tooltip pada Paragraph atau tag <p> :

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tooltip pada Gambar atau pada tag <img> :

Tooltip pada Link atau pada tag anchor text <a> :
Kang Rian [on Blogger!] - Tutorial Blogger & Tips Trik Blogging!

Cara Pemasangan :

Langkah-1 : Pastikan sobat sudah memasang jQuery Library, versi berapapun itu. jika belum silahkan simpan script external dibawah ini tepat sebelum code </head> pada halaman Edit Template :

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Catatan : Pemasangan jQuery dalam Blog hanya boleh 1x saja, jika lebih dari 1 maka Efek-efek yang mengandalkan fungsi jQuery tidak akan berfungsi.

Langkah-2 : Simpan kode CSS di bawah ini tepat di atas tag </head> :

#tooltip { text-align: center; color: #fff; background: #111; position: absolute; z-index: 100; padding: 15px; border-radius: 3px; } #tooltip:after /* triangle decoration */ { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #111; content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; } #tooltip.top:after { border-top-color: transparent; border-bottom: 10px solid #111; top: -20px; bottom: auto; } #tooltip.left:after { left: 10px; margin: 0; } #tooltip.right:after { right: 10px; left: auto; margin: 0; }

Catatan : Silahkan desain secantik mungkin kode CSS Responsive Tooltip di atas.

Langkah 3 - Simpan kode JavaScript di bawah ini, tepat di atas tag </body> :

<script> //<![CDATA[ // Pengaturan Tooltip akan otomatis di pasang pada tag tertentu ( Setting di Bawah ini ) : $("a").addClass("tooltip"); $("img").addClass("tooltip"); $("p").addClass("tooltip"); // Responsive Tooltip Minify JS $(function(){var targets=$("[class~=tooltip]"),target=false,tooltip=false,title=false;targets.bind("mouseenter",function(){target=$(this);tip=target.attr("title");tooltip=$('<div id="tooltip"></div>');if(!tip||tip==""){return false}target.removeAttr("title");tooltip.css("opacity",0).html(tip).appendTo("body");var init_tooltip=function(){if($(window).width()<tooltip.outerWidth()*1.5){tooltip.css("max-width",$(window).width()/2)}else{tooltip.css("max-width",340)}var pos_left=target.offset().left+(target.outerWidth()/2)-(tooltip.outerWidth()/2),pos_top=target.offset().top-tooltip.outerHeight()-20;if(pos_left<0){pos_left=target.offset().left+target.outerWidth()/2-20;tooltip.addClass("left")}else{tooltip.removeClass("left")}if(pos_left+tooltip.outerWidth()>$(window).width()){pos_left=target.offset().left-tooltip.outerWidth()+target.outerWidth()/2+20;tooltip.addClass("right")}else{tooltip.removeClass("right")}if(pos_top<0){var pos_top=target.offset().top+target.outerHeight();tooltip.addClass("top")}else{tooltip.removeClass("top")}tooltip.css({left:pos_left,top:pos_top}).animate({top:"+=10",opacity:1},50)};init_tooltip();$(window).resize(init_tooltip);var remove_tooltip=function(){tooltip.animate({top:"-=10",opacity:0},50,function(){$(this).remove()});target.attr("title",tip)};target.bind("mouseleave",remove_tooltip);tooltip.bind("click",remove_tooltip)})}); //]]> </script>

Cara Pemasangan ke HTML?Dikarenakan Responsive Tooltip ini menggunakan jQuery Library, maka saya menambahkan fungsi ".addClass" pada ke 3 tag html yaitu "P" , "IMG" , dan "A" ( Paragraph, Image, dan Anchor Text ).

Jadi sobat gak perlu bingung cara pakai plugin responsive tooltip ini, sobat hanya cukup menggunakan property title="Judul" seperti biasa-nya. dan Plugin Responsive Tooltip ini akan muncul dengan sendirinya.

Sekian postingan saya kali ini, tentang Bagaimana Cara Memasang Tooltip Responsive dengan jQuery dan CSS di Blog?, jika ada pertanyaan, silahkan diskusikan melalui kotak komentar dibawah ini, terima kasih.

Source By : http://blog.kangrian.com/2014/06/Responsive-Tooltip-di-Blog-Dengan-jQuery.html

Membuat Halaman Google Search Engine

noreply@blogger.com (Hamzah) — Wed, 10 Sep 2014 15:21:00 +0700

Cara menambahkan fungsi Google Search Engine atau Google Custom Search di blog. Mungin sobat bertanya, untuk apa memakai Google Search Engine, kan semua blog sudah punya Halaman Search masing-masing. Nah keuntungannya adalah, Halaman GSE ini linknya redrect dari google ke blog sobat, dan mungkin blog sobat bisa cepat mendapatkan Google PageRank.

Sobat yang ingin mencoba menambahkan GSE pada search box yang sudah ada di blog Sobat.
Langkah Pertama
Silahkan Sobat masuk DI SINI dan silahkan login dengan akun Google Sobat.

Langkah Kedua

Silahkan klik tombol "Add" untuk mulai membuat Google Search Engin untuk blog Sobat

Langkah Ketiga

Kemudian pada halaman yang tersedia silahkan tambahkan url blog Anda tanpa "http" seperti tertera pada contohnya. Kemudian beri nama untuk Search Engine blog Anda pada kotak di bawahnya, setelah itu silahkan klik tombol "Create".

Langkah Keempat

Kemudian pada halaman selanjutnya silahkan klik tombol "Control Panel"

Langkah Kelima

Pada halaman selanjutnya pada menu "Setup" silahkan klik tombol "Search engine ID" dan silahkan copy search engine ID blog Anda ke notepad.

Langkah Keenam

Silahkan klik menu "Look And Feel" di kiri atas dan pada option "Layout" silahkan pilih "Results only" kemudian klik tombol "Save & Get Code"

Langkah Ketujuh

Pada halaman berikutnya silahkan copy kode yang disediakan dan silahkan buat postingan baru pada Page Statis (halaman statis) blog Sobat dan paste kode tersebut pada editor HTML, silahkan beri title untuk halaman tersebut misalnya "Blog Sobat Search Results" kemudian publish postingan tersebut dan catat URL postingan statisnya.

Perhatikan kode di bawah ini
<form id='searchform' action='/search' method='get' target='_blank'>

Silakan ganti kode di atas menjadi seperti di bawah ini

<form id='searchform' action='URL POSTINGAN STATIS PADA LANGKAH KETUJUH' target='_blank'>

Silahkan ganti URL POSTINGAN STATIS PADA LANGKAH KETUJUH dengan URL page statis untuk Search Results yang Anda buat pada langkah ketujuh tadi.

Kemudian tambahkan kode di bawah ini setelah kode tadi

<input type='hidden' name='cx' value='partner-pub-KODE SEARCH ENGINE ID DARI LANGKAH KELIMA' /> <input type='hidden' name='cof' value='FORID:10' /> <input type='hidden' name='ie' value='ISO-8859-1' />

Silahkan ganti KODE SEARCH ENGINE ID DARI LANGKAH KELIMA dengan kode search engine ID yang Sobat peroleh dari langkah kelima di atas.

Mungkin itu saja tutorial kali ini jika ingin tahu lebih lanjut silahkan sobat lihat sumber post ini.

Courtesy : http://blanter-forever.blogspot.com/2014/09/membuat-halaman-google-search-engine.html

Cara Menghapus Postingan Yang Benar

noreply@blogger.com (Hamzah) — Sat, 23 Aug 2014 19:08:00 +0700

Cara Menghapus Postingan Yang Benar - Beberapa di antara kita pernah menghapus artikel hanya melalui Dashbord Blogger dan langsung mengklik "Hapus" pada posting. Apakah Posting tersebut akan terhapus begitu saja?
Jawabannya adalah BENAR! Posting tersebut akan terhapus di post Blogger sobat, tetapi pernahkah sobat berfikir, Apakah artikel sobat telah benar - benar terhapus dari Search Engine?
Jawabannya adalah TIDAK! kenapa begitu, karena menghapus Posting Yang Benar Pada Blog yaitu melalui webmaster tool. Karena Standard untuk menghapus artikel yang baik dan benar seperti yang sobat ketahui jika posting sobat sudah terindeks dan masuk dalam SERP kemudian sobat hanya menghapus secara biasa melalui dashboard blogger, hal yang sangat sepele ini dapat menyebabkan Broken Link, Error Crawl, dan 404 Not Foundyang membuat blog sobat semakin tidak SEO Friendly dan menyebabkan Bounce Rate semakin tinggi..
Berikut ini tips yg bisa saya bagikan..

Login ke Google Webmaster Tools
Pilih Blog sobat yg ingin di hapus Postingannya.
Pada Sidebar Kiri klik Google Indeks Hapus URL

Klik Buat Permintaan Penghapusan Baru - Terus

Selanjutnya sobat akan di alihkan ke Halaman seperti di Bawah ini
Alasan : Pilih hapus laman dari hasil penelusuran dan cach
Langkah terakhir klik kirim permintaan, tunggu 1X24 jam untuk Google menghapus url dari hasil penelusuran dan cache.

Mungkin seperti itu saja tips yg bisa saya bagikan hari ini mengenai Cara Menghapus Posting Blog yang Benardan Semoga bermanfaat..

Courtesy By : http://the-anarchyta.blogspot.com/2014/08/cara-menghapus-posting-blog-yang-benar.html

Share Image Post Dengan Crosspost Sharing Widgets

noreply@blogger.com (Hamzah) — Mon, 4 Aug 2014 17:31:00 +0700

Share Image Post Dengan Crosspost Sharing Widgets - Assalamu'alaikum para bloggers, untuk kali ini admin mau share artikel bisa dibilang udah banyak yang membuat artikel seperti ini, untuk kali ini kita akan membahas Sharing Gambar dengan crosspost, crosspost ini merupakan widget yang dikeluarkan oleh pinterest, selain tombol share langsung artikel sekarang pinterest juga mengeluarkan tombol share pada gambar artikel, mau liat screen shootnya langsung aja dibawah gan...

Untuk menggunakannya agan cuma harus mendekatkan cursor kepada bagian gambar alias hover gambar.

Agan Tertarik mencobar Crosspost Sharing Widgets. kalau tertarik langsung aja ikuti tuturial dibawah ini

Membuat Crosspost Sharing Widgets

Seperti biasa Login dulu ke blogger
Lalu Masuk Ke Bagian Template dan letakkan kode dibawah ini tepat diatas kode </head> atay </body>

<script type="text/javascript">(function(features){var d=document,s=d.createElement('script');s.src='http://widget.symphonytools.com/widget/js/symphony.js';s.type='text/javascript';s.async='true';s.onload=s.onreadystatechange=function(){var rs=this.readyState;if (!rs || /loaded|complete/.test(rs)) try{symphony.init(features);}catch(e){}};var sc=d.getElementsByTagName('script')[0];sc.parentNode.insertBefore(s,sc);})();</script>

Simpan Template dan langsung Aja dicoba.

Oke itulah artikel yang kali ini admin share, semoga bermanfaat.. Bye

Sumber : http://www.kompiajaib.com/2014/07/sharing-image-post-dengan-crosspost.html

Download Template Minima Responsive Blogger

noreply@blogger.com (Hamzah) — Sun, 3 Aug 2014 11:38:00 +0700

Download Template Minima Responsive Blogger - Assalamu'alaikum para pengunjung blog Hamzah Fansyuri 14™, Untuk kali ini admin masih mau bagi template karya anak bangsa yaitu buatan kakak kiki dee, nama templatenya Adalah Minima Responsive, template ini baru dibuat, tapi jangan salah walau templatenya baru dibuat tapi desainnya keren banget gan. mau liat screen shootnya, langsung aja lihat dibawah

Demo
Download

Fitur Template Minima Responsive

Responsive Cek
Valid HTML5 Home Page Cek
Valid HTML5 Post Page Cek
SEO Cek
Valid HTML5 Threaded Comment
Search Engine Optimized (SEO)
2 Column
White Base Theme Color
Responsive Ads ready
Breadcrumbs
Related Posts with Thumb
Search Box
Share Button
Sticky Top Menu
Main Dropdown Menu
Numbered Page Navigation
Social Bookmark
Translation Ready
Recent Comment Notification
Custom 404 Page
Well Documentation
And Many More...

Oke itulah sekilas tentang template minima responsive kalau masih belum puas templatenya silahkan request aja yaa....

Sekian dari admin, bye