Trik Ricky: Blogger
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

18/12/17

Cara Simple Membuat Social Share Button Dengan Font Awesome

Social Share button dengan font awesome

Pada artikel sebelumnya pernah saya bagikan artikel yang sama tentang Cara membuat social share button lengkap dengan Whatsapp, Line dan BBM, namun kali ini Social Share yang saya bagikan sangat simple dan mudah untuk diterapkan diblog.

Terdapat 3 tombol share umum yang saya letakan pada social share kali ini, yaitu Facebook, Twiter dan Google+.

Untuk penerapannya, ikuti langkah-langkah berikut:


Langkah 1

Letakan kode CSS berikut diatas </style>

/* Simple Socshare With Font Awesone */
.shareku span {font-size:16px}
.shareku a, .shareku a:hover {color:#fff}
.fb, .twit, .gplus {text-align:center; padding:5px 12px; font-size:12px; border-radius:3px}
.fb { background-color:#1358BA}
.twit { background-color:#03C7E9}
.gplus { background-color:#FE1635}
.fb:hover, .twit:hover, .gplus:hover {background-color:#547279; transition:background-color 0.7s ease-out 0s}

Langkah 2

Cari kode <div class='post-footer-line-1'> dan letakan kode berikut tepat dibawahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shareku'>
<span>Bagikan Artikel:</span>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-facebook icon-large'/> Facebook</a> 
<a class='twit' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-twitter icon-large'/> Twitter</a> 
<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-google-plus icon-large'/> Google+</a>
</div>
</b:if>

Langkah 3

Karena Social share ini menggunakan Font Awesome, pastikan anda sudah menambahkan kode berikut ke dalam template tepat di atas </head>

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

Lewati langkah ke 3 jika sudah terdapat kode tersebut di dalam template anda.

Selesai, simpan template dan lihat hasilnya.

Demikian Cara membuat Cara Simple Membuat Social Share button dengan Font Awesome. Selamat beraktifitas.

Membuat Page Loader Sederhana Ala Arlina Design

Membuat Page Loader Sederhana Ala Arlina Design

Pada tutorial kali ini saya akan membagikan tutorial cara membuat page loader atau efek loading yang di gunakan pada template arlina design, page loader ini mirip seperti Membuat Efek Loading Bar Seperti Di Youtube yang sudah saya bagikan pada tutorial sebelumnya.

Page loader ini akan muncul sebelum halaman blog terbuka, efeknya page loader ini memunculkan berbagai warna yang berganti dan melebar keluar secara horizontal.

Nah jika anda tertarik menambahkan efek ini, berikut adalah langkah-langkahnya:

Membuat Page Loader Arlina


Langkah awal letakan kode CSS berikut diatas </style>

/* CSS Loader Arlina */
.cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000}
myloader [role="progressbar"][aria-busy="true"]{position:absolute;top:0;left:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite}
myloader [role="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:''}
myloader [role="progressbar"][aria-busy="true"]::before{right:50%}
myloader [role="progressbar"][aria-busy="true"]::after{left:50%}
@-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}
@keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}

Selanjutnya letakan JavaScript berikut diatas </body>

<script type='text/javascript'>
//<![CDATA[
// Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script>

Kemudian letakan Kode berikut di diantara tag <body> dan </body> (tempatkan sesuai keinginan anda)

<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'></div>
</myloader></div>
<div class='page-loader' id='pagingx'></div>

Simpan template.

Jika anda masih bingung peletakan kode HTML diatas anda bisa melihat kode diatas yang saya letakan tepat dibawah Navigasi menu berikut:

<nav id='navigation-hype' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='maxwrap'>
<input type='checkbox'><i aria-hidden='true' class='fa fa-align-left'/> Menu</input>
<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'/>
</myloader></div>
<div class='page-loader' id='pagingx'/>
<ul>
<li class='indie'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Info%20Ikan' itemprop='url'><span itemprop='name'>Info Ikan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Jenis%20Ikan' itemprop='url'><span itemprop='name'>Jenis Ikan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Pakan' itemprop='url'><span itemprop='name'>Pakan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Akuarium' itemprop='url'><span itemprop='name'>Akuarium</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Budidaya%20Ikan' itemprop='url'><span itemprop='name'>Budidaya Ikan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Wisata%20Air' itemprop='url'><span itemprop='name'>Wisata Air</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Tips%20Trik' itemprop='url'><span itemprop='name'>Tips Trik</span></a></li>
</ul>
</div>
</nav>


Demikian Cara membuat Page loader ala Arlina Design, semoga dapat menjadi bahan inspirasi untuk anda.

Auto Redirect Ketika Blog Diakses Dengan UC Browser & Opera Mini

Auto Redirect Ketika Blog Diakses Dengan UC Browser & Opera Mini

Makin banyaknya pengguna smartphone yang menggunakan Browser anti iklan atau Adblock seperti Uc browser dan opera mini membuat kita galooou sebagai blogger yang menggaet penghasilannya dari iklan yang kita tayangkan.

Untuk mengatasi hal tersebut cara yang paling jitu saat ini adalah Memblokir dan mengalihkannya secara otomatis ke browser Google chrome agar iklan kita dapat tampil dengan baik saat blog dibuka dan diakses oleh pengunjung.

Cara ini adalah cara paling mujarab ketimbang Cara yang pernah saya bagikan sebelumnya di Artikel yang berjudul Trik Memblokir Pengunjung ketika blog di buka dengan UC browser.

Sederhana, dengan cara ini pengguna tidak lagi menemukan notifikasi apapun seperti cara ysng pernah saya share sebelumnya ketika pengunjung mengakses blog kita dengan Uc browser dan Opera mini. Jika pengunjung terdeteksi membuka blog kita dengan salah satu dari ke dua browser tersebut maka akan langsung di alihkan ke browser nomor 1 google yaitu Chrome.

Penasaran gimana caranya? Now.. Penerapannya adalah sebagai berikut:

1. Buka Template editor.
2. Tambahkan ke 2 JavaScript dibawah ini tepat di atas </head>

Script Redirect Otomatis UC browser


<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script type='text/javascript'>
//<![CDATA[
var findmove1 = navigator.userAgent;
var redirect = findmove1.search("UCBrowser");
if(redirect>1) {
var queries1 = window.location.assign("googlechrome://navigate?url="+ window.location.href);
var activity = queries1;document.getElementsByTagName('head')[0].appendChild(activity);
}
//]]>
</script>
</b:if>

Script Redirect Otomatis Opera Mini


<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script type='text/javascript'>
//<![CDATA[
var findmove2 = navigator.userAgent;
var redirect = findmove2.search("Opera Mini");
if(redirect>1) {
var queries2 = window.location.assign("googlechrome://navigate?url="+ window.location.href);
var activity = queries2;document.getElementsByTagName('head')[0].appendChild(activity);
}
//]]>
</script>
</b:if>

Jika sudah jangan lupa simpan kembali template dan silakan coba buka blog anda sendiri dengan ke dua browser tersebut.

Demikian, Semoga Auto Redirect Ketika Blog Diakses Dengan UC Browser & Opera Mini ini dapat meningkatkan penghasilan adsense anda karena setelah ini blog anda tetap dapat menampilkan iklan meskipun endingnya harus di alihkan ke browser bawaan mbah google itu.

Menerapkan Assalamualaikum Di dalam Postingan (Snippet)

Menerapkan Assalamualaikum Di dalam Postingan (Snippet)

Bagi yang ingin Menerapkan Assalamualaikum di dalam Postingan pada blog anda silahkan simak cara-cara berikut.

Menerapkan Assalamualaikum Didalam Postingan


Langkah awal buka Dashboard > pilih template > edit html

Lalu letakan kode css berikut sebelum kode </style> (yang pertama) atau ]]></b:skin>

/* CSS Assalamualaikum */
.salamku{font-weight:700;color:#333;font-family:'traditional arabic'; font-size: 23px; text-align: center;}

Untuk menambahkan assalamualaikum sebelum postingan silahkan cari kode <data:post.body>, biasanya terdapat lebih dari satu <data:post.body>, maka dari itu cari kode yang didalam terdapat tag konditional item, jika masih bingung silakan coba satu persatu (backup template jika anda masih ragu). Tambahkan kode berikut sebelum kode yang anda cari tadi.

<div class='salamku'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>
الس&#1617;&#1614;لا&#1614;م&#1615; ع&#1614;ل&#1614;ي&#1618;ك&#1615;م&#1618; و&#1614;ر&#1614;ح&#1618;م&#1614;ة&#1615; الله&#1616; و&#1614;ب&#1614;ر&#1614;ك&#1614;ات&#1615;ه&#1615;
</span></span></div>

Rasanya jika anda menambahkan assalamualaikum di awal postingan kurang afdol jika anda tidak meambahkan salam penutupnya (Wassalamualaikum).

Untuk menambahkannya tambahkan kode berikut setelah kode <data:post.body>,

<div class='salamku'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>
و&#1614; الس&#1617;&#1614;لا&#1614;م&#1615; ع&#1614;ل&#1614;ي&#1618;ك&#1615;م&#1618; و&#1614;ر&#1614;ح&#1618;م&#1614;ة&#1615; الله&#1616; و&#1614;ب&#1614;ر&#1614;ك&#1614;ات&#1615;ه&#1615;
</span></span></div>

Jangan lupa, simpan template anda dan lihat hasilnya, Semoga Bermanfaat.

Membuat Back To Top Button Di Tengah Footer

Membuat Back To Top Button Di Tengah Footer

Tombol Back To Top adalah sebuah tombol kecil yang kembali ke atas ketika di klik, tombol ini merupakan salah satu fungsi yang diperlukan oleh sebuah blog atau website. Tombol kali ini dibuat dengan gambar dan tanpa menggunakan font awesome.

Tombol back to top memiliki peranan yang sangat penting untuk sebuah blog atau website dengan konten yang berat, memiliki halaman yang memanjang kebawah dan memiliki banyak informasi pada halamannya. Jika tidak maka akan membuat konten-konten lain terlewati.

Tombol ini akan melompat ke atas dengan mudah dan singkat, tanpa menggerakanya dengan mouse pada komputer atau dengan menggesernya untuk penggunaan pada smartphone. Ini adalah salah satu cara untuk mendorong pengguna menjelajahi lebih banyak konten di blog anda.

Jika saja sebuah blog sangat sulit untuk dijelajahi, maka akan membuat pengunjung segera berpindah kepada blog lainnya. Tombol back to top ini tidak mempengaruhi loading blog dan kompatibel untuk semua browser/peramban.

Nah untuk membuatnya anda bisa terapkan beberapa langkah di bawah ini

Membuat Tombol Back To Top


Buka template editor, tambahkan CSS, Javascript dan HTML Berikut:

/* Back To Top */
#backtotopid {position:relative;display:table;clear:both;text-align:center;margin:20px auto;}
.backtotopid {color:#fff;}
#backtotopid span {display:block;background:#4b5862;width:48px;height:48px;line-height:45px;border-radius:100%;cursor:pointer;transition:all .3s}
#backtotopid span:hover {background:#5c6b77;}
#backtotopid img{text-align:center;line-height:normal;vertical-align:middle;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user2-select:none;pointer-events:none;}

<script type='text/javascript'>
// Back to Top
$('.backtotopid').click(function(){$('html,body').animate({scrollTop:0},600);return false;});
//]]>
</script>

<div class='backtotopid' id='backtotop' title='Back to top'><span><img alt='Back To Top' height='14' src='http://3.bp.blogspot.com/-3uiiau4bwvs/VdEDQ2MVImI/AAAAAAAAK3s/xPhBH9BAJnI/s1600/btp.png' title='Back To Top' width='22'/></span></div>

Keterangan:
1. CSS letakan diatas </style>
2. JavaScript letakan diatas </body>
3. HTML letakan antara tag footer

Jika anda bingung dengan peletakan kode HTML nya, anda bisa lihat contoh dibawah ini:

<div id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<div id='footer'>
<div class='footer-navigation'><ul>
<li><a href='#' title='Formulir Kontak'>Contact</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' title='Daftar Isi Blog'>Sitemap</a></li>
</ul>
</div>
<div class='backtotopid' id='backtotopid' title='Back to top'><span><img alt='Back To Top' height='14' src='http://3.bp.blogspot.com/-3uiiau4bwvs/VdEDQ2MVImI/AAAAAAAAK3s/xPhBH9BAJnI/s1600/btp.png' title='Back To Top' width='22'/></span></div>
Copyright &#169; <span id='current-year'/> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a><br/>
</div></div>

Dengan kode diatas anda pun dapat mengubah url gambar diatas sebagaimana mestinya sesuai keinginan.

Demikian Tutorial Membuat Back To Top Button Di Tengah Footer Kali ini, Selamat siang & Happy lunch.

Membuat Efek Loading Blog Seperti Youtube Valid HTML5

Membuat Efek Loading Blog Seperti Youtube Valid HTML5

Youtube Adalah sebuah aplikasi yang mengijinkan penggunanya mengupload, Menonton bahkan Mendownload video pribadi maupun video lainnya kedalam wadah yang ditentukan, video yang kita upload dapat di tonton orang di seluruh dunia tanpa batasan waktu. namun pernahkan anda melihat sebuah bar di bagian atas ada sebuah efek loading keren yang akan muncul ketika kita akan membuka salah satu video youtube.

Jika anda sedang memutar sebuah Video di youtube pasti anda akan melihat sebuah efek loading yg berjalan diatas bar berwarna merah, nah loading bar keren ini bisa juga kita terapkan di blog kita dan tentunya juga bisa mempercantik blog kita di mata pengunjung.

Jika anda tertarik anda bisa memasang loading bar ini di blog anda. Untuk membuatnya tidaklah terlalu sulit, anda hanya cukup menambahkan JavaScript di atas </body>

<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"3px",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||"#df0d0d";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>

Simpan Template dan lihat hasilnya.

Demikian cara Membuat Efek Loading Bar Seperti Youtube di blog. Semoga bermanfaat.

Inspired: Kompi Ajaib

17/12/17

Cara Dapatkan Dollar Dengan Menyingkat URL Via Shorte st

Cara Dapatkan Dollar Dengan Menyingkat URL Via Shorte.st

Banyak sekali penyingkat URL yang beredar dan bisa di gunakan untuk menyingkat alamat url, salah satunya adalah dengan Shorte.st, untuk menghasilkan uang dari shorte.st Anda harus mempersiapkan link yang nantinya setiap pengunjung akan diarahkan terlebih dahulu ke halaman  shorte.st yang yang isinya berisi bermacam iklan dan kemudian akan di arahkan ke halaman yang sebenarnya.

Harga per klik shorte.st memiliki nilai yang lebih besar untuk negara Indonesia dibandingkan dengan Adfly sekitar kurang lebih 0,57. Situs penyingkat url ini akan umumnya digunakan para blogger termasuk saya untuk mempersingkat link yang menuju url aslinya seperti link download seperti software atau template yang biasa di share oleh para blogger, semakin banyak link akan semakin banyak kesempatan didatangi pengunjung.

Cara Daftar Shorte.st situs penyingkat URL


Untuk dapat menggunakan situs penyingkat ini dan mendapatkan uang dari Shorte.st anda diwajibkan mendaftar terlebih dahulu, jadi sekarang silakan Buka Shorte.st Situs Penyingkat URL

Cara Daftar Shorte.st 1

Dibagian bawah pada gambar diatas Pilih Join/daftar dan isikan semua dengan data diri anda.

Cara Daftar Shorte.st 2

Setelah selesai mengisi semua data anda pada tahap sebelumnya, buka email yang anda daftarkan tadi dan lakukan konfirmasi via email yang di kirimkan oleh shorte.st saat itu juga dan pada tahap ini Shorte.st situs penyingkat URL sudah siap di gunakan.

Cara Daftar Shorte.st 3

Sekarang saatnya anda mendapatkan uang dengan menyingkat url apapun dengan shorte.st seperti gambar berikut.

Cara menyingkat url via shorte.st

Dari gambar diatas masukan URL yang ingin anda singkat (umumnya URL yang menuju link download) di kolom yang telah disediakan kemudian klik SHORTEN & copy pastekan hasilnya ke tempat yang anda inginkan.

Demikian artikel mengenai Cara Dapatkan Uang Dengan Menyingkat URL Via Shorte.st pada kesempatan kali ini. Terima kasih sudah berkunjung.

13/12/17

Cara Membuat Tombol Suka Facebook Di Atas Postingan

Cara Membuat Tombol Suka Facebook Di Atas Postingan

Tombol like facebook atau umumnya terdapat di bagian bagian atas postingan, hal ini di maksudkan agar tombol like tersebut lebih mudah terlihat oleh pembaca dan memudahkan pembaca untuk menekan tombol tersebut jika artikel yang di posting terlihat menarik.

Contoh tombol like facebook

Nah jika anda tertarik membuatnya silakan ikuti langkah-langkah berikut:

Tambahkan CSS berikut di atas </style>

.fbliker{display:block;margin:0 0 20px 0}

Atur sendiri posisi CSS diatas sesuai dengan template yang anda gunakan.

Berikutnya taruh kode Berikut diatas </body>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/id_ID/sdk.js#xfbml=1&amp;version=v2.7&amp;appId=1190181487715105&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
</b:if>

Ganti appId=1190181487715105 dengan ID anda

Kemudian Taruh kode dibawa ini dimana tombol like facebook ini akan di tempatkan, misalnya diatas postinga atau dibawah postingan

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<span class='fbliker'>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false' data-size='small' expr:data-href='data:post.url'/>
</span>
</b:if>

Simpan template dan lihat perubahannya.

Tombol like ini hanya akan muncul pada tampilan mobile

Demikian semoga Cara Membuat Tombol Suka Facebook Di atas Postingan kali ini bermanfaat dan menambah kualitas blog anda agar lebih baik lagi.