Blogger Tutorial Web : Tips dan Trik Cara Membuat Blog dan Website Lebih Seo: Widget
Terkini Populer Kategori
News
Loading...
Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

22 November 2019

Cara Membuat Pos Populer AMP Blogger yang Valid


Jika Anda mengalami Kesalahan saat memasang posting populer widget itu adalah hal yang wajar karena widget di blogger menggunakan kode [gaya eksternal] bukan AMP yang valid, karena blogger sendiri tidak menyediakan widget AMP yang valid, jadi untuk mengatasi widget yang error seperti populer posting widget, kita harus memasukkan kode html di template atau mengedit widget yang error di blog AMP.

Langkah Buat Widget Postingan Populer Valid AMP

Seperti yang telah dibagikan oleh kompi ajaib, untuk membuat widget posting populer untuk blog AMP, Anda dapat mengedit widget posting populer yang telah kami pasang atau kami dapat menambahkan kode widget posting populer baru di template AMP blog.



Pertama, tambahkan widget dalam tata letak seperti biasa, ini akan memudahkan kita untuk meletakkan kode posting populer yang AMP valid.







  

Kedua, Edit html template Anda dan cari kode Popularposts1 hapus semua kode dari  

kode atau ganti semua kode populars css jika template Anda sudah ada.

Selesai simpan template.

Dengan menggunakan kode html di atas maka widget popularposts tidak error lagi.

Untuk itu, uji validasi AMP dapat diperiksa dengan amptest.

19 April 2013

Cara Membuat Tombol Share dan Bookmark Keren di Blog atau Website

http://2.bp.blogspot.com/-l4F3_82XKpM/UT1YyDLpSII/AAAAAAAAAzc/y_dMCl5DY0E/s320/share.png

Dipostingan Saya kali ini, Saya akan share yang membahas tentang bagaimana cara membuat tombol share dan bookmark yang keren di blog, baik itu tombol share dari facebook, twitter, google plus, ataupun yang lainnya, seperti yang Kamu lihat di sidebar blog Saya.

Untuk caranya ikuti tutorial dibawah ini :
  1. Log in ke blogger Kamu
  2. Pilih tata letak, klik add gadget
  3. Lalu masukan kode dibawah ini :
<div class="addthis_toolbox">
<div class="custom_images">
<a class="addthis_button_twitter" href="http://www.blogger.com/blogger.g?blogID=6041134822751033457"><img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgndOWhAxYNpP94JDb3lnH13aOw0BdC2M1eC8Z_nhIT6xPOKr6hOqGvKbHqHS_6PJjfShmeR30DyX_rxSzXB2MHTansl3NmgDsROz_bvB9M8c0aW8db6ZA3nkrluEec7VIl2uUzPy8IW74/s1600/twitter.png" height="35" width="35" /></a>
<a href="https://plus.google.com/" target="_blank"><img alt="Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_ecWDbz8TrXT-PK2l5T-1D67tlmS1V4nWaUD800vSAJNLm5u31m5NSLKEwdmDK6_fL6RjjRQbB9gpspADLrvEYr2CSm8krNcgJFEC7fi1K932K6vvGR3RPGheDLOcM9ck3T5-rvAtck/s1600/gplus.png" height="35" width="35" /></a>
<a class="addthis_button_facebook" href="http://www.blogger.com/blogger.g?blogID=6041134822751033457"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2hzASCdkG_Y-MNDGPUkCXX41VYEWub2ogSCqsBviUX6OOYUnBOZLipUC8oBz_nwS_0fHvVkg6rowy2pVb3GfSqK05FfGx1_oPStX1HIazwycees5WEdrktd_710LAAYfBThmv55LLyeg/s1600/facebook.png" height="35" width="35" /></a>
<a class="addthis_button_digg" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="Digg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiALCrbrYilqVdzfuZEw0c-n9zyowG4iGBwA_PLytuhfzJou88-tP2PiglQ_x7LOe4NKJN4Tf8YJjs12ag68yhCXdVxkbwEwgf2iujSGZAddFgSPrHO5hizJfX4pzqYxwYmOYcRKXYvSHM/s1600/digg.png" height="35" width="35" /></a>
<a class="addthis_button_stumbleupon" href="http://www.blogger.com/blogger.g?blogID=6041134822751033457"><img alt="Stumbleupon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWGt3gVDSUH-aX2JtKHJSb7tkdRl3jcf4tdKHHYmrume5-9152aj7FgOmPxXN_FjwtnP0h_3LEli5bAlQR949HiYllEUBfAEOiFq9yjPm3_MIergqjNLMw8RFBGj3UwwW7SuWFHG4f3gw/s1600/stumbleupon.png" height="35" width="35" /></a>
<a class="addthis_button_favorites" href="http://www.blogger.com/blogger.g?blogID=6041134822751033457"><img alt="Favorites" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7Lbvt4SZjFbJcde9-liVCey2pe69yBO2LBHk8Ls2JwQ-0svgTl7VVt1EOYdhhQ-he1tP6qb4oslYqI4-oznnX6ThO8UiXxU4scjygu-WyuQdA1ZMeY3fN0Uqwwebb5SpSmjAc2BKDgc/s1600/favorites.png" height="35" width="35" /></a>
<a class="addthis_button_more" href="http://www.blogger.com/blogger.g?blogID=6041134822751033457"><img alt="More" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrZ8dyaPinDXEifcfJn-5_5MRiWAzxnKWj718sTCDXu7bXCGo51p8-CVdfhSAyAF2iyFKPGq0rmlpQgIc3WsFRREPdbUbkqWQZeAuxKlQNmCKyKO1QoVFfNT3m2ILrlEWLAlF3xZ7a9RA/s1600/more.png" height="35" width="35" /></a>
</div>
<script src="http://s7.addthis.com/js/250/addthis_widget.js" type="text/javascript"> </div><br /></script></div>
<div style="clear:both;"></div>

4. Simpan dan lihat hasilnya

5. Mudahkan, Selamat Mencoba,,,

Cara Buat Widget Popular Post Keren Di Blog atau Website

Selamat Malam Teman Blogger, tentunya dengan menambahkan Widget Popular Post Keren Di Blog atau Website akan semakin terlihat cantik dan menarik. Banyak sekali gaya atau style yang kita inginkan untuk menambah widget demi memperindah tampilan blog.



Berikut ini langkah langkah cara membuat widget popular post yang keren :

- Langkah pertama pastikan widget popular post anda sudah aktik/terpasang (cara pasang : login ke blogger > klik tata letak > klik add gadget > klik populer entri> kemudian klik save/simpan)

- Setelah langkah diatas berhasil silahkan masuk ke template>edit HTML>centang Expand Template Widget, Cari kode seperti ini ]]></b:skin> untuk mempercepat pencarian tekan CTRL+F.

- Setelah berhasil menemukan kode di atas copy dan pastekan kode berikut tepat di atasnya :

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Langkah terakhir SAVE dan lihat hasilnya. Selamat mencoba sob.

08 April 2013

Pasang Widget SMS Gratis Untuk Meningkatkan Traffic Pengunjung Blog


Widget SMS Gratis adalah widget yang menyediakan layanan pengiriman SMS gratis. widget ini bisa dipasang diwebsite dan blog anda dengan tujuan :

penunjung akan kembali ke blog anda bila ingin kirim sms lagipenerima sms akan mendapatkan teks iklan yg bisa anda tentukan sendiri, misalnya alamat blog anda, harapannya dia akan akan mencoba sms gratis juga dengan membuka blog anda

Pilihan widget sms yaitu :
  • WIDGET 1 (banner = NO , iklan sms = YES)
    Widget SMS Gratis tanpa banner, Widget SMS Gratis ini bisa anda pasang diwebsite anda tanpa banner iklan di widget, tapi iklan muncul di setiap akhir sms yang dikirim.
  • WIDGET 2 (banner = YES, iklan sms = NO)
    Widget SMS Gratis tanpa sms iklan diakhir teks sms, Widget ini tanpa iklan di akhir SMS tapi ada iklan banner kecil di bawah widget.
  • WIDGET 3 (banner = YES, iklan sms = YES)
    Widget SMS Gratis dengan iklan diakhir sms, tapi ini iklan bisa anda tentukan sendiri, Widget ini ada iklan banner kecil di bawah widget. Misalnya ada punya blog atau website dg nama www.tobadak.com, maka setiap pengunjung mengirim SMS akan ada teks -www.tobadak.com- di akhir setiap sms yg dikirim.


CARA PASANG WIDGET UNTUK BLOGSPOT
1. Silahkan login ke akun Blogger anda
2. Klik menu Rancangan
3. Lalu klik add gadget atau “tambah gadget”
4. Selanjutnya pilihlah gadget Java script/HTML
5. Dan isikan kode berikut ke dalamnya

Wedget 1

<iframe name="wg1" src="http://sms600.com/wg1"
frameborder="0" width="250" height="290"></iframe>

Wedget 2

<iframe name="wg2" src="http://sms600.com/wg2"
frameborder="0" width="250" height="290"></iframe>

Wedget 3

src="http://sms600.com/wg3/index.php?
teks="www.tobadak.com" frameborder="0"
width="250" height="290"></iframe>





Contoh tampilan WIDGET 3


Sumber : www.sms600.com

16 March 2013

Pasang Musik Player di Blogspot atau Website

Musik mungkin bagi sebagian orang adalah sumber inspirasi. Tiada hari tanpa musik, mungkin begitu slogannya. Segala aktivitas akan terasa hambar tanpa mendengarkan musik, begitu juga dengan aktivitas blogging Anda. Jika Anda adalah penggemar musik dan ingin blogging sambil  mendengarkan musik, pada tutorial kali ini saya akan membahas tentang bagaimana cara memasang musik player di blog. Dengan memasang musik player di blog maka tidak hanya anda tetapi pengunjung blog anda juga bisa menikmati lagu kesayangan anda. Sehingga cara ini sangat cocok bagi anda yang blognya berisi tentang musik atau bagi anda yang ingin mempromosikan lagu pribadi.

Banyak sekali situs layanan musik player untuk dipasang di blog yang beredar di internet. Dari sekian banyak layanan yang ada. Menurut saya ada 2 musik player yang cukup bagus yakni Musik-live daneSnips. Kedua musik player ini masing-masing memiliki kelebihan dan kekurangannya. Sehingga silahkan anda tentukan sendiri mana yang lebih cocok untuk dipasang diblog Anda.

Kali ini kita akan menggunakan widget dari Musik-live.net  [screenshoot-nya seperti ini]

pasang musik player

Baiklah, kita mulai saja langkah-langkahnya :
  1. Pertama yang mesti dilakukan adalah buka browser dan ketikan http://www.musik-live.net 
  2. Kemudian klik Skin Mp3 Player 
  3. Pilih Skin/tampilan yang anda inginkan, klik Preview skin untuk melihat tampilannya
  4. Copy kodenya
  5. Masuk ke Blogger dengan ID anda
  6. Klik menu Tata Letak -> Elemen Laman 
  7. Klik Tambah Gadget 
  8. Pilih HTML/Javascript 
  9. Pastekan pada kota HTML/Javascript 
  10. Simpan, selesai
Kelebihan:
  • Lagu sudah tersedia, tinggal pasang
  • Banyak model skin yang bisa anda pilih
Kelemahan:
  • Tidak bisa upload lagu sendiri

Catatan: 
Cara diatas lagu yang muncul adalah lagu yang sudah disediakan. Jika anda ingin memilih sendiri lagu yang ingin ditampilkan berikut caranya :
  1. Pada halaman depan Musik-Live, cari lagu favorit anda dengan kotak pencari.
  2. Lalu klik Play & Embed code untuk menampilkan kodenya
  3. Copy kodenya lalu paste ke menu HTML/ Javascript blogger anda.
  4. Selesai
Catatan: 
Cara ini hanya bisa untuk memutar 1 lagu saja. Jika anda ingin memutar banyak lagu maka gunakan eSnips.

Banyak sekali pilihan jenis musik player yang ingin dipasang di blog, terserah Anda mau pilih yang mana. Dan semuanya sangat gampang dalam proses pemasangannya. Demikian tadi tutorial singkat dari saya mengenai cara memasang musik player di blog, semoga bermanfaat dan selamat mencoba.

Semoga Bermanfaat....

26 February 2013

Pasang Related Post Pada Template

Pasang Related Post Pada Template

Sore tadi sambil nunggu bedug magrib ada dua kegiatan dalam per blogan ini, yang pertama menjawab pertanyaan tentang cara Buat Logo atau Banner dengan Cool Text , bisa lihat disini atau bisa yang ini dan yang kedua menambahkan artikel yang berhubungan atawa Related Post Pada Template, buktinya sekarang disetiap postingan Saung Web ada Related Post nya. hehehe.. sebelum lupa atau jika nanti diperlukan lagi.. segera saja posting tentang Pasang Related Post Pada Template. atau

Ada beberapa versi untuk related post ini dan yang dipakai Saung Web mungkin yang paling simple, script nya sedikit gak seperti versi lainnya. Ohya perlu diingat juga bahwa kita mesti jeli apabila template yang mau di ubah itu sudah ada redmore nya, sebab susunan kode2 nya agak beda. Seperti template yg dipakai saung web ini juga dah ada redmorenya.
Langsung meluncur ke TKP.. inilah cara Pasang Related Post Pada Template Blog :
1. Login ke dashboard , pilih EDIT MTML , contreng exspand widget template
2. Cari kode seperti ini :
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
3. Pada template Saung web yg sudah ditambah redmore, kodenya seperti ini :
<data:post.body/>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='&quot;javascript:showFull(\&quot;post-&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0);'>[+/-] Red More....</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='&quot;javascript:hideFull(\&quot;post-&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0);'>[+/-] Ringkasan....</a></p>
</span>
<script type='text/javascript'>checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;)</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Paste code yg diminta No. 4 disini
<div class='post-footer'>
4. Copy kode <div id='related_posts'/> dan paste di antara
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Paste di sini <div class='post-footer'>
5. Untuk yang sudah ada redmorenya lihat tempat paste codenya pada pint 3 diatas.
6. Setelah itu copy kode ini dan Paste di atas </body>
<script src='http://www.google.com/jsapi'/>
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>
7. Selesai , jangan lupa simpan template. Lihat hasilnya
Kalau berminat , silahkan di coba…. Kalau berhasil pertanda dosanya kecil.. hihihik..

Ads Auto


Photography

[Photography][recentbylabel2]

Economy

[Economy][recentbylabel2]