Tampilkan postingan dengan label Widget Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Widget Blog. Tampilkan semua postingan

Cara Memasang Recent Posts Dengan Thumbnail di Blog

Memasang Recent Posts Dengan Thumbnail - atau widget artikel terbaru, merupakan salah satu widget yang sangat penting untuk membantu meningkatkan jumlah page view blog. Mengapa? karena widget tersebut dapat menampilkan link-link yang menuju ke beberapa artikel yang terakhir yang telah kita buat jadi pengunjung blog dapat mengetahui mana artikel terakhir yang kita buat. Pada artikel sebelumnya saya telah membahas bagaimana cara membuat / memasang widget recent post berdasarkan label atau kategori.

Ok, bagi sobat yang penasaran ingin tahu bagaimana tampilannya, anda dapat melihat gambar dibawah ini :

Cara Memasang Recent Posts Dengan Thumbnail di Blog



Bagaimana, kerenkan? ok bagi anda yang tertarik untuk memasang widget ini, silahkan ikuti beberapa langkah membuat / memasang widget recent post dibawah ini :

1. Silahkan login ke blogger
2. kemudian klik "Layout  -->  Add a Gadget  -->  HTML / Javascript"
3. selanjutnya copy-paste kode script dibawah ini kedalam kota isian HTML/Javascript!
<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://www.webaholic.co.in/other/recent-posts-widget-with-images.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://www.zicblogger.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Keterangan :
  • Ganti kode  zicblogger  dengan alamat 
  • Untuk mengatur jumlah artikel yang akan ditampilkan, silahkan ganti kode  5.

4. Klik tombol Save.

5. Selesai.Selamat anda telah berhasil memasang widget recent posts di blog!



Bagaimana mudah bukan? ok selamat mencoba! Mungkin hanya ini yang dapat saya sampaikan kali ini, untuk kurang dan lebihnya mohon dimaafkan. Terimaksih



 Baca artikel menarik lainnya :




 

Cara Memasang Threaded Comment Paling Keren di Blog

Cara Memasang Threaded Comment Paling Keren di Blog - hai sahabat blogger, bagaimana kabarnya? semoga anda selalu berada dalam keadaan yang super, sesuper pagi hari ini, amiin. Pada kesempatan kali ini kita akan membahas hal-hal yang berkaitan dengan tutorial blog yaitu mengenai bagaimana cara memasang fitur threaded comment di blog. Tapi sebelum kita membahas lebih jauh, mari kita cari tahu dulu apa yang dimaksud dengan threaded comment! 

Cara Memasang Threaded Comment Paling Keren di Blog

Apa itu threaded comment?

Theaded comment yaitu fitur komentar / form komentar yang lebih interaktif yang fungsi utamanya adalah untuk memudahkan admin dan pengunjung blog dalam membalas komentar yang masuk ke blog dengan fitur Reply-nya, yang jika anda gunakan, komentar balasan anda tidak akan masuk menjadi komentar paling akhir di dalam postingan itu, melainkan akan muncul tepat dibawah komentar yang ingin anda balas. Bingung ya? dari pada bingung mending  langsung saja lihat gambar dibawah ini :



Bagaimana, sekarang anda sudah tahukan, apa itu threaded comment? bagaimana apakah anda juga berminat untuk memasangnya di blog anda? Jika jawaban anda ya, silahkan ikutli beberapa langkah mudah memsang fitur threaded comment pada blog dibawah ini :


Langkah Pertama | Mengaktifkan Fitur Threaded Comment


1. Login ke akun blogger
2. Klik "Template"

3. Lalu klik "Edit HTML"
 
4. Setelah itu centang pada :

 

5. Kemudian cari kode script berikut ini :
<b:include data='post' name='comments'/>

biasanya anda akan menemukan 4 kode semacam ini,

6. Jika kode pada langkah no.5 sudah ditemukan, selanjutnya ganti semua kode tersebut dengan kode dibawah ini :

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>



7. Jika sudah, silahkan simpan template!


Sampai disini fitur threaded comment pada blog anda sudah aktif, selanjutnya tinggal merubah tampilan dari threaded comment tersebut. Untuk lebih jelasnya, mari kita lanjut baca!



Langkah Kedua | Memodifikasi Tampilan Threaded Comment di Blog!



1. Silahkan login ke akun blogger
 
2. Klik menu "Template"
 
3. Lalu klik "Edit HTML"
 
4. Kemudian cari kode berikut ini :
]]></b:skin>


5. kemudian anda letakkan kode dibawah ini tepat dibawah kode pada langkah no.4 :
/*------------- START Blogger Threaded Comments  -------------*/
    .comments {
      clear: both;
      margin-top: 10px;
      margin-bottom: 0px;
      line-height: 1em;
    }
    .comments .comments-content {
    font-size: 12px;
    margin-bottom: 16px;
    font-weight: normal;
    text-align:left;
    line-height: 1.4em;
    }
    .comments .comment .comment-actions a {
    display: inline-block;
    margin: 0;
    padding: 1px 6px;
    border: 1px solid #C4C4C4;
    border-top-color: #E4E4E4;
    border-left-color: #E4E4E4;
    color: #424242 !important;
    text-align: center;
    text-shadow: 0 -1px 0 white;
    text-decoration: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #EDEDED;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
    background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
    font: 11px/18px sans-serif;
    padding:2px 8px; margin-right:10px;
    }
    .comments .comment .comment-actions a:hover {
    text-decoration: none; background:#fff; border:1px solid #5AB1E2;
    }
    .comments .comments-content .comment-thread ol {
      list-style-type: none;
      padding: 0;
      text-align: none;
    }
    .comments .comments-content .inline-thread {
      padding: 0.5em 1em;
    }
    .comments .comments-content .comment-thread {
      margin: 8px 0px;
    }
    .comments .comments-content .comment-thread:empty {
      display: none;
    }
    .comments .comments-content .comment-replies {
      margin-top: 1em;
      margin-left: 40px;   font-size:12px; background:#EBF5FE;
    }
    .comments .comments-content .comment {
      margin-bottom:16px;
      padding-bottom:8px;

    }
    .comments .comments-content .comment:first-child {
      padding-top:16px;
    }
    .comments .comments-content .comment:last-child {
      border-bottom:0;
      padding-bottom:0;
    }
    .comments .comments-content .comment-body {
      position:relative;
    }
    .comments .comments-content .user {
      font-style:normal;
      font-weight:bold;
    }
    .comments .comments-content .user a {
    color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
    }
    .comments .comments-content .icon.blog-author {
      width: 18px;
      height: 18px;
      display: inline-block;
      margin: 0 0 -4px 6px;
    }
    .comments .comments-content .datetime {
    color: #999999;
    float: right;
    font-size: 11px;
    text-decoration: none;
    }
    .comments .comments-content,
    .comments .comments-content .comment-content {
      margin:0 0 8px;
    }

    .comment-header {background-color: #F4F4F4;
        border: thin solid #E6E6E6;
        margin-bottom: 5px;
        padding: 5px;
    }
    .comments .comments-content .comment-content {
      text-align:none;
    }
    .comments .comments-content .owner-actions {
      position:absolute;
      right:0;
      top:0;
    }
    .comments .comments-replybox {
      border: none;
      height: 250px;
      width: 100%;
    }
    .comments .comment-replybox-single {
      margin-top: 5px;
      margin-left: 48px;
    }
    .comments .comment-replybox-thread {
      margin-top: 5px;
    }
    .comments .comments-content .loadmore a {
      display: block;
      padding: 10px 16px;
      text-align: center;
    }
    .comments .thread-toggle {
      cursor: pointer;
      display: inline-block;
    }
    .comments .continue {
      cursor: pointer;
    }
    .comments .continue a {
    display: inline-block;
    margin: 0;
    padding: 1px 6px;
    border: 1px solid #C4C4C4;
    border-top-color: #E4E4E4;
    border-left-color: #E4E4E4;
    color: #424242 !important;
    text-align: center;
    text-shadow: 0 -1px 0 white;
    text-decoration: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #EDEDED;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
    background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
    font: 11px/18px sans-serif;
    padding:2px 8px; margin-right:10px;
    }
    .comments .comments-content .loadmore {
      cursor: pointer;
      max-height: 3em;
      margin-top: 3em;
    }
    .comments .comments-content .loadmore.loaded {
      max-height: 0px;
      opacity: 0;
      overflow: hidden;
    }
    .comments .thread-chrome.thread-collapsed {
      display: none;
    }
    .comments .thread-toggle {
      display: inline-block;
    }
    .comments .thread-toggle .thread-arrow {
      display: inline-block;
      height: 6px;
      width: 7px;
      overflow: visible;
      margin: 0.3em;
      padding-right: 4px;
    }
    .comments .thread-expanded .thread-arrow {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
    }
    .comments .thread-collapsed .thread-arrow {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
    }
    .comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
    border: 1px solid #DDDDDD;}
    .comments .avatar-image-container img {
      width: 36px;
    }
    .comments .comment-block {
      margin-left: 48px;
      position: relative;
    }

    /* Responsive styles. */
    @media screen and (max-device-width: 480px) {
      .comments .comments-content .comment-replies {
        margin-left: 0;
      }
    }

    /*------------- End of Blogger Threaded Comments  -------------*/


6. Terakhir, simpan template! dan lihat hasilnya.



Jika anda melakukan semua langkah dengan benar, maka seharusnya sekarang anda sudah berhasil memasang fitur threaded comment di blog anda. Tapi terkadang walaupun sudah melakukan langkah ini dengan benar, tidak semuanya akan berhasil, karena biasanya tidak semua kode script blog sama, ada yang sudah dimodif oleh pembuat templatenya. Tapi tenang jika anda mengalami masalah, anda dapat membaca artikel selanjutnya tentang bagaimana cara memperbaiki fitur threaded comment di blog.


Demikian yang dapat saya sampaikan mengenai Cara Memasang Threaded Comment Paling Keren di Blog. Untuk kurang dan lebihnya mohon dimaafkan, semoga artikel ini dapat memeberikan manfaat. Terimakasih

Baca juga artikel menarik lainnya :

Cara Membuat Recent Posts Berdasarkan Label di Blog

Cara Membuat Recent Posts Berdasarkan Label di Blog - Selamat pagi sahabat blogger, kali ini saya akan berbagi tips bagaimana cara membuat Recent Posts Berdasarkan Label di Blog. Tapi sebelum kita membahas bagaimana cara memasangnya di blog, disini saya akan menjelaskan terlebih dahulu tentang apa itu Widget Recent Posts?

Recent Posts Berdasarkan Label di Blog, Cara Membuat Recent Posts Berdasarkan Label di Blog, zicblogger blogspot com


Recent Posts, jika kita terjemahkan kedalam bahasa Indonesia berarti Artikel Terbaru, atau postingan tebaru. Jadi kita dapat menyimpulkan bahwa Widget Recent Post adalah widget yang berisi atau menampilkan artikel terbaru atau terakhir kali dibuat oleh pemilik blog dalam jumlah yang telah ditentukan. Untuk lebih jelasnya anda dapat melihat widget recent post yang ada di blog saya yang terletak di sidebar sebelah kanan blog. Disitu anda dapat melihat widget dengan judul "Tutorial Blog" dan coba anda perhatikan, isi dari widget tersebut adalah artikel tentang tutorial blog. Selain itu ada widget dengan judul "Tips SEO" dan anda pun juga dapat mengetahui bawa isi dari widget tersebut adalah kumpulan artikel tentang tips optimasi SEO. Sampai disini saya rasa anda sudah mengerti dengan apa yang dimaksud ""Recent Posts". Ok mari kita lanjut baca!


Cara Memasang Widget Recent Post Berdasarkan Label / Kategori :


1. Silahkan login ke akun blogger
2. Klik "Tata Letak"
3. Lalu "Tambah Gadget"
4. Kemudian pilih "HTML / Javascript"
5. Silahkan copy kode dibawah ini dan paste / letakan pada kotak isian "HTML / Javascript" :
<div style='overflow: auto;background-color:#C7DFB5; margin: 0px auto; padding: 5px; height: 300px;width: 94%;text-align: left;'>
<script>
var numposts = 20;
var standardstyling = true;
</script>
<script src="http://zicscriptcoll.googlecode.com/files/recentp99.js" type="text/javascript"></script>
<script src="http://zicblogger.blogspot.com/feeds/posts/default/-/Tutorial%20Blog?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script></div>

Keterangan Kode :
  • Warna Merah ( 300 ) : Silahkan sesuaikan dengan lebar sidebar anda
  • Warna Biru ( 20 ) : Adalah jumlah artikel yang ditampilkan 
  • Warna Kuning ( zicblogger.blogspot.com ) : Ganti dengan alamat blog anda
  • Warna Ungu ( Tutorial%20Blog ) : Adalah nama label blog.

Untuk nama label, Jika label anda hanya terdiri dari satu kata, misalnya "Download" maka tinggal masukan saja kata "Download" tapi jika nama label anda terdiri dari dua kata misalnya "Tutorial Blog" maka anda harus menggantu "spasi" dengan kode "%20" sehingga akan menjadi "Tutorial%20Blog".
6. Silahkan berikan judul pada widget tersebut, misalnya "Tutorial Blog Terbaru" atau apa lah terserah anda
7. Kemdian klik simpan

Selamat, anda sudah berhasil membuat widget Recent Post berdasarkan label. Bagaimana, mudah bukan? Saya yakin anda pun pasti bisa melakukannya. Mungkin hanya itu yang dapat saya sampaikan untuk kurang dan lebihnya mohon dimaafkan. Semoga artikel ini dapat membantu. Terimakasih

Widget Lainnya :

Widget Yang Harus Dipasang di Blog

Widget Yang Harus Dipasang di Blog | Widget Penting Yang Harus Dipasang di Blog | Widget Yang Harus Dipasang di Blog :

Widget Yang Harus Dipasang di Blog ( Update! ) - SEOBLOGSPOT - Widget Yang Harus Dipasang di Blog ( Update! )

Widget Yang Harus Dipasang di Blog | Selamat pagi sahabat blogger, lagi pada ngapain nih? Walaupun saya tidak melihat anda, tapi saya bisa mengetahui apa yang sedang anda lalukan. Gak percaya? Ok akan saya tebak, saya yakin sekarang anda sedang berada didepan komputer / laptop, iya kan? Lho kok bisa tau? Bisa dong, saya gitu, hehehe. Beneran pengen tahu alasannya? Mudah saja, buktinya sekarang anda sedang membaca artikel ini hehe. Sudah dulu ya becandanya, yuk kita lanjut baca.

Widget Yang Harus Dipasang di Blog |  Dalam dunia blogging, kita sering mendengar istilah "widget", lalu apa sih widget itu? Untuk mengetahui apa itu widget, silahkan anda baca artikel sebelumnya mengenai "Cara Memasang Widget Pada Blog". Karena pada artikel ini saya tidak akan membahas apa itu widget, tapi saya akan berbagi pengetahuan saya tentang, widget penting harus dipasang di blog. Lalu widget apa sajakah itu? Silahkan simak penjelasan berikut ini :

Beberapa widget yang harus dipasang di blog :

1. Widget Artikel Terbaru / Recent Post
Mengapa kita harus memasang widget recent post? Jawabannya yaitu untuk memberitahukan kepada pengunjung tentang artikel yang baru kita buat. Jadi dengan adanya widget recent post pengunjung akan mengetahui artikel terbaru yang ada di blog kita.

2. Widget Artikel Populer / Popular Post
Widget ini dipasang untuk mengetahui artikel yang paling banyak dicari dan dibaca, sehingga kita dapat mengetahui artikel seperti apa ang dibutuhkan oleh pengnjung blog kita.

3. Widget Kategori / Label
Alasan emngapa widget ini penting untuk dipasang di blog adalah supaya kita dapat mengelompokan artikel berdasarkan kategori, sehingga pengunjung blog tidak kebingungan pada saat mencari artikel di blog kita, karena mereka hanya tinggal meng-klik label untuk mencari artikel yang mereka inginkan. Misalnya ketika pengunjung ingin mencari artikel tentang "tutorial blog" maka pengunjung bisa mengklik label / kategori "Tutorial blog".

4. Widget Related Post
Widget related posts dipasang untuk menautkan link artikel yang saling berkaitan satu sama lainnya. Misalnya ketika seorang pengunjung membaca artikel tentang blog, maka widget ini akan menampilkan artikel lainnya yang masih berkaitan dengan artikel tersebut.

5. Widget Follower
Mungkin anda sudah sering mendengar isu bahwa widget follower kurang baik jika dipasang diblog, karena biasanya widget ini yag sering menyebabkan error pada suatu blog. Tapi menurut saya tidak demikian, walaupun isu itu benar tapi saya lebih memandang dari sisi positifnya, apalagi menurut informasi yang saya baca di internet, Matt Cutts ( yang punya google ), juga menyarankan agar kita saling follow dengan blog lainnya, tujuannya yaitu untuk mencari inspirasi ketika kita kebingungan dalam menulis artikel . Sedangkan untuk bisa saling follow dengan blog lain, harus memasang widget follower di blog kita. 

6. Widget Recent Commen
Alasan mengapa widget recent coment di perlu pasang di blog yaitu untuk memberikan apresiasi atau penghargaan kepada pengunjung yang telah berkomentar di blog kita.
7. Widget Sharing Button
Widget sharing button ini sangat penting dipasang di blog kita, untuk mempermudah pengunjung dalam share ( membagikan ) artikel yang adan kita. Contoh widget Sharing Button dapat anda lihat dibawah postingan di blog saya ini ( tombol facebook share, twitter, google+ dsb )


Tambahan :

8. Widget Informasi Blog
Alasan mengapa widget informasi blog penting dipasang yaitu untuk mengetahui informasi mengenai blog kita. Widget Informasi Blog ini biasa mencangkup beberapa widget seperti berikut ini :

a. Widget Alexa Rank
Widget alexa rank ini perlu dipasang untuk mengetahui peringkat traffik blog kita di dunia ataupun lokal. 

b. Widget Google PageRank
Widget google pagerank perlu dipasang untuk mengetahui reputasi atau ranking suatu blog dimata search engine, khususnya search engine google.

c. Widget Hitstat 
Dengan memasang widget ini kita bisa mengetahui, berpa jumlah pengunjungi blog, jumlah pageview blog dan jumlah pengunjung yang sedang online di blog kita.


Mungkin hanya itu yang dapat saya sampaikan mengenai "Widget Penting Yang Harus Dipasang di Blog". Walaupun sedikit, mudah-mudahan dapat bermanfaat. Untuk kurang dan lebihnya mohon dimaafkan. Terimakasih








Cara Memasang Widget di Blog

Cara Memasang Widget Pada Blog | Cara Memasang Widget Pada Blog | Cara Memasang Widget Pada Blog :

Cara Memasang Widget di Blog - SEOBLOGSPOT - Cara Memasang Widget di Blog
imange by : http://darmasite.blogspot.com


Cara Memasang Widget Pada Blog - Selamat malam semuanya, setelah pada artikel sebelumya saya menjelaskan bagaimana cara membuat blog di blogger, kali ini saya akan menjelaskan bagaimana cara memasang widget di blog. Mungkin bagi anda yang baru terjun ke dunia blogging, masih ada yang belum tahu bagaimana cara memasang widget di blog. Ole karena itu disini saya akan mencoba menjelaskan langkah-langkah memasang widget di blog.


Cara Memasang Widget Pada Blog - Dulu ketika saya baru memulai ngeblog, saya juga pernah mengalami kesulitan dalam memasang widget. Ceritanya dulu saya ingin memasang widget popular post, seperti yang terpasang di blog teman saya. Tapi saya bingung apa yang harus saya lakukan untuk dapat memasang widget tersebut. Akhirnya tanpa fikir panjang dan saya langsung googling dan menemukan artikel yang berisi penjelasan mengenai cara memasang widget di blog. Ternyata caranya sangat mudah, kita hanya perlu melakukan beberapa klik saja hehehe. Ok dari pada kelamaan curhat, mending kita mulai berexperimen hehe. Silahkan anda simak, langkah-langkah memasang widget di blog berikut ini :

Misalnya disini saya akan menambahkan widget "Entri Populer", maka langkah-langkah yang harus dilakukan adalah sebagai berikut :

1. Pertama kita harus login ke akun blogger
2. Kemudian klik "Tata Letak" 

Cara Memasang Widget di Blog


Keterangan :
1. Klik "Tata Letak"
2. Klik "Tambah Gadget"

3. Kemudian pilih dan klik "Entri Populer"

Cara Memasang Widget di Blog - SEOBlogspot - Cara Memasang Widget di Blog


4. Selanjutnya klik "Simpan"

Cara Memasang Widget di Blog - SEOBlogspot - Cara Memasang Widget di Blog


5. Selesai, sekarang coba anda lihat hasilnya.


Bagaimana, mudah bukan? Saya yakin anda pun pasti bisa melakukannya. Oke sekarang tinggal giliran anda yang mencoba. Demikian postingan tentang "Cara Memasang Widget Pada Blog". Semoga dapat membantu dan bermanfaat. Terimakasih