ikramlink.com: Widget
News Update
Loading...
Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Kamis, 03 Januari 2019

Mempercantik Popular Post Blogger



Taukah anda bahwa postingan populer atau popular post pada widget di blog anda bisa dipercantik dan menjadi lebih responsif.


Ada banyak cara yang bisa anda lakukan untuk mempercantik postingan populer pada widget blog, namun tidak semua tutorial yang tersedia bisa bekerja dan cocok dengan template blog anda.

Pada kesempatan kali ini anda bisa melihat dan mencoba menerapkan dua cara mempercantik postingan populer pada blog dengan cukup mudah dan di jamin akan cocok dengan template blog.

Cara Mempercantik Postingan Populer 1

Copy kode dibawah ini lalu paste di atas kode  </style> lalu klik simpan.


/*--- Genera Popular Posts --- */
    .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {
    background: url("http://4.bp.blogspot.com/-7CHpNrL3BIY/UQFD2sPq6LI/AAAAAAAAI8E/Jibvq813XCE/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
    list-style-type: none;
    margin: 0px 0px 5px;
    padding: 5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius: 10px 10px 10px 10px;
    }
    .popular-posts ul li:hover {
    border:1px solid #666666;
    }
    .popular-posts ul li a:hover {
    text-decoration:none;
    }

Jika ingin hanya menampilkan nomer maka anda bisa menonaktifkan bagian gambar/thumbail pada settingan widget popular post.


Cara Mempercantik Postingan Populer 2

Copy kode dibawah ini lalu paste diatas kode  </style> lalu klik simpan.


.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #359bed;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd; 
}
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Anda tinggal mengatur apakah ingin menampilkan thumbail atau hanya menampilkan nomor beserta judul saja.

Postingan populer bisa kalian maksimalkan untuk peningkatan SEO on page yang nantinya akan memperbanyak jumlah pengunjung blog, popular post juga berfungsi untuk memperlihatkan artikel atau konten yang paling banyak di baca oleh pengunjung kepada pengunjung yang membuka blog anda.

Senin, 03 September 2018

Cara Membuat Label Keren dua kolom di blogger



Cara membuat label dua kolom di blogger



Pertama login dulu ke blogger kalian.
masuk ke Tema >> Edit HTML
Copy kode script berikut ini di atas kode ]]></b:skin>


.Label {display: block;width: 100%;background: #fff;margin: 0 auto;padding:10px 0;}
.Label a:link,.Label a:visited {color:#2b2b2b}
.Label .widget-content { padding: 5px 0; margin: 0;}
.Label ul {list-style-type: none;margin: 0 0px;padding: 0; }
.Label ul li {float: left;width: 42.5%;margin: 0 7px 5px 0;color:#616060;text-decoration: none;padding: 6px;display: block;text-align: left;text-indent: 0px;font-size: 14px;background: #FFF;border: 1px solid #EFEFEF;text-transform: capitalize;border-radius: 1px;-moz-border-radius: 1px;-webkit-border-radius: 1px;}

lalu save template nya.

masuk lagi ke Tata Letak.
pasang widget Label >> Add a Gadget > pilih Label



Klik "Daftar" dan save

coba buka blog kalian dan lihat hasilnya, semoga bermanfaat.





Minggu, 26 Agustus 2018

Cara Membuat widget box subscribe Blogger Keren dan simpel




kali ini saya akan membuat sebuah tutorial bagaimana cara nya membuat widget box subscribe Blogger.

subscribe sendiri adalah tool supaya pengunjung dapat mendapatkan notifikasi artikel terbaru dari sebuat blog yang kita miliki, subscribe juga sangat sangat berpengaruh dalam kepupolaritasan blog yang dimili agar mendapat lebih banyak pengunjung. 

mungkin sudah banyak yang sudah memberikan tutorial yang sama, namun apa salahnya saya bila ingin memberikan tutorial yang sama.


Cara Membuat widget box subscribe Blogger


Pertama buka Blogger.com >> Template >> Edit HTML
Tambahkan kode dibawah tebat diatas kode ]]></b:skin> atau </style>



/* Subscribe Box */
#subscribe-box{background:#003d99;padding:20px}
#subscribe-box p{font-size:15px;color:#fff;margin:0 0 20px;padding:0}
#subscribe-box .emailfield{margin:auto}
#subscribe-box .emailfield input{padding:12px;color:#9ba7b0;border:none;font-size:14px;margin-bottom:16px;width:100%}
#subscribe-box .emailfield input:focus{color:#7f8c8d;outline:none}
#subscribe-box .emailfield .submitbutton{background:rgba(0,0,0,0.1);color:#fff;margin:0;width:100%;letter-spacing:.5px;text-transform:uppercase;transition:all .3s}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background:rgba(0,0,0,0.2);color:#fff;}


selanjutnya tambah sebuah wigdet baru

Tata Letak >> tambahkan gadget >> HTML/JavaScript

isikan kode ini di dalamnya



<div id='subscribe-box'>

<p>Subscribe below and well email you updates</p>

<div class='emailfield'>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ikramlinknet&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<input type='text' name='email' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' pattern='[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*' value='Email Address'/>

<input name='uri' type='hidden' value='ikramlinknet'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='submitbutton' type='submit' value='Submit'/>

</form>

</div>

</div>




Note :

ganti ikramlinknet dengan feed blog kalian


Simpan dan selesai

Desain

[Desain][recentbylabel]

Blogger

[Blogger][recentbylabel]
Notification
Mari berlangganan disitus kami secara gratis untuk mendapatkan informasi dan artikel terbaru melalui email dengan mengisi form Newsletter :-)
Done