Cara Pasang Widget Custom Stats di Blogger - Hallo sahabat CnT | Kreatif dan Trik, Pada Artikel yang anda baca kali ini dengan judul Cara Pasang Widget Custom Stats di Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Tips & Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Pasang Widget Custom Stats di Blogger
link : Cara Pasang Widget Custom Stats di Blogger

Cara Pasang Widget Custom Stats di Blogger

Dalam posting ini, saya akan berbagi dengan Anda Widget Custom Stats di Blogger. Dengan menggunakan widget ini Anda bisa menampilkan tampilan halaman total, jumlah posting dan jumlah komentar dari blog Anda. Blogger hanya memiliki widget jumlah halaman yang dilihat. Desain tampilan widget ini modern dan bersih. Widget ini juga menggunakan beberapa icon keren dari font awesome. Memasang widget custome stats ini sangat berguna bagi blog Anda.

Widget blogger ini membantu Anda untuk menampilkan tampilan halaman Total, komentar dan jumlah posting dari blog Anda

Cara Pasang Widget Custom Stats di Blogger

Berikut adalah beberapa langkah yang sangat sederhana untuk memasang statistik custom blogger widget. Dalam blogger widget ini menggunakan icon font awesome dan huruf PT Sans google. Jadi, Anda juga perlu menambahkan font ini di blog Anda. Jika font awesome sudah ditambahkan pada blog Anda, maka Anda tidak perlu memasang font awesome kembali.

Langkah 1: Go to Layout > Add a Gadget > Blog's Stats / Statistik blog

Langkah 2: Sekarang masuk ke Edit HTML dan cari / temukan kode di bawah.

<b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>...</b:widget>

Lalu ganti code tersebut dengan kode di bawah ini

<b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <!-- Content is going to be visible when data will be fetched from server. --> <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'> <!-- Counter and image will be injected later via AJAX call. --> <b:if cond='data:showSparkline'> <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/> </b:if> <b:if cond='data:showGraphicalCounter'> <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/> <b:else/> <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/> </b:if> <script type='text/javascript'> function postCount(json){ document.write(&quot;<span class='counts post2'> Total Posts &quot;); var count = json.feed.openSearch$totalResults.$t; document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;); document.write(&quot;</span>&quot;) } function numberOfComments(json){ document.write(&quot;<span class='counts comment'> Total Comments &quot;); var count = json.feed.openSearch$totalResults.$t; document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;); document.write(&quot;</span>&quot;) } </script> <script src='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/> <script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/> </div> </div> </b:includable> </b:widget>

Sekarang paste semua code CSS di bawah ini sebelum code </head>

<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/> <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> <style type='text/css'> /* Blogger Custom Stats widget by msdesignbd.com */ .Stats img {display:none!important;background-image:none;} .Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;} .Stats .counter-wrapper:after {content:&quot;Page Views&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#333;} .counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;} .counts .count {display:inline-block;font-size:16px;height:30px; vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;} .counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);} .counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;} .counter-wrapper.text-counter-wrapper:before, .counts:before { display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;} .counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;} .counts.post2:before {content:&quot;\f044&quot;;} .counts.comment:before {content:&quot;\f0e6&quot;;} #Stats1_content {width:auto;height:auto;background-color:#fff;} </style>

Sekarang Simpan Template Anda.
Refresh halaman blog Anda dan lihat hasilnya.
Cukup Sekian, Semoga Bermanfaat.

Sumber : FarhanWeb

Demikianlah Artikel Cara Pasang Widget Custom Stats di Blogger

Sekianlah artikel Cara Pasang Widget Custom Stats di Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Pasang Widget Custom Stats di Blogger dengan alamat link https://creatrik.blogspot.com/2017/04/cara-pasang-widget-custom-stats-di_35.html

Tweet