Memasang Related Post with Linkwithin

08:43


Mungkin sudah banyak yang dengar atau baca tutorial ini, tetapi aku mau mempostingnya karena request dari temanku, Zahra Fathim /serius, aku ga tau nama panggilanmu. sorry :(/
Dibawah, juga ada freebies kode linkwithin yang udah aku editin.



Request Zahra

Cekidot, langsung aja. Karena ini memakan waktu yang agak lama dan bikin pusing, bagi pemula yang masih belajar kode kodean, apalagi ke doi /waduhhh ></

Install Widget
1. Silakan meluncur ke website ini.
2. Setelah itu, isi data kalian pada kotak yang tersedia;email, URL, dll.

3. Klik GET WIDGET! sesudah klik tombol biru tersebut, kamu akan langsung menuju ke lama yang menampilkan tutorial dan juga link widgetmu.
Klik INSTALL WIDGET
4. Klik link yang kuborder pada gambar diatas. Maka, akan muncul laman yang menyediakan script widgetmu. Copy script yang berada di opsi Edit Konten.


5. Biarkan laman, dan segera menuju ke Blogger.

Memasang Linkwithin
1. Langsung saja pergi ke Setelan >> Pos, komentar, dan berbagi
2. Copy kode dibawah ini. Jangan lupa letakkan script widgetnya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
KODE LINKWITHIN KALIAN
</b:if>
3. Paste kode diatas di Templat Entri, seperti gambar dibawah ini: /jangan lupa beri kode <br> sebelum kode/


Kenapa harus paste disini? Karena hal ini membantumu agar tidak perlu menaruh kodenya setiap kali akan memposting. Tapi ingat, postingan sebelum kamu menempel kode tersebut, tidak tercantum kode yang kamu tempel di kotak itu. Jadi, kamu harus menempel kode linkwithin kalian secara manual di postingan blogmu yang sudah kamu posting.

Style Linkwithin

Agar linkwithinmu menarik, kamu perlu menghiasnya dengan cara mengedit kode dibawah ini:

 .linkwithin_div {
background: #EEEEEE; /* Warna background container related postnya */
padding: 0 10px;
border-top: 1px solid #DBDBDB;  /* Border atas untuk container related postnya */
border-bottom: 1px solid #DBDBDB;  /* Border bawah untuk container postnya */
}
.linkwithin_text {
font-family: short stack;
font-size:14px; /* Ukuran related posts title */
color:#000; /* Warna related posts title */
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none;
}
.linkwithin_posts {
width: 500px !important; /* Lebar container related postnya */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #F5F5F5 !important; /* Warna background saat di hover */
}
.linkwithin_img_0 {
background: #F5F5F5;
border: 1px solid #C1C1C1; /*Warna dan jenis garis tepi gambar*/
padding: 2px !important;
transition:all .2s linear;
 -o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.linkwithin_img_0:hover {
background: #ffffff;
padding: 2px !important;
opacity:.6;
filter:alpha(opacity=60)
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
.linkwithin_title {
color: #000 !important; /* Warna judul post */
font-family: short stack;
font-size: 12px !important; /* Ukuran font judul post */
line-height: 24px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #000 !important; /* Warna judul post saat di hover */
}

Udah ada keterangannya, ya~
Silakan diutak-atik, sampai puas. Kemudian, paste kode tersebut dibawah kode ]]></b:skin>
Klik save, dan TARAAA!!

Blogmu sudah ada related postnya. Dengan memasang widget ini, memungkinkan jumlah penayangan diblogmu bertambah :D

Style Linkwithin buatanku

Mungkin ada yang malas edit, atau ga ada waktu buat ngedit? Silakan copy kode-kode dibawah ini, hasil edit dari aku :)

Square


Circle



Ada masalah dalam proses pembuatan? Bisa langsung tanyakan padaku lewat commentbox atau cbox. Jangan lupa follow agar tidak ketinggalan update tutorial terbaru seputar PC dan blog. Terima kasih udah visit!

Help by : Chiaki n' Tiara :)

You Might Also Like

0 comments

Saran dan kritik sangat dibutuhkan untuk kemajuan blog ini.... Terima kasih atas masukkannya :)

Like us on Facebook