Free Website Widgets Popular Posts Untuk Blogger

Widget Popular Posts di blogger biasanya selalu ditampilkan dengan gaya default oleh Blogger , dan juga bias kita tampilkan dengan gaya dam warna yang berbeda di blogger dengan sedikit mengedit template. Namun, sangat mudah untuk menyesuaikan Widget Popular Posts di Blogger , Anda hanya perlu mengedit kode acak  yang secara otomatis dibuat oleh Blogger ketika Anda menambahkan posting terbaru dari halaman Tata Letak Anda.

Free Website Widgets  yang berwarna yang akan membuat posting populer yang super indah. Widget Popular Posts ini diciptakan oleh orang lain, tapi saya telah memodifikasi sedikit , sekarang mari kita mulai bagaimana cara menambahkan Custum Widget Popular Posts di blogger. Setelah menambahkan widget ini ke blog Anda , posting populer di blog Anda akan melihat persis seperti yang Anda lihat di gambar.

Bagaimana Cara menambahkan Widget Popular Posts Untuk Blogger ?

Ikuti langkah-langkah berikut ini :

Masuk ke Dashboard Blogger anda

• Arahkan kursor ke tanda panah sebelah kanan atas dan Klik menu template Template -> Edit HTML

• Lalu cari  kode </b:skin> (caranya lihat gambar di bawah ini)

Jika Anda tidak terbiasa dengan halaman baru Blogger HTML, kamu hanya tinggal melihat gambar di atas bagaimana cara  untuk menemukan kode </ b: skin>, jika kamu menemukan kode <b:skin> ... </ b: skin> klik tanda panah di sebelah kiri dan semua kode css akan terlihat.

• Langkah selanjutnya adalah copy kode di bawah ini dan paste diatas kode </ b: skin>:

#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 10px 0px -5px; 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;}
#PopularPosts1 img {
border-radius:200px;
width:60px; height:60px;
margin-left:4px;
}

• Langkah terkhir adalah simpan template anda dan selesai....!

Lihat blog kamu untuk melihat Custum Widget Popular Posts Untuk Blogger  yang indah di sidebar. Jika kamu belum menambahkan Widget Popular Posts maka tambahkan dan pilih 5 posts yang ditampilkan.

demikianlah search engine optimisation tips kali ini semoga bermanfaat.

Ceria & Nikmati, jika kamu menghadapi masalah, maka beritahu saya dengan memberikan komentar pada posting ini. Selamat mencoba.. thank..

More about → Free Website Widgets Popular Posts Untuk Blogger

Free Website Widgets Label Yellow For Blogger

Salam semua sahabat blogger di seluruh penjuru dunia, pada kesempatan ini saya akan membagikan sebuah tutorial atau search engine optimisation tips kali ini yaitu cara menambahkan Custum Widget Label Yellow For Blogger, seperti yang kita  lihat pada gambar terlihat sangat menarik dan sangat berguna bagi blog kita, widget ini berguna untuk membuat kategori semua postingan kita sehinggga para pengunjung sangat mudah menemukan apa yang mereka cari dan pengunjung juga akan betah dihalaman blok kita karena tampilannya menarik dan teratur,,

oke, tanpa memperpanjang mukaddimah saya langsung saja ke pokok permasalahan kita yaitu cara membuat Widget Label Yellow For Blogger, ikuti langkah-langkahnya sebagai berikut :

• Masuk ke Dashboard Blogger anda

•      Arahkan kursor ke tanda panah sebelah kanan atas dan Klik menu template Template -> Edit HTML

Lalu cari  kode ]]></b:skin> (caranya lihat gambar di bawah ini)

•      Kalau sudah ketemu Copy Kode dibawah ini dan paste kode ini tepat di atas ]]></b:skin>
• 
  

      .Label li:before {

        background-image: -moz-linear-gradient(left top , #FEDA71, #FEBA47);

        border-bottom: 1px solid #D99D38;

        border-left: 1px solid #D99D38;

        content: "";

        height: 1.39em;

        left: -0.69em;

        position: absolute;

        top: 0.2em;

        transform: rotate(45deg);

        width: 1.3em;

        z-index: 1;

    }

    .Label li:after {

        background: none repeat scroll 0 0 #FFFFFF;

        border: 1px solid #D99D38;

        border-radius: 4.167em 4.167em 4.167em 4.167em;

        box-shadow: 0 1px 0 #FAEABA;

        content: "";

        height: 0.5em;

        left: -0.083em;

        position: absolute;

        top: 0.667em;

        width: 0.5em;

        z-index: 9999;

    }

    .Label li {

        background-image: -moz-linear-gradient(center top , #FEDA71, #FEBA47);

        border-bottom: 1px solid #D99D38;

        border-radius: 0 0.25em 0.25em 0;

        border-right: 1px solid #D99D38;

        border-top: 1px solid #D99D38;

        box-shadow: 0 1px 0 #FAEABA inset, 0 1px 1px rgba(0, 0, 0, 0.1);

        color: #996633;

        float: left;

        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;

        font-size: 0.75em;

        font-weight: bold;

        list-style: none outside none;

        margin: 0 0 7px 20px;

        padding: 0.417em 0.417em 0.417em 0.917em;

        position: relative;

        text-decoration: none;

        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);

        z-index: 1;

    }

•      Lalu simpan template anda, dan refres halaman blogger anda selanjutnya lihat hasilnya.

     Demikianlah cara menambahkan Custum Widget Label Yellow For Blogger, Semoga tulisan ini dapat membantu anda dan saya berharap jika ada yang ingin saudara tambahkan silahkan berkomentar di bawah ini, saya akan sangat senang dengan komentar teman-teman blogger,, selamat menikmati dan terima kasih atas perhatiannya telah berkunjung ke blog saya ini..

Anda juga bisa membaca Free Website Widgets Label Cool Effec di postingan saya sebelumnya

• 
  

More about → Free Website Widgets Label Yellow For Blogger

Free Website Widgets Label Cool Effec

Free Website Widgets Label Cool Effec Untuk Blog >>> Widget ini menampilkan daftar kategori posting yang sesuai dengan pokok permasalahan masing-masing dan sesuai dengan nama label yang kita berikan pada setiap postingan. Hal ini sangat membantu untuk mengkategorikan posting dalam kelompok masing-masing masalah, misalnya kita memiliki 20 postingan tentang tutorial blogger maka semua postingan tentang tutorial yang bersangkutan dengan tutorial blogger akan masuk kedalam lebel tersebut, dan hal ini sangat membantu pengunjung untuk mencari apa yang mereka butuhkan dalam blog kita, dengan demikian tanpa kita sadari bahwa kita telah meningkatkan search engine optimisation tips, hal ini di tandai dengan membantu pengunjung untuk melihat posting di dalam kategori/label.

Widget Label blogger standar tidak begitu menarik. Jangan khawatir, di sini saya akan berbagi widget label yang menarik dan keren yang bias kita namakan dengan Free Website Widgets Label Cool Effec black labels, widget ini hanya menggunakan kode CSS sederhana. Untuk melakukan hal ini ikuti langkah-langkah di bawah ini.

       Masuk ke Dashboard Blogger anda

(Klik Gambar Untuk Memperbesar)

       Klik menu template Template -> Edit HTML

(Klik Gambar Untuk Memperbesar)

       Cari kode ]]></b:skin> 

(Klik Gambar Untuk Memperbesar)

      dan paste kode di bawah ini tepat di atas ]]></b:skin>

.Label li {
        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
        border: 1px solid;
        border-radius: 6px 6px 6px 6px;
        float: left;
        font-size: 116%;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        transition: all 0.3s ease 0s;
    }
.Label li:hover {
    transform: rotate(351deg) scale(1.7);
}

.Label a {

    color: #fff;

    text-decoration: none;

}

      
- Lalu simpan Template anda.

      itulah langkah-langkah atau cara menambahkan Free Website Widgets Label Cool Effec Untuk Blog, mudah-mudahan postingan ini dapat berguna bagi para sobat blogger semua, mohon tanggapannya dalam komentar, saya akan senang dengan komentar anda.. thank...

More about → Free Website Widgets Label Cool Effec

Cara Memasang Widget Related Posts Pada Blog

Salam semua sahabat blogger, dalam kesempatan kali ini saya akan membagikan kepada sahabat blogger semua Custum Widget Related Posts Untuk Blog, Berikut ini adalah salah satu tip untuk mempercantik tampilan Widget Related Posts pada blogger, saya pikir ini sangat penting untuk kita tambahkan widget ini pada blog kita karena akan meningkatkan pengunjung di blog kita tanpa menghabiskan banyak waktu di SEO, jika kita pelajari lebih dalam lagi maka kita akan dengan mudah menemukan bahwa widget related post adalah sumber utama untuk meningkatkan seo optimization tips. Jadi, jika kita benar-benar tertarik untuk dan ingin menampilkan posting terkait di mana postingan kita sedang dibaca oleh pengunjung.

widget yang satu ini mengandung gambar sehingga kita juga dapat melihat gambar jika postingan kita memiliki gambar. lebih kurang ini tampilannya (lihat gambar di bawah)

Oke, langsung saja ke TKP…!!!

Langkah pertama yang harus kamu lakukan adalah

• Buka dashboard blogger kamu

• Klik pada bagian Template blogger yang ingin Kamu tambahkan widget (jika kamu punya beberapa blog)

• setelah itu klik tombol/tulisan Edit HTML (lihat gambar di bawah)

• Selanjutnya Kamu harus mencari kode ini dalam template </ head> 

   Kalau susah mencarinya tekan saja Ctrl + F lalu pate kode ini </ head>  di dalam kota pencarian dan tekan Enter

  

  Kalau sudah menemukan kode </ head>  tersebut

• Sekarang paste kode ini di atas </ head> tag

<b:if cond='data:blog.pageType == "item"'><style type='text/css'>#related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; }  #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS3y6gMMMSou1ENPmRmmk4uSlQNtAvGvI40nxafZ7id6Ku_ezNuMOiaCv_0w6rA_rE2MC1u4soFJbl4vq6LltUfjUgfDXOIqsC19mm4bX4wb_BNIUbHlivkHWw71cY7hMsXVoSEhm_OhmX/s1600/no_image.jpg"; var maxresults=5; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Posts"; </script><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/><!-- remove --></b:if>

selanjutnya cari kode ini dalam template <div class='post-footer'> lalu

Tempelkan kode dibawah ini di atas kode class='post-footer'> <div

<b:if cond='data:blog.pageType == "item"'><div id='related-posts'>

<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop><script type='text/javascript'>removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script></div>

<div style='clear:both'/>

<!-- remove --></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://mbgadget.blogspot.com/2013/08/blogger-related-post.html'><img alt='Blogger related post widget' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVc1zJNTLmEe0ak1LulLC-CpX7t48_57qu_N9l0vTYh5j2uh7yE6b2ARhLaA5YIB8aHnETlgszwk23bgX15tVl4soA1yuWV0xwEzsKBYkzKB6HEuwmU7DYCcyZUyVXU91A_JYjl5FrlDN6/s1600/best+blogger+tips.png'/></a></b:if></b:if>

Setelah itu klik tombol simpan template yang ada di atas pojok kanan (warna orange)

Dan Sekarang Kamu sudah selesai dan widgate Kamu berhasil diinstal.

Kamu harus me-refresh blog Kamu untuk melihat perubahan, saya juga telah mencobanya pada beberapa blog lain sebelum memposting  di sini.

Kita sadari dan tahu bahwa ada banyak pilihan dan mengapa kita menggunakan gadget ini untuk blogger kita. Sebenarnya jika kita ingin membangun tampilan halaman sebagian besar blog kita, maka kita harus menambahkan gadget ini dan pastinya itu akan membuat respon yang jauh lebih positif dari pengunjung terhadap tampilan halaman blog kita meningkat dan lebih dari normal.

Jika ada masalah saat menambahkan Widget Related Posts Untuk Blog silahkan bertanya dalam komentar dan jangan ragu untuk memberi saran anda. hal ini untuk meningkatkan seo optimization tips pada blog ini. Thank..

More about → Cara Memasang Widget Related Posts Pada Blog

Cara Membuat Blog di Blogger

Assalamu'alaikum Wr.Wb

Dengan Mengucapkan Bismillahirrahmanirrahim,,, 

Salam sejahtera kepada semua sahabat blogger di seluruh penjuru dunia,,, Pada malam ini tepatnya hari Sabtu / Malam Minggu Jam 23.11 WIB tanggal 23 November 2013,  saya terinspirasi untuk membuat sebuah catatan kecil sebagai koleksi dan dokumentasi pribadi di dalam sebuah blog/websete, sehingga saya membuat blog yang saya beri nama http://fe-blogger.blogspot.com/ yang artinya.....nanti di postingan selanjutnya akan saya beritahukan...

Pada postingan pertama ini saya akan membahas tentang bagaimana cara membuat blog di blogger, mungkin ini adalah tutorial yang sudah umum dan pasaran atau bahkan sudah basi dikalangan para blogger, tapi tulisan ini saya khususkan bagi pemula seperti saya ini yang baru belajar membuat blog, setelah saya pelajari dari beberapa sumber dan menerawang kesana-kemari akhirnya saya bertekad untuk membuat sebuah blog karena menurut saya untuk memulai membuat blog itu bukanlah hal yang sangat sulit dan tidak menghabiskan biaya sedikitpun (Gratis), yang kita butuhkan hanyalah koneksi internet, sedikit usaha dan bersabar.

Saya berpikir bahwa daripada kita menuliskan sebuah diare di buku catatan pribadi, lebih baik kita Buat Website Gratis sebagai catatan pengalaman dan dokumentasi pribadi, dimana kita tidak akan direpotkan dengan membawa semua buku catatan ketika kita bepergian atau kita pindah tempat tinggal, dengan membuat sebuah blog gratis kita bisa membacanya disetiap saat dan dimana pun kita berada jika ada koneksi internet, ke ujung dunia sekalipun.

Jadi, langkah pertama yang harus kita lakukan untuk Buat Website Gratis di blogger adalah kita harus mempunyai sebuah email, anda bisa mendaftar di https://accounts.google.com/signup?hl=id cara membuat account Gmail nanti akan saya jelaskan secara ter perinci di postingan selanjutnya.

Karena ini adalah postingan pertama saya, maka sampai disini dulu penjelasan saya dan akan saya lanjutkan di postingan selanjutnya tentang cara Cara Membuat Blog di Blogger.

fe-blogger mengucapkan Terima kasih banya atas kesempatan anda membaca artikel ini, semoga bermanfaat...amiiin

More about → Cara Membuat Blog di Blogger

Recent Rotating Post Gadget with Excerpt For Blogger

This is a JavaScript code displaying the latest posts of any feed with the distinction of having two parts which can be used individually or combined.

At the top we will see a single post with the title (link), author, date and a brief summary of its content. In addition, this post will rotate automatically within a list whose number of elements will be decided by us.

At the bottom will be shown a full list with chosen posts and when we mouse over any of them, the post will be on top, breaking the automatic cycle.

But before installing anything let's see it in action to decide if it does what we want.

Loading...

How to Add Recent Rotating Posts Widget to Blogger

Step 1. Go to Layout > click on Add a Gadget link.

Step 2. From the pop-up windows, choose the HTML/Javascript gadget

Step 3. Paste this code inside the empty box:

<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 2px solid #CAD4E7;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #3D5A99;
background-color: #ECEEF5;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
font-weight: bold;
color: #3F86C6;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #eeeeee;
}
.gfg-listentry-even {
background-color : #fefefe;
}
.gfg-listentry-highlight {
background: #748BB7;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #eee;
}
.gfg-listentry-highlight a {
color: #eee;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;
}
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'http://fe-blogger.blogspot.com/feeds/posts/default?redirect=false&start-index=5&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

Customizations:

First is the feed address to display. The url http://fe-blogger.blogspot.com obviously, should be replaced with yours.

Next is start-index=5. This number indicates from which post we want to begin to show.

max-results=10 indicates the maximum number of posts that we will be reading from the feed, which is indicated in the start-index=5. This number always needs to be equal or greater to which we should see later and serves to set the number of posts that will be shown in the gadget. The easy thing would be to put 500 in order not to fail, but the higher the number is, the longer the gadget will take to load, so it's better to adjust to what we need to show.

Finally there are some parameters of the script:

title: 'Latest Posts', is the title which goes on top.
numResults: 10, number of posts that actually will be in the list
displayTime: 5000, the delay time between posts in the rotator (in milliseconds)
hoverTime: 500, minimum time for a item in the list to be displayed at the top.

If we want to hide the list and show only the posts, then change this part:

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}

 to :

.gfg-list {
display:none;
}

and if we want to display only the list, then change this part:

.gfg-entry {
background-color : white;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}

to:

.gfg-entry {
display: none; }

Step 4. Save the gadget and we're done. Enjoy!

More about → Recent Rotating Post Gadget with Excerpt For Blogger